Skip to content
This repository has been archived by the owner on Dec 19, 2018. It is now read-only.

Latest commit

 

History

History
2419 lines (1946 loc) · 85.8 KB

clase1.md

File metadata and controls

2419 lines (1946 loc) · 85.8 KB
Raw

Curso Incompany para INECO

HTML5 APIs, ECMA6, Patrones de diseño, AJAX avanzado, APIs externas, JS para Frontend, Automatización...

img

FICTIZIA » Cursos a medida para empresas

Clase 1

Normas y demás

  • Puntualidad
  • Liquidos y comida
  • Ubicación

Metodología

  • Descansos
  • Gestión del curso en GitHub
  • Comunicación fuera de clase
  • Repositorio común
  • Toda la teoría, prácticas y recursos
  • Prácticas y "deberes"
  • Repasos, para afianzar lógica

Sobre el profesor

panda_developer

Bio: "#Maker, #IoT, #OpenSource | #JavaScript, #Node, #Python | Co-organizador de @os_weekends | Profe en @fictiziaescuela | Mentor en @TetuanValley | Autor de #JavaScriptInspirate | Freelance | xIBMer | xGoogler"

Redes Sociales:

Hablemos de la web

El largo camino del desarrollador web

  • Front-End
  • Back-End
  • Full-Stack
  • Dev Ops
  • etc...

Arquitectura de Internet

Navegación

img

Hosting

img

CMS (Back-End)

img

CDN (Content Delivery Network)

img

Tracking

img

W3C - World Wide Web Consortium

img

Front-end

HTML

img

HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.1

El lenguaje HTML basa su filosofía de desarrollo en la diferenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene solamente texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado.HTML Wikiwand

  • Versiones:
    • HTML 1.0 (1991)
    • HTML 2.0 (1995)
    • HTML 3.2 (1997)
    • HTML 4 (1997)
    • HTML 4.01 (1999)
    • HTML 5 (2014)

CSS

img_logo

Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML2 (y por extensión en XHTML). El World Wide Web Consortium (W3C) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.CSS Wikiwand

JavaScript

js_logo

JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.

Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo. JavaScript Wikiwand

Características

  • Multiparadigma
  • Imperativo y estructurado
  • Dinámico
    • Tipado dinámico
    • Objetual
    • Evaluación en tiempo de ejecución
  • Funcional
    • Funciones de primera clase
  • Prototípico
    • Prototipos
    • Funciones constructoras
  • Entorno de ejecución
  • Funciones varídicas
  • Funciones como métodos
  • Arrays y la definición literal de objetos
  • Expresiones regulares

ECMA-262

Back-end

Node.js

Node_logo

Node.js es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor (pero no limitándose a ello) basado en el lenguaje de programación ECMAScript, asíncrono, con I/O de datos en una arquitectura orientada a eventos y basado en el motor V8 de Google. Fue creado con el enfoque de ser útil en la creación de programas de red altamente escalables, como por ejemplo, servidores web. Fue creado por Ryan Dahl en 2009 y su evolución está apadrinada por la empresa Joyent, que además tiene contratado a Dahl en plantilla - Wikipedia

Otra manera es posible

bloqueo

Puntos Fuertes

  • Asincronía (no bloqueo)
  • Backend completo
  • NPM (comunidad)
  • Single thread (paralelismo)
  • Librerías propias
  • Utilidades
  • Código abierto
  • Basado en el V8 (escrito en C++) de Google
  • Multiplataforma
  • Orientado a Eventos
  • No se limita solo a servidores HTTP

Librerías interesantes

Más Back-end

NoBackend

Stack

  • LAMP:
    • Linux
    • Apache
    • MySQL
    • PHP
  • MEAN:
    • MongoDB
    • Express
    • Angular
    • Node

Bases de datos

Entorno de desarollo moderno

Diversos Entornos

Desarrolladores de hoy

JSDramas

Cambios, cambios... y más cambios

humor

The Magpie Developer

The Sad State of Web Development

Fatiga y tendencias

Herramientas

Documentación

C9.io

c9_logo

