Una mojadita en javascript

Joaquín "joac.js" Sorianello

Cordoba - 2013

Por que esta charla

  • Javascript™ es un lenguaje bonito e incomprendido
  • Con la llegada de HTML5 y los browsers modernos hacen falta mas developers
  • Javascript™ está en todas partes
  • Tiene mis iniciales y eso lo hace el mejor lenguaje del mundo

Antes de poner la carne al fuego

  • Si hay typos... esta charla es como javascript
  • Si no entiende, pregunte.
  • Si hablo muy rapido, avise.
  • Si me equivoco, corrijame, lo hago a propósito para ver si estan atentos.

Un poquito de historia

  • Creado en Netscape™ por Brendan Eich
  • Lanzado al mercado en septiembre de 1995 (Ya cumplio 18!)
  • Originalmente llamado LiveScript
  • Estandarizado en junio del 97 como ECMAScript
  • La llegada de ajax y la web dinámica, le dio un gran impulso

Features

  • Tipado Dinamico
  • Basado en objetos
  • Utiliza prototipos
  • Las funciones son first class citizens

Comparando con python

  • No tiene clases "as is"
  • Hay muchos interpretes y los requerimientos del Mundo Real™ nos obligan a escribir codigo que funcione correctamente, a pesar de las diferencias entre ellos.
  • Muchos no programadores escriben Javascript

Donde hay javascript

  • Browsers, casi todos (lynx?)
  • Unity 3d
  • Map-Reduce de MongoDB
  • Suite Adobe
  • El nuevo telefono de Mozilla

Y porque es tan "poronga"?

  • El lenguaje en si tiene falencias, que tienen que ver con su fugaz desarrollo y lanzamiento.
  • Se desarrollan muchas aplicaciones javascript sin conocer el lenguaje
  • La sintaxis es similar a otros lenguajes, pero no se comporta de la misma manera.
  • Como está apareado a un runtime, muchas personas consideran las falencias en el manejo del DOM, como falencias de Javascript
  • Los bloques no definen scopes

Todo es global

1 mi_numero = 8;
2 function mi_funcion_mala() {
3     mi_numero = 5;
4 };
5 console.log(mi_numero)
6 // -> 8
7 mi_funcion_mala()
8 console.log(mi_numero)
9 // -> 5

Namespace compartido

  • Todos los tags script comparten el mismo Namespace
  • Tenemos que ser cuidadosos a la hora de incluir librerias de terceros
  • Tenemos que ser cuidadosos con la "huella" que deja nuestro código en el namespace global

Operador "+" concatena y suma

 1 console.log(1 + 2)
 2 // -> 3
 3 console.log(1 + 2 + '3')
 4 // -> 33
 5 console.log('1' + 2 + 3)
 6 // -> 123
 7 console.log('1' + [2, 3])
 8 // -> 12,3
 9 console.log('1' + {foo: 2, bar: 3})
10 // -> 1[object Object]
11 console.log(1 + {foo: 2, bar: 3})
12 // -> 1[object Object]
13 console.log(+{foo: 2, bar: 3} + 1 + 'Hola!' + (-'00001'))
14 // NaNHola!-1

Hay que tener cuidado!

Los ';' se completan magicamente.

  • Y las reglas de esa magia no son tan obvias
  • Nuestro código se rompe si lo minificamos sin tener cuidado

Un poco de objetos

La forma mas naive de crear un objeto:

 1 a = { 
 2   x: 20, 
 3   y: 30,
 4   toString: function() {
 5       return "<Punto(x=" + this.x + " y=" + this.y + ")>";                        
 6   },  
 7 };
 8 
 9 console.log(a);
10 console.log("El objeto es: " + a);
11 console.log(+a);

No es la unica

Parece un JSON

1 foo = {"x":20, "y":30};  // JSON y javascript valido
2 bar = {x: 30, y:30 };    // Objecto javascript

Son similares, pero no son lo mismo

Y las clases?

Javascript no tiene clases "as is", pero nos permite crear funciones constructoras:

1 function Punto(x, y) {
2     this.x = x; 
3     this.y = y; 
4     this.toString = function() {
5         return "<Punto(x=" + this.x + ", y=" + this.y + ")>";                              };  
6 };

Notar que this es implicito!

How is 'this'? Pt.1

Probemos!

How is 'this'? Pt.2

  • Si usamos new, se construye un nuevo objeto vacio y this corresponde a ese nuevo objeto.

  • Si llamamos a la funcion a secas, this corresponde al objeto global :P

  • Si "attachamos" la funcion a un objeto, this corresponde a ese objeto

Dealing with 'this'

apply

1 fun.apply(thisArg[, argsArray])

call

1 fun.call(thisArg[, arg1[, arg2[, ...]]])

Prototype this!

Prototype override

Buenas practicas 1

Ser expicitos con los scopes, y usar window

1 window.mi_global = 50;

Definir las variables al inicio de las funciones

1 function mi_funcion() {
2     var variable = 75, variable_2 = {foo: 16};
3 };

Usar variables que empiecen con $ para denotar selectores

1 $div_loco = $('#div_loco');

Buenas practicas 2

Si usamos jquery, cachear los selectores:

Mal:

1 _.each(lista_de_items, function(item) {
2     elemento = construir_li(item);
3     $('.foo .bar > ul').append(elemento);
4 });

Bien:

1 $mi_selector = $('.foo .bar > ul');
2 _.each(lista_de_items, function(item) {
3     elemento = construir_li(item);
4     $mi_selector.append(elemento);
5 });

Me olvido de muchas, acuerdense de estas por ahora!

Mirar para adelante, no para atras

Los polifixes son nuestros amigos!

Como sobrevivir

  • MDN (Mozilla Developer Network)
  • Underscore.js
  • JSDB.io
  • Leer Javascript, Th Good Parts de Douglas Crockford

Gracias !