26
KnockoutJS

JavaScript Bootcamp

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

Page 1: JavaScript Bootcamp

KnockoutJS

Page 2: JavaScript Bootcamp

But first… JavaScript Bootcamp!

Primitive Types

Objects

Functions

Inheritance

Closures

Design Patterns

Page 3: JavaScript Bootcamp

JavaScript != Java

Page 4: JavaScript Bootcamp

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

Page 5: JavaScript Bootcamp

Numbers

var foo = 1;

Page 6: JavaScript Bootcamp

Strings

var foo = "bar";

Page 7: JavaScript Bootcamp

Booleans

var foo = true;

var bar = false;

Page 8: JavaScript Bootcamp

null

null is an object

Page 9: JavaScript Bootcamp

undefined

nothing is defined

Page 10: JavaScript Bootcamp

Objects

Everything else in JavaScript is objects

Objects are collections of name/value pairs

Page 11: JavaScript Bootcamp

Objects: Object Literals

var foo = {};

var person = {

"first-name": "Jan",

"last-name": "Kristiansen"

};

Page 12: JavaScript Bootcamp

Objects: Value retrieval

>>> person["first-name"]

"Jan"

>>> person.first-name

"Jan"

Page 13: JavaScript Bootcamp

Objects: Values setting

>>> person.age = 24;

>>> person.age

24

Page 14: JavaScript Bootcamp

Objects: References

// References different objectsvar a = {}, b = {}, c = {}

// References SAME objectvar a = b = c = {}

Page 15: JavaScript Bootcamp

Objects: Deletion

>>> delete person.age

>>> person.age

"undefined"

Page 16: JavaScript Bootcamp

Functions

Functions are objects

Page 17: JavaScript Bootcamp

Functions

var foo = function () {

}

Page 18: JavaScript Bootcamp

Prototypal Inheritance

There are no classes in JavaScript

Objects inherit directly from other objects

"Classical" inheritance still possible

Page 19: JavaScript Bootcamp

Prototypal Inheritance

>>> var foo = function () { this.bar = 1 };

>>> var bar = function () {};

>>> bar.prototype = new foo;

>>> var test = new bar();

>>> test.bar;

1

Page 20: JavaScript Bootcamp

Hiding data with closures

var person = function (name) {

this.getName = function () {

return name;

};

this.setName = function (newName) {

return name = newName;

};

};

Page 21: JavaScript Bootcamp

Hiding data with closures

var person = function (name) {

this.getName = function () {

return name;

};

this.setName = function (newName) {

return name = newName;

};

};

Page 22: JavaScript Bootcamp

Hiding data with closures

var person = function (name) {

this.getName = function () {

return name;

};

this.setName = function (newName) {

return name = newName;

};

};

Page 23: JavaScript Bootcamp

Common design patterns

Factory

Singelton

Modules

Page 24: JavaScript Bootcamp

Module Pattern

var module = function () {

data = {}

return {

get : function (name) {

return data[name]

},

set : function (name, value) {

data[name] = value;

return this.get(name);

}

}

}();

Page 25: JavaScript Bootcamp

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

Page 26: JavaScript Bootcamp

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