Breve historia

El lenguaje javascript fue diseñado por Brendan Eich en 1995.

Su primera utilización fue como una beta en el navegador Netscape 2.0 bajo el nombre Livescript. No fue sino hasta la beta 3 del navegador cuando fue nombrado javascript.

Este lenguaje nació ante la necesidad de volver los sitios web mas dinámicos.

Breve historia

En respuesta a esto Microsoft libero sus lenguajes de scripting VBScript y JScript en 1996, este ultimo creado a partir de ingeniería inversa de la implementación de javascript de Netscape. 

Microsoft incluyo el JScript en la version 3.0 del Internet Explorer.

En ese entonces cada navegador tenia su propio estándar para scripting y css por lo que dificultaba la creación de sitios web.

Breve historia

En Noviembre de 1996 Netscape envió su Javascript al Ecma International(European Computer Manufacturers Association) para iniciar el proceso de estandarización y terminar con el problema de uso en los navegadores.

Así que en Junio de 1997 se libero la primera especificación oficial de ECMAScript en el estándar ECMA-262.

Manejo de Javascript

Al igual que el CSS el javascrip tiene diversas maneras de ser agregadas al HTML.

Estas declaraciones pueden ser:

• Externas
• Internas
• Inline

Manejo de Javascript

En una declaración Internal el javascript se agrega directamente en el html, solo hay que declarar los elementos <script> y dentro de estos se define el código.

Tiene la desventaja de que el código no puede reutilizarse si se utilizan varios archivos html.

<style>
    var a = "Hola mundo";
    alert(a);
</style>

Manejo de Javascript

En una declaración External todo el codigo javascript se define en un archivo separado utilizando la extension ".js" y se añade al html mediante la etiqueta <script>.

Esta declaración tiene la ventaja de que todo el código javascript puede ser reutilizado.

var a = "Hola mundo";
alert(a);

<script src="NombreDeArchivo.js"></script>

Manejo de Javascript

En una declaración Inline se incluye un poco de codigo javascript dentro del HTML.

function saludo() {
    var a = "Hola mundo";
    alert(a);
}

<button onclick="saludo()">Saludar!</button>

Javascript APIs

Las APIs(Application Programming Interfaces) son extensiones sobre la funcionalidad del javascript

Las podemos agrupar en 2 categorías:

• Browser APIs
• Third party APIs

Javascript APIs

Las Browser APIs estan construidas sobre el navegador y nos ayudan a exponer informacion del entorno de la maquina. Por ejemplo:

• DOM (Document Object Model) API: Nos permite manipular el HTML y CSS de forma dinámica.
• Geolocation API: nos entrega información geográfica
• Canvas y WebGL
• Audio y Video APIs: nos permite reproducir audios y vídeo y grabar vídeo atraves de la cámara.

Javascript APIs

Las Third party APIs no estan incluidas por default en el navegador asi que hay que incluirlas de algun sitio.

Estas son desarrolladas por diferentes empresas para interactuar con sus aplicaciones, por ejemplo:

• Twitter API para desplegar tweets en tu sitio
• Google Maps API para incluir mapas en tu sitio
• Etc...

Variables

Una variable en javascript debe iniciar con una letra, un guion bajo (_) o el símbolo de pesos ($).

Una variable se puede declarar de tres formas:

• Con la palabra clave var
• Asignando un valor de forma directa, por ejemplo,
  x=27, esto declara la variable como global en automático
• Con la palabra clave let

Variables

Una variable se considera global cuando se define fuera de cualquier función.

Una variable local es aquella que se declara adentro de una función.

function test(){
    if(true) {
        var x = 0;
    }
    console.log(x); //imprime 0 ya que es local en el bloque
}

Variables

Si utilizamos la declaración let, solo sera local para el bloque.

function test(){
    if(true) {
        let x = 0; //es local en el bloque del if
    }
    console.log(x); //undefined ya que no esta definida
}

Variables

Como vimos en el ejemplo anterior, utilizar una variable antes de ser declara no genera excepciones, simplemente devuelve undefined.

