KnockoutJS<br />
But first… JavaScript Bootcamp!<br />Primitive Types<br />Objects<br />Functions<br />Inheritance<br />Closures<br />Desig...
JavaScript != Java<br />
Introduction<br />The dominant client side programming language on the web<br />Completely dynamic language<br />Implemtat...
Numbers<br />var foo = 1;<br />
Strings<br />var foo = "bar";<br />
Booleans<br />var foo = true;<br />var bar = false;<br />
null<br />null is an object<br />
undefined<br />nothing is defined<br />
Objects<br />Everything else in JavaScript is objects<br />Objects are collections of name/value pairs<br />
Objects: Object Literals<br />var foo = {};<br />var person = {<br />	"first-name": "Jan",<br />"last-name": "Kristiansen"...
Objects: Value retrieval<br />>>> person["first-name"]"Jan">>> person.first-name"Jan"<br />
Objects: Values setting<br />>>> person.age = 24;>>> person.age24<br />
Objects: References<br />// References different objectsvar a = {}, b = {}, c = {}// References SAME objectvar a = b = c =...
Objects: Deletion<br />>>> delete person.age<br />>>> person.age"undefined"<br />
Functions<br />Functions are objects<br />
Functions<br />var foo = function () {<br />	…<br />}<br />
Prototypal Inheritance<br />There are no classes in JavaScript<br />Objects inherit directly from other objects<br />"Clas...
Prototypal Inheritance<br />>>> var foo = function () { this.bar = 1 };<br />>>> var bar = function () {};<br />>>> bar.pr...
Hiding data with closures<br />var person = function (name) {<br />this.getName = function () {<br />	return name;<br />};...
Hiding data with closures<br />var person = function (name) {<br />this.getName = function () {<br />	return name;<br />};...
Hiding data with closures<br />var person = function (name) {<br />this.getName = function () {<br />	return name;<br />};...
Common design patterns<br />Factory<br />Singelton<br />Modules<br />
Module Pattern<br />var module = function () {<br />data = {}<br />return {<br />	get : function (name) {<br />		return da...
The bad parts<br />all variables are global…<br />a set of non-transitive equality operators…<br />features like eval is m...
Sources<br />"Private Members in JavaScript" http://www.crockford.com/javascript/private.html <br />"JavaScript: The Good ...
Upcoming SlideShare
Loading in...5
×

JavaScript Bootcamp

1,290

Published on

A short presentation held as an introduction to JavaScript for the Microsoft department at Steria Norway. It was a prequel to my KnockoutJS presentation

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,290
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript Bootcamp

  1. 1. KnockoutJS<br />
  2. 2. But first… JavaScript Bootcamp!<br />Primitive Types<br />Objects<br />Functions<br />Inheritance<br />Closures<br />Design Patterns<br />
  3. 3. JavaScript != Java<br />
  4. 4. Introduction<br />The dominant client side programming language on the web<br />Completely dynamic language<br />Implemtations are undergoing homogenistation<br />Libraries are just as well known as the language<br />
  5. 5. Numbers<br />var foo = 1;<br />
  6. 6. Strings<br />var foo = "bar";<br />
  7. 7. Booleans<br />var foo = true;<br />var bar = false;<br />
  8. 8. null<br />null is an object<br />
  9. 9. undefined<br />nothing is defined<br />
  10. 10. Objects<br />Everything else in JavaScript is objects<br />Objects are collections of name/value pairs<br />
  11. 11. Objects: Object Literals<br />var foo = {};<br />var person = {<br /> "first-name": "Jan",<br />"last-name": "Kristiansen"<br />};<br />
  12. 12. Objects: Value retrieval<br />>>> person["first-name"]"Jan">>> person.first-name"Jan"<br />
  13. 13. Objects: Values setting<br />>>> person.age = 24;>>> person.age24<br />
  14. 14. Objects: References<br />// References different objectsvar a = {}, b = {}, c = {}// References SAME objectvar a = b = c = {}<br />
  15. 15. Objects: Deletion<br />>>> delete person.age<br />>>> person.age"undefined"<br />
  16. 16. Functions<br />Functions are objects<br />
  17. 17. Functions<br />var foo = function () {<br /> …<br />}<br />
  18. 18. Prototypal Inheritance<br />There are no classes in JavaScript<br />Objects inherit directly from other objects<br />"Classical" inheritance still possible<br />
  19. 19. Prototypal Inheritance<br />>>> var foo = function () { this.bar = 1 };<br />>>> var bar = function () {};<br />>>> bar.prototype = new foo;<br />>>> var test = new bar();<br />>>> test.bar;<br />1<br />
  20. 20. Hiding data with closures<br />var person = function (name) {<br />this.getName = function () {<br /> return name;<br />};<br />this.setName = function (newName) {<br /> return name = newName;<br />};<br />};<br />
  21. 21. Hiding data with closures<br />var person = function (name) {<br />this.getName = function () {<br /> return name;<br />};<br />this.setName = function (newName) {<br /> return name = newName;<br />};<br />};<br />
  22. 22. Hiding data with closures<br />var person = function (name) {<br />this.getName = function () {<br /> return name;<br />};<br />this.setName = function (newName) {<br /> return name = newName;<br />};<br />};<br />
  23. 23. Common design patterns<br />Factory<br />Singelton<br />Modules<br />
  24. 24. Module Pattern<br />var module = function () {<br />data = {}<br />return {<br /> get : function (name) {<br /> return data[name]<br /> },<br /> set : function (name, value) {<br /> data[name] = value;<br /> return this.get(name);<br /> }<br />}<br />}();<br />
  25. 25. The bad parts<br />all variables are global…<br />a set of non-transitive equality operators…<br />features like eval is missused…<br />ambiguity when defining functions<br />no encapsulation<br />
  26. 26. Sources<br />"Private Members in JavaScript" http://www.crockford.com/javascript/private.html <br />"JavaScript: The Good Parts"http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742<br />"Object Oriented JavaScript"http://www.slideshare.net/mgirouard/object-oriented-javascript-1628090<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×