Fundamentos

de JavaScript

¿ Qué es JavaScript ?

Es un lenguaje de programación diseñado principalmente

para agregar comportamiento dinámico a una página web.

Todos los navegadores modernos interpretan el código JavaScript integrado en una página web.

Hoy en día, es posible utilizar totalmente JavaScript para construir nuestro contenido web.

Caracteristicas

• Fácil de aprender y hacer andar.
• Flexible.
• Cambiante y en constante crecimiento. (ECMAScript).
• Dificil de dominar.

Paradigma de Programación

• Es un estilo de desarrollo de programas

• Es la forma es la que pensamos cómo resolver una determinada problemática

Formalmente lo podemos definir cómo:

" Un conjunto de creencias, prácticas y conocimientos que guían el desarrollo de una disciplina en un periodo de tiempo"

De una manera más conceptual, lo definimos de la siguientes maneras:

Tipos de Paradigmas

de Programación

• Orientado a Objectos
• Funcional
• Imperativo
• Declarativo
• Procedural
• Dirigida por eventos
• ...etc

Tipos de Paradigmas

de Programación que maneja JavaScript

• Orientado a Objectos
• Funcional
• Imperativo
• Declarativo
• Procedural
• Dirigida por eventos
• ...etc

Variables

Una variable no es más que un espacio en memoria reservado para almacenar información, estos espacios pueden ser de tipo dinamico o estatico, lo cual depende del lenguaje.

Particularmente JavaScript, al ser un lenguaje NO TIPADO, una variable puede almacenar un número y más tarde almacenar en la misma variable una frase.

Un lenguaje tipado es aquel donde una variable es de un solo tipo y mientras exista, no puede guardar valores de otro tipo sin cambiar antes su tipado a traves de funciones.

Tipos de Variables

Las variables que maneja internamente JavaScript son:

• number (números)
• string (texto)
• null (valor desconocido)
• undefined (sin valor asignado aún)
• object (objeto)


•  

Parte del nuevo estándar ECMAScript 2015 (ES6) define un nuevo tipo:

• Symbol (valor único e inmutable)

Objetos

Los objetos son uno de los tipos más utilizados a la hora de construir programas.

Permite contener más valores dentro de sí mismo, normalmente llamadas propiedades.

Text

var persona = {
    
    nombre: 'Daniel'

    apellido: 'Mata'

    extranjero: true,

    identifica: function() {

        console.log("Soy una persona");
    }
};

Un ejemplo de un objeto sería el siguiente:

Propiedades

Objeto

Acceso a sus propiedades

Para acceder a las propiedades de un objeto lo hacemos así:

Constructor

Definición de un Objeto genérico

Muchas veces queremos crear varias instancias de un mismo objeto, en este caso, queremos crear varias instancias de Persona. Para ello hacemos lo siguiente;

what is this ?

Es una palabra reservada dentro del lenguaje.

El this nos permite definir el contexto donde se ejecuta una función.

En el ejemplo anterior, lo que estamos haciendo es establecer que las nuevas variables (nombre, apellido, extranjero) pertenecen al contexto en el que se ejecuta la funcion.

Método .bind()

Imaginemos que tenemos la siguiente función:

Lo que sucedió es que la función imprimirNombre no tiene un contexto de ejecución asociado. Para resolverlo, hacemos:

¿ Qué es el .bind(context) ?

El método bind() crea una nueva función, que cuando es llamada, asigna a su operador  this el valor entregado, con una secuencia de argumentos dados precediendo a cualquiera entregados cuando la función es llamada.

Es importante el uso del .bind() porque cada función tiene su propio contexto determinado, y es necesario especificarlo de manera implícita antes de llamar a un método que use valores asociados al this

apply / call vs bind

Los dos se utilizan para asociar un determinado contexto a una función. La principal diferencia es:

• apply / call

• bind

apply: permite llamar a una función pasándole un contexto y una seria de parámetros  en forma de array 

call: permite llamar a una función pasándole un contexto y una seria de parámetros individualmente

Te devuelve una nueva función con un contexto asignado

Prototipos en JavaScript

JavaScript es un lenguaje que utiliza objetos, pero que en lugar de estar basado en clases, se basa en prototipos. Debido a esta diferencia, puede resultar menos evidente que JavaScript te permite crear jerarquías de objetos y herencia de propiedades y de sus valores. 

Un prototipo es un objeto del cual otros objetos heredan / delegan sus propiedades

Todos los objetos tienen asociado un prototipo por defecto

Clases en JavaScript

Una clase es una "plantilla" para definir objetos. Se usan para representar entidades o conceptos de la realidad. 

En el nuevo estándar de JavaScript (ES6 o ECMAScript 2015) se introdujo el concepto de clases para definir objetos.

Es una mejora sintáctica mucho mas clara y simple para proveer herencia basada en prototipos. Es importante aclarar que las clases NO introducen un nuevo modelo de herencia o delegación

Definiendo prototipos

Recordando el ejemplo anterior, en donde definimos una Persona. Supongamos que queremos mostrar el nombre completo para todos los objetos del tipo Persona.

La funcion Persona, no posee en su definicion, la funcion mostrarNombre.

Pero puede usarla porque esta definido en su prototipo.

Delegando prototipos

Ahora se nos pide definir un tipo de objeto Empleado. El empleado tiene la misma definición que una Persona pero con un sueldo asociado. Entonces, el nuevo tipo va a ser una "herencia" de Persona en conjunto con sus propios atributos y métodos.

function empleado(nombre, apellido, extranjero, sueldo) {
  persona.call(this, nombre, apellido, extranjero);
  this.sueldo = sueldo;
};

empleado.prototype = Object.create( Persona.prototype );

empleado.prototype.calcularAguinaldo = function() {
  console.log(this.sueldo/2);
};

var yo = new empleado('daniel', 'mata', true, '52000');

yo.mostrarNombre(); // daniel Mata
yo.calcularAguinaldo(); // 26000
console.log(yo.extranjero) // true

Delegando prototipos

Esta Cadena de prototipado puede llegar tan lejos como lo

requiera el programa, mas adelante es necesario declarar una variable para jubilados y una forma de calcular su jubilacion

function jubilado(nombre, apellido, años, sueldo) {
    persona.call(this, nombre, apellido);
    this.años = años;
    this.sueldo = sueldo;
}

jubilado.prototype = Object.create( empleado.prototype );

jubilado.prototype.calcularJubilacion = function() {
	console.log(this.sueldo * this.años)
};
var abuela = new jubilado('edna', 'cortez', '20', '10000');

abuela.mostrarNombre(); // edna cortez
abuela.calcularAguinaldo(); // 5000
abuela.calcularJubilacion(); // 200000

Cadena de prototipado

Persona

Jubilado

Yo

Empleado

Alguien

Abuela

Object.prototype

Gracias a todos

Happy Hacking!