Are you looking to learn web development but don't know where to start? Do you struggle to keep track of all the different languages, frameworks, and tools that are used in web development? Look no further! Our web development notes have got you covered.
Our comprehensive notes cover all the ess...
Answer to Review Question 9 ................................................................................................ 26
Answer to Review Question 10 .............................................................................................. 26
Objectives
At the end of this chapter you will be able to:
• Write HTML files using JavaScript event handlers;
• Write HTML files using conditional statements and code blocks.
13.1 Introduction
The interesting behaviour of a system tends to be dependent on changes to the state of the system as a whole, or to
its components. The kind of interaction a Web application might include usually involves short-term changes of
state in which it is only important to know that they have occurred. That is the change of state is not intended to
persist; it happens and it is not stored explicitly in the system. Such a change is indicated by an event. In the context
of JavaScript, an event is an action that occurs in a browser that JavaScript provides facilities to detect and so act upon.
Events are generally related to user interactions with the document, such as clicking and pointing the mouse,
although some are related to changes occurring in the document itself. Programming JavaScript to handle such
events provides for many styles of human-computer interaction. In short, programming JavaScript event handlers is
crucial if you want interactive Web pages. When this style of programming dominates your design, it is known as
event-based programming.
13.1.1 Event-based Programming
One event that you already know about occurs when the mouse is clicked on something, such as a hypertext
link. Of course, the browser itself may intercept these events. You will note that many browsers change the status
bar when the mouse is moved over an anchor. It is usually changed to the anchor's URL. In this case the browser
has intercepted the event and has caused some action to occur. Events are useful for seeing what the user is doing
and to provide them with extra information concerning their action.
Events are frequently used on forms to make it easier for the user to type in correct information, and to warn them
when they input something incorrectly. For instance, if a text box requires a phone number, you can use events to
notice whenever the user inputs data into the text box, and to ensure that the inputted data contains only numbers
and dashes. Finally, you can validate all of the input before the user submits the form.
Events don't only have to be used to process forms. They could, for instance, by used when you have a number of
frames which need to have their content changed when a user clicks on an anchor.
13.1.2 Event Handlers 'One Liners'
It is possible to add JavaScript to individual HTML tags themselves without using SCRIPT tags. These are often only
single lines of code, and are thus nicknamed 'one liners'. This is not the only way to program event handlers, but is
often the most convenient. This style of handling events is evidence of the close relationship between HTML and
JavaScript: for a whole range of HTML elements tag attributes are provided that are associated with events. These
attributes have as their value JavaScript code that is executed if the event occurs. For example, anchor tags support the
event of a mouse pointer being moved over the anchor using the attribute onMouseOver. If a tag supports the event
represented by the attribute, and the event occurs, then the JavaScript that is the value of the attribute is executed.
Many events can occur while a user is interacting with a Web page. For example a user might click on a button,
change some text, move the mouse pointer over a hyperlink or away from one, and, of course, cause a document to
load. There are event handlers for these events with names that include: onClick, onMouseOver, onMouseOut,
onLoad. (We will be making use of all of these later.)
One of the simplest events is a mouse click. It is represented by the attribute onClick and supported by links and
HTML button elements. Examine the following tag with an event handler as an attribute — a so-called 'one-liner'.
(We will assume that this tag appears between <FORM> and </FORM> tags.)
When a browser interprets this tag, it renders a button labelled Click to order. Subsequently, if a user clicks on
that button, the click event is detected and the JavaScript associated with its attribute is executed. Here, an alert
dialogue box is displayed, as shown below.
Let us work through this HTML and JavaScript. The first part of the <INPUT> tag is as you have previously
seen: the type attribute is assigned the value button; the value attribute, which labels the button, is assigned the
value Click to order. Then comes the new attribute for the tag <INPUT>. It is onClick, and is given the value
that in this case is a single JavaScript statement that invokes the window.alert() method. This final attribute
assignment creates an event handler for the particular JavaScript object representing the button such that clicking on
the visual representation of the button causes the code to be executed.
In general, a sequence of statements may be included in the event handler. However, as it is essentially a 'one-liner'.
Each line in the sequence must be separated by semicolons (as would be done in Java).
For example, including a second dialogue box that said 'Have a nice day' would require a semicolon, as in:
<INPUT type=button value="Click to order"
onClick="window.alert('Purchase window.alert('Have a nice
day')">
This HTML/JavaScript works just as previously, except that clicking on the 'Click to order' button will produce a
second alert box after the first has been dismissed.
Exercise 1
Modify the earlier onClick example to include a flashing background colour before the alert dialogue box. Make
sure you restore the initial background colour by saving it first with a variable and using the variable to restore the
colour at the end. Depending on the speed of your computer, you will probably need at least two colour changes to
notice anything.
You can find a discussion of this exercise at the end of the unit.
13.1.3 Events and objects
Earlier, it was suggested that you could conceive of the button as being an object with a nameless method that
is invoked when you click on the button visible via a browser. You can, in fact, see that the HTML tag is
implicitly creating a button object by accessing the button object and its properties - its type, as defined in the
HTML tag, and its value, the text shown as the button label and defined by the VALUE tag. To do so the special
variable this is used to refer to the object which the method belongs to. Hence, this.type can be used to access
the type property, and this.value can be used to access the value property. The following variation of the first
event handler can be used to confirm the object nature of the HTML button element:
<INPUT type=button name="orderButton" value="Click to order" onClick="windo
this.type + ' and has value: ' + this.value)">
Executing this HTML <INPUT> tag (in a form) will produce the button as before, but when you click on it, the
alert dialogue box now shows the two properties of the object referred to by this.
3
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller arshshops24. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $20.49. You're not tied to anything after your purchase.
