Internet & WWW How to program Chap.(6) JavaScript:Introduction to Scripting
Internet & WWW
How to program
Chap.(6)
JavaScript:Introduction to Scripting
Dr. Qusai Abuein 1
(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.
Dr. Qusai Abuein 2
(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 )
Dr. Qusai Abuein 3
(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 <head> section of the XHTML document.
• The JavaScript will execute before the <body> section, since the browser interprets the <head> section first.
• Later when describing inline scripting , we will see that
JavaScript code is written in the <body> section.
Dr. Qusai Abuein 4
(6.2) Simple Program
• The JavaScript is written within the
<script> and
</script> tags inside the XHTML document.
• A blank line separates the <script> tag from the other XHTML elements.
• The type attribute inside the <script> 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
<!-after the <script> tag is necessary, since older browsers do not support scripting. So that these browser ignore the script.
Dr. Qusai Abuein 5
(6.2) Simple Program
• The syntax of the <script> 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.
Dr. Qusai Abuein 6
(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 (<h1>), 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.
Dr. Qusai Abuein 7
(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.
Dr. Qusai Abuein 8
(6.2) Fig. 6.4
•
The example in Fig.6.4
uses the line break < br > tag to cause the browser to display multiple line .
Dr. Qusai Abuein 9
(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.
Dr. Qusai Abuein 10
(6.2) Fig. 6.6
•
The Fig. 6.6
contains several escape sequences.
•
\n
•
\t
•
\r
•
\\
•
\”
•
\’
Dr. Qusai Abuein 11
(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.
Dr. Qusai Abuein 12
(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 (/* */).
Dr. Qusai Abuein 13
(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.
Dr. Qusai Abuein 14
(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.
Dr. Qusai Abuein 15
(6.4) Memory concepts
•
Self study
Dr. Qusai Abuein 16
•
Self study
(6.5) Arithmetic
Dr. Qusai Abuein 17
(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
Dr. Qusai Abuein 18
End of Chap. (6)
Thank you .
Dr. Qusai Abuein 19