AI

Σειρές Μαθημάτων

Σχετικά με το WLearn.gr

HTML Events

Γεγονός onunload

Το Γεγονός unonload εκτελεί μια λειτουργία όταν ο χρήστης κλείνει την τρέχουσα σελίδα ή ανοίγει μια άλλη σελίδα. Το unonload μπορεί να τοποθετηθεί στις ετικέτες <body> και <frameset>

Παράδειγμα 1

Αν κλείσετε την σελίδα αυτή ή πατήσετε κάποιο σύνδεσμο για να ανοίξετε μια άλλη σελίδα, τότε θα εκτελεστεί η λειτουργία disp_alert() η οποία εμφανίζει ένα μήνυμα.

Δείτε τον κώδικα:
Το γεγονός onunload
<html>
<head>
<title>WLearn.gr</title>

<script type="text/javascript">
<!--

function disp_alert()
{
alert("Μόλις εκτελέστηκε ένα Γεγονός onunload")
}

//-->
</script>

<body onunload="disp_alert()">

...περιεχόμενο σελίδας...

</body>
</html>

Γεγονός onsubmit

Το onsubmit είναι το Γεγονός κατά το οποίο ο χρήστης πατάει το κουμπί submit για να υποβάλει μια Φόρμα. Το onsubmit τοποθετείται στην ετικέτα <form>. Το χρησιμοποιούμε πολύ συχνά για να ελέγχουμε την ορθότητα των τιμών που πληκτρολογεί ο χρήστης σε πεδία μιας Φόρμας πριν την υποβολή της. Με τον έλεγχο της ορθότητας των τιμών εννοούμε την σωστή πληκτρολόγηση τιμών ή κειμένου από τον χρήστη σύμφωνα με την μάσκα των πεδίων που έχουμε εμείς αποφασίσει (π.χ. μέγιστο αριθμό χαρακτήρων, μεγαλύτερο από μια τιμή, απαραίτητη η ύπαρξη δύο συμβόλων κτλ.) Για να γίνεται ο έλεγχος των τιμών των πεδίων μιας Φόρμας και έπειτα να επιτρέπετε ή να απαγορεύεται η υποβολή της, γράφουμε την ετικέτα <form> έτσι:
<form name="formName" onsubmit="return functionName()">

Η λειτουργία functionName συνήθως αποτελείται από μια ή περισσότερες συνθήκες οι οποίες ελέγχουν τις τιμές ή τα κείμενα των πεδίων της Φόρμας που πληκτρολογεί ο χρήστης. Αν οι τιμές αυτές είναι σωστές τότε η λειτουργία επιστρέφει στο onsubmit την τιμή true, που σημαίνει ότι επιτρέπεται η υποβολή της Φόρμας. Στην αντίθετη περίπτωση, όταν δηλαδή οι τιμές που πληκτρολόγησε ο χρήστης παραβιάζουν τους κανόνες που θέσαμε, τότε η λειτουργία επιστρέφει την τιμή false και απαγορεύει την υποβολή της Φόρμας

Μάθετε περισσότερα για τις Φόρμες

Παράδειγμα 1

Παρακάτω θα υποθέσουμε ότι έχουμε μια Φόρμα εγγραφής μελλών σε σχολή σκοποβολής. Για να γραφτεί κάποιος εκεί αρκεί να δώσει το ονοματεπώνυμο του και την ηλικία του. Η σχολή έχει τον εσωτερικό κανονισμό σύμφωνα με τον οποίο δέχεται μέλη ηλικίας άνω των 18 ετών. Η παρακάτω Φόρμα εγγραφής λοιπόν έχει 3 πεδία κειμένου: ένα για το όνομα, ένα για το επώνυμο και ένα για την ηλικία. Όταν η γραμματέας της σχολής συμπληρώνει την Φόρμα και πατάει το κουμπί υποβολής (onsubmit), εκτελείται μια λειτουργία Javascript η οποία ελέγχει αν η ηλικία είναι μικρότερη του 18. Στην περίπτωση που είναι μικρότερη του 18 τότε θα εμφανίζει το μήνυμα: 'Δεν επιτρέπεται η εγγραφή. Η ηλικία είναι μικρότερη του 18.' και δεν θα γίνεται υποβολή της Φόρμας. Δοκίμασε το
Το γεγονός onsubmit
<html>
<head>
<title>WLearn.gr</title>

<script type="text/javascript">
<!--
function check_form() {
if (registerForm.ilikia.value > 18)
return true
else
alert("Δεν επιτρέπεται η εγγραφή. Η ηλικία είναι μικρότερη του 18")
return false
}

//-->
</script>

