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.

● Principal uso, del lado del cliente. Existe un intérprete

javascript en cada máquina (navegadores)
● Por su popularidad se ha extendido a otras aplicaciones y
entornos fuera de la web. (por ej. mobile apps)
● Existe también del lado del servidor (node.js)
Breve Historia
● Desarrollado por Brendan Eich 1995.
● Se llamó Mocha, después LiveScript.
● Primer navegador con soporte: Netscape 2.
● NO TIENE RELACIÓN CON JAVA
Javascript: Origen
● Se popularizó con DHTML (páginas dinámicas).
● La web dejó de ser un conjunto de markup documents,
para tener comportamiento de acuerdo al usuario.
● DHTML = HTML + CSS + JavaScript + DOM
Estadísticas
Y está en el mismo lugar desde que esta
materia existe!

Redmonk Rank 2022

#tags en StackOverflow

#PR en GitHub
https://redmonk.com/sogrady/2022/03/28/language-rankings-1-22/
Javascript ¿para qué?
Algunos ejemplos:
● Validar formularios (lo que no permita HTML5)

● Reaccionar a lo que haga el usuario (click, teclear, etc)

● Cambiar algo al pasar el mouse (si no lo permite CSS)

● Partes de páginas que se muestran/ocultan

● Hacer cálculos complejos

● Carga dinámica de contenido (AJAX)

● Hacer Single Page Applications (SPAs)

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.

○ ES6 Aprobado en Junio de 2015
○ ES6 fué el cambio más grande en Javascript en años
○ Ya están aprobados hasta la versión 12 => ES12 (2021)

● Cambios de sintaxis y estructura para un código más simple y compacto

● Ya soportado casi 100% por navegadores modernos
● Link para chequear compatibilidad
● Link a la especificación del lenguaje

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?

● Incluir un archivo Javascript y ejecutarlo

● Mostrar una alerta (cartel) por pantalla

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
● La función alert nos muestra una alerta en nuestro
navegador
● La forma de usarla es:

alert("mensaje")

● No se suele usar en páginas reales, ya que no se integra

visualmente con el resto del sitio

Buscá los cartelitos de Demo:

Recorda que en Codepen están todas las soluciones
para experimentar, son lo mismo que hacemos en clase!

http://codepen.io/webUnicen/pen/eZMvzo
Pregunta
El código Javascript incluido se ejecuta automáticamente al
cargar la página
¿Qué pasa si hay dos alert?
A. Se muestran los dos mensajes

B. Se muestra uno y al aceptarlo recién se muestra el

segundo
Ver la consola
Menú Chrome >
Más herramientas >
Herramientas Desarrollador
Atajo de Teclado:
● Ctrl + Shift + I
● F12

Consola
Syntax Error
● Algunos errores del código se detectan al cargar el JS
● Otros errores luego de ejecutar esa línea
● Si no se tiene abierta a las “Herramientas de desarrollador”,
no se ven los errores
● SIEMPRE ABRIRLA AL PROGRAMAR JS!
Resumen
Aprendimos a
● Incluir un archivo Javascript y ejecutarlo

● Mostrar un cartelito por pantalla

Botón para saludar
Resolver el problema
¿Qué vamos a aprender?
● Ejecutar un código al hacer click en un botón

○ Esto se llama “al pasar un evento”

● Para eso necesitamos darle un nombre a una parte del
código
○ Esto se llama “declarar una función”
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
● En Javascript no hay diferencia entre funciones y
procedimientos
● Una función puede o no devolver datos
function saludar()
{
alert("Hola");
Creación
}

● Para llamar a esta función tengo que invocar su “firma”.

Ejecución
saludar();
(llamar a la función)
● Esto va a mostrar un cartel que diga Hola.

http://codepen.io/webUnicen/pen/YZmNwZ
Funciones: Para qué?
Una función le da un nombre a una porción de código

Sirve principalmente para:

● dividir un problema grande en varios problemas chicos

● facilitar lectura del código

○ Ej: en lugar de 1000 líneas sueltas tengo 50 funciones de 20

líneas
● reutilizar el código (llamandolo dos veces)
○ en un futuro tengo un solo lugar para modificar
Eventos
● Un evento es algo que ocurre en el sistema, originado por
el usuario o otra parte del sistema y que se avisa al
sistema.
● Ejemplos:
○ El usuario hace click.
○ Se terminó de cargar la página.
○ Pasó un segundo desde que se terminó de procesar.
● Las interfaces gráficas suelen programarse orientada a
eventos.
Programación dirigida por eventos

