Tech Talks - Fundamentos JavaScript

Disclaimer
Cualquier similitud con la serie de charlas “Crockford on
JavaScript” es completamente intencional
http://www.yuiblog.com/crockford/

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.

Tech Talks - Fundamentos JavaScript

Un mínimo de historia
● Netscape - LiveScript
● Sun - Java
● Microsoft - JScript
● European Computer Manufacturers Association - ECMAScript

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

● Loose typing
● Funciones como “first class objects”
● Lenguaje basado en prototipos
● Variables globales

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)
};

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]
});

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"
}

try {
throw {
name: "MyError",
message: "Default Message"
};
} catch (e) {
console.log(e.name); // "MyError"
console.log(e.message); // "Default Message"
}

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);
});
}

● 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"

message
status
alertUser
var 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"

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"

● 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

Tech Talks - Fundamentos JavaScript

More Related Content

What's hot (7)

Similar to Tech Talks - Fundamentos JavaScript (20)

Recently uploaded (20)

Tech Talks - Fundamentos JavaScript