Week 4 — HTML form elements,
JavaScript intoduction
The behavioural layer for web pages

Slide sets

HTML form elements

• A simple form with name, password and email fields — Example 1.
• A form showing many different fields and ways of dealing with fields — Example 2.
• For those who are interested here is the cgi script that processes the above forms — cgi script. The file extension is text because browsers do not display files with extensions cgi and php.

Spaceling example

Shows the three aspects of web page structure.

• spaceling_text.html — text only; not easy to read
• spaceling_html.html — Structural layer - text with added HTML tags; can read the page but it is not very presentable
• spaceling.css — Presentation layer - the style sheet
• spaceling.js — Dynamic layer - JavaScript to make the page dynamic
• spaceling.html — the complete page with HTML, CSS & JavaScript

Examples of what can be done.

• On click invoke function sayHello — do the instructions named sayHello
• The function alert(message_string) displays an alert popup window containing the message_string. Occasionally, but rarely, a useful way to displaythe values of variables when debugging a script. Use primarily to notify users of something they must do.
• Set the contents of an HTML element with .innerHTML
• Modify the class used by an HTML element with setAttribute(class, className)
• Hide an element with setAttribute("hidden", "true")
• Remove an HTML attribute, e.g. show a hidden field with removeAttribute("hidden")
• Use an if…then…else… statement to deal with the name/no-name cases

Example algorithms

In programming you begin with a given set of objects and a set of operations that modify those objects. Programming is creating a sequence of instructions for a person or machine to follow, where the instructions specify which objects you are to use and with which operations you are to modify them.

• Cooks create recipes. A recipe for chocolate-banna cake is here. Look at pages 1 and 2.

  Objects

  Incredients, pots, pans, utensils, stoves, freezers, and more

  Operations

  Chop, combine, heat, cool, and more.

• Composers and song writers create instructions for playing music. The musical score Sciliana by F. Carulli for guitar is here.

  Objects

  Symbols for: staffs, notes, ties, rests, repeats, and more

  Operations

  Read the symbols for notes, rests, repeats, and more in the given sequence, location on the appropriate staff and time duration to produce music.

• Instructions for repairing equipment. For example DVD repair

  Objects

  Housing, screws, clips, front panel, disc tray. grease, alcohol, and more.

  Operations

  Remove screws, look for clips, brace tray, grease, inspect and more.

• A simple calculator example to show a web page with a form representing a two number arithmetic calculator and its JavaScript program.

  Objects

  The input and output fields that contain numbers.

  Operations

  Read the numbers in the input fields. Do arithmetic on those numbers. Write results to the output fields.