Chapter 7. Introduction To JavaScript
Chapter Objectives
In this chapter you will learn about:
JavaScript allows a Web developer to create Web pages that are more interactive and more interesting. Using the Document Object Model, the Web developer has vast access to the browser and elements of the HTML document. JavaScript is an indispensable part of Web site development.
JavaScript is an interpreted, object-based scripting language. As with any programming language it comes replete with:
control statements
for…each
if-then-else
while
switch
values, variables, and string literals
operators (such as =, >, ==)
the ability to create and call functions
string pattern matching using Regular Expressions
predefined functions for handling math, dates, and arrays (called math, date, and array)
This set of basic statements and language elements is known as Core JavaScript. Core JavaScript is extended by Client-side JavaScript and Server-side JavaScript. Server-side JavaScript executes on the server and only the results are returned to the browser; the code cannot be viewed. Server-side JavaScript is rarely used in Web development. When the term “JavaScript” is used in this book it is referring to Client-side JavaScript.
Client-side JavaScript extends Core JavaScript with objects that allow access to and control over the Web browser and the Document Object Model (DOM). You learn about the DOM in detail later in this chapter in Unit 7.3, “The Document Object Model.” For now, you only need to know that the DOM is a hierarchical structure that allows you to access and control the Web browser and HTML document.
JavaScript and Java are two different languages and one should not be mistaken for the other. Java is a compiled, class-based programming language. It is not integrated into the Web browser and HTML document as JavaScript is. Java code, such as applets, are compiled and stored on a server. It is downloaded to a Web browser to be executed, but the Java applet is completely separate from the HTML document. JavaScript, on the other hand, is an interpreted language that is run and executed by the Web browser and is intimately a part of the HTML document. The two languages are different and serve different purposes. They should not be confused.
JavaScript was created by Netscape in 1995 out of a need to make Web pages more dynamic. It was initially called LiveScript but the name was changed to JavaScript. It was first supported by the beta version of Netscape 2.0 in 1995. Microsoft subsequently added support for JavaScript to its Internet Explorer browser as well. JavaScript is fully integrated with HTML and Web browsers. As a result, a Web developer has almost complete access to and control over a Web browser and the HTML document. For example, using JavaScript, a Web developer can, among other things:
1. |
Respond to user events such as clicking a button or changing a value in a form field. |
2. |
Control Web browser features such as the URL window, status bar, the back/forward buttons, and the opening/closing of browser windows. |
3. |
Read and change the values in form fields. |
4. |
Change document properties such as background color. |
5. |
Swap images as the user passes the cursor over a certain area of a Web page. |
6. |
Send messages to the user. |
7. |
Set and read cookies (explained in further detail in Chapter 15, “Maintaining State with Cookies and Tables”). |
JavaScript code and HTML code are served by the Web server to the client and loaded into the browser. Thus, JavaScript code runs completely on the client. This can be used to your advantage in a number of ways. One example is with form validation. You can validate the data in the form on the client before sending it to the back-end to be processed. If you do not validate the data on the client and the user has entered invalid data, the following is a typical scenario of what happens when the “Submit” button is clicked by the user:
The data is sent via the network to the back-end process named in the ACTION attribute of the FORM tag.
An insert/update statement to the data in the database causes processes in the database to be initiated, rows locked for update, rollback memory allocated, and so on.
Since the data is invalid, constraints on allowable data cause a halt to the insert/update process.
An error message is generated upon attempting to insert/update the data.
This error message is captured and code is then executed to handle it.
An error message HTML page is generated.
This HTML page is served by the Web server to the client via the network.
Compare this to what happens when there is JavaScript validation in place. When the “Submit” button is clicked by the user:
A JavaScript function, already loaded in the browser, is called.
The data in the form is validated by the function. Depending on how the function has been written, validation can simply mean checking that data is entered in all required fields, that no illegal characters have been entered, and that the datatype is correct for each field, among other possible checks.
If the data is invalid, then a JavaScript message, in the form of a pop-up window, is displayed to the user. The user clicks “OK” on the message and corrects the data. There are no trips to the back-end database and no processes are initiated on the Web server or database server. Since everything takes place on the client, the response time is very fast.
 | You learn about form validation using JavaScript in detail in Chapter 14, “JavaScript Form Validation.” |