Embed Size (px)
Citation preview
Dr. Qusai Abuein 1
Internet & WWWHow to program
Chap.(6)
JavaScript:Introduction to Scripting
Dr. Qusai Abuein 2
(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 3
(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 4
(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 5
(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 6
(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 7
(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 8
(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 9
(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 10
(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 11
(6.2) Fig. 6.6
• The Fig. 6.6 contains several escape sequences.
• \n
• \t
• \r
• \\
• \”
• \’
Dr. Qusai Abuein 12
(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 13
(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 14
(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 15
(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 16
(6.4) Memory concepts
• Self study
Dr. Qusai Abuein 17
(6.5) Arithmetic
• Self study
Dr. Qusai Abuein 18
(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 19
End of Chap. (6)
Thank you .
