Programación de
Aplicaciones Web
Javascript - Parte I
JAVASCRIPT
Temario:
● ¿Qué es?
● ¿Cómo funciona?
● ¿Qué se puede hacer?
● Ejemplos
HTML - Repaso
● Página HTML estáticas
● HTML 5
● Validaciones
Javascript
Javascript - Historia
Es un lenguaje de programación
Aparece a fines de 1995
Creado por Brendan Eich en Netscape
Jscript de Microsoft
EcmaScrip en 1997
Javascript - Funcionamiento
Interpretado
Motor JavaScript
Se ejecuta en el cliente, pero
pila de llamadas (Call Stack)
single-thread
Javascript - Utilización
Script en línea
<script>
alert ("¡Hola Mundo!");
</script>
Javascript - Utilización
Script externo:
<script src="js/[Link]"></script>
Javascript - Utilización
Momento:
● Antes de cargar la página
● Durante la carga de la página
● Después de cargar la página
Javascript - CONCEPTOS BÁSICOS
Lenguaje:
● Distingue entre mayúsculas y minúsculas (es case-sensitive)
● Las instrucciones están separadas por punto y coma (;)
● Se escanea de izquierda a derecha
Javascript - CONCEPTOS BÁSICOS
Lenguaje:
● Comentarios:
// un comentario de una línea
/* este es un comentario
más largo, de varias líneas
*/
Javascript - CONCEPTOS BÁSICOS
Lenguaje:
Nomenclatura de variables
Nomenclatura de funciones
Palabras reservadas
orden de ejecución
Javascript - CONCEPTOS BÁSICOS
Datos que son primitivos:
Booleano. true y false.
Number. Un número entero o un número con coma flotante. Por ejemplo: 42 o
3.14159.
String. Una secuencia de caracteres que representan un valor de texto. Por
ejemplo: "Hola"
Javascript - CONCEPTOS BÁSICOS
Datos que son primitivos:
null. Una palabra clave especial que denota un valor nulo.
undefined. Una propiedad de alto nivel cuyo valor no está definido.
BigInt. Un número entero con precisión arbitraria. Por ejemplo:
9007199254740992n.
Para saber el tipo de una variable: typeof(var1)
Tipos de datos
● Cuidado con los tipos, son dinámicos y no saber de qué
tipo es una variable puede cambiar el resultado.
5 == “5”//true
“1” + 2 + 3;//"123"
//Conversión manual de tipos
parseInt(“1”) + 2 + 3; //6
Javascript - Operadores
● Operadores aritméticos
● Operadores de asignación
● Operadores de cadenas
● Operadores lógicos
● Operadores condicionales
Javascript - Estructuras de control
Toma de decisiones
IF
IF anidadas
Switch
Bucles
For
While
Do While
Javascript - ¿Para qué sirve?
Páginas interactivas.
Minimizar la comunicación con el servidor.
Mejor Interface.
Retroalimentación con el usuario.
Debug
Menú Chrome > Más herramientas > Herramientas Desarrollador
Atajo de Teclado:
● Ctrl + Shift + I
● F12
Si un programa no compila, no se va a ejecutar
Los navegadores no muestran estos errores al usuario
ABRI LA CONSOLA PARA VERLOS!
SIEMPRE PROBA EL CÓDIGO JAVASCRIPT CON LA CONSOLA ABIERTA
[Link]("hola es la consola”);
Variables
JavaScript tiene tres tipos de declaraciones de variables.
● var
● let
● const
let x = 10;
let y = 20;
let resultado = x * y;
[Link](resultado);
Array
La longitud como el tipo de los elementos de un array son
variables.
let frutas = ["manzana", "platano", "pera"];
[Link](frutas);
Array
for, for of y
for (let i = 0; i < [Link]; i++) {
[Link](frutas[i]);
}
for (let fruta of frutas) {
[Link](fruta);
}
for (let fruta in frutas) {
[Link](fruta);
}
Javascript - DOM (Document Object Model)
Transforma el documento en un árbol de nodos.
Javascript - DOM (Document Object Model)
● En el DOM, todos los elementos HTML se definen como
objetos .
● La interfaz de programación son las propiedades y
métodos de cada objeto.
● Una propiedad es un valor que puede obtener o
establecer (como cambiar el contenido de un elemento
HTML).
● Un método es una acción que puede realizar (agregar o
eliminar un elemento HTML).
Javascript - DOM (Document Object Model)
• JavaScript puede cambiar todos los elementos HTML en la
página
• JavaScript puede cambiar todos los atributos HTML en la página
• JavaScript puede cambiar todos los estilos CSS en la página
• JavaScript puede eliminar elementos y atributos HTML
existentes
• JavaScript puede agregar nuevos elementos y atributos HTML
• JavaScript puede reaccionar a todos los eventos HTML
existentes en la página
• JavaScript puede crear nuevos eventos HTML en la página
JAVASCRIPT
[Link]
[Link]