Scribd
Upload
3 views32 pages

Javascript

learn basiv javascript

Uploaded by

Shatria Kaniputra
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
3 views32 pages

Javascript

learn basiv javascript

Uploaded by

Shatria Kaniputra
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd

Chapter 7 - JavaScript: Introduction to Scripting

Outline
7.1 7.2 7.3 Introduction Simple Program: Printing a Line of Text in a Web Page Obtaining User Input with prompt Dialogs 7.3.1 Dynamic Welcome Page 7.3.2 Adding Integers Memory Concepts Arithmetic Decision Making: Equality and Relational Operators Web Resources

7.4 7.5 7.6 7.7

2004 Prentice Hall, Inc. All rights reserved.

Objectives In this lesson, you will learn:


To be able to write simple JavaScript programs. To be able to use input and output statements. To understand basic memory concepts. To be able to use arithmetic operators. To understand the precedence of arithmetic operators. To be able to write decision-making statements. To be able to use relational and equality operators.

2004 Prentice Hall, Inc. All rights reserved.

7.1 Introduction JavaScript scripting language


Enhances functionality and appearance Client-side scripting
Makes pages more dynamic and interactive

Foundation for complex server-side scripting Program development Program control

2004 Prentice Hall, Inc. All rights reserved.

7.2 Simple Program: Printing a Line of Text in a Web Page Inline scripting
Written in the <body> of a document <script> tag
Indicate that the text is part of a script type attribute Specifies the type of file and the scripting language use writeln method Write a line in the document Escape character ( \ ) Indicates special character is used in the string alert method Dialog box

2004 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[Link] <!-- Fig. 7.1: [Link] -->

Outline
[Link] (1 of 1)

<!-- Displaying a line of text --> <html xmlns = "[Link] <head> <title>A First Program in JavaScript</title> <script type = "text/javascript"> <!-[Link]( "<h1>Welcome to JavaScript Programming!</h1>" ); // --> </script> </head><body></body>

20 </html>

2004 Prentice Hall, Inc.


All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[Link] <!-- Fig. 7.2: [Link] -->

Outline
[Link] (1 of 1)

<!-- Printing a Line with Multiple Statements --> <html xmlns = "[Link] <head> <title>Printing a Line with Multiple Statements</title> <script type = "text/javascript"> <!-[Link]( "<h1 style = \"color: magenta\">" ); [Link]( "Welcome to JavaScript " + "Programming!</h1>" ); // --> </script> </head><body></body>

21 </html>

2004 Prentice Hall, Inc.


All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[Link] <!-- Fig. 7.3: [Link] <!-- Printing Multiple Lines --> -->

Outline
[Link] 1 of 1

<html xmlns = "[Link] <head><title>Printing Multiple Lines</title> <script type = "text/javascript"> <!-[Link]( "<h1>Welcome to<br />JavaScript" + "<br />Programming!</h1>" ); // --> </script> </head><body></body>

19 </html>

2004 Prentice Hall, Inc.


All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[Link] <!-- Fig. 7.4: [Link] -->

Outline
[Link] 1 of 1

<!-- Printing multiple lines in a dialog box --> <html xmlns = "[Link] <head><title>Printing Multiple Lines in a Dialog Box</title> <script type = "text/javascript"> <!-[Link]( "Welcome to\nJavaScript\nProgramming!" ); // --> </script> </head> <body> <p>Click Refresh (or Reload) to run this script again.</p> </body>

22 </html>

2004 Prentice Hall, Inc.


All rights reserved.

2004 Prentice Hall, Inc. All rights reserved.

7.2 Simple Program: Printing a Line of Text in a Web Page


Escape sequence
\n \t \r

Description Newline. Position the screen cursor at the beginning of the next line. Horizontal tab. Move the screen cursor to the next tab stop. Carriage return. Position the screen cursor to the beginning of the current line; do not advance to the next line. Any characters output after the carriage return overwrite the characters previously output on that line. Backslash. Used to represent a backslash character in a string. Double quote. Used to represent a double quote character in a string contained in double quotes. For example,
[Link]( "\"in quotes\"" ); displays "in quotes" in an alert dialog.

