JavaScript
JavaScript es un lenguaje de
programación o de secuencias de
comandos que te permite implementar
funciones complejas en páginas web.
Javascript provee a las páginas web de
interactividad, es decir, permite que se
pueda comunicar con el mundo exterior.
Javascript es el lenguaje del navegador y
como tal está incorporado dentro del
mismo y no requiere otra pieza de
software para funcionar. Es importante
anotar que Javascript es la principal
herramienta de programación del lado
del cliente.
Introducción a JavaScript
JavaScript se utiliza para crear interactividad en
las páginas web, como animaciones, validación
de formularios, manipulación del
DOM(Document Object Model), entre otros.
JavaScript se lo puede utilizar para el desarrollo
de aplicaciones de Servidor ([Link]),
aplicaciones móviles (React Native), juegos y
mas.
Historia de JavaScript:
[Link]
Programar en JavaScript
Para crear código JavaScript se puede utilizar un editor de código como Visual Studio
Code. Además, se necesita un navegador web para ejecutar los programas JavaScript.
Desde VSCode creamos un nuevo archivo de nombre “[Link]” y digitamos:
<!DOCTYPE html>
<html>
<head>
<title>Mi Primer Programa JavaScript</title>
</head>
<body>
<script type="text/javascript">
[Link]("Hola, mundo");
</script>
</body>
</html>
Dentro de la etiqueta <script> va el código javascript. Ejecutamos el
programa con F5 y en el navegador presionamos F12 y miramos la
pestaña Console. Debe aparecer el mensaje “Hola, mundo”.
Mostrar mensajes con alert
<!DOCTYPE html>
<html>
<head>
<title>Mi Primer Programa JavaScript</title>
</head>
<body>
<script type="text/javascript">
alert("Esta es una alerta");
</script>
</body>
</html>
Mostrar mensajes [Link]
<!DOCTYPE html>
<html>
<head>
<title>Mi Primer Programa JavaScript</title>
</head>
<body>
<script type="text/javascript">
[Link]("Este es un mensaje");
</script>
</body>
</html>
Definición de un programa JavaScript en un archivo
separado
Otra forma de incluir JavaScript es definiendo
un archivo separado con extensión .js. Se crea
una nueva carpeta de nombre js y dentro de
ella un nuevo archivo [Link] que tendrá el
siguiente código:
[Link]("Bienvenidos al tecnólogo ADSO")
<body>
Se lo vincula en la página y se <script src="js/[Link]"></script>
ejecuta: </body>
Variables y Tipos de Datos
Cuando se declaran variables se debe considerar los siguientes tipos:
var: declara una variable, opcionalmente la inicia a un valor.
let: declara una variable local con ámbito de bloque, opcionalmente la inicia a un valor.
const: declara un nombre de constante de solo lectura y ámbito de bloque.
var nombre = "Lucy";
let edad = 30;
const pais = "España";
[Link](nombre);
[Link](edad);
[Link](pais);
Variables y Tipos de Datos
JavaScript tiene varios tipos de datos, que se asignan a la variable de acuerdo al valor
que almacenan. Entre los principales podemos mencionar:
Undefined: indeterminado o indefinido.
Boolean: tipo booleano los valores posibles son true o false.
Number: números enteros, o decimales.
String: cadenas de texto.
BigInt: números enteros grandes.
Symbol: referencia a otros datos.
Una variable en JavaScript puede tener cualquier tipo de dato, entero, real, cadena de
texto etc. JavaScript no es un lenguaje fuertemente tipado de manera que queda en el
programador la responsabilidad de saber qué tipo de dato está almacenando en cada
variable.
Operadores de asignación
Un operador de asignación asigna un valor a una variable. El operador de asignación
más simple es igual (=), que asigna el valor de su operando derecho a su operando
izquierdo. Es decir, x = y asigna el valor de y a x. Ejemplo x=5 indica que x recibe o
almacena el valor de 5.
Nombre Operador abreviado Significado
Asignación. x=y x=y
Asignación de adición x += y x=x+y
Asignación de resta x -= y x=x-y
Asignación de multiplicación x *= y x=x*y
Asignación de división x /= y x=x/y
Asignación de residuo x %= y x=x%y
Asignación de exponenciación x **= y x = x ** y
Operadores de comparación
Son operadores cuya función es comparar dos expresiones y como resultado de la
comparación devuelven un valor falso o verdadero (booleano).
Operador Descripción Ejemplos True
3 == var1
Igual (==) Devuelve true si los operandos son iguales. "3" == var1
3 == '3'
var1 != 4
No es igual (!=) Devuelve true si los operandos no son iguales.
var2 != "3"
Estrictamente igual (===) Devuelve true si los operandos son iguales y del mismo tipo 3 === var1
Devuelve true si los operandos son del mismo tipo, pero no iguales, o son de var1 !== "3"
Desigualdad estricta (!==)
diferente tipo. 3 !== '3'
var2 > var1
Mayor que (>) Devuelve true si el operando izquierdo es mayor que el operando derecho.
"12" > 2
Devuelve true si el operando izquierdo es mayor o igual que el operando var2 >= var1
Mayor o igual que (>=)
derecho. var1 >= 3
var1 < var2
Menor que (<) Devuelve true si el operando izquierdo es menor que el operando derecho.
"2" < 12
Devuelve true si el operando izquierdo es menor o igual que el operando var1 <= var2
Menor o igual (<=)
derecho. var2 <= 5
Operadores de aritméticos
Toman valores numéricos (ya sean literales o variables) como sus operandos y devuelve
un solo valor numérico. Los operadores aritméticos básicos son suma (+), resta (-),
multiplicación (*) y división (/).
Operador Descripción Ejemplo
Operador binario. Devuelve el resto entero de dividir los dos
Residuo (%) 12 % 5 devuelve 2
operandos.
Operador unario. Agrega uno a su operando. Si se usa como Si x es 3, ++x establece x en 4 y
operador prefijo (++x), devuelve el valor de su operando devuelve 4, mientras que x++
Incremento (++)
después de agregar uno; si se usa como operador sufijo (x++), devuelve 3 y, solo entonces,
devuelve el valor de su operando antes de agregar uno. establece x en 4.
Si x es 3, entonces --x establece x
Operador unario. Resta uno de su operando. El valor de retorno en 2 y devuelve 2, mientras que x-
Decremento (--)
es análogo al del operador de incremento. - devuelve 3 y, solo entonces,
establece x en 2.
Negación unaria (-) Operador unario. Devuelve la negación de su operando. Si x es 3, entonces -x devuelve -3.
Operador unario. Intenta convertir el operando en un número, si
Positivo unario (+) +"3" devuelve 3. +true devuelve 1.
aún no lo es.
Operador de exponenciación Calcula la base a la potencia de exponente, es decir, base
2 ** 3 retorna 8.
(**) exponente.
Operadores lógicos
Permiten crear condiciones compuestas, por ejemplo, cuando se deben cumplir dos o
más condiciones para elegir las operaciones ejecutar.
Operador Uso Descripción
Devuelve true si ambos operandos son true; de lo
AND Lógico (&&) expr1 && expr2
contrario, devuelve false.
Devuelve true si alguno de los operandos es true; si
OR lógico (||) expr1 || expr2
ambos son falsos, devuelve false.
Devuelve el valor contrario de la expresión booleana. Si es
NOT lógico (!) !expr
true devuelve false, si es false devuelve true.
Operadores
Ejercicios:
let a = 5;
let b = 3;
let suma = a + b;
let resta = a - b;
let multiplicacion = a * b;
let division = a / b;
let modulo = a%b;
let esMayor = a > b;
let esIgual = a == b;
[Link]("a:", a);
[Link]("b:", b);
[Link]("suma:", suma);
[Link]("resta:", resta);
[Link]("multiplicacion:", multiplicacion);
[Link]("division:", division);
[Link]("modulo:", modulo);
[Link]("esMayor:", esMayor);
[Link]("esIgual:", esIgual);
[Link](a > 1 && b > 5);
[Link](suma < 10 || resta > 5);
Orden de evaluación de operadores
Es importante recordar que los computadores ejecutan los operadores en un orden
establecido.
1. Paréntesis (se ejecutan primero los más internos).
2. Signo (-2), si un valor es positivo o negativo.
3. Potencias (^) y Raíces y otras funciones ([Link]()); Productos y Divisiones ( * y /),
en este mismo orden.
4. Sumas y Restas (+ y -).
5. Concatenación (+).
6. Relacionales (=, <, >).
7. Negación (no).
8. Conjunción (y).
9. Disyunción (o).
Expresiones y comentarios
JavaScript permite poner comentarios en el código fuente, como la mayoría de los
lenguajes de programación y existen dos tipos:
• comentarios en línea que comienzan con una doble barra: //
• comentarios multilínea, que comienzan con /* y terminan con */
let a = 5;
let b = 3;
//suma de variables
let suma = a + b;
//resta de variables
let resta = a - b;
/*para imprimir
utilizamos [Link]
y se muestra el resultado en consola */
[Link]("a:", a);
[Link]("b:", b);
[Link]("suma:", suma);
[Link]("resta:", resta);
Estructuras de Control
Condicional if
El condicional if permite decidir entre dos opciones resultantes de la evaluación de una
sentencia. Si la evaluación es verdadera se ejecuta una parte del código, si es false se
ejecuta otra parte diferente.
let edad=25;
if(edad>=18){
[Link]("Es mayor de edad")
}
else{
[Link]("Es menor de edad")
}
Ejercicio:
Un aprendiz aprueba un examen cuando la
calificación de este es mayor o igual a 70. Elaborar
un programa en JavaScript donde que dada una
calificación, aplique el criterio de aprobación e
imprima “Aprobado” o “Reprobado”, según sea el
caso.
Estructuras de Control
Switch
La declaración switch es una estructura de control que se utiliza para tomar decisiones basadas en
múltiples casos. Maneja la siguiente estructura:
switch (expresion) {
case valor1:
// Código a ejecutar si expresion es igual a valor1
break;
case valor2:
// Código a ejecutar si expresion es igual a valor2
break;
// Agregar más casos si es necesario
default:
// Código a ejecutar si no se cumple ningún caso anterior
}
Estructuras de Control
Switch
Ejemplo uso de switch:
let diaSemana = "Lunes";
switch (diaSemana) {
case "Lunes":
[Link]("Es el primer día de la semana.");
break;
case "Martes":
[Link]("Hoy es martes.");
break;
default:
[Link]("No es ni lunes ni martes.");
}
Ciclos
Ciclo For
Los ciclos permiten definir una estructura que repetirá varias veces una sección de código de
acuerdo al cumplimiento o no de una condición. El ciclo for permite que se repita un código un
número definido de veces utilizando un contador. Su estructura es la siguiente:
let i;
for(i=0;i<10;i++){
[Link]("numero:"+i);
};
[Link]("Fin del Ciclo");
La variable i que es el contador inicia en 0 y
se va a ir incrementando hasta el límite que
es 10. El incremento es definido de forma
automática por i++ que indica que se
incrementa la i de uno en uno. Mientras la
variable i sea menor a 10 el ciclo se repite,
por lo tanto, el ciclo se repetirá 10 veces
hasta que la i llegue a 10.
Ciclos
Ciclo For
Ejercicios:
Escribir un procedimiento que muestre siete (7) veces en pantalla la frase
“Esto es un algoritmo”. Mostrar en pantalla la salida del ejercicio.
Se necesita elaborar un algoritmo en JavaScript que, dado un número
entero, sume todos los números naturales que hay hasta ese número. Por
ejemplo, si el usuario digita 3, el programa debe sumar: 1 + 2 + 3, si el
usuario digita 5 el programa debe sumar 1+2+3+4+5. Al finalizar, debe
imprimir el resultado.
Ciclos
Ciclo While
El ciclo while permite que se repita un código un número indefinido de veces mientras se cumpla
una condición definida, cuando la condición ya no se cumple se termina el ciclo:
La variable num permitirá manejar el ciclo. Mientras que num sea menor o igual a 8 el ciclo se
repetirá e imprimirá el número par. En el while debemos crear la sentencia para incrementar la
variable, en este caso de dos en dos: num= num + 2. Generalmente el while se utiliza cuando no
se conoce el número de veces que se puede repetir el ciclo.
let num = 2;
while (num <= 8) {
[Link]("numero par:" + num);
num = num + 2;
}
[Link]("Fin del Ciclo");