console.log(x === undefined); // true
var x = 3;

Constantes

La sintaxis de declaración de una constante es idéntica a la de una variable, solo tienen la peculiaridad que cuando se declaran se les debe inicializar un valor ya que no puede ser cambiado o reasignado.

const x = 3;
console.log(x); // 3
x = 5; //Error

Tipos de datos

Javascript es un lenguaje dinamico por lo que no hay que preocuparnos por definir un tipo a cada variable, este es determinado en automático al ser asignada.

var x = 27; //"x" es un numero
var x = "texto"; //"x" ahora es un string
var x = true;  //y ahora "x" es boleana 

Tipos de datos

El estandar que utilizaremos define 6 tipos de datos, de los cuales 5 son primitivos:

• Boolean: true o false
• null
• undefined
• Number: puede ser entero o decimal
• String: con comillas simples o dobles

Y el Object*

Operadores

Operadores aritmeticos

Operadores

Operadores de comparación

Operadores

La diferencia entre el operador "==" y "===" es que en el primero se convierten los operandos si es que estos no son del mismo tipo.

3 == '3' //true ya que los convierte al mismo tipo
3 === '3' //false

Si los dos operandos son objetos entonces javascript revisa que ambos tengan la referencia de memoria del mismo objeto.

Operadores

Operador ternario:    condición ? expresión1 : expresión2

var x = true ? 1 : 0;
var y = 2 > 4 ? 'Es menor' : 'Es mayor';

Si la condición evalúa la true, entonces se aplica la expresión 1, sino la expresión 2.

Control de flujo

Se utilizan para tomar decisiones en base a una condición, en javascript existen 2 declaraciones de control de flujo: if...else y switch.

if (condicion_1) {
  declaracion_1;
} else if (condicion_2) {
  declaracion_2;
} else if (condicion_n) {
  declaracion_n;
} else {
  ultima_declaracion;
} 

Evalúan a false:

• false
• undefined
• null
• 0
• NaN
• String vacio (" ")

Control de flujo

switch (expresión) {
  case valor_1:
    declaraciones;
    [break;]
  case valor_2:
    declaraciones;
    [break;]
    ...
  default:
    declaraciones_default;
    [break;]
}

Evalúa la expresión para determinar con que valor coincide, en caso de no coincidir con ninguno entonces ejecuta las declaraciones dentro de default.

El break es opcional, sin embargo sino esta presente se ejecutaran las declaraciones de los siguiente case, hasta no encontrar un break o que se termine el switch.

Bucles

Repiten una acción un determinado numero de veces.

En javascript existen:

• for loop
• while
• do...while
• for...in
• for...of

ciclo for

Se repite hasta que su condición evalúe a falso.

for ([Expresion_inicial]; [condicion]; [expresion_de_incremento])
  declaraciones

for(var i = 0; i < 10; i++) {
    console.log("El valor de i es:" + i);
}

ciclo while

Se repite mientras la condición evalúe a true.

while (condicion)
  declaracion

var n = 0;
var x = 0;
while (n < 3) {
  n++;
  x += n;
}

ciclo do...while

do
  declaracion
while (condicion);

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

ciclo for...in

for (variable in objeto) {
  declaracion
}

Recorre todas las propiedades enumerables de en objeto.

Si el objeto utilizado es un arreglo, entonces nos regresara los indices del arreglo en la variable.

ciclo for...of

for (variable of objeto) {
  declaracion
}

Recorre todos los valores de un objeto enumerable, similar a un foreach.

Funciones

Son bloques que ejecutan una serie de instrucciones.

Se declara mediante la palabra clave function, seguido de:

• Nombre de la función
• Parámetros separados por comas y entre paréntesis
• Las llaves { } englobando las instrucciones

function suma(numero1, numero2) {
  return numero1 + numero2;//return es opcional
}

Funciones

Si el parámetro enviado a la función es un primitivo, entonces se pasa solo su valor.

