Page 1 of 26 Javascript/Jscript Ch 7,8,9,10 Vadim Parizher Computer Science Department California State University, Northridge Spring 2003 Slides from text Book by Deitel, Deitel & Nieto These slides are only for use in connection with the CPMP 496ECT course Copying other than for private study strictly prohibitted © Same as the book

Page 2 of 26  JavaScript scripting language  Originally created by Netscape. Jscript is Microsoft’s version of JavaScript  Generates Dynamic HTML content by running “scripts”  Object-Oriented Concepts are Fundamental  Document, Window, Math, Form  Writing to the document object using html syntax renders dynamic text on browser  Get input from the window object or Form Object  Do math functions using math object Introduction

Page 3 of 26 Basics  Syntax for invoking methods in the object  object.method( “string”, “[additional arguments]” );  document.writeln( “ argument ” );  C like syntax  Uses the writeln method in the browser’s document object  … tag:  Encloses entire script  Attribute LANGUAGE = “JavaScript”

Page 4 of 26 Document Object Printing a Line with Multiple Statements document.write( " Welcome to " ); 10 document.writeln( "JavaScript Programming! " );

Page 5 of 26 Window Object window.alert( "Welcome to\nJavaScript\nProgramming!" ); Click Refresh (or Reload) to run this script again

Page 6 of 26 Windows, Documents and String handling Performing Comparisons var first, // first string entered by user 12 second; // second string entered by user // read first number from user as a string 15 first = window.prompt( "Enter first integer:", "0" ); // read second number from user as a string 18 second = window.prompt( "Enter second integer:", "0" ); document.writeln( " Comparison Results " ); 21 document.writeln( " " ); if ( first == second ) 24 document.writeln( " " + first + " == " + second + 25 " " ); if ( first != second ) 28 document.writeln( " " + first + " != " + second + 29 " " ); if ( first < second ) 32 document.writeln( " " + first + " < " + second +

Page 7 of 26 Windows, Documents and String handling 33 " " ); if ( first > second ) 36 document.writeln( " " + first + " > " + second + 37 " " ); if ( first <= second ) 40 document.writeln( " " + first + " <= " + second + 41 " " ); if ( first >= second ) 44 document.writeln( " " + first + " >= " + second + 45 " " ); // Display results 48 document.writeln( " " ); Click Refresh (or Reload) to run the script again 54 55

Page 8 of 26 Output If: First Integer = 123 Second Integer = 123 If: First Integer = 100 Second Integer = 200 If: First Integer = 200 Second Integer = 100

Page 9 of 26 JavaScript is Loosely Typed  JavaScript - loosely typed language  Does not require variable to have type before use in program (unlike other languages)  Variable can contain a value of any data type  JavaScript often converts between values of different types automatically  When declaring variables  If not given value, variable has undefined value  To indicate variable has no value, assign it null

Page 10 of 26 Math Object Compound Interest Calculating Compound Interest var amount, principal = , rate =.05; document.writeln( " " ); 12 document.writeln( " Year " ); 13 document.writeln( 14 " Amount on deposit " ); for ( var year = 1; year <= 10; ++year ) { 17 amount = principal * Math.pow( rate, year ); 18 document.writeln( " " + year + " " + 19 Math.round( amount * 100 ) / " " ); 20 } document.writeln( " " );

Page 11 of 26 Script Output

Page 12 of 26 Switch Statement Switching between HTML List Formats var choice, // user’s choice 10 startTag, // starting list item tag 11 endTag, // ending list item tag 12 validInput = true, // indicates if input is valid 13 listType; // list type as a string choice = window.prompt( "Select a list style:\n" + 16 "1 (bullet), 2 (numbered), 3 (lettered)", "1" ); switch ( choice ) { 19 case "1": 20 startTag = " "; 21 endTag = " "; 22 listType = " Bullet List " 23 break; 24 case "2": 25 startTag = " "; 26 endTag = " "; 27 listType = " Ordered List: Numbered " 28 break; 29 case "3": 30 startTag = " "; 31 endTag = " "; 32 listType = " Ordered List: Lettered "

Page 13 of 26 Switch Statement 33 break; 34 default: 35 validInput = false; 36 } if ( validInput == true ) { 39 document.writeln( listType + startTag ); for ( var i = 1; i <= 3; ++i ) 42 document.writeln( " List item " + i + " " ); document.writeln( endTag ); 45 } 46 else 47 document.writeln( "Invalid choice: " + choice ); Click Refresh (or Reload) to run the script again 53 54

