1 / 22

The Document Objects

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: "

reegan
Download Presentation

The Document Objects

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The Document Objects Forms, Images, and Links

  2. 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>

  3. 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>

  4. 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>

  5. 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>

  6. 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>

  7. 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>

  8. 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>

  9. 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>

  10. 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>

  11. 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>

  12. 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>

  13. 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>

  14. 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>

  15. 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>

  16. 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>

  17. 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>

  18. 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>

  19. 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>

  20. 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>

  21. 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>

  22. 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>

More Related