Class 10 — Finish Regular expressions
— Drawing with the canvas object
— Domain Object Model & Javascript

Regular expression conclusion

To be determined from previous classes.

Drawing with the canvas object

You can draw on a page with Javascript using the Canvas element. Here are a couple of sites to help you learn about that element.

• The W3 schools HTML5 canvas element description is here.
• Tutorial on using cavases.

Here are some examples using the canvas element.

• Draw a line on a canvas here..
• Rectangle moves across the canvas here.
• An analog clock here.

Domain object model

The Domain Object Model gives the structure within which it is possible to control all aspects of a web page using Javascript, as shown in the previous examples. It enables the implementation of the following principle.

Principle of reciprocity

Whatever a person can do with HTML and CSS in creating the contents of a web page, Javascript can do. And whatever Javascript can do in creating a web page, a person can do.

Of course, using Javascript has the advantage that a program can do things much faster than a person, which means pages can change in real-time.

DOM topics

• Look at the w3schools and Traversing the DOM web pages to show the heirarchial (tree) structure of the elements in a web page.
• Examples
  • An example web page showing a list of the upper level nodes in its HTML element structure.
  • Get display stats: by clicking a button, the computer screen height, width and colour depth is displayed as a new paragraph at the end of the existing content
  • Reading files has a browse button where you can select a file to display. A text file is displayed in red, showing how styles can be changed. An image file is displayed in a newly created img element. All other files replace the file-text display area with an error message.

Exam questions

Exam questions can be based on the following sources: (1) on-line web sites, (3) classes, (4) reports, (5) exercises, and (6) course web pages. They are based on topics from the beginning of the year up to and including the class before the exam, although more recent topics will be emphasized in later exams.

Consider all concepts and terminology used in on-line web sites, reports, slides and classes and ask the typical questions - how, why, when, where and what -- individually and in combination. In particular, variations are based on "describe", "explain", "define", "what is meant by", etc. you may be asked to do variations of some of the programming exercises.

Domain object model questions

1. Given an HTML file describe its Domain Object Model structure.
2. Be able to use in a Javascript program the following DOM functions: createElement, createTextNode, innerHtml, childNodes, appendChild, insertBefore, replaceChild, removeChild, nextSibliing, previousSibling, parentNode, removeAttribute, setAttribute.