javascript in depth n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
JavaScript in Depth PowerPoint Presentation
Download Presentation
JavaScript in Depth

Loading in 2 Seconds...

play fullscreen
1 / 58

JavaScript in Depth - PowerPoint PPT Presentation


  • 126 Views
  • Uploaded on

JavaScript in Depth. Svetlin Nakov. Telerik Corporation. www.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?. Table of Contents (2).

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'JavaScript in Depth' - conley


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
javascript in depth

JavaScript in Depth

Svetlin Nakov

Telerik Corporation

www.telerik.com

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

Built-in Object

a.k.a. language features

boolean
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

}

number
Number
  • Doesn’t do much either
array
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
array mutators
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]

array accessors
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

string
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
string methods
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”

slide16
Date
  • Creates Date instances which let you work with dates and times.
  • Only instance syntax
  • Few “static” methods
  • Many instance methods
regexp
RegExp
  • Deals with regular expression
  • Supports literal and instance syntax
  • RegExp properties
    • global
    • ignoreCase
    • multiline
    • lastIndex
  • RegExp methods
    • exec
    • test
function
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
function methods
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

object
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
document object model dom1
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
dom nodes
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
dom nodes types
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
querying the dom
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
querying the dom 2
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” );

querying the dom 3
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” );

traversing the dom
Traversing the DOM
  • You are somewhere in the DOM and you need to get elsewhere
  • Methods for adjacent nodes
  • Methods for children collection
traversing the dom 2
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

accessing elements through the dom tree example
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
dom manipulation
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')" />

common element properties
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
common element properties 2
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…
dom events1
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;

dom events 2
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)

the html dom event model 3
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
the html dom event model 4
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
common dom events
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
common dom events 2
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
on l oad event example
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>

debugging javascript1
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
firebug
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
javascript console object
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)
browser differences

Browser differences

Every browser for itself

browser differences1
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
feature detection
Feature detection
  • Feature detection
  • Shims, shivs
  • Polyfills
  • JavaScript libraries
  • Clojures
  • Module pattern
shims shivs
Shims, shivs
  • What is feature detection
  • Shim – a compatibility workaround
  • Shiv – a shim that ends with a “v”
polyfills
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
closures
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

})()

module pattern
Module pattern
  • Basically, an implementation of closure
  • or

var Module = (function() {

// Do magic stuff here

// Don’t forget to return

return { … } // some object

})()

(function() {

// Do magic stuff here

// Don’t forget to return

window.Module = { … } // some object

})()

javascript libraries
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
javascript in depth1
JavaScript in Depth

?

Questions?

?

?

?

?

?

?

?

?

?

?

exercises
Exercises
  • 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.
  • Create a Web page that asks the user about his name and says goodbye to him when leaving the page.
  • 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>).
  • Create a Web page that shows 20 <div> elements with random location, size and color.
exercises 2
Exercises (2)
  • 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
exercises 3
Exercises (3)
  • 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