Si lo que se envía es un objeto creado por el usuario o un arreglo, entonces se envía la referencia del objeto.

También se pueden definir funciones anidadas, solo que estas funciones serán privadas para la función padre.

Funciones

También es posible crear objetos con funciones privadas mediante el uso de funciones anónimas.

var crearPersona = function(nombre) {
  var edad;
  
  return {
    setName: function(newName) {
      nombre = newName;
    },
    
    getName: function() {
      return nombre;
    },
    
    getAge: function() {
      return sex;
    },
    
    setAge: function(newAge) {
      edad = newAge;
    }
  }
}

Funciones

La referencia completa de funciones globales de javascript se pueden consultar en la siguiente liga.

Referencia

Objetos

En javascript un objeto es una colecciones de propiedades, donde cada propiedad esta asociada a un valor.

Los valores pueden ser a su vez otros objetos o funciones.

Podemos crear objetos de dos formas.

var mi_objeto = new Object();
var otro_objeto = {};

Objetos

Podemos acceder a las propiedades de dos formas:

objeto.propiedad_1;
objeto["propiedad_1"];

Debido a que las propiedades de los objetos pueden ser asociadas a un string, también se les suele llamar arreglos asociativos.

Objetos

Los objetos también pueden ser inicializados de una forma similar al json.

var persona = { "nombre":"default", "edad":0, "telefono":"01800" };

Primero nombre de la propiedad seguido de un dos puntos(:) y después el valor, en caso de agregar varias propiedades estas deben estar separadas por comas (,).

Objetos

Si se intenta asignar valor a una propiedad no existente en un objeto, esta es agregada al objeto.

var persona = { "nombre":"default" };
persona["edad"] = 0; /* se agrega la propiedad edad 
al objeto persona */

Objetos

También se pueden crear objetos a partir de dos pasos:

1. Definir el objecto como una función de construcción.
2. Crear una instancia del objeto con new.

function Persona(nombre, edad, telefono) {
    this.nombre = nombre;
    this.edad = edad;
    this.telefono = telefono;
}
var alumno = new Persona("default", 0, "01800");

Objetos

Hay que tener cuidado cuando se quieran comparar objetos, ya que como estos se manejan como referencias nunca van ser iguales, se debe comparar propiedad por propiedad para determinar igualdad.

var fruit = {name: "apple"};
var fruitbear = {name: "apple"};

fruit == fruitbear // return false
fruit === fruitbear // return false

Objetos

En JavaScript casi todo es un objeto. Incluso los tipos de datos primitivos (excepto null y undefined) pueden ser tratados como objetos.

Los arreglos también son considerados objetos.

Objeto Array

Los arreglos de javascript tienen un comportamiento muy similar a las listas, ya que se pueden agregar elementos de forma dinámica al arreglo.

var arreglo = [elemento0, elemento1, ..., elementoN];
new Array(elemento0, elemento1, ..., elementoN);
new Array(longitud_de_arreglo);

Objeto Array

Los elementos de los arreglos son accedidos mediante corchetes y el indice al que se quiere acceder.

var arr = ["uno", "dos", "tres"];
arr[2];//dos

Referencia completa del objeto array

Manejo de excepciones

La sentencia try nos permite definir un bloque de código que va ser monitoreado mientras se ejecuta.

La sentencia catch define un bloque de instrucciones que ejecutar cuando se produzca un error en su try.

try {
    //bloque de try
}
catch(error) {
    //bloque para manejo de errores
}

Manejo de excepciones

Si queremos lanzar un error personalizado se utiliza la sentencia throw.

if(number > 500) {
    throw "Numero muy grande";
}

Manejo de excepciones

La sentencia finally nos permite ejecutar un bloque de código después del try y catch independientemente del resultado.

try {
    //bloque de try
}
catch(error) {
    //bloque para manejo de errores
}
finally {
    //bloque que se ejecuta sin importar el resultado del try/catch
}

Entorno del navegador

El navegador nos provee de un modelo jerárquico de objetos que utilizamos para acceder a diversa información, como la ventana, pagina, elementos, etc.

