Notes on notation

Instructions starting with ACTION:, like the one below, are for the student to carry out while reading the tutorial.

ACTION: Open your browser.

Javascript in the Browser

In the introductory tutorial we showed a picture how Javascript interacts with the browser. Here is a more detailed illustration.

Document Object Model (DOM)

Whenever an HTML page is loaded in the browser, its DOM equivalent is also created. The DOM

• replicates the loaded page in the form of a hierarchy of objects (see the rounded hierarchy of objects in the picture)
• is built based on the elements of the page: there is an object for every HTML element in the page (red arrows in the picture)
• allows easy programmatic (with Javascript) manipulation of the page: if something changes in the DOM, it changes in the rendered page (red arrows in the picture)

Javascript interpreter

Javascript code runs in the Javascript interpreter, which

• resides in the browser (black rectangle in picture)
• receives Javascript code for execution in one of three ways
  • through the console
  • from script elements in the loaded HTML page
  • as a handler for an event (the code is interpreted and executed when an event happens in the browser)
  We have used the first two in previous lab work. Today we are focusing on the third, event handlers.

Events

An event is something that happens in the context of a browser and currently loaded page, for example

• a mouse click
• the mouse pointer entering and elements' area on the rendered page
• scrolling
• the page loading
• keystrokes

Setting event handlers

• programmatically from within Javascript code (we will be doing this in the next few weeks)
• using HTML attributes called event handler properties:
  1. the event handler property is identified for the chosen event (see here for a comprehensive list of events); event handler property names follow the pattern "on" + <event name>, for example the event handler property for the click event is onclick
  2. the browser can listen for an event only if it is associated with a particular element (click, on what?), called the target element, for example if we want the event to be a click on the button My Button then that button is the target element
  3. the event handler property is added as an attribute to the target element
  4. the handler code is added as the attribute's value

  event: click
  target element: button My Button
  event handling code: alert('Here's the handler code saying hello!')

  
  

  Note that if quotes appear in the handler code, they should be single quotes. If apostrophes or further single quotes appear enclosed within the quotes in the code, they need to be escaped (preceded by a backslash i.e. \'). If double quotes appear enclosed within the quotes in the code, they need to be html-escaped (&quot; used instead of ").

  of code with quotes used properly in event handler attributes

  Single-quoted text in the code:

  <button onclick="alert('Hello')">Click me</button>

  Try it:

  Click me

  Single-quoted text in the code containing an apostrophe and double quotes:

  <button onclick="alert('&quot;Mum\'s the word&quot;, said my Mum')">Click me</button>

  Try it:

  Click me

  ACTION: With file page.html open in a text editor, find the button element. Examine it to find the event handler set on it, then answer the following questions.

  • What event is the handler for?
  • What function is called as the handler?
  • Open the file page.js and find the function. What do you think it does (roughly)?
  • Now open the HTML file in the browser and click the button to see what happens.
  • Reload the file in the browser, then open the console in the developer tools and from there call the function by typing in changePage(). The same changes should happen in the page, as it makes no difference whether the function is called as an event handler or explicitly from the console.

  ACTION: With file page.html open in a text editor, find the image element. Then add an event handler to the image element so that when the mouse pointer is brought over the element in the browser (the event for this is mouseover), an alert pops up.

  Click to see answer

  <img width="400" src="tudwp.jpg" onmouseover="alert('An alert from the wallpaper!');">