View
1.243
Download
1
Tags:
Embed Size (px)
DESCRIPTION
A short presentation held as an introduction to JavaScript for the Microsoft department at Steria Norway. It was a prequel to my KnockoutJS presentation
Citation preview
KnockoutJS
But first… JavaScript Bootcamp!
Primitive Types
Objects
Functions
Inheritance
Closures
Design Patterns
JavaScript != Java
Introduction
The dominant client side programming language on the web
Completely dynamic language
Implemtations are undergoing homogenistation
Libraries are just as well known as the language
Numbers
var foo = 1;
Strings
var foo = "bar";
Booleans
var foo = true;
var bar = false;
null
null is an object
undefined
nothing is defined
Objects
Everything else in JavaScript is objects
Objects are collections of name/value pairs
Objects: Object Literals
var foo = {};
var person = {
"first-name": "Jan",
"last-name": "Kristiansen"
};
Objects: Value retrieval
>>> person["first-name"]
"Jan"
>>> person.first-name
"Jan"
Objects: Values setting
>>> person.age = 24;
>>> person.age
24
Objects: References
// References different objectsvar a = {}, b = {}, c = {}
// References SAME objectvar a = b = c = {}
Objects: Deletion
>>> delete person.age
>>> person.age
"undefined"
Functions
Functions are objects
Functions
var foo = function () {
…
}
Prototypal Inheritance
There are no classes in JavaScript
Objects inherit directly from other objects
"Classical" inheritance still possible
Prototypal Inheritance
>>> var foo = function () { this.bar = 1 };
>>> var bar = function () {};
>>> bar.prototype = new foo;
>>> var test = new bar();
>>> test.bar;
1
Hiding data with closures
var person = function (name) {
this.getName = function () {
return name;
};
this.setName = function (newName) {
return name = newName;
};
};
Hiding data with closures
var person = function (name) {
this.getName = function () {
return name;
};
this.setName = function (newName) {
return name = newName;
};
};
Hiding data with closures
var person = function (name) {
this.getName = function () {
return name;
};
this.setName = function (newName) {
return name = newName;
};
};
Common design patterns
Factory
Singelton
Modules
Module Pattern
var module = function () {
data = {}
return {
get : function (name) {
return data[name]
},
set : function (name, value) {
data[name] = value;
return this.get(name);
}
}
}();
The bad parts
all variables are global…
a set of non-transitive equality operators…
features like eval is missused…
ambiguity when defining functions
no encapsulation
Sources
"Private Members in JavaScript" http://www.crockford.com/javascript/private.html
"JavaScript: The Good Parts"http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742
"Object Oriented JavaScript"http://www.slideshare.net/mgirouard/object-oriented-javascript-1628090