\\ \"

\'

Single quote. Used to represent a single quote character in a string. For example,
[Link]( '\'in quotes\'' ); displays 'in quotes' in an alert dialog.

Fig. 7.5 Some common escape sequences.

2004 Prentice Hall, Inc. All rights reserved.

7.3.1 Dynamic Welcome Page A script can adapt the content based on input from the user or other variables

2004 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[Link] <!-- Fig. 7.6: [Link] --> <!-- Using Prompt Boxes -->

Outline
[Link] (1 of 2)

<html xmlns = "[Link] <head> <title>Using Prompt and Alert Boxes</title> <script type = "text/javascript"> <!-var name; // string entered by the user // read the name from the prompt box as a string name = [Link]( "Please enter your name", "GalAnt" ); [Link]( "<h1>Hello, " + name + ", welcome to JavaScript programming!</h1>" ); // --> </script>

2004 Prentice Hall, Inc.


All rights reserved.

23 24 25 26 27 28 <body> <p>Click Refresh (or Reload) to run this script again.</p> </body> </head>

Outline
[Link] (2 of 2)

29 </html>

2004 Prentice Hall, Inc.


All rights reserved.

7.3.1 Dynamic Welcome Page


When the user clicks OK, the value typed by the user is returned to the program as a string. This is the prompt to the user.

This is the default value that appears when the dialog opens.

This is the text field in which the user types the value.

Fig. 7.7

Prompt dialog displayed by the window objects prompt method.

2004 Prentice Hall, Inc. All rights reserved.

7.3.2 Adding Integers Prompt user for two integers and calculate the sum (Fig. 7.8) NaN (not a number)
parseInt
Converts its string argument to an integer

2004 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[Link] <!-- Fig. 7.8: [Link] --> <!-- Addition Program -->

Outline
[Link] (1 of 2)

<html xmlns = "[Link] <head> <title>An Addition Program</title> <script type = "text/javascript"> <!-var firstNumber, secondNumber, number1, number2, sum; // first string entered by user // second string entered by user // first number to add // second number to add // sum of number1 and number2

// read in first number from user as a string firstNumber = [Link]( "Enter first integer", "0" );

2004 Prentice Hall, Inc.


All rights reserved.

24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

// read in second number from user as a string secondNumber = [Link]( "Enter second integer", "0" ); // convert numbers from strings to integers number1 = parseInt( firstNumber ); number2 = parseInt( secondNumber ); // add the numbers sum = number1 + number2; // display the results [Link]( "<h1>The sum is " + sum + "</h1>" ); // --> </script> </head> <body> <p>Click Refresh (or Reload) to run the script again</p> </body>

Outline
[Link] (2 of 2)

44 </html>

2004 Prentice Hall, Inc.


All rights reserved.

2004 Prentice Hall, Inc. All rights reserved.

7.4 Memory Concepts Variable names correspond to locations in the computers memory Every variable has a name, a type, and a value Read value from a memory location
nondestructive

2004 Prentice Hall, Inc. All rights reserved.

7.4 Memory Concepts

number1

45

Fig. 7.9

Memory location showing the name and value of variable number1.

2004 Prentice Hall, Inc. All rights reserved.

7.4 Memory Concepts

number1 number2

45 72

Fig. 7.10

Memory locations after values for variables number1 and number2 have been input.

2004 Prentice Hall, Inc. All rights reserved.

7.4 Memory Concepts

number1

45

number2
sum
Fig. 7.11

72
117

Memory locations after calculating the sum of number1 and number2.

2004 Prentice Hall, Inc. All rights reserved.

7.5 Arithmetic Many scripts perform arithmetic calculations


Expressions in JavaScript must be written in straight-line form

2004 Prentice Hall, Inc. All rights reserved.

7.5 Arithmetic
JavaScript operation Addition Subtraction Multiplication Division Arithmetic operator
+ * /

Algebraic expression f+7 pc bm x / y or r mod s

