Javascript
Agenda
Breve Historia
Presente
Estadísticas
2015
#Proy. En GitHub
#tags en StackOverflow
Javascript ¿para qué?
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.
Es la chica de moda de la programación hoy.
ECMAScript 6 (ES6)
ES6 - El estándar
ES6 - Cambios
Entre los cambios más notables:
Vamos a indicar cambios de sintaxis del lenguaje con este icono
ES6 - Referencias
Para conocer más acerca del nuevo estándar.
Ejemplo
Hacer una aplicación web que al apretar un botón simule el lanzamiento de dos dados 1000 veces, sumarlos y muestre en el HTML la cantidad de veces que se dá cada resultado posible.
¿Qué tenemos que hacer?
Aprender JS
Hacer algo cuando haga click
Tirar dos dado de 1 a 6
Mostrar los dados
Sumarlos
Guardar el resultado
Mostrar cuántas veces salió cada uno
Que se repita muchas veces
Analicemos el problema
Resolver el problema
Como incluir un Javascript
Conviene incluir un archivo Javascript separado. Se ejecuta su código en la línea donde se incluye.
Incluirlo al final del body, luego de que ya se cargo el html con todos sus elementos.
Se pueden agregar varios archivos .js
Función Alert
alert([mensaje])
Ejemplo Paso 2: http://codepen.io/webUnicen/pen/eZMvzo
Resolver el problema
2- Ejecutar un código al presionar un botón.
3- Hacer una función.
Sintaxis JavaScript
Sintaxis C-Like (similar a Java, PHP, C++, etc)
Así que la sintaxis básica ya la sabemos!
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 - Creación
function saludar()
{
alert(“Hola”);
}
Funciones - Ejecución
function saludar()
{
alert(“Hola”);
}
saludar();
Comentarios
¿Qué tanto comentar el código?
Eventos
Programación dirigida por eventos
Un programa dirigido por eventos sigue los siguientes pasos:�
Programación dirigida por eventos
Programación dirigida por eventos
Programación secuencial
Programamos dirigida por eventos
Ev 1
Ev 1
Ev 1
Ev 2
Ev 2
Ev 3
Ev 3
Ev 3
Ev 2
Ev 2
Ev 2
Programación dirigida por eventos
Se definen:
Eventos
Evento
Función
(handler o callback)
No recomendado
(por ahora se hace así)
Eventos
Ejemplos de eventos:
Hay 50~100 eventos: http://www.w3schools.com/jsref/dom_obj_event.asp
Ejemplo Paso 2: http://codepen.io/webUnicen/pen/ZegLJz
Resolver el problema
4-Tirar los dados.
Variables y Constantes
Antes de ES6 | ES6 |
Declarar una variable var nombre = “Pepe”; Declarar una constante No existen | Declarar una variable let nombre = “Pepe”;� Declarar una constante const cantDados = 2; |
Tipado de Variables - Tipos
http://qbit.com.mx/blog/2012/01/16/tipado-estatico-vs-tipado-dinamico/
Tipos
let nombre = “Pepe”; //nombre es un string
…
nombre = 2; //nombre es un int (cambia tipo)
Mala práctica
Tipos de Datos
Conversión de tipos
5 == “5”//true
“1” + 2 + 3;//"123"
//Conversion manual de tipos�parseInt(“1”, 10) + 2 + 3; //6
'('+nombre+', '+apellido+')'
`(${nombre}, ${apellido})`
Variables
let nombre = “Pepe”;
…
nombbre = “Juan”; //error, tipeo mal la variable, crea una variable global nueva
comparacion = (nombre == “Juan”) //false
Use Strict
“use strict”;
“El use strict hace que el navegador se ponga la gorra!
Naming
Operadores de comparación
let nombre = “Nacho”
if( 5 == “5”) {
//true
}
if( 5 === “5”) {
//false
}
Siempre usar ===
Comparaciones cortas en JS
let tmp = (bool) ? 1 : 2
es igual que
let tmp = 0;
if(bool)
tmp=1;
else
tmp=2;
Falsey evaluation
En Javascript, hay diferentes cosas que al convertirla a bool, se transforma a false automáticamente.
Null == undefined == 0 == false == ""
No es tan así, pero es una buena simplificación.
let a = null; let b; //undefined
let c = 0; let d = false;
let e = "";
if (a), if (b), if (c), if (d), if (e) //false
Puedo pasarme horas revisando un bug en una comparación, que era por un undefined en la variable.
Falsey Evaluation
Funciones - Parámetros
function sumar(a, b, c)
{
return a + b + c;
}
sumar(1, 2, 3); //6
sumar(1, 2); //NaN : Hace 1+2+undefined
sumar(1, 2, 3, 4, 5, 6); //6
Funciones - Parámetros
Concepto: Lista de argumentos.
function sumar()
{
let sum = 0;
let length = arguments.length;
for (let i=0; i<length; i++){
sum += arguments[i];
}
return sum;
}
Cuidado con esto, puede volver el código ilegible, y convertirse en una mala práctica.
sumar(1, 2, 3); //6
sumar(1, 2); //3
sumar("1" , 2, 3, 4, 5);
//"012345" /*TIPOS DINÁMICOS, APARECE UN 0 */
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 Parte 3: http://codepen.io/webUnicen/pen/RaMpoV
Más info: https://developer.mozilla.org/en-US/docs/Web/JavaScri...
Debug
Breakpoint:
Debug
Solapa de códigos
Archivos
Consola
Breakpoint
(click para agregar)
Info útil
Menú Chrome > Más herramientas > Herramientas Desarrollador
Atajo de Teclado: Ctrl + Shift + I
Debug
Syntax Error
Herramientas para analizar errores de sintaxis
Syntax Error
En Chrome se detectan errores luego de ejecutar el .js
Resolver el problema
5-Mostrar los dados en la página web.
DOM: El árbol HTML
Cuando estudiamos CSS vimos que podíamos representar la estructura del HTML con un árbol. Este árbol se llama DOM.
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
Objetos
Objetos en el DOM y JS
Existen muchos objetos ya predefinidos. Algunos son:
Objetos en el DOM y JS
Al DOM podemos:
Objetos en el DOM y JS
…
<body>
<form name="mainForm">
<input type="text" name="textBox1" />
…
document.mainForm.textBox1. value;
Obtener nodos del DOM
let elem = document.getElementById("identificador");
let arr = document.getElementsByName("nombre");
let imgTags = document.getElementsByTagName("img");�let singleElem = document.querySelector(".myclass");
let manyElems = document.querySelectorAll(".myclass");
Más info: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
Recorrer el árbol DOM
Los elementos del DOM se pueden recorrer como un árbol:
Editar el DOM
let lampImg = document.getElementById("lamp");
lampImg.style.width = "100%";
Editar el DOM
Las propiedades se pueden editar desde Javascript.
let lampImg = document.getElementById("lamp");
lampImg.src = "foto.png";
let unDiv = document.getElementById("unDiv");
unDiv.innerHTML = "Cambiar contenido";
let unBoton = document.getElementById("unBoton");
unBoton.className = "activo";
Ejemplo Parte 4: http://codepen.io/webUnicen/pen/LNdWxN
Resolver el problema
6-Contar las apariciones de cada suma.
Arreglos
Los arreglos almacenan elementos en una colección de datos ordenados.
Los elementos se acceden por índice (comienzan en 0).
let cars = ["Saab", "Volvo", "BMW"];
Acceder a un arreglo:
let car = cars[0];
console.log(car); //”Saab”
Arreglos
let arr = [1,2,3]
// definición
arr[0]
// 1
arr[5]
// undefined
arr[5] = “texto”
// [1,2,3,undefined, undefined, “texto”]
delete arr[2]
// [1,2,undefined,undefined, undefined, “texto”]
Recorriendo Arreglos
let arr = [1,2,3]
// Antes�for (var i=0; i<arr.length; i++) { // 1, 2, 3� var elem = arr[i];� console.log(elem);
}
// ES6�for (let elem of arr) { // 1, 2, 3� console.log(elem);�}
Resolver el problema
7-Tirar el dado muchas veces seguidas (para mostrar uso
de bucles-for).
7b-Que la cantidad de veces se lea desde la página web.
Complicarla un poco
Resolver el problema
8-Tirar los dados automáticamente cada cierto tiempo.
Eventos en ES6
Asignar handlers en HTML es mala práctica
porque mezcla HTML y JavaScript.
En ES6, primero buscamos el elemento y luego le asociamos el handler
HTML
JS
<button type="button" class="btn" id="btn-enviar">Enviar</button>
<button type="button" class="btn" onclick="verificarFormulario();">Enviar</button>
let btn = document.getElementById("btn-enviar")
btn.addEventListener("click", verificarFormulario)
No recomendado
Eventos en ES6
¿Qué pasa si la función tiene parámetros?
JS
let btn = document.getElementById("btn-enviar")
let inputEmail = document.getElementById("input-email")
let inputConsulta = document.getElementById("input-consulta")
btn.addEventListener("click", function(e){
verificarFormulario(inputEmail,inputConsulta)
} )
function verificarFormulario(email, consulta)
{
...
Live: https://codepen.io/webUnicen/pen/qmZOaV
Una nueva función que llama a verificarFormulario con sus parámetros
Eventos de tiempo
Se puede programar un evento, para ejecutar una función dentro de M milisegundos.
//dispara (ejecuta bang) en 5 segundos
let timer = setTimeout('bang()', 5000);
Ejemplo Parte 7: http://codepen.io/webUnicen/pen/jqzBpJ
Eventos de tiempo
Otra forma:
let timer = setInterval('clock()', 1000);
…
clearInterval(timer);
setInterval llama a la función cada 1000 milisegundos, hasta que se limpie el intervalo.
Es una mejor opción para este caso.
Ejemplos
Ejercicios
Ejercicio #1
Ejercicio #2
Más Información
Libros
Eventos
AHORA LES TOCA PRACTICAR :D