ΚΕΝΤΡΟ ΠΛΗ.ΝΕ.Τ. Ν. ΦΛΩΡΙΝΑΣ
Η Γλώσσα Προγραμματισμού JavaScript
Εισαγωγή στην JavaScript
Η JavaScript είναι μια γλώσσα συγγραφής σεναρίων (scripting language) που χρησιμοποιείται για να προσθέσει εφέ και διαλογικότητα (αλληλεπίδραση, διαδραστικότητα, interactivity) στις ιστοσελίδες μας και είναι ανταγωνιστική της γλώσσας προγραμματισμού VBScript. Δημιουργήθηκε από την εταιρεία Netscape και το αρχικό της όνομα ήταν LiveScript.
Ο κώδικας της JavaScript γράφεται σε καθαρό κείμενο (ASCII μορφή) και ενσωματώνεται μέσα στον κώδικα της HTML, μπορεί δε να εκτελεστεί αμέσως ή όταν λαμβάνει χώρα ένα συμβάν (event). Δεν γίνεται μεταγλώττιση (compilation) του κώδικα της JavaScript, αρκεί μόνο ο φυλλομετρητής (browser) να υποστηρίζει την JavaScript.
Αν και ακούγονται ίδιες, η Java και η JavaScript δεν έχουν καμία απολύτως σχέση μεταξύ τους, ούτε στη σύνταξή τους σαν γλώσσες προγραμματισμού ούτε και στις εφαρμογές που χρησιμοποιούνται.
Παράδειγμα 1 - Η Εντολή document.write()
Ένα πρώτο απλό παράδειγμα σε JavaScript είναι το εξής :
<html>
<body>
<script type="text/javascript">
document.write("Hello from JavaScript")
</script>
</body>
</html>
Ο κώδικας της JavaScript περιέχεται ανάμεσα στα tags <script> και </script> και σαν χαρακτηριστικό (attribute) μπορούμε να χρησιμοποιήσουμε το type="text/javascript" ή το language="JavaScript". Μέσα σ' ένα αρχείο HTML μπορούμε να έχουμε όσα σύνολα tags <script> και </script> χρειαστούμε, είτε στο τμήμα head ή στο τμήμα body του εγγράφου.
Η εντολή document.write() χρησιμοποιείται για να μπορούμε να εμφανίσουμε κείμενο στην οθόνη του φυλλομετρητή μέσα από εντολές της JavaScript. Το κείμενο Hello from JavaScript θα εμφανισθεί μαζί με το υπόλοιπο κείμενο του HTML κώδικα. Αν και εδώ δεν φαίνεται καθαρά η αξία της JavaScript, θα φανεί όταν χρησιμοποιήσουμε εντολές ελέγχου, όπως είναι η if, για να μπορούμε να εμφανίσουμε διαφορετικό κείμενο ανάλογα με την τιμή κάποιων μεταβλητών ή ανάλογα με τις επιλογές που έχει κάνει ο χρήστης.
Παράδειγμα 2 - Η Εντολή document.lastModified
Για να εμφανίσουμε την ημερομηνία τελευταίας τροποποίησης μιας ιστοσελίδας, γράφουμε τον εξής κώδικα της JavaScript μέσα στον HTML κώδικα :
<html>
<body>
<script type="text/javascript">
document.write("Ημερομηνία τελευταίας τροποποίησης της σελίδας : ")
document.write(document.lastModified)
</script>
</body>
</html>
Παράδειγμα 3 - Άνοιγμα Δευτερογενών Παραθύρων
Για να εμφανίσουμε ένα άλλο παράθυρο (δευτερογενές ή εστιασμένο) εκτός από το βασικό παράθυρο του φυλλομετρητή και να τοποθετήσουμε μέσα σ' αυτό τα περιεχόμενα ενός άλλου HTML εγγράφου, γράφουμε τον εξής κώδικα :
<html>
<head>
<script type="text/javascript">
function WinOpen() {
window.open("page01.html", "Window1", "toolbar=yes");
}
</script>
</head>
</html>
Δημιουργήσαμε μια συνάρτηση (function) με όνομα WinOpen() η οποία περιέχει την εντολή window.open(), με την οποία μπορούμε να εμφανίσουμε ένα δευτερογενές παράθυρο, και η οποία έχει τις εξής παραμέτρους (ορίσματα) :
page01.html, που είναι το όνομα της ιστοσελίδας (εγγράφου) που θα εμφανισθεί μέσα στο δευτερογενές παράθυρο,
Window1, που είναι το όνομα του νέου παραθύρου και
toolbar=yes, δηλ. το νέο παράθυρο θα έχει γραμμή εργαλείων (toolbar).
Για να κληθεί τώρα η παραπάνω συνάρτηση και να εμφανισθεί το δευτερογενές παράθυρο, πρέπει μέσα στο ίδιο HTML έγγραφο και στο τμήμα <body> να γράψουμε τον εξής κώδικα για τη δημιουργία μιας φόρμας (form) :
<form>
<input type="button" name="WindowButton"
value="Κάντε κλικ εδώ για να εμφανισθεί ένα νέο παράθυρο"
onclick="WinOpen()">
</form>
Δημιουργήσαμε μια φόρμα και τοποθετήσαμε μέσα της ένα πλήκτρο εντολής (button) με όνομα WindowButton και με μια ετικέτα (τίτλο) που προτρέπει τον χρήστη να κάνει κλικ. Η ιδιότητα onclick της φόρμας είναι ένας από τους χειριστές συμβάντων (event handlers) της JavaScript και εδώ καθορίζει ότι αν κάνουμε κλικ στο πλήκτρο εντολής θα κληθεί η συνάρτηση WinOpen() οπότε και θα εμφανισθεί το παράθυρο με όνομα Window1 και μέσα του το έγγραφο (ιστοσελίδα) page01.html.
Παράδειγμα 4 - Προσθήκη Πλήκτρων Πλοήγησης
Στην JavaScript μπορούμε να δημιουργήσουμε πλήκτρα πλοήγησης (navigation buttons), τα οποία εκτελούν τις ίδιες λειτουργίες με τα γνωστά πλήκτρα Back (Πίσω) και Εμπρός (Forward) που υπάρχουν στη γραμμή εργαλείων ενός φυλλομετρητή.
<form>
<input type="button" value="Πίσω δύο σελίδες" onclick="history.go(-2)">
<input type="button" value="Προηγούμενη σελίδα" onclick="history.go(-1)">
<input type="button" value="Επόμενη σελίδα" onclick="history.go(1)">
<input type="button" value="Μπροστά δύο σελίδες" onclick="history.go(2)">
</form>
Ο χειριστής συμβάντων onclick() καλεί τη συνάρτηση history.go() με όρισμα τη σχετική σελίδα στην οποία θέλουμε να πάμε.
Παράδειγμα 5 - Δημιουργία Μηνυμάτων σε Πλαίσια Διαλόγου
Για να εμφανίσουμε μηνύματα σε πλαίσια διαλόγου σε μια ιστοσελίδα, χρησιμοποιούμε τη συνάρτηση alert(), η οποία εμφανίζει το κείμενο που της περνάμε σαν όρισμα σ' ένα πλαίσιο (παράθυρο) διαλόγου. Για να κάνουμε αλλαγή γραμμής στο κείμενο αυτό, πρέπει να συμπεριλάβουμε τον ειδικό χαρακτήρα \n.
Το παρακάτω παράδειγμα εμφανίζει ένα μήνυμα μέσα σε μια ιστοσελίδα :
<script type="text/javascript">
alert("Καλωσήρθατε στη σελίδα της Φλώρινας")
</script>
Μπορούμε να χρησιμοποιήσουμε και τους χειριστές συμβάντων onload() και onunload(), οι οποίοι καλούνται όταν έχει ολοκληρωθεί η φόρτωση μιας ιστοσελίδας ή όταν έχουμε φύγει από μια ιστοσελίδα, αντίστοιχα. Οι χειριστές αυτοί τοποθετούνται στο tag <body> ενός εγγράφου.
<body onload = alert("Καλωσήρθατε στη σελίδα της Φλώρινας")>
<body onunload = alert("Σας άρεσε η περιήγηση στη Φλώρινα;")>
Παράδειγμα 6 - Μηνύματα στη Μπάρα Κατάστασης
Για να εμφανίσουμε ένα μήνυμα στη γραμμή κατάστασης (status bar) του παραθύρου του φυλλομετρητή, καταχωρούμε μια τιμή στη μεταβλητή status του αντικειμένου window, ως εξής :
<a href="florina.html" onmouseover="window.status='Αν κάνετε κλικ θα πάτε στη σελίδα της Φλώρινας';return true"> Φλώρινα </a>
Ο χειριστής συμβάντων onmouseover() εκτελεί μια ενέργεια όταν ο δείκτης του ποντικιού βρεθεί πάνω από τον σύνδεσμο και στη συγκεκριμένη περίπτωση καταχωρεί μια τιμή στη μεταβλητή window.status, που έχει σαν αποτέλεσμα να εμφανισθεί ένα μήνυμα στη γραμμή κατάστασης.
Παράδειγμα 7 - Προσθήκη Μηνυμάτων σε Φόρμες
Μπορούμε να προσθέσουμε μηνύματα στις φόρμες μιας HTML σελίδας τα οποία θα εμφανίζονται όταν κάνουμε κλικ σ' ένα στοιχείο της φόρμας ή όταν εστιάζουμε σ' ένα άλλο στοιχείο της φόρμας. Για να δημιουργήσουμε ένα τέτοιο μήνυμα, γράφουμε πρώτα το παρακάτω script στο τμήμα head :
<script type="text/javascript">
function AlertBox() {
alert("Καλημέρα από τη Φλώρινα")
}
</script>
Στο τμήμα head δηλώνουμε τις συναρτήσεις που θα χρησιμοποιήσουμε και μετά στον κώδικα για τη δημιουργία της φόρμας, γράφουμε τα εξής :
<form>
<input type="checkbox" name="check1" onclick="AlertBox()">
Υπογράψτε
</form>
Όταν κάνουμε κλικ στο πλαίσιο ελέγχου, καλείται η συνάρτηση AlertBox() η οποία με τη σειρά της καλεί την ενσωματωμένη συνάρτηση alert() και εμφανίζεται το μήνυμα.
Παράδειγμα 8 - Αυτόματη Προώθηση σε Άλλη Σελίδα
Για να προωθήσουμε αυτόματα τους επισκέπτες μιας ιστοσελίδας σε μια άλλη ιστοσελίδα, γράφουμε τα εξής :
<head>
<script type="text/javascript">
alert("Η διεύθυνση της σελίδας έχει αλλάξει")
</script>
</head>
<body onload = "location= 'new.html' ">
Μόλις ο φυλλομετρητής αρχίζει να διαβάζει το HTML έγγραφο, εμφανίζεται το πλαίσιο διαλόγου alert με το προειδοποιητικό μήνυμα και μόλις κάνουμε κλικ στο ΟΚ για να το κλείσουμε, φορτώνεται η ιστοσελίδα, εκτελείται ο χειριστής συμβάντων onload και φορτώνεται η ιστοσελίδα new.html.
Παράδειγμα 9 - Η Συνάρτηση Confirm()
Η συνάρτηση confirm() εμφανίζει ένα πλαίσιο επιβεβαίωσης σ' ένα πλαίσιο διαλόγου με τα πλήκτρα OK και Cancel, όπου αν κάνουμε κλικ στο OK θα επιστραφεί η τιμή true, ενώ αν κάνουμε κλικ στο Cancel θα επιστραφεί η τιμή false.
Ακολουθεί ένα παράδειγμα :
<head>
<script type="text/javascript">
function redirect() {
if (confirm("Η διεύθυνση της σελίδας έχει αλλάξει")) {
location = 'new.html'
}
}
</script>
</head>
<body onload = "redirect()">
Αφού ολοκληρωθεί το φόρτωμα της σελίδας θα κληθεί η συνάρτηση redirect() και θα εμφανισθεί ένα πλαίσιο διαλόγου επιβεβαίωσης με το παραπάνω επεξηγηματικό κείμενο και τα πλήκτρα OK και Cancel. Αν κάνουμε κλικ στο πλήκτρο OK, θα εκτελεστεί η εντολή if και θα πάμε στην καινούργια ιστοσελίδα, σύμφωνα με την τιμή της μεταβλητής location.
Παράδειγμα 10 - Τα Αρχεία Σεναρίων
Μπορούμε να γράψουμε σενάρια (scripts) της JavaScript σ' ένα ξεχωριστό αρχείο κειμένου, διαφορετικό από το HTML έγγραφο, και μετά να τα συνδέσουμε χρησιμοποιώντας την ιδιότητα SRC της ετικέτας (tag) <script>. Όταν ο φυλλομετρητής διαβάσει τη σελίδα, θα δει την ιδιότητα SRC και θα διαβάσει το αρχείο σεναρίου σαν αυτό να βρισκόταν μέσα στο HTML έγγραφο.
Αυτή η ιδιότητα είναι ιδιαίτερα χρήσιμη όταν δημιουργούμε πολύπλοκα σενάρια και τα χρησιμοποιούμε σε πολλές ιστοσελίδες. Για παράδειγμα, μπορούμε να δημιουργήσουμε ένα απλό αρχείο κειμένου με το εξής κείμενο :
<!--
document.write("Ημερομηνία τελευταίας τροποποίησης της σελίδας : ")
document.write(document.lastModified)
//-->
Αποθηκεύουμε το αρχείο αυτό μ' ένα όνομα με επέκταση .js, π.χ. doc01.js, και μέσα στον κώδικα HTML της ιστοσελίδας γράφουμε τα εξής :
<script type="text/javascript" SRC="doc01.js">
</script>
Παράδειγμα 11 - Τα Σχόλια στην JavaScript
Για να εισάγουμε σχόλια (comments) στην JavaScript, μπορούμε να γράψουμε τα εξής :
// αυτό είναι ένα σχόλιο
ή
/* αυτή είναι η αρχή ενός μεγαλύτερου σχολίου,
αυτή είναι η δεύτερη γραμμή του
και αυτή είναι η τελευταία γραμμή του */
Για να βάλουμε ένα απλό σχόλιο σ' ένα script, χρησιμοποιούμε τους χαρακτήρες //, οπότε ο φυλλομετρητής αγνοεί ο,τιδήποτε βρίσκεται μετά και πηγαίνει στην επόμενη γραμμή. Τους χαρακτήρες // μπορούμε να τους τοποθετήσουμε και στη μέση μιας γραμμής εντολής ενός script.
Αν θέλουμε να γράψουμε ένα μεγαλύτερο σχόλιο που να επεκτείνεται σε πολλές γραμμές, μπορούμε να ξεκινήσουμε την πρώτη γραμμή με τους χαρακτήρες /* και να κλείσουμε το σχόλιο τελειώνοντας την τελευταία γραμμή με τους χαρακτήρες */.
Παράδειγμα 12 - Οι Μεταβλητές στην JavaScript
Για τη δήλωση των μεταβλητών στην JavaScript χρησιμοποιούμε τη λέξη κλειδί var και μπορούμε να καταχωρήσουμε και τιμές σε μια μεταβλητή μαζί με τη δήλωσή της, ως εξής :
var firstname
var country="Greece"
var salary=300000
Μπορούμε να δηλώσουμε μεταβλητές και χωρίς τη λέξη κλειδί var απλά και μόνο με την καταχώρηση τιμής.
Οι κανόνες για την ονομασία των μεταβλητών της JavaScript είναι οι εξής :
Ο πρώτος χαρακτήρας πρέπει να είναι γράμμα (a-z ή A-Z) ή ο χαρακτήρας _.
Το υπόλοιπο του ονόματος μπορεί να περιέχει γράμματα, ψηφία ή τον χαρακτήρα_.
Δεν πρέπει να υπάρχουν κενά ανάμεσα στα ονόματα.
Δεν πρέπει να χρησιμοποιούμε σαν ονόματα μεταβλητών τις λέξεις κλειδιά της JavaScript.
Δεν πρέπει να ξεχνάμε ότι η JavaScript ξεχωρίζει τα πεζά από τα κεφαλαία γράμματα (case sensitive). Δηλαδή, η μεταβλητή Florina είναι διαφορετική από τις μεταβλητές FLORINA και florina.
Η JavaScript χρησιμοποιεί αλφαριθμητικές, αριθμητικές και λογικές μεταβλητές και υπάρχει μια ειδική λέξη κλειδί, η null, η οποία επέχει τη θέση κενής μεταβλητής, δηλ. μεταβλητής χωρίς περιεχόμενο.
Ο τύπος δεδομένων μιας μεταβλητής καθορίζεται από την τοποθέτηση δεδομένων σ' αυτήν αλλά μπορεί να αλλάξει στην πορεία. Για παράδειγμα, μπορούμε να έχουμε τα εξής :
var Member=5
var Member=False
Οι μεταβλητές μπορούν να δηλωθούν εσωτερικά ή εξωτερικά μιας συνάρτησης :
Εσωτερικά μιας συνάρτησης. Οι μεταβλητές αυτές λέγονται τοπικές (local) και μπορούν να χρησιμοποιηθούν μόνο μέσα στη συνάρτηση.
Εξωτερικά μιας συνάρτησης. Οι μεταβλητές αυτές λέγονται καθολικές (global) και είναι διαθέσιμες οπουδήποτε σ' ένα σενάριο.
Μέσα σε μια συνάρτηση, οι τοπικές μεταβλητές υπερισχύουν των καθολικών με το ίδιο όνομα. Μια καλή πρακτική όταν έχουμε πολλές μεταβλητές σ' ένα σενάριο είναι να χρησιμοποιούμε το πρόθεμα s για τις αλφαριθμητικές μεταβλητές, το n για τις αριθμητικές και το b για τις λογικές. Ακόμη, το πρόθεμα g για τις καθολικές μεταβλητές. Ακολουθούν παραδείγματα :
var sMonth="Αύγουστος"
var nMonth=8
var bSex=True
var gnMonth=8
Παράδειγμα 13 - Οι Τελεστές της JavaScript
Οι αριθμητικοί τελεστές που χρησιμοποιεί η JavaScript είναι οι εξής :
=, εκχώρηση τιμών σε μεταβλητές.
+, πρόσθεση τιμών.
-, αφαίρεση τιμών.
*, πολλαπλασιασμός τιμών.
/, διαίρεση τιμών.
%, τελεστής υπολοίπου ακέραιας διαίρεσης.
++, τελεστής μοναδιαίας αύξησης.
--, τελεστής μοναδιαίας μείωσης.
Οι αλφαριθμητικοί τελεστές που χρησιμοποιεί η JavaScript είναι ο εξής ένας :
+, ένωση στοιχειοσειρών (strings).
Η χρήση του τελεστή + για την πρόσθεση στοιχειοσειρών με αριθμούς μετατρέπει τις αριθμητικές τιμές σε στοιχειοσειρές. Ακολουθούν παραδείγματα :
var sMonth="Αύγουστος"
var nYear=2001
var nDay=1
var sDate=sMonth + " " + nDay + ", " + nYear
Το sDate θα γίνει ίσο με Αύγουστος 1, 2001.
a="8" + 7 + 2001
Το a θα γίνει ίσο με 872001 και όχι με 2016.
Οι λογικοί τελεστές που χρησιμοποιεί η JavaScript είναι οι εξής :
!, λογικό Not.
&&, λογικό And.
||, λογικό Or.
Η JavaScript χρησιμοποιεί κι άλλους τελεστές εκχώρησης :
+=, το x+=y είναι ισοδύναμο με το x=x+y.
-=, το x-=y είναι ισοδύναμο με το x=x-y.
*=, το x*=y είναι ισοδύναμο με το x=x*y.
/=, το x/=y είναι ισοδύναμο με το x=x/y.
%=, το x%=y είναι ισοδύναμο με το x=x%y.
Παράδειγμα 14 - Η Εντολή If
Η σύνταξη της εντολής if είναι η εξής :
if (συνθήκη) {
... εντολές ...
}
else {
... εντολές ...
}
Για τη σύγκριση τιμών, η JavaScript χρησιμοποιεί τον τελεστή = =. Ακολουθεί ένα παράδειγμα :
var bStatus=true
function CheckStatus() {
if (bStatus) {
alert("Η bStatus είναι αληθής")
}
else {
alert("Η bStatus είναι ψευδής")
}
}
Δημιουργούμε και δύο πλήκτρα εντολής μέσα σε μια φόρμα :
<form>
<input type="button" value="Αληθής" onclick="bStatus=true;CheckStatus()">
<input type="button" value="Ψευδής" onclick="bStatus=false;CheckStatus()">
</form>
Ανάλογα με το σε ποιο πλήκτρο κάνουμε κλικ, στη μεταβλητή bStatus εκχωρείται η τιμή true ή η τιμή false. Και στις δύο περιπτώσεις, αμέσως μετά την εκχώρηση, ο χειριστής συμβάντων onclick καλεί τη συνάρτηση CheckStatus(), η οποία ελέγχει την τιμή της λογικής μεταβλητής bStatus και εμφανίζει ένα ανάλογο μήνυμα.
Παράδειγμα 15 - Οι Τελεστές Σύγκρισης της JavaScript
Οι τελεστές σύγκρισης που χρησιμοποιεί η JavaScript είναι οι εξής :
= =, ελέγχει αν δύο τιμές είναι ίσες.
!=, ελέγχει αν δύο τιμές είναι άνισες.
>, ελέγχει αν μια τιμή είναι μεγαλύτερη από μια άλλη.
<, ελέγχει αν μια τιμή είναι μικρότερη από μια άλλη.
>=, ελέγχει αν μια τιμή είναι μεγαλύτερη ή ίση από μια άλλη.
<=, ελέγχει αν μια τιμή είναι μικρότερη ή ίση από μια άλλη.
Παράδειγμα 16 - Οι Λογικοί Τελεστές της JavaScript
Οι λογικοί (boolean) τελεστές χρησιμοποιούνται για να συνδυάζουν εκφράσεις που περιέχουν συγκρίσεις. Ακολουθεί ένα παράδειγμα :
function function1() {
var dToday=new Date()
var nHours=dToday.getHours()
var nDay=dToday.getDay()
if ((nDay= =5) && (nHours>=12)) {
alert("Είναι Παρασκευή απόγευμα")
}
else {
if ((nDay= =6) || (nDay= =0)) {
alert("Ήρθε το Σαββατοκύριακο")
}
else {
alert("Αλλη μια βαρετή μέρα")
} // end else
} // end if
} // end function
Ακολουθεί κι ένα παράδειγμα με τον τελεστή άρνησης (!) :
var bStatus=true
function CheckStatus() {
if (!bStatus) {
alert("Η bStatus είναι ψευδής")
}
else {
alert("Η bStatus είναι αληθής")
}
}
Παράδειγμα 17 - Ο Τριαδικός Τελεστής Σύγκρισης
Ο τριαδικός τελεστής σύγκρισης κάνει ταυτόχρονα σύγκριση και καταχώρηση τιμής σε μεταβλητή και η σύνταξή του είναι η εξής :
μεταβλητή = (συνθήκη) ? τιμή1 : τιμή2
Αν η συνθήκη είναι αληθής, τότε η μεταβλητή γίνεται ίση με την τιμή1, αλλιώς γίνεται ίση με την τιμή2. Ακολουθεί ένα παράδειγμα :
function function1() {
var dToday=new Date()
var nSeconds=dToday.getSeconds()
var sText = (nSeconds > 30) ? "ΠΕΡΙΣΣΟΤΕΡΟ" : "ΛΙΓΟΤΕΡΟ"
alert("Πέρασε " + sText + " από το μισό αυτού του λεπτού")
}
Παράδειγμα 18 - Η Εντολή For
Η σύνταξη της εντολής for είναι η εξής :
for (αρχική τιμή; συνθήκη; εντολή) {
... εντολές ...
}
Ακολουθεί ένα παράδειγμα :
function function1() {
var i
for (i=1; i<4; i++) {
alert("Η τιμή του i είναι : " + i)
}
alert("Ο βρόχος ολοκληρώθηκε και το i είναι ίσο με : " + i)
}
Παράδειγμα 19 - Η Εντολή While
Η σύνταξη της εντολής while είναι η εξής :
while (συνθήκη) {
... εντολές ...
}
Ακολουθεί ένα παράδειγμα :
function function1() {
var i=1
while (i<4) {
alert("Η τιμή του i είναι : " + i)
i++
}
alert("Ο βρόχος ολοκληρώθηκε και το i είναι ίσο με : " + i)
}
Παράδειγμα 20 - Η Συνάρτηση Prompt()
Η συνάρτηση prompt() εμφανίζει ένα μήνυμα σ' ένα πλαίσιο διαλόγου στην οθόνη και ό,τι γράψουμε το εκχωρεί σε μια μεταβλητή. Ακολουθεί ένα παράδειγμα :
function function1() {
var sWord=" "
while (sWord != "Florina") {
sWord = prompt("Γράψτε Florina για έξοδο", " ")
}
alert("Ο βρόχος ολοκληρώθηκε")
}
Παράδειγμα 21 - Η Εντολή Do While
Η εντολή do while μοιάζει με την εντολή βρόχου while, με τη διαφορά ότι περιέχει τη συνθήκη μετά τις εντολές και αυτό σημαίνει ότι οι εντολές που περιέχει θα εκτελεστούν τουλάχιστον μία φορά, άσχετα από το αν η συνθήκη είναι αληθής ή ψευδής.
Η σύνταξη της εντολής do while είναι η εξής :
do {
... εντολές ...
} while (συνθήκη)
Ακολουθεί ένα παράδειγμα :
function function1() {
var sWord=" "
do {
sWord = prompt("Γράψτε Florina για έξοδο", " ")
} while (sWord != "Florina")
alert("Ο βρόχος ολοκληρώθηκε")
}
Παράδειγμα 22 - Η Εντολή Break
Μπορούμε να χρησιμοποιήσουμε την εντολή break για να βγούμε από έναν βρόχο for ή while και να πάμε στην επόμενη εντολή μετά τον βρόχο, χωρίς κατ' ανάγκη να σταματήσει να αληθεύει η συνθήκη του βρόχου.
Ακολουθεί ένα παράδειγμα :
function function1() {
var i
var bResult
for (i=1; i<4; i++) {
bResult = confirm("Πατήστε το Cancel για Break", " ")
if (!bResult) {
break;
}
alert("Ο βρόχος ολοκληρώθηκε και το i είναι ίσο με : " + i)
}
Όπως είδαμε και πρωτύτερα, η εντολή (συνάρτηση) confirm εμφανίζει ένα πλαίσιο επιβεβαίωσης με το σχετικό κείμενο και με τα πλήκτρα OK και Cancel και αν κάνουμε κλικ στο ΟΚ, η μεταβλητή bResult θα γίνει ίση με true, ενώ αν κάνουμε κλικ στο Cancel, η μεταβλητή bResult θα γίνει ίση με false.
Παράδειγμα 23 - Η Εντολή Continue
Μπορούμε να χρησιμοποιήσουμε την εντολή continue για να πάμε στην αρχή ενός βρόχου for ή while, χωρίς να εκτελεστούν οι εντολές του βρόχου που ακολουθούν την εντολή continue.
Ακολουθεί ένα παράδειγμα :
function function1() {
var i=0
var bResult
while (i<4) {
bResult = confirm("Πατήστε το Cancel για Continue", " ")
if (!bResult) {
continue;
}
i++
alert("Ο βρόχος ολοκληρώθηκε και το i είναι ίσο με : " + i)
}
Σύμφωνα με τον παραπάνω κώδικα, αν πατάμε συνέχεια το πλήκτρο Cancel στο πλαίσιο επιβεβαίωσης, θα εκτελείται η εντολή continue και θα πηγαίνουμε στην αρχή του βρόχου χωρίς να εκτελείται η εντολή i++. Άρα, δεν θα αλλάζει η τιμή του μετρητή και δεν θα μπορούμε να βγούμε από τον βρόχο. Για να βγούμε από τον βρόχο, θα πρέπει να πατάμε το πλήκτρο ΟΚ στο πλαίσιο επιβεβαίωσης.
Παράδειγμα 24 - Οι Συναρτήσεις (Functions)
Ο ορισμός μιας συνάρτησης (function) είναι μια διαδικασία κατά την οποία δηλώνουμε το όνομά της και εξηγούμε τι κάνει. Η σύνταξη μιας συνάρτησης είναι η εξής :
function ΌνομαΣυνάρτησης() {
... εντολές ...
}
Μπορούμε να ορίσουμε συναρτήσεις οπουδήποτε σε μια ιστοσελίδα, αλλά πρέπει να προσέχουμε να τις ορίζουμε πριν τις καλέσουμε και είναι καλύτερα να τις ορίζουμε στο τμήμα <head> ενός εγγράφου. Οι συναρτήσεις επιστρέφουν τιμές που μπορούμε να εκχωρήσουμε σε μεταβλητές, αν η κλήση τους γίνει ως εξής :
μεταβλητή = ΌνομαΣυνάρτησης()
Ακολουθεί ένα παράδειγμα :
function function1() {
var sTypedText
sTypedText = prompt("Γράψτε κάτι και πατήστε ΟΚ", " ")
return sTypedText
}
Εχουμε ορίσει μια συνάρτηση με όνομα function1(), η οποία περιέχει μια τοπική μεταβλητή στοιχειοσειράς με όνομα sTypedText και χρησιμοποιούμε την ενσωματωμένη συνάρτηση prompt() για να γράψουμε ένα κείμενο σ' ένα πλαίσιο κειμένου, το οποίο κείμενο καταχωρείται στη μεταβλητή sTypedText και επιστρέφεται εκεί απ' όπου κλήθηκε η συνάρτηση με την εντολή return.
Στην ίδια ιστοσελίδα, μπορούμε να γράψουμε τα εξής :
var sText
sText = function1()
document.write("Γράψατε : <p><h3> " + sText + "</h3></p>")
Μπορούμε να διαβιβάσουμε τιμές σε μια συνάρτηση, διαχωρίζοντάς τες με κόμμα, όπως στο παρακάτω παράδειγμα :
function Percentage(nNum, nPerc) {
return nNum * (nPerc/100)
}
Για να καλέσουμε αυτή τη συνάρτηση, μπορούμε να γράψουμε ένα σενάριο σαν το εξής :
var nValue1 = prompt("Γράψτε έναν αριθμό", " ")
var nValue2 = prompt("Γράψτε το ποσοστό %", " ")
var nPercent = Percentage(nValue1, nValue2)
document.write("<h3>" + nValue2 + " % " + nValue1 + " = " + nPercent + "<h3>")
Παράδειγμα 25 - Οι Πίνακες (Arrays)
Για να δημιουργήσουμε έναν πίνακα στην JavaScript, απαιτούνται τα εξής τρία στάδια :
Δημιουργία μιας νέας τάξης αντικειμένων με μια ειδική συνάρτηση.
Κλήση της συνάρτησης.
Εισαγωγή των δεδομένων στον πίνακα.
Για να δημιουργήσουμε μια τάξη αντικειμένων που να περιγράφει έναν πίνακα πρέπει να ορίσουμε έναν ειδικό τύπο συνάρτησης, ως εξής :
function makeArray(n) {
this.length=n
for (var i=1; i<=n; i++) {
this[i]=null;
}
return this
}
Για να δημιουργήσουμε τώρα έναν πίνακα με όνομα area και με 10 θέσεις, καλούμε την προηγούμενη συνάρτηση, ως εξής :
var area=new makeArray(10)
και καταχωρούμε τιμές στα στοιχεία του πίνακα, ως εξής :
area[1]="Γρεβενά"
area[2]="Καστοριά"
...
area[10]="Φλώρινα"
Στις νεότερες εκδόσεις της JavaScript μπορούμε να δημιουργήσουμε έναν πίνακα με την εξής απλή εντολή :
var area=new Array()
Η αρίθμηση του παραπάνω πίνακα ξεκινά από το 0 και όχι από το 1.
Παράδειγμα 26 - Αντικείμενα, Ιδιότητες και Μέθοδοι
Ενα αντικείμενο (object) διαθέτει ένα σύνολο από ιδιότητες (properties) και μεθόδους (methods) που συνδέονται μ' αυτό. Η JavaScript περιέχει έναν αριθμό αντικειμένων, όπως είναι το αντικείμενο document, που είναι η ηλεκτρονική σελίδα που δημιουργεί η HTML, το αντικείμενο window και το αντικείμενο form.
Οι ιδιότητες ενός αντικειμένου είναι μεταβλητές που ανήκουν στο αντικείμενο και καθορίζονται με τη χρήση μιας τελείας (dot notation), ως εξής :
όνομαΑντικειμένου.όνομαΙδιότητας
Μια μέθοδος είναι απλά μια συνάρτηση που συνδέεται μ' ένα συγκεκριμένο αντικείμενο και μπορεί να επιστρέψει μια τιμή. Ο γενικός τρόπος χρήσης μιας μεθόδου είναι ο εξής :
όνομαΑντικειμένου.όνομαΜεθόδου(παράμετροι)
Ακολουθούν παραδείγματα :
document.write(navigator.appName)
Η ιδιότητα appName ανήκει στο αντικείμενο navigator και περιέχει το όνομα αναγνώρισης του φυλλομετρητή. Το αντικείμενο navigator περιγράφει τον φυλλομετρητή που διαβάζει την ιστοσελίδα που περιέχει το σενάριο. Ακόμη, στο παραπάνω παράδειγμα, η μέθοδος write() συνδέεται με το αντικείμενο εγγράφου document και εμφανίζει κάποιο κείμενο στην ιστοσελίδα.
document.bgColor="red"
Το παραπάνω παράδειγμα ορίζει την ιδιότητα του χρώματος φόντου της σελίδας σε κόκκινο (red).
var sText
var sUpper
sText = prompt("Γράψτε κάτι με μικρά γράμματα", " ")
sUpper = sText.toUpperCase()
document.write("Το κείμενο με κεφαλαία γράμματα είναι : <p><h3>" + sUpper + "</h3>")
Εδώ δηλώσαμε τις μεταβλητές sText και sUpper και με τη μέθοδο prompt δώσαμε τιμή στη μεταβλητή sText. Η prompt είναι μια μέθοδος του αντικειμένου window, όπως και οι μέδοθοι alert και confirm, αλλά δεν είναι ανάγκη να γράψουμε ολόκληρα τα window.prompt, window.alert και window.confirm. Μετά, με τη μέθοδο toUpperCase() των αντικειμένων στοιχειοσειράς, μετατρέπουμε σε κεφαλαία γράμματα το κείμενο της μεταβλητής sText και το καταχωρούμε στη μεταβλητή sUpper.
document.Customer.Lastname.value = "Florina"
Η παραπάνω εντολή καταχωρεί το κείμενο Florina στην ιδιότητα value του πλαισίου κειμένου Lastname της φόρμας Customer του τρέχοντος εγγράφου.
Παράδειγμα 27 - Αναφορά σε Φόρμες και σε Στοιχεία Φόρμας
Μπορούμε να αναφερόμαστε σε μια φόρμα χρησιμοποιώντας τον πίνακα forms[ ], ο οποίος περιέχει μια λίστα απ' όλα τα αντικείμενα φόρμας που υπάρχουν στο έγγραφο. Παρόμοια, μπορούμε να χρησιμοποιήσουμε την ιδιότητα (πίνακα) elements[ ] μιας φόρμας για να αναφερόμαστε στα στοιχεία μιας φόρμας, η οποία ιδιότητα είναι μια λίστα απ' όλα τα αντικείμενα-στοιχεία που περιέχει η φόρμα. Η αρίθμηση ξεκινά από το 0.
Υπάρχουν δύο τρόποι για να αναφερθούμε σε μια φόρμα. Αν η φόρμα που μας ενδιαφέρει λέγεται secondForm και είναι η δεύτερη φόρμα σε μια ιστοσελίδα και θέλουμε να βρούμε πόσα στοιχεία (elements) περιέχει, μπορούμε να χρησιμοποιήσουμε την ιδιότητα length της φόρμας μ' έναν από τους εξής δύο τρόπους :
document.forms[1].length
document.secondForm.length
Παρόμοια, μπορούμε να αναφερθούμε στα στοιχεία μιας φόρμας με το όνομα ή τη θέση τους μέσα στον πίνακα στοιχείων. Για παράδειγμα, για να πάρουμε την τιμή ενός πλαισίου κειμένου με όνομα Lname που βρίσκεται στη φόρμα secondForm και είναι το τέταρτο κατά σειρά στοιχείο της φόρμας, μπορούμε να χρησιμοποιήσουμε έναν από τους εξής τέσσερις τρόπους :
document.secondForm.Lname.value
document.secondForm.elements[3].value
document.forms[1].Lname.value
document.forms[1].elements[3].value
Παράδειγμα 28 - Το Αντικείμενο Date
Το αντικείμενο Date μάς δίνει τη δυνατότητα να δουλεύουμε με ημερομηνίες και ώρες. Για να γίνει αυτό, πρέπει να δημιουργήσουμε ένα αντίγραφο αντικειμένου με τη λέξη κλειδί new, ως εξής :
Today = new Date()
Όταν δημιουργούμε ένα αντικείμενο Date, μπορούμε να πάρουμε την τρέχουσα ημερομηνία και ώρα του συστήματος, όπως κάναμε πριν, ή να ορίσουμε μια δική μας ημερομηνία και ώρα, μ' έναν από τους εξής τρόπους :
Date1 = new Date("8, 30, 2001, 10:50:14")
Date2 = new Date(2001, 8, 30)
Date3 = new Date(2001, 8, 30, 10, 50, 14)
Για το αντικείμενο Date υπάρχουν οι εξής μέθοδοι :
getHours(), επιστρέφει την ώρα.
getMinutes(), επιστρέφει τα λεπτά.
getMonth(), επιστρέφει τον μήνα.
getSeconds(), επιστρέφει τα δευτερόλεπτα.
getTime(), επιστρέφει την πλήρη ώρα.
getTimeZoneoffset(), επιστρέφει τη διαφορά από την ώρα Greenwich.
getYear(), επιστρέφει το έτος,
parse(), επιστρέφει τα χιλιοστά του δευτερολέπτου από 1/1/1970.
setDate(), ορίζει την ημερομηνία.
setHours(), ορίζει την ώρα.
setMinutes(), ορίζει τα λεπτά.
setMonth(), ορίζει τον μήνα.
setSeconds(), ορίζει τα δευτερόλεπτα.
setTime(), ορίζει την πλήρη ώρα.
setYear(), ορίζει το έτος.
toGMTString(), μετατρέπει την ημερομηνία σε στοιχειοσειρά ώρας Greenwich.
toLocaleString(), μετατρέπει την ημερομηνία σε στοιχειοσειρά.
UTC(), επιστρέφει τα χιλιοστά του δευτερολέπτου από 1/1/1970.
Παράδειγμα 29 - Το Αντικείμενο Math
Το αντικείμενο Math περιέχει ιδιότητες και μεθόδους που χρησιμοποιούνται για να εκτελέσουμε μαθηματικούς υπολογισμούς. Οι ιδιότητες του αντικειμένου είναι σταθερές, όπως το π, το e κ.ά., ενώ οι μέθοδοι του αντικειμένου είναι συναρτήσεις εύρεσης μεγίστου, εύρεσης ημιτόνου κ.ά.
Οι ιδιότητες του αντικειμένου Math είναι οι εξής :
E, η σταθερά e = 2,718.
LN2, ο φυσικός λογάριθμος του 2 (περίπου 0,693).
LN10, ο φυσικός λογάριθμος του 10 (περίπου 2,302).
LOG2E, ο λογάριθμος του e με βάση το 2 (περίπου 1,442).
LOG10E, ο δεκαδικός λογάριθμος του e (περίπου 0,434).
PI, ο αριθμός π = 3,1415926.
SQRT1_2, η τετραγωνική ρίζα του 1/2 (περίπου 0,707).
SQRT2, η τετραγωνική ρίζα του 2 (περίπου 1,414).
Οι μέθοδοι του αντικειμένου Math είναι οι εξής :
abs(), επιστρέφει την απόλυτη τιμή ενός αριθμού.
acos(), επιστρέφει το συνημίτονο τόξου ενός αριθμού.
asin(), επιστρέφει το ημίτονο τόξου ενός αριθμού.
atan(), επιστρέφει την εφαπτομένη τόξου ενός αριθμού.
ceil(), επιστρέφει τον αμέσως επόμενο ακέραιο ενός αριθμού.
cos(), επιστρέφει το συνημίτονο ενός αριθμού.
exp(), επιστρέφει τη δύναμη ενός αριθμού με βάση το e.
floor(), επιστρέφει τον αμέσως προηγούμενο ακέραιο ενός αριθμού.
log(), επιστρέφει τον φυσικό λογάριθμο ενός αριθμού (με βάση το e).
max(), επιστρέφει τον μεγαλύτερο από δύο αριθμούς.
min(), επιστρέφει τον μικρότερο από δύο αριθμούς.
pow(), επιστρέφει τη δύναμη ενός αριθμούς ως προς μια βάση.
round(), στρογγυλοποιεί έναν αριθμό στον πλησιέστερο ακέραιο.
sin(), επιστρέφει το ημίτονο ενός αριθμού.
sqrt(), επιστρέφει την τετραγωνική ρίζα ενός αριθμού.
tan(), επιστρέφει την εφαπτομένη ενός αριθμού.
Ακολουθούν παραδείγματα :
form.result.value = Math.max(form.num1.value, form.num2.value)
Η παραπάνω εντολή βρίσκει τον μεγαλύτερο από δύο αριθμούς που είναι καταχωρημένοι σε δύο πλαίσια κειμένου μιας φόρμας και τον καταχωρεί σ' ένα τρίτο πλαίσιο κειμένου.
form.result.value = 2*Math.PI*form.num1.value
form.result2.value = Math.sqrt(form.num1.value)
Οι παραπάνω εντολές βρίσκουν την περίμετρο ενός κύκλου με βάση την ακτίνα που έχουμε καταχωρήσει σ' ένα πλαίσιο κειμένου μιας φόρμας καθώς και την τετραγωνική ρίζα της ίδιας τιμής.
Παράδειγμα 30 - Το Αντικείμενο String
Ενα αντικείμενο στοιχειοσειράς (string) έχει μόνο μία ιδιότητα, που είναι το μήκος (length), δηλ. ο αριθμός των χαρακτήρων της στοιχειοσειράς, αλλά πολλές μεθόδους :
anchor(όνομα), μετατρέπει τη στοιχειοσειρά σε ετικέτα δεσμού HTML (<a name = ), χρησιμοποιώντας το όνομα σαν όνομα δεσμού.
big(), δίνει μεγαλύτερο μέγεθος στη στοιχειοσειρά (<big>).
blink(), κάνει τη στοιχειοσειρά να αναβοσβήνει (<blink>).
bold(), μετατρέπει τη στοιχειοσειρά σε έντονη (<b>).
charAt(κατάταξη), επιστρέφει τον χαρακτήρα της στοιχειοσειράς από τη θέση κατάταξη, όπου ο πρώτος χαρακτήρας είναι στη θέση 0.
fixed(), μετατρέπει τη γραμματοσειρά της στοιχειοσειράς σε μη αναλογική (<tt>).
fontcolor(χρώμα), αλλάζει το χρώμα της στοιχειοσειράς (<font color = χρώμα>).
fontsize(μέγεθος), αλλάζει το μέγεθος της στοιχειοσειράς (<font size = μέγεθος>).
indexOf(χαρακτήρας, από), ψάχνει στη στοιχειοσειρά για έναν συγκεκριμένο χαρακτήρα από τη θέση από και επιστρέφει τη θέση του χαρακτήρα αυτού, όπου ο πρώτος χαρακτήρας έχει την θέση 1.
italics(), μετατρέπει τη στοιχειοσειρά σε πλάγια γράμματα (<i>).
lastindexOf(χαρακτήρας, από), σαν την indexOf(), αλλά ψάχνει από το τέλος.
link(href), μετατρέπει τη στοιχειοσειρά σε ετικέτα δεσμού HTML (<a hfer = ), χρησιμοποιώντας το href σαν όνομα δεσμού.
small(), δίνει μικρότερο μέγεθος στη στοιχειοσειρά (<small>).
strike(), μετατρέπει τη στοιχειοσειρά σε διαγραμμένη (<strike>).
sub(), μετατρέπει τη στοιχειοσειρά σε μορφή δείκτη (<sub>).
substring(κατάταξη1, κατάταξη2), επιστρέφει ένα κομμάτι της στοιχειοσειράς από τη θέση κατάταξη1 έως τη θέση κατάταξη2.
sup(), μετατρέπει τη στοιχειοσειρά σε μορφή εκθέτη (<sup>).
toLowerCase(), μετατρέπει τη στοιχειοσειρά σε πεζά γράμματα.
toUpperCase(), μετατρέπει τη στοιχειοσειρά σε κεφαλαία γράμματα.
Ακολουθούν παραδείγματα :
function GetLength(form) {
var stextLength = form.string1.value
form.result.value = stextLength.length
}
function Position(form) {
var sPos = form.string1.value
form.result2.value = sPos.charAt(5)
}
Η συνάρτηση GetLength() παίρνει το κείμενο του πλαισίου κειμένου string1 και το τοποθετεί στη μεταβλητή stextLength. Μετά βρίσκει πόσοι χαρακτήρες υπάρχουν στη μεταβλητή αυτή, χρησιμοποιώντας την ιδιότητα length, και επιστρέφει αυτή την τιμή στο πλαίσιο κειμένου result της φόρμας.
Η συνάρτηση Position() παίρνει παίρνει το κείμενο του πλαισίου κειμένου string1 και το τοποθετεί στη μεταβλητή sPos. Μετά χρησιμοποιεί τη μέθοδο charAt() για να βρει τον 6ο χαρακτήρα της στοιχειοσειράς και τον καταχωρεί στο πλαίσιο κειμένου result2 της φόρμας.
function function1() {
var sTypedText
sTypedText = prompt("Γράψτε κάτι και πατήστε ΟΚ", " ")
return sTypedText
}
var sText
sText = function1()
document.write("Μεγάλο μέγεθος : " + sText.big())
document.write("Εντονο : " + sText.bold())
document.write("Πράσινο χρώμα : " + sText.fontcolor("green"))
document.write("Κεφαλαία γράμματα : " + sText.toUpperCase())
document.write("Σύνδεσμος (link) : " + sText.link("florina.html"))
Το σενάριο αυτό καλεί τη συνάρτηση function1(), όπου γράφουμε κάποιο κείμενο σ' ένα πλαίσιο προτροπής prompt και μετά εμφανίζουμε αυτό το κείμενο με διάφορες μορφές χρησιμοποιώντας μεθόδους στοιχειοσειράς.
Παράδειγμα 31 - Ο Χειριστής Συμβάντων Onblur
Εκτελείται όταν απομακρυνόμαστε από ένα στοιχείο φόρμας. Το blur είναι το συμβάν της απομάκρυνσης από την εστίαση (focus) σ' ένα στοιχείο φόρμας. Όταν δηλαδή φεύγουμε από ένα στοιχείο φόρμας και πάμε σ' ένα άλλο στοιχείο φόρμας ή απλά πατάμε το ποντίκι οπουδήποτε έξω από το στοιχείο φόρμας ή όταν πατάμε το πλήκτρο Tab.
Παράδειγμα 32 - Ο Χειριστής Συμβάντων Onchange
Εκτελείται όταν απομακρυνόμαστε από ένα στοιχείο φόρμας εφόσον έχουμε αλλάξει το περιεχόμενο του στοιχείου. Μοιάζει πολύ με τον χειριστή συμβάντων onblur με τη διαφορά ότι πρέπει να έχουμε κάνει κάποια αλλαγή στο στοιχείο φόρμας πριν απομακρυνθούμε απ' αυτό, για να μπορέσει να ενεργοποιηθεί ο χειριστής.
Παράδειγμα 33 - Ο Χειριστής Συμβάντων Onclick
Εκτελείται όταν κάνουμε κλικ σ' ένα στοιχείο φόρμας ή σύνδεσμο και είναι ο πιο συχνά χρησιμοποιούμενος χειριστής συμβάντων.
Παράδειγμα 34 - Ο Χειριστής Συμβάντων Onfocus
Εκτελείται όταν εστιάζουμε σ' ένα στοιχείο φόρμας. Είναι το ανίθετο του onblur.
Παράδειγμα 35 - Ο Χειριστής Συμβάντων Onload
Εκτελείται όταν φορτώνεται μια ιστοσελίδα ή μια εικόνα. Μπορεί να τοποθετηθεί μόνο στις ετικέτες <body>, <img> και <frameset>.
Παράδειγμα 36 - Ο Χειριστής Συμβάντων Onmouseover
Εκτελείται όταν ο δρομέας βρίσκεται πάνω από έναν σύνδεσμο. Χρησιμοποιείται συνήθως για να εμφανίσουμε μηνύματα στη γραμμή κατάστασης.
Παράδειγμα 37 - Ο Χειριστής Συμβάντων Onselect
Εκτελείται όταν επιλέγουμε κάτι σ' ένα στοιχείο φόρμας.
Παράδειγμα 38 - Ο Χειριστής Συμβάντων Onsubmit
Εκτελείται όταν υποβάλλουμε μια φόρμα. Χρησιμοποιείται συνήθως για να μπορούμε να κάνουμε επικύρωση (validation) μιας φόρμας. Εκτελεί ένα σενάριο όταν κάνουμε κλικ στο πλήκτρο υποβολής Submit μιας φόρμας.
Παράδειγμα 39 - Ο Χειριστής Συμβάντων Onunload
Εκτελείται όταν η τρέχουσα ιστοσελίδα κλείνει ή αντικαθίσταται από μια άλλη. Μπορεί να τοποθετηθεί μόνο στις ετικέτες <body>, <img> και <frameset>.
Παράδειγμα 40 - Ο Χειριστής Συμβάντων Onerror
Εκτελείται όταν δεν μπορεί να φορτωθεί μια εικόνα. Μπορεί να τοποθετηθεί μόνο στην ετικέτα <img>.
Παράδειγμα 41 - Ο Χειριστής Συμβάντων Onabort
Εκτελείται όταν διακόπτουμε το φόρτωμα μιας εικόνας. Μπορεί να τοποθετηθεί μόνο στην ετικέτα <img>.
Παράδειγμα 42 - Το Αντικείμενο Window
Το αντικείμενο window βρίσκεται στην κορυφή της ιεραρχίας των αντικειμένων και περιέχει ιδιότητες και μεθόδους που σχεδιάστηκαν για να παρέχουν πληροφορίες και να μας βοηθούν να επεξεργαζόμαστε το ίδιο το παράθυρο αλλά και το έγγραφο που περιέχει.
Οι ιδιότητες του αντικειμένου window είναι οι εξής :
defaultStatus, το προκαθορισμένο κείμενο της γραμμής κατάστασης.
history, η λίστα ιστορικού του παραθύρου.
length, ο αριθμός των πλαισίων (frames) του παραθύρου.
name, το όνομα του παραθύρου.
opener, αναφέρεται στο παράθυρο στο οποίο ένα σενάριο χρησιμοποίησε την εντολή window.open για να ανοίξει το τρέχον παράθυρο.
parent, το γονικό παράθυρο σ' ένα σύνολο πλαισίων.
self, το τρέχον παράθυρο.
status, το κείμενο της γραμμής κατάστασης.
top, το παράθυρο κορυφής.
window, το τρέχον παράθυρο.
Υπάρχουν και οι εξής ιδιότητες, που αποτελούν οι ίδιες αντικείμενα :
frame, περιέχει πληροφορίες για ένα πλαίσιο που περιέχεται στο παράθυρο.
frames, είναι ένα πίνακας (array) που περιέχει μια λίστα όλων των αντικειμένων πλαισίου σ' ένα παράθυρο.
location, είναι ένα αντικείμενο που περιέχει πληροφορίες για το URL του εγγράφου που εμφανίζεται στο παράθυρο.
history, είναι ένα αντικείμενο που περιέχει πληροφορίες για τη λίστα ιστορικού του τρέχοντος παραθύρου ή πλαισίου.
document, είναι ένα αντικείμενο που περιέχει πληροφορίες για το έγγραφο που εμφανίζεται στο παράθυρο.
Το κάθε πλαίσιο (frame) που βρίσκεται μέσα σ' ένα παράθυρο, θεωρείται παράγωγο του παραθύρου αυτού και αποτελεί από μόνο του ένα αντικείμενο window, με τις ίδιες ιδιότητες και μεθόδους με το πατρικό παράθυρο.
Για παράδειγμα, αν θέλουμε να αναφερθούμε στην τιμή ενός πλαισίου κειμένου μιας φόρμας που βρίσκεται σ' ένα άλλο πλαίσιο, μπορούμε να γράψουμε τα εξής :
parent.frame1.document.form1.text1.value = "Φλώρινα"
Οι μέθοδοι του αντικειμένου window είναι οι εξής :
alert(), εμφανίζει ένα πλαίσιο διαλόγου Alert.
clearTimeout(), σταματάει τη λειτουργία της μεθόδου setTimeout().
close(), κλείνει το παράθυρο.
confirm(), εμφανίζει ένα πλαίσιο διαλόγου επιβεβαίωσης Confirm.
blur(), απομακρύνει την εστίαση από ένα παράθυρο.
focus(), εστιάζει σ' ένα παράθυρο.
open(), ανοίγει ένα νέο παράθυρο.
prompt(), εμφανίζει ένα πλαίσιο διαλόγου προτροπής.
setTimeout(), περιμένει για έναν προκαθορισμένο αριθμό χιλιοστών του δευτερολέπτου πριν εκτελέσει κάποιες εντολές.
Παράδειγμα 43 - Το Αντικείμενο Document
Οι ιδιότητες του αντικειμένου document είναι οι εξής :
alinkColor, το χρώμα ενός ενεργού συνδέσμου.
anchor, ένας δεσμός του εγγράφου.
anchors, ένας πίνακας που περιέχει όλους τους δεσμούς του εγγράφου.
bgColor, το χρώμα του παρασκηνίου του εγγράφου.
cookie, ένα κομμάτι κειμένου με πληροφορίες για τη σελίδα.
fgColor, το χρώμα του κειμένου του εγγράφου.
form, μια φόρμα του εγγράφου.
forms, ένας πίνακας που περιέχει όλες τις φόρμες του εγγράφου.
lastModified, η ημερομηνία τελευταίας τροποποίησης του εγγράφου.
link, ένας σύνδεσμος του εγγράφου.
links, ένας πίνακας που περιέχει όλους τους συνδέσμους του εγγράφου.
location, το πλήρες URL του εγγράφου.
referrer, το URL του εγγράφου που περιέχει έναν σύνδεσμο στον οποίο κάναμε κλικ για να έρθουμε στο τρέχον έγγραφο.
title, το κείμενο που βρίσκεται ανάμεσα στις ετικέτες <title> και </title>.
vlinkColor, το χρώμα ενός συνδέσμου που έχουμε επισκεφθεί.
Οι μέθοδοι του αντικειμένου document είναι οι εξής :
clear(), καθαρίζει το περιεχόμενο ενός εγγράφου.
close(), κλείνει τη ροή εγγράφου.
open(), ανοίγει τη ροή εγγράφου.
write(), γράφει ένα κείμενο στο έγγραφο.
writeln(), γράφει ένα κείμενο στο έγγραφο και προσθέτει μια αλλαγή γραμμής.