Programacion de aplicaciones web teoria 3

Vista previa del material en texto

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/funciones.js"></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
console.log("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;
console.log(resultado);
Array
La longitud como el tipo de los elementos de un array son 
variables.
let frutas = ["manzana", "platano", "pera"];
console.log(frutas);
Array
for, for of y 
for (let i = 0; i < frutas.length; i++) {
 console.log(frutas[i]);
}
for (let fruta of frutas) {
 console.log(fruta);
}
for (let fruta in frutas) {
 console.log(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
https://es.javascript.info/
Javascript.pdf