WEB TECHNOLOGY CS 345 Learning Objectives Objectives of

WEB TECHNOLOGY CS 345

Learning Objectives • Objectives of this chapter are: –Learn how Java. Script stores data, how a document is structured in Java. Script –Learn event-based programming with Java. Script. –Learn how Java. Script is event driven and how user actions are tracked –See and analyze some concrete examples with Java. Script.

Outline Variable , Identifiers and their types The notion of objects Arrays Control Structures – Condition and selection – Iteration • Procedure and functions • Event Based Programming with Java. Script • •

Variables • A variable in Java. Script has a type: –number (integer or non integer) –String –Boolean –Null • Java. Script is not strongly typed.

Declaring Variables • The first time a variable is used it must be declared with the keyword ‘var’. • var identifier = value; • The identifier must start with a letter or underscore ‘_’ and can have as many characters as necessary (letters, digits, underscore). • Javascript is sensitive to capital letters. • myvariable is different from My. Variable and x X

Type conversion on the fly • Because Java. Script is not strongly typed, it is possible to: –Change the type of a variable; –Do operations on variables of different types. –The major type, or default type, is string.

Variable Example <HTML> <HEAD> <TITLE>My First Java Script with variables</TITLE> <script language="Java. Script"> <!– hide script var my. Number=35; var my. String="2004"; var my. Other. String=“CMPUT 410"; var my. Addition = my. Number+my. Number; var my. Concatenation = my. Styring + my. Other. String; var my. Error = my. Number + my. Other. String; var my. Calculation = my. Number + my. String; var my. Dream = my. Other. String + my. String; // end of hide --> </script> </HEAD>

Example (cont. . ) <BODY> <script language="Java. Script">  </script> </BODY> </HTML>

Java. Script & Concept of Objects • Java. Script is not an object-oriented language. • Java. Script is an object-based language. • There are many pre-defined objects, but programmers can define their own objects. • An object has attributes (specific properties) as well as methods (behaviour of objects). • An attribute could be a value or recursively another object.

Java. Script & Concept of Objects

Access Object Properties • my. Object. one. Property • Object Name. Attributre Name • If the attribute is also an object, to access the property of the attribute’s attribute: –my. Object. one. Property. a. Property. Of. Property –Ex: Book. Editor. Address document. My. Form. Name. value

Access Object Methods my. Object. one. Method(parameters) Object Name. Method Name ( parameters ) If there are no parameters: my. Object. one. Method() Ex: document. write(“Hello!”)

Predefined Object Classes • There are many intrinsic pre-defined objects in Java. Script: –Date –String –Math –Window –Document –Navigator –History –Location –Form etc… • These objects have their pre-defined attributes and methods.

Object Date • The object Date needs to be instantiated with the keyword new. var today= new date(); • The class Date doesn’t have properties but the following methods: • get. Date() • get. Day() • get. Hours() • get. Minutes() • get. Month() • get. Seconds() • get. Time(); • get. Timezone. Offset() • get. Year() • set. Date() • set. Hours() • set. Minutes() • set. Month() • get. Seconds() • set. Time(); • set. Year()

