JavaScript provides core functionality for web pages and applications. It has a C-like syntax and is dynamically typed. JavaScript code runs on both the client-side in web browsers and the server-side in environments like Node.js. It uses prototype-based inheritance where objects can inherit properties from object prototypes. New features are being added regularly through the ECMAScript specification. JavaScript allows DOM manipulation to modify web pages and event handling for user interactions.
6. JavaScript Syntax
Looks like Java / C++
/* Factorial of n. */
function fact(n) {
// result of fact
var result = 1;
for (var i = 1; i <= n; i++) {
result *= i;
}
return result;
}
7. JavaScript
Is dynamically typed
var x = 1; // it should be an int
var s = "a"; // string or char?
// it's a function, (type of p?
// does it return something?)
function f(p) { /* ... */ }
var g; // anything (even a function)
8. JavaScript
Has bad parts
42 == '42' !== 42
if (false) <-> if (null) <-> if (undefined)
false != null == undefined
false !== null !== undefined
return
{
prop: "val"
};
Use an editor providing validation with JSLint
9. JavaScript
Has few built-in types
● Boolean true / false
● Number 42 21.6 NaN +∞ -∞
● String "hi" 'hello'
● Date java-like
● Regexp /^.*([0-9]+)w{2,3}$/
● Object {prop: val}
● Array [a, b] (it's just an Object)
● Function function() {}
● List, Map, Set: where are you? => ES 6
10. JavaScript
Can define functions
// function declaration (statement)
function f(x) { /* ... */ }
// function expression (operator)
var f = function(x) { /* ... */ };
// Function constructor
var f = new Function('x', '...');
11. JavaScript
CAN HAZ FUNCTIONZ EVERYWHERE
function compose(f, g) {
// BTW, this is a closure!
// more on that later
return function(x) {
return f(g(x));
};
}
compose(square, add_one)(10);
12. JavaScript
Function: scope & binding
var o = {
name: "an object",
logName: function() { log(this.name); }
};
// o.logName can be assigned to a variable:
var logN = o.logName;
logN();
// another way to give o the logName method
function ln() { log(this.name); }
var o = { name: "an object" };
o.logName = ln;
13. JavaScript
Function: scope & binding
// what is the value of 'this'?
var o = { /* ... */
logName: function() { log(this.name); }
};
// here it obviously refers to o
o.logName();
// what about the following?
function ln() { log(this.name); }
ln(); // er...
14. JavaScript
Function: scope & binding
● this = object to wich the function is bound
○ By default: the global object (window in browsers)
● Change the way a function is bound to an
object: apply or call
24. Prototype-oriented programming
Create an instance
// Object.create(): JS 1.8.5 and +
if (!Object.create) {
Object.create = function(o) {
// creates new temp. constructor
function F() {}
// gives it o as prototype
F.prototype = o;
// instantiates
return new F();
};
}
25. Prototype-oriented programming
Classes in JS
// previous example could have been written:
var Vehicle = { /* desc, startEngine */ };
function Car(desc) { this.description = desc; }
Car.prototype = Vehicle;
Car.prototype.description = "some car";
Car.prototype.wheelCount = 4;
var myPigeot = new Car("My Pigeot");
myPigeot.model = "403";
26. Prototype-oriented programming
New in JS
Er... Car is a functions, but I can new it?!
● new is a keyword that
1. Allocates an object
2. Inits this object with constructor
● new Car("some car") is equivalent to
var car = {};
car.__proto__ = Car.prototype;
Car.call(car, "some car");
27. Prototype-oriented programming
Last word about constructor functions
What happens when calling the Car
constructor without new?
this is bound to global object
Want to play this game?
○ Change window.location and you'll risk a crash
28. Prototype-oriented programming
Last but not least
● Be carefull with this and new
● Factory method instead of new
function createCar(d) { return new Car(d); }
● Prevent bad usage of your constructor
function Car(desc) {
if (!(this instanceof Car)) {
return new Car(desc);
}
/* ... */
}
29. Prototype-oriented programming
Private members
var Entity = (function() { // class lvl
var counter = 0; // private
return function() { // instance lvl
var id = counter++; // private
this.getId = function() {
return id;
}
};
})();
31. Access to Your Web Page
DOM manipulation
DOM != JS, it's another API
No need for jQuery
○ getElementById()
○ getElementByTagName()
○ getElementByName()
○ getElementByClassName() // !IE
○ querySelector() // IE 8
○ querySelectorAll() // IE 8
32. Access to Your Web Page
DOM manipulation: tips
● know your CSS selectors
○ #element
○ .element
○ [attribute=value]
● limit changes to the DOM
○ use fragments
35. References
Online
Doug Crockford, JavaScript: The Good Parts
http://googlecode.blogspot.com/2009/03/doug-crockford-
javascript-good-parts.html
Alex Russel, Learning to Love JavaScript
http://www.google.com/events/io/2011/sessions/learning-to-
love-javascript.html
John Resig, Learning Advanced JavaScript
http://ejohn.org/apps/learn/
Mozilla, JavaScript Reference
https://developer.mozilla.org/en/JavaScript/Reference/