220 likes | 340 Views
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: "
E N D
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>
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=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>
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=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>