document objects forms, images and links. the document object model each element of an html...

Document Objects

Forms, Images and Links

The document object model

• Each element of an HTML document, such as an image, form, link, or button, can be represented as a JavaScript object.

• Each object contains properties and methods to describe and manipulate these objects.

The HTML document – E1<html>

<head><title>My Page</title>

</head>

<body><h1>Level 1</h1><h2>Level 2</h2><h3>Level 3</h3>

</body>

</html>HTML

<head> <body>

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

“My Page” “Level1” “Level2” “Level3”

Each node in the tree can be referenced using the dot syntax. In JavaScript, the window object is at the top of the tree. Its children nodes are the navigator, the frames, the history, the location, the document, the screen and the event objects. We will see tonight the document object and its children, the anchor, images, forms, links, applets and embeds objects.

The document• Every window or frame contains a document object

that corresponds to the HTML document shown in the window.

• This object corresponds mainly to the body of the document.

• The document object can be represented as a property of the window by saying window.document. JavaScript knows that the window is the top level of the hierarchy, so you can omit the window part, writing only document.bgColor, for example, instead of window.document.bgColor.

• The document object is defined when the <body> tag is encountered on the page and stays in existence until the page is unloaded.

Looping through document 0bject Properties – E2<html>

<head><title>Looping through Object Properties</title><script language="JavaScript">

var props=new Array();for ( var property in window.document){

props.push(property);}for(i=0;i<props.length; i++){

document.write( props[i] + " ");if( i>0 && i%3 == 0 ){document.write("<br>");}

}</script></head>

<body></body>

</html>

Document Object Properties – E3<html>

<head><title>Document Object Properties</title></head>

<body bgColor="silver" text="forestgreen" link="blue“ vlink="purple"><font face="arial" size="+2"><script language="JavaScript">

var beg_tag="<em>"; end_tag="</em><br>";document.write("The location of the document: "+ beg_tag + document.location + end_tag);document.write("The document's title: "+ beg_tag+ document.title + end_tag);document.write("The background color: "+ beg_tag+ document.bgColor + end_tag);document.write("The link color is: "+ beg_tag+ document.linkColor + end_tag);document.write("The text color is: "+ beg_tag+ document.fgColor + end_tag);document.write("The document was last modified: "+ beg_tag + document.lastModified + end_tag);

</script><a href="thanks.stm">Thanks!</a></body>

</html>

document object methods()

• The parentheses differentiate a method from a property.

• When you open a new document, the current document is replaced with a new document and all of its content overwritten.

document open() & close() methods – E4<html> <head><title>Frame Me!</title></head><frameset cols="25%,75%"><frame src="leftframe.html" name=lframe><frame src="rightframe.html" name=rframe></frameset></html>---------------------------------------------------------------<html><head><title>Right Frame</title></head><body bgColor="lightgreen"><h2> Just to show you that this is the right frame </h2></body></html>---------------------------------------------------------------<html><head><title>Left Frame</title></head><body bgColor="yellow"><font face="verdana"><h2>left frame writes to right frame </h2><script language="JavaScript">// Methods of the document objectparent.frames[1].document.open();parent.frames[1].document.write("<body bgcolor='black'>","<font color='white'>","<h1>Hey brother, let me write all over you!</h2>");parent.frames[1].document.close();</script></body>

</html>

Forms

• Used to pass information from the browser to the server.• Uses different ways to accept input, such as radio buttons,

checkboxes, pop-up menus and text boxes.

FORMAT:<form action=“URL to server program” method=“post”>The body of the form goes here, including input devices for filling

out the form.</form>

The fields are created by the HTML <INPUT TYPE=key/value> tag.

Input types: button, text, textarea, password, checkbox, radio, select, file, hidden, submit, image and reset.

An HTML form – E5<html>

<head><title>An HTML Form</title></head>

<body><b><form action="/cgi-bin/bookstuff/form1.cgi" method="post"><p><fieldset><legend><font size="+1"> All About You</legend>

<p><font size="-1" color="blue"> Type your name here:<input type="text" name="namestring" size="50">

<p> Talk about yourself here:<br><textarea name="comments" align="left" rows="5" cols="50">I was

born...</textarea>

<p> Choose your food:<b><input type="radio" name="choice" value="burger">Hamburger<input type="radio" name="choice" value="fish">Fish<input type="radio" name="choice" value="steak">Steak<input type="radio" name="choice" value="yogurt">Yogurt

<p> <b>Choose a work place:</b><br><input type="checkbox" name="place" value="LA">Los Angeles <br><input type="checkbox" name="place" value="SJ">San Jose <br><input type="checkbox" name="place" value="SF" checked> San Francisco

