παραδείγματα JavaScript HTML DOM Events Nikos Balatsoukas Ιουλίου 28, 2013 Javascript Edit
javascript-dom-event
Σε αυτά τα παραδείγματα JavaScript θα εξηγήσουμε τον τρόπο με τον οποίο η γλώσσα javascript διαχειρίζεται τα HTML events Το HTML DOM επιτρέπει στη γλώσσα JavaScript να αποκρίνεται σε HTML events. Ακολουθούν παραδείγματα JavaScript με τα οποία θα γίνει κατανοητή η χρήση των events. Η JavaScript μπορει να εκτελεστεί οποτεδήποτε προκύψει ένα event, για παράδειγμα όταν ένας χρήστης κάνει click πάνω σε ένα HTML element.
παραδείγματα JavaScript Για να εκτελέσετε κώδικα όταν ο χρήστης κάνει click στο element, πρέπει να βάλετε τη javascripy μέσα στο HTML event attribute
1
onclick=JavaScript
Παραδείγματα HTML events: Όταν ο χρήστης κάνει click με το ποντίκι Όταν φορτώσει η ιστοσελίδα Όταν φορτώσει η εικόνα Όταν το ποντίκι περάσει πάνω από ένα στοιχείο Όταν σταλεί συμπληρωμένη μια φόρμα Όταν ο χρήστης πατήσει ένα πλήκτρο
Στο επόμενο παράδειγμα, τα περιεχόμενα του στοιχείου h1 θα αλλάξουν όταν ο χρήστης πατήσει πάνω του:
1 2 3 4 5 6
<!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1> </body> </html>
Στο επόμενο παράδειγμα, όπως και στα περισσότερα παραδείγματα JavaScript, η συνάρτηση καλείται από τον event handler:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<!DOCTYPE html> <html> <head> <script> function changetext(id) { id.innerHTML="Ooops!"; } </script> </head> <body> <h1 onclick="changetext(this)">Click on this text!</h1> </body> </html>
Για να συνδέσουμε events σε HTML elements μπορούμε να χρησιμοποιήσουμε τα event attributes, όπως φαίνεται στα επόμενα παραδείγματα JavaScript
1
<button onclick="displayDate()">Try it</button>
Ακολουθεί ολοκληρωμένη σελίδα html που χρησιμοποιεί αυτή τη εντολή
1 2 3 4 5 6 7 8 9 10
<!DOCTYPE html> <html> <body> <p>Click the button to execute the <em>displayDate()</em> function.</p> <button onclick="displayDate()">Try it</button> <script> function displayDate() { document.getElementById("demo").innerHTML=Date();
11 12 13 14 15 16 17 18 19
} </script> <p id="demo"></p> </body> </html>
Στο παραπάνω παράδειγμα, η συνάρτηση displayDate θα εκτελεστεί όταν γίνει click στο button. To HTML DOM επιτρέπει να συνδέσουμε events σε HTML elements χρησιμοποιώντας JavaScript: Για παράδειγμα, αντιστοιχίζουμε το onclick event σε ένα button element
1 2 3
<script> document.getElementById("myBtn").onclick=function(){displayDate()}; </script>
Ακολουθεί ολοκληρωμένη σελίδα html που χρησιμοποιεί αυτή τη εντολή, που συνδυάζει παραδείγματα JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
<!DOCTYPE html> <html> <head> </head> <body> <p>Click the button to execute the <em>displayDate()</em> function.</p> <button id="myBtn">Try it</button> <script> document.getElementById("myBtn").onclick=function(){displayDate()}; function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html>
Τα onload και onunload events μπορούν να χρησιμοποιηθούν για τη διαχείρηση cookies
1
<body onload="checkCookies()">
Ακολουθεί ολοκληρωμένη σελίδα html που χρησιμοποιεί αυτή τη εντολή
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<!DOCTYPE html> <html> <body onload="checkCookies()"> <script> function checkCookies() { if (navigator.cookieEnabled==true) { alert("Cookies are enabled") } else { alert("Cookies are not enabled") } } </script> <p>An alert box should tell you if your browser has enabled cookies or not.</p> </body> </html>
Το onchange event συχνά χρησιμοποιείται για validation των πεδίων μιας φόρμας. Παράδειγμα:
1
<input type="text" id="fname" onchange="upperCase()">
Ακολουθεί ολοκληρωμένη σελίδα html που χρησιμοποιεί αυτή τη εντολή
1 2 3 4 5 6 7 8 9 10
<!DOCTYPE html> <html> <head> <script> function myFunction() { var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script> </head> <body>
11 12 13 14 15 16 17 18
Enter your name: <input type="text" id="fname" onchange="myFunction()"> <p>When you leave the input field, a function is triggered which transforms the input </body> </html>
Σε αυτό το άρθρο είδαμε παραδείγματα JavaScript σχετικά με HTML DOM Events. Στο infopolis.gr μπορείτε να βρείτε πολλά άρθρα σχετικά με παραδείγματα JavaScript για άλλες πτυχές της γλώσσας
JavaScript HTML DOM Events javascript μαθηματα μαθε javascript μαθημα javascript παραδείγματα JavaScript
Πηγή: http://www.infopolis.gr/javascript-html-dom-events/