Your SlideShare is downloading. ×
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Tech Talks - Fundamentos JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Tech Talks - Fundamentos JavaScript

297

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
297
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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.
  • 8. Un mínimo de historia ● Netscape - LiveScript ● Sun - Java ● Microsoft - JScript ● European Computer Manufacturers Association - ECMAScript
  • 9. JavaScript !== Java
  • 10. http://exploringdata.github.io/info/programming-languages-influence-network/
  • 11. Características principales
  • 12. ● Loose typing ● Funciones como “first class objects” ● Lenguaje basado en prototipos ● Variables globales
  • 13. Literales
  • 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. Objects
  • 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. 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. Exceptions
  • 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. 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. try { throw { name: "MyError", message: "Default Message" }; } catch (e) { console.log(e.name); // "MyError" console.log(e.message); // "Default Message" }
  • 22. Scope
  • 23. function rateFavMovies() { for (var i = 0; i < favouriteMovies.length; i++) { var movie = favouriteMovies[i]; movie.rating = 10; } ... }
  • 24. function rateFavMovies() { var movie; for (var i = 0; i < favouriteMovies.length; i++) { movie = favouriteMovies[i]; movie.rating = 10; } ... }
  • 25. function showMovies(query, element) { movieService.getMovies(query, function (movies) { renderMovies(movies, element); }); }
  • 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. 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. Functions
  • 29. ● Las funciones son first class objects ● Function.prototype ● Unidades básicas de ejecición
  • 30. function greet() { console.log("Hi!, I'm " + this.name); } greet(); // "Hi!, I'm undefined"
  • 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. 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. 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. Prototype
  • 35. message status alertUser var proto = { alertUser: function () { ... } }; var notif = Object.create(proto); notif.message = "Fatal error ..."; notif.status = "Pending"; notif.alertUser();
  • 36. var theGodfather = { title: "The Godfather", director: "Francis Ford Coppola", cast: ["Marlon Brando", "Al Pacino", "Diane Keaton"] }; var theGodfather2 = Object.create(theGodfather);
  • 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. theGodfather.director = "Coppola"; theGodfatehr.director; //"Coppola" theGodfather2.director; //"Coppola"
  • 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. 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. Conclusiones
  • 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. Fin

×