The Document Objects Forms, Images, and Links. The Text object – E19 Text Boxes Enter your name:...

The Document Objects

Forms, Images, and Links

The Text object – E19<html>

<head><title>Text Boxes</title></head>

<body bgcolor="pink"><form name="form1">Enter your name:<br>

<input type="text"name="namefield"size=30 value="Name: "onFocus="document.form1.namefield.select()">// onFocus="this.select()">

</form><font face=arial size="+1"><script language="JavaScript">// How do we reference the form in JavaScript? Go down the document

tree:document.form1.element.propertydocument.write( "The type of the input device is:<em> "+ document.form1.namefield.type);document.write( "<br></em>The textbox is named:<em> "+ document.form1.namefield.name);document.write( "<br></em>The value in the text field is:<em> “+ document.form1.namefield.value);document.write( "<br></em>The size of the text field is:<em> "+ document.form1.namefield.size);</script></body>

<html>

Assigning value on the Fly to a text field – E20<html>

<head><title>Assigning value on the Fly to a Text Field</title></head>

<body bgcolor="aquamarine"><font face=arial size="+1"><form name="form1">

Enter your name<input type="text"

name="yourname"size=60>

<p>Click in the box<input type="text"

name="message"size=60onClick="this.value='Greetings and Salutations, '+document.form1.yourname.value+ '!';">

<p><input type="reset">

</form></body>

</html>

password Object – E21<html>

<head><title>Password Boxes</title><script language="Javascript">

function verify(pw){if ( pw.value == "letmein" ){alert("The chamber door will open now!");}else{alert("Sorry, you cannot enter. Please leave.");}

}</script></head>

<body bgcolor="#330033"><font color="FFCCFF"><center><h2> Welcome To The Chamber of Secrets<h2>

<img src="chamberofsecrets.jpg"><br>

To enter, a password is required:<br><form name="form1">

<input type="password"name="passwfield"size="30"onBlur="return verify(this)">

</form><input type=button value="Knock to verify"><font face=arial size="+1"></body>

</html>

Text Area Boxes – E22<html>

<head><title>Text Area Boxes</title></head>

<font face=verdana><body bgcolor="lightgreen"><form name="form1"><b>

Finish the story<br><b><textarea name="story" rows=8 cols=60 >Once upon a time, there were three little ...</textarea></form><script language="JavaScript">

document.write( "The type of the input device is:<em> "+ document.form1.story.type);document.write( "<br></em>The text area is named:<em> "+ document.form1.story.name);document.write( "<br></em>The number of rows in the text area is:<em> “ + document.form1.story.rows);document.write( "<br></em>The value in the text area is:<em> "+ document.form1.story.value);document.write( "<br></em>The number of cols in the text area is:<em> "+ document.form1.story.cols);

</script></body>

</html>

Single Selection List – E23<html>

<head><title>Drop Down Menus</title></head>

<body bgcolor=lightgreen><font face=arial ><b>Select a Course<form name="form1">

<select name="menu1" size="4" ><option name="choice1" value="Perl1">Intro to Perl</option><option name="choice2" value="Perl2">Advanced Perl</option><option name="choice3" value="Unix1">Intro to Unix</option><option name="choice4" value="Shell1">Shell Programming</option>

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

document.write("The name of the selection list is ", document.form1.menu1.name);document.write("<br>The number of items in the selection list is ", document.form1.menu1.length);document.write("<br>The item currently selected is option["+ document.form1.menu1.selectedIndex + "]");document.write("<br>The text in the first selection is "+ document.form1.menu1.options[0].text);document.write("<br>The text in the second selection is "+ document.form1.menu1.options[1].text);

</script></body>

</html>

Single Selection list – E24<html>

<head><title>Drop-Down Menus</title><script language="JavaScript">

function schedule(f){if(f.menu1.selectedIndex == 0){// Could also say: document.form1.menu1.selectedIndex

f.text1.value="PL100, Feb 3-7, 9am to 5pm, Room 2133, Dr. Baloney “ // Could also say: document.form1.text1.value

}if(f.menu1.selectedIndex == 1){f.text1.value="PL200 Feb 10-13 9am to 5pm, Room 209B, Ms. Eclectic";}if(f.menu1.selectedIndex == 2){f.text1.value="UX101 Mar 2-6 9am to 5pm, Room 209, Mr. Nerdly";}if(f.menu1.selectedIndex == 3){f.text1.value="SH201 Apr 10-13 9am to 5pm, Room 209B, Miss Bashing";}

}</script></head>

<body bgcolor=lightgreen><font face=arial ><b><form name="form1">Select a Course<br>

<select name="menu1" size="4" onChange="schedule(this.form)"><option name="choice1" value="Perl1">Intro to Perl</option><option name="choice2" value="Perl2">Advanced Perl</option><option name="choice3" value="Unix1">Intro to Unix</option><option name="choice4" value="Shell1">Shell Programming</option>

</select><p><input type="text" name="text1" size=60 /></form></body>

</html>

Multiple Selection List – E25<html>

<head><title>Drop Down Menus</title><script language="JavaScript">

function showme(form){var choices="";for (i=0;i< form.vacation.options.length;i++){

if( form.vacation.options[i].selected == true){choices += form.vacation.options[i].text+"\n";}}alert(choices);

}</script></head>

<body bgcolor=lightgreen><font face=arial ><b><form name="form1" onSubmit="showme(this);">Where do you want to go? <br><select name="vacation" size=4 multiple>

<option>Maui</option><option>Jamaica</option><option>Bali</option><option>Virgin Islands</option>

</select><p><input type="submit"><input type="reset"></form></body>

</html>

Radio Buttons – E26<html>

<head><title>Radio Buttons</title><script name="JavaScript">

function changeBg(f){for (var i = 0; i < f.color.length;i++){

if(f.color[i].checked){document.bgColor= f.color[i].value;}}

}</script></head>

<body bgcolor="#CCFFFF"><font face="arial"><b><form name="formradio">Pick a background color:<p><input type=radio

name="color"value="#0099CC">dark cyan<br>

<input type=radioname="color"value="#339966">teal<br>

<input type=radioname="color"value="#FF33CC">magenta<br>

<input type=radioname="color"value="#FFFF66">light yellow<br>

<input type=radioname="color"value="#FF9933">light orange<br>

<p><input type=button

value="Click for Color" onClick="changeBg(this.form);"><input type=reset></form></body>

</html>

Checkboxes – E27<html>

<head><title>Checkboxes</title><script name="JavaScript">

function check(f){var str="";for (var i = 0; i < f.topping.length;i++){if(f.topping[i].checked){str += f.topping[i].value + "\n";}}f.order.value=str;

}function OK(){

var result= confirm("Are you sure you are ready to order? ");if(result == true){document.formchbox.submit();}else { return false;}

}</script></head>

<body bgColor="#CCFF33"><font face="verdana"><b><table border="4"><tr><td><b>Checkboxes</b></td></tr></table><form name="formchbox“ method="post“ action="/sambar50/cgi-bin/chb.pl" >

Pick your pizza toppings:<p><input type="checkbox"

name="topping"value="tomatoes">Tomatoes<br>

<input type="checkbox"name="topping"value="salami">Salami<br>

<input type=checkboxname="topping"value="pineapple">Pineapple<br>

<input type=checkboxname="topping"value="Canadian bacon">Canadian bacon<br>

<input type=checkboxname="topping"value="anchovies">Anchovies<br>

<input type=checkboxname="topping"value="extra cheese">Extra cheese<br>

<p><font size="-1">Pizza Toppings<br><textarea name="order" rows=6 cols=35 onFocus="javascript:check(this.form);">Click here to check your order!!</textarea><p>Press the pizza man to order!<br><input type=image src="Pizza_chef.gif"

onClick="javascript:return OK();"><br><input type=reset value="Clear the form"></form></body>

</html>

Simple Form Validation – Empty Fields – E28<html>

<head><title>An HTML Form and the onSubmit Event Handler</title><script language="JavaScript">

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

valuealert("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(document.info)"><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>

Simple Form Validation – Alphabetic Characters – E29<html>

<head><title>Checking Alpha Charactersl</title><script language="JavaScript">

function validate(form){if(alpha(form.first) == false){

alert ("First name is invalid");return false;

}if(alpha(form.last) == false){

alert("Last name is invalid");return false;

}return true;

}function alpha(textField ){

if( textField.value.length != 0){for (var i = 0; i < textField.value.length;i++){

var ch= textField.value.charAt(i);// alert(ch); # Using alert to see what characters are coming inif((ch < "A" || ch > "Z") && (ch< "a" || ch >"z")){ return false;}

}}else {return true;}

}</script></head>

<body bgcolor="lightgreen"><font face=verdana><b><form name="alphachk" onSubmit="return validate(this);">Enter your first name:<br><input name="first"

type="text"size=60>

<p>Enter your last name:<br><input name="last"

type="text"size=60>

<p><input type=submit value="Check it out"><input type=reset></form></body>

</html>

Simple Form Validation – E-mail Address – E30<html>

<head><title>Checking Email</title><script language="JavaScript">

function email(form){ // Validate the addressif(form.address.value.indexOf("@") != -1 && form.address.value.indexOf(".") != -1){

alert("OK address!");return true;

}else {

alert("Invalid address");return false;

}}

</script></head>

<body bgcolor="lightgreen"><font face=verdana><b><center><form name="mailchk“ action="/cgi-bin/ml.pl“ method="post“ onSubmit="return email(this);">Enter your email address:<p><input name="address"

type="text"size=60>

<p><input type=submit value="Check it out"><input type=reset></form></center></body>

</html>

Simple Form Validation – Password – E31<html>

<head><title>Checking Email</title><script language="JavaScript">

function valid(form){if( form.pass.value.length == 0 ){

alert("Please enter a password");return false;

}if( form.pass.value.length < 6 ){

alert("Password must be at least 6 characters");return false;

}for (var i = 0; i < form.pass.value.length;i++){

var ch= form.pass.value.charAt(i);if((ch < "A" || ch > "Z") && (ch< "a" || ch >"z") && (ch < "0" || ch > "9")){

alert("Password contains illegal charcters");return false;

}}alert("OK Password");return true;

}</script>

</head><body bgcolor="red"><font face=verdana><b><center><form name="passchk" onSubmit="return valid(this);">

Enter your password:<br><input name="pass"

type="password"size=33>

<p><input type=submit value="Submit Password"><input type=reset></form></center></body>

</html>

Using Images – E32<html>

<head><title>HTML Images</title></head>

<body bgcolor="lightblue"><h2>This Is Baby William</h2><img src="baby.jpg" alt="baby" border=2 align="left" hspace="10“ width="220" height="250"><pre>Father calls me William,

sister calls me Will,Mother calls me Willie,

but the fellers call me Bill!Mighty glad I ain't a girl--

ruther be a boy,Without them sashes, curls, an' things

that's worn by Fauntleroy!Love to chawnk green apples

an' go swimmin' in the lake--Hate to take the castor-ile

they give for belly-ache!Most all the time, the whole year round,

there ain't no flies on me,But jest 'fore Christmas

I'm as good a I kin be!</pre></body>

</html>

Replacing Images Dynamically – E33<html>

<head><title>HTML Images</title><script language="JavaScript">

var myImages=new Array("baby1.jpg", "baby2.jpg", "baby3.jpg", "baby4.jpg");index_val=0;function next_image(){

index_val++;if (index_val < myImages.length){document.images["display"].src = myImages[index_val];}else{

index_val=0;document.images["display"].src = myImages[index_val];

}}function previous_image(){

index_val--;if (index_val >= 0){document.images["display"].src = myImages[index_val];}else{

index_val=myImages.length - 1;document.images["display"].src = myImages[index_val];

}}

</script></head>

<body bgcolor="cornflowerblue"><h2>Baby Gallery</h2><img name="display" src="baby.jpg" width="220" height="250" ><br><a href="javascript:next_image()">Go to next baby<br></a><a href="javascript:previous_image()">Go to previous baby<br></a></body>

</html>

Replacing Images Dynamically – E34<html>

<head><title>HTML Replacing Images</title></head>

<body bgcolor="cornflowerblue"><h2>This Is Baby William</h2><img name="display" src="baby.jpg" width="220" height="250" ><script language="JavaScript">

var myImages=new Array("baby1.jpg", "baby2.jpg", "baby3.jpg");var n = prompt("Pick a number between 1 and 3","");n--;document.images["display"].src = myImages[n];

// document.images[0].src = myImages[n]</script></body>

</html>

Preloading Images – E35<html>

<head><title>Preloading Images</title><h2>This Is Baby William</h2><script language="JavaScript">

if(document.images){var baby1=new Image(); // Preload an imagebaby1.src="baby1image.jpg";var baby2=new Image(); // Preload an imagebaby2.src="baby2image.jpg";

}</script></head>

<body bgcolor="cornflowerblue"><a href="#" onMouseOver="document.willy.src=baby2.src;" onMouseOut="document.willy.src=baby1.src;"><img name="willy"

src="baby1image.jpg"align="left"alt="baby" border=2 hspace="10"width="220" height="250">

</body>

</html>

Randomly Displaying Images – E36<html>

<head><title>Preloading Images</title></head><script language="JavaScript">

ImageHome=new Array(3);for(var i=0; i<3; i++){

ImageHome[i]=new Image();}ImageHome[0].src="baby1.jpg";ImageHome[1].src="baby2.jpg";ImageHome[2].src="baby3.jpg";function myRandom(){

var n=ImageHome.length - 1;var randnum=Math.floor(Math.random() * (n + 1));document.images["display"].src = ImageHome[randnum].src;

}</script></head>

<body bgcolor="cornflowerblue"><center><h2>This Is Baby William</h2><img name="display"

src="baby.jpg"border=5width="200" height="250" >

<p><form><input type="button"

value="Click Here for Baby Picture"onClick="myRandom()"

></form></center></body>

</html>

Using links – E37<html>

<head><title>Using Links </title></head>

<body><h2>Links and their Properties</h2><a href="http://search.yahoo.com/bin/search?p=javascript">Search for Javascript Stuff</a><p><a href="http://google.com" >Go to Google</a><p>Click here for Yahoo <br><a href="http://www.yahoo.com"><img src="yahoo.bmp"></a><script language = "JavaScript">

document.write("<br><b>This document contains “ + document.links.length + " links.<br></b>");for (i = 0; i< document.links.length; i++){

document.write("<u>document.links["+i+"]:</u><br>");document.write("<b>hostname:</b> “ +document.links[i].hostname +"<br>");document.write("<b>href: </b>“ +document.links[i].href +"<br>");document.write("<b>pathname:</b>“ +document.links[i].pathname +"<br>");document.write("<b>port:</b> “ +document.links[i].port +"<br>");document.write("<b>query:</b> “ +document.links[i].query +"<br>");document.write("<b>protocol:</b> “ +document.links[i].protocol +"<br><br>");

}</script></body>

</html>

Using Links – E38<html>

<head>< title>Using Links </title><map name="my_image_map"><area shape="rect" href="union4.jpg" coords="157,117,287,203"><area shape="rect" href="union1.jpg" coords="10,12,134,96"><area shape="rect" href="union2.jpg" coords="171,12,286,91"><area shape="rect" href="union3.jpg" coords="5,118,132,201"></map></head>

<body><h2>Christmas on Union Square</h2><img src="union1.jpg" width=300 height=240 usemap="#my_image_map"><script language="JavaScript">

var lstr = "<ul>";for ( var i = 0; i < document.links.length; i++ ){

lstr += "<li><a href=" + document.links[i].href;lstr += ">link[" + i + "] </a>\n";

}lstr = “</ul>”;document.open();document.write(lstr);document.close();

</script></body>

</html>

Embeds Object – E39<html>

<head><script language="JavaScript">

function playme(){if (document.embeds){

if(navigator.appName == "Netscape")//document.embeds[0].play();document.classical.play();

}else{document.embeds[0].run();}

}function stopSound(){document.classical.stop();}

</script></head>

<body onLoad="playme();" bgcolor="green" link="white"><center><font face="arial" size=+1 color="white"><h2>Bethoven's 5th Symphony Playing...</h2>

<embed src="Beeth5th.wav"name="classical"hidden=trueloop=falsevolume=100autostart=true>

<a href="javascript:stopSound()">Stop that noise!</a><br><img src=“Pizza_chef.jpg" border="2" width=500 height=200></body>

</html>

The Document Objects Forms, Images, and Links. The Text object – E19 Text Boxes Enter your name:...

Documents

Transcript of The Document Objects Forms, Images, and Links. The Text object – E19 Text Boxes Enter your name:...