<body>
<form action="doityourself/register_in_skopovoli.php" method="post" name="registerForm" onSubmit="return check_form()">
Όνομα: <input name="onoma" type="text" size="20" maxlength="20"> <br />
Επώνυμο: <input name="eponimo" type="text" size="20" maxlength="20"> <br />
Ηλικία: <input name="ilikia" type="text" size="2" maxlength="2"> <br />
<input name="submit" type="submit" value="εγγραφή">
</form>

</body>
</html>
Δοκίμασε το
Η ετικέτα <form> περιέχει το onsubmit="return check_form()". Όταν στην Φόρμα αυτή συμβαίνει η αποστολή των δεδομένων της, πριν σταλούν τα δεδομένα εκτελείται η JavaScript λειτουργία check_form() η οποία επιστρέφει (return) true αν η ηλικία είναι μεγαλύτερη του 18 και false αν είναι μικρότερη του 18. Αν η τιμή που θα επιστρέψει η JavaScript λειτουργία check_form() είναι true τότε θα σταλούν τα δεδομένα της Φόρμας, αν επιστρέψει την τιμή false δεν θα σταλούν τα δεδομένα.

Γεγονός onselect

Το onselect είναι το Γεγονός κατά το οποίο ο χρήστης επιλέγει κείμενο από ένα πεδίο κειμένου μιας Φόρμας (<input type="text">) ή από μια περιοχή κειμένου μιας Φόρμας (<textarea>)

Μάθετε περισσότερα για τις Φόρμες

Παράδειγμα 1

Παρακάτω έχουμε μια περιοχή κειμένου η οποία περιέχει το Γεγονός onselect. Αν επιλέξετε με το ποντίκι σας μια λέξη ή ένα μέρος του κειμένου , τότε θα εμφανιστεί ένα κουτί με το μήνυμα: 'Μόλις εκτελέστηκε ένα Γεγονός onselect'.

Δείτε τον κώδικα:
Το γεγονός onselect
<html>
<head>
<title>WLearn.gr</title>

<script type="text/javascript">
<!--
function disp_alert()
{
alert("Μόλις εκτελέστηκε ένα Γεγονός onselect")
}
//-->
</script>

<body>
<form>
Κείμενο:
<textarea name="textarea" cols="50" rows="3" onSelect="disp_alert()">Το onselect είναι το Γεγονός κατά το οποίο ο χρήστης επιλέγει κείμενο από ένα πεδίο κειμένου μιας Φόρμας (&lt;input type="text"&gt;) ή από μια περιοχή κειμένου μιας Φόρμας (&lt;textarea&gt;) </textarea>
</form>
</body>
</html>
Δοκίμασε το

Γεγονός onmouseover

Το onmouseover είναι το Γεγονός κατά το οποίο ο χρήστης δείχνει με το ποντίκι ένα στοιχείο της σελίδας (σύνδεσμο, εικόνα, παράγραφο κτλ.)

Παράδειγμα 1

Το γεγονός onmouseover σε πεδία κειμένου
Παρακάτω έχουμε δύο πεδία κειμένου μέσα σε μια Φόρμα τα οποία περιέχουν το Γεγονός onmouseover. Αν δείξετε με το ποντίκι σας επάνω σε οποιοδήποτε από τα δύο αυτά πεδία, τότε θα εμφανιστεί ένα κουτί με το μήνυμα: 'Μόλις εκτελέστηκε ένα Γεγονός onmouseover'.

Δείτε τον κώδικα:
Το γεγονός onmouseover
<html>
<head>
<title>WLearn.gr</title>

<script type="text/javascript">
<!--
function disp_alert()
{
alert("Μόλις εκτελέστηκε ένα Γεγονός onmouseover")
}
//-->
</script>

<body>
<form>
Όνομα:<input name="pedio1" type="text" size="10" onmouseover="disp_alert()"> &nbsp;&nbsp;&nbsp;
Επώνυμο: <input name="pedio2" type="text" size="10" onmouseover="disp_alert()"> &nbsp;&nbsp;&nbsp;
</form>
</body>
</html>
Δοκίμασε το

Παράδειγμα 2

Το onmouseover λειτουργεί και σε εικόνες.

Δείτε τον κώδικα:
Το γεγονός onmouseover σε εικόνα
<html>
<head>
<title>WLearn.gr</title>

<script type="text/javascript">
<!--
function disp_alert_forImage()
{
alert("Μόλις δείξατε την εικόνα.")
}

//-->
</script>

<body>
<img xsrc="images/logo.gif" width="250" height="90" onmouseover="disp_alert_forImage()">
</body>
</html>
Δοκίμασε το

Παράδειγμα 3

Το onmouseover λειτουργεί επίσης και σε παραγράφους, δηλαδή σε κείμενα ορισμένα από τις ετικέτες <p> και </p>.


