JAVASCRIPT 101    YOGEV AHUVIA                   www.netcraft.co.il
Prototype                                                                                                           Closur...
Developed by Brendan Eich at NetscapeCame to add interactivity to the webVersion 1.0 released in 1995                     ...
6                      OVERVIEW 7   1 var myString = ‘javascript’;                                                        ...
6                      OVERVIEW 7   1 function factorial(n) {                                        Code Example         ...
CORE CONCEPTS   what does it offer?
1    DOM•   An API for browser documents•   Describes the hierarchy of objects that form a document•   Cross browser and l...
1     DOM                document                 <html> <head>                              <body> <title>    [href]     ...
6                                                  1   DOM 7   1   var element = document.createElement(h1);              ...
2    OBJECTS•   Similar to classes in Object-Oriented programming•   Collection of properties (similar to associative arra...
2      OBJECTS            a<a.prototype properties>     x           10__proto__                      a.prototype          ...
6                        2   OBJECTS 7   1 var a = {                                               Code Example         x:...
3    PROTOTYPE-ORIENTED•   Simplified concept of Object-Oriented programming•   Mostly always based on dynamically-typed la...
3   PROTOTYPE-ORIENTED                  b                    a          y           20      x                10      __pro...
6          3   PROTOTYPE-ORIENTED 7   1 var a = {                                         Code Example         x: 10, 8   ...
4    FUNCTIONS•   In JavaScript, functions are first class objects, like any other object•   They have properties (as objec...
6                    4   FUNCTIONS 7   1 function MyFunc(a,b)                                               Code Example  ...
5   TIMING EVENTS•   Execute code after specified amount of time•   Time with a reference to a function or anonymous functi...
6                  5   TIMING EVENTS 7   1 var delay = 3000; // milliseconds                                              ...
6                  5   TIMING EVENTS 7   1 var counter = 10;                                                          Code...
6    SCOPES•   Scope are contexts of variables•   Every object has a link to the scope chain; local first, then parents    ...
6   SCOPES    global scope    x         10<global properties>           parent scope__parent__   null             y       ...
6                       6   SCOPES 7   1 var x = 10; // global scope                                       Code Example   ...
6                      6   SCOPES 7   1 var myNamespace = {};                                                             ...
7   CLOSURE•   Functions can be nested keeping their original context•   Mostly implemented in scripting languages•   The ...
7     CLOSURE    function scope     y         30__parent__[context].x    20               10                    20     glo...
6                      7   CLOSURE 7   1 var x = 20;                                         Code Example     2 function o...
8    CALLBACKS•   Passing functions as arguments for later use•   Allows running a background worker•   Not freezing User ...
8   CALLBACKS
9   EVENTS•   Elements on page can fire events•   Bind JavaScript functions to handle those events•   Respond to specific us...
6                       9   EVENTS 7   1 var element = document.getElementById(‘myButton’);                               ...
10 AJAX•   Asynchronous JavaScript and XML•   Usually being done with XMLHttpRequest object•   Exchange data asynchronousl...
10 AJAX
6                        10   AJAX 7   1 function updatePage(str) {                                                       ...
THE ENGINE BEHIND  let’s showcase the environment
Browser             Layout Engine   JavaScript EngineGoogle Chrome         WebKit               V8 Mozilla Firefox       G...
RENDERING
INTERPRETING•   Browsers treat each <script> tag is a separate program•   JavaScript program is parsed and interpreted at ...
SECURITY•   Cannot read or write files on the machine (except cookies)•   Cannot interact with frames of a different domain...
Performance FactorsInline method vs calling function   40%   70%   99.9%   20%    Use literals vs instantiate     60%   10...
EXTENSION LIBRARIES   wrappers and implementations
JQUERYsimplify cross-browser scripting of html
NODE.JShighly scalable web-servers
HEAVY APPLICATIONS    javascript mvc frameworks
MOBILE LIBRARIEStouch-optimized web frameworks
USER INTERFACEinteraction, animations and effects
FURTHER READINGlearn the basics, then enjoy the advances
THANK YOU  JAVASCRIPT 101
Upcoming SlideShare
Loading in...5
×

JavaScript 101

989

Published on

JavaScript 101 presentation. Goes over the basics of JavaScript language.

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

No Downloads
Views
Total Views
989
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

JavaScript 101

  1. 1. JAVASCRIPT 101 YOGEV AHUVIA www.netcraft.co.il
  2. 2. Prototype Closure DOM JavaScript Interactivity Performance ValidationsEvents 1995 HTML Security Ajax Browser jQuery Effects Animations Dynamic Netscape OVERVIEW let’s talk about the roots
  3. 3. Developed by Brendan Eich at NetscapeCame to add interactivity to the webVersion 1.0 released in 1995 .JSFirst appeared in Netscape 2.0Second, Internet Explorer 3.0Industry standard since 1997Prototype-Oriented languageNot compiled; interpreted
  4. 4. 6 OVERVIEW 7 1 var myString = ‘javascript’; Code Example 2 var myArray = [1, 2.5, ’3’, [myString, ‘ rules’]]; 8 3 for (var i = 0; i < myArray.length; i++) { var arrayElement = myArray[i]; console.log(myArray[i]); 9 } > > 1 2.510 > 3 > javascript, rules11121314
  5. 5. 6 OVERVIEW 7 1 function factorial(n) { Code Example if (n == 0) { 8 return 1; } return n * factorial(n - 1); 9 }; 2 var myObject = { myProperty1 : factorial(3),10 myProperty2 : ‘name’, myProperty3 : {}, myProperty4 : function() {11 alert(‘hello world’); } };12 3 myObject.myProperty4();1314
  6. 6. CORE CONCEPTS what does it offer?
  7. 7. 1 DOM• 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
  8. 8. 1 DOM document <html> <head> <body> <title> [href] <a> <h1>“My Page” “Click” “Header”
  9. 9. 6 1 DOM 7 1 var element = document.createElement(h1); Code Example 2 var text = document.createTextNode(‘My Title’); 8 3 4 element.appendChild(text); document.body.appendChild(element); 9 http://www.javascript101.com/examples/ My Title1011121314
  10. 10. 2 OBJECTS• 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
  11. 11. 2 OBJECTS a<a.prototype properties> x 10__proto__ a.prototype ... __proto__ ...
  12. 12. 6 2 OBJECTS 7 1 var a = { Code Example x: 10 8 }; 2 a.x += 5; 3 a[‘x’]; =15 9 4 a.__proto__; =Prototype of Object 5 a.__proto__.__proto__; =null1011121314
  13. 13. 3 PROTOTYPE-ORIENTED• 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
  14. 14. 3 PROTOTYPE-ORIENTED b a y 20 x 10 __proto__ calc <func> __proto__ c Object.prototype y 30 ... __proto__ __proto__ null
  15. 15. 6 3 PROTOTYPE-ORIENTED 7 1 var a = { Code Example x: 10, 8 calculate: function(z) { return this.x + this.y + z; } 9 }; 2 var b = { y: 20,10 __proto__: a }; 3 var c = {11 y: 30, __proto__: a };12 4 b.calculate(30); 5 a.calculate(40); =60 =NaN1314
  16. 16. 4 FUNCTIONS• 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
  17. 17. 6 4 FUNCTIONS 7 1 function MyFunc(a,b) Code Example { 8 return a*b; }; 2 MyFunc(2,3); =6 9 3 function MyFunc(a,b,c) { var MyInnerFunc = function(param) {10 }; a -= param; MyInnerFunc(c);11 return a*b; }; 4 MyFunc(2,3,1); =3121314
  18. 18. 5 TIMING EVENTS• 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
  19. 19. 6 5 TIMING EVENTS 7 1 var delay = 3000; // milliseconds Code Example 2 function timedFunc() { 8 }; alert(‘It has been ‘+(delay/1000)+‘ seconds...’); 3 setTimeout(timedFunc, delay); 9 4 setTimeout(function() { delay = 5000; timedFunc();10 }, delay); 3000ms 511121314
  20. 20. 6 5 TIMING EVENTS 7 1 var counter = 10; Code Example 2 var delay = 1000; 8 3 function countdown() { if (counter == 0) { clearTimeout(timerHandle); 9 } console.log(counter); counter--;10 } 4 var timerHandle = setInterval(countdown, delay);11 > > > > 10 9 8 712 > 6 > 5 > 4 > 3 > 213 > 1 > 014
  21. 21. 6 SCOPES• 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
  22. 22. 6 SCOPES global scope x 10<global properties> parent scope__parent__ null y 20 __parent__ current scope z 30 __parent__
  23. 23. 6 6 SCOPES 7 1 var x = 10; // global scope Code Example 2 (function parentScope() { 8 var y = 20; (function currentScope() { var z = 30; 9 console.log(x+y+z); =60 })(); })();1011121314
  24. 24. 6 6 SCOPES 7 1 var myNamespace = {}; Code Example 2 myNamespace.myClass = function(myParam) { 8 }; this.myMember = myParam; 3 myNamespace.myClass.prototype.myFunc = function() { 9 }; console.log(this.myMember + ‘ world!’); 4 var myInstance = new myNamespace.myClass(‘hello’);10 5 myInstance.myFunc(); =hello world!11121314
  25. 25. 7 CLOSURE• 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
  26. 26. 7 CLOSURE function scope y 30__parent__[context].x 20 10 20 global scope x 10 parent scope <global properties> x 20__parent__ null __parent__
  27. 27. 6 7 CLOSURE 7 1 var x = 20; Code Example 2 function outer() { 8 var x = 10; return function inner() { console.log(x); =10 9 }; }; 3 var returnedFunction = outer();10 4 returnedFunction();11 5 function globalFunc() { console.log(x); };12 6 (function(functionArgument) { var x = 10; functionArgument(); =20 })(globalFunc);1314
  28. 28. 8 CALLBACKS• Passing functions as arguments for later use• Allows running a background worker• Not freezing User Interface• Keeping original scope
  29. 29. 8 CALLBACKS
  30. 30. 9 EVENTS• 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)
  31. 31. 6 9 EVENTS 7 1 var element = document.getElementById(‘myButton’); Code Example 2 function myButtonClick() { 8 }; alert(‘myButton was clicked!’); 3 element.onclick = myButtonClick; 9 4 window.onload = function() { var newElem = document.createElement(‘button’); newElem.addEventListener(‘click’, myButtonClick);10 }; document.body.appendChild(newElem);11121314
  32. 32. 10 AJAX• 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
  33. 33. 10 AJAX
  34. 34. 6 10 AJAX 7 1 function updatePage(str) { Code Example document.getElementById(‘res’).innerHTML = str; 8 }; 2 function doAjaxMagic(url) { var self = this; 9 self.xmlHttpReq = new XMLHttpRequest(); self.xmlHttpReq.open(GET, url, true); self.xmlHttpReq.onreadystatechange = function() {10 if (self.xmlHttpReq.readyState == 4) { updatePage(self.xmlHttpReq.responseText); }11 } }; 3 doAjaxMagic(‘http://www.example.com/ajax.html’);121314
  35. 35. THE ENGINE BEHIND let’s showcase the environment
  36. 36. Browser Layout Engine JavaScript EngineGoogle Chrome WebKit V8 Mozilla Firefox Gecko SpiderMonkeyInternet Explorer Trident JScript Apple Safari WebKit JavaScript Core Opera Presto Carakan
  37. 37. RENDERING
  38. 38. INTERPRETING• 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
  39. 39. SECURITY• 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
  40. 40. Performance FactorsInline 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%
  41. 41. EXTENSION LIBRARIES wrappers and implementations
  42. 42. JQUERYsimplify cross-browser scripting of html
  43. 43. NODE.JShighly scalable web-servers
  44. 44. HEAVY APPLICATIONS javascript mvc frameworks
  45. 45. MOBILE LIBRARIEStouch-optimized web frameworks
  46. 46. USER INTERFACEinteraction, animations and effects
  47. 47. FURTHER READINGlearn the basics, then enjoy the advances
  48. 48. THANK YOU JAVASCRIPT 101
  1. A particular slide catching your eye?

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

×