1 comm 1213 h1 comp 4923 x1 javascript 2 (readings: ch. 12, 13, 14 knuckles)

11

COMM 1213 H1COMM 1213 H1COMP 4923 X1COMP 4923 X1

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

22

OutlineOutline

• Objects = Properties + MethodsObjects = Properties + Methods

• Document Object ModelDocument Object Model

• Window and Document Properties Window and Document Properties and Methodsand Methods

• HTML FormsHTML Forms

33

Objects (Ch. 12)Objects (Ch. 12)

• An object is composed of:An object is composed of:– Properties or Variables (holds values)Properties or Variables (holds values)– Methods (perform functions)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 Properties: colour, size, numdoors – Methods: move, stop, soundhornMethods: move, stop, soundhorn

• The lowest level properties of type The lowest level properties of type number, string, Boolean are called number, string, Boolean are called primitivesprimitives var num; declares the primitive variable “num”var num; declares the primitive variable “num”

44

ObjectsObjects• A pizza is an object that can have the A pizza is an object that can have the

properties: type and priceproperties: type and price– Declared by:Declared by:

var pizza=new Object();var pizza=new Object();pizza.price=15.00;pizza.price=15.00;

• A bill is an object that can have the properties: A bill is an object that can have the properties: subtotal, tax and total subtotal, tax and total

var bill=new Object();var bill=new Object();bill.subtotal=num*pizza.price;bill.subtotal=num*pizza.price;

• NewNew version of the pizza program:version of the pizza program:http://www.cknuckles.com/intro/lessons/source/L12/f12.2.htmlhttp://www.cknuckles.com/intro/lessons/source/L12/f12.2.html

http://www.cknuckles.com/intro/lessons/source/L12/f12.2.html

55

Window Object HierarchyWindow Object Hierarchy

• Objects can have objects as propertiesObjects can have objects as properties eg. Cars can have engineseg. Cars can have engines– that have pistonsthat have pistons

• that have ringsthat have rings

• DOM = DOM = Document Object ModelDocument Object Model

• Defines the hierarchy of Defines the hierarchy of objects within the browser objects within the browser windowwindow

66

Document Object ModelDocument Object Model

• windowwindow object prefix can be dropped object prefix can be dropped• window.closedwindow.closed or or closedclosed is a Boolean variable = false is a Boolean variable = false• historyhistory contains info on previous documents visited contains info on previous documents visited

– history.lengthhistory.length is number of previous documents is number of previous documents• document.bgcolordocument.bgcolor contains the current background colour contains the current background colour• document.form1.var1.valuedocument.form1.var1.value contains the contains the valuevalue of a variable of a variable

var1var1 of the form object of the form object form1form1 of the current document of the current document objectobject

77

Using Window and Document Using Window and Document Object PropertiesObject Properties

Figure 12.6 Knuckles


88

Using Window and Document Using Window and Document Object MethodsObject Methods

<HTML><HTML><HEAD><HEAD><SCRIPT LANGUAGE=JavaScript></SCRIPT>//--></SCRIPT></HEAD></HEAD><BODY><BODY><P><P></BODY></BODY></HTML></HTML>


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

99

PopUp Windows!PopUp Windows!

<HTML><HTML><HEAD><HEAD> <TITLE>Figure 12.11</TITLE><TITLE>Figure 12.11</TITLE><SCRIPT LANGUAGE=JavaScript></SCRIPT>//--></SCRIPT></HEAD></HEAD><BODY BGCOLOR="#99CCCC"><BODY BGCOLOR="#99CCCC"><P><FONT SIZE="+2"><B>I am the page containing the <P><FONT SIZE="+2"><B>I am the page containing the

script that causedscript that causedthe new window to appear.</B></FONT>the new window to appear.</B></FONT></BODY></BODY></HTML></HTML>

1010

HTML Forms – Event Handling HTML Forms – Event Handling (Ch.13)(Ch.13)

