JavaScript 101

JAVASCRIPT 101 YOGEV AHUVIA www.netcraft.co.il 1

OVERVIEW let’s talk about the roots JavaScript 1995 Netscape Interactivity
HTML Dynamic Validations Effects Animations Closure Prototype Ajax Events DOM Performance Security jQuery Browser 2

.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 3

6 7 8 9 10 11 12 13 14 Code
Example OVERVIEW 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]); } 4 function factorial(n) { if (n == 0) { return 1; } return n * factorial(n - 1); }; 5 var myObject = { myProperty1 : factorial(3), myProperty2 : ‘name’, myProperty3 : {}, myProperty4 : function() { alert(‘hello world’); } }; 6 myObject.myProperty4(); > 1 > 2.5 > 3 > javascript, rules 4

CORE CONCEPTS what does it offer? 5

• 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 DOM 1 6

document <html> <body> <head> <h1> <a> [href] “Header” “Click” <title>
“My Page” DOM 1 7

6 7 8 9 10 11 12 13 14 1
var element = document.createElement('h1'); 2 var text = document.createTextNode(‘My Title’); 3 element.appendChild(text); 4 document.body.appendChild(element); 5 element.setAttribute('id', 'myTitle'); 6 var element = document.getElementById('myTitle'); 7 element.textContent = 'Woohoo!!'; My Title http://www.javascript101.com/examples/ Woohoo!! http://www.javascript101.com/examples/ Code Example DOM 1 8

• 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 OBJECTS 2 9

a <a.prototype properties> __proto__ a.prototype __proto__ ... x 10 ...
OBJECTS 2 10

6 7 8 9 10 11 12 13 14 1
var a = { x: 10 }; Code Example 2 a.x += 5; a[‘x’]; =15 3 a.__proto__; =Prototype of Object 4 a.__proto__.__proto__; =null 5 OBJECTS 2 11

• Simpliﬁed 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-ORIENTED 3 12

PROTOTYPE-ORIENTED 3 a __proto__ x 10 calc <func> Object.prototype __proto__
... null c __proto__ y 30 b __proto__ y 20 13

6 7 8 9 10 11 12 13 14 1
var a = { x: 10, calculate: function(z) { return this.x + this.y + z; } }; Code Example 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-ORIENTED 3 14

• In JavaScript, functions are ﬁrst 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 FUNCTIONS 4 15

6 7 8 9 10 11 12 13 14 1
function MyFunc(a,b) { return a*b; }; Code Example 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 FUNCTIONS 4 16

• Execute code after speciﬁed 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 EVENTS 5 17

6 7 8 9 10 11 12 13 14 1
var delay = 3000; // milliseconds Code Example 2 function timedFunc() { alert(‘It has been ‘+(delay/1000)+‘ seconds...’); }; 3 setTimeout(timedFunc, delay); 4 setTimeout(function() { delay = 5000; timedFunc(); }, delay); 3000ms 3000ms 5 TIMING EVENTS 5 18

6 7 8 9 10 11 12 13 14 Code
Example 1 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 EVENTS 5 > 10 > 9 > 8 > 7 > 6 > 5 > 4 > 3 > 2 > 1 > 0 19

• Scope are contexts of variables • Every object has
a link to the scope chain; local ﬁrst, then parents and ﬁnally - global • Nested functions can use their variables and also their parents • Closure architecture allows a function to carry its scope to another context SCOPES 6 20

parent scope y __parent__ 20 current scope z __parent__ 30
global scope x __parent__ 10 <global properties> null SCOPES 6 21

6 7 8 9 10 11 12 13 14 1
var x = 10; // global scope Code Example 2 (function parentScope() { var y = 20; (function currentScope() { var z = 30; console.log(x+y+z); })(); })(); =60 SCOPES 6 22

6 7 8 9 10 11 12 13 14 Code
Example 1 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! SCOPES 6 23

• 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 • Efﬁcient when looping and using delegate function CLOSURE 7 24

global scope x __parent__ 10 <global properties> null parent scope
x __parent__ 20 function scope y [context].x 30 __parent__ 10 20 CLOSURE 7 20 25

6 7 8 9 10 11 12 13 14 1
var x = 20; Code Example 2 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 CLOSURE 7 26

• Passing functions as arguments for later use • Allows
running a background worker • Not freezing User Interface • Keeping original scope CALLBACKS 8 27

CALLBACKS 8 28

• Elements on page can ﬁre events • Bind JavaScript
functions to handle those events • Respond to speciﬁc user actions • Some events aren’t directly caused by the user (e.g. page load) EVENTS 9 29

6 7 8 9 10 11 12 13 14 1
var element = document.getElementById(‘myButton’); Code Example EVENTS 9 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); }; 30

• 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 AJAX 10 31

AJAX 10 32

6 7 8 9 10 11 12 13 14 1
function updatePage(str) { document.getElementById(‘res’).innerHTML = str; }; Code Example AJAX 10 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); } } }; 33

THE ENGINE BEHIND let’s showcase the environment 34

Browser Browser Layout Engine JavaScript Engine Google Chrome WebKit V8
Mozilla Firefox Gecko SpiderMonkey Internet Explorer Trident JScript Apple Safari WebKit JavaScript Core Opera Presto Carakan 35

RENDERING 36

• 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 37

• Cannot read or write ﬁles 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 • Miniﬁcation and Obfuscation SECURITY 38

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% 39

EXTENSION LIBRARIES wrappers and implementations 40

JQUERY simplify cross-browser scripting of html 41

NODE.JS highly scalable web-servers 42

HEAVY APPLICATIONS javascript mvc frameworks 43

MOBILE LIBRARIES touch-optimized web frameworks 44

USER INTERFACE interaction, animations and effects 45

FURTHER READING learn the basics, then enjoy the advances 46

THANK YOU JAVASCRIPT 101 47

JavaScript 101

JavaScript 101

Other Decks in Programming

Featured

Transcript