Otra forma de llamar esta jerarquía es Browser Object Model (BOM).

Window

Document

Navigator

Screen

History

Location

Objeto window

Este objeto representa una ventana abierta en el navegador, este objeto es soporta por todos los navegadores.

Todos los objectos, funciones y variables globales de javascript pasan a ser parte del objeto window.

Es el objecto base que contiene a todos los demás objetos javascript.

Objeto window

Tiene propiedades que se pueden acceder directamente por ejemplo:

var width = window.innerWidth;//ancho de la ventana en pixeles
var height = window.innerHeight;//alto de la ventana en pixeles

Referencia

HTML DOM

Cuando una pagina se carga, el navegador crea un Document Object Model de la pagina.

Este modelo HTML DOM esta construido como un árbol de objetos, ya que para este todo es un nodo.

HTML DOM

HTML DOM

Este objeto es la principal interfaz de programación para el HTML define:

• Elementos HTML como objetos
• Propiedades de todos los elementos HTML
• Metodos para acceder a todos los elementos HTML
• Eventos para los elementos HTML

TL;DR: Es el estándar para obtener, agregar, cambiar o eliminar elementos html.

Objeto Document

El objeto document es creado dentro del DOM, como elemento base o raíz.

Cuando se carga el documento html este pasa a ser el objeto document.

Si queremos seleccionar un elemento HTML, siempre hay que empezar con este objeto.

Objeto Document

document.getElementById(id);//Encuentra un elemento por id
document.getElementsByTagName(name);//Encuentra una lista de elementos por tag
document.getElementsByClassName(name);//Encuentra una lista de elementos por clase

document.querySelector("selector"). Encuentra el primer elemento que coincida con el selector CSS especificado.

document.querySelectorAll("selector"). Devuelve una lista de todos los elementos que coincidan con el selector CSS especificado.

Ajax

El ajax es una herramienta muy poderosa para el programador, mediante este podemos:

• Actualizar una pagina sin tener que refrescarla
• Solicitar información al servidor después de que la pagina ya esté cargada
• Recibir información del servidor después de que la pagina ya esté cargada
• Enviar datos al servidor de forma asincrona

Ajax

AJAX == Asynchronous Javascript and XML (no es necesario entender el XML para utilizar ajax).

El ajax usa estándares de internet, este usa una combinación de:

• El objeto XMLHttpRequest, para operaciones con el servidor
• JavaScript/DOM

Ajax

Ajax

var xhttp;
if (window.XMLHttpRequest) { //Validamos que el navegador tenga soporte
    //Creamos la variable para manejar el request
    xhttp = new XMLHttpRequest();
}

Creación

Ajax

Para recibir la respuesta se utiliza el evento onreadystatechange

Ajax

Para procesar una petición respondida exitosa mente utilizaríamos tendríamos que buscar el ready state 4 y el status 200.

Ajax

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            this.responseText;
       //responseText almacena el contenido que regreso la peticion
        }
    };
    xhttp.open("GET", "http://myURL", true);
    xhttp.send();
}

Ejercicios

Hacer una funcion que reciba dos numeros e imprima el mayor

Ejercicios

Hacer una función que reciba un numero y determine si es par o impar

Ejercicios

Hacer una función que tome un cadena y convierta a mayusculas la primera letra de cada palabra

Ejercicios

Cambiar el estilo de un boton mediante javascript, al darle click a este

Ejercicios

Hacer una función que valide cada 500ms que el texto capturado en un campo sea un numero

Ejercicios

Mediante un botón, agregar elementos a una lista utilizando javascript

Ejercicios

Crear un dropdown con un botón, este botón eliminara el elemento seleccionado del dropdown

Ejercicios

Hacer una aplicación que nos indique el tamaño de la ventana, incluso cuando cambie de tamaño. Escribirlo en un span o párrafo.

Ejercicios

Hacer una forma para capturar dos números, agregar un botón para desplegar la suma de estos y otro para la resta. Escribir en un span o párrafo.