dia7.md

Clase 7

Evento: Maker Faire Madrid

Info y entradas

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(5,3);

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

Tiempo para proyecto personal