Document objects forms images and links
This presentation is the property of its rightful owner.
Sponsored Links
1 / 74

Document Objects Forms, Images and Links PowerPoint PPT Presentation


  • 42 Views
  • Uploaded on
  • Presentation posted in: General

Document Objects Forms, Images and Links. Project 3. To evaluation the expression, use: var actual=“2*3+6”; parseFloat(eval(actual));. Example. <HTML>. <head>. <body>. <title>. <h1>. <h2>. <h3>. Document model – Javascript hierarchy.

Download Presentation

Document Objects Forms, Images and Links

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Document objects forms images and links

Document ObjectsForms, Images and Links


Project 3

Project 3

  • To evaluation the expression, use:

    var actual=“2*3+6”;

    parseFloat(eval(actual));


Example

Example

<HTML>

<head>

<body>

<title>

<h1>

<h2>

<h3>


Document model javascript hierarchy

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

Document object

  • Documents contain text, images, forms, links

  • Subordinates to the document object are:

    • Anchors

    • Images

    • Forms

    • Links

    • Applets

    • Embeds


Dot syntax

Dot syntax

  • window.document.bgColor

    OR

  • document.bgColor


Document

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

Document Properties

frames[ ]

Height

images[ ]

lastModified

linkColor

links[ ]

Location

Referrer

Title

vlinkColor

width

activeElement

alinkColor

anchors[ ]

applets[ ]

bgColor

cookie

domain

embeds[ ]

fgColor

forms[ ]


Document methods

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

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

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

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

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:

  • completely by a script

  • submitting the form’s contents to a server script

  • using a script to pre-process the form’s elements before submitting it to a server


Form object properties methods and events

Form ObjectProperties, Methods, and Events


Form object properties

Form Object Properties


Form object properties1

Form Object Properties


Form object properties continued

Form Object Properties (continued)


Form object properties continued1

Form Object Properties (continued)


Submitting a form with javascript

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 object properties methods and events

Button ObjectProperties, Methods, and Events

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

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

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

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 object properties methods and events

Checkbox ObjectProperties, Methods, and Events


Using and validating checkboxes

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

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

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 objects1

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

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

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 exam1

Midterm exam

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

a.!-->

b.-- > */

c.!//-->

d.//!-->


Midterm exam2

Midterm exam

Which of the following is a valid variable name?

a.if

b.var

c.Weather

d.All of the above


Midterm exam3

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 exam4

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 exam5

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 exam6

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 exam7

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 exam8

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 exam9

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

Error

<script language="JavaScript“>

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

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

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

</script>


Document objects forms images and links

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”);

}


Document objects forms images and links

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();

}


Document objects forms images and links

Code

19.

function computeInterest(PMT,IR,NP) {

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

}


Document objects forms images and links

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.

Using Selection Objects


Selection object properties methods and events

Selection ObjectProperties, Methods, and Events


Using selection menus

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

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 continued1

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 Objects

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

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

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

  • 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 methods

Common Text Objects Methods

blur() – 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

Text Objects Entry Restrictions

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

  • Letters – allow or disallow the entry of alphabetic characters

  • Numbers – allow or disallow the entry of numeric characters

  • Space - allow or disallow the entry of spaces

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


Text object properties methods and events

Text ObjectProperties, Methods, and Events


Text area object properties methods and events

Text Area ObjectProperties, Methods, and Events


Working with text objects

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

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 continued1

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

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


Document objects forms images and links

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>


Document objects forms images and links

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


Document objects forms images and links

Lab

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


Images

Images


Using precaching to swap 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

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

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 array1

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

Common Properties


Common properties1

Common Properties


Common properties2

Common Properties


Precaching and swapping images

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

Rotating Images

  • Updating images can be based on time events

  • Updating images can also be based on the interactions of the user


Summary1

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


Document objects forms images and links

Lab

Step 1:<html>

<head>

<title> Week 8 Practice </title>

// Enter your script here

</head>

<body>

<!– Insert your HTML code here -->

</body>

</html>


Document objects forms images and links

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


  • Login