Web Applications

Lab 09

special thanks to Jan Michelfeit & Martin Kruliš

Programming test in lab

Specification is available.

Adding JavaScript - <script> tag


<script type="text/javascript">
  window.alert("Hello world");
</script>
  • Can be placed both in head and body
  • Evaluated when encountered

Adding JavaScript - <script> tag


<script type="text/javascript" src="...url...">
</script>

DOM Model in JavaScript

DOM tree example 

<!doctype html>
<html>
  <body>
    <h1>DOM Example</h1>
    <img src="img.png" alt="image"/>
  </body>
</html>

DOM Model in JavaScript


<ul id="dom-list">
  <!--Items: -->
  <li>An item</li>
</ul>
  • document.getElementById("dom-list").childNodes
  • document.getElementById("dom-list").children

Traversing DOM

Selected methods & properties

  • document.getElementById(id) - a reference to the element by its ID
  • document.getElementsByTagName(tagName) - live HTMLCollection containing all elements of a particular tag name
  • element.getElementsByTagName(tagName) - live HTMLCollection containing all descendant elements of a particular tag name
  • node.children - live HTMLCollection of the child elements of Node.
  • node.firstChild - readonly property the node's first child in the tree, or null (not necessarily an element!)
  • node.lastChild - readonly property the node's last child in the tree, or null
  • node.nextSibling - the node immediately following the specified one
  • node.parentNode - the parent of the specified node in the DOM tree.

Manipulating DOM

Selected methods & properties

  • document.createElement(tagName) - creates the HTML element specified by tagName
  • node.appendChild(childNode) - adds a node to the end of the list of children of a specified parent node
  • node.removeChild(childNode) - removes a child node from the DOM
  • node.cloneNode(deep) - returns a duplicate of the node on which this method was called
  • node.textContent - text content of a node and its descendants
  • element.innerHTML - sets or gets the HTML syntax describing the element's descendants

Events

  • Events are triggered on certain user action and other events (e.g. page finished loading, etc.)
  • JavaScript code (handler) can be attached to events
  • Handlers are executed on a single thread

Adding event handlers


var link = document.getElementById("link");
link.addEventListener('click', function(event) { event.preventDefault(); } )

Selected events

  • window.load - document finished loading
  • node.click - node clicked
  • node.keydown - key pressed
  • node.keyup - key released
  • element.input - the value of an <input> or <textarea> element is changed
  • form.submit - form is submitted

Note that these are the event names. Attribute names have on- prefix (e.g., onsubmit).

Exercise 1

Exercise - basic DOM manipulation

  • Download this page
  • Add elements of array employees as <li> items in content list
  • Modify all <h1> headings so that they are numbered (i.e. "1. First heading", …)
  • Repeat the row in "Delivery plan" 5 times
  • Disable all links - i.e. no action on click

Styles manipulation

  • Styles can be modified using the element.style property
  • For more complex changes, add/remove (toggle) classes using element.classList

Examples

div.style.fontWeight = "bold";
		


.important{ font-weight: bold; }
.hidden { display: none; }
		


div.className = "important";
		


div.classList.add("important");
div.classList.remove("important");
div.classList.toggle("hidden");

Exercise 2

Exercise - smart table

Download this document and fix TODOs

The end…

Questions?

Feedback