Skip to content

Latest commit

 

History

History
485 lines (385 loc) · 9.46 KB

clase5.md

File metadata and controls

485 lines (385 loc) · 9.46 KB
Raw

shieldsIO shieldsIO shieldsIO

WideImg

Máster en Programación FullStack con JavaScript y Node.js

JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing

Clase 5

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

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.

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
    // Declarar funciones
function suma(a,b){
    return a+b;
}
function resta(a,b){
    return a-b;
}
function multiplicacion(a,b){
    return a*b;
}
function division(a,b){
    return a/b;
}

// Ejecutar funciones
var n1 = Number(prompt("introduce n1"));
var n2 = Number(prompt("introduce n2"));

console.log("Suma: "+suma(n1,n2));
console.log("Resta: "+resta(n1,n2));
console.log("Multiplicacion: "+multiplicacion(n1,n2));
console.log("Division: "+division(n1,n2));

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

  • Trucos:
    • Calcular porcentajes (segmento*100)/total
	function porcentajes(chicas,chicos){
    var total = chicas + chicos;
    var pchicas = (chicas*100)/total;
    var pchicos = (chicos*100)/total;
    console.log("Personas: "+total+", chicas: "+pchicas.toFixed(2)+"%, chicos: "+pchicos.toFixed(2)+"%");
}

porcentajes(2,7);

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 💪

img_promo