1 COMM 1213 H1 COMP 4923 X1 JavaScript 2 (Readings: Ch. 12, 13, 14 Knuckles)
2 Outline Objects = Properties + Methods Objects = Properties + Methods Document Object Model Document Object Model Window and Document Properties and Methods Window and Document Properties and Methods HTML Forms HTML Forms
3 Objects (Ch. 12) An object is composed of: An object is composed of: –Properties or Variables (holds values) –Methods (perform functions) A car is a class of objects that have: A car is a class of objects that have: –Properties: colour, size, numdoors –Methods: move, stop, soundhorn The lowest level properties of type number, string, Boolean are called primitives The lowest level properties of type number, string, Boolean are called primitives var num; declares the primitive variable “num” var num; declares the primitive variable “num”
4 Objects A pizza is an object that can have the properties: type and price A pizza is an object that can have the properties: type and price –Declared by: var pizza=new Object(); pizza.price=15.00; A bill is an object that can have the properties: subtotal, tax and total A bill is an object that can have the properties: subtotal, tax and total var bill=new Object(); bill.subtotal=num*pizza.price; New version of the pizza program: New version of the pizza program:
5 Window Object Hierarchy Objects can have objects as properties eg. Cars can have engines Objects can have objects as properties eg. Cars can have engines –that have pistons that have rings that have rings DOM = DOM = Document Object Model Defines the hierarchy of Defines the hierarchy of objects within the browser window
6 Document Object Model window object prefix can be dropped window object prefix can be dropped window.closed or closed is a Boolean variable = false window.closed or closed is a Boolean variable = false history contains info on previous documents visited history contains info on previous documents visited –history.length is number of previous documents document.bgcolor contains the current background colour document.bgcolor contains the current background colour document.form1.var1.value contains the value of a variable var1 of the form object form1 of the current document object document.form1.var1.value contains the value of a variable var1 of the form object form1 of the current document object
7 Using Window and Document Object Properties Figure 12.6 Knuckles
8 Using Window and Document Object Methods <HTML><HEAD> <!-- var transfer; transfer=window.confirm("This web page has moved to a new location. Choose ok if you wish to be transported there."); if(transfer){ window.location="newpage.html"; window.location="newpage.html";}else{ window.history.go(-1); window.history.go(-1);}//--></SCRIPT></HEAD><BODY><P></BODY></HTML> Figure Figure Knuckles Returns the user’s choice of action in response to the message (true=OK, false=CANCEL) Instructs the window object to go to the specified URL Instructs the window object to go to the previous URL stored in the history object
9 PopUp Windows! <HTML><HEAD> Figure Figure <!-- newWindow=window.open("secondpage.html","newWin","width=300, height=300"); //--></SCRIPT></HEAD> I am the page containing the script that caused I am the page containing the script that caused the new window to appear. the new window to appear. </BODY></HTML> Figure Figure Knuckles
10 HTML Forms – Event Handling (Ch.13) An event occurs when an input is sensed by the browser window (by user, clock, operating system) An event occurs when an input is sensed by the browser window (by user, clock, operating system) Event handlers execute code to deal with events – eg. a button being clicked Event handlers execute code to deal with events – eg. a button being clicked </FORM> Figure 13.1 Knuckles Figure 13.1 Knuckles
11 Example Form Object <HTML><HEAD> <!-- function giveMessage(){ document.messageform.reply.value=document.messageform.fname.value+ document.messageform.reply.value=document.messageform.fname.value+ ", have a nice day!"; ", have a nice day!";}//--></SCRIPT></HEAD> Please enter your first name: Please enter your first name: </FORM></BODY></HTML> Example of Figure 13b
12 Additional Examples Using local variables in a function Using local variables in a function –Simple calulator Figure 13.6 Figure 13.6Figure 13.6 Using global variables in a funtion Using global variables in a funtion –Count the clicks Figure 13.7 Figure 13.7Figure 13.7 Contact entry Figure 13.9 Contact entry Figure 13.9Figure 13.9Figure 13.9 –Reducing code size with the with statement –Organizing forms with tables –Verification of text input
13 Other FORM Input Methods (Ch.14) Checkbox Checkbox –Pet food (Figure 14.1) Figure 14.1Figure 14.1 –With hidden values (Figure 14.4) Figure 14.4Figure 14.4 Radio Buttons Radio Buttons –More pet food (Figure 14.7) Figure 14.7Figure 14.7 –Makes use of the element array Pull-Down Menu Pull-Down Menu –Select a background colour (Figure 14.9) Figure 14.9Figure 14.9 –Verify selection made (Section 14.7) Section 14.7Section 14.7
14 Example Survey Form The Sodexo Food survey The Sodexo Food survey The Sodexo Food survey The Sodexo Food survey
15 Resources
16 THE END