JavaScript expression
f + 7 p - c b * m x / y r % s

x -- or y

xy

% Remainder Fig. 7.12 Arithmetic operators.

Operation(s) Order of evaluation (precedence) Multiplication Evaluated second. If there are several such Division operations, they are evaluated from left to right. Modulus + or Addition Evaluated last. If there are several such operations, Subtraction they are evaluated from left to right. Fig. 7.13 Precedence of arithmetic operators.

Operator(s) *, / or %

2004 Prentice Hall, Inc. All rights reserved.

7.5 Arithmetic
Step 1. y = 2 * 5 * 5 + 3 * 5 + 7;

2 * 5 is 10

(Leftmost multiplication)

Step 2. y = 10 * 5 + 3 * 5 + 7; 10 * 5 is 50 (Leftmost multiplication)

Step 3. y = 50 + 3 * 5 + 7; 3 * 5 is 15 (Multiplication before addition)

Step 4. y = 50 + 15 + 7; 50 + 15 is 65 (Leftmost addition)

Step 5. y = 65 + 7; 65 + 7 is 72 (Last addition) (Last operationplace 72 into y )

Step 6. y = 72;
Fig. 7.14

Order in which a second-degree polynomial is evaluated.

2004 Prentice Hall, Inc. All rights reserved.

7.6 Decision Making: Equality and Relational Operators Decision based on the truth or falsity of a condition
Equality operators Relational operators

2004 Prentice Hall, Inc. All rights reserved.

7.6 Decision Making: Equality and Relational Operators


Standard algebraic equality operator or relational operator Equality operators = ? Relational operators > < JavaScript equality Sample or relational JavaScript operator condition == != > < >= <= x == y x != y x > y x < y x >= y x <= y Meaning of JavaScript condition x is equal to y x is not equal to y x is greater than y x is less than y x is greater than or equal to y x is less than or equal to y

Fig. 7.15 Equality and relational operators.

2004 Prentice Hall, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[Link] <!-- Fig. 7.16: [Link] -->

Outline
[Link] (1 of 3)

<!-- Using Relational Operators --> <html xmlns = "[Link] <head> <title>Using Relational Operators</title> <script type = "text/javascript"> <!-var name, // string entered by the user now = new Date(), // current date and time hour = [Link](); // current hour (0-23) // read the name from the prompt box as a string name = [Link]( "Please enter your name", "GalAnt" ); // determine whether it is morning if ( hour < 12 ) [Link]( "<h1>Good Morning, " );

2004 Prentice Hall, Inc.


All rights reserved.

25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

// determine whether the time is PM if ( hour >= 12 ) { // convert to a 12 hour clock hour = hour - 12; // determine whether it is before 6 PM if ( hour < 6 ) [Link]( "<h1>Good Afternoon, " ); // determine whether it is after 6 PM if ( hour >= 6 ) [Link]( "<h1>Good Evening, " ); } [Link]( name + ", welcome to JavaScript programming!</h1>" ); // --> </script> </head>

Outline
[Link] (2 of 3)

2004 Prentice Hall, Inc.


All rights reserved.

47 48 49 50

<body> <p>Click Refresh (or Reload) to run this script again.</p> </body> </html>

Outline
[Link] (3 of 3)

2004 Prentice Hall, Inc.


All rights reserved.

7.6 Decision Making: Equality and Relational Operators


Operators Associativity Type * / % left to right multiplicative + left to right additive < <= > >= left to right relational == != left to right equality = right to left assignment Fig. 7.17 Precedence and associativity of the operators discussed so far.

2004 Prentice Hall, Inc. All rights reserved.

Excercises 1. Write a script that reads five integers and determines and outputs XHTML text that displays the largest integer and the smallest integer in the group. 2. Write a script that reads an integer and determines and outputs XHTML text that displays whether it is odd or even. 3. Write a script that reads in two integers and determines and outputs XHTML text that displays whether the first is a multiple of the second.
2004 Prentice Hall, Inc. All rights reserved.

You might also like