(2) Ocurre un
evento

(1) El usuario interactúa

con la página

(3) En respuesta se
ejecuta una parte de
(4) La apariencia código JS
de la página se
actualiza/modifica
de alguna forma
(próximos paso)
Eventos
● Los eventos son capturados por manejadores (handlers).
Evento
• HTML

<button onclick="saludar();">Saludar</button>

● Javascript

Función function saludar() {

(handler o alert("Hola!");
callback) }
No recomendado
(por ahora se hace así)
Resultado

Podes ver el ejemplo aca:

https://codepen.io/webUnicen/pen/VXWbWL
Eventos
Ejemplos de eventos:
• onclick
• onkeydown
• onload
• onfocus
• onchange (recomendado para selects)
• ondrag
• oncopy
• onpause(para media)

Hay 50~100 eventos: http://www.w3schools.com/jsref/dom_obj_event.asp

Programación dirigida por eventos
Un programa dirigido por eventos sigue los siguientes pasos:
● Comienza la ejecución del programa

● Se llevan a cabo las inicializaciones y demás código inicial

● El programa queda bloqueado “Escuchando” hasta que se

produzca algún evento

Se definen:
● Eventos (Click, Drag, Hover, Load, etc.)

● Funciones que se ejecutan en esos eventos

● Se llama el “controlador de eventos”

Programación dirigida por eventos
Programación secuencial
● Sabemos el flujo de la ejecución

Programamos dirigida por eventos

● No sabemos la secuencia exacta de ejecución

● Se disparan diferentes códigos con diferentes acciones

Ejemplo de tres ejecuciones diferentes:

Código
de Ev 1 Ev 2 Ev 3
Inicio

Código
de Ev 2 Ev 1
Inicio Ev 3

Código
de Ev 3 Ev 2 Ev 2 Ev 2 Ev 1
Inicio
Resumen
Aprendimos a
● Usar un evento

● Declarar una función

Saludo con nombre
Saludar
Consigna:
● Un lugar para escribir en la página web. A medida que

escribo mi nombre la página me dice “Bienvenido

{NOMBRE}”.
1. Bienvenido J
2. Bienvenido Ja
3. Bienvenido Jav
4. Bienvenido Javi

¿Qué vamos a aprender?

● Usar otro evento (que no es onclick)

● Editar la página web desde Javascript

● Calcular el largo de una cadena

Variables y Constantes
Variables:
● Una variable es un nombre que le damos a un valor que

puede cambiar (o no) con el tiempo (durante la ejecución

del programa)
● El nombre no es el contenido, es como llamamos a ese

valor, pero sin saber el valor exacto mientras escribimos

Constantes:
● Son un nombre que le damos a un valor

● Nunca cambia con el tiempo

● Se usan para aumentar la legibilidad del programa

Variables y Constantes
Antes de ES6 ES6
Declarar una variable Declarar una variable
var nombre = "Pepe"; let nombre = "Pepe";

Declarar una constante Declarar una constante

No hay 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.
● Representación estructurada del documento
● Permite modificar el contenido
● Es lo que conecta las páginas web con Javascript.

El DOM es un árbol de objetos...

Objetos
● En la vida real todos los objetos tienen una serie de
características y un comportamiento.
● En programación, un objeto es una combinación de
○ Campos o atributos: almacenan datos. Estos datos pueden
ser de tipo primitivo y/o otro tipo de objeto
○ Rutinas o métodos: lleva a cabo una determinada acción o
tarea con los atributos.

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:
● document: El DOM de los elementos del body y header de

este archivo HTML.

● Window: La ventana/pestaña del navegador. Es quien

tiene el método “alert” que usamos antes.

● History: El historial, nos permite ir adelante, atrás, etc

● Location:La URL de la barra de navegación.

Como editar el DOM
1. Al documento le pedimos el nodo del elemento que
queremos editar
2. A ese objeto (el nodo del arbol en cuestion) le
modificamos los atributos que necesitemos con un nuevo
valor
DOM - Edición

<li id="prim">Primero</li>
<li id="seg">Segundo</li>

document.querySelector('#prim').innerHTML = "1- Primero";

Al documento
DOM - Edición

<li id="prim">Primero</li>
<li id="seg">Segundo</li>

document.querySelector('#prim').innerHTML = "1- Primero";

Al documento le pido el elemento con ID prim

DOM - Edición

<li id="prim">Primero</li>
<li id="seg">Segundo</li>

document.querySelector('#prim').innerHTML = "1- Primero";

Al documento le pido el elemento con ID prim, y a su