Δείτε τον κώδικα:
Το γεγονός onmouseover σε παράγραφο
<html>
<head>
<title>WLearn.gr</title>

<script type="text/javascript">
<!--
function disp_alert_paragraph()
{
alert("Μόλις δείξατε επάνω στην παράγραφο.")
}
//-->
</script>

<body>
<p onmouseover="disp_alert_paragraph()">Το onmouseover λειτουργεί επίσης και σε παραγράφους, δηλαδή σε κείμενα ορισμένα από τις ετικέτες &lt;p&gt; και &lt;/p&gt;. Αυτή η παράγραφο που διαβάζετε περιέχει το Γεγονός onmouseover, πράγμα που σημαίνει ότι αν δείξετε με το ποντίκι σας οπουδήποτε μέσα στην παράγραφο θα ενεργοποιηθεί μια λειτουργία Javascript που στην προκειμένη περίπτωση είναι η εμφάνιση ενός μηνύματος.</p>
</body>
</html>
Δοκίμασε το

Γεγονός onload

Το Γεγονός onload εκτελεί μια λειτουργία όταν η σελίδα φορτώνεται στον browser του χρήστη. Το onload μπορεί να τοποθετηθεί στις ετικέτες <body> και <frameset>

Παράδειγμα 1

Παρακάτω έχουμε δύο πεδία κειμένου και μια Λίστα Επιλογών μέσα σε μια Φόρμα τα οποία αρχικοποιούμε με την λειτουργία initialize βάζοντας το Γεγονός onload στην ετικέτα <body>. Έτσι, όταν φορτώσει η σελίδα στον browser του χρήστη, θα τρέξει η λειτουργία που περιέχει το onload, δηλαδή η initialize, η οποία δίνει αρχικές τιμές στα πεδία της Φόρμας.

Δείτε τον κώδικα:
Το γεγονός onclick
<html>
<head>
<title>WLearn.gr</title>

<script type="text/javascript">
<!--

function initialize()
{
document.forma.pedio1.value = 'Akis'
document.forma.pedio2.value = 'Kariofyllis'
document.forma.fylo.value = 'male'
}

//-->
</script>

<body onload="initialize()">
<form name="forma">
Όνομα:<input name="pedio1" type="text" size="10"> &nbsp;&nbsp;&nbsp;
Επώνυμο: <input name="pedio2" type="text" size="10"> &nbsp;&nbsp;&nbsp;
Ηλικία:
<select name="fylo">
<option value="male" selected="selected" >Ανδρας</option>
<option value="female">Γυναίκα</option>
</select>
</form>
</body>
</html>
Δοκίμασε το

Γεγονός onfocus

Το onfocus είναι το Γεγονός κατά το οποίο ο χρήστης εστιάζει με το ποντίκι του επάνω σε ένα στοιχείο μιας Φόρμας. Είναι δηλαδή το ακριβώς αντίθετο με το onblur. Το onfocus λειτουργεί μόνο σε στοιχεία Φόρμας.

Μάθετε περισσότερα για τις Φόρμες

Παράδειγμα 1

Παρακάτω έχουμε δύο πεδία κειμένου μέσα σε μια Φόρμα τα οποία περιέχουν το Γεγονός onfocus. Αν εστιάσετε με το ποντίκι σας σε ένα από αυτά τα πεδία τότε θα εμφανιστεί ένα κουτί με το μήνυμα: 'Μόλις εκτελέστηκε ένα Γεγονός onfocus'.

Δείτε τον κώδικα:
Το γεγονός onfocus
<html>
<head>
<title>WLearn.gr</title>

<script type="text/javascript">
<!--
function disp_alert()
{
alert("Μόλις εκτελέστηκε ένα Γεγονός onfocus")
}
//-->
</script>

<body>
<form>
Όνομα:<input name="pedio1" type="text" size="10" onfocus="disp_alert()"> &nbsp;&nbsp;&nbsp;
Επώνυμο: <input name="pedio2" type="text" size="10" onfocus="disp_alert()">
</form>
</body>
</html>
Δοκίμασε το
Όπως βλέπετε κάθε ένα από τα δύο πεδία κειμένου της φόρμας περιέχουν το onfocus="disp_alert()". Αυτό σημαίνει πως κάθε φορά που εκτελείται το γεγονός onfocus επάνω στα στοιχεία αυτά της Φόρμας τότε θα εκτελεστεί η λειτουργία disp_alert() η υλοποίηση της οποίας βρίσκεται στο τμήμα head της σελίδας, μέσα στις ετικέτες <script> και </script>. Η λειτουργία disp_alert περιέχει μόνο μια μέθοδο JavaScript, την μέθοδο alert η οποία εμφανίζει το κείμενο μέσα στα εισαγωγικά μέσα σε ένα Windows box.