HTML and CSS Reference
In-Depth Information
Plan
Ahead
General Project Guidelines
When adding JavaScript or any scripting language to a Web page document, the actions
you perform and decisions you make will affect the appearance and characteristics of the
finished Web page. Before you write the JavaScript code, you should follow these general
guidelines:
1.
Determine what you want the code to accomplish.
The JavaScript tasks in this chapter
calculate the number of days to a future date and display a dynamic message that
includes the current date and number of days until another date, change the color of
the scroll bar, use a drop-down menu (HTML tag <select/options>) to link to other Web
pages, and display a copyright notice and date the Web page was last modified at the
bottom of the Web page.
2.
Determine where on the Web page you want the code to appear.
JavaScript code should
always be placed in the <head> section of the HTML code. To display messages at specific
locations, JavaScript can send text to a <div> container tag. By using a <div> container
and the innerHTML property, a JavaScript user-defined function can display dynamic
messages at any location in the <body> of the HTML document. In this project, <div>
container tags are used to display a dynamic message beneath the Midwest Bridal Expo
banner and to display the date last modified and copyright information at the bottom of
the Web page.
3.
Determine where you want to store the Web page during development
. The storage
location of HTML code and associated images is very important. A best practice is to
create folders to organize HTML files and graphics in a specific location. This practice
makes finding and maintaining links to graphics and other Web site pages easy.
When necessary, more specific details concerning the above guidelines are presented at
appropriate points in the chapter. The chapter will also identify the actions performed and
decisions made regarding these guidelines during the creation of the Web page shown in
Figure 9-1 on the previous page.
JavaScript Advantages
and Disadvantages
JavaScript allows for faster
response in client pages
to requests such as form
validation. JavaScript
code downloads faster
than other kinds of
applets, like Java or Flash,
and no extra plug-in is
needed to execute the
JavaScript code. The main
disadvantage to JavaScript
is that some browser
versions may not execute
JavaScript as intended.
JavaScript
Object-Oriented
Programming (OOP)
Object-oriented
programming is an
approach to programming
in which the code that
operates on the data is
packaged into a single
unit called an object.
Before adding JavaScript code to your Web page, you should understand some basics about
the programming language.
JavaScript
is an event-driven, object-based programming
language that provides various types of functionality to Web pages, such as the ability to inter-
act with the user. An
event-driven
programming language is one that responds to events, such
as a Web page loading or a user clicking a Submit button. JavaScript is
object-based
because
it is a scripting language that uses built-in objects that belong to the browser.
Built-in objects
are values that are common to a browser (arrays, dates, strings,
etc.), which neither depend on nor belong to another object. Table 9-1 contains a general
list of the built-in JavaScript objects common to many browsers. JavaScript developers
can create new objects based on the built-in objects, and the new objects inherit proper-
ties from the original objects. For more information about these objects, see the JavaScript
Quick Reference in Appendix G.
Event-Driven
Programming
Code in event-driven
programs executes only
when a certain event, such
as clicking a button, triggers
the code to execute.
Table 9-1 Built-In JavaScript Objects
Object
Description
Array
Returns an ordered set of values
Boolean
Converts objects to Boolean values
Date
Accesses the system time and date
Document
Represents the content of a browser's window