Características estrella

  • Code together in real time
  • Share your IDE, your workspace, a preview, or your running app
  • Replay all edits and see your code at any point in time

Otras características

  • Preview in any browser
  • Built-In Terminal
  • Language Tools
  • Debugger
  • Split View
  • Themes
  • Run Panel
  • Key Bindings Editor
  • VIM/Emacs/Sublime Mode
  • Built-In Image Editor

Más

Comunidad

Libros

Charlas recomendadas

Otros/Inspiracionales

CSS

JS

Listados

Developers Importantes a los que seguir...

Listados

Blogs, posts, etc...

Medium

Youtubers, charlas, etc...

Meetups y eventos

JavaScript en Acción

  • The scraping machine

    • Alto nivel de abstracción para el usuario final
    • Soporte como aplicación de terminal con Vorpal
    • Generación dinámica de scripts en varios lenguajes (JS, Python, etc...)
    • Gestión de procesos hijos de forma nativa
    • Instalación global como módulo de NPM

  • Simple hangouts bot

    • Aislamiento del core para mejorar la portabilidad usando patrones
    • XMPP Protocolo
    • Soporte de operaciones en terminal
    • Soporte para la instalación como dependencia de NPM
    • Extensión de por API interna
    • Incorporación de servicios externos como Alchemy (Inteligencia Artificial como servicio)
    • Gestión de la asincronía
    • Array de objetos
    • Gestión de notificación y ayuda al usuario
    • Detección de eventos de Error y cierre del sistema

  • GingerCode

    • Orientado a nuevos programadores
    • Pseudocódigo funcional
    • Alto nivel de abstracción
    • Isomórfico

  • GoblinDB

    • Base de datos reactiva
    • Almacenamiento Asíncrono
    • Patrones de diseño (Namespace, Façade, etc...)
    • Ambush Functions, funciones Lambda a demanda
    • Soporte a Eventos

  • OSWaldito

    • Orientado a IOT
    • Comunciación I2C
    • Movimiento controlado por WebSockets
    • Renderización en cliente de VR usando three.js
    • Stream de vídeo bajo demanda frame a frame
    • Uso del sintetizador de voz nativo de Chrome
    • Gestión de redes sociales

  • Slack Canal Directo

    • Orientado a la gestión de redes sociales
    • Escucha activamente conversaciones en Google Hangouts
    • Envía mensajes en Google Hangouts
    • Envía mensajes en Slack
    • Envía mensajes al azar clasificados por prioridad en Slack
    • Envía mensajes de Error y estado al administrador en Goolgle Hangouts
    • Puede ser desplegado en multiples entornos (Raspbian, Linux, OSX, Windows, C9...)
    • Permite desplegar multiples avatares y personalidades desde la configuración para comunicarse en Slack

  • Know Your SNPs

    • Proyecto BioTecnológico
    • Analiza ADN
    • Permite buscar dentro del ADN ciertos patrones
    • No almacena datos
    • Futura migración a aplicación de escritorio
    • Formulario para realizar nuevas queries (desarrollo) sin tener que programar

  • protoUnicorn

    • Librería de utilidades para JavaScript
    • Utiliza los mejores métodos de librerias extendidas como Lodash o Underscore
    • Añade estos métodos a nuestro JavaScript mediante prototype

  • Spotymix

    • Permite crear nuevas playlist
    • Fusiona canciones de diversas playlist
    • Permite juntar tus mejores canciones con las mejores canciones de otro amigo
    • Social Login integrado

  • JSDayES golosinas IOT

    • Orientado a IOT
    • Comunicación Serial
    • Gestión de dispositivos externos
    • No necesita HTTP

  • Raspi - System Info to Firebase

    • Partiendo de otro repositorio/proyecto.
    • Monitorización del sistema
    • Uso de comandos de terminal
    • Gestión de procesos inestables
    • Integración con soluciones No-backend
    • Tiempo Real
    • No necesita HTTP

  • IT Pulse

    • Partiendo de otro repositorio/proyecto.
    • APIs de terceros
    • Stream directo de datos
    • Servidor Http
    • Tiempo Real y sincronía con WebSockets
    • Eventos
    • Evaluación semántica de la información
    • Sin Bases de datos

  • MovieFire

    • Integración con soluciones No-Backend
    • FrontEnd con Jade
    • BackEnd Flexible y dinámico
    • APIRest Cliente -> Servidor
    • BackEnd con Express
    • CORS y Ajax

  • AireMadrid

    • Arquitectura alternativa en versiones anteriores
    • Conversión y parseo a Json
    • Procesamiento de datos en bruto
    • APIRest
    • Operaciones cíclicas gestionadas por Pillarsjs
    • FrontEnd con Jade
    • BackEnd con Express
    • Documentación con JSDocs

  • AireMAD

    • Evolución de Aire Madrid
    • Scraping
    • Fuentes de datos Alternativas
    • Backend con Pillarsjs
    • Frontend con Angularjs
    • Permanencia de datos con GoblinDB

  • Calidad del Aire con Firebase

    • Manejo de comunicación serial
    • Eventos y asincronía
    • IoT

  • Curratelo

    • APIs de terceros
    • Stream directo de datos
    • Servidor Http
    • Tiempo Real y sincronía con WebSockets
    • Automatización con Slack y Hangouts

