Tech Talks - Fundamentos JavaScript
-
date post
17-Oct-2014 -
Category
Technology
-
view
309 -
download
2
description
Transcript of Tech Talks - Fundamentos JavaScript
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