Date post: | 29-Dec-2015 |
Category: |
Documents |
View: | 229 times |
Download: | 2 times |
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>