JavaScript 101

JAVASCRIPT 101YOGEV AHUVIA

www.netcraft.co.il

http://www.netcraft.co.il

http://www.netcraft.co.il

OVERVIEWlet’s talk about the roots

JavaScript

1995

Netscape

Interactivity

HTML

Dynamic

Validations

EffectsAnimations

ClosurePrototype

Ajax

Events

DOM

Performance

Security

jQueryBrowser

.JS

Developed by Brendan Eich at Netscape

Came to add interactivity to the web

First appeared in Netscape 2.0

Second, Internet Explorer 3.0

Industry standard since 1997

Prototype-Oriented language

Not compiled; interpreted

Version 1.0 released in 1995

6789

101112131415

Code Exam

pleOVERVIEW

1 var myString = ‘javascript’;

2 var myArray = [1, 2.5, ’3’, [myString, ‘ rules’]];

3 for (var i = 0; i < myArray.length; i++) {var arrayElement = myArray[i];console.log(myArray[i]);

}> 1> 2.5> 3> javascript, rules

6789

101112131415

Code Exam

pleOVERVIEW

1 function factorial(n) {if (n == 0) {return 1;

}return n * factorial(n - 1);

};

2 var myObject = {myProperty1 : factorial(3),myProperty2 : ‘name’,myProperty3 : {},myProperty4 : function() {alert(‘hello world’);

}};

3 myObject.myProperty4();

CORE CONCEPTSwhat does it offer?

• An API for browser documents

• Describes the hierarchy of objects that form a document

• Cross browser and language independent

• Allows adding, removing or updating elements on the model

• Browsers parse HTML into a DOM tree

• Once parsed into objects, each object can be referenced

DOM1

document

<html>

<body><head>

<h1><a>[href]

“Header”“Click”

<title>

“My Page”

DOM1

6789

101112131415

1 var element = document.createElement('h1');2 var text = document.createTextNode(‘My Title’);

3 element.appendChild(text);4 document.body.appendChild(element);

My Titlehttp://www.javascript101.com/examples/

Code Exam

pleDOM1

http://www.javascript101.com/examples/

http://www.javascript101.com/examples/

• Similar to classes in Object-Oriented programming

• Collection of properties (similar to associative array)

• Objects are being cloned, not initialized

• Every object has a (single) prototype

OBJECTS2

a

<a.prototype properties>

__proto__ a.prototype

__proto__ ...

x 10

...

OBJECTS2

6789

101112131415

1 var a = {x: 10

};

Code Exam

ple2 a.x += 5;

a[‘x’]; =153

a.__proto__; =Prototype of Object4

a.__proto__.__proto__; =null5

OBJECTS2

• Simplified concept of Object-Oriented programming

• Mostly always based on dynamically-typed languages

• Objects are created on run-time either from scratch or by cloning

• Variables are not of a certain type, but the values that are stored in them are

PROTOTYPE-ORIENTED3

PROTOTYPE-ORIENTED3

a

__proto__

x 10

calc <func>

Object.prototype

__proto__

...

null

c

__proto__

y 30

b

__proto__

y 20

6789

101112131415

1 var a = {x: 10,calculate: function(z) {return this.x + this.y + z;

}};

Code Exam

ple

2 var b = {y: 20,__proto__: a

};

3 var c = {y: 30,__proto__: a

};

4 b.calculate(30);

5 a.calculate(40);

=60

=NaN

PROTOTYPE-ORIENTED3

• In JavaScript, functions are first class objects, like any other object

• They have properties (as objects)

• Can be assigned, passed as arguments, returned and manipulated

• Reference to a function can be invoked using the () operator

• Can be nested in other functions

• Implements Closure

FUNCTIONS4

6789

101112131415

1 function MyFunc(a,b){return a*b;

};

Code Exam

ple

3 function MyFunc(a,b,c){var MyInnerFunc = function(param) {a -= param;

};MyInnerFunc(c);return a*b;

};

2 MyFunc(2,3); =6

4 MyFunc(2,3,1); =3

FUNCTIONS4

• Execute code after specified amount of time

• Time with a reference to a function or anonymous function inline

• Can canceling the timer before time end

• Used for animations, load balancing, validations and timeouts

• Breaks code execution top-down order

TIMING EVENTS5

6789

101112131415

1 var delay = 3000; // milliseconds Code Exam

ple2 function timedFunc() {

alert(‘It has been ‘+(delay/1000)+‘ seconds...’);};

3 setTimeout(timedFunc, delay);

4 setTimeout(function() {delay = 5000;timedFunc();

}, delay); 3000ms3000ms

5

TIMING EVENTS5

6789

101112131415

Code Exam

ple1 var counter = 10;

3 function countdown() {if (counter == 0) {clearTimeout(timerHandle);

}console.log(counter);counter--;

}

4 var timerHandle = setInterval(countdown, delay);

2 var delay = 1000;

TIMING EVENTS5

> 10> 9> 8> 7> 6> 5> 4> 3> 2> 1> 0

• Scope are contexts of variables

• Every object has a link to the scope chain; local first, then parents and finally - global

• Nested functions can use their variables and also their parents

• Closure architecture allows a function to carry its scope to another context

