JavaScript

Three

Browser Object Model

Interface between the browser and JavaScript

window object properties

window.navigator
window.location
window.history
window.document
window.innerHeight
window.innerWidth
window.screen etc.

          

var info = '';

info += 'window.navigator.vendor: ' + window.navigator.vendor + '\n';
info += 'window.location: ' + window.location + '\n';

alert(info);


history.back();

window object methods

window.open()
window.close()
window.alert()
window.confirm()
window.focus()
window.moveTo()
window.prompt()
window.resizeTo()
window.scrollTo()
window.setTimeout()
window.setInterval() etc.

window object events

window.onchange
window.onscroll
window.onresize
window.onclose
window.onload
window.onmousedown etc.

Document Object Model (DOM)

When a web page is loaded, the browser creates a Document Object Model of the page
defines the logical structure of the page
represented as a tree
everything is a node

Working with DOM

          

var ele = window.document.getElementById("some-id");
var newElement = window.document.createElement("div");
var someText = window.document.createTextNode("Some text");
newElement.appendChild(someText);
ele.appendChild(newElement);

          

var arr = window.document.getElementsByTagName("span");
var arr = window.document.getElementsByClassName("some-class");

element properties: childNodes, firstChild, parentNode, nextSibling, previousSibling

More DOM manipulations

element nodes have attributes that can be get and set

          

myElement.getAttribute(attribute);  
myElement.setAttribute(attribute, value);

to add or remove nodes in a document

         

myElement.removeChild(someChildNode);
myElement.appendChild(newChildNode);
myElement.insertBefore(node1, node2); //inserts node1 as a child before node2
myElement.replaceChild(newNode, oldNode);

Common events

onclick
onload
onmouseover
onmouseout
onmousedown
onmouseup
onblur
onfocus

Events

old pattern

          

<a href="#" onclick="alert(event)">Click</a>
<a href="#" onclick="alert(this);">Click</a>
<a href="#" onclick="handle(event, this);">Click</a>

Event Listeners

          

element.addEventListener(eventType, function, useCapture);  
element.removeEventListener(eventType, function);  



var myElement = document.getElementById('some-id');
myElement.addEventListener('click', handleClick);

function handleClick(event){
  alert(event);
}

Event Propagation - Bubbling

innermost element's event is handled first and then the outer element's event is handled

div1a

div2a

div3a

div4a

div5a

click on any div to see how event propagates

Event Propagation - Capturing

outermost element's event is handled first and then the inner

div1b

div2b

div3b

div4b

div5b

click on any div to see how event propagates

AJAX

Asynchronous JavaScript and XML

allows for updating parts of a web page without having to reload the entire page
XMLHttpRequest object
used to exchange data with a server
used to fetch data in xml, html, json, plain text

JSON

JavaScript Object Notation

lightweight data interchange format derived from JavaScript object notation syntax
is plain text
to convert a string into an object


var obj = JSON.parse(text);