• An event occurs when an input is sensed An event occurs when an input is sensed by the browser window (by user, clock, by the browser window (by user, clock, operating system)operating system)

• Event handlersEvent handlers execute code to deal with execute code to deal with events – eg. a button being clickedevents – eg. a button being clicked

<FORM ><FORM > <P><INPUT TYPE=button VALUE="Click Me" <P><INPUT TYPE=button VALUE="Click Me"

onclickonclick="changecolor()">="changecolor()"></FORM></FORM>

Figure 13.1 KnucklesFigure 13.1 Knuckles


1111

Example Form Object Example Form Object <HTML><HTML><HEAD><HEAD><SCRIPT LANGUAGE=JavaScript></SCRIPT>//--></SCRIPT></HEAD></HEAD><BODY BGCOLOR="#FFFFCC"><BODY BGCOLOR="#FFFFCC"><P><FORM name=<P><FORM name=messageformmessageform>> <P>Please enter your first name:<P>Please enter your first name: <INPUT TYPE=text NAME=<INPUT TYPE=text NAME=fnamefname VALUE="" SIZE=10><BR> VALUE="" SIZE=10><BR> <INPUT TYPE=button VALUE="Click here for a personal message." <INPUT TYPE=button VALUE="Click here for a personal message."

onclick="giveMessage()"><BR>onclick="giveMessage()"><BR> <INPUT TYPE=reset VALUE="Reset Form"><BR><INPUT TYPE=reset VALUE="Reset Form"><BR> <TEXTAREA NAME=<TEXTAREA NAME=replyreply ROWS=3 COLS=27 WRAP=virtual></TEXTAREA> ROWS=3 COLS=27 WRAP=virtual></TEXTAREA></FORM></FORM></BODY></BODY></HTML></HTML> Example of Figure 13b

1212

Additional ExamplesAdditional Examples

• Using local variables in a functionUsing local variables in a function– Simple calulator Simple calulator Figure 13.6Figure 13.6

• Using global variables in a funtionUsing global variables in a funtion– Count the clicks Count the clicks Figure 13.7Figure 13.7

• Contact entry Contact entry Figure 13.9Figure 13.9– Reducing code size with the Reducing code size with the withwith statement statement– Organizing forms with tablesOrganizing forms with tables– Verification of text inputVerification of text input




1313

Other FORM Input Methods Other FORM Input Methods (Ch.14)(Ch.14)

• CheckboxCheckbox– Pet food (Pet food (Figure 14.1Figure 14.1))– With hidden values (Figure 14.4)With hidden values (Figure 14.4)

• Radio ButtonsRadio Buttons– More pet food (Figure 14.7)More pet food (Figure 14.7)– Makes use of the element arrayMakes use of the element array

• Pull-Down MenuPull-Down Menu– Select a background colour (Figure 14.9)Select a background colour (Figure 14.9)– Verify selection made (Section 14.7)Verify selection made (Section 14.7)


1414

Example Survey FormExample Survey Form

• The Sodexo Food surveyThe Sodexo Food survey

1515

ResourcesResources• http://www.w3schools.com/js/js_examples.asphttp://www.w3schools.com/js/js_examples.asp

• http://http://www.tizag.com/javascriptT/index.phpwww.tizag.com/javascriptT/index.php

• http://www.js-examples.com/page/javascripts.htmlhttp://www.js-examples.com/page/javascripts.html

• http://javascript.internet.com/http://javascript.internet.com/

http://www.w3schools.com/js/js_examples.asp

http://www.tizag.com/javascriptT/index.php

http://www.tizag.com/javascriptT/index.php

http://www.js-examples.com/page/javascripts.html

http://javascript.internet.com/

1616

THE ENDTHE END

[email protected]@acadiau.ca

1 comm 1213 h1 comp 4923 x1 javascript 2 (readings: ch. 12, 13, 14 knuckles)

Documents