Aula10
advertisement
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.property
document.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=60
onClick="this.value='Greetings and Salutations, '+
document.form1.yourname.value+ '!';">
<p>
<input type="reset">
</form>
</body>
</html>
<html>
password Object – E21
<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>
<html>
Text Area Boxes – E22
<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>
<html>
Single Selection List – E23
<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>
<html>
Single Selection list – E24
<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=radio
name="color"
value="#339966">teal<br>
<input type=radio
name="color"
value="#FF33CC">magenta<br>
<input type=radio
name="color"
value="#FFFF66">light yellow<br>
<input type=radio
name="color"
value="#FF9933">light orange<br>
<p>
<input type=button
value="Click for Color" onClick="changeBg(this.form);">
<input type=reset>
</form>
</body>
</html>
<html>
Checkboxes – E27
<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=checkbox
name="topping"
value="pineapple">Pineapple<br>
<input type=checkbox
name="topping"
value="Canadian bacon">Canadian bacon<br>
<input type=checkbox
name="topping"
value="anchovies">Anchovies<br>
<input type=checkbox
name="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 value
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(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 in
if((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 address
if(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 image
baby1.src="baby1image.jpg";
var baby2=new Image(); // Preload an image
baby2.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=5
width="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=true
loop=false
volume=100
autostart=true>
<a href="javascript:stopSound()">Stop that noise!</a>
<br>
<img src=“Pizza_chef.jpg" border="2" width=500 height=200>
</body>
</html>