2 6 Welcome to JavaScript Programming!" ); // --> 20 The script tag indicates to the browser that the text which follows is part of a script. welcome.html Program Output The document object’s writeln method writes a line of XHTML markup in the XHTML document."> 2 6 Welcome to JavaScript Programming!" ); // --> 20 The script tag indicates to the browser that the text which follows is part of a script. welcome.html Program Output The document object’s writeln method writes a line of XHTML markup in the XHTML document.">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

Chapter 7 - JavaScript: Introduction to Scripting

Published byAnja Salonen Modified over 5 years ago

Similar presentations

Presentation on theme: "Chapter 7 - JavaScript: Introduction to Scripting"— Presentation transcript:

1 Chapter 7 - JavaScript: Introduction to Scripting
Outline 7.1 Introduction 7.2 Simple Program: Printing a Line of Text in a Web Page 7.3 Another JavaScript Program: Adding Integers 7.4 Memory Concepts 7.5 Arithmetic 7.6 Decision Making: Equality and Relational Operators 7.7 JavaScript Internet and World Wide Web Resources

2 welcome.html Program Output
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 7.1: welcome.html --> 6 <!-- Displaying a line of text --> 7 8 <html xmlns = " <head> <title>A First Program in JavaScript</title> 11 <script type = "text/javascript"> <!-- document.writeln( "<h1>Welcome to JavaScript Programming!</h1>" ); // --> </script> 18 </head><body></body> 20 </html> The script tag indicates to the browser that the text which follows is part of a script. welcome.html Program Output The document object’s writeln method writes a line of XHTML markup in the XHTML document.

3 Welcome2.html Program Output
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 7.2: welcome2.html > 6 <!-- Printing a Line with Multiple Statements --> 7 8 <html xmlns = " <head> <title>Printing a Line with Multiple Statements</title> 11 <script type = "text/javascript"> <!-- document.write( "<h1 style = \"color: magenta\">" ); document.write( "Welcome to JavaScript " + "Programming!</h1>" ); // --> </script> 19 </head><body></body> 21 </html> Welcome2.html Program Output Using the style attribute, the color of the text is changed from black to magenta. The escape sequence \” places a quote in the string and is not displayed in the browser.

4 Welcome3.html Program Output
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 7.3: welcome3.html --> 6 <!-- Printing Multiple Lines --> 7 8 <html xmlns = " <head><title>Printing Multiple Lines</title> 10 <script type = "text/javascript"> <!-- document.writeln( "<h1>Welcome to<br />JavaScript" + "<br />Programming!</h1>" ); // --> </script> 17 </head><body></body> 19 </html> Welcome3.html Program Output Using break tags, the text is displayed as three lines.

5 The window method alert displays an alert dialog to the user.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 7.4: welcome4.html > 6 <!-- Printing multiple lines in a dialog box --> 7 8 <html xmlns = " <head><title>Printing Multiple Lines in a Dialog Box</title> 10 <script type = "text/javascript"> <!-- window.alert( "Welcome to\nJavaScript\nProgramming!" ); // --> </script> 16 </head> 18 <body> <p>Click Refresh (or Reload) to run this script again.</p> </body> 22 </html> Welcome4.html The window method alert displays an alert dialog to the user. When the alert dialog displays, the string passed as its one argument is displayed. The escape sequence \n is the newline character that places all remaining text on the next line.

6 Program Output Title bar The dialog is The OK button
automatically sized allows the user to to accommodate dismiss (or hide) the string. the dialog. Mouse cursor

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

8 The second argument is the default value for the text field.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 7.6: Addition.html --> 6 <!-- Addition Program > 7 8 <html xmlns = " <head> <title>An Addition Program</title> 11 <script type = "text/javascript"> <!-- var firstNumber, // first string entered by user secondNumber, // second string entered by user number1, // first number to add number2, // second number to add sum; // sum of number1 and number2 19 // read in first number from user as a string firstNumber = window.prompt( "Enter first integer", "0" ); 23 // read in second number from user as a string secondNumber = window.prompt( "Enter second integer", "0" ); 27 // convert numbers from strings to integers number1 = parseInt( firstNumber ); number2 = parseInt( secondNumber ); 31 // add the numbers sum = number1 + number2; 34 Addition.html The window method prompt displays a prompt dialog in the browser with a message and a text field for input. The first argument passed to method prompt is the message to be displayed. The second argument is the default value for the text field. Function parseInt converts its string argument to an integer. The + operator adds the two numbers input by the user.

9 Addition.html Program Output
// display the results document.writeln( "<h1>The sum is " + sum + "</h1>" ); // --> </script> 39 </head> <body> <p>Click Refresh (or Reload) to run the script again</p> </body> 44 </html> Addition.html Program Output

10 7.3 Another JavaScript Program: Adding Integers
This is the prompt to the user. When the user clicks OK , the This is the text value typed field in which by the user is the user types returned to the value. the program as a string. The program must convert This is the default value if the the string to a user does not enter a number. number. Fig. 7.7 Prompt dialog displayed by the window object’s prompt method.

11 7.4 Memory Concepts Fig. 7.8 Memory location showing the name and value of variable number1. Fig. 7.9 Memory locations after values for variables number1 and number2 have been input.

12 7.5 Arithmetic Fig Memory locations after calculating the sum of number1 and number2.

13 7.5 Arithmetic

14 7.6 Decision Making: Equality and Relational Operators
Fig Order in which a second-degree polynomial is evaluated.

