JavaScript

Introducción

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

JavaScript es un lenguaje de programación interpretado, es orientado a objetos, basado en prototipos, imperativo, debilmente tipado y dinámico.

Éste lenguaje es mayormente utilizado en las páginas web para hacerlas más dinámicas (lado del cliente).

También es utilizado para el lado del servidor, por ejemplo, con node.js

¿Por qué JS?

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

  • Javascript es el lenguaje de la web
  • Un mismo lenguaje para cliente y servidor (node.js y js)
  • Compatible con todos los navegadores
  • Porque es un lenguaje facil de aprender

Números

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

  • Sólo existe un tipo: flotante de 64 bits.
  • NaN es un valor númerico del resultado de una operación que no produce un resultado normal

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Métodos

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Convierte un numero a un string con x dgitos decimales (por defecto es cero).

digitos debe ser un numero entre 0 y 20

toFixed(digitos)

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Convierte un numero a string.

base debe ir entre 2 y 36, y por defecto es 10.

toString(base)

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Falsy Values

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Existen diferentes valores que se denominan falsos en JS, es decir, aquellos que en un condicional retornarán falso.

  • false
  • null
  • undefined
  • ""
  • 0
  • NaN

 

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Strings

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Se puede utilizar comillas simples o dobles para definir un string.
En JS no existe el tipo caracter.

Métodos

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Retorna el caracter en la posición pos. Si pos es menor a cero o mayor al tamaño del string, retorna una cadena vacía.

charAt(pos):

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Busca una letra a partir de una posicion pos.

Por defecto pos es cero.

Retorna la posición de la primera ocurrencia de letra que encuentre. Si no la encuentra retorna -1.

indexOf(letra,pos)

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Crea un nuevo string copiando una porcion de otro string.

Si inicio es negativo, se le suma el tamaño del string.

fin es opcional, por defecto es el tamaño del string.

slice(inicio, fin)

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Crea un arreglo de strings partiéndolo en pedazos.

limite es la cantidad de piezas que van a ser partidas, este valor es opcional.

split(separador,limite)

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Convierte un string a minúsculas y mayúsculas, respectivamente.

toLowerCase() y toUpperCase()

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Objetos

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

En JS todos los valores son OBJETOS, exceptuando los

números, strings, booleanos(true, false), null, y undefined, los cuales son Object-like (tienen métodos pero son inmutables).

Un objeto es un contenedor de propiedades, caracterizados por un nombre y un valor.

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Actualización y modificación de los objetos

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Se debe tener mucho cuidado a la hora de declarar objetos e igualarlos a alguno ya existente, ya que no se hace una copia si no que ambos objetos referencian el mismo, si modifico uno, el otro tambien cambiará.

Referencias

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Todos los objetos de JS están vinculados a un objeto prototipo del cual pueden heredar sus propiedades: Object.prototype.

Prototipos

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Se pueden añadir atributos y metodos tanto al objeto creado como al objeto prototipo.

Añadiendo atributos y métodos

Tambien se pueden modicar los objetos estandar de JS como son arrays, Date, RegExp, function, etc

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Otra forma de crear objetos es especicando cual va a ser su prototipo.

Reflejo

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Prototype chain

Cada objeto tiene un enlace interno a otro objeto: su prototipo. Ese objeto prototipo tiene su propio prototipo, y así sucesivamente hasta que se alcanza un objeto cuyo prototipo es null. Por definición, null no tiene prototipo, y actúa como el final de esta cadena de prototipos.

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Existe un método para remover un atributo de un objeto:  delete.

Removiendo atributos

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Para evitar la mala interaccion con otras aplicaciones, widgets y librerías, es recomendable utilizar una única variable que contenga toda la aplicacion, de esta forma:

 

Evitando las variables globales

var MYAPP = MYAPP || {};

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Funciones

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Todo en JS son objetos, inclusive las funciones.

Se puede almacenar funciones en variables, objetos y arreglos.