<p> <b>Choose a vacation spot:</b><br><select multiple name="location">

<option selected value="hawaii"> Hawaii<option value="bali">Bali<option value="maine">Maine<option value="paris">Paris

</select>

<p></fieldset>

<input type="submit" value="Submit"><input type="reset" value="Clear"></form></body>

</html>

JavaScript and the forms Object• The forms object is also a property of the document

object.• Every time you create a form in a given document,

the browser creates a unique form object and assigns it as an element of an array, called the forms[] array. The index value corresponds to the order in which the form occurs in the document. If the form has a name, it can be referenced by its own name: document.myform.

• The form contains input types. The JavaScript forms object consists of a property called elements. Each of the input types in the elements[] array is also an object in its own right.

• document.forms[0].element[0] refers to the first field in the first form.

Two forms example - E6<form name = “form1”>

<input type = “text” name=“yourname”>: Type your name here<br><input type = “button” name=“button1” value=“Push Button”>

</form><form name = “form2”>

<input type = “radio” name=“veggie1” value=“bean”> Beans<input type = “radio” name=“veggie2” value=“carrot”> Carrots

</form>

window

document

forms[0] forms[1]“form1” “form2”

elements[0] elements[1] elements[0] elements[1]“yourname” “button1” “veggie1” “veggie2”

value “bean” value “carrot”

Naming Forms – E7<html>

<head><title>Naming Forms object</title></head>

<body><form name="form1"> Enter your name:

<input type="text"name="namefield"value="Name: ">

</form><form name="form2">

<input type="button" value="Press here"></form><font size="+1"><pre><script language="JavaScript">

document.writeln( "The first form is named: “ + window.document.form1.name);document.write( "The second form is named: “ + document.form2.name);

</script></pre></body>

</html>

Referencing the form elements by name – E8<html>

<head><title>Naming Buttons</title></head>

<body bgcolor="cyan"><font face="arial"><b>Naming buttons<br><font size="+1"><form name="myform">

<input type="button" name="button1" value="red"></input><input type="button" name="button2" value="blue"></input>

</form><script language="JavaScript">

document.write("<b><br>Form name is: </b><em>"+document.myform.name);document.write("</em><b><br>Name of first button is:</b><em> "+document.myform.button1.name);document.write("</em><b><br>Value of button1 field:</b><em> "+document.myform.button1.value);document.write("</em><b><br>Name of second button is:</b><em> "+document.myform.button2.name);document.write("</em><b><br>Value of button2 field:</b><em> "+document.myform.button2.value);

</script></body>

</html>

Form and element properties – E9<html>

<head><title>Form and Element Properties</title></head>

<body><form name="myForm1">Enter something:

<input name="enter"type="text"value="hello">

</form><form name="myForm2">Button test<br>

<input type="button" name="button1" value="red"></input><input type="button" name="button2" value="blue"></input><input type="button" name="button3" value="green"></input>

</form><script language="JavaScript">

document.write("<b><br>Form name is: </b><em>"+document.myForm1.name);document.write("</em><b><br>Number of button fields:</b><em> "+document.myForm2.length);document.write("</em><b><br>Value of the text field:</b><em> "+document.myForm1.enter.value);document.write("</em><b><br>Value of button1 field:</b><em> "+document.myForm2.button1.value);document.write("</em><br><br><b>The name of the first form," + "<em>document.forms[0].name,</em> is: </b> "+document.forms[0].name);document.write("<br><b>The name of the second form, <em>" + "document.forms[1].name,</em> is: </b>"+document.forms[1].name);document.write("<p><b>Accessing the \"elements[]\" <em>name," + "type, </em>and</em><em> value</em> properties: </b>");

for(var i = 0; i < document.myForm2.length; i++){document.write("<br>name: " + document.myForm2.elements[i].name +"<br>");document.write("value: “ +document.forms[1].elements[i].value+"<br>");document.write("type: “ +document.forms[1].elements[i].type+"<br>");

}</script></body>

</html>

HTML form without JavaScript – E10<html>


<body><b><form action="/cgi-bin/bookstuff/form1.cgi" method="post"><p><fieldset><legend><font size="+1"> All About You</legend><p>Type your name here:<input type="text" name="namestring" size="50"><p><b>Choose a work place:</b><br><input type="checkbox" name="place" value="LA">Los Angeles<br><input type="checkbox" name="place" value="SJ">San Jose<br><input type="checkbox" name="place" value="SF" checked>San Francisco<p><b>Choose a vacation spot:</b><br><select multiple name="location">