15 7.6 Decision Making: Equality and Relational Operators

16 Two prompt dialogs retrieve user input.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 7.14: comparison.html > 6 <!-- Using if statements, relational operators --> 7 <!-- and equality operators > 8 9 <html xmlns = " <head> <title>Performing Comparisons</title> 12 <script type = "text/javascript"> <!-- var first, // first string entered by user second, // second string entered by user number1, // first number to compare number2; // second number to compare 19 // read first number from user as a string first = window.prompt( "Enter first integer:", "0" ); 22 // read second number from user as a string second = window.prompt( "Enter second integer:", "0" ); 25 // convert numbers from strings to integers number1 = parseInt( first ); number2 = parseInt( second ); 29 document.writeln( "<h1>Comparison Results</h1>" ); document.writeln( "<table border = \"1\" width = \"100%\">" ); 33 Comparison.html Two prompt dialogs retrieve user input.

17 if ( number1 == number2 ) document.writeln( "<tr><td>" + number1 + " == " + number2 + "</td></tr>" ); 37 if ( number1 != number2 ) document.writeln( "<tr><td>" + number1 + " != " + number2 + "</td></TR>" ); 41 if ( number1 < number2 ) document.writeln( "<tr><td>" + number1 + " < " + number2 + "</td></tr>" ); 45 if ( number1 > number2 ) document.writeln( "<tr><td>" + number1 + " > " + number2 + "</td></tr>" ); 49 if ( number1 <= number2 ) document.writeln( "<tr><td>" + number1 + " <= " + number2 + "</td></tr>" ); 53 if ( number1 >= number2 ) document.writeln( "<tr><td>" + number1 + " >= " + number2 + "</td></tr>" ); 57 // Display results document.writeln( "</table>" ); // --> </script> 62 </head> <body> <p>Click Refresh (or Reload) to run the script again</p> </body> 67 </html> Each if statement uses the equality operators to determine the relationship of the two integers input by the user. Comparison.html

18 Program Output

19 Program Output

20 Program Output

21 7.6 Decision Making: Equality and Relational Operators

Download ppt "Chapter 7 - JavaScript: Introduction to Scripting"

Similar presentations

Chapter 7 JavaScript: Introduction to Scripting. Outline Simple Programs Objects and Variables Obtaining User Input with prompt Dialogs – –Dynamic Welcome.

Chapter 7 JavaScript: Introduction to Scripting. Outline Simple Programs Objects and Variables Obtaining User Input with prompt Dialogs – –Dynamic Welcome.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
The Web Warrior Guide to Web Design Technologies

The Web Warrior Guide to Web Design Technologies
Page 1 of 26 Javascript/Jscript Ch 7,8,9,10 Vadim Parizher Computer Science Department California State University, Northridge Spring 2003 Slides from.

Page 1 of 26 Javascript/Jscript Ch 7,8,9,10 Vadim Parizher Computer Science Department California State University, Northridge Spring 2003 Slides from.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic JavaScript: Introduction to Scripting.

Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic JavaScript: Introduction to Scripting.
1 Outline 13.1Introduction 13.2A Simple Program: Printing a Line of Text in a Web Page 13.3Another JavaScript Program: Adding Integers 13.4Memory Concepts.

1 Outline 13.1Introduction 13.2A Simple Program: Printing a Line of Text in a Web Page 13.3Another JavaScript Program: Adding Integers 13.4Memory Concepts.
 2008 Pearson Education, Inc. All rights reserved. 1 6 6 JavaScript: Introduction to Scripting.

 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
Introduction to scripting

Introduction to scripting
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 8 - JavaScript: Control Structures I Outline 8.1 Introduction 8.2 Algorithms 8.3 Pseudocode 8.4.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 8 - JavaScript: Control Structures I Outline 8.1 Introduction 8.2 Algorithms 8.3 Pseudocode 8.4.
JavaScript: Control Structures September 27, 2005 Slides modified from Internet & World Wide Web: How to Program. 2004 (3rd) edition. By Deitel, Deitel,

JavaScript: Control Structures September 27, 2005 Slides modified from Internet & World Wide Web: How to Program (3rd) edition. By Deitel, Deitel,
 2004 Prentice Hall, Inc. All rights reserved. Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.

 2004 Prentice Hall, Inc. All rights reserved. Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
WEB DESIGN AND PROGRAMMING Introduction to Javascript.

WEB DESIGN AND PROGRAMMING Introduction to Javascript.
 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1.

 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
Internet & World Wide Web How to Program, 5/e ©1992-2012 by Pearson Education, Inc. All Rights Reserved.

Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 10 - JavaScript: Functions Outline 10.1 Introduction 10.2 Program Modules in JavaScript 10.3.

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 10 - JavaScript: Functions Outline 10.1 Introduction 10.2 Program Modules in JavaScript 10.3.
 2008 Pearson Education, Inc. All rights reserved. 1 6 6 JavaScript: Introduction to Scripting.

 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
1 Introduction to C# Programming Console applications No visual components Only text output Two types MS-DOS prompt - Used in Windows 95/98/ME Command.

1 Introduction to C# Programming Console applications No visual components Only text output Two types MS-DOS prompt - Used in Windows 95/98/ME Command.
 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1.

 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1.
Ch 6: JavaScript Introduction to scripting part 2.

Ch 6: JavaScript Introduction to scripting part 2.

Similar presentations

Ads by Google