contenido
DOM - Edición

<li id="prim">1- Primero</li>

<li id="seg">Segundo</li>

document.querySelector('#prim').innerHTML = "1- Primero";

Al documento le pido el elemento con ID prim, y a su

contenido se lo piso con un nuevo valor
Obtener nodos del DOM

● Se pueden obtener elementos del DOM consultando por

un ID, nombre, clase o un selector.
● Por ahora solo vamos a acceder a elementos mediante IDs

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
EVENTO INPUT

<input type="text" id="txtNombre" oninput="ActualizarSaludo()" />

<p id="txtSaludo">ACA VA EL SALUDO</p> DA NOMBRE A LOS NODOS

function ActualizarSaludo() {
//lee el nombre PIDE NODO
let nodoInput = document.getElementById("txtNombre");
let nombre = nodoInput.value; LEE VALOR
//lo muestra en consola (opcional, para debug)
console.log(nombre);
//lo muestra en el DOM PIDE NODO
let nodoSaludo = document.getElementById("txtSaludo");
nodoSaludo.innerHTML = "Hola " + nombre; ESCRIBE VALOR
}

https://codepen.io/webUnicen/pen/geRRLe
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";

Contenido
Tag (innerHTML) Cierre de Tag

SO
<p ddd="cosa">Esto es un párrafo</p>

PA
RE
Atributos Elemento (lo buscamos en el DOM)
Naming
● Variables:
○ se nombran con sustantivos
● Funciones:
○ Comienzan con verbos
○ En el caso de funciones booleanas, deben comenzar con
"is", ej: isValid()
● Usar nombres descriptivos
○ nunca son demasiado largos!
● Evitar nombres sin significado como "aux" y "temp"
Variables
● Las variables pueden declararse de forma implícita.
● La primera vez que uso una variable se declara
“automáticamente”.
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
● Es una buena práctica escribir al comenzar un archivo
Javascript
"use strict";

● Convierte en obligatoria la declaración de variables

● Restringe otros posibles errores de sintaxis

“El use strict hace

que el navegador se
ponga la gorra!

Más info : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

Resumen
Aprendimos a
● Que es el DOM

● Editar la página web desde Javascript

○ Manipular el DOM
● Usar otro evento (que no es onclick)
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?
● Cómo imprimir en la consola

● Cómo usarla para ver cómo se están ejecutando las cosas

Ver la consola
Menú Chrome > Más herramientas > Herramientas Desarrollador
Atajo de Teclado:
● Ctrl + Shift + I
● F12

Consola
Escribir por consola

● "console.log("cadena")" imprime algo en la consola

del debugger.
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");

https://codepen.io/webUnicen/pen/ZZzgxv
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:
● Botones para “prender” y “apagar” la página que

○ Cambiar el color de fondo (blanco/negro)

○ Cambiar la imagen de una lámpara
¿Qué vamos a aprender?
● Cambiar el estilo desde Javascript

● Quitar el Javascript del archivo HTML

Eventos
Asignar handlers en HTML es mala práctica
porque mezcla HTML y JavaScript.

Esto es código Javascript

adentro del .HTML!!!

<button type="button" onclick="verificarFormulario();">

Enviar
</button>

No
recomendado
Eventos

En ES6, primero buscamos el elemento y luego le

asociamos el handler
HTML
<button type="button" id="btn-enviar">Enviar</button>

JS
let btn = document.getElementById("btn-enviar");
btn.addEventListener("click", verificarFormulario);

La función sin ()
No la está llamando en esta sentencia

CLICK!
Le dice que función llamar (después)

Está pendiente de escuchar un

Event evento para ejecutarlo solo en el
Listener Evento momento en que suceda
Comparativa

<button type="button" onclick="verificarFormulario();">

Enviar
</button>

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>

let btn = document.getElementById("btn-enviar");

btn.addEventListener("click", verificarFormulario);
Más Info

https://developer.mozilla.org/en-US/docs/Web/API/Even
tTarget/addEventListener#Why_use_addEventListener
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"));
Buena Práctica!
Cambiar estilos con clases

// 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";

https://codepen.io/webUnicen/pen/qmVoMV
Resumen: conexión entre HTML, CSS y JS
● La única conexión debieran ser las clases
● Las clases son el contrato entre los tres lenguajes
● En lo único que se tienen que poner de acuerdo es en qué
significa cada clase
○ HTML le va a poner las clases a lo que corresponda
○ CSS va a hacer que se vea como dice el acuerdo
○ JS va a hacer que se comporte como dice el acuerdo
● El nombre de la clase debe ser representativo de este
contrato
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";
}
CAMBIA CLASES Y SRC DE LA IMAGEN
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);
https://codepen.io/webUnicen/pen/eoYOZP
Extra
Funciones con parámetros
function saludar(nombre)
{ parámetro
formal
alert("Hola" + nombre);
}

