Javascript #1
Javascript
JavaScript es un lenguaje de programación interpretado. Es uno de los lenguajes de programación más utilizados hoy en dia.
Nace con la necesidad de generar dinamismo en las páginas web.
Breve Historia
Javascript: Origen
Estadísticas
Redmonk Rank 2022
#PR en GitHub
#tags en StackOverflow
Y está en el mismo lugar desde que esta materia existe!
Javascript ¿para qué?
Algunos ejemplos:
Atwood’s Law
Corolario del Principle of Least Power
Any application that can be written in JavaScript, will eventually be written in JavaScript.
ECMAScript 6 (ES6)
ES6 - El estándar
ECMAScript (ES) es el estándar que define a JavaScript.
Vamos a indicar cambios del lenguaje así
Ejemplos
Ejemplo 1: Mensaje al usuario
Hacer una página que salude al usuario al entrar
Mostrar un mensaje saludando al usuario al entrar a la página
¿Qué vamos a aprender?
Como incluir un Javascript
Función Alert
alert("mensaje")
Buscá los cartelitos de Demo:
Recorda que en Codepen están todas las soluciones para experimentar, son lo mismo que hacemos en clase!
Pregunta
El código Javascript incluido se ejecuta automáticamente al cargar la página
¿Qué pasa si hay dos alert?
Ver la consola
Consola
Menú Chrome >
Más herramientas >
Herramientas Desarrollador
Atajo de Teclado:
Syntax Error
Resumen
Aprendimos a
Botón para saludar
Resolver el problema
¿Qué vamos a aprender?
Funciones
“Una función es un conjunto de líneas de código que realizan una tarea específica y puede retornar un valor.
Las funciones pueden tomar parámetros que modifiquen su funcionamiento.”�
Funciones
function saludar()
{
alert("Hola");
}
saludar();
Creación
Ejecución �(llamar a la función)
Funciones: Para qué?
Una función le da un nombre a una porción de código
Sirve principalmente para:
Eventos
Programación dirigida por eventos
(1) El usuario interactúa con la página
(3) En respuesta se ejecuta una parte de código JS
(4) La apariencia de la página se actualiza/modifica de alguna forma
(próximos paso)
(2) Ocurre un evento
Eventos
<button onclick="saludar();">Saludar</button>
function saludar() {� alert("Hola!");�}
Evento
Función
(handler o callback)
No recomendado
(por ahora se hace así)
Resultado
Podes ver el ejemplo aca:
Eventos
Programación dirigida por eventos
Un programa dirigido por eventos sigue los siguientes pasos:
Se definen:
Programación dirigida por eventos
Programación secuencial
Programamos dirigida por eventos
Ejemplo de tres ejecuciones diferentes:
Ev 1
Ev 1
Ev 1
Ev 2
Ev 2
Ev 3
Ev 3
Ev 3
Ev 2
Ev 2
Ev 2
Código de Inicio
Código de Inicio
Código de Inicio
Resumen
Aprendimos a
Saludo con nombre
Saludar
Consigna:
¿Qué vamos a aprender?
Variables y Constantes
Variables:
Constantes:
Variables y Constantes
Antes de ES6 | ES6 |
Declarar una variable var nombre = "Pepe"; Declarar una constante No hay | Declarar una variable let nombre = "Pepe"; Declarar una constante const cantDados = 2; |
Usar “let” es mejor, porque reduce las posibilidades de introducir errores indeseados. La diferencia la vamos a ver más adelante porque es un detalle muy fino.
Arbol HTML - DOM
Una manera de comprender las dependencias y relaciones entre elementos es mediante un diagrama de árbol.
Introducción a DOM
El Document Object Model es una API (Application Programming Interface) para documentos HTML y XML.
El DOM es un árbol de objetos...
Objetos
Acceso a atributos y llamado de métodos con .
let auto = …
auto.arranca();
auto.color = rojo;
alert(auto.ruedas);
Objetos en el DOM y JS
Existen muchos objetos ya predefinidos
Los más usados son:
Como editar el DOM
DOM - Edición
document.querySelector('#prim').innerHTML = "1- Primero";
<li id="prim">Primero</li>
<li id="seg">Segundo</li>
Al documento
DOM - Edición
<li id="prim">Primero</li>
<li id="seg">Segundo</li>
Al documento le pido el elemento con ID prim
document.querySelector('#prim').innerHTML = "1- Primero";
DOM - Edición
<li id="prim">Primero</li>
<li id="seg">Segundo</li>
Al documento le pido el elemento con ID prim, y a su contenido
document.querySelector('#prim').innerHTML = "1- Primero";
DOM - Edición
<li id="prim">1- Primero</li>
<li id="seg">Segundo</li>
Al documento le pido el elemento con ID prim, y a su contenido se lo piso con un nuevo valor
document.querySelector('#prim').innerHTML = "1- Primero";
Obtener nodos del DOM
let elem = document.getElementById("identificador");
O la versión de ES6 que usa un selector CSS:
let elem = document.querySelector("#identificador");
Leer/Editar el DOM
Las propiedades del DOM (HTML) se pueden leer/editar desde Javascript.
Ejemplo de editar el contenido:
let unDiv = document.querySelector("unDiv");
unDiv.innerHTML = "Contenido Nuevo";
Ejemplo de editar un atributo:
let lampImg = document.querySelector("lamp");
let lampImgAnterior = lampImg.src;
lampImg.src = "foto.png";
Los input tienen el atributo value, que vale lo que tiene escrito por el usuario en la interfaz.
let userIn = document.querySelector("#input");
console.log(userIn.value);
Concatenar Strings
El + concatena las cadenas de texto.
"HOLA" + "ALUMNOS"
es lo mismo que
"HOLAALUMNOS" (sin espacio)
Tiene más sentido hacerlo con variables:
let nombre = …
"HOLA " + nombre //genera el saludo con mucho espacio
Resultado
En negrita marcado lo nuevo
function ActualizarSaludo() {� //lee el nombre� let nodoInput = document.getElementById("txtNombre");� let nombre = nodoInput.value;
//lo muestra en consola (opcional, para debug)� console.log(nombre);� //lo muestra en el DOM� let nodoSaludo = document.getElementById("txtSaludo");� nodoSaludo.innerHTML = "Hola " + nombre;�}
<input type="text" id="txtNombre" oninput="ActualizarSaludo()" />�<p id="txtSaludo">ACA VA EL SALUDO</p>
LEE VALOR
PIDE NODO
ESCRIBE VALOR
PIDE NODO
DA NOMBRE A LOS NODOS
EVENTO INPUT
Resumen DOM
Las propiedades del DOM (HTML) se pueden leer/editar desde Javascript.
Estas líneas resumen todo lo que van �a necesitar en esta etapa.
let unDiv = document.getElementById("unDiv");
unDiv.innerHTML = "Contenido Nuevo";
<p ddd="cosa">Esto es un párrafo</p>
Atributos
Cierre de Tag
Contenido (innerHTML)
Tag
Elemento (lo buscamos en el DOM)
REPASO
Naming
Variables
numero = 2; //declaró variable número mágicamente
let nombre = "Pepe";
…
nombbre = "Juan"; //error, tipeo mal la variable
//crea una variable global nueva
alert(nombre) //imprime Pepe
Use Strict
"use strict";
“El use strict hace que el navegador se ponga la gorra!
Resumen
Aprendimos a
Debug
Debug
Debug es el término conocida para encontrar los errores de un programa y solucionarlos.
DEBUG
DE(lete) BUG
“Eliminar Bichos”
También se dice “debug” al proceso de hacer un seguimiento del código en la máquina y comprender mejor cómo funciona.
Veamos cómo se ejecutan las cosas con la consola
¿Qué vamos a aprender?
Ver la consola
Consola
Menú Chrome > Más herramientas > Herramientas Desarrollador
Atajo de Teclado:
Escribir por consola
Resultado
console.log("Paso 1: declarando funciones");�function ActualizarSaludo() {� //lee el nombre� let nodoInput = document.getElementById("txtNombre");� let nombre = nodoInput.value;
//lo muestra en consola (opcional, para debug)� console.log(nombre);� //lo muestra en el DOM� let nodoSaludo = document.getElementById("txtSaludo");
console.log("Paso 3: Saludo:" + nodoSaludo.innerHTML);� nodoSaludo.innerHTML = "Hola " + nombre;
console.log("Paso 4: Saludo:" + nodoSaludo.innerHTML);�}
console.log("Paso 2: continua ejecución");
Programa correcto
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
Prende y Apaga
Prende y Apaga: consigna
Consigna:
¿Qué vamos a aprender?
Eventos
Asignar handlers en HTML es mala práctica
porque mezcla HTML y JavaScript.
Esto es código Javascript adentro del .HTML!!!
No recomendado
<button type="button" onclick="verificarFormulario();">
Enviar
</button>
Eventos
En ES6, primero buscamos el elemento y luego le asociamos el handler
HTML
JS
La función sin ()
No la está llamando en esta sentencia
Le dice que función llamar (después)
Evento
Está pendiente de escuchar un
evento para ejecutarlo solo en el momento en que suceda
Event
Listener
CLICK!
let btn = document.getElementById("btn-enviar");
btn.addEventListener("click", verificarFormulario);
<button type="button" id="btn-enviar">Enviar</button>
Comparativa
let btn = document.getElementById("btn-enviar");
btn.addEventListener("click", verificarFormulario);
Es lo mismo, pero en lugar de escribir Javascript en el HTML, desde JS pedimos el nodo del DOM y le agregamos el handler del evento.
El código Javascript queda en el JS!
<button type="button" id="btn-enviar">Enviar</button>
<button type="button" onclick="verificarFormulario();">
Enviar
</button>
Más Info
Editar estilo desde Javascript
Para editar los estilos desde Javascript podemos modificar las clases de los elementos del DOM
// div es una referencia a un elemento <div>�div.classList.add("clase");�div.classList.remove("clase");�div.classList.toggle("clase");��alert(div.classList.contains("clase"));��// agregar o quitar múltiples clases�div.classList.add("clase-1", "clase-2", "clase-3");
// estilos vía JS (Mala práctica)�document.getElementById("id").style.font-size = "20px";�
Buena Práctica!
Cambiar estilos con clases
Resumen: conexión entre HTML, CSS y JS
Resultado
"use strict";
function prender() {
document.querySelector("body").classList.add("prendido");
document.querySelector("body").classList.remove("apagado");
document.querySelector("#lampara").src = "img/lampara_on.png";
}
function apagar() {
document.querySelector("body").classList.remove("prendido");
document.querySelector("body").classList.add("apagado");
document.querySelector("#lampara").src = "img/lampara_off.png";
}
document.querySelector("#btnPrender")
.addEventListener("click", prender);
document.querySelector("#btnApagar")
.addEventListener("click", apagar);
CAMBIA CLASES Y SRC DE LA IMAGEN
Extra
Funciones con parámetros
function saludar(nombre)
{
alert("Hola" + nombre);
}
saludar("Javier1");
saludar("Javier2");
parámetro formal
parámetro real, o “lo que le paso como parametro”
Eventos y parámetros
JS
let inputEmail, inputConsulta...
...
btn.addEventListener("click", sumarCinco)
function sumarCinco(evento){
sumar(5);
}
function sumar(cantidad)
{
...
Prendamos y apaguemos con el teclado
Resumen
Aprendimos a
Resumen!
RESUMEN JAVASCRIPT
El código Javascript no deberia aparecer en el archivo HTML
El código CSS no debiera aparecer en el archivo JS
Dados
Ejemplo de la práctica
Ejemplo
Hacer una aplicación web que al apretar un botón simule el lanzamiento de dos dados, sumarlos y que muestre en el HTML si salió 8.
Qué vamos a aprender
Qué vamos a aprender?
¿Qué tenemos que hacer?
Lo primero que tenemos que hacer es analizar el problema y separarlo en partes pequeñas que sean más fáciles de resolver
Analicemos el problema
Random
Math.random();
Así obtenemos un número al azar entre 0 y 1 (0 inclusive, 1 no).
Las caras de un dado son del 1 al 6, ¿cómo hacemos?
Ejemplo: http://codepen.io/webUnicen/pen/RaMpoV
Más info: https://developer.mozilla.org/en-US/docs/Web/JavaScri...
Random
Math.floor();
Que redondea al menor entero
Math.floor((Math.random() * 6) + 1);
0 < Math.random() * 6 < 5.999
Random
Arrancamos del random
0 <= Math.random() <= 0.9999999
Multiplico por 6
0 <= Math.random() * 6 <= 5.9999999
Sumo 1
1 <= Math.random() * 6 + 1 <= 6.9999999
Aplico floor
Math.floor((Math.random() * 6) + 1) ∈ {1,2,3,4,5,6}
Mostrar imágenes de los dados
Debo mostrar la imagen del dado que corresponde
al número que salió.
Nombre de mis imágenes
¿ Dónde están esas imágenes ?
http://tudai1-1.alumnos.exa.unicen.edu.ar/web-1/material/archivos/
http://tudai1-1.alumnos.exa.unicen.edu.ar/web-1/material/archivos/dado1.png
dado1.png
dado6.png
Mostrar imágenes de los dados
Debo generar un string con el nombre de la imagen
que se corresponda con el número del dado que salió.
Concatenamos sabiendo que d1 y d2 son las variables a las que se les asignan los valores de los dados y modificamos en el documento la fuente de la imagen
document.getElementById("dado1").src = "images/dado"+d1+".png";
¿ Ruta relativa o externa ?
Si estoy en Codepen o no están las imágenes en mi carpeta images el enlace es externo, debo concatenar usando:
http://tudai1-1.alumnos.exa.unicen.edu.ar/web-1/material/archivos/
Resolviendo el problema
Subdividimos el problema, primero verifiquemos si la suma de los dados da 8.
Necesitamos utilizar un condicional y comparar
Sintaxis JavaScript - if , else
if(condicion) {
// codigo SI se cumple
// la condicion
}
else {
// codigo si la condicion
// NO se cumple
}
Operadores de comparación
let materia = “Web”
if( 5 == “5”) {
//true
}
if( 5 === “5”) {
//false
}
Siempre usar ===
Uso de ; en Javascript
Siempre usar ;
Resultado
let suma = d1 + d2;� �if (suma === 8){ //verificacion si es 8 e incremento cuenta
document.getElementById("resultado").innerHTML
= "salio el 8";
}�
Resumen
Aprendimos a
Extra: 1000 veces!
Resolver el problema
Tirar los dados muchas veces, 1000.
Bucle
Debemos ejecutar muchas veces la función que arroja los dados.
for (let i = 0; i < 10; i++) { � //código ejecucion durante el bucle�}
Inicialización: el bucle se ejecuta desde un valor inicial (i = 0)
Condición: Se ejecuta siempre que la condición sea verdadera (i<10)
Actualización: En cada pasada del bucle i se modifica, i++ es sumarle 1 al anterior
x10
Resultado
Resumen
Aprendimos a
Más Información
Libros
Eventos
AHORA LES TOCA PRACTICAR :D