JavaScript in Depth

1. JavaScript in Depth Svetlin Nakov Telerik Corporation www.telerik.com

2. Table of Contents • What we know so far • JavaScript syntax • JavaScript operators • JavaScript Data Types • JavaScript Pop-up boxes • If and switch, loops • functions • What is an object?

3. Table of Contents (2) • Built-in JavaScript objects (common) • Boolean • Number • Array • String • Date • RegExp • Function • Object

4. Table of Contents (3) • Built-in JavaScript objects (uncommon) • Typed arrays • Errors • JSON • Math • Infinity • NaN • undefined

5. Table of Contents (4) • Enter the DOM • Difference between JS and DOM • DOM objects • Querying the DOM • Traversing the DOM • Manipulation • Events

6. Table of Contents (5) • Browser differences • Feature detection • Shims, shivs • Polyfills • JavaScript libraries • Closures • Module pattern

7. What we know so far? Just a recap

8. Built-in Object a.k.a. language features

9. Boolean • Boolean • It’s either true or false • There isn’t much to it  • Just know that: • Use x = Boolean(false), or x = false instead x = new Boolean(false) if (x) { // this code will execute }

10. Number • Doesn’t do much either

11. Array • One of the favourite data structures in JS • Supports instance and literal syntax • Array properties • length – that’s it • Array methods • Mutators: pop, push, reverse, shift, sort, splice, unshift • Accessors: concat, join, slice, indexOf*, lastIndexOf* • Iterators*: filter, forEach, every, map, some, reduce • * = not yet fully supported

12. Array Mutators var arr = [1,2,3]; arr.pop() // => 3 (last element), arr=[1,2] // Array.push(element) arr.push(4) // => 3 (arr.length), arr=[1,2,4] arr.reverse() // => [4,2,1], arr=[4,2,1] arr.shift() // => 4 (first element), arr=[2,1] // Array.unshift(element) arr.unshift(5) // => 3 (arr.length), arr=[5,2,1] arr.sort() // => [1,2,5], arr=[1,2,5] // Array.splice(index, howMany[, element1[,...[,element2]]]) arr.splice(1,1,6,7,8) // =>[2] (removed), arr=[1,6,7,8,5]

13. Array Accessors var arr = [1,2,3]; var arr1 = [4,5,6]; arr.concat(arr1) // => [1,2,3,4,5,6], arr=[1,2,3] // arr.join(separator) arr.join(“ | ”) // => “1 | 2 | 3”, arr=[1,2,3] // arr.slice(begin[, end]) arr.slice(0,1) // => [1,2], arr=[1,2,3] arr.indexOf(1) // => 0 arr.indexOf(5) // => -1 arr.push(1) // arr=[1,2,3,1] arr.lastIndexOf(1) // => 3 arr.lastIndexOf(5) // => -1

14. String • For strings or a sequence of characters (array wise) • Supports instance and literal syntax • Supports array like accessing e.g. string[0] • String properties • length • String methods • charAt, concat, indexOf, lastIndexOf, match, replace, search, slice, split, substr, substring, toUppserCase, toLowerCase, trim*, trimLeft*, trimRight* • Just to name a few

15. String Methods var str = “Hello, World!”; str.charAt(1) // => “e” str.concat(“!!”) // => “Hello, World!!!” str.indexOf(“o”) // => 4 str.indexOf(“x”) // => -1 str.lastIndexOf(“o”) // => 8 str.lastIndexOf(“x”) // => -1 str.replace(“Hello”, “Goodbye”) // “Goodbye, World!” str.split(“ ”) // => [“Hello,”, “World!”] // str.substr(start[, length]) str.substr(0,4) // => “Hell” // str.substring(indexA[, indexB]) str.substring(0,4) // => “Hell”

16. Date • Creates Date instances which let you work with dates and times. • Only instance syntax • Few “static” methods • Many instance methods

17. RegExp • Deals with regular expression • Supports literal and instance syntax • RegExp properties • global • ignoreCase • multiline • lastIndex • RegExp methods • exec • test

18. Function • The function is an object too • In case you wander: • new Function ([arg1[, arg2[, ... argN]],] functionBody); • new Function("a", "b", "return a + b"); • Function methods (of note) • apply • bind • call • toSource, toString

19. Function Methods function doStuff(a,b,c) { alert(this); alert(a + b + c); } doStuff(1,2,3) // => [Object Window], 6 // function.call(thisArg[, arg1[, … [,argn]]]) doStuff.call(“Ola”,2,3,4) // => “Ola”, 9 // function.apply(thisArg[, argsArray]) doStuff.apply(“Ola”,[2,3,4]) // => “Ola”, 9

20. Object • Surprisingly, it had few things • Now it’s getting better • Methods*: • Object creation: • create • Object properties: • hasOwnProperty, definePoperty, defineProperties, keys • Sealing • seal, freeze, isSealed, isFrozen

21. Document Object Model (DOM)

22. Document Object Model (DOM) • Every HTML element is accessible via the JavaScript DOM API • Most DOM objects can be manipulated by the programmer • The event model lets a document to react when the user does something on the page • Advantages • Create interactive pages • Updates the objects of a page without reloading it

23. DOM Nodes • The DOM hierarchy consists of nodes • Each node has a type • Important types: • Node.ELEMENT_NODE == 1 • Node.TEXT_NODE == 3 • Node.COMMENT_NODE == 8 • Node.DOCUMENT_NODE == 9

24. DOM Nodes Types • Other types: • Node.ATTRIBUTE_NODE== 2 • Node.CDATA_SECTION_NODE== 4 • Node.ENTITY_REFERENCE_NODE== 5 • Node.ENTITY_NODE== 6 • Node.PROCESSING_INSTRUCTION_NODE== 7 • Node.DOCUMENT_TYPE_NODE== 10 • Node.DOCUMENT_FRAGMENT_NODE== 11 • Node.NOTATION_NODE== 12

25. Querying the DOM • Three general approaches: • Query a specific element • Query a collection of elements • Built in collections • Some methods are applied to document only • Some could be applied to elements

26. Querying the DOM (2) var header = document.getElementById( “header” ); // => DOMElement or Null if not found var inputs = document.getElementsByName( “choises” ); // => NodeList with 0 or more elements var divs = document.getElementsByTagName( “div” ); // => NodeList with 0 or more elements var popups = document.getElementsByClassName( “popup” ); // => NodeList with 0 or more elements var links = document.links; // => NodeList with 0 or more elements var header1 = document.querySelector( “#header” ); var popups2 = document.querySelectorAll( “.popup” );

27. Querying the DOM (3) • Some methods are applied to document only • Some could be applied to elements var section = document.getElementById( “section” ); var divs = section.getElementsByTagName( “div” ); var popups = section.getElementsByClassName( “popup” ); var header = section.querySelector( “#header” ); var popups2 = section.querySelectorAll( “.popup” );

28. Traversing the DOM • You are somewhere in the DOM and you need to get elsewhere • Methods for adjacent nodes • Methods for children collection

29. Traversing the DOM (2) // Going UP node.parentNode // parent node or null if node is document // Going DOWN node.childNodes // collection of all the child nodes node.fistChild // first node or null if none node.lastChild // last node or null if none // Going LEFT node.previousSibling // preceding node or null if none // Going RIGHT node.nextSibling // succeeding node or null if none

30. Accessing Elements through the DOM Tree – Example • Warning: may not return what you expected due to Browser differences var el = document.getElementById('div_tag'); alert (el.childNodes[0].value); alert (el.childNodes[1]. getElementsByTagName('span').id); … <div id="div_tag"> <input type="text" value="test text" /> <div> <span id="test">test span</span> </div> </div> • accessing-elements-demo.html

31. DOM Manipulation • Once we access an element, we can read and write its attributes DOM-manipulation.html function change(state) { var lampImg = document.getElementById("lamp"); lampImg.src = "lamp_" + state + ".png"; var statusDiv = document.getElementById("statusDiv"); statusDiv.innerHTML = "The lamp is " + state"; } … <img src="test_on.gif" onmouseover="change('off')" onmouseout="change('on')" />

32. Common Element Properties • Most of the properties are derived from the HTML attributes of the tag • E.g. id, name, href, alt, title, src, etc… • style property – allows modifying the CSS styles of the element • Corresponds to the inline style of the element • Not the properties derived from embedded or external CSS rules • Example: style.width, style.marginTop, style.backgroundImage

33. Common Element Properties (2) • className – the class attribute of the tag • innerHTML – holds all the entire HTML code inside the element • Read-only properties with information for the current element and its state • tagName, offsetWidth, offsetHeight, scrollHeight,scrollTop, nodeType, etc…

34. DOM Events

35. DOM Events • JavaScript can register event handlers • Events are fired by the Browser and are sent to the specified JavaScript event handler function • Can be set with HTML attributes (legacy): • Can be accessed through the DOM (legacy): <img src="test.gif" onclick="imageClicked()" /> var img = document.getElementById("myImage"); img.onclick = imageClicked;

36. DOM Events (2) • Can be accessed through the DOM (standard): • “onclick” vs “click” • Clicking on one element, clicks all the way up the DOM! • False makes element event to fire first var img = document.getElementById("myImage"); img.addEventListiner(“click”, imageClicked, false)

37. The HTML DOM Event Model (3) • All event handlers receive one parameter • It brings information about the event • Contains the type of the event (mouse click, key press, etc.) • Data about the location where the event has been fired (e.g. mouse coordinates) • Holds a reference to the event sender • E.g. the button that was clicked

38. The HTML DOM Event Model (4) • Holds information about the state of [Alt], [Ctrl] and [Shift] keys • Some browsers do not send this object, but place it in the document.event • Some of the names of the event’s object properties are browser-specific

39. Common DOM Events • Mouse events: • onclick, onmousedown, onmouseup • onmouseover, onmouseout, onmousemove • Key events: • onkeypress, onkeydown, onkeyup • Only for input fields • Interface events: • onblur, onfocus • onscroll

40. Common DOM Events (2) • Form events • onchange – for input fields • onsubmit • Allows you to cancel a form submission • Useful for form validation • Miscellaneous events • onload, onunload • Allowed only for the <body> element • Fires when all content on the page was loaded / unloaded

41. onload Event – Example • onloadevent <html> <head> <script type="text/javascript"> function greet() {alert("Loaded.");} document.body.addEventListener(“load”, greet, false) </script> </head> <body> </body> </html>

42. Debugging JavaScript

43. Debugging JavaScript • Modern browsers have JavaScript console where errors in scripts are reported • Errors may differ across browsers • Several tools to debug JavaScript • Microsoft Script Editor • Add-on for Internet Explorer • Supports breakpoints, watches • JavaScript statement debugger; opens the script editor

44. Firebug • Firebug – Firefox add-on for debugging JavaScript, CSS, HTML • Supports breakpoints, watches, JavaScript console editor • Very useful for CSS and HTML too • You can edit all the document real-time: CSS, HTML, etc • Shows how CSS rules apply to element • Shows Ajax requests and responses • Firebug is written mostly in JavaScript

45. Firebug (2)

46. JavaScript Console Object • The consoleobject exists only if there is a debugging tool that supports it • Used to write log messages at runtime • Methods of the console object: • debug(message) • info(message) • log(message) • warn(message) • error(message)

47. Browser differences Every browser for itself

48. Browser differences • The landscape today: • Desktop • 5 major desktop browsers • 4 major desktop rendering engines • Mobile • 4 major mobile browsers • 4 major mobile rendering engines • Platform = browser + OS • Make the math

49. Feature detection • Feature detection • Shims, shivs • Polyfills • JavaScript libraries • Clojures • Module pattern

50. Shims, shivs • What is feature detection • Shim – a compatibility workaround • Shiv – a shim that ends with a “v”