COMM 1213 H1 COMP 4923 X1

1
COMM 1213 H1COMP 4923 X1

• JavaScript 2
• (Readings Ch. 12, 13, 14 Knuckles)

2
Outline

• Objects Properties Methods
• Document Object Model
• Window and Document Properties and Methods
• HTML Forms

3
Objects (Ch. 12)

• An object is composed of
• Properties or Variables (holds values)
• Methods (perform functions)
• 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
• var num declares the primitive variable num

4
Objects

• A pizza is an object that can have the
  properties type and price
• Declared by
• var pizzanew Object()
• pizza.price15.00
• A bill is an object that can have the properties
  subtotal, tax and total
• var billnew Object()
• bill.subtotalnumpizza.price
• New version of the pizza program
• http//www.cknuckles.com/intro/lessons/source/L12
  /f12.2.html

5
Window Object Hierarchy

• Objects can have objects as properties eg.
  Cars can have engines
• that have pistons
• that have rings
• DOM
• Document Object Model
• Defines the hierarchy of
• objects within the browser
• window

6
Document Object Model

• window object prefix can be dropped
• window.closed or closed is a Boolean variable
  false
• history contains info on previous documents
  visited
• history.length is number of previous documents
• 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

7
Using Window and Document Object Properties
Figure 12.6 Knuckles
8
Using Window and Document Object Methods
Returns the users choice of action in response
to the message (trueOK, falseCANCEL)

• ltHTMLgt
• ltHEADgt
• ltSCRIPT LANGUAGEJavaScriptgtlt!--
• var transfer
• transferwindow.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"
• else
• window.history.go(-1)
• //--gtlt/SCRIPTgt
• lt/HEADgt
• ltBODYgt
• ltPgt
• lt/BODYgt
• lt/HTMLgt

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
Figure 12.10 Knuckles
9
PopUp Windows!

• ltHTMLgt
• ltHEADgt
• ltTITLEgtFigure 12.11lt/TITLEgt
• ltSCRIPT LANGUAGEJavaScriptgtlt!--
• newWindowwindow.open("secondpage.html","newWin","
  width300,height300")
• //--gtlt/SCRIPTgt
• lt/HEADgt
• ltBODY BGCOLOR"99CCCC"gt
• ltPgtltFONT SIZE"2"gtltBgtI am the page containing
  the script that caused
• the new window to appear.lt/Bgtlt/FONTgt
• lt/BODYgt
• lt/HTMLgt

Figure 12.11 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)
• Event handlers execute code to deal with events
  eg. a button being clicked
• ltFORM gt
• ltPgtltINPUT TYPEbutton VALUE"Click Me"
  onclick"changecolor()"gt
• lt/FORMgt
• Figure 13.1 Knuckles

11
Example Form Object

• ltHTMLgt
• ltHEADgt
• ltSCRIPT LANGUAGEJavaScriptgtlt!--
• function giveMessage()
• document.messageform.reply.valuedocument.messag
  eform.fname.value
• ", have a nice day!"
• //--gtlt/SCRIPTgt
• lt/HEADgt
• ltBODY BGCOLOR"FFFFCC"gt
• ltPgtltFORM namemessageformgt
• ltPgtPlease enter your first name
• ltINPUT TYPEtext NAMEfname VALUE""
  SIZE10gtltBRgt
• ltINPUT TYPEbutton VALUE"Click here for a
  personal message." onclick"giveMessage()"gtltBRgt
• ltINPUT TYPEreset VALUE"Reset Form"gtltBRgt
• ltTEXTAREA NAMEreply ROWS3 COLS27
  WRAPvirtualgtlt/TEXTAREAgt
• lt/FORMgt
• lt/BODYgt
• lt/HTMLgt

Example of Figure 13b
12
Additional Examples

• Using local variables in a function
• Simple calulator Figure 13.6
• Using global variables in a funtion
• Count the clicks Figure 13.7
• Contact entry Figure 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
• Pet food (Figure 14.1)
• With hidden values (Figure 14.4)
• Radio Buttons
• More pet food (Figure 14.7)
• Makes use of the element array
• Pull-Down Menu
• Select a background colour (Figure 14.9)
• Verify selection made (Section 14.7)

14
Example Survey Form

• The Sodexo Food survey

15
Resources

• http//www.w3schools.com/js/js_examples.asp
• http//www.tizag.com/javascriptT/index.php
• http//www.js-examples.com/page/javascripts.html
• http//javascript.internet.com/

16
THE ENDdanny.silver_at_acadiau.ca