Chapter 8 JavaScript/JScript: Introduction to Scripting Outline

Chapter 8 - JavaScript/JScript: Introduction to Scripting

• Outline

• 8.1 Introduction

• 8.2 A Simple Program: Printing a Line of Text in a

• Web Page

• 8.3 Another JavaScript Program: Adding Integers

• 8.4 Memory Concepts

• 8.5 Arithmetic

• 8.6 Decision Making: Equality and

• Relational Operators

• 8.7 JavaScript Internet and World Wide Web Resources

8.1 Introduction

• 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

8.2 A Simple Program: Printing a Line of Text in a Web Page

• 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 LANGUAGE=“JavaScript”
• Indicates scripting language (JavaScript default in IE5 & Netscape)
• Tag must be closed at the end of the script

8.2 A Simple Program: Printing a Line of Text in a Web Page (II)

• Correct method call syntax:

• object.method( “string”, “[additional arguments]” );

• document.writeln( “

  >argumentH1>” );

• 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 (“…”)

• Statement terminators

• All statements must end with semi-colons (;)

• 1.1 Open scripting area

• 2.1 Call writeln method

• 2.2 Give arguments

• 2.3 Execute statement

• 2.4 Close scripting area

• 5.1 Close HTML document

• 1.1 Call first statement

• 1.2 Execute statement

• 1.3 Call second statement

• 1.4 Execute statement

8.2 A Simple Program: Printing a Line of Text in a Web Page (III)

• 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!” )
• document.writeln( “Have a\nNice Day!” )

• 1.1 Call writeln method

• 1.2 Format text inside argument as desired

• 1.3 Execute statement

8.2 A Simple Program: Printing a Line of Text in a Web Page (IV)

• 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

• 1.1 Call window.alert(); method

• 2.1 Give instructions for script restart

8.2 A Simple Program: Printing a Line of Text in a Web Page (IV)

8.3 Another JavaScript Program: Adding Integers

• 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

8.3 Another JavaScript Program: Adding Integers (II)

• 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

8.3 Another JavaScript Program: Adding Integers (III)

• 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 first
• "=" a binary operator
• Assigns value of right operand to left operand

8.3 Another JavaScript Program: Adding Integers (IV)

• Good programmers write many comments

• Helps other programmers decode script
• Aids debugging
• Comment Syntax:
• One-line comment: // [text]
• Multi-line comment: /* [text] */

• 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)

8.3 Another JavaScript Program: Adding Integers (V)

• 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!

• 1.1 Declare strings

• 1.2 Insert comments

• 2.1 Prompt for strings & store values

• 3.1 Convert strings to integers

• 3.2 Calculate sum of variables

• 4.1 Display result (concatenate strings)

User Input:

• User Input:

8.4 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

8.5 Arithmetic

• Binary Operators

• Used in arithmetic operations

• Modulus operator (%)

• Yields remainder after division
• Examples:
• 43 % 5 = 3
• 8.7 % 3.4 = 1.9
• 24 % 6 = 0

8.5 Arithmetic (II)

8.5 Arithmetic (III)

• Arithmetic operations

• Operate right to left (like the ‘=’ sign)

• Rules of operator precedence

• Operations execute in a specific order

8.5 Arithmetic (IV)

8.5 Decision Making: Equality and Relational Operators

• if structure:

• Program makes decision based on truth or falsity of condition
• If condition met (true)
• Statement(s) in body of structure executed
• If condition not met (false)
• Statement(s) in body of structure skipped

• Format:

• if (condition) {
• statement;
• (additional statements);
• }
• Semi-colon (‘;’)
• Do not place after condition
• Place after every statement in body of structure

8.5 Decision Making: Equality and Relational Operators (II)

• 1.1 Initialize variables

• 2.1 Prompt for values

• 2.2 Initialize table

• 3.1 Execute if structures

• 3.2 Complete if structures

• 4.1 Display results