1. Dr. Qusai Abuein1 Internet & WWW How to program Chap.(6) JavaScript:Introduction to Scripting

2. Dr. Qusai Abuein2 (6.1) Introduction This chapter introduces JavaScript scripting language. JavaScript facilitates a disciplined approach to designing computer programs that enhance the functionality and appearance. JavaScript has a high portability character. JavaScript is an object oriented language. It has an interpreter not a compiler. JavaScript introduces client-side scripting, which makes web pages more dynamic and interactive. It also provides the foundation for server-side scripting. JavaScript is best studied by examples.

3. Dr. Qusai Abuein3 (6.1) Introduction What do you need to start programming using JavaScript? –Web browser (contains the JavaScript Interpreter) IE for example Netscape Firefox –Text Editor to write the code of JavaScript. Notepad ( http://www.download.com/Notepad-/3000- 2352_4-10327521.html?tag=lst-2) Htmledit ( http://www.download.com/HTML-Editor/3000- 2048_4-10041591.html?tag=lst-2 )

4. Dr. Qusai Abuein4 (6.2) Simple Program This script or program displays a text in the body of the XHTML document.(note: XHTML document) The web browser contains a JavaScript interpreter, which processes the commands written in JavaScript. See Fig. 6.2: The JavaScript code appears in the section of the XHTML document. The JavaScript will execute before the section, since the browser interprets the section first. Later when describing inline scripting, we will see that JavaScript code is written in the section.

5. Dr. Qusai Abuein5 (6.2) Simple Program The JavaScript is written within the and tags inside the XHTML document. A blank line separates the tag from the other XHTML elements. The type attribute inside the tag specifies the type of the file as well as the scripting language used in the script. (in this case a text file written in javascript). Comment tag tag is necessary, since older browsers do not support scripting. So that these browser ignore the script.

6. Dr. Qusai Abuein6 (6.2) Simple Program The syntax of the is in page 200. The JavaScript single-line comment (//) before the ending comment delimiter --> is required by some browsers. Line 12 instructs the interpreter to perform an action. Line 12 uses the document object, which represents the XHTML document the browser is currently displaying.

7. Dr. Qusai Abuein7 (6.2) Simple Program The document is the object The writeln is the method A method may require arguments. The argument of writeln is the string(enclosed in either double or single quotations). The string might contain XHTML elements ( ), so the browser renders the string as h1-level XHTML heading. Every JavaScript statement should end with a semicolon (;). Note that JavaScript is a case sensitive.

8. Dr. Qusai Abuein8 (6.2) Fig. 6.3 The script in Fig. 6.3 uses the Cascading Style Sheet to display a text. The escape character (\) indicates that a special character is to be used in the string. So the Escape sequence (\”) is used to display the double quotes. Note that the difference between write and writeln does not appear in the browser, it appears in the XHTML document. A single statement can be split into two parts, simply by start typing in the second line. A string can not be split, to do so use the (+) operator to join two strings together.

9. Dr. Qusai Abuein9 (6.2) Fig. 6.4 The example in Fig.6.4 uses the line break tag to cause the browser to display multiple line.

10. Dr. Qusai Abuein10 (6.2) Fig. 6.5 This example uses the dialog boxes (windows pop up on the screen to display information to grab user’s attention). The example in Fig. 6.5 uses the alert dialog. window.alert(“text goes here”); The window is the object Alert is the method. The string is the argument. The alert window has the “ok” button only.

11. Dr. Qusai Abuein11 (6.2) Fig. 6.6 The Fig. 6.6 contains several escape sequences. \n \t \r \\ \” \’

12. Dr. Qusai Abuein12 (6.3) Prompt dialog The prompt dialog is used to obtain input from the user. Such web pages that use prompt dialogs are said to be dynamic (opposite to static), since the content has the ability to change. It also interacts with the user.

13. Dr. Qusai Abuein13 (6.3.1) Dynamic welcome page The format of the prompt dialog is as follows: var_name = window.prompt(“text”, “default value”); var is reserved word to define a variable. A variable is a location in the memory to store a value to be used by a program. All variables have a name, type and value and should be declared with a var statement before they are used in the program. Declarations can be split over several lines, a comma separates each variable from another. Single line comment (//), multi-line comment (/* */).

14. Dr. Qusai Abuein14 (6.3.1) Dynamic welcome page The prompt has the OK and Cancel buttons. Pressing OK takes the value entered by the user (even if it is blank) Pressing Cancel takes the value (NULL). The value is assigned to the variable name that lies in the left side of the assignment operator (=). The (+) operator can convert other value types into string if necessary. Fig. 6.7 uses prompt to display a dynamic welcome page.

15. Dr. Qusai Abuein15 (6.3.2) Adding integers The example in Fig.6.9 uses the prompt to obtain numbers from the user and ads them, then displays the result. Note that if the user enters a string, then an error occurs, since the interpreter does not check. The entered string is converted into integer using the Function parseInt. If Cancel is pressed or a string is entered then the result of the parseInt is a NaN error means Not a Number. The (+) operator here is the addition operator.

16. Dr. Qusai Abuein16 (6.4) Memory concepts Self study

17. Dr. Qusai Abuein17 (6.5) Arithmetic Self study

18. Dr. Qusai Abuein18 (6.6) Decision Making The example in Fig.6.17 uses the if statement and describe the logical operators. It also introduces the Date object and some of its methods (getHours()). –now = new Date(); –hour = now.getHours(); According to the user’s machine date, the example display the right greeting: –Good morning –Good afternoon –Good evening

19. Dr. Qusai Abuein19 Endof Chap. (6) Thank you.