1. Fundamentos
JavaScript

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

3. Disclaimer

4. Agenda
● El lenguaje más incomprendido del mundo
● Un poco de historia
● Características principales
● Literales
● Objects
● Exceptions
● Scope
● Functions
● Prototype

5. El lenguaje más incomprendido
del mundo

6. “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

7. Las librerías y frameworks son abstracciones.
Demasiado buenas?
Buenas abstracciones.

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

11. JavaScript !==
Java

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

13. Características principales

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

15. Literales

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

17. Objects

18. 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 };

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

20. Exceptions

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

22. function MyError(message) {
this.name = "MyError";
this.message = message || "Default Message";
}MyError.prototype = new Error();MyError.prototype.construct
MyError;try {
throw new MyError();
} catch (e) {
console.log(e.name); // "MyError"
console.log(e.message); // "Default Message"
}

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

24. Scope

25. function rateFavMovies() {
for (var i = 0; i < favouriteMovies.length; i++) {
var movie = favouriteMovies[i];
movie.rating = 10;
}
...
}

26. function rateFavMovies() {
var movie;
for (var i = 0; i < favouriteMovies.length; i++) {
movie = favouriteMovies[i];
movie.rating = 10;
}
...
}

27. function showMovies(query, element) {
movieService.getMovies(query, function (movies) {
renderMovies(movies, element);
});
}

28. function bookmarker(bookmarks) {
return function (movies) {
for (var i = 0; i < movies.length; i++) {
bookmarks.push(movies[i]);
}
};
};var addToMyBookmarks = bookmarker(myBookmarks);
addToMyBookmarks(someMovies);

29. function createNotification() {
var status = "Pending";
return {
setStatus: function (newStatus) {
status = newStatus;
},
getStatus: function () {
return status;
}
};
}
var notification = createNotification();
notification.setStatus("Read");
notification.getStatus(); // "Read"

30. Functions

31. ● Las funciones son first class objects
● Function.prototype
● Unidades básicas de ejecición

32. function greet() {
console.log("Hi!, I'm " + this.name);
}
greet(); // "Hi!, I'm undefined"

33. 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"

34. 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"

35. 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"

36. Prototype

37. message
status
alertUser
var proto = {
alertUser: function () { ... }
};
var notif = Object.create(proto);
notif.message = "Fatal error ...";
notif.status = "Pending";
notif.alertUser();

38. var theGodfather = {
title: "The Godfather",
director: "Francis Ford Coppola",
cast: ["Marlon Brando", "Al Pacino", "Diane Keaton"]
};
var theGodfather2 = Object.create(theGodfather);

39. 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"

40. theGodfather.director = "Coppola";
theGodfatehr.director; //"Coppola"
theGodfather2.director; //"Coppola"

41. 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"

42. 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"

43. Conclusiones

44. ● 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

45. Fin