Basically, to implement a user in te rface that collects data from a visitor, the < form>
element is used. This element helps to send the collected data to some kind of server,
which then processes them. Although we’re not going to send data to a server, it’s still
a good idea to use <for m>. We’ll also need the <input> element to create text bo xes
and buttons, and the <la bel> element to create captions for text boxes.
The following is a summary of the HTML elements and attributes that we are going
to use:
• The <form> element represents a part of a documen t c ontaining interactive con-
trols that a visitor can use to enter information.
• The <input> ele ment creates some of the interactive controls for web pages.
The type attribute of the <input> element decides w hat kind of control this
element will represent. If type is set to text, then the element will appear as a
text box, and if type is set to bu tton, then the element will show as a button.
Apart from that, you should mark each <input> element with the id attr ibute
if you want to access it from JavaScript or associate a label with it.
Note that <input> is a void element and therefore has no content. T hat means
that the corresponding Element object has no innerHTML pro perty and the text
that is written on a button or inside a text box is accessible through the v alue
property. I t is very important to r emember that the value property always re-
turns a string even if you enter a numeric value inside the text box.
• The <label> element is used to equip a control with a captio n. The f or at-
tribute of the <label> element is used to associate a label with an <input>
element. One practical consequence of associating a label with a control is that
when the visitor clicks a label, a click event is triggered on the associated con-
trol as well. That’s especially convenient for tiny controls like checkboxes as the
user ne ed not click on a con trol itself but can just as well click on the associated
label, wh ic h is usually much larger.
Maria: I assume that a JavaScript property reflecting for should have a different
name because for is a reserved word in JavaScript.
Professor: That’s right. The corresponding JavaScript property is named html For.
12.8 Homework
Professor: For homework, you will rewrite your math worksheet generator to make
it an object class. Let the class have methods for setting the operator and maximum
operan d values, and methods for fetching the gen erated eq uation and the correct solu-
tion. The user should be able to interact with your worksheet via the in te rface specified
by the following HTM L:
<div id="ws1">
<form class="worksheet">
<div class="equations">
<div>
<label for="eq0" id="eq0-label"></label>
12.8. Homework 243
<input type="text" id="eq0">
</div>
</div>
<input type="button" value="Submit" id="submit">
</form>
<div id="score"></div>
</div>
Basically, the worksheet is an HTML form containin g one or more pairs o f <label>
and <input> elements, each pair representing an equation . For the homework yo u
will only work with a single equation but in general there will be more of them. The
question part of the equation is represented by a label, while the part accepting the
answer is implemented a s a text box. At first gla nce, so me of the elements in the
above document look superfluous but they are in fact there to make your life easier.
The innermost <div> ele ment, for example, allows you to trea t the label-input pair as
a sep arate entity, which is especially useful for positioning the equations.
Let the finished application initially display an equation, which sho uld be contained in
the <label> element. Each time the u ser clicks the submit button, a so lution entered
into the text box should be checked and the total score updated accordingly. You use
the <div> element with the ID sc ore to display the score. Finally, a n ew equ ation
should be generated and displayed.
Before we go home, here’s a list of today’s keywords:
In this meeting: core JavaScript, client-side JavaScript, Window object, global ob-
ject, global variables an d functions, <script>, sr c, synchronous execution, asyn-
chronous execution, event, event-hand le r property, onclick, onload, DHTML,
web application, API, DOM API, Docum ent object, getElementById(),Element
object, innerHTML, timers, setTimeout(), setInterval(), callbac k, class,
className, <form>, input con trols, <input> , type, text, butto n, val ue, for,
htmlFor, <label>
244 Meeting 12. Using JavaScript to Control the Browser
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.