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

Chapter 13

JavaScript: Part I

The Web Warrior Guide to Web Design Technologies

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.


• 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.


• 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.


• 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).


• 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.


• 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.


• 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


• 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™.


• 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.


• 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.


• 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.


• 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;


• 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.


• 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.


• 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.


Abort 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 An element becomes active

Load A document or image loads

Understanding EventsMouseOut 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


• 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.


• 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.


• 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.


• 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.