2001 Prentice Hall, Inc. All rights reserved. Outline 1 JavaScript
2001 Prentice Hall, Inc. All rights reserved. 2 Data Types Numeric –var first = 23; String –var second = “ some words”; Boolean –var third = true; Null –var fourth = second ;
2001 Prentice Hall, Inc. All rights reserved. 3 Mathematical Functions random( ) –Returns pseudorandom between 0 and 1 round( ) –Returns the result of rounding its arguments to the nearest integer. sqrt(value ) –Returns the square root of the value.
2001 Prentice Hall, Inc. All rights reserved. 4 Global Methods paresFloat(string) –It parses a string, passed as an argument, and returns it as a floating point number. parseInt(string) –It parses a string, passed as an argument, and returns integer.
2001 Prentice Hall, Inc. All rights reserved. 5 Arrays Creating Arrays: –Arrays can be constructed in three different ways. e.g. var days = [“Monday”, “Tuesday”, “Thursday”]; var days = new array(“Monday”, “Tuesday”, “Thursday”); var days = new array(4);
2001 Prentice Hall, Inc. All rights reserved. 6 Arrays Adding an element to an Array: 1.var data = [“Monday”, “Tuesday”, 34, 76,“Thursday”]; 2.data[5] = “Thursday”; 3.data[23] = 48; Accessing array Member: var len = data.length Searching an Array: for(var count=0; count < len; count++)\ { if( data[count] = = “Thursay” }
2001 Prentice Hall, Inc. All rights reserved. 7 JavaScript Scripting language used in browsers: not ‘full’ programming language. Becoming more standardized, but still discrepancies between versions. Provides some computation, manipulation of display, customization (Repeat commercial for follow-on courses: Creating Dynamic Web Documents & Creating Databases for the Web)
2001 Prentice Hall, Inc. All rights reserved. 8 Location of JavaScript Mostly in the head section of HTML file, use script tags and then enclose in comments <!-- document.write("Hello World!"); //--> Some JavaScript would be in the body, generally inside or tags. These are often calls to functions.
2001 Prentice Hall, Inc. All rights reserved. 9 Elements of JavaScript Typical programming elements: –variables, operators, expressions, statements, definition of functions Connection to Web –Document Object Model = names of ‘things’, properties, methods (e.g., document.write) –events (e.g., onSubmit, onMouseOver)
2001 Prentice Hall, Inc. All rights reserved. 10 Variable … is something that holds a value, a value being a string of characters, a number, a set of things (such as strings or numbers). Examples: –5 –2.50 –"Purchase College" –"bird.gif"
2001 Prentice Hall, Inc. All rights reserved. 11 Statements Programs ‘flow’ from statement to statement Simple statements –Assignment (setting the value of a variable) –calls to procedures Certain statements are compound statements, with the statements ‘inside’ operating depending on certain rules –Loops, conditionals (If, switch) Punctuation (brackets, semicolons) can be tricky!
2001 Prentice Hall, Inc. All rights reserved. Outline 12 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 13 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. Outline 14 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 15 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. Outline 16 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. 17 Simple Program: Printing a Line of Text in a Web Page
2001 Prentice Hall, Inc. All rights reserved. Outline 18 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 19 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. 20 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. 21 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. 22 Arithmetic Fig. 7.10Memory locations after calculating the sum of number1 and number2.
2001 Prentice Hall, Inc. All rights reserved. 23 Arithmetic
2001 Prentice Hall, Inc. All rights reserved. 24 Decision Making: Equality and Relational Operators
2001 Prentice Hall, Inc. All rights reserved. Outline 25 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 26 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. Outline 27 Program Output
2001 Prentice Hall, Inc. All rights reserved. Outline 28 Program Output
2001 Prentice Hall, Inc. All rights reserved. Outline 29 Program Output