Slide 1
Slide 1 text
JavaScript for
developers
josmasflores@gmail.com
MIT 6.s198
Objectives:
- Main concepts
- Main differences with other languages
- Resources to follow up from the session
Slide 2
Slide 2 text
Asynchronous execution
Slide 3
Slide 3 text
The Event Loop
http://kunkle.org/nodejs-explained-pres/#/event-loop
Slide 4
Slide 4 text
Simplified Sequential Model
Slide 5
Slide 5 text
What’s happening here
https://code.google.com/p/app-inventor-for-android/issues/detail?id=37
Why you should not do this
Slide 6
Slide 6 text
Functions: 1st class
citizens
In JavaScript, functions are objects.
This means that a function can be stored in
a variable, array, or object.
Also, a function can be passed to, and
returned from, a function.
http://javascriptenlightenment.com/
var printFullName = function(fullName) {
console.log(fullName);
};
printFullName(printFullName);
Slide 7
Slide 7 text
Callback Pattern
In computer programming, a callback is a piece of executable code that is
passed as an argument to other code, which is expected to call back (execute)
the argument at some convenient time.
Wikipedia: http://en.wikipedia.org/wiki/Callback_(computer_programming)
var printFullName = function(fullName) {
console.log(fullName);
};
printFullName('Grace Hopper');
var createFullNameAndPrintIt = function(first, last, callback){
var fullName = first + ' ' + last;
callback(fullName); //Should really check if callback is a function
};
createFullNameAndPrintIt('Grace', 'Hopper', printFullName);
createFullNameAndPrintIt('Grace', 'Hopper', function(fullName){
console.log('Commander ' + fullName);
});
Slide 8
Slide 8 text
Scope & Hoisting
Slide 9
Slide 9 text
Objects
{}
Slide 10
Slide 10 text
Objects & closures
Slide 11
Slide 11 text
Constructors
Slide 12
Slide 12 text
Prototypal inheritance
Slide 13
Slide 13 text
functional inheritance
Slide 14
Slide 14 text
The this keyword
The this keyword in JavaScript has different meanings, depending on
the context in which it is used. In summary:
● In a method context, this refers to the object that contains the
method.
● In a function context, this refers to the global object.
● If this is used in a constructor, the this in the constructor function
refers to the object which uses the constructor function.
● When the apply or call methods are used, the value of this refers
to what was explicitly specified in the apply or call invocation.
http://dublintech.blogspot.ie/2011/10/are-you-confused-by-this-javascript.html
Slide 15
Slide 15 text
this : Methods
Slide 16
Slide 16 text
this : Functions
Slide 17
Slide 17 text
this : and that
Slide 18
Slide 18 text
this : Constructors
Slide 19
Slide 19 text
Other ideas & QA
- Thruthy & Falsey, Equality
- Patterns (namespace, module): Learning
JavaScript Design Patterns
- Lexical Scope (do not use with)
Slide 20
Slide 20 text
Resources
MDN JavaScript docs: Mozilla Development Network
JavaScript the good parts: Douglas Crockford
JavaScript Patterns: Stoyan Stefanov
Learning JavaScript Design Patterns: Addy Osmani
jQuery fundamentals: Rebecca Murphy
Talks to help you become a better front-end
engineer in 2013: Smashing Magazine
Crockford on JavaScript: YUI Blog