1. 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

2. 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

3. 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”

4. Page 4 of 26 Document Object 1 2 3 4 5 6 Printing a Line with Multiple Statements 7 8 9 document.write( " Welcome to " ); 10 document.writeln( "JavaScript Programming! " ); 11 12 13 14

5. Page 5 of 26 Window Object 1 2 3 4 5 6 7 8 9 window.alert( "Welcome to\nJavaScript\nProgramming!" ); 10 11 12 13 14 15 Click Refresh (or Reload) to run this script again. 16 17

6. Page 6 of 26 Windows, Documents and String handling 1 2 3 4 5 6 7 8 Performing Comparisons 9 10 11 var first, // first string entered by user 12 second; // second string entered by user 13 14 // read first number from user as a string 15 first = window.prompt( "Enter first integer:", "0" ); 16 17 // read second number from user as a string 18 second = window.prompt( "Enter second integer:", "0" ); 19 20 document.writeln( " Comparison Results " ); 21 document.writeln( " " ); 22 23 if ( first == second ) 24 document.writeln( " " + first + " == " + second + 25 " " ); 26 27 if ( first != second ) 28 document.writeln( " " + first + " != " + second + 29 " " ); 30 31 if ( first < second ) 32 document.writeln( " " + first + " < " + second +

7. Page 7 of 26 Windows, Documents and String handling 33 " " ); 34 35 if ( first > second ) 36 document.writeln( " " + first + " > " + second + 37 " " ); 38 39 if ( first <= second ) 40 document.writeln( " " + first + " <= " + second + 41 " " ); 42 43 if ( first >= second ) 44 document.writeln( " " + first + " >= " + second + 45 " " ); 46 47 // Display results 48 document.writeln( " " ); 49 50 51 52 53 Click Refresh (or Reload) to run the script again 54 55

8. 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

9. 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

10. Page 10 of 26 Math Object Compound Interest 1 2 3 4 5 6 Calculating Compound Interest 7 8 9 var amount, principal = 1000.0, rate =.05; 10 11 document.writeln( " " ); 12 document.writeln( " Year " ); 13 document.writeln( 14 " Amount on deposit " ); 15 16 for ( var year = 1; year <= 10; ++year ) { 17 amount = principal * Math.pow( 1.0 + rate, year ); 18 document.writeln( " " + year + " " + 19 Math.round( amount * 100 ) / 100 + " " ); 20 } 21 22 document.writeln( " " ); 23 24 25 26

11. Page 11 of 26 Script Output

12. Page 12 of 26 Switch Statement 1 2 3 4 5 6 Switching between HTML List Formats 7 8 9 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 14 15 choice = window.prompt( "Select a list style:\n" + 16 "1 (bullet), 2 (numbered), 3 (lettered)", "1" ); 17 18 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 "

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

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

15. 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

16. 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 83 84 85 Die 1 86 87 Die 2 88 89 Sum 90 91 Point 92 93 <INPUT TYPE = "button" VALUE = "Roll Dice" 94 ONCLICK = "play()"> 95 96

17. Page 17 of 26 83 84 85 Die 1 86 87 Die 2 88 89 Sum 90 91 Point 92 93 <INPUT TYPE = "button" VALUE = "Roll Dice" 94 ONCLICK = "play()"> 95 96 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

18. 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”;

19. Page 19 of 26 1 2 3 4 5 6 Program that Simulates the Game of Craps 7 8 9 // variables used to test the state of the game 10 var WON = 0, LOST = 1, CONTINUE_ROLLING = 2; 11 12 // 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 17 18 // process one roll of the dice 19 function play() 20 { 21 if ( firstRoll ) { // first roll of the dice 22 sumOfDice = rollDice(); 23 24 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

20. Page 20 of 26 34 gameStatus = CONTINUE_ROLLING; 35 myPoint = sumOfDice; 36 craps.point.value = myPoint; 37 firstRoll = false; 38 } 39 } 40 else { 41 sumOfDice = rollDice(); 42 43 if ( sumOfDice == myPoint ) // win by making point 44 gameStatus = WON; 45 else 46 if ( sumOfDice == 7 ) // lose by rolling 7 47 gameStatus = LOST; 48 } 49 50 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."; 59 60 firstRoll = true; 61 } 62 } 63 64 // roll the dice 65 function rollDice() 66 {

21. Page 21 of 26 67 var die1, die2, workSum; 68 69 die1 = Math.floor( 1 + Math.random() * 6 ); 70 die2 = Math.floor( 1 + Math.random() * 6 ); 71 workSum = die1 + die2; 72 73 craps.firstDie.value = die1; 74 craps.secondDie.value = die2; 75 craps.sum.value = workSum; 76 77 return workSum; 78 } 79 80 81 82 83 84 85 Die 1 86 87 Die 2 88 89 Sum 90 91 Point 92 93 <INPUT TYPE = "button" VALUE = "Roll Dice" 94 ONCLICK = "play()"> 95 96 97 98

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

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

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

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

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