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

Slides:



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

/ 251 Internet Applications Ahmed M. Zeki Sem – / Chapter 8.
 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
Lecture 2 Introduction to C Programming
Introduction to C Programming
 2005 Pearson Education, Inc. All rights reserved Introduction.
1 Chapter 2 Introduction to Java Applications Introduction Java application programming Display ____________________ Obtain information from the.
 2000 Prentice Hall, Inc. All rights reserved. Chapter 2 - Introduction to C Programming Outline 2.1Introduction 2.2A Simple C Program: Printing a Line.
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.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
Chapter 2 - Introduction to Java Applications
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.
JavaScript: Control Structures September 27, 2005 Slides modified from Internet & World Wide Web: How to Program (3rd) edition. By Deitel, Deitel,
 2003 Prentice Hall, Inc. All rights reserved. 1 Introduction to C++ Programming Outline Introduction to C++ Programming A Simple Program: Printing a.
 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.
 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1.
Ch 6: JavaScript Introduction to scripting part 2.
© Copyright 1992–2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. Chapter 2 Chapter 2 - Introduction to C Programming.
 2000 Prentice Hall, Inc. All rights reserved. 1 Chapter 2 - Introduction to Java Applications Outline 2.1Introduction 2.2A Simple Program: Printing a.
 Pearson Education, Inc. All rights reserved Introduction to Java Applications.
 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.
Dr. Qusai Abuein1 Internet & WWW How to program Chap.(6) JavaScript:Introduction to Scripting.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
 2000 Deitel & Associates, Inc. All rights reserved. Outline 8.1Introduction 8.2A Simple Program: Printing a Line of Text in a Web Page 8.3Another JavaScript.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
JavaScript 1 COE 201- Computer Proficiency. Introduction JavaScript scripting language ▫Originally created by Netscape ▫Facilitates disciplined approach.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
Part:2.  Keywords are words with special meaning in JavaScript  Keyword var ◦ Used to declare the names of variables ◦ A variable is a location in the.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 3 – Introduction to C# Programming Outline 3.1 Introduction 3.2 Simple Program: Printing a Line.
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.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
© Copyright 1992–2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Chapter 2 - Introduction to C Programming Outline.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
 2003 Prentice Hall, Inc. All rights reserved Basics of a Typical C++ Environment C++ systems –Program-development environment –Language –C++
REEM ALMOTIRI Information Technology Department Majmaah University.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
1 Lecture 2 - Introduction to C Programming Outline 2.1Introduction 2.2A Simple C Program: Printing a Line of Text 2.3Another Simple C Program: Adding.
 2001 Prentice Hall, Inc. All rights reserved. Outline 1 JavaScript.
