dia4.md

Clase 4

Eventos

Open Source Weekends (OSWeekends)

Lugar

• Campus Madrid

Fecha

• Sábado, 10 de Junio. 10:30-14:30

Contenido

• Charla de CSS Grid Layout con Ignacio Villanueva (@IgnaciodeNuevo)
• Charla de RabbitMQ con Yoel Macia (@ymd)
• Charla R Lang con Bea (@Chucheria)

Apuntate

• Meetup
• Slack

Caracteres especiales:

• \t Tabulador
• \' Comillas Simples
• \" Comillas Dobles
• \\ **
• \n Salto de línea

    function caracteresDemo () {
    console.log("Hasta aquí... todo correcto. Ahora vamos a \"tabular\":\tves? Ya estamos más lejos.\n\'Otra linea ;-)\'")
    };
    
    caracteresDemo()

Ejercicios

Recuerda: Utiliza JSHint para detectar errores..

1 - Utiliza .assert para controlar cuando se muestra tu nombre por consola.

	var controlador = false;
	console.assert(controlador,  "Hola, yo soy Ulises Gascón");

2 - Crea un script que nos permita calcular el tiempo que se necesita para realizar la siguientes acciones.

• Especificaciones:
  • Imprimir tu nombre usando console.log, console.info, console.warn

	var nombre = "Hola, yo soy Ulises Gascón";
	console.time("presentación");
	console.log(nombre);
	console.info(nombre);
	console.warn(nombre);
	console.timeEnd("presentación");

3 - Partiendo del ejercicio anterior mejora los estilos de cada mensaje usando estilos.

	var nombre = "Hola, yo soy Ulises Gascón";
	console.time("presentación");
	console.log("%c %s", "background: black; color: #FFF; font-size:20px;" ,nombre);
	console.info("%c %s", "background: #3EBDFF; color: #FFF; font-size:20px;" ,nombre);
	console.warn("%c %s", "background: #FFAA00; color: #FFF; font-size:22px;" ,nombre);
	console.timeEnd("presentación");

4 - Agrupa cada tipo de mensaje y añade un contador de tiempo por cada grupo.

	var nombre = "Hola, yo soy Ulises Gascón";
	console.time("presentación");
	
	// console.log
	console.group("grupo console.log");
	console.time("tiempo grupo console.log");
	console.log("%c %s", "background: black; color: #FFF; font-size:20px;" ,nombre);
	console.timeEnd("tiempo grupo console.log");
	console.groupEnd();
	
	
	// console.info
	console.group("grupo console.info");
	console.time("tiempo grupo console.info");
	console.info("%c %s", "background: #3EBDFF; color: #FFF; font-size:20px;" ,nombre);
	console.timeEnd("tiempo grupo console.info");
	console.groupEnd();
	
	
	// console.warn
	console.group("grupo console.warn");
	console.time("tiempo grupo console.warn");
	console.warn("%c %s", "background: #FFAA00; color: #FFF; font-size:22px;" ,nombre);
	console.timeEnd("tiempo grupo console.warn");
	console.groupEnd();
	
	
	console.timeEnd("presentación");

5 - Crea una tabla usando la consola para mostrar el nombre de tus compañeros y el puesto que ocupa en la clase.

    var alumnos = [
	     { nombre: "Javier", puesto: 1 },
	     { nombre: "Daniel", puesto: 2 },
	     { nombre: "Carolina", puesto: 3 },
	     { nombre: "Juan Ángel", puesto: 4 },
	     { nombre: "Victoria", puesto: 5 },
	     { nombre: "Carlos", puesto: 6 },
	     { nombre: "Isabel", puesto: 7 },
	     { nombre: "Jose Manuel", puesto: 8 }
	 ];
	 
	 console.table(alumnos);

Comentarios

• Una línea

// Comentario en una línea

• Multiples Líneas

/*
Una Línea....
Otra linea...
Etc...
*/

• JSDoc

Variables

• No se pueden usar espacios

var con espacios = 1;

• No usar un número delante

var 1numero = 1;

• Válidos, pero no recomendado

var con_guiones_bajos = 1;
var dame$ = 1;

• Válidos, es mejor usar camelCase

var otraOpcion = 1;
var opcionCon123123 = 1;

Tipos de variables

Operador typeof y su especificación

• Undefined

typeof undefined
typeof noDefinido
typeof tampocoCreado

• Object

typeof null
typeof [15, 4]
typeof new Date()
typeof {a:1}

• Boolean

typeof false
typeof true
typeof Boolean(false)

• Number

typeof 3
typeof 3.14
typeof NaN
typeof Infinity

• String

typeof "hola"

• Function

typeof function(){}

Matemáticas Básicas

var suma = 5 + 4;
var resta = 10 - 6;
var multiplicacion = 3 * 3;
var division = 6 / 2;
var modulo = 43 % 10;

function calcular (operacion) {
    console.log(operacion);
};

Matemáticas Básicas (Agrupando operaciones)

var expresion1 = (3 + 7) * 10;
var expresion2 = (-56 * 6) - 74 * -25;
var expresion3 = (3 * 3) + 10 - 12 / 2;
var expresion4 = 44 + (83 % (33 + 100));
var expresion5 = -145 + (500 / 10 - 5) + 10 * 10 ;

function calcular (operacion) {
    console.log(operacion);
};

Matemáticas Básicas (crecimiento y decrecimiento)

var numero = 5;

console.log(--numero); // 4
console.log(numero--); // 5 (luego 4)
console.log(++numero); // 6
console.log(numero++); // 5 (luego 6)

Operadores de asignación

• = Asignacion

var x = 1;
var y = 2;
x = y;
console.info("\"x\" vale ", x);

• += Suma

var x = 1;
var y = 2;
x += y;
console.info("\"x\" vale ", x); // x = x + y

• -= Resta

var x = 1;
var y = 2;
x -= y;
console.info("\"x\" vale ", x); // x = x - y

• *= Multiplicación

var x = 1;
var y = 2;
x *= y;
console.info("\"x\" vale ", x); // x = x * y

• /= División

var x = 1;
var y = 2;
x /= y;
console.info("\"x\" vale ", x); // x = x / y

• %= Resto

var x = 1;
var y = 2;
x %= y;
console.info("\"x\" vale ", x); // x = x % y

Jugando con variables

var empezoComo3 = 3;
era3();

empezoComo3 = 35;
era3();

empezoComo3 = empezoComo3 + 30;
era3();

empezoComo3 += 4;
era3();

empezoComo3++;
era3();

empezoComo3 -= 12;
era3();

empezoComo3--;
era3();

empezoComo3 *= 10;
era3();

empezoComo3 /= 11;
era3();

empezoComo3 += "texto";
era3();

empezoComo3 += 20;
era3();

empezoComo3++;
era3();


function era3 () {
    console.log("empezoComo3 debería ser 3, ahora su valor es " + empezoComo3);
};

Interacción Básica con el Usuario

• alert():

  alert("¡Bienvenido a esta web!");

• confirm():

  confirm("¿Esta seguro que desea abandonar esta web?");

• Ejemplo:

  var respuesta = confirm("presiona un botón!");
  if (respuesta === true) {
      console.log("Has aceptado!");
  } else {
      console.log("Has cancelado");
  }

• prompt():

  prompt("¿Como te llamas?");

• Registremos los datos en una variable:

  var nombre = prompt("¿Como te llamas?");

Ejercicios

1 - Vamos a solicitar la colaboración del usuario para lograr nuestros objetivos:

• Objetivos:

  • Captura el nombre del usuario usando prompt
  • Pregunta al usuario si desea "comprobar lo rápido que funciona su navegador".
  • En caso afirmativo imprimiremos el nombre del usuario por consola aplicandole estilos y calculando el tiempo que tarda en realizar la operación
  • En caso negativo mostraremos un alert informativo.

• Versión 1:

	var usuario = prompt("¿Quien eres?");

	var respuesta = confirm("Bienvenido "+usuario+", ¿Deseas ver lo rápido que funciona tu navegador?");
	if (respuesta === true) {
	
	    // console.log
	    console.group("grupo console.log");
	    console.time("tiempo grupo console.log");
	    console.log("%c %s", "background: black; color: #FFF; font-size:20px;" ,usuario);
	    console.timeEnd("tiempo grupo console.log");
	    console.groupEnd();
	
	    // console.info
	    console.group("grupo console.info");
	    console.time("tiempo grupo console.info");
	    console.info("%c %s", "background: #3EBDFF; color: #FFF; font-size:20px;" ,usuario);
	    console.timeEnd("tiempo grupo console.info");
	    console.groupEnd();
	
	    // console.warn
	    console.group("grupo console.warn");
	    console.time("tiempo grupo console.warn");
	    console.warn("%c %s", "background: #FFAA00; color: #FFF; font-size:22px;" ,usuario);
	    console.timeEnd("tiempo grupo console.warn");
	    console.groupEnd();
	
	} else {
	    alert(usuario+" no desea saberlo");
	}

• Versión 2:

	var usuario = prompt("¿Quien eres?");

	while(!usuario){
		usuario = prompt("¿Quien eres?")
	}

	var respuesta = confirm("Bienvenido "+usuario+", ¿Deseas ver lo rápido que funciona tu navegador?");
	if (respuesta) {
	
	    // console.log
	    console.group("grupo console.log");
	    console.time("tiempo grupo console.log");
	    console.log("%c %s", "background: black; color: #FFF; font-size:20px;" ,usuario);
	    console.timeEnd("tiempo grupo console.log");
	    console.groupEnd();
	
	    // console.info
	    console.group("grupo console.info");
	    console.time("tiempo grupo console.info");
	    console.info("%c %s", "background: #3EBDFF; color: #FFF; font-size:20px;" ,usuario);
	    console.timeEnd("tiempo grupo console.info");
	    console.groupEnd();
	
	    // console.warn
	    console.group("grupo console.warn");
	    console.time("tiempo grupo console.warn");
	    console.warn("%c %s", "background: #FFAA00; color: #FFF; font-size:22px;" ,usuario);
	    console.timeEnd("tiempo grupo console.warn");
	    console.groupEnd();
	
	} else {
	    alert(usuario+" no desea saberlo");
	}

Modo Estricto

El modo estricto hace varios cambios en la semántica normal de JavaScript. Primero, modo estricto elimina algunos errores silenciosos de JavaScript cambiando a que lance los errores. Segundo, modo estricto corrige errores que hacen que sea difícil para los motores de JavaScript para realizar optimizaciones: código de modo estricto a veces se puede hacer para correr más rápido que el código idéntico que no es estricto. Tercero, el modo estricto prohíbe sintaxis que es probable que sea definida en futuras versiones de ECMAScript.

• Mozilla

• Compatibilidad

En resumen:

• Detectaremos más errores
• Mejora la interpretación, lo que aumenta la velocidad de ejecucción.
• Previene que usemos sintaxis de futuras versiones de ECMAScript.

Aplicándolo a todo nuestro código

// ./script.js
(function() {
  "use strict";

  // Nuestro código

})();

Aplicándolo solo en parte del código

// ./script.js
function estricta(){
  'use strict';
  function anidada() {
      return "Yo también!";
  }
  return "Hola! Soy una función en modo estricto!  " + anidada();
}

function noEstricta() {
    return "yo no soy una función estricta.";
}

Algunos ejemplos:

• Error: Usar variables u objetos sin declararlos antes.

    function estricto(){
        'use strict';
        pi = 3.14;
        console.log(pi);
    }

• Error: Borrar variables, objetos o funciones.

    function estricto(){
        'use strict';
        pi = 3.14;
        delete pi
    }

• Error: Duplicar parámetros

    function estricto(){
        'use strict';
        function x (p1, p1){
            // código
        }
    }

