Skip to content

Latest commit

 

History

History
599 lines (475 loc) · 13.8 KB

dia6.md

File metadata and controls

599 lines (475 loc) · 13.8 KB
Raw

shieldsIO shieldsIO shieldsIO

WideImg

Master en Programación de Aplicaciones con JavaScript y Node.js

JS, Node.js, Frontend, Express, Patrones, IoT, HTML5_APIs, Asincronía, Websockets, ECMA6, ECMA7

Clase 6

Evento: Cloud Fest 2017

img

Info y entradas

Proyecto personal

Funcionamiento:

  • Usaremos los issues de nuestro repositorio para coordinar todas las dudas que tengais.
  • Crearemos un nuevo repositorio en Github para desarrollar el proyecto.

Requisitos para este proyecto:

  • Manipulación dinánima del DOM
  • Llamada AJAX

Fecha de entrega:

  • Clase 26

JSHint

Consola

Métodos:

  • .assert() Aparece un mensaje de error en la consola si la afirmación es falsa.:
 var controlador = false;
 console.assert(controlador, "\"controlador\" es igual a \"false\"");
  • .clear() Limpia la consola:
 console.clear()
  • .dir() Retorna una lista interactiva de las propiedades de un objeto:
 console.dir(document.body);
  • .dirxml() Retorna una representación HTML del objeto:
 console.dirxml(document.body);
  • Agrupadores:
  • .group() Crea un grupo de mensajes de consola:
    console.group("bucleFor");
    for(var i=100; i>0; i--){
        console.info("Iteración numero %i", i)
    }
    console.groupEnd();
  • .groupCollapsed() Crea un grupo de mensajes de consola minimizados (por defecto):
    console.groupCollapsed("bucleFor");
    for(var i=100; i>0; i--){
        console.info("Iteración numero %i", i)
    }
    console.groupEnd();
  • .groupEnd() Cierra el grupo de mensajes:
    console.group("bucleFor");
    for(var i=100; i>0; i--){
        console.info("Iteración numero %i", i)
    }
    console.groupEnd();
  • Tablas:
  • .table() Muestra los datos dentro de una tabla:
var lenguajes = [
    { nombre: "JavaScript", extension: ".js" },
    { nombre: "TypeScript", extension: ".ts" },
    { nombre: "CoffeeScript", extension: ".coffee" }
];

console.table(lenguajes);

console.table(lenguajes, "extension");
  • Gestión del tiempo:
  • .time() Inicia un contador en ms:
  • .timeEnd() Para el contador y devuelve el resutlado:
 console.time("Medición de miArray");
 var miArray = new Array(1000000);
 for (var i = miArray.length - 1; i >= 0; i--) {    
  miArray[i] = new Object();
 };
 console.timeEnd("Medición de miArray");
  • Notificadores:
  • .log() Saca un mensaje por consola:
 console.log("Hola en formato clásico");
  • .info() Similar a console.log:
 console.info("Hola en formato informativo");
  • .warn() Similar a Console.log:
 console.warn("Hola en formato alerta");
  • .error() *Similar a console.log, invcluye *:
 console.error("Hola en formato error");
  • Formateadores:
Formato Descripción
%s Cadena
%d o %i Número entero
%f Decimal
%o DOM
%O Objeto js
%c CSS
  • Ejemplos:
  • %o para estrcuturas del DOM
 var parrafos = document.getElementsByTagName("p");
 console.log("DOM: %o", parrafos);
  • %O para objectos JS
 var objeto = {"nombre":"Yo","Apellido":"Mismo"};
 console.log("Objeto: %O", objeto);
  • usando CSS:
 console.log('Esto es aburrido...');
 console.log('%c Pero se puede mejorar fácilmente! ', 'background: #3EBDFF; color: #FFF; font-size:25px;');

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.

	function magicNumber(min, max){
		return Math.floor(Math.random() * (max - min)) + min
	}

    var alumnos = [
	     { nombre: "Felix", puesto: magicNumber(1, 20) },
	     { nombre: "Jesus", puesto: magicNumber(1, 20) },
	     { nombre: "Ana", puesto: magicNumber(1, 20) },
	     { nombre: "David", puesto: magicNumber(1, 20) },
	     { nombre: "Elena", puesto: magicNumber(1, 20) },
	     { nombre: "Iñigo", puesto: magicNumber(1, 20) },
	     { nombre: "Vicky", puesto: magicNumber(1, 20) },
	     { nombre: "Victor", puesto: magicNumber(1, 20) }
	 ];
	 
	 console.table(alumnos);

Comentarios

  • Una línea
// Comentario en una línea
  • Multiples Líneas
/*
Una Línea....
Otra linea...
Etc...
*/

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

6 - 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");
	}