Fundamentos
JavaScript
Disclaimer
Cualquier similitud con la serie de charlas “Crockford on
JavaScript” es completamente intencional
http://www.y...
Disclaimer
Agenda
● El lenguaje más incomprendido del mundo
● Un poco de historia
● Características principales
● Literales
● Objects...
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”
- D...
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 Associa...
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 da...
Objects
notification.message; //"Welcome Tony"
notification["message"]; //"Welcome Tony"
notification.type; //undefined
notificati...
movieService.rateMovie(scarface, user, 9,
"Excelent movie!", [aFriend, anotherFriend]);
movieService.rateMovie(scarface, u...
Exceptions
function coolFunction() {
throw new Error("Not so cool error");
}try {
coolFunction(); //throws Error
} catch (e) {
consol...
function MyError(message) {
this.name = "MyError";
this.message = message || "Default Message";
}MyError.prototype = new E...
try {
throw {
name: "MyError",
message: "Default Message"
};
} catch (e) {
console.log(e.name); // "MyError"
console.log(e...
Scope
function rateFavMovies() {
for (var i = 0; i < favouriteMovies.length; i++) {
var movie = favouriteMovies[i];
movie.rating...
function rateFavMovies() {
var movie;
for (var i = 0; i < favouriteMovies.length; i++) {
movie = favouriteMovies[i];
movie...
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(movie...
function createNotification() {
var status = "Pending";
return {
setStatus: function (newStatus) {
status = newStatus;
},
...
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()...
function greet(formal) {
console.log("Hi!, I'm " +
(formal ? "Mr. " : "") + this.name);
}
var tony = {
name: "Tony Montana...
function Greeter(name) {
this.name = name;
}Greeter.prototype.greet = function () {
console.log("Hi! I'm " + this.name);
}...
Prototype
message
status
alertUser
var proto = {
alertUser: function () { ... }
};
var notif = Object.create(proto);
notif.message =...
var theGodfather = {
title: "The Godfather",
director: "Francis Ford Coppola",
cast: ["Marlon Brando", "Al Pacino", "Diane...
theGodfather2.cast = ["Al Pacino", "Robert De Niro",
"Diane Keaton"];
theGodfather2.title += " Part II";
theGodfather.dire...
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 greeterProto = {
greet: function () {
console.log("Hi! I'm " + this.name);
}
};
var tonyGreeter = Object.create(greete...
Conclusiones
● JavaScript es un lenguaje distinto a los demás
● Hay muchos más secretos por descubrir
● El modelo basado en prototipos ...
Fin
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Upcoming SlideShare
Loading in …5
×

Tech Talks - Fundamentos JavaScript

524 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
524
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tech Talks - Fundamentos JavaScript

  1. 1. Fundamentos JavaScript
  2. 2. Disclaimer Cualquier similitud con la serie de charlas “Crockford on JavaScript” es completamente intencional http://www.yuiblog.com/crockford/
  3. 3. Disclaimer
  4. 4. Agenda ● El lenguaje más incomprendido del mundo ● Un poco de historia ● Características principales ● Literales ● Objects ● Exceptions ● Scope ● Functions ● Prototype
  5. 5. El lenguaje más incomprendido del mundo
  6. 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. 7. Las librerías y frameworks son abstracciones. Demasiado buenas? Buenas abstracciones.
  8. 8. Un mínimo de historia ● Netscape - LiveScript ● Sun - Java ● Microsoft - JScript ● European Computer Manufacturers Association - ECMAScript
  9. 9. JavaScript !== Java
  10. 10. http://exploringdata.github.io/info/programming-languages-influence-network/
  11. 11. Características principales
  12. 12. ● Loose typing ● Funciones como “first class objects” ● Lenguaje basado en prototipos ● Variables globales
  13. 13. Literales
  14. 14. 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) };
  15. 15. Objects
  16. 16. 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 };
  17. 17. 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] });
  18. 18. Exceptions
  19. 19. 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" }
  20. 20. 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" }
  21. 21. try { throw { name: "MyError", message: "Default Message" }; } catch (e) { console.log(e.name); // "MyError" console.log(e.message); // "Default Message" }
  22. 22. Scope
  23. 23. function rateFavMovies() { for (var i = 0; i < favouriteMovies.length; i++) { var movie = favouriteMovies[i]; movie.rating = 10; } ... }
  24. 24. function rateFavMovies() { var movie; for (var i = 0; i < favouriteMovies.length; i++) { movie = favouriteMovies[i]; movie.rating = 10; } ... }
  25. 25. function showMovies(query, element) { movieService.getMovies(query, function (movies) { renderMovies(movies, element); }); }
  26. 26. function bookmarker(bookmarks) { return function (movies) { for (var i = 0; i < movies.length; i++) { bookmarks.push(movies[i]); } }; };var addToMyBookmarks = bookmarker(myBookmarks); addToMyBookmarks(someMovies);
  27. 27. function createNotification() { var status = "Pending"; return { setStatus: function (newStatus) { status = newStatus; }, getStatus: function () { return status; } }; } var notification = createNotification(); notification.setStatus("Read"); notification.getStatus(); // "Read"
  28. 28. Functions
  29. 29. ● Las funciones son first class objects ● Function.prototype ● Unidades básicas de ejecición
  30. 30. function greet() { console.log("Hi!, I'm " + this.name); } greet(); // "Hi!, I'm undefined"
  31. 31. 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"
  32. 32. 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"
  33. 33. 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"
  34. 34. Prototype
  35. 35. message status alertUser var proto = { alertUser: function () { ... } }; var notif = Object.create(proto); notif.message = "Fatal error ..."; notif.status = "Pending"; notif.alertUser();
  36. 36. var theGodfather = { title: "The Godfather", director: "Francis Ford Coppola", cast: ["Marlon Brando", "Al Pacino", "Diane Keaton"] }; var theGodfather2 = Object.create(theGodfather);
  37. 37. 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"
  38. 38. theGodfather.director = "Coppola"; theGodfatehr.director; //"Coppola" theGodfather2.director; //"Coppola"
  39. 39. 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"
  40. 40. 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"
  41. 41. Conclusiones
  42. 42. ● 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
  43. 43. Fin

×