https://elpais.com/elpais/2018/01/24/opinion/1516805456_283074.html
Autor: Juan Pablo Fuentes
Formador de programación y bases de datos
Cesta de la compra
<input type="text" id="producto"> <input type="button" onclick="comprar()" id="compra" value="Comprar"> <div id="cesta"></div>
var cesta = []; function comprar() { var producto = document.getElementById('producto').value; if (producto.trim() !== "" && cesta.indexOf(producto) === -1) { cesta.push(producto); mostrar(cesta); } else { alert("Producto incorrecto o repetido"); } } function mostrar(cesta) { var resultado = document.getElementById('cesta'); resultado.innerHTML = ""; for (var i = 0; i < cesta.length; i++) { resultado.innerHTML += "<p>" + i + ".- " + cesta[i] + "</p>"; } }
JavaScript fechas y otros
function sumar() { var num1 = document.getElementById('num1').value; var num2 = document.getElementById('num2').value; var num3 = document.getElementById('num3'); num3.value = Number(num1) + Number(num2); num3.value = suma(num1, num2); } var fecha = new Date(); var resultado = document.getElementById('resultado'); if (fecha.getDay() === 5) { resultado.innerHTML = "¡por fin es viernes!!!!"; } else { resultado.innerHTML = "Hoy NO es viernes :("; } var notas = [5, 4, 8, 9, 10]; //¿Cómo obtengo la suma? var suma=0; for (var i = 0; i < notas.length; i++) { suma+=notas[i]; } console.log(suma/notas.length); function suma(num1, num2) { return Number(num1) + Number(num2); }
Ejercicios javascript cadenas
Primeros pasos javascript
Ejemplo Layout Bootstrap
Examen
Flexbox
Enlaces con tutoriales de flexbox:
http://www.w3schools.com/css/css3_flexbox.asp
Ejemplos de flexbox:
http://webkit-flex.atomeye.com/
18 recursos interesantes:
http://bashooka.com/coding/css3-flexbox-resources/
https://www.chenhuijing.com/blog/flexbox-and-absolute-positioning/
Animaciones CSS
<div id="prueba"> <h1>hola</h1> </div>
#prueba{ width:100px; height:100px; background:red; animation-name:animacion; animation-duration:4s; animation-iteration-count: infinite; } @keyframes animacion{ 15% {transform:translate(0,200px)rotate(0deg);} 30% {transform:translate(0,200px) rotate(360deg);} 50% {transform:translate(100px,100px);background:red;} 65% {transform:translate(100px,100px);background:green;} 80% {transform:translate(100px,100px);background:blue;} }
Gráficos de funciones de transición
Incluye como generar curvas bezier: