The Web Warrior Guide to Web Design Technologies

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

18. 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;

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

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

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

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

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

24. Understanding Events

25. Understanding Events

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

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

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

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

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

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

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