Document Objects. JavaScript Examples. Παράδειγμα 1: Απιθμόρ εικόνων ζε μία ζελίδα: <html> <body>

HTML
DOWNLOAD

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "Document Objects. JavaScript Examples. Παράδειγμα 1: Απιθμόρ εικόνων ζε μία ζελίδα: <html> <body>"

Βαραββᾶς Αθανασίου
8 χρόνια πριν
Προβολές:

1 Document Objects JavaScript Examples Παράδειγμα 1: Απιθμόρ εικόνων ζε μία ζελίδα: <img border="0" src="klematis.jpg" width="150" height="113" /> <img border="0" src="klematis2.jpg" width="152" height="128" /> <p>number of images: document.write(document.images.length); </p> Παράδειγμα 2: Ημεπομηνία και ώπα ηελεςηαίαρ ηποποποίηζηρ ηηρ ζελίδαρ: This document was last modified on: document.write(document.lastmodified); Παράδειγμα 3: Ανοίγονηαρ ένα εξωηεπικό stream, και πποζθέηονηαρ κείμενο: function createdoc() var doc=document.open("text/html","replace"); var txt="learning about the HTML DOM is fun!"; doc.write(txt); doc.close(); <input type="button" value="new document" onclick="createdoc()" /> Παράδειγμα 4: Ανοίγονηαρ ένα εξωηεπικό stream, και πποζθέηονηαρ κείμενο: function createdoc() var doc=document.open("text/html","replace"); var txt="learning about the HTML DOM is fun!"; doc.write(txt); doc.close(); <input type="button" value="new document" onclick="createdoc()" /> WEB: Page 1

2 Image Objects JavaScript Examples Παράδειγμα 1: Σηοίσιζη εικόναρ: function alignimg() document.getelementbyid("compman").align="right"; <img id="compman" src="compman.gif" alt="computerman" width="107" height="98" /> <p>some text. Some text. Some text. Some text.</p> <input type="button" onclick="alignimg()" value="align Image" /> Παράδειγμα 2: Ππόζθεζη πεπιγπάμμαηορ γύπω από μία εικόνα: function addborder() document.getelementbyid("compman").border="2"; <img id="compman" src="compman.gif" alt="computerman" width="107" height="98" /> <input type="button" onclick="addborder()" value="add border" /> Παράδειγμα 3: Αλλάζονηαρ μέγεθορ μιαρ εικόναρ: function changesize() document.getelementbyid("compman").height="250"; document.getelementbyid("compman").width="300"; <img id="compman" src="compman.gif" width="107" height="98" /> <input type="button" onclick="changesize()" value="change size of image" /> Παράδειγμα 4: Χαμηλώνονηαρ ηην ανάλςζη μιαρ εικόναρ: <img id="compman" src="compman.gif" lowsrc="compman_lowres.gif" alt="computerman" width="107" height="98" /> <br /> WEB: Page 2

3 var x=document.getelementbyid("compman"); document.write('<a href="' + x.lowsrc + '">Low resolution</a>'); Παράδειγμα 5: Ανηικαθιζηώνηαρ μία εικόνα: function changesrc() document.getelementbyid("myimage").src="hackanm.gif"; <img id="myimage" src="compman.gif" width="107" height="98" /> <input type="button" onclick="changesrc()" value="change image" /> Event Objects Παράδειγμα 1: Αναγνώπιζη απιζηεπού ή δεξιού κλικ πονηικιού: function whichbutton(event) if (event.button==2) alert("you clicked the right mouse button!"); else alert("you clicked the left mouse button!"); <body onmousedown="whichbutton(event)"> <p>click in the document. An alert box will alert which mouse button you clicked.</p> Παράδειγμα 2: Αναγνώπιζη ζε ποιο HTML ζηοισείο έγινε κλικ: function whichelement(e) var targ; if (!e) var e=window.event; if (e.target) targ=e.target; WEB: Page 3

4 else if (e.srcelement) targ=e.srcelement; if (targ.nodetype==3) // defeat Safari bug targ = targ.parentnode; var tname; tname=targ.tagname; alert("you clicked on a " + tname + " element."); <body onmousedown="whichelement(event)"> <p>click somewhere in the document. An alert box will alert the tag name of the element you clicked on.</p> <h3>this is a header</h3> <p>this is a paragraph</p> <img border="0" src="ball16.gif" width="29" height="28" alt="ball"> Μικροεφαρμογέσ Παράδειγμα 1: Επικύπωζη ηων Σηοισείων μιαρ Φόπμαρ: function validate() x=document.myform at=x. .value.indexof("@") code=x.code.value firstname=x.fname.value submitok="true" if (at==-1) alert("check address!") submitok="false" if (code<1 code>10) alert("the number is not acceptable. Please retry.") submitok="false" if (firstname.length>10) alert("the name is not acceptable. Please retry.") submitok="false" WEB: Page 4

5 if (submitok=="false") return false <form name="myform" action="submitpage.html" onsubmit="return validate()"> address : <input type="text" name=" " size="20"><br /> Pick a number between 1-10 : <input type="text" name="code" size="20"><br /> Choose a name (up to 10 characters) : <input type="text" name="fname" size="20"><br /> <input type="submit" value="submit"> </form> Παράδειγμα 2: Λίζηα επιλογήρ ζε μία θόπμα: function put() txt=document.forms[0].mylist. options[document.forms[0].mylist.selectedindex].text document.forms[0].favorite.value=txt <form> Please choose your favourite browser : <select name="mylist" onchange="put()"> <option>internet Explorer</option> <option>chrome</option> <option>opera</option> <option>firefox</option> </select> WEB: Page 5

6 Your favourite browser is: <input type="text" name="favorite" size="20"> </form> Παράδειγμα 3: Κςλιόμενο μήνςμα: <script language="javascript"> pos = 0; msg = "This is my message - "; msg += "Cool yeah?!"; function ScrollMessage() pos); var newtext = msg.substring(pos, msg.length) + " " + msg.substring(0, t1.firstchild.nodevalue = newtext; pos++; if (pos>msg.length) pos=0; window.settimeout("scrollmessage()", 200); // end function <body onload="scrollmessage();"> <h1> My message: </h1> <table width="90%" border="1"> <tr> <td id="t1" width="90%"> </td> </tr> </table> WEB: Page 6

Σχετικά έγγραφα

Προγραμματισμός Διαδικτύου

Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Πανεπιστήμιο Δυτικής Μακεδονίας 1 Άδειες Χρήσης Το παρόν