PROGRAMACIÓN WEB
JavaScript
Prof. Milton Apaza Condori 2025 v.1
Programar
Programar es el proceso de diseñar, escribir, probar y
mantener un conjunto de instrucciones (código) que una
computadora o dispositivo puede entender y ejecutar para
realizar una tarea específica. Este proceso implica el uso de un
lenguajes de programación, que actúan como intermediarios
entre los seres humanos y las máquinas.
Definición
• Es un lenguaje de programación de alto nivel creado en
1995 por Brendan Eich.
• Inicialmente fue diseñado para hacer que las páginas web
fueran dinámicas e interactivas.
• Se ejecuta principalmente en los navegadores web (Chrome,
Firefox, Edge, etc.).
Tecnologías WEB
HTML CSS JS
Herramientas
Computadora navegador Visual Code
Características
• Es interpretado → no necesitas compilarlo, el navegador lo ejecuta directamente.
• Es multiparadigma → soporta programación estructurada, orientada a objetos y
funcional.
• Es event-driven (basado en eventos) → responde a interacciones como clics, teclas
o movimientos del ratón.
• Es asíncrono → puede ejecutar tareas en paralelo (ejemplo: cargar datos de un
servidor sin recargar la página).
• Es muy versátil → lo encuentras en webs, servidores, aplicaciones móviles,
videojuegos y hasta IoT.
PALABRAS RESERVADAS
Categoría Palabras reservadas
Palabras clave break, case, catch, class, const, continue, debugger, default, devare, do, else
export, extends, finally, for, function, if, import, in, instanceof, new, return
super, switch, this, throw, try, typeof, var, void, while, with, yield
Valores literales null, true, false
enum (y otras reservadas para futuras versiones, como posibles extensiones
Palabras futuras
del lenguaje)
Palabras estrictas implements, interface, var, package, private, protected, public, static
No utilizables como
await, arguments
identificadores
Simbolo de asignación y comparación
1 signo igual 2 signos igual
(De asignación) (De comparación)
= ==
Variables
Las variables son contenedores donde se pueden almacenar
valores. Los valores de las variables, pueden cambiar a lo largo
del programa. La palabra clave var se usa para declarar
variables de la siguiente manera:
Partes de una variable
Valor
Punto y
Signo igual coma
Palabra reservada (Signo de asignación)
var nombre = “Carlos”;
Comilla Comilla
apertura cierre
Nombre de la variable
Constantes
Una constante se define utilizando la palabra clave const Una
constante es similar a una variable pero con la diferencia principal de
que su valor no puede ser cambiado una vez que ha sido asignado. Es
decir, una vez que se le asigna un valor, ese valor permanece constante
durante toda la ejecución del script.
Variables y no permitidos
var if = 10; → palabra reservada
var else = 5; → palabra reservada
var function = 20; → palabra reservada
var var = 15; → palabra reservada
var 1edad = 30; → empieza con número
var 2025 = "año"; → empieza con número
var mi-variable = 10; → guion no permitido
var %descuento = 5; → símbolo no permitido
var nombre! = "Juan"; → símbolo no permitido
Variables y no permitidos
var nombre! = "Juan"; → símbolo no permitido
var a = 10; → nombre poco claro
var x1 = 5; → nombre poco descriptivo
var data = 50; → nombre genérico
var temp = 100; → nombre ambiguo
var nombreEstudiante$ = "Pedro"; → aunque válido, $ en exceso confunde
var apellido@ = "Gomez"; → símbolo no permitido
var class = "clase"; → palabra reservada
var const = 5; → palabra reservada
edad = 25; → variable global (sin var/const)
window = "hola"; → sobrescribir objetos globales puede romper tu código
Buenas prácticas para escribir variales
Los dos métodos recomendables:
Método: camellCase
Método: snake_case
Buenas prácticas para escribir variables
Las variables tienen que ser descriptivos.
var miEdad = 23;
var productoComprado = “Fideo”;
Tipos de datos
Tipos de datos se refiere a los tipos de variables que un programa
puede almacenar y usar. JS admite tipos de datos como números,
cadenas, booleanos, matrices. Etc.
Operadores de Matemáticos
Los operadores matemáticos se utilizan para realizar
operaciones aritméticas.
Operador Símbolo Descripción Ejemplo Resultado
Suma + Suma dos valores. 5+3 8
Resta - Resta el segundo valor del primero. 10 - abr 6
Multiplicación * Multiplica dos valores. 6*2 12
División / Divide el primer valor por el segundo. 09 - mar 3
Módulo % Devuelve el resto de la división entre dos valores. 10 % 3 1
Exponenciación ** Eleva un número a la potencia de otro. 2 ** 3 8
Incremento ++ Incrementa en 1 el valor de la variable. var x = 5; x++; x=6
Decremento -- Decrementa en 1 el valor de la variable. var y = 5; y--; y=4
Negación - Cambia el signo de un valor. -10 -10
Positivo explícito + Convierte un valor en número, si es posible. 10 10
Operadores de Comparación
Los operadores de comparación se pueden usar para comparar dos o
más variables o valores. La salida de dicho código es verdadero o falso
(1 o 0).
Operador Símbolo Descripción Ejemplo Resultado
Igualdad == Compara si dos valores son iguales, pero no verifica el tipo. 5 == "5" true
Desigualdad != Compara si dos valores son diferentes, sin verificar el tipo. 5 != "5" false
Estrictamente igual === Compara si dos valores son iguales y del mismo tipo. 5 === "5" false
Estrictamente desigual !== Compara si dos valores son diferentes o de distinto tipo. 5 !== "5" true
Comprueba si el valor de la izquierda es mayor que el de la
Mayor que > derecha. 10 > 5 true
Comprueba si el valor de la izquierda es mayor o igual al de
Mayor o igual que >= la derecha. 10 >= 10 true
Comprueba si el valor de la izquierda es menor que el de la
Menor que < derecha. 3<5 true
Comprueba si el valor de la izquierda es menor o igual al de
Menor o igual que <= la derecha. 3 <= 3 true
Operadores Lógicos
Los operadores lógicos se utilizan para evaluar y retornar
expresiones como: (Verdadero o falso).
Operador Símbolo Descripción
AND lógico & Devuelve true si ambos operadores son verdaderos.
OR lógico | Devuelve true si un operador es verdaderos.
NOT lógico ! Niega el valor lógico del operando. Convierte true en false y viceversa.
Operador de concatenación
El operador de concatenación nos ayuda a unir dos elementos
o más.
Texto 1 Espacio Texto 2
(“Hola”+ “ ”+“mundo”);
Signo Signo
más más
Comentarios en JavaScript.
Los comentarios son muy importantes para los desarrolladores.
Tenemos dos tipos de comentarios:
// Comentarios de una línea.
/* Comentarios de varias líneas. */
Aplicación de los comentarios
Ejemplos:
Sentencia IF
La sentencia if se usa en situaciones en las que solo se
necesita ejecutar un cierto bit de código si se cumplen ciertas
condiciones. La sintaxis es la siguiente:
Sentencia IF
Verificar si una persona
es mayo de edad
VERDADERO FALSO
Edad = 19
Mayor de edad Menor de edad
Sentencia IF ELSE
La instrucción else se usa para especificar un bloque de código
que se ejecutará si la condición de la instrucción no se cumple
o es falsa.
Sentencia IF ELSE IF
El if else if se usa para verificar una condición diferente si la
primera condición falla.
Sentencia SWITCH CASE
Si hay que realizar varias comprobaciones condicionales, las
declaraciones if else podrían ser largas y tediosas. Un mejor
enfoque es usar la sentencia switch, la sintaxis es:
Bucle for
El bucle for se utilizan cuando se requiere verificar una condición sobre
varias iteraciones, donde el parámetro que se somete a la verificación de
condición puede cambiar su valor. Veamos el ciclo ‘for’, la sintaxis es:
Bucle WHILE
El ciclo while busca una condición al comienzo del bloque de
código y solo ejecuta si el código de la condición se cumple.
Bucle DO WHILE
El bucle do while es similar al bucle while, con la diferencia de que
en do while, la verificación condicional se realiza al final del bloque
de código.
continue
El estado continue (continuo) solo sale de la iteración actual y
el ciclo continúa, su sintaxis es:
break
La instrucción break se usa para salir de un bucle y comenzar a
ejecutar el código después del bucle.
Funciones
Una función es un fragmento de código diseñado para realizar una
tarea en particular o reutilizarse una y otra vez. Las funciones ayudan a
reducir la longitud del código y a mejorar la capacidad de recuperación
del código.
Se puede invocar funciones desde cualquier parte de código para
ejecutar una tarea en particular.
Funciones Nombre de la función Parametro2
Palabra reservada Parametro1
Llave
function Sumar(p1, p2){ apertura
Cuerpo de
la función // Código Coma
} Paréntesis Paréntesis
apertura cierre
Llaver
apertura
Definiendo una función
Para declarar una función se escribe function el nombre y
paréntesis ().
Llamar una función
Se puede llamar a una función desde cualquier parte del programa para
comenzar su ejecución. Para llamar una función, especifique el nombre de
la función seguido de un conjunto de paréntesis. Sintaxis:
Definir una función con parámetros
Los valores se pueden enviar a una función como atributos.
Estos pueden ser operado por la función. Sintaxis:
Devolver un valor de una función
Una función puede devolver un valor desde donde se llamó
utilizando la instrucción ‘return’. Sintaxis:
Función [Link]();
La función [Link](); nos ayuda a visualizar
contenidos como: textos y variables.
Esto es un texto
Cuadro de alerta
La función ‘alert’ se puede usar para crear un cuadro de
mensaje para notificar al usuario de un evento.
Cuadro de texto por ventana
El cuadro de texto por ventana se utiliza para obtener una
entrada del usuario. Sintaxis:
Cuadro de confirmación
El cuadro de confirmación se utiliza para tomar la entrada del
usuario cuando algo necesita ser confirmado o aceptado por el
usuario.
Suma de dos números definidos por el usuario
ParseInte en Javascript
parseInt en JavaScript es una función que convierte (o parsea) una cadena de texto en un número entero.
Esta función es útil cuando necesitas convertir un string que representa un número en su equivalente
numérico, especialmente cuando el número está en formato decimal, binario, octal, o hexadecimal.
GRACIAS
EJERCICIOS PROPUESTOS
1. Variables y Operadores
[Link] dos variables y calcula su suma.
[Link] una temperatura de grados Celsius a Fahrenheit.
[Link] el área de un triángulo a partir de su base y altura.
[Link] el valor de dos variables sin usar una variable auxiliar.
[Link] el residuo de una división entre dos números.
2. Estructuras Condicionales
[Link] si un número es par o impar.
[Link] si un año dado es bisiesto.
[Link] un programa que tome tres números y encuentre el mayor.
[Link] si una cadena de texto es un palíndromo.
[Link]úa la nota de un estudiante e imprime "Aprobado" o "Reprobado".
3. Bucles
1. Imprime los números del 1 al 100.
2. Muestra los números pares entre 1 y 50.
3. Calcula la suma de los números del 1 al 10.
4. Genera una tabla de multiplicar para un número dado.
5. Imprime los primeros 10 números de la serie de Fibonacci.
4. Funciones
1. Crea una función que calcule el cuadrado de un número.
2. Escribe una función que reciba un nombre y devuelva un saludo.
3. Crea una función para verificar si un número es primo.
4. Define una función que convierta minutos en horas y minutos.
5. Crea una función que encuentre el factorial de un número.