Document Objects Forms, Images and Links. Project 3 To evaluation the expression, use: var...

Document ObjectsForms, Images and Links

Project 3

To evaluation the expression, use:var actual=“2*3+6”;

parseFloat(eval(actual));

Example

<HTML>

<head> <body>

<title> <h1> <h3><h2>

Document model – Javascript hierarchy

Javascript document objects are arranged in a DOM hierarchy.

The window object is at the top of the tree and has child nodes Navigator object Frame object History object Location object Document object Screen object Event object

Document object

Documents contain text, images, forms, links Subordinates to the document object are:

Anchors Images Forms Links Applets Embeds

Dot syntax

window.document.bgColor

OR

document.bgColor

Document

Every window contains a document object that corresponds to the HTML document shown in the window

The document object corresponds to the code between <body> </body>

Document Properties

activeElement

alinkColor

anchors[ ]

applets[ ]

bgColor

cookie

domain

embeds[ ]

fgColor

forms[ ]

frames[ ]

Height

images[ ]

lastModified

linkColor

links[ ]

Location

Referrer

Title

vlinkColor

width

Document Methods

attachEvent()

captureEvents()

Clear()

clearAttributes()

close()

focus()

getElementById()

getElementsByName()

getElementsTagByName()

getSelection()

handleEvent()

hasFocus()

open()

recalc()

releaseEvents()

routeEvent()

setActive()

write()

writeln()

Accessing Objects within a Document

The Document object contains many objects that can be accessed using special arrays. For example, collections of anchors, frames, images, forms, and links can be accessed using these array. The table below shows some of these special arrays.

• anchors[subscript] – Reference named anchors in a page.

• applets[subscript] – Reference Java applets in a page.

• embeds[subscript] – Reference embedded objects in a page.

• forms[subscript] – Reference forms in a page.

• frames[subscript] – Reference window objects of frame objects in a page.

• images[subscript] – Reference images in a page.

• links[subscript] – Reference hyper links in a page.

Form objects - Objectives

Examine form objects Script push buttons and

form submissions Manipulate checkboxes Work with radio buttons Check the options on a

selection menu Validate the contents of

text-related input fields

Forms

• An HTML page may contain one or more forms. A form is created with the <form></form> tags and each set of form tags in an HTML document has an associated form object.• Multiple forms are stored in an array by the browser and can be referenced as shown in the example below:•document.forms[0]

• If the form has a name it can be referenced by name as shown in the example below:•document.forms[“myForm”]

Reset and Submit Methods

The reset() method clears all of the components of a form.

The submit() method is used to start the processing of the form. Whatever action is specified in the form will be executed when the onsubmit event handler fires.

Form submission can be handled:1. completely by a script2. submitting the form’s contents to a server script3. using a script to pre-process the form’s elements before

submitting it to a server

Form ObjectProperties, Methods, and Events

Properties Methods EventsacceptCharset handleEvent() onreset

Action reset() onsubmit

autocomplete submit()

elements[i]

encoding

enctype

Length

Method

Name

Target

Form Object Properties

Property Value Type Description

acceptCharset

String Read/Write

The value assigned to the

acceptCharset attribute of a form which is used to specify a list of one or more character sets that the server supports.

Action URL String

Read/Write

The value assigned to the

action attribute of a form; typically the URL to a CGI script or a mailto: reference.

Autocomplete String Read/Write

A value which determines

whether autocomplete text can be used to fill in the contents of form fields as users enter values.

Form Object PropertiesProperty Value Type Description

elements[] Array Read-only An array of all the form

elements; can be used to access form elements by their index. Supported by NN2, IE3 and later as well as Mozilla and Safari.

Encoding String Read/Write The value assigned to the

enctype attribute of the form; the encoding type for the form data. Deprecated in the W3C Document Object Model (DOM). Supported by NN2, IE3 and later as well as Mozilla and Safari.

Form Object Properties (continued)


enctype String Read/WriteSame as encoding. This property is defined in the W3C DOM and is meant to replace the encoding property.

length Integer Read-onlyThe number of elements in the form. Returns the same result as using the length property of the elements[] array.

method String Read/WriteThe value assigned to the method attribute of the form; returns either GET or POST.

Form Object Properties (continued)


name String Read/WriteThe value assigned to the name attribute of the form; the name of the form instance.

target String Read/WriteThe value assigned to the target attribute for the form or page; typically the URL of the target page for the output of the form or the response from the server.

Submitting a Form with Javascript

