HTML and CSS Reference
In-Depth Information
HTML5 validation is not fully operational in all browsers, so I won't spend a lot of time on it. If youre using a
compliant browser, such as Chrome, you can test out the example given in the next section. Notice that
the ball keeps bouncing even if an invalid value, say "abc" is entered where a number was specified,
because the program continues to use the current settings.
Tip: Validating input and generating appropriate feedback to users is important in any application.
Among the new features HTML5 provides is a pattern attribute in the input element in which a special
language called regular expressions can be used to specify valid input. Put
HTML5 regular
expressions
into a search field to find up-to-date information.
HTML page reload
Before continuing, I want to mention some issues that may cause unexpected problems. Browsers come
with reload/refresh buttons. The document is reloaded when the button is clicked. We made use of this in
the simple die throw application in Chapter 2. However, at times you may want to prevent a reload and, in
such cases, you can put a
return (false);
in functions that dont have anything to return to keep the
page from reloading.
When a document has a form, reloading does not always reinitialize the form input. You may need to leave
the page and then reload it using the full URL.
Lastly, browsers try to use files previously downloaded to the client (user) computer rather than
requesting files from a server based on inspection of the date and time. The files on the client computer
are stored in what is called the cache. If you think you made a change but the browser isn't displaying the
latest version, you may need to take steps such as clearing the cache.
Building the application and making it your own
I will now explain the code for the basic bouncing ball application; the application that uses an image for
the ball and gradients for the walls; and the one that validates the input. Table 3-1 shows all the function
calls and what is being called. This is the same for all three applications.
Table 3-1.
Functions in the Bouncing Ball Applications
Function
Invoked By/Called By
Calls
init
Action of
onLoad
in the
body
tag
moveball
moveball
Invoked directly by
init
and by action of
setInterval
moveandcheck
moveandcheck
Invoked by
moveball
change
Invoked by action of
onSubmit
in the
form
tag
The
moveandcheck
code could be part of the
moveball
function. I chose to separate it because it is a
good practice to define functions that perform specific actions. Generally, more, smaller functions are
