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:
Degradados
<div id="prueba"> </div> <div id="prueba2"> </div> <div id="prueba3"> </div> <div id="prueba4"> </div> <div id="prueba5"> </div> <div id="prueba6"> </div> <h1>Hola que tal</h1>
div{ display:inline-block; width:500px; height:300px; border: solid 2px grey; box-shadow: 20px -10px 10px orange; margin:20px; } #prueba{ background:linear-gradient(rgba(30,90,90,0), rgba(30,90,90,1)); } #prueba2{ background:linear-gradient(45deg, red, blue,orange); } #prueba3{ background:linear-gradient(to right,red, blue); } #prueba4{ background:radial-gradient(red, blue); } #prueba5{ background:radial-gradient(circle,red, blue); } #prueba6{ background: radial-gradient(closest-side at 60% 55%, red, yellow, black); } h1{ background-color:black; text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3); color: rgba(255,255,255,0); }
Imágenes de fondo
<div id="prueba"> </div> <div id="test"> </div> <div id="test2"> </div> <ul> <li><h1>Hola que tal estamos</h1></li> <li><h1>Hola que tal estamos</h1></li> <li><h1>Hola que tal estamos</h1></li> <li><h1>Hola que tal estamos</h1></li> </ul>
#prueba{ width:500px; height:400px; border: solid 2px grey; background-image:url("img/smile.png"),url("img/textura.jpg"); background-position:right BOTTOM, left top; background-repeat:no-repeat; background-size: auto,cover; } #test{ width:500px; height:200px; border: solid 2px blue; background-image:url("img/perro.jpg"); background-size: cover; background-repeat:no-repeat; } #test2{ width:200px; height:500px; border: solid 2px blue; background-image:url("img/perro.jpg"); background-size: cover; background-repeat:no-repeat; background-position:right bottom; } li{ display:inline-block; width:150px; height:150px; border: solid 4px orange; background-image:url("img/perro.jpg"); background-size: cover; background-repeat:no-repeat; } li:nth-child(2){ background-image:url("img/smile.png"); }