Event handlers. Events are triggered by a user when he initiates some actions (pressing a key, clicking his mouse on a button, moving his mouse over a link)

Handler can check the input data to decide whether to submit or reject the form. onclick onsubmit onreset

Button ObjectProperties, Methods, and Events

Properties Methods Events

form click() onclick

name onmousedown

type onmouseup

value

If the form is not going to submit data to a server, the button input type can be used instead of the submit button

Working With Push Buttons

<html><head><title>Push buttons</title><script type="text/javascript">function booktype(btn) {

if (btn.value == "Mystery") {alert("You selected mystery!");

}if (btn.value == "Fantasy") {

alert("You selected fantasy!");}if (btn.value == "Science Fiction") {

alert("You selected science fiction!");}if (btn.value == "Romance") {

alert("You selected romance!");}

Working With Push Buttons(continued)

var theOthers = "";for (var i = 0; i < btn.form.elements.length; i++) {

if (btn.form.elements[i] != btn) {theOthers += btn.form.elements[i].value + " ";

}}alert("You didn't select " + theOthers);

}</script> </head><body><h1>Working with Push Buttons</h1><form><p><b>Click on your favorite book genres!</b></p><input type="button" value="Mystery" onclick="booktype(this);" /><input type="button" value="Fantasy" onclick="booktype(this);" /><input type="button" value="Science Fiction" onclick="booktype(this);" /><input type="button" value="Romance" onclick="booktype(this);" /></form></body></html>

Checkbox Objects

Checkboxes are commonly used in forms to make boolean selections for example: Member / Non Member, Male / Female, etc..

Adding a checkbox to an HTML document creates a related checkbox object that can be accessed in JavaScript.

Checkbox ObjectProperties, Methods, and Events

Properties Methods EventsChecked click() onclick

Form

defaultChecked

Name

Type

Value

Using and Validating Checkboxes<script type="text/javascript">function validcheck(x,y) { var ischecked = null; var checkedItems = “”; for (var i = x; i < y; i++) { if (document.forms[0].elements[i].checked) { ischecked = "ok"; checkedItems = checkedItems + “\n” + document.forms[0].elements[i].name; } } if (ischecked == null) { alert ("\nPlease select at least one of the check boxes!\n\n Then resubmit the form."); } else{

alert(“You have selected the following items: “ + checkedItems); } return;}</script>

Using and Validating Checkboxes(continued)

<body><h1>Scripting and Validating Checkboxes</h1><form name=myform method=post onsubmit="validcheck(0,4)"><p>Select the topics you are interested in:<p><input type=checkbox name="biology" />Biology<br /><input type=checkbox name="calculus" />Calculus<br /><input type=checkbox name="organic-chemistry" />Organic

Chemistry<br /><input type=checkbox name="physics" />Physics<br /><input type=checkbox name="world-literature" />World Literature</p><input type=submit value="Submit" /></form></body></html>

Using Radio Button Objects

Radio buttons are best used when the user should make a single selection from a group of selections. They are similar to checkboxes in that they are selected or not selected, in other words they store boolean values. However, unlike checkboxes, you can only choose one radio button at a time in a group of radio buttons.

Adding a radio button to an HTML document creates a related radio button object that can be accessed in JavaScript.

When creating an array of radio buttons, give them all the same name.

Using Radio Button Objects

<script type="text/javascript">function checkbutton(radiogroup){ for (var i = 0; i < radiogroup.length; i++) { if (radiogroup[i].checked) { return i; } } return 0;}function checkselection(form) { var i = checkbutton(form.group1); alert("You selected " + form.group1[i].value);}</script>

Using Radio Button Objects(continued)

<body><form><p>Select your favorite dessert:</p><p><input type=radio name=group1 value="none" checked />None<input type="radio" name="group1" value="ice cream" />Ice cream<input type="radio" name="group1" value="pie" />Fruit or cream pie<input type="radio" name="group1" value="pudding" />Pudding or

jello<input type="radio" name="group1" value="candy bar" />Candy

bar</p><p><input type=button value="Determine selection"

onclick="checkselection(this.form);" /></form></body></html>

Midterm exam

JavaScript requires which of the following steps?

a.Compile and deployment of the files.

b.Edit and load into a Web browser.

c.Edit and compile.

d.All of the above

Midterm exam

In JavaScript, which of the following can be used to indicate that comments end?

a.!-->

b.-- > */

c.!//-->

d.//!-->

Midterm exam

Which of the following is a valid variable name?

a.if