Tools for Web Developers

IMG

Recursos

Herramientas principales

  • Canary
  • PageSpeed
  • Lighthouse
  • Puppeteer
  • Workbox
  • Chrome Developer Tools

Canary

Logo

PageSpeed

Logo

Doc

Lighthouse

img

Doc

puppeteer

img_logo

Doc

Workbox

img_logo

Doc

ChromeDevTools

img_logo

Recursos

Abrir Chrome DevTools

  • En el Menú de Chrome, selecciona More Tools > Developer Tools.
  • Haz clic con el botón secundario en un elemento de la página y selecciona Inspect.
  • Usa las combinaciones de teclas Ctrl+Mayúscula+I (Windows) o Cmd+Opción+I (Mac).

ChromeDevTools: Paneles

Device Mode

Device Mode Usa Device Mode para desarrollar experiencias web con una completa capacidad de respuestas y que prioricen los dispositivos móviles.

Elements

Panel Elements Usa el panel Elements para iterar la distribución y el diseño de tu sitio mediante la libre manipulación de DOM y CSS.

Console

Panel Console Usa el panel Console para registrar información de diagnóstico durante el desarrollo o úsalo como un shell para interactuar con el código JavaScript en la página.

Sources

Panel Sources Depura tu código JavaScript con puntos de interrupción en el panel Sources o conecta los archivos locales mediante espacios de trabajo para usar el editor en tiempo real de DevTools.

Network

Panel Network Usa el panel Network para obtener información sobre recursos solicitados y descargados, y optimizar el rendimiento de carga de tu página.

Timeline

Panel Timeline Usa el panel Timeline para mejorar el rendimiento del tiempo de ejecución de la página mediante la grabación y la exploración de los diferentes eventos que ocurren durante el ciclo de vida de un sitio.

Profiles

Panel Profiles Usa el panel Profiles si necesitas más información que la que proporciona el panel Timeline; por ejemplo, para rastrear pérdidas de memoria.

Application

Panel Application Usa el panel Resources para inspeccionar todos los recursos que se cargan; entre otros, bases de datos IndexedDB o Web SQL, almacenamiento local y de sesión, cookies, caché de la app, imágenes, fuentes y hojas de estilos.

Security

Usa el panel Security para depurar problemas de contenido mixto, problemas de tu certificado y más.

Extensiones para developers

Básicas

Extras

Extensiones para developers: SAFETY FIRST

IMG

JSHint

EsLint

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

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(){}
  • 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);
};

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

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

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

Asignación por igualdad

	var administrador = 'Yo mismo';
	var esAdministrador = (administrador === 'Yo mismo');

If... else

  • Estructura:

    /* IF ...ELSE
if (-algo verdadero-) {
    -ejecutaremos este código-
} else {
    -Si lo anterior no era verdadero, se ejecutara este código-
};
*/

  • Documentación:

  • Ejemplo:

    if (true) {
    console.log("true, por eso me ejecuto");
} else {
    console.log("false, por eso me ejecuto");
}

Else if...

