JavaScript 101

A visual course through the core practices and considerations of the JavaScript language.

1. JAVASCRIPT 101 YOGEV AHUVIA www.netcraft.co.il 1
2. 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
3. .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
4. 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
5. CORE CONCEPTS what does it offer? 5
6. • 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
7. document <html> <body> <head> <h1> <a> [href] “Header” “Click” <title> “My Page” DOM 1 7
8. 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
9. • 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
10. a <a.prototype properties> __proto__ a.prototype __proto__ ... x 10 ... OBJECTS 2 10
11. 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
12. • 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-ORIENTED 3 12
13. PROTOTYPE-ORIENTED 3 a __proto__ x 10 calc <func> Object.prototype __proto__ ... null c __proto__ y 30 b __proto__ y 20 13
14. 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
15. • 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 FUNCTIONS 4 15
16. 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
17. • 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 EVENTS 5 17
18. 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
19. 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
20. • 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 SCOPES 6 20
21. parent scope y __parent__ 20 current scope z __parent__ 30 global scope x __parent__ 10 <global properties> null SCOPES 6 21
22. 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
23. 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
24. • 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 CLOSURE 7 24
25. 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
26. 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
27. • Passing functions as arguments for later use • Allows running a background worker • Not freezing User Interface • Keeping original scope CALLBACKS 8 27
28. CALLBACKS 8 28
29. • 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) EVENTS 9 29
30. 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
31. • 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
32. AJAX 10 32
33. 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
34. THE ENGINE BEHIND let’s showcase the environment 34
35. 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
36. RENDERING 36
37. • 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
38. • 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 38
39. 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
40. EXTENSION LIBRARIES wrappers and implementations 40
41. JQUERY simplify cross-browser scripting of html 41
42. NODE.JS highly scalable web-servers 42
43. HEAVY APPLICATIONS javascript mvc frameworks 43
44. MOBILE LIBRARIES touch-optimized web frameworks 44
45. USER INTERFACE interaction, animations and effects 45
46. FURTHER READING learn the basics, then enjoy the advances 46
47. THANK YOU JAVASCRIPT 101 47