© 2010 Robert K. Moniot1 Chapter 6 Introduction to JavaScript.
Chapter 6 JavaScript: Introduction to Scripting
JavaScript: Introduction to Scripting
Chapter 13 - JavaScript/JScript: Introduction to Scripting
Introduction to Scripting
Chapter 7 - JavaScript: Introduction to Scripting
JavaScript: Introduction to Scripting
WEB PROGRAMMING JavaScript.
Chapter 2 - Introduction to Java Applications
JavaScript: Introduction to Scripting
Chapter 3 – Introduction to C# Programming
JavaScript: Introduction to Scripting
Chapter 7 - JavaScript: Introduction to Scripting
JavaScript: Introduction to Scripting
Chapter 7 - JavaScript: Introduction to Scripting
Chapter 7 - JavaScript: Introduction to Scripting
JavaScript: Introduction to Scripting
Chapter 7 - JavaScript: Introduction to Scripting
Presentation transcript:

 2001 Prentice Hall, Inc. All rights reserved. 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

 2001 Prentice Hall, Inc. All rights reserved. 2 JavaScript scripting language –Originally created by Netscape –Facilitates disciplined approach to designing computer programs –Enhances functionality and appearance of Web pages Jscript –Microsoft’s version of JavaScript

 2001 Prentice Hall, Inc. All rights reserved. 3 Browser includes JavaScript Interpreter –Processes JavaScript commands Whitespace –Blank lines, space characters, tab characters –Generally ignored by browser –Used for readability and clarity … tag: –Encloses entire script –Attribute type = “text/javascript” Indicates scripting language (JavaScript default in IE5 & Netscape) –Attribute LANGUAGE=“JavaScript” is an old style

 2001 Prentice Hall, Inc. All rights reserved. 4 document.writeln( “ string ” ); –Case-sensitive, like all JavaScript functions –Uses the writeln method in the browser’s document object –Prints the string, which can consist of any text and HTML tags –String must be surrounded by quotation marks ( “…” ) Correct method call syntax: –object.method( “string”, “[additional arguments]” ); Statement terminators –All statements must end with semi-colons ( ; ) A Simple Program: Printing a Line of Text in a Web Page

 2001 Prentice Hall, Inc. All rights reserved. Outline 5 welcome.html Program Output 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " A First Program in JavaScript <!-- 14 document.writeln( 15 " Welcome to JavaScript Programming! " ); 16 // --> The document object’s writeln method writes a line of XHTML markup in the XHTML document. The script tag indicates to the browser that the text which follows is part of a script.

 2001 Prentice Hall, Inc. All rights reserved. Outline 6 Welcome2.html Program Output 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " Printing a Line with Multiple Statements <!-- 14 document.write( " " ); 15 document.write( "Welcome to JavaScript " + 16 "Programming! " ); 17 // --> 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.

 2001 Prentice Hall, Inc. All rights reserved. 7 How your browser translates? JavaScript Interpreter execute JavaScript code Browser renders HTML page HTML page with JavaScript page with HTML code only Rendered page

 2001 Prentice Hall, Inc. All rights reserved. 8 writeln() vs. write() Object: document methods: –writeln Positions output cursor on next line when finished –write Leaves the output cursor where it is when done executing –Both begin output where previous statement stopped –Line breaks inserted in two ways: document.writeln( “Have a Nice Day!” )

 2001 Prentice Hall, Inc. All rights reserved. Outline 9 Welcome3.html Program Output 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " Printing Multiple Lines <!-- 13 document.writeln( " Welcome to JavaScript" + 14 " Programming! " ); 15 // --> Using break tags, the text is displayed as three lines.

 2001 Prentice Hall, Inc. All rights reserved. Outline 10 Welcome4.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " Printing Multiple Lines in a Dialog Box <!-- 13 window.alert( "Welcome to\nJavaScript\nProgramming!" ); 14 // --> Click Refresh (or Reload) to run this script again 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.

 2001 Prentice Hall, Inc. All rights reserved. 11 window object Methods in window object –Call on-screen windows –window.alert( “argument” ); Method calls alert window with window text " argument" Outputs button with text and ‘ OK’ button –window.prompt(“”); Prompts user for string (discussed later) Scripts restart when page reloaded/refreshed

 2001 Prentice Hall, Inc. All rights reserved. 12 Reload /Refresh Scripts restart when page reloaded/refreshed.

 2001 Prentice Hall, Inc. All rights reserved. Outline 13 Program Output The OK button allows the user to dismiss (or hide) the dialog. Title bar The dialog is automatically sized to accommodate the string. Mouse cursor

 2001 Prentice Hall, Inc. All rights reserved Simple Program: Printing a Line of Text in a Web Page

 2001 Prentice Hall, Inc. All rights reserved. 15 Variables –Location in memory where values are stored –Variable name can be any valid identifier Identifier = series of characters –Letters, digits, underscores (‘ _ ’) and dollar signs (‘ $ ’) –Cannot begin with a digit Valid identifiers: Welcome, $value, _value, m_inputField1, C3PO and R2D2 Invalid identifiers: 7button, Say\Hello and field#5 –Identifiers are case-sensitive Variables

 2001 Prentice Hall, Inc. All rights reserved. 16 Variable name convention –Begin with lowercase first letter –Every following word has first letter capitalized goRedSox, bostonUniversityRules Declarations –var name1, name2 –Indicate that name1 and name2 are program variables

 2001 Prentice Hall, Inc. All rights reserved. 17 Method window.prompt( “arg1”, “arg2” ) Calls window that allows user to enter value to use in the script arg1 : text that will appear in window arg2 : text that will initially appear in input line firstNumber = window.prompt(); Assigns value entered by the user in prompt window to variable firstNumber " =" a binary operator Assigns value of right operand to left operand window.prompt()

 2001 Prentice Hall, Inc. All rights reserved. 18 Good programmers write many comments –Helps other programmers decode script –Aids debugging –Comment Syntax: One-line comment: // [text] Multi-line comment: /* [text] */ comments

 2001 Prentice Hall, Inc. All rights reserved. 19 parseInt(); –Function accepts a string and returns an integer value Not a method because we do not refer to an object name number1 = parseInt( firstNumber ); –Operates right-to-left (due to the "=" sign) parseInt()

 2001 Prentice Hall, Inc. All rights reserved. 20 sum = number1 + number2; –Adds number1 and number2 –Assigns result to variable sum String concatenation: –Combines string and another data type Other data type can be another string –Example: If age = 20, document.writeln( “I am ” + age + “years old!” ); Prints: I am 20 years old! + as addition and String concatenation operator

 2001 Prentice Hall, Inc. All rights reserved. Outline 21 Addition.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " An Addition Program <!-- 14 var firstNumber, // first string entered by user 15 secondNumber, // second string entered by user 16 number1, // first number to add 17 number2, // second number to add 18 sum; // sum of number1 and number // read in first number from user as a string 21 firstNumber = 22 window.prompt( "Enter first integer", "0" ); // read in second number from user as a string 25 secondNumber = 26 window.prompt( "Enter second integer", "0" ); // convert numbers from strings to integers 29 number1 = parseInt( firstNumber ); 30 number2 = parseInt( secondNumber ); // add the numbers 33 sum = number1 + number2; 34 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.

 2001 Prentice Hall, Inc. All rights reserved. Outline 22 Addition.html Program Output 35 // display the results 36 document.writeln( " The sum is " + sum + " " ); 37 // --> Click Refresh (or Reload) to run the script again 43 44

 2001 Prentice Hall, Inc. All rights reserved Another JavaScript Program: Adding Integers When the user clicksOK, the value typed by the user is returned to the program as a string. The program must convert the string to a number. This is the text field in which the user types the value. This is the prompt to the user. This is the default value if the user does not enter a number. Fig. 7.7Prompt dialog displayed by the window object’s prompt method.

 2001 Prentice Hall, Inc. All rights reserved Memory Concepts Fig. 7.8Memory location showing the name and value of variable number1. Fig. 7.9Memory locations after values for variables number1 and number2 have been input.

 2001 Prentice Hall, Inc. All rights reserved. 25 Variables & Memory Concepts Variables: –Name corresponds to location in memory –Have 3 attributes: Name Type Value Memory –When a value assigned to a variable, it overwrites any previous value –Reading values is non-destructive sum = number1 + number2 Does not change number1 or number2

 2001 Prentice Hall, Inc. All rights reserved Arithmetic Fig. 7.10Memory locations after calculating the sum of number1 and number2.

 2001 Prentice Hall, Inc. All rights reserved. 27 Binary Operators –Used in arithmetic operations Modulus operator ( % ) –Yields remainder after division –Examples: 43 % 5 = % 3.4 = % 6 = 0 Operators

 2001 Prentice Hall, Inc. All rights reserved Arithmetic

 2001 Prentice Hall, Inc. All rights reserved. 29 Arithmetic

 2001 Prentice Hall, Inc. All rights reserved. 30 operator precedence Arithmetic operations –Operate right to left (like the ‘ = ’ sign) Rules of operator precedence –Operations execute in a specific order

 2001 Prentice Hall, Inc. All rights reserved. 31 Order of evaluation Step 1. Step 2. Step 3. Step 4. Step 5. Step 6.

 2001 Prentice Hall, Inc. All rights reserved. 32 if structure: –Program makes decision based on truth or falsity of condition If condition met (true) –Statement(s) in body of if structure executed If condition not met (false) –Statement(s) in body of if structure skipped Format: if (condition) { statement; (additional statements); } Semi-colon (‘ ; ’) –Do not place after condition –Place after every statement in body of structure Decision Making: Equality and Relational Operators

 2001 Prentice Hall, Inc. All rights reserved. 33 Equality and Relational Operators Equality and Relational Operators:

 2001 Prentice Hall, Inc. All rights reserved. 34 Operator precedance Fig. 7.13Order in which a second-degree polynomial is evaluated.

 2001 Prentice Hall, Inc. All rights reserved Decision Making: Equality and Relational Operators

 2001 Prentice Hall, Inc. All rights reserved. Outline 36 Comparison.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " Performing Comparisons <!-- 15 var first, // first string entered by user 16 second, // second string entered by user 17 number1, // first number to compare 18 number2; // second number to compare // read first number from user as a string 21 first = window.prompt( "Enter first integer:", "0" ); // read second number from user as a string 24 second = window.prompt( "Enter second integer:", "0" ); // convert numbers from strings to integers 27 number1 = parseInt( first ); 28 number2 = parseInt( second ); document.writeln( " Comparison Results " ); 31 document.writeln( 32 " " ); 33 Two prompt dialogs retrieve user input.

 2001 Prentice Hall, Inc. All rights reserved. Outline 37 Comparison.html 34 if ( number1 == number2 ) 35 document.writeln( " " + number1 + " == " + 36 number2 + " " ); if ( number1 != number2 ) 39 document.writeln( " " + number1 + " != " + 40 number2 + " " ); if ( number1 < number2 ) 43 document.writeln( " " + number1 + " < " + 44 number2 + " " ); if ( number1 > number2 ) 47 document.writeln( " " + number1 + " > " + 48 number2 + " " ); if ( number1 <= number2 ) 51 document.writeln( " " + number1 + " <= " + 52 number2 + " " ); if ( number1 >= number2 ) 55 document.writeln( " " + number1 + " >= " + 56 number2 + " " ); // Display results 59 document.writeln( " " ); 60 // --> Click Refresh (or Reload) to run the script again Each if statement uses the equality operators to determine the relationship of the two integers input by the user.

 2001 Prentice Hall, Inc. All rights reserved. 38 If: First Integer = 123 Second Integer = 123 If: First Integer = 100 Second Integer = 200 If: First Integer = 200 Second Integer = 100

 2001 Prentice Hall, Inc. All rights reserved. Outline 39 Program Output

 2001 Prentice Hall, Inc. All rights reserved. Outline 40 Program Output

 2001 Prentice Hall, Inc. All rights reserved. Outline 41 Program Output

 2001 Prentice Hall, Inc. All rights reserved Decision Making: Equality and Relational Operators