● Al llamarlo debo decirle el valor que tiene “nombre”

saludar("Javier1");
saludar("Javier2");
parámetro real,
o “lo que le
paso como
parametro”
Eventos y parámetros

● En los eventos no podemos tener parámetros

● El único parámetro es uno que el navegador le pasa a la
función con datos del evento.
JS
let inputEmail, inputConsulta...
...
btn.addEventListener("click", sumarCinco)

function sumarCinco(evento){
sumar(5);
}
function sumar(cantidad)
{
... https://codepen.io/webUnicen/pen/qmZOaV
Prendamos y apaguemos con el teclado
● Detectar “key-press”
● Según la tecla prender o apagar
Resumen
Aprendimos a
● Cambiar el estilo desde Javascript

○ classList
● Agregar eventos desde Javascript
○ Y así poder no tener nada de Javascript en el archivo HTML
Resumen!
RESUMEN JAVASCRIPT
● Agregamos script con ruta al archivo JS al HTML
● Obtenemos el/los elementos del DOM que va a tener
eventos
● Le decimos el/los elemento que función debe ejecutar en
que evento (addEventListener)
● Programamos las funciones
○ Obtenemos los datos que necesitemos del dom
○ Procesamos
○ Actualizamos el DOM

El código Javascript no deberia aparecer en el archivo HTML

El código CSS no debiera aparecer en el archivo JS
Dados

p l o d e
E j e m
r á c t i c a
la p
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?
● Generar un número aleatorio utilizando funciones

matemáticas de JS
● Uso de estructuras de control

○ if
● Cómo comparar y formas de comparar
¿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
- Crear el html
- Un boton que sea lanzar dado
- Dos imagenes para mostrar los dados
- funcion Lanzar
- Verificar con el IF el resultado
Random
● Para generar números al azar podemos usar
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
● Podemos utilizar también la función matemática

Math.floor();

Que redondea al menor entero

Math.floor((Math.random() * 6) + 1);

0 < Math.random() * 6 < 5.999

http://codepen.io/webUnicen/pen/RaMpoV

https://developer.mozilla.org/en-US/docs/Web/JavaScri…
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}

http://codepen.io/webUnicen/pen/RaMpoV

https://developer.mozilla.org/en-US/docs/Web/JavaScri…
Mostrar imágenes de los dados
Debo mostrar la imagen del dado que corresponde
al número que salió.

Nombre de mis imágenes

dado1.png

dado6.png

¿ 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
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/

https://codepen.io/webUnicen/pen/bvXWxo
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
● = Asignación
let materia = “Web”
● == Igualdad (!=)
○ Convierte tipos
if( 5 == “5”) {
//true
}
● === Identidad (!==)
if( 5 === “5”) {
//false
}
Siempre usar ===
● Recordemos que (==) hace conversión automática de tipos
● A veces el resultado de esta conversión no es obvia.
● Evitar esto usando (===)
● Lo mismo para != (usar !==)
Uso de ; en Javascript
● El ; es opcional, pero es una buena práctica usarlo.
● Obligatorio cuando minificas el script.

Siempre usar ;
Resultado

let suma = d1 + d2;

if (suma === 8){ //verificacion si es 8 e incremento cuenta

document.getElementById("resultado").innerHTML
= "salio el 8";
}

https://codepen.io/webUnicen/pen/yrLBdr
Resumen
Aprendimos a
● Generar un número aleatorio en JS

● Uso de estructuras condicionales

● Cómo comparar valores de variables

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

https://codepen.io/webUnicen/pen/jROOOd
Resumen
Aprendimos a
● Ejecutar N veces las mismas sentencias (iterar)

○ “for”
Más Información
Libros
● Javascript and Jquery : Interactive Front-End Web Development, Jon Duckett
Willey 2014
● Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web
Graphics, Jennifer Niederst Robbins O'Reilly Media 2012

● Standard: http://standardjs.com/rules.html
● Tutorial W3 Schools: http://www.w3schools.com/js/
● Javascript from birth to closure

Eventos
● http://www.elcodigo.net/tutoriales/javascript/javascript5.html
● http://dev.opera.com/articles/view/handling-events-with-javascript-es
AHORA LES TOCA PRACTICAR :D