function testCondiccion (condicion){
    if (condicion == 1) {
        console.log("1, por eso me ejecuto");
    } else if (condicion == 2){
        console.log("2, por eso me ejecuto");
    } else {
        console.log("no es 1 o 2, por eso me ejecuto");
    }
}

Switch

  • Estructura:

    /* Switch
switch(expresión) {
    case n:
        //Código
        break;
    case n:
        //Código
        break;
    default:
        //Código
}
*/

  • Documentación:

  • Casos únicos:

    var nombre = "";
switch (nombre) {
  case "Pepe":
    console.log("Hola Pepe");
    break;
  case "Luis":
    console.log("Hola Luis");
    break;
  case "Antonio":
    console.log("Hola Antonio");
    break;
  default:
    console.log('Ninguno de los nombres que pensamos... es '+nombre);
}

  • Multiples coincidencias:

    var nombre = "";
switch (nombre)
{
   case "Pepe":
   case "Luis":
   case "Antonio":
       alert('Hola '+nombre);
       break;

   default:
       console.log('Ninguno de los nombres que pensamos... es '+nombre);
}

Operador Ternario (?:)

  • Estructura:

    /* 
-- Una operación por caso --
condicion ? expresion1 : expresion2 

-- Multiples Operaciones por caso --
condicion ? (
	operacion1,
	operacion2,
	otraoperacion
) : ( 
	operacion1,
	operacion2,
	otraoperacion
);

-- Evaluaciones multiples --
	condicion ? expresion1 : condicion2 ? expresion1 : expresion2;
*/

  • Una operación por caso:

	var esMiembro = true;
	console.info("El pago son  " + (esMiembro ? "20.00€" : "50.00€"));
  • Evalución múltiple:
	var esMiembro = true;
	var esAdulto = true;
	console.info(esMiembro ? "El pago son 20.00€" : esAdulto ? "Puedes enviar la solicitud cuando quieras" : "Tines que esperar aún. Lo siento.");
  • Múltiples Operaciones:
	var mensaje,
	esMiembro = true;
	
	esMiembro ? (
		mensaje = "El pago son 20.00€",
		console.info(mensaje)
	) : (
		mensaje = "El pago son 50.00€",
		console.info(mensaje)
	);

While

  • Estructura:

    /*  --while--
while (-Condición-) {
    -Instrucciones-
};
*/

  • Documentación:

  • 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 (-Expresión inicial-; -Condición-; -Expresión Actualización-) {
    -Instrucciones-
};
*/

  • Documentación:

  • Ejemplo clásico:

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

Do... While

  • Estructura:

    /* --Do...while--
do{
   -Instrucciones-
} while (-Condición-);
*/

  • Documentación:

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

Break y Continue

  • Continue nos permite saltar parte del bucle.
for (var i = 0; i < 10; i++) {
    
    // Salta el 5 y sigue...
    if (i === 5) { 
    	continue; 
    }
    
    console.log("El valor de i es "+i);
}
  • Break nos permite salir del bucle.
for (var i = 0; i < 10; i++) {
    
    // Llega a 5 y sale.
    if (i === 5) { 
    	break; 
    }
    
    console.log("El valor de i es "+i);
}

Usos Avanzados

  • Ejemplo usando decrecimiento:

    for (var i = 10; i > 0; i--) {
    console.log(i);
}

  • Ejemplo usando varios contadores:

    for (var i = 0, x = 1, z = 2, tope = 10; i <= tope; x *= z, i++ ) {
    console.log("i vale "+i+", x vale "+x+", z vale "+z);
}

Números

