Fundamentos JavaScript

Disclaimer

Cualquier similitud con la serie de charlas “Crockford on

JavaScript” es completamente intencional

http://www.yuiblog.com/

crockford/

Disclaimer

Agenda

● El lenguaje más incomprendido del mundo

● Un poco de historia

● Características principales

● Literales

● Objects

● Exceptions

● Scope

● Functions

● Prototype

El lenguaje más incomprendido del mundo

“I’ve made every mistake that can be made with

JavaScript. The worst one; I didn’t bother to learn the

language first”

- Douglas Crockford

Las librerías y frameworks son abstracciones.

Demasiado buenas?

Buenas abstracciones.

Un mínimo de historia

● Netscape - LiveScript

● Sun - Java

● Microsoft - JScript

● European Computer Manufacturers Association -

ECMAScript

JavaScript !== Java

http://exploringdata.github.io/info/programming-languages-influence-network/

Características principales

● Loose typing

● Funciones como “first class objects”

● Lenguaje basado en prototipos

● Variables globales

Literales

var scarface = {

title: "Scarface",

plot: "Tony Montana manages to leave Cuba during ...",

quotes: [

"Every dog has his day",

"Say hello to my little friend!"

],

releaseDate: new Date(1986, 12, 9)

};

Objects

notification.message; //"Welcome Tony"

notification["message"]; //"Welcome Tony"

notification.type; //undefined

notification.type = "info";

notification.type; //"info"

delete notification.type;

notification.type; //undefined

Object.keys(notification); //["message"]

var notification = { message: "Welcome " + user.name };

movieService.rateMovie(scarface, user, 9,

"Excelent movie!", [aFriend, anotherFriend]);

movieService.rateMovie(scarface, user, 9,

null, [aFriend, anotherFriend]);

movieService.rateMovie({

movie: scarface,

user: user,

rating: 9,

recommendTo: [aFriend, anotherFriend]

});

Exceptions

function coolFunction() {

throw new Error("Not so cool error");

}try {

coolFunction(); //throws Error

} catch (e) {

console.log(e.name); //"Error"

console.log(e.message); //"Not so cool error"

}

function MyError(message) {

this.name = "MyError";

this.message = message || "Default Message";

}MyError.prototype = new Error();MyError.prototype.constructor =

MyError;try {

throw new MyError();

} catch (e) {

console.log(e.name); // "MyError"

console.log(e.message); // "Default Message"

}

try {

throw {

name: "MyError",

message: "Default Message"

};

} catch (e) {

console.log(e.name); // "MyError"

console.log(e.message); // "Default Message"

}

Scope

function rateFavMovies() {

for (var i = 0; i < favouriteMovies.length; i++) {

var movie = favouriteMovies[i];

movie.rating = 10;

}

...

}

function rateFavMovies() {

var movie;

for (var i = 0; i < favouriteMovies.length; i++) {

movie = favouriteMovies[i];

movie.rating = 10;

}

...

}

function showMovies(query, element) {

movieService.getMovies(query, function (movies) {

renderMovies(movies, element);

});

}

function bookmarker(bookmarks) {

return function (movies) {

for (var i = 0; i < movies.length; i++) {

bookmarks.push(movies[i]);

}

};

};var addToMyBookmarks = bookmarker(myBookmarks);

addToMyBookmarks(someMovies);

function createNotification() {

var status = "Pending";

return {

setStatus: function (newStatus) {

status = newStatus;

},

getStatus: function () {

return status;

}

};

}

var notification = createNotification();

notification.setStatus("Read");

notification.getStatus(); // "Read"

Functions

● Las funciones son first class objects

● Function.prototype

● Unidades básicas de ejecición

function greet() {

console.log("Hi!, I'm " + this.name);

}

greet(); // "Hi!, I'm undefined"

function greet() {

console.log("Hi!, I'm " + this.name);

}

var tony = {

name: "Tony Montana",

greet: greet

};

tony.greet(); // "Hi! I'm Tony Montana

greet(); // "Hi!, I'm undefined"

function greet(formal) {

console.log("Hi!, I'm " +

(formal ? "Mr. " : "") + this.name);

}

var tony = {

name: "Tony Montana",

};

tony.greet(); // TypeError

greet.apply(tony); // "Hi! I'm Tony Montana"

greet.apply(tony, [true]); // "Hi! I'm Mr. Tony Montana"

function Greeter(name) {

this.name = name;

}Greeter.prototype.greet = function () {

console.log("Hi! I'm " + this.name);

};

var tonyGreeter = new Greeter("Tony Montana");

tonyGreeter.greet(); // "Hi! I'm Tony Montana"

Prototype

message

status

alertUservar proto = {

alertUser: function () { ... }

};

var notif = Object.create(proto);

notif.message = "Fatal error ...";

notif.status = "Pending";

notif.alertUser();

var theGodfather = {

title: "The Godfather",

director: "Francis Ford Coppola",

cast: ["Marlon Brando", "Al Pacino", "Diane Keaton"]

};

var theGodfather2 = Object.create(theGodfather);

theGodfather2.cast = ["Al Pacino", "Robert De Niro",

"Diane Keaton"];

theGodfather2.title += " Part II";

theGodfather.director; //"Francis Ford Coppola"

theGodfather2.director; //"Francis Ford Coppola"

theGodfather.title; //"The Godfather"

theGodfather2.title; //"The Godfather Part II"

theGodfather.cast; //["M. Brando", "Al Pacino", "D. Keaton"]

theGodfather2.cast;//["Al Pacino", "R. De Niro", "D. Keaton"]

theGodfather.director = "Coppola";

theGodfatehr.director; //"Coppola"

theGodfather2.director; //"Coppola"

function Greeter(name) {

this.name = name;

}Greeter.prototype.greet = function () {

console.log("Hi! I'm " + this.name);

};

var tonyGreeter = new Greeter("Tony Montana");

tonyGreeter.greet(); // "Hi! I'm Tony Montana"

var greeterProto = {

greet: function () {

console.log("Hi! I'm " + this.name);

}

};

var tonyGreeter = Object.create(greeterProto);

tonyGreeter.name = "Tony Montana";

tonyGreeter.greet(); // "Hi! I'm Tony Montana"

Conclusiones

● JavaScript es un lenguaje distinto a los demás

● Hay muchos más secretos por descubrir

● El modelo basado en prototipos ofrece una alternativa

interesante al modelo basado en clases

● Gran expresividad

Fin