Page 14 of 26 Switch Script Output User Input: 1 Script Output

Page 15 of 26 A Game of Chance - “CRAPS”  Rules of “craps”  Player rolls 2 dice (6 faces/die, range: 1-6)  Sum of spots on two upward faces calculate  If sum equals 7 or 11 – player wins  If sum equals 2, 3 or 12 on first throw (called “craps”) – player loses   If sum equals 4, 5, 6, 8, 9 or 10 on first throw – sum is players “point”  If game not over after first roll, player continues rolling  If rolls sum equal to his “point” – player wins  if rolls 7 before matching his “point” – player loses   Player continues rolling until game is over

Page 16 of 26 Input from Forms  Program can receive input from user through forms  GUI Form Setup using Form:  GUI is enclosed inside an HTML Form … tags  Every GUI output is defined with the INPUT element  Enter as many tags as needed Die Die Sum Point <INPUT TYPE = "button" VALUE = "Roll Dice" 94 ONCLICK = "play()"> 95 96

Page 17 of Die Die Sum Point <INPUT TYPE = "button" VALUE = "Roll Dice" 94 ONCLICK = "play()"> Form Event Handling  Clicking on GUI button element causes an action   Function indicated is executed when button clicked  Any user interaction with a GUI is called an event  Event handling – JavaScript execution in response to an event  GUI’s are located in the BODY of the HTML document

Page 18 of 26 Form Data output  Program can output results to a form  Within a function, write a statement in the following format: formName.InputName.value = Value to be output;  Outputing results to the Browser Status Bar  Print text by typing window.status = “text to be printed”;

Page 19 of Program that Simulates the Game of Craps // variables used to test the state of the game 10 var WON = 0, LOST = 1, CONTINUE_ROLLING = 2; // other variables used in program 13 var firstRoll = true, // true if first roll 14 sumOfDice = 0, // sum of the dice 15 myPoint = 0, // point if no win/loss on first roll 16 gameStatus = CONTINUE_ROLLING; // game not over yet // process one roll of the dice 19 function play() 20 { 21 if ( firstRoll ) { // first roll of the dice 22 sumOfDice = rollDice(); switch ( sumOfDice ) { 25 case 7: case 11: // win on first roll 26 gameStatus = WON; 27 craps.point.value = ""; // clear point field 28 break; 29 case 2: case 3: case 12: // lose on first roll 30 gameStatus = LOST; 31 craps.point.value = ""; // clear point field 32 break; 33 default: // remember point

Page 20 of gameStatus = CONTINUE_ROLLING; 35 myPoint = sumOfDice; 36 craps.point.value = myPoint; 37 firstRoll = false; 38 } 39 } 40 else { 41 sumOfDice = rollDice(); if ( sumOfDice == myPoint ) // win by making point 44 gameStatus = WON; 45 else 46 if ( sumOfDice == 7 ) // lose by rolling 7 47 gameStatus = LOST; 48 } if ( gameStatus == CONTINUE_ROLLING ) 51 window.status = "Roll again"; 52 else { 53 if ( gameStatus == WON ) 54 window.status = "Player wins. " + 55 "Click Roll Dice to play again."; 56 else 57 window.status = "Player loses. " + 58 "Click Roll Dice to play again."; firstRoll = true; 61 } 62 } // roll the dice 65 function rollDice() 66 {

Page 21 of var die1, die2, workSum; die1 = Math.floor( 1 + Math.random() * 6 ); 70 die2 = Math.floor( 1 + Math.random() * 6 ); 71 workSum = die1 + die2; craps.firstDie.value = die1; 74 craps.secondDie.value = die2; 75 craps.sum.value = workSum; return workSum; 78 } Die Die Sum Point <INPUT TYPE = "button" VALUE = "Roll Dice" 94 ONCLICK = "play()">

Page 22 of 26 Script Output 1 (player wins first roll)

Page 23 of 26 Script Output 2 (player loses first roll)

Page 24 of 26 Roll 1 Roll 2 Script Output 3 (player wins on second roll)

Page 25 of 26 Roll 1 Roll 2 Script Output 4 (player loses on second roll)

Page 26 of 26 Assignment - Javascript Problem Perform appropriate data validation (e.g. Don’t allow strings containing non-numeric characters). Submission: me the link. Due: Next meeting.