Web Applications

JavaScript Client

Adding JavaScript with script tag

Script tag can be placed both in head and body. The tag is evaluated when encountered, parsing of the DOM is paused. As a result any content bellow the script tag is not available.

We can put the JavaScript directly into HTML. Keep in mind that we should properly "escape" any HTML relevant content such as < and >. 


<script type="text/javascript">
window.alert("Hello world");
</script>

We can load JavaScript from an external resources. 


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

Do NOT add JavaScript directly to method handlers in HTML!

DOM Model in JavaScript

HTML is infix serialization of DOM (Document-Object-Model). 


<html><body><h1>DOM Example</h1><img src="" alt=""></body></html>

From the perspective of a browser the above is represented similar to image bellow.

DOM tree example

Absence of white spaces is no accident in the HTML above, as comments and white spaces are also part of DOM.

Demonstration: DOM Model in JavaScript


  <html><body>
  <ul id="dom-list">
  <!--Items: -->
  <li>An item</li>
  </ul>
  </body></html>

  • Document.getElementById({id}) [Documentation] - a reference to the element by its ID
  • Node.childNodes [Documentation] - all nodes
  • Element.children [Documentation] - elements only
  • Document/Element.getElementsByTagName({tagName}) - live HTMLCollection containing all descendant elements of a particular tag name

Traversing DOM

Additional selected methods & properties:

  • Node.firstChild - readonly property the node's first child (Node) in the tree, or null
  • 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
  • Element.firstElementChild - readonly property the node's first child Element in the tree, or null

Manipulating DOM

Additional selected methods & properties:

  • Document.createElement(tagName) - creates the HTML element specified by tagName
  • Node.appendChild(childNode) - adds/move a node to the end of the list of children
  • 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
    Use of this property is a security risk and may be limited by a browser.
  • Element.innerText - sets or gets the rendered text content of a node and its descendants.

Events

Events are triggered on certain user action and other events, e.g. page finished loading, mouse click, etc.. Event can be handled using event handler JavaScript code, a function. All event handling is executed using a single thread. Blocking the event cause website to stop responding.

Demonstration: Adding event handlers

We can attach event listeners to Node using JavaScript. 


const link = document.getElementById("link");
link.addEventListener("click", function(event) { event.preventDefault(); console.log("Click ..."); } )

Different event types utilize specializations of the Event objects.

Events can be triggered using JavaScript: 


document.getElementById("link").click();

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

Styles manipulation

Styles can be modified using the element.style property. However, preferred way is to utilize CSS classes and element.classList. 


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

// Direct style modification
div.style.fontWeight = "bold";

// Using CSS classes 
div.classList.add("important");
div.classList.remove("important");
div.classList.toggle("hidden");

Exercise - basic DOM manipulation

Download this page and implement following:

  • 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

Implement functionality step by step. Mind naming and code-style.

Exercise: Smart table

Download this document and fix TODOs.

Questions, ideas, or any other feedback?

Please feel free to use the anonymous feedback form.