Propiedades

  • Notación científica

  • .MAX_VALUE() El número más grande representable (1.7976931348623157e+308):

       var numero1 = 1.7976931348623157e+308;
   var numero2 = 1.7976931348623157e+310;
   
   function verificarValorMaximo(num){
   
   	if (num <= Number.MAX_VALUE) {
   	  console.log("El número no es infinito");
   	} else {
   	  console.log("El número es infinito");
   	}
   	
   }
   
   verificarValorMaximo(numero1);
   verificarValorMaximo(numero2);

  • .MIN_VALUE() El número más pequeño representable (5e-324):

       var numero1 = 5e-323;
   var numero2 = 5e-326;
   
   function verificarValorMinimo(num){
   
   	if (num >= Number.MIN_VALUE) {
   	  console.log("El número no es infinito");
   	} else {
   	  console.log("El número es infinito");
   	}
   	
   }
   
   verificarValorMinimo(numero1);
   verificarValorMinimo(numero2);

  • .NEGATIVE_INFINITY() El valor negativo de la propiedad del objeto global Infinity:

        var numeroMinimo = (-Number.MAX_VALUE) * 2
    console.log(numeroMinimo);
    
    if (numeroMinimo === Number.NEGATIVE_INFINITY) {
     numeroMinimo = 0;
    }
    console.log(numeroMinimo);

  • .NaN() Not A Number:

        NaN === NaN;        // false
    Number.NaN === NaN; // false
    isNaN(NaN);         // true
    isNaN(Number.NaN);  // true

  • .POSITIVE_INFINITY() Representa el infinito positivo:

        var numeroMaximo = Number.MAX_VALUE * 2
    console.log(numeroMaximo);
    
    if (numeroMaximo === Number.POSITIVE_INFINITY) {
     numeroMaximo = 0;
    }
    console.log(numeroMaximo);

Métodos:

  • .toExponential() Devuelve una cadena con el valor número en formato de potencia:

        var numObj = 77.1234;
    
    console.log(numObj.toExponential());  // 7.71234e+1
    console.log(numObj.toExponential(4)); // 7.7123e+1
    console.log(numObj.toExponential(2)); // 7.71e+1
    console.log(77.1234.toExponential()); // 7.71234e+1

  • .toFixed() Devulve un numero con decimales:

        var numObj = 12345.6789;
    
    numObj.toFixed();       //'12346' redondeo
    numObj.toFixed(1);      //'12345.7'
    numObj.toFixed(6);      //'12345.678900' Se añaden ceros en caso necesario
    (1.23e+20).toFixed(2);  //'123000000000000000000.00'
    (0).toFixed(2);         //'0.00'
    2.34.toFixed(1);        //'2.3' redondeo
    -2.34.toFixed(1);       //-2.3 Numeros negativos no son devueltos como cadenas.
    (-2.34).toFixed(1);     //'-2.3' En caso de usar paréntesis se salta la limitación

  • .toLocaleString() Devulve una cadena con el valor numeral representado en lenguaje local:

        var numero = 3500;
    // En Local
    console.log(numero.toLocaleString()); // 3.500
    // En Árabe
    console.log(numero.toLocaleString('ar-EG')); // ٣٬٥٠٠
    // En Chino decimal
    console.log(numero.toLocaleString('zh-Hans-CN-u-nu-hanidec')); // 三,五〇〇

  • .toPrecision() Devuelve un numero precisado:

        var numero = 5.123456;
    
    console.log(numero.toPrecision());    // 5.123456
    console.log(numero.toPrecision(5));   // 5.1235
    console.log(numero.toPrecision(2));   // 5.1
    console.log(numero.toPrecision(1));   // 5
    console.log((1234.5).toPrecision(2)); // 1.2e+3 (En ocasiones )

  • .toString() Devuelve una cadena con el número en la base que determinemos:

        console.log((17).toString());     // '17'
    console.log((17.2).toString());   // '17.2'
    console.log((-0xff).toString(2)); // '-11111111'
    console.log((254).toString(16));  // 'fe'

  • .parseFloat() Devuelve un número décimal partiendo de una cadena:

        Number.parseFloat("3.14"); // 3.14
    Number.parseFloat("314e-2"); // 3.14
    Number.parseFloat("0.0314E+2"); // 3.14
    Number.parseFloat("3.14textos..."); // 3.14
    Number.parseFloat("1textos..."); //1

  • .parseInt() Devuelve un número entero en una base especifica o en base 10 partiendo de una cadena:

        parseInt(" 0xF", 16); // 15
    parseInt(" F", 16);  // 15
    parseInt("17", 8);  // 15
    parseInt(021, 8);  // 15
    parseInt("015", 10);  // 15
    parseInt(15.99, 10);  // 15
    parseInt("15,123", 10);  // 15
    parseInt("FXX123", 16);  // 15
    parseInt("1111", 2);  // 15
    parseInt("15*3", 10);  // 15
    parseInt("15e2", 10);  // 15
    parseInt("15px", 10);  // 15
    parseInt("12", 13);  // 15