• Error: Al usar carácteres escapados

    function estricto(){
        'use strict';
        var x = \010; 
    }

Error: Al usar writable:false

    function estricto(){
        'use strict';
        var obj = {};
        Object.defineProperty(obj, "x", {value:0, writable:false});
        obj.x = 3.14;
    }

Error: Al usar with

    function estricto(){
        'use strict';
        with(document.getElementById('elemento').style) {
            backgroundColor = 'black';
            color = 'red';
            font_Size = '32px'; // Crea una variable global
        }
    }

Error: Al usar eval() por seguridad

    function estricto(){
        'use strict';
        eval ("var x = 2");
        console.log(x);
    }

Otras palabras reservadas en modo estricto:

• implements
• interface
• let
• package
• private
• protected
• public
• static
• yield

Ejercicios

1 - Diseña un algoritmo que lea dos números y realice los siguientes cálculos:

• Valor de su suma
• Valor de su resta
• Valor de su division
• Valor de su producto

	function calculosVarios(valor1, valor2){
		console.info("El valor de la suma es:", valor1+valor2);
		console.info("El valor de la resta es:",valor1-valor2);
		console.info("El valor de la división es:", valor1/valor2);
		console.info("El valor de la división es:", valor1*valor2)
	};
	
	calculosVarios(5,5);

2 - Diseña un algoritmo para calcular el porcentaje de hombres y mujeres en nuestro curso.

• Trucos:
  • Calcular porcentajes (segmento*100)/total

	function porcentajeAlumnos(totalHombres, totalMujeres){
		var totalAlumnos = totalHombres + totalMujeres;
		var porcentajeMujeres = (totalMujeres*100)/totalAlumnos;
		var porcentajeHombres = (totalHombres*100)/totalAlumnos;
		
		console.info("El total de alumnos es:", totalAlumnos)
		
		console.log("El total de mujeres es:", totalMujeres);
		console.info("El % de mujeres es:", porcentajeMujeres);
		
		console.log("El total de hombres es:", totalHombres);
		console.info("El % de hombres es:", porcentajeHombres);
	};
	
	porcentajeAlumnos(6,2);

Comparadores básicos

var mayorQue = 100 > 10;
var menorQue = 10 < 100;
var mayorIgual = 100 >= 10;
var menorIgual = 10 <= 100;
var igual = 10 == 10;
var igualTotalmente = 10 === 10;
var noIgual = 100 != 10;

function comparar (dato) {
    console.log(dato);
};

Comparadores complejos

• AND(&&)

    var comparacion;
    comparacion = true && true; // true
    comparacion = true && false // false
    comparacion = false && false // false
    comparacion = false && true // false

• OR(||)

    var comparacion;
    comparacion = true || true; // true
    comparacion = true || false // true
    comparacion = false || false // false
    comparacion = false || true // true

• Ejemplos:

var ex1 = true && true; // true
var ex2 = (2 == 2) && (3 >= 6); // false
var ex3 = (2>3) || (17 <= 40); // true
var ex4 = false || false; // false

function condicionalAvanzado ( paraComparar ) {
    if (paraComparar) {
        console.log("Verdadero!");
    } else {
        console.log("falso!");
    };
};

Otros datos

• Valor real es true:

console.log("valor boleano de \"Fictizia\":", Boolean("Fictizia")  );
console.log("valor boleano de 1235:", Boolean(1235));
console.log("valor boleano de -1235:", Boolean(-1235));
console.log("valor boleano de un objeto:", Boolean({saludo: "hola"}));
console.log("valor boleano de un array:", Boolean(["platano", -1, false]));
console.log("valor boleano de un array:", Boolean(function(){}));

• Sin valor real es false:

console.log("valor boleano de \"\":", Boolean("")  );
console.log("valor boleano de 0:", Boolean(0));
console.log("valor boleano de -0:", Boolean(-0));
console.log("valor boleano de null:", Boolean(null));
console.log("valor boleano de undefined:", Boolean(undefined));
console.log("valor boleano de NaN:", Boolean(NaN));