Your SlideShare is downloading. ×
0
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
15. JavaScript in depth - Web Front-End
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

15. JavaScript in depth - Web Front-End

3,259

Published on

Advanced JavaScript - using JavaScript's built-in objects, accessing and manipulating HTML documents …

Advanced JavaScript - using JavaScript's built-in objects, accessing and manipulating HTML documents
Telerik Software Academy: http://html5course.telerik.com
The website and all video materials are in Bulgarian

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?
Built-in JavaScript objects (common): Boolean; Number; Array; String; Date; RegExp; Function; Object
Built-in JavaScript objects (uncommon): Typed arrays; Errors; JSON; Math; Infinity; NaN; undefined
Enter the DOM, Difference between JS and DOM
DOM objects
Querying the DOM
Traversing the DOM
Manipulation
Events
Browser differences
Feature detection: Shims, shivs; Polyfills; JavaScript libraries; Closures; Module pattern

Published in: Technology
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,259
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
272
Comments
0
Likes
16
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JavaScript in DepthSvetlin NakovManager Technical Traininghttp://nakov.comTelerik Software Academyacademy.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? 2
  • 3. Table of Contents (2) Built-in JavaScript objects (common)  Boolean  Number  Array  String  Date  RegExp  Function  Object 3
  • 4. Table of Contents (3) Built-in JavaScript objects (uncommon)  Typed arrays  Errors  JSON  Math  Infinity  NaN  undefined 4
  • 5. Table of Contents (4) Enter the DOM  Difference between JS and DOM DOM objects Querying the DOM Traversing the DOM Manipulation Events 5
  • 6. Table of Contents (5) Browser differences Feature detection Shims, shivs Polyfills JavaScript libraries Closures Module pattern 6
  • 7. What we know so far? Just a recap
  • 8. Built-in Objecta.k.a. language features
  • 9. Boolean Boolean It’s either true or false There isn’t much to it  Just know that: x = new Boolean(false) if (x) { // this code will execute } Use x = Boolean(false), or x = false instead 9
  • 10. Number Doesn’t do much either 10
  • 11. Array One of the favorite 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 11
  • 12. Array Mutatorsvar 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] 12
  • 13. Array Accessorsvar 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) // => 0arr.indexOf(5) // => -1arr.push(1) // arr=[1,2,3,1]arr.lastIndexOf(1) // => 3arr.lastIndexOf(5) // => -1 13
  • 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 14
  • 15. String Methodsvar str = “Hello, World!”;str.charAt(1) // => “e”str.concat(“!!”) // => “Hello, World!!!”str.indexOf(“o”) // => 4str.indexOf(“x”) // => -1str.lastIndexOf(“o”) // => 8str.lastIndexOf(“x”) // => -1str.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” 15
  • 16. Date Creates Date instances which let you work with dates and times. Only instance syntax Few “static” methods Many instance methods 16
  • 17. RegExp Deals with regular expression Supports literal and instance syntax RegExp properties  global  ignoreCase  multiline  lastIndex RegExp methods  exec  test 17
  • 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 18
  • 19. Function Methodsfunction 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 19
  • 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 20
  • 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 22
  • 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 23
  • 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 24
  • 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 25
  • 26. Querying the DOM (2)var header = document.getElementById( “header” );// => DOMElement or Null if not foundvar inputs = document.getElementsByName( “choises” );// => NodeList with 0 or more elementsvar divs = document.getElementsByTagName( “div” );// => NodeList with 0 or more elementsvar popups = document.getElementsByClassName( “popup” );// => NodeList with 0 or more elementsvar links = document.links;// => NodeList with 0 or more elementsvar header1 = document.querySelector( “#header” );var popups2 = document.querySelectorAll( “.popup” ); 26
  • 27. Querying the DOM (3) Some methods are applied to document only Some could be applied to elementsvar section = document.getElementById( “section” );var divs = section.getElementsByTagName( “div” );var popups = section.getElementsByClassName( “popup” );var header = section.querySelector( “#header” );var popups2 = section.querySelectorAll( “.popup” ); 27
  • 28. Traversing the DOM You are somewhere in the DOM and you need to get elsewhere Methods for adjacent nodes Methods for children collection 28
  • 29. Traversing the DOM (2)// Going UPnode.parentNode // parent node or null if node is document// Going DOWNnode.childNodes // collection of all the child nodesnode.fistChild // first node or null if nonenode.lastChild // last node or null if none// Going LEFTnode.previousSibling // preceding node or null if none// Going RIGHTnode.nextSibling // succeeding node or null if none 29
  • 30. Accessing Elements through the DOM Tree – Example 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 Warning: may not return what you expected due to Browser differences 30
  • 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)" /> 31
  • 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 32
  • 33. Common Element Properties (2) className – the class attribute of the tag innerHTML – holds all the entire HTML code inside the element Read-only propertieswith information for the current element and its state  tagName, offsetWidth, offsetHeight, scrollHeight, scrollTop, nodeType, etc… 33
  • 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): <img src="test.gif" onclick="imageClicked()" />  Can be accessed through the DOM (legacy): var img = document.getElementById("myImage"); img.onclick = imageClicked; 35
  • 36. DOM Events (2) Can be accessed through the DOM (standard):var img = document.getElementById("myImage");img.addEventListiner(“click”, imageClicked, false) “onclick” vs “click” Clicking on one element, clicks all the way up the DOM! False makes element event to fire first 36
  • 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 37
  • 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 38
  • 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 39
  • 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 40
  • 41. onload Event – Example onload event<html><head> <script type="text/javascript"> function greet() {alert("Loaded.");} document.body.addEventListener(“load”, greet, false) </script></head><body></body></html> 41
  • 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 43
  • 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 44
  • 45. Firebug (2) 45
  • 46. JavaScript Console Object The console object 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) 46
  • 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 48
  • 49. Feature detection Feature detection Shims, shivs Polyfills JavaScript libraries Clojures Module pattern 49
  • 50. Shims, shivs What is feature detection Shim – a compatibility workaround Shiv – a shim that ends with a “v” 50
  • 51. Polyfills Polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively Flattening the API landscape if you will A shim that mimics a future API providing fallback functionality to older browsers 51
  • 52. Closures A "closure" is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression)(function() { // do stuff here // what happens in closure stays in closure // unless exposed})() 52
  • 53. Module pattern Basically, an implementation of closurevar Module = (function() { // Do magic stuff here // Don’t forget to return return { … } // some object})() or(function() { // Do magic stuff here // Don’t forget to return window.Module = { … } // some object})() 53
  • 54. JavaScript libraries A JS library may:  Abstract common work:  Traversing / manipulating DOM  Ajax related  Animations  Normalize browser differences trough shims  Have syntactic sugar for easier coding  Have a module factory 54
  • 55. JavaScript in Depth курсове и уроци по програмиране, уеб дизайн – безплатно BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране – Телерик академия форум програмиране, форум уеб дизайн уроци по програмиране и уеб дизайн за ученици ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET http://academy.telerik.com програмиране за деца – безплатни курсове и уроци ASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC безплатен SEO курс - оптимизация за търсачки алго академия – състезателно програмиране, състезаниякурсове и уроци по програмиране, книги – безплатно от Наков курс мобилни приложения с iPhone, Android, WP7, PhoneGap уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop Дончо Минков - сайт за програмиране free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране безплатен курс "Качествен програмен код" безплатен курс "Разработка на софтуер в cloud среда" C# курс, програмиране, безплатно
  • 56. Exercises1. Create an HTML page that has two text fields (first name and last name) and a button. When the user clicks the button, a message should show the text in the text fields followed by the current time.2. Create a Web page that asks the user about his name and says goodbye to him when leaving the page.3. Modify the previous HTML page to have a text field for email address and on clicking the button check if the email is valid (it should follow the format <something>@<host>.<domain>).4. Create a Web page that shows 20 <div> elements with random location, size and color. 56
  • 57. Exercises (2)5. Create a drop-down menu  Use table for the main menu blocks  Use hidden <DIV> elements (display: none; position:absolute; top:30px)  Use JavaScript and onmouseover and onmouseout event to change display: none/block 57
  • 58. Exercises (3)6. Create a DTHML page that has <div> containing a text that scrolls from right to left automatically  Use setInterval() function to move the text at an interval of 500 ms  Use overflow:hidden for the <div>  Use scrollLeft and scrollWidth properties of the <div> element 58
  • 59. Free Trainings @ Telerik Academy "Web Design with HTML 5, CSS 3 and JavaScript" course @ Telerik Academy  html5course.telerik.com Telerik Software Academy  academy.telerik.com Telerik Academy @ Facebook  facebook.com/TelerikAcademy Telerik Software Academy Forums  forums.academy.telerik.com

×