b.var

c.Weather

d.All of the above

Midterm exam

How many times does the code within the body of the “for” loop process for the following code if "years" is equal to 3: (i=1; i<years; i++) { <body of the for loop>} ??

a.0

b.1

c. 2

d.3

Midterm exam

How many times does the code within the "while...loop" perform, if the "years" is 1 before this while loop and “years” is incremented by 1 each iteration in the body of the while loop:

while (years>0) {<body of while loop>}?

a.0

b.1

c. 2

d.Endless Loop

Midterm exam

JavaScript pass variables by which of the following?

a.By neither reference nor value

b.By value

c.By reference

d.By value and reference

Midterm exam

A new array can be declared by which of the following?

a.Student = new Array;

b.Array = new Student;

c.Student = new Array ();

d.Array = new Student ();

Midterm exam

If the length of a String is determined to be 20 by using the length property, which of the following is TRUE?

a.The index can vary from 0-19.

b.The index can vary from 0-20.

c.The index can vary from 1-19.

d.The index can vary from 1-20.

Midterm exam

What is the possible number of different values that can be returned from the getDay() method?

a.0

b.7

c.31

d.Unlimited

Midterm exam

Which of the following is the correct syntax to use the Math Object’s SQRT2 property?

a.Math.SQRT2

b.Math.(SQRT2)

c.MATH. SQRT2

d.MATH.( SQRT2)

Error

<script language="JavaScript“>

document.writeln("Two,...");

document.writeln(‘’ Three, ..");

document.write("Four..<br>");

</script>

Code

17. function quote() {var age=document.quoteform.age.value;if (age<=0)

window.alert(“ Age must be >0”);else if (age >= 20 && age<=30)

alert(“Your rate: 2$ a week”);else if (age>30 && age <=40)

alert(“Your rate: 3$ a week”);else if (age>40 && age <=50)

alert(“Your rate: 5$ a week”);else if (age > 50)

alert(“Your rate: 10$ a week”);else if (age < 20)

alert(“Undefined”);}

Code

18. <script type="text/javascript">

var answer = document.form.input.value;

if (answer=="Netscape" || answer=="netscape")

alert("Congratulations");

else alert("Sorry, it is not "+answer);

document.form.input.value="";

focument.form.input.focus();

}

Code

19.

