The Web Warrior Guide to Web Design Technologies Chapter 13 JavaScript: Part I

Objectives In this chapter you will: Learn about the JavaScript programming language Add JavaScript to an HTML document Work with variables Define and call functions Learn about events

Introduction Documents created using basic HTML are static. JavaScript programming language was developed by Netscape. JavaScript makes Web pages dynamic. JavaScript code can allow Web pages to interact with the user through forms and controls.

The JavaScript Programming Language JavaScript is a scripting language. Scripting language refers to programming languages that are executed by an interpreter from within a Web browser. A scripting engine is an interpreter that is part of the Web browser. A Web browser that contains a scripting engine is called a scripting host.

The JavaScript Programming Language Navigator and Internet Explorer are examples of scripting hosts. JavaScript was first introduced in navigator. The Microsoft version of JavaScript is called JScript and was released in Internet Explorer 4.0. ECMAScript is the international and standardized version of JavaScript.

Adding JavaScript to an HTML Document JavaScript programs run from within an HTML document. The <script> element contains the JavaScript statements. The language attribute of the <script> element tells the browser which language and which version of the language are being used.

Adding JavaScript to an HTML Document JavaScript is an object-oriented programming language. An object is code and data that can be treated as an individual unit or component. Individual lines in a programming language are called statements.

Adding JavaScript to an HTML Document A collection of statements forms a procedure (also called a method). A collection of methods forms an object. The Document object represents the content of a browser’s window. write() and writeln() are methods of the Document object and are used to create new text on a Web page.

Adding JavaScript to an HTML Document To execute an object’s method, place the object first, then a period, and finally the method name with its parameters between parentheses. Executing a method is also referred to as calling the method. When calling a method, the information passed to the method is called argument(s).

Adding JavaScript to an HTML Document A text string is a string contained within double quotation marks. The text string (or string literal) must be on a single line. The writeln() method adds a carriage return after the line of text. In order to use carriage returns with the writeln() method, the method must be within a <pre> element.

Adding JavaScript to an HTML Document JavaScript is case-sensitive. JavaScript code can be saved in a source file that can be executed from an HTML document. JavaScript source files have the extension .js To access JavaScript code that is saved in an external file, use the src attribute of the <script> element.

Adding JavaScript to an HTML Document JavaScript source files cannot include HTML tags. Some reasons to store code in a .js file instead of an HTML document: The HTML document will be neater The JavaScript code can be shared among multiple HTML documents JavaScript source files hide JavaScript code from incompatible browsers

Adding JavaScript to an HTML Document JavaScript supports two types of comments: line comments and block comments. Line comments are created by adding // before the text to be commented. Block comments use /* and */. Anything between /* and */ is part of the comment. Comments in JavaScript use the same syntax as comments created in C++ and Java™.

Adding JavaScript to an HTML Document JavaScript is not compatible with all browsers. There are two ways to handle incompatible browsers: Move the JavaScript code into a source file Enclose the code within a <script>…</script> tag pair in an HTML comment block.

Adding JavaScript to an HTML Document HTML comments are included within <!- - and - -> Only JavaScript comment tags can be used to hide JavaScript code from the interpreter. Use the <noscript> element to display a message to tell the user that his or her browser is not compatible with the JavaScript code.

Adding JavaScript to an HTML Document JavaScript code can be placed in the HTML document’s head section or its body section. It is preferred that you place the code in the head section because the head is rendered before the body.

Working with Variables A variable is a value that the program stores in computer memory. An identifier is a name assigned to a variable. Identifiers must begin with an uppercase or a lowercase ASCII letter, a dollar sign, or an underscore. Identifiers can include numbers but not as the first character. Reserved words are special words that are part of the JavaScript syntax.

Working with Variables Variable names cannot include spaces. Use the following syntax to declare a variable: var amount; Use the following syntax to declare and initialize a variable: var amount = 100;

Working with Variables Assigning a value to a variable when it is declared is optional. Arithmetic can be performed on variables that contain numeric values.

Working with Functions Functions must be contained within the <script>…<script> tag pair. Function definition: Function name_of_function (parameters) { statements; } A parameter is a variable that will be used within a function.

Working with Functions Functions do not have to contain parameters. Function statements are placed between the opening and closing braces. Semicolons separate statements. To execute a function, it must be called from elsewhere in the program. The function call consists of the function name followed by parentheses that contain the values to be assigned to the function arguments.

Working with Functions Put functions within the head section, and the calls to the functions within the body section. Functions return values using the return statement. Users are not required to return a value from a function.

Understanding Events An event is a specific circumstance that is monitored by JavaScript. JavaScript events are used to allow the user to interact with a Web page. Examples of JavaScript events: Abort, Blur, Click, Change, Error, Focus, Load, Select, and Submit.

Understanding Events Abort Blur Click Change Error Focus Load The loading of an image is interrupted Blur An element becomes active Click The user clicks an element once Change The value of an element changes Error An error occurs when a document or image is being loaded Focus Load A document or image loads

Understanding Events MouseOut MouseOver Reset Select Submit Unload The mouse moves off an element MouseOver The mouse moves over an element Reset A form’s fields are reset to its default values Select A user selects a field on a form Submit A user submits a form Unload A document unloads

Understanding Events The <input> tag is a commonly used HTML tag that allows users to generate events. The <input> tag has several attributes, including the type attribute. The type attribute is a required field and determines the kind of input field that the tag generates. An event handler is the code that executes in response to a specific event.

Understanding Events Event handler names are the same name as the name of the event itself with a prefix of “on” (like onLoad). The alert() method displays a pop-up dialog box with an OK button. The prompt() method asks the user for input that gets assigned to a variable.

Understanding Events When you are not satisfied with a specific event, your override that event with your own code. The MouseOver event occurs when a mouse is moved over a link. MouseOut occurs when the mouse is moved off a link. The status property allows a message to appear in the status bar.

Understanding Events JavaScript also includes a defaultStatus property that can be used within a <script>…</script> tag pair to specify the default text that appears in the status bar whenever the mouse is not positioned over a link.

Summary The term “scripting language” refers to programming languages that are executed by an interpreter from within a Web browser. The international, standardized version of JavaScript is called ECMAScript. The <script> tag is used to notify the Web browser that the commands that follow it need to be interpreted by a scripting engine. Comments are nonprinting lines that contain various kinds of remarks. To hide embedded JavaScript code from incompatible browsers, enclose the code between the <script>...</script> tag pair in an HTML comment block. In an HTML document with multiple JavaScript code sections, each section is executed in the order in which it appears.

Summary The values a program stores in computer memory are commonly called variables. The name you assign to a variable is called an identifier. Reserved words, which are also called keywords, are special words that are part of the JavaScript language syntax. In JavaScript programming, you can write your own procedures, called functions, which are similar to the methods associated with an object. Within an HTML document, the lines that compose a function are called the function definition. A parameter is a variable that will be used within a function.

Summary To execute a function, you must invoke, or call, it from elsewhere in your program. The call to a function is referred to as a function call. Sending arguments (variables or values) to the parameters of a called function is referred to as passing arguments. A return statement returns a value to the statement that called the function. An event is a specific circumstance that is monitored by JavaScript. Code that executes in response to a specific event is called an event handler.