Skip to content

Latest commit

 

History

History
491 lines (397 loc) · 9.86 KB

dia3.md

File metadata and controls

491 lines (397 loc) · 9.86 KB
Raw

Clase 3

JSHint

DevTools

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, incluye *:
 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 Francicso Valdesoiro");

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 Francisco Valdesoiro";
	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 Francisco Valdesoiro";
	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 Francisco Valdesoiro";
	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: "Manuel", puesto: 1 },
	     { nombre: "Carlos", puesto: 2 },
	     { nombre: "Alec", puesto: 3 },
	     { nombre: "Julio", puesto: 4 }
	 ];
	 
	 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

Operadores de igualdad

  • Igualdad(==)
1    ==  1         // true
'1'  ==  1         // true
1    == '1'        // true
0    == false      // true
0    == null       // false
var object1 = {'key': 'value'}, object2 = {'key': 'value'}; 
object1 == object2 // false
0    == undefined  // false
null == undefined  // true
  • Desigualdad(!=)
1 !=   2     // true
1 !=  '1'    // false
1 !=  "1"    // false
1 !=  true   // false
0 !=  false  // false
  • Identidad / igualdad estricta (===)
3 === 3   // true
3 === '3' // false
var object1 = {'key': 'value'}, object2 = {'key': 'value'};
object1 === object2 // false

Ejemplos de operadores de igualdad

1 == ‘1’ // verdadero
1 === ‘1’ // falso
false == 0 // verdadero
false === 0 // falso
‘’ == 0 // verdadero
‘’ === 0 // falso

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