<option selected value="hawaii"> Hawaii<option value="bali">Bali<option value="maine">Maine<option value="paris">Paris

</select><p></fieldset><input type="submit" value="Submit"><input type="reset" value="Clear"></form></body>

</html>

Submitting a form with an image – E11<html>

<head><title>An Image Input Type</title></head>

<body bgcolor="magenta"> <font size="+1"><center>Enter your name:<br> <form action="example.cgi" method="post"> <input type="text" size=50 > <p> <input type="image" src=“pizza.jpg" alt=“pizza?"><br> <input type="reset"> </form></center></body>

</html>

onClick event handler – E12<html>

<head><title>onClick Event Handler and Forms</title><script language="JavaScript">

function readySubmit(){if(confirm("Are you ready to submit your form? ")){return true;}else{return false;}

}</script></head>

<body><form action="/cgi-bin/testform.cgi" method="post">Enter your user id:<input type="text"

name="textbox"value="">

<br>Type your password:<input type="password"

name="secret"><p><input type="submit"

onClick="readySubmit();"></body>

</html>

onSubmit event handler – E13<html>

<head><title>onSubmit Event Handler and Forms</title><script language="JavaScript">

function readySubmit(){if(confirm("Are you ready to submit your form? ")){return true;}else{return false;}

}</script></head>

<body><form action="/cgi-bin/testform.cgi" method="post" onSubmit=“return(readySubmit());" >

Enter your user id:<input type="text"



name="secret"><p><input type="submit" >

</body>

</html>

onReset event handler – E14<html>

<head><title>The onReset Event</title><script language="JavaScript">

function resetAll(){if(confirm("Do you want to reset the form to its default values? ")){return true;}else{return false;}

}</script></head>

<body><form action="/cgi-bin/testform.cgi" method="post" onReset="return resetAll();" >Enter your user id:<input type="text"



name="secret"><p><input type="submit"

onClick="readySubmit();"> // function from previous example<input type="reset"

value="Reset Form"></body>

</html>

More on this keyword – E15<html>

<head><title>An HTML form and the "this" keyword and Event Handler</title><script language="JavaScript">

function checkForm(yourinfo){if(yourinfo.namestring.value == ""){ // Check for an empty string

alert("Please type in your name");return(false);

}else{return(true);}

}</script></head>

<body><b><form name="info" action="/cgi-bin/bookstuff/form1.cgi" method="post" onSubmit="return checkForm(this)">

<p><font size="+1"><p>Type your name here:<input type="text" name="namestring" size="50"><p><input type="submit" value="Submit"><input type="reset" value="Clear"></form></body>

</html>

Button input type – E16<html>

<head><title>button input type</title><script language="JavaScript">

function greetme(){alert("Why did you click me like that? ");}</script></head>

<body><form name="form1“>

<input type="button"

value="Click me!"onClick="greetme()">

</form></body>

</html>

submit() and reset() methods – E17<html>


<body><b><form name=myForm action="http://localhost/cgi-bin/environ.pl" method="post"><p><fieldset><legend><font size="+1"> All About You</legend><p><font size=3 color="blue">Type your name here:<input type="text"

name="namestring"size="50">

<p>Talk about yourself here:<br><textarea name="comments"

align="left"rows="5" cols="50">I was born...

</textarea><p><b>Choose a work place:</b><br><input type="checkbox"

name="place"value="LA">Los Angeles<br>

<input type="checkbox"name="place"value="SJ">San Jose<br>

<input type="checkbox"name="place"value="SF"checked>San Francisco

<p></fieldset></form><p><a href="#" onClick="javascript: myForm.submit();">Click here to submit this form</a><p><a href="#" onClick="javascript: myForm.reset();">Click here to reset this form</a></body>

</html>

displaying a form in a pop-up menu – E18<html>

<head><title>Display Form Input</title><script language="JavaScript">function showForm(myform) {

NewWin=window.open('','','width=300,height=200');name_input="<b>Your name: " + myform.user_name.value + "</b><br>";NewWin.document.write(name_input);phone_input="<b>Your phone: " + myform.user_phone.value + "</b><br>";NewWin.document.write(phone_input);

}function close_window(){

NewWin.window.close();}</script></head><hr>

<body><h3> Display form data in a little window</h2><p><form name="formtest" >

Please enter your name: <br><input type="text" size="50" name="user_name"><p>Please enter your phone: <br><input type="text" size="30" name="user_phone"><p><input type="button"value="show form data"onClick="showForm(this.form)";>

</form><font size="+1"><a href="javascript:void(0)" onClick="close_window()">Click here to close little window</a></font></body>

</html>

document objects forms, images and links. the document object model each element of an html...

Documents