• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
15. JavaScript in depth - Web Front-End
 

15. JavaScript in depth - Web Front-End

on

  • 1,842 views

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

Statistics

Views

Total Views
1,842
Views on SlideShare
1,839
Embed Views
3

Actions

Likes
3
Downloads
55
Comments
0

3 Embeds 3

https://twimg0-a.akamaihd.net 1
http://api.jquery.com 1
http://192.168.6.179 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    15. JavaScript in depth - Web Front-End 15. JavaScript in depth - Web Front-End Presentation Transcript

    • JavaScript in DepthSvetlin NakovManager Technical Traininghttp://nakov.comTelerik Software Academyacademy.telerik.com
    • 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
    • Table of Contents (2) Built-in JavaScript objects (common)  Boolean  Number  Array  String  Date  RegExp  Function  Object 3
    • Table of Contents (3) Built-in JavaScript objects (uncommon)  Typed arrays  Errors  JSON  Math  Infinity  NaN  undefined 4
    • Table of Contents (4) Enter the DOM  Difference between JS and DOM DOM objects Querying the DOM Traversing the DOM Manipulation Events 5
    • Table of Contents (5) Browser differences Feature detection Shims, shivs Polyfills JavaScript libraries Closures Module pattern 6
    • What we know so far? Just a recap
    • Built-in Objecta.k.a. language features
    • 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
    • Number Doesn’t do much either 10
    • 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
    • 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
    • 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
    • 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
    • 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
    • Date Creates Date instances which let you work with dates and times. Only instance syntax Few “static” methods Many instance methods 16
    • RegExp Deals with regular expression Supports literal and instance syntax RegExp properties  global  ignoreCase  multiline  lastIndex RegExp methods  exec  test 17
    • 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
    • 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
    • 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
    • Document Object Model (DOM)
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Traversing the DOM You are somewhere in the DOM and you need to get elsewhere Methods for adjacent nodes Methods for children collection 28
    • 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
    • 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
    • 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
    • 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
    • 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
    • DOM Events
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Debugging JavaScript
    • 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
    • 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
    • Firebug (2) 45
    • 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
    • Browser differences Every browser for itself
    • 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
    • Feature detection Feature detection Shims, shivs Polyfills JavaScript libraries Clojures Module pattern 49
    • Shims, shivs What is feature detection Shim – a compatibility workaround Shiv – a shim that ends with a “v” 50
    • 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
    • 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
    • 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
    • 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
    • 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# курс, програмиране, безплатно
    • 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
    • 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
    • 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
    • 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