alert() to notify the user of something (see Figure 1),
confirm() to ask if something is OK to do or not and either
prompt() or a form field to get user input.
Figure 1: Telling the end user about errors using an
This lead mostly to validation scripts that stopped the user to send a form to the server when there was a mistake, and simple converters and calculators. In addition, we also managed to build highly useless things like prompts asking the user for their name just to print it out immediately afterwards.
Another thing we used was
Enter DOM scripting
The DOM is an object representation of the document. The previous paragraph for example (check out its source using view source) in DOM speak is an element node with a
p. It contains three
child nodes — a text node containing “When browsers started supporting and implementing the ” as its
nodeValue, an element node with a
a, and another text node with a
a child node also has an attribute node called
href with a value of “http://www.w3.org/DOM/” and a child node that is a text node with a
nodeValue of “Document Object Model(DOM)”.
You could also represent this paragraph visually using a tree diagram, as seen in Figure 2.
Figure 2: A visual representation of our sample DOM tree.
In human words you can say that the DOM explains both the types, the values and the hierarchy of everything in the document — you don’t need to know anything more for now. For more information on the DOM, check out the Traversing the DOM article later in the course.
Using the DOM you can:
- Access any element in the document and manipulate its look, content and attributes.
- Create new elements and content and apply them to the document when and if they are needed.
This means that we don’t have to rely on windows, frames, forms and ugly alerts any longer, and can give feedback to the user in the document in a nicely styled manner, as indicated in Figure 3.
Figure 3: Using the DOM you can create nicer and less intrusive error messages.
Together with event handling this is a very powerful arsenal to create interactive and beautiful interfaces.
Event handling means that our code reacts to things that happen in the browser. This could be things that happen automatically — like the page finishing loading — but most of the time we react to what the user did to the browser.
Users might resize the window, scroll the page, press certain keys or click on links, buttons and elements using the mouse. With event handling we can wait for these things to happen and tell the web page to respond to these actions as we wish. Whereas in the past, clicking any link would take the site visitor to another document, we can now hijack this functionality and do something else like showing and hiding a panel or taking the information in the link and using it to connect to a web service.
- A sign-up form can check if your user name is available when you enter it, preventing you from having to endure a frustrating reload of the page.
- A search box can give you suggested results while you type, based on what you’ve entered so far (for example “bi” could bring up suggestions to choose from that contain this string, such as “bird”, “big” and “bicycle”). This usage pattern is called autocomplete.
- Information that changes constantly can be loaded periodically without the need for user interaction, for example sports match results or stock market tickers.
- Information that is a nice-to-have and runs the risk of being redundant to some users can be loaded when and if the user chooses to access it. For example the navigation menu of a site could be 6 links but display links to deeper pages on-demand when the user activates a menu item.