Las funciones están vinculadas a Function.prototype, el cual a su vez está vinculado a Object.prototype.

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Existen dos formas de crear una función:  declarativas y de expresión.

Declaraciones

function f(){} // declarativa

var fun = function f () {}; // de expresión

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

La diferencia entre ambas radica en que la primera forma parte de un programa global, y son evaluadas antes que cualquier otra expresion. La segunda es una expresion que forma parte de un punto concreto, y es evaluada en tal punto.

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

A parte de los parametros definidos por una funcion, este recibe siempre this y arguments.

Si se envían más parametros de los esperados, estos se ignoran; si por el contrario, se envían menos parametros de

los esperados, el valor undefined será sustituido en estos valores.

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Scopes se refiere al alcance de las variables en cada funcion o en todo el codigo.

Pueden ser definidas local o globalmente.

Scopes

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

This hace referencia al objeto que hace el llamado, y éste valor cambia dependiendo del scope al que estamos sometidos.

This

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

obj.metodo2 = function () {
    console.log("Retorna : " + this);
    setTimeout(function (){
        console.log("Luego retorna : " + this);
    }, 1000);
}
var mifun = function () {
    console.log("Retorna : " + this);
}

var obj = {};
obj.metodo1 = function () {
    console.log("Retorna : " + this);
}

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Currying

Es una forma de construir funciones, nos permite crear nuevas funciones combinando una función y un argumento.

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Cuando hablamos de Closures nos referimos al alcance que tienen las funciones internas con respecto a sus propias variables locales y a las que estan por fuera de ellas.

Closures

Podramos decir que todos los "hijos" pueden acceder a las variables de sus "padres", pero no en sentido contrario.

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Los Closures son utilizados para el encapsulamiento, ya que en JS no existe otra forma de hacer funciones, objetos o variables privadas

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Herencia

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

La herencia es un mecanismo para la reutilizacion y extensibilidad del codigo.

En lenguajes orientadas a objetos, los objetos son instancias de una clase, y una clase puede heredar de otra.

JS es un lenguaje prototipado, lo que signica que los objetos pueden heredar directamente de otros objetos.

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Arreglos

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Los arreglos en JS tienen el mismo funcionamiento que en otros lenguajes de programacion.

Éstos heredan de Array.prototype, en el cual se tienen definidos diferentes métodos.

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Métodos

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Para conocer el tamaño de un arreglo se accede a la propiedad length.

Si almacenamos un elemento en una posicion que no está definida en el arreglo, el tamaño de éste incrementará para contener el nuevo elemento.

length

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Las matrices en JS se implementan como un arreglo de arreglos.

Matrices

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Para concatenar elementos al final de un arreglo se utiliza concat() donde elementos son todos los elementos que quieren ser concatenados.

concat(elementos)

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Convierte un array en un string con un separador, por defecto es  ","

join(separador)

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Remueve y retorna el ultimo elemento en el arreglo.

Si el arreglo está vacío, retorna undefined.

pop()

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Agrega elementos al final de un arreglo.

Retorna el tamaño del arreglo.

push(elemento)

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Reversa un arreglo, retornándolo.

reverse()

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Hace una copia superficial de un pedazo de un arreglo.

fin es opcional, por defecto es el tamaño del arreglo.

slice(inicio, fin)

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Remueve elementos de un arreglo reemplazándolos con nuevos elementos.

cantidad es la cantidad de elementos que van a ser reemplazados comenzando desde inicio. elemento son los nuevos elementos a insertar.

Retorna los elementos removidos.

splice(inicio, cantidad, elemento):

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Agrega elementos a un arreglo pero posicionandolos al comienzo de éste.

"Empuja" el resto de elementos a la derecha. Retorna el nuevo tamaño del arreglo.

unshift(elementos)

developerjoint@gmail.com

/jointDeveloper

/jointDev

jointdeveloper.com

Para más información:

https://www.sharelatex.com/project/576414791272fa5867c12ff2

JavaScript: The Good Parts.

Douglas Crockford