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
JavaScript
By Carolina Jimenez Gomez
JavaScript
Presentación Charla - Comunidad jointDeveloper
- 467