Example Date <HTML> <HEAD> <TITLE>My test with dates</TITLE><script language="Java. Script"> var this. Is. Now=new Date(); var Birth. Date = new Date(60, 05, 18); </script></HEAD> <BODY> <script language="Java. Script"> document. write(“Today we are the: "+this. Is. Now+"<BR>"); document. write(“Alfred’s birthdate is the "+ Birth. Date +"<BR>"); document. write(“The date: "+ Birth. Date. get. Date()+ "/" + (Birth. Date. get. Month()+1) + "/" + (Birth. Date. get. Year()+1900)+"<BR>"); document. write(“The time now is: " + this. Is. Now. get. Hours() + ": " + this. Is. Now. get. Minutes() + ": " + this. Is. Now. get. Seconds()+"<BR>"); this. Is. Now. set. Year(2010); document. write(“The new date in the future is: "+ this. Is. Now); </script></BODY></HTML>

The Object String • Where we define a string constant or a string variable, Java. Script creates an instance of an object String. • The object String has one property, lenght, and many methods: • anchor() • big() • blink() • bold() • fontcolor() • fontsize() • italics(); • small() • sub() • sup() astring. anchor(anchor)@<A name=“anchor”>astring</A> astring. big()@<BIG>astring</BIG> astring. bink()@<BLINK>astring</BLINK> astring. bold()@<BOLD>astring</BOLD> astring. fontcolor(#FF 0000)@<FONT color=“#FF 0000”>astring</FONT> astring. fontsize(5)@<FONT size=5>astring</FONT> astring. italics() @<I>astring</I> astring. small()@<SMALL>astring</SMALL> astring. sub() @<SUB>astring</SUB> astring. sup() @<SUP>astring</SUP>

The Object String • Other methods for the String object: • link() • to. Upper. Case() • to. Lower. Case() • substring() • index. Of() • char. At() astring. to. Upper. Case() converts into uppercase astring. to. Lower. Case() converts into lowercase astring. substring(3, 5) substring from 3 rd character to 5 th. astring. index. Of(an. Other) returns the position of an. Other in astring. char. At(4) returns the 4 th character. The index in a string starts at 0.

Example String <HTML> <HEAD> <TITLE>My test with strings</TITLE> <script language="Java. Script"> var my. String=prompt(“Give me a phrase", “I am at school"); </script> </HEAD><BODY> <script language="Java. Script"> document. write(my. String+"<BR>"); document. write(my. String. bold()+"<BR>"); document. write(my. String. italics()+"<BR>"); document. write(my. String. fontcolor("red"). blink()+"<BR>"); document. write(my. String. link("http: //www. cnn. com")+"<BR>"); document. write(my. String +"<BR>"); </script> </BODY></HTML>

The Object Math • The class Math contains common constants such as: • Math. PI and Math. E which respectively return • 3. 1415926535897931 and 2. 718284590451 • Some useful methods: • abs() • log() • acos() • max() • cos() • min() • asin() • pow() • sin() • random() • atan() • round() • tan(); • sqrt(); • exp() • floor()

The Object Window • Java. Script provides by default an object window representing the current window. This object is the root of the hierarchy describing the Java. Script objects. • This object has many properties: • default. Status • frames • length • name • parent • self • status • top • window default message displayed on the status bar set of frames displayed by the browser number of frames present in the parent window name of the window parent window active window message displayed on the status bar top of the object hierarchy defined by the browser active window

Methods of Window Object • alert() • confirm() • prompt() • clear() • open() • close() (modal) window to display a message. (modal) window for selection. (modal) window to enter a value. clears the window content. opens a new window. closes the current window.

Condition and Selection if - then - else if (condition) instruction; if (condition) { instruction 1; instruction 2; … } if (condition 1) {instructions 1; } else if (condition 2) {instructions 2; } else if (condition 3) {instructions 3; } else if (condition 4) {instructions 4; } …. else {other. Instructions; } if (condition) instruction; else Other. Instruction; if (condition) { instruction 1; instruction 2; … } else { instruction. A; instruction. B; … }

Logical Operators • Conjunction: –And && –example: (price>=200 && member==true) • Disjunction –Or || –example: (age>26 || total==1000) • Negation –Not ! –example: (!finale && !(numbre==50))

Example <HTML> <HEAD><TITLE>Example with Condition</TITLE></HEAD> <BODY> <SCRIPT LANGUAGE="Java. Script"> var color=prompt(“What is your favorite colour? "); if (color. to. Upper. Case() == “BLUE") alert(“Great! Me too. "); else alert(“That is ugly!"); </SCRIPT> </BODY> </HTML>

while loop

Example <HTML> <HEAD><TITLE>quiz</TITLE> <SCRIPT LANGUAGE="Java. Script"> var now = new Date(); var x = now. get. Seconds(); var answer=prompt(“guess the seconds"); </SCRIPT></HEAD><BODY> <SCRIPT LANGUAGE="Java. Script"> while (answer!= x) { document. write(answer +" "); if (x< answer) alert(“Too big"); else alert(“Too small"); answer =prompt(" guess the seconds "); } document. write("Bravo!"); </SCRIPT></BODY></HTML>

for loop

Example <html> <head><title>Factorials</title></head> <body> <h 1>Factorials from 1 to 9</h 1> <script language = "Java. Script"> <! -- hide me for (i=1, fact=1; i<10; i++, fact=fact *i) { document. write (i + "! = " + fact); document. write (" "); } // end hiding --> </script> </body> </html>

Functions and Procedures • Functions and procedures, also called subroutines, are fundamental in Java. Script programming. • A subroutine is a set of instructions semantically linked. • Grouping instructions in subroutines avoids rewriting the instructions. If there is an update, it suffices to make the change once in the subroutine.

Document Object Model (DOM) • Now that we know what a Java. Script object is and we know how to open a window, it is time to learn about the document object model. • Java. Script includes predefined objects such as window. These objects have predefined properties and methods. • An object property can also be an object.

Document Object Model (DOM)

Example • History contains the list of all visited URL during the current session. <HTML> <HEAD><TITLE>My test with history</TITLE></HEAD> <BODY> <SCRIPT LANGUAGE="Java. Script"> document. write(“Number of URL="+window. history. length); </SCRIPT><FORM> <INPUT TYPE=button VALUE="Back" on. Click="window. history. back(); return true; "> <INPUT TYPE=button VALUE=“Back 3 pages" on. Click="window. history. go(-3); return true; "> </FORM> </BODY></HTML>

Arrays • Variables can contain numbers, strings, and object references. There is also another type of information that Java. Script can manipulate: Arrays. var products = new Array(“car”, “truck”, “bike”); product[0] product[1] product[2] product. length

Arrays-Example <HTML> <HEAD> <TITLE>test with arrays</TITLE> <SCRIPT LANGUAGE="Java. Script"> var colours=new Array("red", "blue", "green", "white"); </SCRIPT> </HEAD> <BODY> <a href="#" on. Click="document. bg. Color=colours[0]; return true; ">Colour 1</a> <BR> <a href="#" on. Click="document. bg. Color=colours[1]; return true; ">Colour 2</a> <BR> <a href="#" on. Click="document. bg. Color=colours[2]; return true; ">Colour 3</a> <BR> <a href="#" on. Click="document. bg. Color=colours[3]; return true; ">Colour 4</a> </BODY> </HTML>

Event Driven Programming Events recognized by Java. Script • Mouse click (left button). • Mouse cursor passing over an object. • The selection or de-selection of an entry field. • The update of the entry field value. • The submission of an entry form. • The loading of a new document. • The exit of the browser or document.

Events in Java. Script The left button of the mouse is clicked when over a target. • on. Click • on. Mouse. Over. The mouse cursor passes over a target. The focus on a target is lost. The target is • on. Blur activated. • on. Focus The target is selected. • on. Select The target content changed. • on. Change The form is submitted (or being submitted). The page • on. Submit is being loaded. • on. Load The page is being replaced or closed. • on. Unload

Event Target A HREF, BUTTON, CHECKBOX, RADIO, RESET, SUBMIT • on. Mouse. Over A HREF • on. Blur PASSWORD, SELECT, TEXT, TEXTAREA • on. Focus PASSWORD, TEXTAREA • on. Select PASSWORD, SELECT, TEXTAREA • on. Change FORM • on. Submit BODY (window), IMAGE • on. Load BODY (window) • on. Unload • on. Click

THANK YOU