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 + ""; 
+string; 
+string++; 
string; 
+bool; 
bool + ""; 

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

string === number; 
string === number + ""; 
+string === number; 
bool === number; 
+bool === number; 
bool === string; 
bool === !!string;

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; 
obj.saludo; 
obj[“saludo”](); 
var fn = obj["saludo"];
fn();

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!





JavaScript: Conceptos básicos

By Anthanh

JavaScript: Conceptos básicos

Conceptos básicos sobre JavaScript

  • 1,748

More from Anthanh