JavaScript

Conceptos básicos

LISP

Scheme

SmalTalk

self

JavaScript

Características

Tipado dinámico
Funcional
Orientado a objetos

Evolution

LiveScript (1995)

Javascript (Dic. 1995)

ECMAScript (Jun 1997)

ECMAScript 3 (1999)

ECMAScript 5 (2009)

ECMAScript 6 (Dic 2015)

ECMAScript

Especificación estándar de JavaScript
JavaScript, JScript, ActionScript
Versiones más conocidas:

ECMAScript 3 (1999)
ECMAScript 5 (2009)
ECMAScript 6 (2015)
ECMAScript 7 (-)

Por qué JavaScript?

El lenguaje del navegador
Por que en parte es funcional
Es facil "echarlo a andar"

Lenguaje incomprendido

Obligatorio para los desarrolladores web
Lenguaje aparentemente incompleto
Raro (this, prototype, ...)
Inconsistente o impredecible

Tipos de Datos

Números

Strings

Boleanos

Null

Undefined

Objetos

Números

Tipo único de datos numérico
```
10.0 === 10
```
Precisión de 64 bits
NaN
```
parseInt('not a number');isNaN()
```
Infinity

1,79769313486231570e+308

Strings

Delimitados por " o '
'\' para escapar carácteres
'\u' para carácteres Unicode
```
'A' === '\u0041'
```
No hay typo "char"

string.replace(search, replace)

var str="My name is John!";
var n=str.replace("John","Peter");
// "My name is Peter!"

string.match( regexp )

var str = 'The rain in SPAIN stays mainly in the plain';
var n = str.match(/ain/g);
// [ 'ain', 'ain', 'ain' ]

string.split()

var str = "How are you doing today?";
var n = str.split(" ");
// ['How','are','you','doing','today?']

string.slice(start, end)

var text = 'and it he says "Any damn fool could'
var a = text.slice(18)
// '"Any damn fool could'
text.slice(0,3)
// 'and'

string.toLowerCase
string.toUpperCase()

Boleanos

true

Todo lo que no es "falsy"

false

''
0
null
undefined
NaN

Undefined

DUNNO

Arrays

var empty = [];
var numbers = ['one','two','three','four','five'];

numbers[1]numbers.length

Ojo!

var numbers_object = {'0': 'one', '1': 'two', '2': 'three', '3': 'four', '4': 'five'};

Heterogéneo

var etc = ['string', 0.5, true, false, null, undefined, ['nested', 'array'], {object: true}, NaN, Infinity];etc.length?

var fruits = ["Banana", "Orange", "Apple", "Mango"];

array.push

fruits.push("Kiwi")

Banana,Orange,Apple,Mango,Kiwi

array.pop

fruits.pop();

Banana,Orange,Apple

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];

array.slice( start, end )

var citrus = fruits.slice(1,3);

Orange,Lemon

array.splice( start, howmany, item1, ..., itemN)

fruits.splice(2,1,'Peach','Kiwi');

Lemon

'Banana','Orange','Peach','Kiwi','Apple','Mango' // fruits

array.concat( array1, ..., arrayN )
array.join( separator )
array.reverse()
array.shift()
array.short( function(value1, value2) )

<input type="text" id="foo-input" value="1">

var foo = 0;
foo = document.getElementById("foo-input").value;
if ( foo === 1 ) {
    alert('woho!');
}

¿Se ejecuta el 'alert'?

var foo = 0;
foo = +document.getElementById("foo-input").value;
if ( foo === 1 ) {
    alert('woho!');
}

¿Y ahora?

Castings

var number = 1,
    string = "1",
    bool = false;

number + ""; // '1'

+string; // 1

+string++; // 1

string; // 2

+bool; // 0

bool + ""; // 'false'

var number = 1,
    string = "1",
    bool = false;

string === number; // false

string === number + ""; // true

+string === number; // true

bool === number; // false

+bool === number; // true

bool === string; // false

bool === !!string; // true

Funciones

Ciudadanos de primer orden

var obj = {
    nombre: "Pepito",
    saludo: function () {
      return "Hola, Mundo!";
    }
};
var foo = function() {
    this.name = 'John';
}
$("#elemento").click(function() {
	alert('Woho!');
});
function what(obj, fn) {
    return function() {
      return fn.apply(obj, arguments);
    }
}

Cuatro formas de invocarse

De forma directa

(function() {
    alert("Hey!");
})();

var foo = function() {
    alert('Hey!');
}
foo();

Enviando un mensaje a un objeto (método)

objeto.metodo();

Como constructor

new MiConstructor();

Indirectamente (call, apply)

fn.call({}, "param");

Objetos

Conjunto de propiedades propias + heredadas

Literal

var obj = {
    hola: true,
    adios: true
};

Dinámica

var obj = {};
obj.nuevaPropiedad = 1;

Constructor

var Foo = function() {
    this.a = 1;
}
var fooObj = new Foo()

Acceso a parámetros

var user = {
    name: 'John',
    'e-mail': 'john@mail.com'
}
user.name;
user['e-mail'];

Mensajes

var obj = {
    nombre: 'Pepito',
    saludo: function () {
      return 'Hola, ' + this.nombre + '!';
    }
};
obj.nombre;           // 'Pepito'
obj.saludo;           // function
obj[“saludo”]();      // 'Hola, Pepito!'
var fn = obj["saludo"];
fn();                 // 'Hola, undefined!'

No es lo mismo

```
var fn = obj.metodo;
fn();
```
Acceder a la propiedad de "metodo" de obj
Supongo que es una función y la invoco
NO HAY RECEPTOR

```
obj.metodo();
```
Envía el mensaje "metodo" a obj
Si existe, obj se encarga de ejecutar la función
obj ES EL RECEPTOR

THIS!

This

"this" es el receptor de este mensaje

var nombre = "Sonia";
var obj = {
  nombre: "Pepito",
  saludo: function() {
    alert("hola " + this.nombre);
  }
}
obj.saludo();
var fn = obj["saludo"];
fn();

Su significado es dinámico
Se decide en tiempo de ejecución
También conocido como "contexto"
Si no hay contexto, apunta al objeto global

Cada función tiene su propio "this" (no se clausura)

var nombre = "Sonia";
var obj = {
  nombre: "Pepito",
  saludo: function([this]) {
    [var that = this]
    var saludo_fn = function([this]) {
      alert("hola " + this.nombre);
    };
    
    saludo_fn([objeto global]);
    [saludo_fn.call(this);]
  }
};

obj.saludo([obj]);

Alcance

JavaScript tiene un alcance peculiar

var foo = function() {
    var a = 3, b = 5;
    var bar = function() {
    	var b = 7, c = 11;	// a = 3, b = 7 c = 11
    	a += b + c;		// a = 21, b = 7 c = 11
    }				// a = 3, b = 5 c = undefined
    bar()			// a = 21, b = 5 c = undefined
}

Las variables definidas en una función son accesibles en las funciones internas.
Las variables definidas en una función no son accesibles desde el exterior.

Clausuras

function makeContador() {
    var i = 0;
    return function() {
        return i++;
    }
}

var contador1 = makeContador();
contador1(); // 0
contador1(); // 1

var contador2 = makeContador();
contador2(); // 0

Una función interna con mayor vida que su contenedora, tiene acceso a todas las variables locales de la función contenedora.
Encapsulamiento!

GRACIAS!

@antaipt