Javascript
in the Browser

Loading a script

The recommended way: external file in the header

myfile.html
<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <script type="text/javascript" 
            src="myscript.hs"></script>
    …
  </head>
  …
</html>


myscript.js
alert("Hello World!");
…
…

Loading a script

The recommended way: or at the bottom of the page

myfile.html
<!DOCTYPE html>
<html lang="en">
  <head>
    …
  </head>
  <body>
  …
    <script type="text/javascript" 
            src="myscript.hs"></script>
  </body>
</html>
myscript.js
alert("Hello World!");
…
…

Code Execution

  • Code is executed as the page loads
  • Locally on the browser
  • Order of script tags important

Accessing the webpage

Through the window object

In particular

window.location
Current URL info
window.navigator
Browser info
window.history
History
window.history.back()
Load previous URL in history
window.history.forward()
Load forward URL in history
window.document
DOM tree
(Up/down arrows to unfold)

DOM tree

  • Document Object Model: pure javascript
  • Interface to the tree-structure of the webpage
Standardization by... the W3C

DOM tree

  • Document Object Model: pure javascript
  • Interface to the tree-structure of the webpage
  • Object structure for each node n of the tree
n.nodeType
Is it a tag, an attribute, a text node, ...
n.nodeName
Tag or attribute name, if relevant
n.nodeValue
for text and attribute nodes
n.parentNode
Object, parent node in the tree
n.childNodes
Collection of children nodes, in order
n.innerHTML
Textual representation of the subtree
n.style
Object storing the style of the elemnt
n.getAttribute("attr")
Attribute retrieval
n.setAttribute("attr","val")
Set/Change attribute

DOM tree

  • Document Object Model: pure javascript
  • Interface to the tree-structure of the webpage
  • Object structure for each node n of the tree

With d = window.document

d.getElementsByTagName("h1");
Collection of nodes
d.getElementById("someID");
One node, or undefined
d.getElementsByClassName("classN");
Collection of nodes
d.createElement(tagName);
Fresh HTML element
d.createElementNS(namespaceURI, tagName);
Fresh XML element
d.createTextElement("some text");
Fresh XML text node
parent.insertBefore(nodeToInsert, childRef);
Insert sibling node
parent.appendChild(nodeToInsert);
Insert child node
parent.removeChild(nodeToRemove);
Remove child node
nodeToRemove.remove();
Remove child node

Event-Driven Programming

Attaching actions to events
(Otherwise nothing happens once the page is loaded)

Mouse
click, dbclick, mouseover, wheel...
Keyboard
keydown, keyup, keypress...
Form
focus, blur, select, change, submit, reset...
Window
load, unload, resize, scroll...
Touchscreen
touchstart, touchend, touchmove...

You can find a complete list e.g. here

(Up/down arrows to unfold)

Attaching Actions to Events

With a special HTML attribute

Mouse click

<span onclick="console.log('Hello !');">Click me!</span>

Form change

<form>
    <input type="text" value="default text"
           onchange="alert('Booh!');" >
</form>

When the page is loaded

<body onload="console.log('Webpage loaded');" >
    ..
</body>

Attaching Actions to Events

Pure javascript

Setting up a default handler

someDOMelement.onclick = function(e){
   // what to do on a click
};

Or adding a new handler to the list of handlers

someDOMelement.addEventListener("click",function(e){
   // what to do on a click
},false);