Clase 2

Reintroducción a JS

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 (Math){x = cos(2)};
    }

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

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(){}
typeof class C {}

Symbol (ECMA6)

Ahora tenemos los símbolos, nuevo tipo de datos que sirve como identificador único para atributos de objetos EcmaScript 6: Símbolos de Miguel Sánchez

typeof Symbol()
typeof Symbol('simbolo')

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

While

Estructura:

/*  --while--
while (-algo verdadero-) {
    -ejecutamos este dódigo-
};
*/

Documentación:
- While en w3schools
- While en MDN

Bucle infinito: Este es un error muy común.

while (true) {
    console.log("Este texto se imprime hasta el infinito...");
};

Bucle que no se ejecutará:

while (false) {
    console.log("Este texto jamas se imprimirá...");
};

Ejemplo:

var control = 1;
while (control <= 10) {
    console.log(control);
    control++;
};

For

Estructura:

/*  --for--
for (-inicializando-; -algo verdadero-; -ejecutar al terminar cada bucle-) {
    -ejecutamos este código-
};
*/

Documentación:

Ejemplo:

for (var i = 0; i < 10; i++) {
    console.log(i);
}

Do... While

Estructura:

/* --Do...while--
do{
   -Ejecutamos este código-
} while (-Algo verdadero-);
*/

Documentación:
- Do... While en w3schools
- Do... While en MDN

Ejemplo:

var i = 0;
do {
   i++;
   console.log(i);
} while (i < 10);

Al menos se ejecutará una vez, aunque la premisa no sea verdadera.
```
do{
   console.warn("me ejecuto")
} while (false);
```

Ejercicios

Vamos a crear un sistema de control para el metro. Nuestro objetivo será desarrollar una aplicación para gestionarlo todo. Con este ejercicio nos centraremos en aplicar conceptos básicos de JavaScript

1 - Quiero saber del total de trenes cuantos hay operativos. El formato de la respuesta es "x de x funcionando hoy".

    var trenesOperativos = 8;
    var totalTrenes = 12;
    var estadoOperacional = " trenes funcionando hoy."

    function estadoVia () {
    	console.log(trenesOperativos+ " de "+totalTrenes+estadoOperacional);
    };

Respuesta esperada (consola):

    8 de 12 trenes funcionando hoy.

2 - Imprimimos por consola el estado de cada tren en movimiento de manera individualizada (sin bucles).

    console.log("El tren numero " + 1 + " esta funcionando");
    console.log("El tren numero " + 2 + " esta funcionando");
    console.log("El tren numero " + 3 + " esta funcionando");
    console.log("El tren numero " + 4 + " esta funcionando");
    console.log("El tren numero " + 5 + " esta funcionando");
    console.log("El tren numero " + 6 + " esta funcionando");
    console.log("El tren numero " + 7 + " esta funcionando");
    console.log("El tren numero " + 8 + " esta funcionando");

Respuesta esperada (consola):

    El tren numero 1 esta funcionando
    El tren numero 2 esta funcionando
    El tren numero 3 esta funcionando
    El tren numero 4 esta funcionando
    El tren numero 5 esta funcionando
    El tren numero 6 esta funcionando
    El tren numero 7 esta funcionando
    El tren numero 8 esta funcionando

3 - Refactoriza... usando while.

    var trenesOperativos = 8;
    var numeroTren = 1; // Primer tren funcionando

    function estadoDetalle () {
    	while (numeroTren <= trenesOperativos) {
    		console.log("El tren número "+numeroTren+" esta funcionando");
    		numeroTren++;
    	};
    };

4 - Refactoriza.. usando Do... While.

   var trenesOperativos = 8;

    function estadoDetalle () {
        var numeroTren = 1
        do {
            console.log("El tren numero "+numeroTren+" esta funcionando");
            numeroTren++
        } while (numeroTren <= trenesOperativos);
    };

5 - Refactoriza.. usando for.

        var trenesOperativos = 8;

    function estadoDetalle () {
    	for (var numeroTren = 1; numeroTren <= trenesOperativos; numeroTren++) {
    		console.log("El tren numero "+numeroTren+" esta funcionando");
    	};
    };

Trabajando con números

NaN:
```
console.log(0/0);
```
Infinity:
```
console.log(100/0);
```

.toFixed() limitar decimales:

var numero = 1.3453456467;
console.log(numero.toFixed(3));

Comparadores

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

Cadenas

var yoVeo = "Yo soy de las personas que ven";
var vasoLleno = "vaso medio lleno";
var vasoVacio = "vaso medio vacío";

Concatenando (Uniendo Cadenas):

var frasePositiva = yoVeo + " el " + vasoLleno;
var fraseNegativa = yoVeo + " el " + vasoVacio;

function imprimir ( texto) {
    console.log( texto );
};

Imprimir con estilo por consola:

function imprimirBonito (texto) {
    console.log (guiones);
    console.log (texto);
    console.log (iguales);
};

var guiones = "---------------------"
var iguales = "====================="

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

Consola

Niveles: Nota: la mayoría de consolas nos permitiran el filtrado por tipo.

.log:

    console.log("Hola en formato clásico");

.info:

    console.info("Hola en formato informativo");

.warn:

    console.warn("Hola en formato alerta");

.error:

    console.error("Hola en formato error");

.debug:

    console.debug("Hola en formato debug");

Formateadores:

%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("DOM: %O", objeto);

Agrupación:

    console.group("bucleFor");
    for(var i=100; i>0; i--){
        console.info("Iteración numero %i", i)
    }
    console.groupEnd();

Manejo de cadenas

.lenght:

var amigo = "un amigo";
var amigos = "un amigo, dos amigos, tres amigos...";

function comparadorCadenas (cadena1, cadena2){
    console.log((cadena1.length>cadena2.length)+", "+cadena1+" no es mayor que "+cadena2);
};

.concat():

var amigo = "un amigo";
var amigos = amigo.concat(", dos amigos, tres amigos...");

.toLowerCase():

var amigo = "UN Amigo";
var amigos = amigo.toLowerCase().concat(", dos amigos, tres amigos...");

.charAt():

var amigo = "un amigo";
var amigos = "un amigo, dos amigos, tres amigos...";
function dimeCaracter ( variable, numero){
    console.log(variable.charAt(numero));
};

.indexOf():

var amigo = "un amigo";
var amigos = "un amigo, dos amigos, tres amigos...";

function localizaCaracter ( variable, caracter){
    console.log(variable.indexOf(caracter));
};

.substring(inicio, final):

var amigo = "un amigo";
var amigos = "un amigo, dos amigos, tres amigos...";

var dosAmigos = amigos.substring(10, 20);
var tresAmigos = amigos.substring(22);

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

Ejercicios

6 - Del total de trenes... ¿cuantos tengo parados?

    var trenesOperativos = 8;
    var totalTrenes = 12;

    function trenesParados(){
    	for(var numeroTren = trenesOperativos + 1; numeroTren <= totalTrenes; numeroTren++){
    		console.log("El tren numero "+numeroTren+" esta parado");
    	};
    };

Respuesta esperada (consola):

    El tren numero 9 esta parado
    El tren numero 10 esta parado
    El tren numero 11 esta parado
    El tren numero 12 esta parado

7 - Refactoricemos y juntemos los dos bucles dentro de una misma función. Así se imprime por consola tanto los trenes que estan funcionanado como los que estan parados

    var trenesOperativos = 8;
    var totalTrenes = 12;
    
    function estadoDetalle () {
    	var numeroTren = 1;
    	while (numeroTren <= trenesOperativos) {
    		console.log("El tren numero "+numeroTren+" esta funcionando");
    		numeroTren++;
    	};
    	for(var trenParado = trenesOperativos + 1; trenParado <= totalTrenes; trenParado++) {
    		console.log("El tren numero "+trenParado+" esta parado");
    	};
    };

Respuesta esperada (consola):

    El tren numero 1 esta funcionando
    El tren numero 2 esta funcionando
    El tren numero 3 esta funcionando
    El tren numero 4 esta funcionando
    El tren numero 5 esta funcionando
    El tren numero 6 esta funcionando
    El tren numero 7 esta funcionando
    El tren numero 8 esta funcionando
    El tren numero 9 esta parado
    El tren numero 10 esta parado
    El tren numero 11 esta parado
    El tren numero 12 esta parado

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

dia2.md

dia2.md

Clase 2

Reintroducción a JS

Files

dia2.md

Latest commit

History

dia2.md

File metadata and controls

Clase 2

Reintroducción a JS