Web Design Chapter 4 Java Script Introduction o

Web Design Chapter 4: Java. Script

Introduction o The Java. Script we write will appear in the <head> section. o The browser interprets the contents of the <head> section first. o We use <script> tag to indicate to the browser that the text which follows is part of a script. o The syntax: <script type = “text/javascript” > <!- Script code here // - -> </script>

Document object o The document object allows a script programmer to specify text to display in the XHTML document. o The object’s methods use the attributes to provide useful services. Method or Property Description write( string ) Writes the string to the XHTML document as XHTML code. writeln( string ) Writes the string to the XHTML document as XHTML code and adds a newline character at the end. Object Method Argument Semicolon document. writeln(“<h 1>Welcome to Java. Script<h 1>”); Statement

Window Object o The window object represents an open window in a browser. Method or Property Description prompt(msg, default. Text) method displays a dialog box that prompts the visitor for input alert(message) The alert() method displays an alert box with a specified message and an OK button.

Escape sequence Description n Newline. Position the screen cursor at the beginning of the next line. t Horizontal tab. Move the screen cursor to the next tab stop. r Carriage return. Position the screen cursor to the beginning of the current line; do not advance to the next line. Any characters output after the carriage return overwrite the characters previously output on that line. Backslash. Used to represent a backslash character in a string. \ " ' Double quote. Used to represent a double quote character in a string contained in double quotes. For example, window. alert( ""in quotes"" ); displays "in quotes" in an alert dialog. Single quote. Used to represent a single quote character in a string. For example: window. alert( "'in quotes'" ); displays 'in quotes' in an alert dialog.

Variables o o o A named memory location where we can store data. Declared with the keyword var. Names are case sensitive. No special characters or spaces. Should MEAN something. A variable name can be any identifier consisting of an uppercase and lowercase ASCII letter, digits, dollar sign ($) and underscore ( _ ) that doesn’t begin with a digit and doesn’t contain any spaces.

Variables o Declaring a variable: q q Using a statement to create a variable var example. Variable; o Initializing a variable: q q q Assigning a specific value to it. Can be done when you declare the variable with assignment operator “=“ variable_name = value;

Variables o Can declare multiple variables using a single var keyword: q var customer. Name = "Don Gosselin", order. Quantity = 100, sales. Tax =. 05; o Can assign value of one variable to another q var sales. Total; var cur. Order = 40; sales. Total = cur. Order;

Dynamic Welcome Page o A script can adapt the content based on input from the user or other variables.

Dynamic Welcome Page This is the default value that appears when the dialog opens. This is the text field in which the user types the value. Prompt dialog displayed by the window object’s prompt method.

Adding Integers 1) Prompt user for two integers. 2) parse. Int q Converts its string argument to an integer. 3) Calculate the sum. Method or Property parse. Float( String ) parse. Int( String ) Description Parses a string and returns a floating point number Parses a string and returns an integer

JS Operators Arithmetic Assignment Increment and Decrement A + B A += B A ++ A - B A -= B ++ A A / B A /= B -- B A %= B B -- A * B A *= B

Precedence of operators Precedence Operator Associativity Type 1 () Left to right Parentheses 2 * Left to right Multiplicative 3 + Left to right Additive 4 < Left to right Relational 5 == != Left to right Equality 6 = Right to Left Assignment / % - <= > >=

Converting algebra to JS o Algebra: Java. Script: m = ( a + b + c + d + e ) / 5 ; o Algebra: y = mx + b Java. Script: y = m * x + b ;

Control structures o Control structures: q q q Sequence structure Selection structures: § if structure (single selection) § if/else structure (double selection) § switch structure (multiple selection) Repetition structures: § while structure. § do/while structure. § for structure.

if and if/else structures o Allows a program to make decision based on the truth or falsity of a condition. o Conditions can be formed by using the equality and relational operators. o Examples: q q if (student. Grade >= document. writeln( else document. writeln( 60 ) “Passed” ); “Failed” ); o Placing a semicolon immediately after the right parenthesis of the condition is a logic error. o Use braces { } to delimit a compound statements.

if structure example

Conditional operator (? : ) o It is closely related to the if/else structure. q q if (student. Grade >= 60 ) document. writeln( “Passed” ); else document. writeln( “Failed” ); document. writeln( student. Grade >= 60 ? “Passed” : “Failed” );

switch structure example

while structure example

for structure example

do/while structure example

break and continue statements

Program Modules in Java. Script o The format of function definition is: function-name (parameter-list ) { declarations and statements } o Function calls: n n n Name Left parenthesis Arguments separated by commas Constants, variables or expressions Right parenthesis o Examples: n n total += parse. Float( input. Value ); total += parse. Float( s 1 + s 2 );

Declaring and Allocating Arrays o Arrays in memory: n Operator new: q Allocates memory for objects q Dynamic memory allocation operator var c; c = new Array( 12 ); o Possible to declare and initialize in one step: n Initialized list var n = [ 10, 20, 30, 40, 50 ]; var n = new Array( 10, 20, 30, 40, 50 ); n Also possible to only initialize some values q Leave uninitialized elements blank q Uninitialized elements default to “undefined” var n = [ 10, 20, , 40, 50 ];

<? xml version = "1. 0"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd">   <html xmlns = "http: //www. w 3. org/1999/xhtml"> <head> <title>Sum the Elements of an Array</title> <script type = "text/javascript"> <!-function start() { var the. Array = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]; var total 1 = 0, total 2 = 0; for ( var i = 0; i < the. Array. length; i++ ) total 1 += the. Array[ i ]; document. writeln( "Total using subscripts: " + total 1 ); for ( var element in the. Array ) total 2 += the. Array[ element ]; document. writeln( " Total using for/in: " + total 2 ); } // --> </script> </head><body onload = "start()"></body> </html>

Building an Online Quiz Radio buttons Represented as an array Name of radio buttons is name of array One element per button checked property is true when selected XHTML Forms Contain controls, including radio buttons action property specifies what happens when submitted Can call Java. Script code

Methods of the String Object

Object Referencing o The simplest way to reference an element is by using the element’s id attribute. o The element is represented as an object, and its attributes become properties that can be manipulated by scripting.

Dynamic Styles o An element’s style can be changed dynamically.

Event onclick