function computeInterest(PMT,IR,NP) {return (PMT *(1-Math.pow(1+IR,-1*NP)/ IR);

}

Code

20:<script type="text/javascript">// Insert your code here

var stringObj = new String("Javascript is not Java");var index;

index = stringObj.lastIndexOf("Java");document.write("Index of the second Java is "+index+"<BR>");

document.write(stringObj.toUpperCase().fontcolor("red").bold().fontsize(10));

</script>

Using Selection Objects• Selection lists can be used for multiple selections or for menus. Selection lists can be helpful when you want to display a lot of information in a small space.

• All of the information in a selection list is pre-validated by the author and does not have to be validated by a script later.

Adding a selection list to an HTML document creates a related selection list object that can be accessed in JavaScript.

Selection ObjectProperties, Methods, and Events

Properties Methods EventsForm add() onchange

Length item()Multiple namedItem()Name options[i].add()

options[i] options[i].remove()

options[i].defaultSelected

remove()

options[i].formoptions[i].index

options[i].selectedoptions[i].textoptions[i].valueselectedindex

SizeTypeValue

Using Selection Menus<script type="text/javascript">function indexSelection(form) {alert(form.userPref1.options[form.userPref1.selectedIndex].text);}

function directSelection(form) { alert(form.userPref2.options.value);}

function multipleSelection(form) {var theString = "";for (var i = 0; i < form.userPref3.length; i++) {if (form.userPref3.options[i].selected) {theString += form.userPref3.options[i].text + " \n";}}alert("You have selected: \n\n" + theString);}

</script>

Using Selection Menus(continued)

<body><form name="form1"><p>Choose the language you plan on studying:</p><p><select name="userPref1"><option selected="selected">English</option>

<option>French</option><option>German</option><option>Spanish</option>

</select></p><p><input type="button" value="Show Selection 1" onclick="indexSelection(this.form);"/></p></form><form name="form2"><p>Choose one of the following:</p><p><select name="userPref2">

<option value="Biology">Biology</option><option value="Chemistry">Chemistry</option><option value="Physics">Physics</option><option value="EarthScience">Earth Science</option>

</select></p><p><input type="button" value="Show Selection 2" onclick="directSelection(this.form);"/></p></form>

Using Selection Menus(continued)

<form name="form3"><p>Choose the areas of math you plan on studying:</p><p><select name="userPref3" multiple="multiple">

<option value="Algebra">Algebra</option><option value="Trigonometry">Trigonometry</option><option value="Calculus">Calculus</option><option value="DiscreteMath">Discrete Mathematics</option>

</select></p><p><input type="button" value="Show Selection 3"

onclick="multipleSelection(this.form);"/></p></form></body></html>

Text Objects

Text input fields are used to enter single lines of text. Input text fields can have the following styles:

1. hidden – the field does not show in the browser window but text can be stored in it

2. password – password fields display an * (asterisk) character for every character entered into the text field

3. text – text fields display the text entered by the user

Text Area fields may contain multiple lines of text and excellent choices when entering larger amounts of text.

Common Text Objects Methodsblur() – causes the text object to lose the focus and deselects the object

focus() – causes the object to gain the focus, the text cursor appears in the field

select() – selects the object, making it active; an object gains focus before it is selected and active

Text Objects Entry Restrictions

You can restrict the data entered into text fields based on the following categories:

1. Letters – allow or disallow the entry of alphabetic characters

2. Numbers – allow or disallow the entry of numeric characters

3. Space - allow or disallow the entry of spaces

4. Punctuation - allow or disallow the entry of specific characters such as commas, periods or hyphens

Text ObjectProperties, Methods, and Events

Properties Methods EventsdefaultValue blur() onafterupdate

form focus() onbeforeupdate

maxLength select() onblur

name onchange

readOnly onerrorupdate

size onfocus

type onselect

value

Text Area ObjectProperties, Methods, and Events

Properties Methods Eventscols createTextRange() onafterupdate

defaultValue blur() onbeforeupdate

form focus() onblur

maxLength select() onchange

name onerrorupdate

readOnly onfocus

rows onselect

type

value

Working with Text Objects<html><head><title>Registration</title><script type="text/javascript">function validateinput(field,type) { if (type == "letters") { var checkok =

"abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; } if (type == "numbers") { var checkok = "0123456789"; } if (type == "lettersnumbers") { var checkok =

"abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

}

if (type == "special") { var checkok =

"abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 .,-";

}

Working with Text Objects(continued)

var checkstr = field.value; var validok = true; for (i = 0; i < checkstr.length; i++) { ch = checkstr.charAt(i); for (j = 0; j < checkok.length; j++) { if (ch == checkok.charAt(j)) { break; } if (j == checkok.length - 1) { validok = false; break; } } } if (validok == false) { alert("The only valid characters for this field are: \n \n " + checkok + "\n \n Please go back and change

this field. Press Shift+Tab"); return false; } return true;}</script></head>

Working with Text Objects(continued)

<body><h2>Customer Registration Form</h2><p>Please enter your name and address:</p><form><p>First <input type="text" size="20" name="firstname"

onchange="validateinput(this,'letters');" /> MI <input type="text" size="1" name="middleinitial" onchange="validateinput(this,'letters');" /> Last <input type="text" size="20" name="lastname" onchange="validateinput(this,'letters');"

/></p><p>Street address: <input type="text" size="30" name="streetaddress"

onchange="validateinput(this,'special');" /></p><p>City: <input type="text" size="30" name="cityaddress"

onchange="validateinput(this,'letters');" /></p><p>State/country: <input type="text" size="30" name="countryaddress"

onchange="validateinput(this,'letters');" /></p><p>Zipcode: <input type="text" size="20" name="zipcode"

onchange="validateinput(this,'numbers')" /></p><p><input type="submit" value="submit" /></p></form></body></html>

Summary

Forms are important in acquiring information from the user

Forms have form objects Fields have field objects The data entered into the form components (text

fields, selection lists, radio buttons, etc.) can be validated on the client side using JavaScript functions

Validating the data on the client side, before sending the data to the server, can save time and bandwidth

This processing also reduces errors

Lab

Step 1: <html> <head> <title> Week 7 Practice </title> // Enter your script here </head> <body> <h1>Welcome to My Home Page!</h1>

// Enter your form here</body>

</html>

Lab

Step 2: insert in the body of this HTML document two forms:- form 1: contains a textfield and a button- form 2: contains a textarea and a button

Step 3: Write a script and insert it into <head> of this web page, to display the content of textfield, and textarea (using alert or document.write if a user presses/clicks the corresponding button.

Step 4: Modify this script so that it allows only letters and digits in the text field.

Step 4: Call this script from two forms, respectively

Lab

Step 5: Modify the script so that it only allows users to type in A-Z,a-z, and 0-9.

Images

Using Precaching to Swap Images

JavaScript allows you to programatically: change images create slide shows of images and display images based on time of day or year

Rollovers can be achieved by swapping out images that have been pre-cached.Images that change based on a time interval or season of the year can be created with JavaScript.

Image Objects

To facilitate the swapping of images, you need to create Image objects that can have a name and be referenced in the scripts

For example: var rolloverImage = new Image();

When referencing an image object you use the name specified in the HTML code as shown below <img src=“rolloverOn.gif” name=“myRollover”>

You should not confuse Image objects with the <img> tags that are used by HTML code to display an image

Using the document.images Array

JavaScript supports arrays of elements. When an image is displayed using an HTML tag <img> the browser builds an array of images. These images can be accessed in one of two ways as shown below:

document.images[0]

or

document.images[“imageName”] where imageName is the name of the image in the HTML code

Using the document.images Array

JavaScript code might use the syntax above in the following manner:if(document.images[“rollOver”].src == “rollover.gif”){

document.images[“rollOver”].src = “rolloff.gif”;

}

else{

document.images[“rollOver”].src = rollover.gif”;

}

Common Properties

align Sets the alignment of the image; the value assigned to the align attribute of an image. Accepted values are string constants: absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, and top. Supported by NN6, IE4 and later as well as Mozilla and Safari.

alt Sets the alternate text to display if the image cannot be displayed; the value assigned to the alt attribute of an image. Supported by NN6, IE4 and later as well as Mozilla and Safari.

border Sets the size of the image’s border; the value assigned to the border attribute of an image. Use border=”0” to hide the link border of an image placed within an a element. Supported by NN3, IE4 and later as well as Mozilla and Safari.

Common Properties

complete Returns true when the lowsrc for an image finishes loading; if no lowsrc is assigned, returns true when the source image finishes loading. Supported by NN3, IE4 and later as well as Mozilla and Safari.

height The value assigned to the height attribute of an image. Read/Write in IE4, NN5 or later. Read-only in IE3, NN4. Not supported by earlier versions of these browsers.

hspace The value assigned to the hspace attribute of an image. Read/Write in IE4, NN5 or later. Read-only in IE3, NN4. Not supported in earlier versions of these browsers.

lowsrc Sets a low-resolution source for an image; the value assigned to the lowsrc attribute of an image. Supported by NN3, IE4 and later as well as Mozilla and Safari.

Common Properties

name The value assigned to the name attribute of an image. Supported by NN2, IE3 and later as well as Mozilla and Safari.

src The value assigned to the src attribute of an image. Supported by NN3, IE4 and later as well as Mozilla and Safari.

vspace The value assigned to the vspace attribute of an image. Read/Write in IE4, NN5 or later. Read-only in IE3, NN4. Not supported by earlier versions of these browsers.

width The value assigned to the width attribute of an image. Read/Write in IE4, NN5 or later. Read-only in IE3, NN4. Not supported by earlier versions of these browsers.

Precaching and Swapping Images

Create an image object using the following syntax: var Image1 = new Image();

Pre-caching occurs in two steps: var Image1 = new Image(); Image1.src = “myImage.gif”;

Rotating Images

Updating images can be based on time events Updating images can also be based on the

interactions of the user

Summary

Images can be pre-loaded or cached to speed up user interactivity for effects like rollovers

Images have properties and methods that can be accessed

The document object contains an images array that can be used to reference images in the document

Image objects can be created and accessed using the name attribute of an image tag

Event handlers can be used to manage the changing of image objects and their properties

Lab

Step 1: <html> <head> <title> Week 8 Practice </title> // Enter your script here </head> <body>

<!– Insert your HTML code here --></body>

</html>

Lab

Step 2: Use google search engine (use image search) to find 4 pictures for 4 seasons (Spring, Summer, Fall, and Winter). Downloaded them.

Step 4: insert in the body of HTML code to do display one picture (of your choice).

Step 5: precaching these pictures. Write a function to randomly display the picture from the above chosen picture on the left of your web page whenever the user rolls a mouse over that picture

Step 6: change your HTML code to call this function

Document Objects Forms, Images and Links. Project 3 To evaluation the expression, use: var...

Documents

Transcript of Document Objects Forms, Images and Links. Project 3 To evaluation the expression, use: var...