Math

Métodos:

  • .random() Devuelve un número aleatorio

        // Número aleatorio entre 0 (incluido) y 1 (excluido)
    Math.random(); 
    
    // Retorna un número aleatorio entre min (incluido) y max (excluido)
    Math.random() * (max - min) + min;
    Math.random() * (11 - 0) + 0;
    
    // Retorna un entero aleatorio entre min (incluido) y max (excluido)
    Math.floor(Math.random() * (11 - 0)) + 0;

  • .round() Devuelve el valor de un número redondeado al entero más cercano

        Math.round(20.5); // 21
    Math.round(20.49); // 20
    Math.round(-20.51); // -21

  • .Floor() Devuelve el máximo entero menor o igual a un número.

        Math.floor(20.5); // 21
    Math.floor(20.49); // 20
    Math.floor(-20.51); // -21

  • .max() retorna el mayor de cero o más números

        function calcularMayor(valor1, valor2, valor3){
        return Math.max(valor1, valor2, valor3);
    }
    
    // Mejorando calcularMayor
    function calcularMayor(){
    	var args = Array.prototype.slice.call(arguments);
    	return Math.max.apply(null, args);
    }

  • .min() retorna el menor de cero o más números

        function calcularExtremos(){
    	var args = Array.prototype.slice.call(arguments);
    	return {minimo: Math.min.apply(null, args),
    			maximo: Math.max.apply(null, args)
    	};
    }
    
    
    misExtremos = calcularExtremos(1,2,4,56,-123);
    
    console.log("Mínimo: "+misExtremos.minimo+"\n"+"Máximo: "+misExtremos.maximo);

Librerías:

Dates

Librerías:

Metodos

  • Creando Fechas:

    • Fecha Actual:
        var ahora = new Date();
    console.log(ahora);
    • Usando milisegundos (desde el 1/1/1970 00:00):
        var diaDespues = new Date(3600*24*1000);
    console.log(diaDespues);
    • Usando cadenas de texto:
        var newYear = new Date("January 1, 2016 00:00:00");
    • Usando números:
        var newYear = new Date(2016, 1, 1); // AAAA, MM, DD
    var newYear = new Date(2016, 1, 1, 0, 0, 0); // AAAA, MM, DD, HH, MM, SS
    • Usando UTC:
        var newYear = new Date(Date.UTC(2016, 1, 1));

  • Getters:

    • Local
        var ahora = new Date();
    console.log("La fecha es " + ahora);
    console.log("==== FECHA ====");
    console.log("El año: " + ahora.getFullYear()); // 4 digitos
    console.log("El mes: " + ahora.getMonth()); // 0 - 11
    console.log("El día de la semana: " + ahora.getDay()); // 0 - 6 (D - S)
    console.log("El día del mes: " + ahora.getDate()); // 1-31
    console.log("==== HORA ====");
    console.log("Horas: " + ahora.getHours());
    console.log("Minutos: " + ahora.getMinutes());
    console.log("Segundos: " + ahora.getSeconds());
    console.log("Milisegundos desde 1/1/1970: "+ ahora.getTime());
    console.log("milisegundos: " + ahora.getMilliseconds());
    • UTC
        var ahora = new Date();
    console.log("Con UTC: ";
    console.log("==== FECHA ====");
    console.log("El año: " + ahora.getUTCFullYear()); // 4 digitos
    console.log("El mes: " + ahora.getUTCMonth()); // 0 - 11
    console.log("El día de la semana: " + ahora.getUTCDay()); // 0 - 6 (D - S)
    console.log("El día del mes: " + ahora.getUTCDate()); // 1-31
    console.log("==== HORA ====");
    console.log("Horas: " + ahora.getUTCHours());
    console.log("Minutos: " + ahora.getUTCMinutes());
    console.log("Segundos: " + ahora.getUTCSeconds());
    console.log("milisegundos: " + ahora.getUTCMilliseconds());

  • Setters:

    • Local
        var newYear = new Date(Date.UTC(2016, 1, 1));
    console.info("La fecha es " + newYear);
    
    newYear.setFullYear(1980); // Pasamos a 1980
    console.info("La fecha es " + newYear);
    
    newYear.setDate(56); // 1 Enero + 56 Días
    console.info("La fecha es " + newYear);
    
    newYear.setUTCMilliseconds(1500); // 1500ms en formato UTC
    console.info("La fecha es " + newYear);
    
    newYear.setUTCHours(36); // le sumamos 36 horas
    console.info("La fecha es " + newYear);
    
    newYear.setMonth(-6); // le quitamos 6 meses
    console.info("La fecha es " + newYear);

  • Otros:

    • .getTimezoneOffset() Devuelve la diferencia entre tu zona horaria y UTC (en minutos)
        ahora.getTimezoneOffset();
    • .toString(), .toDateString(), .toTimeString() Devuelve una cadena con la fecha
        ahora.toString(); // Fecha y Hora
    ahora.toDateString(); // Solo Fecha
    ahora.toTimeString(); // Solo Hora
    • .toUTCString(), .toISOString() Devuelve una cadena con la fecha en formatos específicos
        ahora.toISOString(); // ISO
    ahora.toUTCString(); // UTC
    • .toLocaleString() Devuelve una cadena con la fecha en version local.
        
    var ahora = new Date();
    console.info(ahora.toLocaleString());
    
    // Código de idioma IETF para Alemán
    console.info(ahora.toLocaleString("de-DE"));
    
    // Opciones Avanzadas para fechas
    var opciones = { 
    weekday: 'long',
    year: 'numeric', 
    month: 'long', 
    day: 'numeric'};
    console.log(ahora.toLocaleString("de-DE", opciones));
    • Tiempo transcurrido:
        var inicio = new Date();
    // + código
    var fin = new Date();
    var transcurso = fin.getTime() - inicio.getTime();
    console.info("Pasaron "+transcurso+"ms");

Truco

Usar getters para modificar fechas (días, meses, etc...)

Nota: Partiendo del ejemplo de MDN

  • sin getters
	var theBigDay = new Date(1962, 6, 7);
	theBigDay.toLocaleString(); // 6/7/1962 23:00:00
	
	var theBigDay = new Date(1962, 6, 7);
	theBigDay.setDate(24);
	theBigDay.toLocaleString() // 23/7/1962 23:00:00
	
	var theBigDay = new Date(1962, 6, 7);
	theBigDay.setDate(32);
	theBigDay.toLocaleString() // 31/7/1962 23:00:00
	
	var theBigDay = new Date(1962, 6, 7);
	theBigDay.setDate(22);
	theBigDay.toLocaleString() // 21/7/1962 23:00:00
	
	var theBigDay = new Date(1962, 6, 7);
	theBigDay.setDate(22 + 32 +24);
	theBigDay.toLocaleString() // 15/9/1962 23:00:00
  • con getters
	var theBigDay = new Date(1962, 6, 7);
	theBigDay.toLocaleString(); // 6/7/1962 23:00:00
	
	var theBigDay = new Date(1962, 6, 7);
	theBigDay.setDate(theBigDay.getDate() + 24);  
	theBigDay.toLocaleString(); // 30/7/1962 23:00:00
	
	var theBigDay = new Date(1962, 6, 7);
	theBigDay.setDate(theBigDay.getDate() + 32);
	theBigDay.toLocaleString(); // 7/8/1962 23:00:00
	
	var theBigDay = new Date(1962, 6, 7);
	theBigDay.setDate(theBigDay.getDate() + 22);
	theBigDay.toLocaleString(); // 28/7/1962 23:00:00
	
	var theBigDay = new Date(1962, 6, 7);
	theBigDay.setDate(theBigDay.getDate() + 22 + 32 + 24);
	theBigDay.toLocaleString(); // 22/9/1962 23:00:00

String

Propiedades:

  • .length() Devuelve la longitud:
var cadena = "Fictizia";

console.log("Fictizia tiene " + cadena.length + " caracteres.");

console.log("Una cadena vacia tiene " + ''.length + " caracteres.");

Métodos:

  • .fromCharCode() Devuelve una cadena creada mediante una secuencia Unicode:
	console.info("Es es el año 2016 ("+ String.fromCharCode(8559,8559,8553,8548,8544) + ")");
  • .anchor() Crea un ancla HTML:
	document.body.innerHTML = "Contenidos".anchor("contenidos"); 
	// "<a name="contenidos">Contenidos</a>"
  • .link() Crea un enlace:
var textoActivo="Nuestro Curso"
var url="http://www.fictizia.com/formacion/curso_javascript"
document.body.innerHTML = "Haga click para volver a " + textoActivo.link(url);
  • .charAt() Devuelve el carácter específico:
var cadena="Fictizia";
console.log("El carácter(posición) 3 es '" + cadena.charAt(3) + "'")
  • .charCodeAt() Devuelve el valor Unicode:
var cadena="Fictizia";
console.log("El carácter(posición) 3 es '" + cadena.charAt(3) + "', en unicode ("+cadena.charCodeAt(3)+")")
  • .concat() Combina el texto de dos o más cadenas:
var cadena1 = "Oh ";
var cadena2 = "qué maravillosa ";
var cadena3 = "mañana'.";
var combinacion = cadena1.concat(cadena2,cadena3);
console.log(combinacion); // devuelve "Oh qué maravillosa mañana'."
  • .indexOf() Devuelve el índice o -1:
"Mundo Web".indexOf("Web") // 6
"Mundo Web".indexOf("web") // -1
  • .lastIndexOf() Devuelve el índice de la última coincidencia o -1:
"Fictizia".lastIndexOf("i"); // 6
"Fictizia".lastIndexOf("f"); // -1
  • .split() Divide una cadena usando un separador:
function dividirCadena(cadenaADividir,separador) {
   var arregloDeCadenas = cadenaADividir.split(separador);
   console.log('<p>La cadena original es: "' + cadenaADividir + '"');
   console.warn('<br>El separador es: "' + separador + '"');
   console.log("<br>El arreglo tiene " + arregloDeCadenas.length + " elementos: ");

   var elementos = "";
   for (var i=0; i < arregloDeCadenas.length; i++) {
      elementos += arregloDeCadenas[i] + " / ";
   }

   console.info(elementos);

}

var cadenaVerso = "Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500";
var cadenaMeses = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec";

var espacio = " ";
var coma = ",";

dividirCadena(cadenaVerso, espacio);
dividirCadena(cadenaVerso);
dividirCadena(cadenaMeses, coma);
var cadena = "Fictizia";
console.log(cadena.slice(5)); // zia
console.log(cadena.slice(0, 5)); // Ficti
console.log(cadena.slice(3, -1)); // tizi
  • .substr() Devuelve los caracteres de una cadena comenzando en la localización especificada, y en el número de caracteres especificado.:
var cadena = "Fictizia";
console.log("(0,5): "    + cadena.substr(0,5)); // Ficti
console.log("(5,3): "    + cadena.substr(5,3)); // zia
  • .substring() Devuelve un subconjunto:
var cadena = "Fictizia";
console.log("(0,5): "    + cadena.substring(0,5)); // Ficti
  • .toLocaleLowerCase() Devuelve todo en minúsculas con las características locales:
console.log('FICTIZIA'.toLocaleLowerCase()); // 'fictizia'
  • .toLocaleUpperCase(Devuelve todo en mayúsculascon las características locales) **:
console.log('fictizia'.toLocaleUpperCase()); // 'FICTIZIA'
  • .toLowerCase() Devuelve todo en minúsculas:
console.log('FICTIZIA'.toLowerCase()); // 'fictizia'
  • .toUpperCase() Devuelve todo en mayúsculas:
console.log('fictizia'.toUpperCase()); // 'FICTIZIA'
  • .trim() Elimina espacios vacios al principio y final de la cadena:
console.log('  Fictizia '.trim()); // 'Fictizia'