Document objects forms images and links
Download
1 / 74

Document Objects Forms, Images and Links - PowerPoint PPT Presentation


  • 65 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Document Objects Forms, Images and Links' - jescie-guerrero


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






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>


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.

Using Selection Objects


Selection object properties methods and events
Selection Object menus. Selection lists can be helpful when you want to display a lot of information in a small space.Properties, Methods, and Events


Using selection menus
Using Selection Menus menus. Selection lists can be helpful when you want to display a lot of information in a small space.

<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 menus. Selection lists can be helpful when you want to display a lot of information in a small space.(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 menus. Selection lists can be helpful when you want to display a lot of information in a small space.(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 menus. Selection lists can be helpful when you want to display a lot of information in a small space.

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 menus. Selection lists can be helpful when you want to display a lot of information in a small space.

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 menus. Selection lists can be helpful when you want to display a lot of information in a small space.

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 Object menus. Selection lists can be helpful when you want to display a lot of information in a small space.Properties, Methods, and Events


Text area object properties methods and events
Text Area Object menus. Selection lists can be helpful when you want to display a lot of information in a small space.Properties, Methods, and Events


Working with text objects
Working with Text Objects menus. Selection lists can be helpful when you want to display a lot of information in a small space.

<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 menus. Selection lists can be helpful when you want to display a lot of information in a small space.(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 menus. Selection lists can be helpful when you want to display a lot of information in a small space.(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 menus. Selection lists can be helpful when you want to display a lot of information in a small space.

  • 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 menus. Selection lists can be helpful when you want to display a lot of information in a small space.

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 menus. Selection lists can be helpful when you want to display a lot of information in a small space.

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 menus. Selection lists can be helpful when you want to display a lot of information in a small space.

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


Images

Images menus. Selection lists can be helpful when you want to display a lot of information in a small space.


Using precaching to swap images
Using Precaching to Swap Images menus. Selection lists can be helpful when you want to display a lot of information in a small space.

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 menus. Selection lists can be helpful when you want to display a lot of information in a small space.

  • 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 menus. Selection lists can be helpful when you want to display a lot of information in a small space.

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 menus. Selection lists can be helpful when you want to display a lot of information in a small space.

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 menus. Selection lists can be helpful when you want to display a lot of information in a small space.


Common properties1
Common Properties menus. Selection lists can be helpful when you want to display a lot of information in a small space.


Common properties2
Common Properties menus. Selection lists can be helpful when you want to display a lot of information in a small space.


Precaching and swapping images
Precaching and Swapping Images menus. Selection lists can be helpful when you want to display a lot of information in a small space.

  • 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 menus. Selection lists can be helpful when you want to display a lot of information in a small space.

  • Updating images can be based on time events

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


Summary1
Summary menus. Selection lists can be helpful when you want to display a lot of information in a small space.

  • 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 menus. Selection lists can be helpful when you want to display a lot of information in a small space.

Step 1:<html>

<head>

<title> Week 8 Practice </title>

// Enter your script here

</head>

<body>

<!– Insert your HTML code here -->

</body>

</html>


Lab menus. Selection lists can be helpful when you want to display a lot of information in a small space.

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


ad