SCOPES6

parent scope

y

__parent__

20

current scope

z

__parent__

30

global scope

x

__parent__

10

<global properties>

null

SCOPES6

6789

101112131415

1 var x = 10; // global scope Code Exam

ple2 (function parentScope() {

var y = 20;(function currentScope() {var z = 30;console.log(x+y+z);

})();})();

=60

SCOPES6

6789

101112131415

Code Exam

ple1 var myNamespace = {};

2 myNamespace.myClass = function(myParam) {this.myMember = myParam;

};

3 myNamespace.myClass.prototype.myFunc = function() {console.log(this.myMember + ‘ world!’);

};

4 var myInstance = new myNamespace.myClass(‘hello’);

5 myInstance.myFunc(); =hello world!

SCOPES6

• Functions can be nested keeping their original context

• Mostly implemented in scripting languages

• The closured function saves the scope chain of its parent

• Allows functions to access their parent scope variables as they were on the moment they were closured

• Efficient when looping and using delegate function

CLOSURE7

global scope

x

__parent__

10

<global properties>

null

parent scope

x

__parent__

20

function scope

y

[context].x

30

__parent__

10 20

CLOSURE7

20

6789

101112131415

1 var x = 20; Code Exam

ple2 function outer() {

var x = 10;return function inner() {console.log(x);

};};

3 var returnedFunction = outer();

4 returnedFunction();

=10

5 function globalFunc() {console.log(x);

};

6 (function(functionArgument) {var x = 10;functionArgument();

})(globalFunc);=20

CLOSURE7

• Passing functions as arguments for later use

• Allows running a background worker

• Not freezing User Interface

• Keeping original scope

CALLBACKS8

CALLBACKS8

• Elements on page can fire events

• Bind JavaScript functions to handle those events

• Respond to specific user actions

• Some events aren’t directly caused by the user (e.g. page load)

EVENTS9

6789

101112131415

1 var element = document.getElementById(‘myButton’); Code Exam

pleEVENTS9

2 function myButtonClick() {alert(‘myButton was clicked!’);

};

3 element.onclick = myButtonClick;

4 window.onload = function() {var newElem = document.createElement(‘button’);newElem.addEventListener(‘click’, myButtonClick);document.body.appendChild(newElem);

};

• Asynchronous JavaScript and XML

• Usually being done with XMLHttpRequest object

• Exchange data asynchronously between browser and server

• Update page elements without refreshing the page

• Data is mostly transferred in JSON format

AJAX10

http://en.wikipedia.org/wiki/Asynchronous_I/O

http://en.wikipedia.org/wiki/Asynchronous_I/O

http://en.wikipedia.org/wiki/JavaScript

http://en.wikipedia.org/wiki/JavaScript

http://en.wikipedia.org/wiki/XML

http://en.wikipedia.org/wiki/XML

AJAX10

6789

101112131415

1 function updatePage(str) {document.getElementById(‘res’).innerHTML = str;

};

Code Exam

pleAJAX10

2 function doAjaxMagic(url) {var self = this;self.xmlHttpReq = new XMLHttpRequest();self.xmlHttpReq.open('GET', url, true);

self.xmlHttpReq.onreadystatechange = function() {if (self.xmlHttpReq.readyState == 4) {updatePage(self.xmlHttpReq.responseText);

}}

};

3 doAjaxMagic(‘http://www.example.com/ajax.html’);

http://www.example.com/ajax.html

http://www.example.com/ajax.html

THE ENGINE BEHINDlet’s showcase the environment

BrowserBrowser Layout Engine JavaScript Engine

Google Chrome WebKit V8

Mozilla Firefox Gecko SpiderMonkey

Internet Explorer Trident JScript

Apple Safari WebKit JavaScript Core

Opera Presto Carakan

RENDERING

• Browsers treat each <script> tag is a separate program

• JavaScript program is parsed and interpreted at run-time

• Modern browsers compile parts of the scripts for performance

• Interpreting can happen on-load or on-demand

• JavaScript engine is contained in the browser layout engine

INTERPRETING

• Cannot read or write files on the machine (except cookies)

• Cannot interact with frames of a different domain

• Cannot read the user’s history

• Cannot detect user interaction outside the top frame

• JavaScript code cannot be hidden or encrypted

• Minification and Obfuscation

SECURITY

Performance Factors

Inline method vs calling function 40% 70% 99.9% 20%

Use literals vs instantiate 60% 10% 15% 20%

For loop vs while loop 0% 0% 0% 0%

Cache globals vs uncache globals 70% 40% 2% 0%

No try catch vs try catch 90% 17% 0% 96%

EXTENSION LIBRARIESwrappers and implementations

JQUERYsimplify cross-browser scripting of html

NODE.JShighly scalable web-servers

HEAVY APPLICATIONSjavascript mvc frameworks

MOBILE LIBRARIEStouch-optimized web frameworks

USER INTERFACEinteraction, animations and effects

FURTHER READINGlearn the basics, then enjoy the advances

THANK YOUJAVASCRIPT 101

JavaScript 101

Technology

var delay

var mynamespace

var counter

var myinstance

var element

var mystring

var myarray

var myobject