ΚΕΝΤΡΟ ΠΛΗ.ΝΕ.Τ. Ν. ΦΛΩΡΙΝΑΣ
Παραδείγματα με την JavaScript
1. Εμφάνιση Κειμένου – Η Εντολή Document.Write()
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
<p> Με τη μέθοδο write() του αντικειμένου document μπορούμε να
εμφανίσουμε ένα μήνυμα, δηλ. ένα κείμενο που θα ενσωματωθεί
με τον υπόλοιπο HTML κώδικα της ιστοσελίδας. </p>
</body>
</html>
2. Μορφοποίηση Κειμένου με HTML Tags
<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>
<p> Με τη μέθοδο write() του αντικειμένου document μπορούμε να
χρησιμοποιήσουμε και τα γνωστά tags (ετικέτες) του HTML
κώδικα για να έχουμε την επιθυμητή μορφοποίηση του κειμένου
της ιστοσελίδας. </p>
</body>
</html>
3. Η JavaScript στο Τμήμα Head
<html>
<head>
<script type="text/javascript">
function message() {
alert("Αυτό το alert box κλήθηκε από το συμβάν onload")
}
</script>
</head>
<body onload="message()">
<p> Μπορούμε να καλέσουμε συναρτήσεις της JavaScript από το
τμήμα body ενός HTML εγγράφου, τις οποίες συναρτήσεις
μπορούμε να γράψουμε στο τμήμα head της ιστοσελίδας. Εδώ
καλείται η συνάρτηση alert() από το συμβάν onload, δηλ. αμέσως
με το φόρτωμα της ιστοσελίδας, η οποία συνάρτηση alert()
εμφανίζει ένα παράθυρο (πλαίσιο) μηνύματος με το κείμενο που
της δόθηκε ως παράμετρος. </p>
</body>
</html>
4. Η JavaScript στο Τμήμα Body
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Αυτό το μήνυμα εμφανίζεται με το φόρτωμα \
της ιστοσελίδας")
</script>
<p> Με τα tags <script="text/javascript"> και </script>
ενημερώνουμε τον φυλλομετρητή ότι ακολουθεί κώδικας σε
JavaScript, ενώ με τον χαρακτήρα \ μπορούμε να συνεχίσουμε να
γράφουμε στην επόμενη γραμμή. </p>
</body>
</html>
5. Ένα Εξωτερικό Αρχείο της JavaScript (.js)
<html>
<head>
</head>
<body>
<script src="xxx.js">
</script>
<p> Το πραγματικό script με τον κώδικα της JavaScript βρίσκεται σ’
ένα εξωτερικό αρχείο script με όνομα "xxx.js" και εδώ απλά
εισάγουμε (ενσωματώνουμε) το περιεχόμενό του στην τρέχουσα
ιστοσελίδα. </p>
<p> Τα πλεονεκτήματα της ιδιότητας src του tag <script> είναι ότι δεν
είμαστε αναγκασμένοι να ενσωματώνουμε στην ιστοσελίδα μας
μακροσκελή κώδικα σε JavaScript, ο οποίος βρίσκεται
αποθηκευμένος σ’ ένα άλλο αρχείο, το ότι πολλοί χρήστες
μπορούν να χρησιμοποιήσουν τον κώδικα που περιέχεται στο
ίδιο εξωτερικό αρχείο με επέκταση .js καθώς και το ότι αν
γίνουν κάποιες αλλαγές στον κώδικα του εξωτερικού αυτού
αρχείου με επέκταση .js, δεν θα χρειασθεί να ενσωματώσουμε
εκ νέου τον κωδικά του. </p>
</body>
</html>
6. Δήλωση, Εκχώρηση & Εμφάνιση Τιμής Μεταβλητής
<html>
<body>
<script type="text/javascript">
var name = "Florina"
document.write(name)
document.write("<h1>"+name+"</h1>")
</script>
<p> Στο παράδειγμα αυτό δηλώνουμε μια μεταβλητή της JavaScript με
την εντολή δήλωσης var και με το όνομα name, μετά της
εκχωρούμε μια τιμή και τέλος την εμφανίζουμε με τη μέθοδο
write() ως απλό κείμενο. </p>
<p> Αμέσως μετά εμφανίζουμε την τιμή (περιεχόμενο) της
μεταβλητής name ακόμα μία φορά, αυτή τη φορά ως
επικεφαλίδα επιπέδου h1. </p>
</body>
</html>
7. Δήλωση και Κλήση Συνάρτησης (Function)
<html>
<head>
<script type="text/javascript">
function myfunction() {
alert("Florina per sempre")
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="myfunction()"
value="Κλήση της συνάρτησης">
</form>
<p> Στο παράδειγμα αυτό βλέπουμε τον τρόπο κλήσης μιας
συνάρτησης (function) της JavaScript, όπου κάνοντας κλικ σ’
ένα πλήκτρο εντολής (button) μιας φόρμας (form), καλείται μια
συνάρτηση που περιέχει μια άλλη συνάρτηση, την γνωστή alert(),
και εμφανίζει ένα alert box μ’ ένα μήνυμα. </p>
</body>
</html>
8. Συνάρτηση με Όρισμα (Argument) – 1
<html>
<head>
<script type="text/javascript">
function myfunction(txt) {
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="myfunction('Florina per sempre')"
value="Κλήση της συνάρτησης">
</form>
<p> Στο παράδειγμα αυτό, γίνεται κλήση μιας συνάρτησης στην οποία
μεταβιβάζουμε ένα όρισμα (argument), εδώ ένα μήνυμα
κειμένου, και η συνάρτηση χρησιμοποιεί μια τοπική μεταβλητή
με όνομα txt για να εμφανίσει αυτό το μήνυμα σ’ ένα alert box.
</p>
</body>
</html>
9. Συνάρτηση με Όρισμα (Argument) – 2
<html>
<head>
<script type="text/javascript">
function myfunction(txt) {
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="myfunction('Καλημέρα!')"
value="Το Πρωί">
<input type="button"
onclick="myfunction('Καλησπέρα!')"
value="Το Απόγευμα">
</form>
<p> Στο παράδειγμα αυτό χρησιμοποιούμε δύο πλήκτρα εντολής με
διαφορετικές ετικέτες (ιδιότητα value) και κάθε φορά που
κάνουμε κλικ σ’ ένα απ’ αυτά τα πλήκτρα εντολής, θα καλείται
η ίδια συνάρτηση αλλά θα εμφανίζεται το αντίστοιχο
(διαφορετικό) μήνυμα στο alert box. </p>
</body>
</html>
10. Συνάρτηση που Επιστρέφει Τιμή
<html>
<head>
<script type="text/javascript">
function myFunction() {
return ("Γεια σας, να έχετε μια ευχάριστη διαμονή!")
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(myFunction())
</script>
<p> Το script της JavaScript που βρίσκεται στο τμήμα body καλεί μια
συνάρτηση, η οποία επιστρέφει μια τιμή με την εντολή return και
εμφανίζει ένα κείμενο καλοσωρίσματος, το οποίο
ενσωματώνεται με το υπόλοιπο κείμενο της ιστοσελίδας. </p>
</body>
</html>
11. Συνάρτηση με Ορίσματα που Επιστρέφει Τιμή
<html>
<head>
<script type="text/javascript">
function total(numberA, numberB) {
return numberA + numberB
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(total(10, 20))
</script>
<p> Εδώ καλούμε μια συνάρτηση στην οποία μεταβιβάζουμε δύο
ορίσματα, τους αριθμούς 10 και 20, και η συνάρτηση επιστρέφει
με την εντολή return το άθροισμα αυτών των δύο παραμέτρων
(arguments). </p>
</body>
</html>
12. Η Εντολή If
<html>
<body>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time < 11) {
document.write("<b>Καλημέρα</b>")
}
</script>
<p> Με το παράδειγμα αυτό άρχισε να φαίνεται καλύτερα ο
δυναμικός χαρακτήρας της JavaScript. Πιο συγκεκριμένα,
δημιουργούμε ένα καινούργιο αντικείμενο τύπου ημερομηνίας
(Date) με όνομα d και με τη βοήθειά του εκχωρούμε την
τρέχουσα ώρα του συστήματος του χρήστη στη μεταβλητή time.
</p>
<p> Μετά, κάνουμε χρήση της εντολής if, η οποία στη σύνταξή της
θυμίζει αρκετά την αντίστοιχη εντολή της γλώσσας
προγραμματισμού C, και αν η ώρα στο σύστημα του χρήστη
είναι πριν τις 11, θα εμφανισθεί ο χαιρετισμός "Καλημέρα",
αλλιώς τίποτα. </p>
</body>
</html>
13. Η Εντολή If ... Else
<html>
<body>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time < 11) {
document.write("<b>Καλημέρα</b>")
}
else {
document.write("<b>Καλό υπόλοιπο ημέρας</b>")
}
</script>
<p> Στο παράδειγμα αυτό φαίνεται ο τρόπος σύνταξης της εντολής
if … else, όπου τώρα αν η ώρα στο σύστημα του χρήστη είναι
πριν τις 11, θα εμφανισθεί ο χαιρετισμός "Καλημέρα", αλλιώς θα
εμφανισθεί ο χαιρετισμός "Καλό υπόλοιπο ημέρας". </p>
</body>
</html>
14. Επιλογή Τυχαίου Συνδέσμου (Random Link)
<html>
<body>
<script type="text/javascript">
var r=Math.random()
if (r>0.5) {
document.write("<a href='http://dipe.flo.sch.gr'>\
Δ/νση Α’/θμιας Εκπ/σης Φλώρινας</a>")
}
else {
document.write("<a href='http://dide.flo.sch.gr'>\
Δ/νση Β’/θμιας Εκπ/σης Φλώρινας</a>")
}
</script>
<p> Στο παράδειγμα αυτό γίνεται χρήση της συνάρτησης random()
του αντικειμένου Math, η οποία συνάρτηση παράγει
(δημιουργεί) έναν τυχαίο δεκαδικό αριθμό στο διάστημα 0 έως
1, και όπου ανάλογα με την τιμή που παράγεται από τη
συνάρτηση random(), εμφανίζεται ένας σύνδεσμος (link) είτε για
την ιστοσελίδα της Δ/νσης Α’/θμιας Εκπ/σης Φλώρινας ή για την
ιστοσελίδα της Δ/νσης Β’/θμιας Εκπ/σης Φλώρινας. </p>
<p> Οι πιθανότητες να εμφανισθεί η μια ή η άλλη ιστοσελίδα πρέπει
να είναι 50-50 και αυτό θα φανεί αν κάνουμε συνέχεια
ανανέωση (refresh) στην ιστοσελίδα μας, οπότε θα πρέπει να
εμφανίζονται από ίσες περίπου φορές οι δύο σύνδεσμοι. </p>
</body>
</html>
<html>
<body>
<script type="text/javascript">
var d = new Date()
theDay=d.getDay()
switch (theDay) {
case 5:
document.write("Επιτέλους Παρασκευή")
break
case 6:
document.write("Σούπερ Σάββατο")
break
case 0:
document.write("Κυριακή για Ξεκούραση")
break
default:
document.write("Ανυπομονώ για το\
Σαββατοκύριακο!")
}
</script>
<p> Στο παράδειγμα αυτό φαίνεται ο τρόπος σύνταξης της εντολής
switch, που θυμίζει πολύ την αντίστοιχη εντολή της γλώσσας
προγραμματισμού C. Κάνουμε χρήση του αντικειμένου Date για
να εκχωρήσουμε την τρέχουσα ημέρα της εβδομάδας, που
υπάρχει στο σύστημα του χρήστη, στη μεταβλητή theDay και
μετά εμφανίζουμε ένα διαφορετικό μήνυμα (χαιρετισμό)
ανάλογα με την τιμή της μεταβλητή αυτής, στην ουσία δηλαδή
ανάλογα με το ποια ημέρα είναι. </p>
<p> Οι αριθμοί των ημερών της εβδομάδας είναι ως εξής :
Κυριακή = 0, Δευτέρα = 1, Τρίτη =2 κοκ. </p>
</body>
</html>
16. Ο Βρόχος For
<html>
<body>
<script type="text/javascript">
for (i = 0; i <= 10; i++) {
document.write("Ο αριθμός είναι : " + i)
document.write("<br>")
}
</script>
<p> Στο παράδειγμα αυτό φαίνεται ο τρόπος σύνταξης της εντολής
for, όπου ο βρόχος ξεκινάει με την τιμή i=0 και όσο το
<b>i</b> είναι μικρότερο από ή ίσο με το 10, ο βρόχος (loop)
θα συνεχίσει να εκτελείται και να εμφανίζεται ένα μήνυμα με
τον τρέχοντα αριθμό. </p>
<p> Ταυτόχρονα κάνουμε και αλλαγή γραμμής με το tag <br>. Το
<b>i</b> αυξάνεται κατά 1 κάθε φορά που εκτελείται ο
βρόχος. Και η εντολή αυτή θυμίζει πολύ την αντίστοιχη εντολή
της γλώσσας προγραμματισμού C. </p>
</body>
</html>
17. Βρόχος στις Επικεφαλίδες (Headers) της HTML
<html>
<body>
<script type="text/javascript">
for (i = 1; i <= 6; i++) {
document.write("<h" + i + ">Επικεφαλίδα : " + i)
document.write("</h" + i + ">")
}
</script>
<p> Μπορούμε να χρησιμοποιήσουμε την εντολή for για να
εμφανίσουμε πολύ εύκολα και τις 6 επικεφαλίδες (headers) του
κώδικα HTML, δηλ. τα tags h1 έως h6. Αν δεν
χρησιμοποιούσαμε την εντολή for, θα έπρεπε να γράψουμε 6
φορές την αντίστοιχη εντολή document.write(). Βλέπουμε τον
τρόπο ενσωμάτωσης της μεταβλητής του βρόχου, της i, μέσα στο
αντίστοιχο tag. </p>
</body>
</html>
18. Ο Bρόχος While
<html>
<body>
<script type="text/javascript">
i = 0
while (i <= 10) {
document.write("Ο αριθμός είναι : " + i)
document.write("<br>")
i++
}
</script>
<p> Στο παράδειγμα αυτό φαίνεται ο τρόπος σύνταξης της εντολής
while, όπου ο βρόχος ξεκινάει με την τιμή i=0 και όσο το
<b>i</b> είναι μικρότερο από ή ίσο με το 10, ο βρόχος (loop)
θα συνεχίσει να εκτελείται και να εμφανίζεται ένα μήνυμα με
τον τρέχοντα αριθμό. </p>
<p> Ταυτόχρονα κάνουμε αλλαγή γραμμής με το tag <br> και
αυξάνουμε το <b>i</b> κατά ένα, με τον γνωστό από την C
τελεστή αύξησης i++, κάθε φορά που εκτελείται ο βρόχος. Και
η εντολή αυτή θυμίζει πολύ την αντίστοιχη εντολή της γλώσσας
προγραμματισμού C, όπου ο έλεγχος της συνθήκης γίνεται στην
αρχή του βρόχου. </p>
</body>
</html>
19. Ο Βρόχος Do … While
<html>
<body>
<script type="text/javascript">
i = 0
do {
document.write("Ο αριθμός είναι : " + i)
document.write("<br>")
i++
}
while (i <= 10)
</script>
<p> Στο παράδειγμα αυτό φαίνεται ο τρόπος σύνταξης της εντολής
do … while, όπου ο βρόχος ξεκινάει με την τιμή i=0 και όσο το
<b>i</b> είναι μικρότερο από ή ίσο με το 10, ο βρόχος (loop)
θα συνεχίσει να εκτελείται και να εμφανίζεται ένα μήνυμα με
τον τρέχοντα αριθμό. </p>
<p> Ταυτόχρονα κάνουμε αλλαγή γραμμής με το tag <br> και
αυξάνουμε το <b>i</b> κατά ένα, με τον γνωστό από την C
τελεστή αύξησης i++, κάθε φορά που εκτελείται ο βρόχος. Και
η εντολή αυτή θυμίζει πολύ την αντίστοιχη εντολή της γλώσσας
προγραμματισμού C, όπου ο έλεγχος της συνθήκης γίνεται στο
τέλος του βρόχου. </p>
</body>
</html>
20. Η Ιδιότητα Length του Αντικειμένου String
<html>
<body>
<script type="text/javascript">
var str="Florina per sempre!"
document.write("<p>Το παρακάτω κείμενο περιέχει " + str.length + " χαρακτήρες </p>")
document.write("<p>" + str + "</p>")
</script>
<p> Με την ιδιότητα length του αντικειμένου String μπορούμε να
βρούμε το πλήθος των γραμμάτων, στην ουσία των χαρακτήρων,
που περιέχονται σε μια μεταβλητή του τύπου string. </p>
</body>
</html>
21. Η Μέθοδος IndexOf() του Αντικειμένου String
<html>
<body>
<script type="text/javascript">
var str="Florina per sempre"
var pos=str.indexOf("per")
if (pos>=0) {
document.write("Το per βρέθηκε στη θέση : ")
document.write(pos + "<br />")
}
else {
document.write("Δεν βρέθηκε το per")
}
</script>
<p> Με τη μέθοδο indexOf() του αντικειμένου String μπορούμε να
εξετάσουμε αν ένα κομμάτι κειμένου περιέχεται σ’ ένα string. Αν
το κομμάτι κειμένου βρεθεί μέσα στο string, η μέθοδος
επιστρέφει τη θέση του πρώτου χαρακτήρα του κειμένου μέσα
στο string, αλλιώς επιστρέφει την τιμή –1. </p>
<p> Πρέπει να έχουμε υπόψη μας ότι η θέση του πρώτου χαρακτήρα
ενός string είναι η 0. </p>
</body>
</html>
22. Η Μέθοδος Match() του Αντικειμένου String
<html>
<body>
<script type="text/javascript">
var str = "Florina per sempre"
document.write(str.match("sempre"))
</script>
<p> Με τη μέθοδο match() του αντικειμένου String μπορούμε να
εξετάσουμε αν ένα κομμάτι κειμένου περιέχεται σ’ ένα string. Αν
το κομμάτι κειμένου βρεθεί μέσα στο string, η μέθοδος
επιστρέφει το ίδιο το κομμάτι κειμένου. </p>
</body>
</html>
23. Η Μέθοδος Substr() του Αντικειμένου String
<html>
<body>
<script type="text/javascript">
var str="Florina per sempre"
document.write(str.substr(2, 7))
</script>
<p> Με τη μέθοδο substr() του αντικειμένου String μπορούμε να
αποσπάσουμε (απομονώσουμε) ένα συγκεκριμένο κομμάτι ενός
string. Στο συγκεκριμένο παράδειγμα, δώσαμε τα ορίσματα 2
και 7 και το κομμάτι κειμένου που επιστρέφεται από τη μέθοδο
είναι το orina p, δηλ. αρχίζει από τη θέση 2, καθώς η αρχή είναι
το 0, και μετράει 7 χαρακτήρες σε πλήθος. </p>
</body>
</html>
24. Η Μέθοδος Substring() του Αντικειμένου String
<html>
<body>
<script type="text/javascript">
var str="Florina per sempre"
document.write(str.substring(2, 6))
</script>
<p> Με τη μέθοδο substring() του αντικειμένου String μπορούμε
επίσης να αποσπάσουμε (απομονώσουμε) ένα συγκεκριμένο
κομμάτι ενός string. Στο συγκεκριμένο παράδειγμα, δώσαμε τα
ορίσματα 2 και 6 και το κομμάτι κειμένου που επιστρέφεται
από τη μέθοδο είναι το orin, δηλ. αρχίζει από τη θέση 2, καθώς η
αρχή είναι το 0, και πάει έως και τον 6ο χαρακτήρα, τον οποίο
δεν συμπεριλαμβάνει. </p>
</body>
</html>
25. Η Μέθοδος toLowerCase() του Αντικειμένου String
<html>
<body>
<script type="text/javascript">
var str=("Florina per sempre")
document.write(str.toLowerCase())
</script>
<p> Με τη μέθοδο toLowerCase() του αντικειμένου String μπορούμε
να μετατρέψουμε όλα τα γράμματα ενός string σε πεζά
(lower case). </p>
</body>
</html>
26. Η Μέθοδος toUpperCase() του Αντικειμένου String
<html>
<body>
<script type="text/javascript">
var str=("Florina per sempre")
document.write(str.toUpperCase())
</script>
<p> Με τη μέθοδο toUpperCase() του αντικειμένου String μπορούμε
να μετατρέψουμε όλα τα γράμματα ενός string σε κεφαλαία
(upper case). </p>
</body>
</html>
<html>
<body>
<script type="text/javascript">
var cityname = new Array(4)
cityname[0] = "Γρεβενά"
cityname[1] = "Καστοριά"
cityname[2] = "Κοζάνη"
cityname[3] = "Φλώρινα"
document.write("Οι Νομοί της Δυτικής Μακεδονίας : "+"<br>")
for (i=0; i<4; i++) {
document.write(cityname[i] + "<br>")
}
</script>
<p> Για τη δημιουργία ενός πίνακα (array) στην JavaScript,
δημιουργούμε ένα νέο αντικείμενο του τύπου Array,
προσδιορίζουμε τη διάστασή του και η αρίθμηση του πίνακα
ξεκινάει από το 0. </p>
</body>
</html>
28. Δημιουργία Πίνακα με Απόδοση Τιμών
<html>
<body>
<script type="text/javascript">
var cityname = new Array("Γρεβενά", "Καστοριά", "Κοζάνη", "Φλώρινα")
document.write("Οι Νομοί της Δυτικής Μακεδονίας : "+"<br>")
for (i=0; i<cityname.length; i++) {
document.write(cityname[i] + "<br>")
}
</script>
<p> Μπορούμε μαζί τη δήλωση ενός πίνακα να ορίσουμε και τις τιμές
του απευθείας. Με την ιδιότητα length του αντικειμένου Array
μπορούμε να βρούμε το μέγεθος του πίνακα, δηλ. το πλήθος των
στοιχείων που περιέχει. </p>
</body>
</html>
29. Μερικές Ιδιότητες και Μέθοδοι των Πινάκων
<html>
<body>
<script type="text/javascript">
var cityname = new Array(4)
cityname[0] = "Γρεβενά"
cityname[1] = "Καστοριά"
cityname[2] = "Κοζάνη"
cityname[3] = "Φλώρινα"
document.write(cityname.length + "<br>")
document.write(cityname.join("-") + "<br>")
document.write(cityname.reverse() + "<br>")
document.write(cityname.push("Πέλλα", "Ημαθία") + "<br>")
document.write(cityname.join("-") + "<br>")
document.write(cityname.pop() + "<br>")
document.write(cityname.join("-") + "<br>")
document.write(cityname.shift() + "<br>")
document.write(cityname.join("-") + "<br>")
</script>
<p> Η ιδιότητα length εμφανίζει το πλήθος των στοιχείων του πίνακα,
η μέθοδος join() εμφανίζει τα στοιχεία του πίνακα σε μια σειρά
χωρισμένα με τον χαρακτήρα που δίνουμε ως όρισμα, η μέθοδος
reverse() αντιστρέφει τα στοιχεία του πίνακα, η μέθοδος push()
προσθέτει στοιχεία στον πίνακα και επιστρέφει το καινούργιο
μεγεθός του, η μέθοδος pop() αφαιρεί και επιστρέφει το
τελευταίο στοιχείο του πίνακα και η μέθοδος shift() αφαιρεί και
επιστρέφει το πρώτο στοιχείο του πίνακα. </p>
</body>
</html>
30. Η Μέθοδος Concat() του Αντικειμένου Array
<html>
<body>
<script type="text/javascript">
var cityname = new Array(4)
cityname[0] = "Γρεβενά"
cityname[1] = "Καστοριά"
cityname[2] = "Κοζάνη"
cityname[3] = "Φλώρινα"
var cityname2 = new Array(4)
cityname2[0] = "Βόλος"
cityname2[1] = "Λάρισα"
cityname2[2] = "Καρδίτσα"
cityname2[3] = "Τρίκαλα"
var cityname3 = new Array("Έδεσσα", "Βέροια")
document.write(cityname.concat(cityname2) + "<br>")
document.write(cityname.concat(cityname2, cityname3) + "<br>")
document.write(cityname.join() + "<br>")
document.write(cityname2.join() + "<br>")
document.write(cityname3.join() + "<br>")
</script>
<p> Με τη μέθοδο concat() του αντικειμένου Array μπορούμε να
εμφανίσουμε τα στοιχεία δύο ή και περισσοτέρων πινάκων στη
σειρά. Οι πίνακες μένουν αμετάβλητοι. </p>
</body>
</html>
31. Η Μέθοδος Slice() του Αντικειμένου Array
<html>
<body>
<script type="text/javascript">
var cityname = new Array(4)
cityname[0] = "Γρεβενά"
cityname[1] = "Καστοριά"
cityname[2] = "Κοζάνη"
cityname[3] = "Φλώρινα"
document.write(cityname.slice(2) + "<br>")
document.write(cityname.join() + "<br>")
</script>
<p> Η μέθοδος slice() του αντικειμένου Array επιστρέφει έναν πίνακα
χωρίς το πλήθος των πρώτων στοιχείων του πίνακα που θα
προσδιορίσουμε στο όρισμα της μεθόδου. Ο πίνακας μένει
αμετάβλητος. </p>
</body>
</html>
32. Μέθοδοι του Αντικειμένου Date για την Ημερομηνία
<html>
<body>
<script type="text/javascript">
var d = new Date()
document.write(d.getDate())
document.write(".")
document.write(d.getMonth() + 1)
document.write(".")
document.write(d.getFullYear())
</script>
<p> Η μέθοδος getDate() επιστρέφει τον αριθμό της ημέρας του μήνα,
η μέθοδος getMonth() επιστρέφει τον αριθμό του μήνα και η
μέθοδος getFullYear() επιστρέφει το έτος σε πλήρη μορφή. Όλες
οι παραπάνω τιμές ισχύουν για την τρέχουσα ημερομηνία του
συστήματος του χρήστη. </p>
</body>
</html>
33. Μέθοδοι του Αντικειμένου Date για την Ώρα
<html>
<body>
<script type="text/javascript">
var d = new Date()
document.write(d.getHours())
document.write(".")
document.write(d.getMinutes())
document.write(".")
document.write(d.getSeconds())
</script>
<p> Η μέθοδος getHours() επιστρέφει την ώρα σε 24ωρη μορφή, η
μέθοδος getMinutes() επιστρέφει τα λεπτά και η μέθοδος
getSeconds() επιστρέφει τα δευτερόλεπτα. Όλες οι παραπάνω
τιμές ισχύουν για την τρέχουσα ώρα του συστήματος του χρήστη.
</p>
</body>
</html>
34. Η Μέθοδος SetFullYear() του Αντικειμένου Date
<html>
<body>
<script type="text/javascript">
var d = new Date()
d.setFullYear("2005")
document.write(d)
</script>
<p> Με τη μέθοδο setFullYear() του αντικειμένου Date μπορούμε να
ορίσουμε το έτος της ημερομηνίας, το οποίο μπορεί να είναι
διαφορετικό από το τρέχον έτος του συστήματος του χρήστη.
</p>
</body>
</html>
35. Μέθοδοι του Αντικειμένου Date για την Ώρα UTC
<html>
<body>
<script type="text/javascript">
var d = new Date()
document.write(d.getUTCHours())
document.write(".")
document.write(d.getUTCMinutes())
document.write(".")
document.write(d.getUTCSeconds())
</script>
<p> Η μέθοδος getUTCHours() επιστρέφει την ώρα σε 24ωρη μορφή,
η μέθοδος getUTCMinutes() επιστρέφει τα λεπτά και η μέθοδος
getUTCSeconds() επιστρέφει τα δευτερόλεπτα. Όλες οι
παραπάνω τιμές ισχύουν φυσικά για την τρέχουσα ώρα του
συστήματος του χρήστη, αλλά για τη διεθνή ώρα UTC (Universal
Time Coordinated) και όχι για την τοπική ώρα. </p>
</body>
</html>
36. Εμφάνιση της Τρέχουσας Ημέρας της Εβδομάδας
<html>
<body>
<script type="text/javascript">
var d=new Date()
var weekday=new Array("Κυριακή", "Δευτέρα", "Τρίτη", "Τετάρτη", "Πέμπτη", "Παρασκευή", "Σάββατο")
document.write("Σήμερα είναι : " + weekday[d.getDay()])
</script>
<p> Η μέθοδος getDay() του αντικειμένου Date επιστρέφει την ημέρα
της εβδομάδας της τρέχουσας ημερομηνίας του συστήματος του
χρήστη, αλλά ως έναν αριθμό από το 0 έως και το 6, όπου
0=Κυριακή, 1=Δευτέρα κοκ. Έτσι, για να μπορέσουμε να
εμφανίσουμε την τρέχουσα ημέρα της εβδομάδας του
υπολογιστή του χρήστη σε κατανοητή μορφή, δημιουργήσαμε
έναν πίνακα με το όνομα weekday και καταχωρήσαμε εκεί τα
ονόματα των 7 ημερών της εβδομάδας. </p>
</body>
</html>
37. Εμφάνιση του Ονόματος της Ημέρας και του Μήνα
<html>
<body>
<script type="text/javascript">
var d=new Date()
var weekday=new Array("Κυριακή", "Δευτέρα", "Τρίτη", "Τετάρτη", "Πέμπτη", "Παρασκευή", "Σάββατο")
var monthname=new Array("Ιαν", "Φεβρ", "Μαρ", "Απρ", "Μαι", "Ιουν", "Ιουλ", "Αυγ", "Σεπτ", "Οκτ", "Νοε", "Δεκ")
document.write(weekday[d.getDay()] + ", ")
document.write(d.getDate() + " ")
document.write(monthname[d.getMonth()] + " ")
document.write(d.getFullYear())
</script>
<p> Η μέθοδος getMonth() του αντικειμένου Date επιστρέφει τον
αριθμό του μήνα της τρέχουσας ημερομηνίας του συστήματος
του χρήστη, με αρίθμηση από το 1 έως και το 12. Έτσι, για να
μπορέσουμε να εμφανίσουμε τον τρέχοντα μήνα του υπολογιστή
του χρήστη σε πιο κατανοητή μορφή, δημιουργήσαμε έναν
πίνακα με το όνομα monthname και καταχωρήσαμε εκεί τα
ονόματα των 12 μηνών του έτους. </p>
</body>
</html>
38. Δημιουργία Ψηφιακού Ρολογιού
<html>
<head>
<script type="text/javascript">
var timer = null
function stop() {
clearTimeout(timer)
}
function start() {
var time = new Date()
var hours = time.getHours()
var minutes = time.getMinutes()
minutes=((minutes < 10) ? "0" : "") + minutes
var seconds = time.getSeconds()
seconds=((seconds < 10) ? "0" : "") + seconds
var clock = hours + ":" + minutes + ":" + seconds
document.forms[0].display.value = clock
timer = setTimeout("start()", 1000)
}
</script>
</head>
<body onload="start()" onunload="stop()">
<form>
<input type="text" name="display" size="20">
</form>
<p> Το παράδειγμα αυτό δημιουργεί ένα ψηφιακό ρολόι που
εμφανίζει την τρέχουσα ώρα του υπολογιστή του χρήστη και
ενημερώνεται μόνο του κάθε 1 δευτερόλεπτο. Η ώρα
εμφανίζεται σ’ ένα πλαίσιο κειμένου μιας φόρμας και περιέχει
την ώρα σε 24ωρη μορφή, τα λεπτά και τα δευτερόλεπτα,
χωρισμένα με τον χαρακτήρα :. </p>
<p> Δημιουργούμε ένα καινούργιο αντικείμενο με όνομα time, του
τύπου Date, και από εκεί καταχωρούμε την τρέχουσα ώρα, τα
λεπτά και τα δευτερόλεπτα στις αντίστοιχες μεταβλητές hours,
minutes και seconds. Χρησιμοποιούμε τον γνωστό από την C
δυαδικό τελεστή σύγκρισης, ώστε τα λεπτά και τα δευτερόλεπτα
να αποτελούνται πάντα από 2 ψηφία. </p>
<p> Στη μεταβλητή clock καταχωρούμε τις τιμές των τριών αυτών
αριθμών και το string που δημιουργείται, το καταχωρούμε στο
περιεχόμενο του μοναδικού στοιχείου της μοναδικής φόρμας της
ιστοσελίδας, που είναι ένα πλαίσιο κειμένου με όνομα display
και μέγεθος 20. Επειδή δεν δώσαμε όνομα στη φόρμα,
χρησιμοποιούμε το στάνταρτ όνομα forms[0], δηλ. το πρώτο
στοιχείο του πίνακα φορμών forms[] της ιστοσελίδας. </p>
<p> Για να μπορέσει να εμφανισθεί η ψηφιακή ώρα μέσα στο πλαίσιο
κειμένου, χρησιμοποιούμε και τις έτοιμες συναρτήσεις
setTimeout() και clearTimeout(), καθώς και το αντικείμενο timer
και ορίζουμε χρόνο επανάληψης ίσο με 1000, δηλ. κάθε 1.000
χιλιοστά του δευτερολέπτου, άρα κάθε 1 δευτερόλεπτο.
</p>
<p> Η συνάρτηση start() καλείται με το συμβάν (event) onload, δηλ.
κάθε φορά που φορτώνεται η ιστοσελίδα στον φυλλομετρητή,
ενώ η συνάρτηση stop() καλείται με το συμβάν (event) onunload,
δηλ. κάθε φορά που εγκαταλείπουμε την ιστοσελίδα από τον
φυλλομετρητή. </p>
</body>
</html>
39. Η Μέθοδος Round() του Αντικειμένου Math
<html>
<body>
<script type="text/javascript">
document.write(Math.round(4.57))
</script>
<p> Με τη μέθοδο round() του αντικειμένου Math μπορούμε να
στρογγυλοποιήσουμε έναν δεκαδικό αριθμό στον πλησιέστερο
ακέραιο. Η τιμή που θα εμφανισθεί από τη μέθοδο round() στο συγκεκριμένο παράδειγμα θα είναι 5. </p>
</body>
</html>
40. Η Μέθοδος Random() του Αντικειμένου Math
<html>
<body>
<script type="text/javascript">
document.write(Math.random())
</script>
<p> Με τη μέθοδο random() του αντικειμένου Math μπορούμε να
εμφανίσουμε έναν τυχαίο δεκαδικό αριθμό στο διάστημα 0 έως
1, με το 1 να μην συμπεριλαμβάνεται. </p>
</body>
</html>
41. Δημιουργία Τυχαίου Ακέραιου Αριθμού
<html>
<body>
<script type="text/javascript">
number=Math.random() * 10
document.write(Math.round(number))
</script>
<p> Για να δημιουργήσουμε έναν τυχαίο ακέραιο αριθμό στο
διάστημα 0 έως και 10, πρώτα χρησιμοποιούμε τη μέθοδο
random() του αντικειμένου Math για να δημιουργήσουμε έναν
τυχαίο δεκαδικό αριθμό στο διάστημα 0 έως 1, μετά
πολλαπλασιάζουμε αυτήν την τιμή με το 10 και τέλος παίρνουμε
το ακέραιο μέρος του γινομένου που έχει προκύψει. </p>
</body>
</html>
42. Η Μέθοδος Max() του Αντικειμένου Math
<html>
<body>
<script type="text/javascript">
document.write("Μεγαλύτερος από τους 10 και 20 είναι ο : ")
document.write(Math.max(10, 20))
</script>
<p> Με τη μέθοδο max() του αντικειμένου Math, μπορούμε να βρούμε
το μεγαλύτερο από δύο αριθμητικά ορίσματα. </p>
</body>
</html>
43. Η Μέθοδος Min() του Αντικειμένου Math
<html>
<body>
<script type="text/javascript">
document.write("Μικρότερος από τους 10 και 20 είναι ο : ")
document.write(Math.min(10, 20))
</script>
<p> Με τη μέθοδο min() του αντικειμένου Math, μπορούμε να βρούμε
το μικρότερο από δύο αριθμητικά ορίσματα. </p>
</body>
</html>
44. Μετατροπή Βαθμών Κελσίου σε Φαρενάιτ
<html>
<head>
<script type="text/javascript">
function convert(degree) {
if (degree=="C") {
F=document.myform.celsius.value * 9 / 5 + 32
document.myform.fahrenheit.value=Math.round(F)
}
else {
C=(document.myform.fahrenheit.value -32) * 5 / 9
document.myform.celsius.value=Math.round(C)
}
}
</script>
</head>
<body>
<b> Καταχωρήστε έναν αριθμό σ’ ένα από τα δύο πλαίσια κειμένου
και ο αριθμός θα μετατραπεί αυτόματα σε βαθμούς Κελσίου ή
Φαρενάιτ, ανάλογα. </b><br />
<form name="myform">
<input name="celsius" onkeyup="convert('C')">
βαθμοί Κελσίου<br />είναι ίσοι με<br />
<input name="fahrenheit" onkeyup="convert('F')">
βαθμούς Φαρενάιτ
</form>
<br /> Χρησιμοποιήσαμε τη μέθοδο <b>round()</b> του
αντικειμένου Math, ώστε το αποτέλεσμα να εμφανίζεται ως
ακέραιος αριθμός.
<p> Το παράδειγμα αυτό χρησιμοποιεί δύο πλαίσια κειμένου μιας
φόρμας, ένα για την εμφάνιση της τιμής μιας θερμοκρασίας σε
βαθμούς Κελσίου και ένα άλλο για την εμφάνιση της αντίστοιχης
θερμοκρασίας σε βαθμούς Φαρενάιτ. </p>
<p> Η φόρμα έχει το όνομα myform και τα δύο πλαίσια κειμένου τα
ονόματα celsius και fahrenheit. Μόλις καταχωρήσουμε έναν
αριθμό σ’ ένα από τα δύο πλαίσια κειμένου, ενεργοποιείται το
συμβάν (event) onkeyup και καλείται η συνάρτηση convert() με
όρισμα είτε το C ή το F, ανάλογα βέβαια σε ποιο πλαίσιο
κειμένου γράψαμε κάτι. </p>
<p> Η συνάρτηση convert() χρησιμοποιεί μια τοπική μεταβλητή
με όνομα degree για να χειρισθεί την τιμή C ή F. Υπολογίζει την
αντίστοιχη τιμή σε βαθμούς Φαρενάιτ αν η μεταβλητή degree
είναι ίση με C, την στρογγυλοποιεί στον πλησιέστερο ακέραιο
και την καταχωρεί στο πλαίσιο κειμένου fahrenheit. Αν η
μεταβλητή degree είναι ίση με F, υπολογίζει την αντίστοιχη τιμή
σε βαθμούς Κελσίου, την στρογγυλοποιεί στον πλησιέστερο
ακέραιο και την καταχωρεί στο πλαίσιο κειμένου celsius. </p>
</body>
</html>
45. Μετατροπή Χαρακτήρα σε Unicode
<html>
<head>
<script type="text/javascript">
function toUnicode() {
var str=document.myForm.myInput.value
if (str!="") {
unicode=str.charCodeAt(0)
}
document.myForm.unicode.value=unicode
}
</script>
</head>
<body>
<form name="myForm">
Γράψτε έναν χαρακτήρα : <br />
<input size="1" name="myInput" maxlength="1" onkeyup="toUnicode()">
<hr />
Ο κώδικας Unicode του χαρακτήρα : <br />
<input size="3" name="unicode">
</form>
<p> Με τη μέθοδο charCodeAt(0) μπορούμε να βρούμε τον κώδικα
Unicode ενός οποιουδήποτε χαρακτήρα. Μόλις γράψουμε έναν
χαρακτήρα στο πλαίσιο κειμένου myInput της φόρμας,
εκτελείται το συμβάν (event) onkeyup και καλείται η συνάρτηση
toUnicode(), η οποία διαβάζει το περιεχόμενο του πλαισίου
κειμένου myInput της φόρμας, χρησιμοποιεί τη μέθοδο
charCodeAt(0) για να υπολογίσει τον κώδικα Unicode του
χαρακτήρα που καταχωρήθηκε και καταχωρεί αυτόν τον
κώδικα Unicode στο πλαίσιο κειμένου unicode της φόρμας.
</p>
</body>
</html>
46. Αλλαγή URL και Κειμένου Ενός Συνδέσμου (Link)
<html>
<head>
<script type="text/javascript">
function myHref() {
document.getElementById('myAnchor').innerHTML=
"Επισκεφθείτε τη Φλώρινα"
document.getElementById('myAnchor').href=
"http://www.florina.gr"
}
</script>
</head>
<body>
<a id="myAnchor" href="http://www.kozani.gr"> Επισκεφθείτε την Κοζάνη </a>
<form>
<input type="button" onclick="myHref()" value="Αλλαγή του URL και του κειμένου του link">
</form>
<p> Αυτό το παράδειγμα έχει πρόσβαση σε αντικείμενα DOM της
JavaScript. Πιο συγκεκριμένα, αλλάζει τις ιδιότητες (attributes)
innerHTML και href ενός αντικειμένου του τύπου Anchor, όπου
η πρώτη ιδιότητα αναφέρεται στο κείμενο ενός δεσμού (anchor)
και η δεύτερη ιδιότητα αναφέρεται στη διεύθυνση (URL) που θα
οδηγηθούμε αν κάνουμε κλικ στον δεσμό. </p>
<p> Χρησιμοποιούμε έναν δεσμό στον οποίο δίνουμε το id myAnchor
για να τον αντιμετωπίσουμε ως αντικείμενο και να μπορέσουμε
έτσι να τον διαχειριστούμε και μια φόρμα που περιέχει ένα
πλήκτρο εντολής (button), στο οποίο αν κάνουμε κλικ καλείται η
συνάρτηση myHref(), η οποία εντοπίζει το αντικείμενο του
δεσμού κάνοντας χρήση της συνάρτησης getElementById() και
του id του δεσμού και έτσι αποκτά πρόσβαση στις ιδιότητες
innerHTML και href του δεσμού, για να μπορεί να αλλάξει τις
τιμές τους. </p>
</body>
</html>
47. Αλλαγή της Ιδιότητας Target ενός Link
<html>
<head>
<script type="text/javascript">
function myTarget() {
document.getElementById('myAnchor').target="_blank"
}
</script>
</head>
<body>
<a id="myAnchor" href="http://www.florina.gr"> Επισκεφθείτε τη Φλώρινα </a>
<form>
<input type="button" onclick="myTarget()" value="Άνοιγμα του συνδέσμου σ’ ένα νέο παράθυρο">
</form>
<p> Δοκιμάστε τον σύνδεσμο (link) πριν και αφού έχετε κάνει κλικ
στο πλήκτρο εντολής. Η διαφορά είναι ότι την πρώτη φορά η
καινούργια ιστοσελίδα θα ανοίξει στο ίδιο παράθυρο, ενώ τη
δεύτερη φορά η καινούργια ιστοσελίδα θα ανοίξει σ’ ένα νέο
παράθυρο. </p>
<p> Το παράδειγμα αυτό αναφέρεται στο αντικειμένου Anchor και
χρησιμοποιεί την ιδιότητά του target, στην οποία δίνει την τιμή
_blank, ώστε να αναγκάσει έναν σύνδεσμο (lnik) να ανοίξει μια
καινούργια ιστοσελίδα σ’ ένα νέο και όχι στο τρέχον παράθυρο.
</p>
</body>
</html>
48. Οι Συναρτήσεις Focus() και Blur()
<html>
<head>
<style type="text/css">
a:active {color:blue}
</style>
<script type="text/javascript">
function getfocus() {
document.getElementById('flo').focus()
}
function losefocus() {
document.getElementById('flo').blur()
}
</script>
</head>
<body>
<a id="flo" href="http://www.florina.gr"> Επισκεφθείτε τη Φλώρινα </a>
<form>
<input type="button" onclick="getfocus()" value="Εστίαση">
<input type="button" onclick="losefocus()" value="Απώλεια Εστίασης">
</form>
<p> Το παράδειγμα αυτό χρησιμοποιεί τις μεθόδους focus() και blur()
του αντικειμένου Anchor, για να μπορέσουμε να αποκτήσουμε
εστίαση ή για να έχουμε απώλεια εστίασης, αντίστοιχα, από έναν
σύνδεσμο (link). </p>
</body>
</html>
49. Μετάβαση σε Συγκεκριμένο Δεσμό (Anchor)
<html>
<body>
<script type="text/javascript">
function linkToAnchor(num) {
var win2=open("mywebpage.html", "secondLinkWindow", "scrollbars=yes, width=250, height=200")
win2.location.hash=num
}
</script>
<h3> Σύνδεσμοι (Links) και Δεσμοί (Anchors) </h3>
<p> Κάντε κλικ σ’ ένα από τα πλήκτρα εντολής για να εμφανισθεί ο
αντίστοιχος δεσμός (anchor) μιας ιστοσελίδας σ’ ένα άλλο
παράθυρο. </p>
<form>
<input type="button" value="0" onClick="linkToAnchor(this.value)">
<input type="button" value="1" onClick="linkToAnchor(this.value)">
<input type="button" value="2" onClick="linkToAnchor(this.value)">
<input type="button" value="3" onClick="linkToAnchor(this.value)">
</form>
<p> Σ’ αυτό το παράδειγμα υπάρχουν δύο παράθυρα. Το πρώτο
παράθυρο είναι η κεντρική ιστοσελίδα και περιέχει μια φόρμα
με τέσσερα πλήκτρα εντολής (buttons), ενώ το δεύτερο
παράθυρο ανοίγει εφόσον κάνουμε κλικ σ’ ένα από τα τέσσερα
πλήκτρα εντολής, τα οποία έχουν ετικέτες τους αριθμούς 0 έως
και 3, οπότε πηγαίνουμε στον αντίστοιχο δεσμό (anchor) της
ιστοσελίδας με όνομα mywebpage.html. </p>
<p> Η μετάβαση στον αντίστοιχο δεσμό γίνεται με την εκχώρηση της
κατάλληλης τιμής στην ιδιότητα hash του αντικειμένου location
του δεύτερου παραθύρου, το οποίο έχει το όνομα win2. Με το
κλικ σ’ ένα από τα πλήκτρα εντολής ενεργοποιείται το συμβάν
(event) onClick και καλείται η συνάρτηση linkToAnchor(), στην
οποία μεταβιβάζεται η παράμετρος this.value, δηλ. η τιμή του
ίδιου του πλήκτρου εντολής. </p>
</body>
</html>
50. Εμφάνιση του Ονόματος μιας Φόρμας
<html>
<body>
<form name="myForm">
Το όνομα της φόρμας είναι :
<input type="text" name="text1" size="20">
<br /><br />
<input type="button"
value="Εμφάνιση του ονόματος της φόρμας"
onClick="this.form.text1.value=this.form.name">
</form>
<p> Στο παράδειγμα αυτό χρησιμοποιούμε μια φόρμα με όνομα
myForm, η οποία περιέχει ένα πλαίσιο κειμένου, που είναι κενό
αρχικά, και ένα πλήκτρο εντολής, στο οποίο αν κάνουμε κλικ θα
εμφανισθεί το όνομα της φόρμας μέσα στο πλαίσιο κειμένου. </p>
<p> Με το κλικ στο πλήκτρο εντολής, ενεργοποιείται το συμβάν
(event) onClick και καταχωρείται το όνομα της φόρμας, δηλ. η
ιδιότητά της name, στην ιδιότητα value του πλαισίου κειμένου
της φόρμας. </p>
</body>
</html>
51. Εμφάνιση Ονομάτων των Στοιχείων μιας Φόρμας
<html>
<head>
<script type="text/javascript">
function showFormElements(theForm) {
str="Τα στοιχεία της φόρμας είναι τα εξής : "
for (i=0; i<theForm.length; i++)
str+=" \n " + theForm.elements[i].name
alert(str)
}
</script>
</head>
<body>
<form>
Όνομα : <input type="text" name="fname" size="20">
<br />
Επώνυμο : <input type="text" name="lname" size="20">
<br /><br />
<input type="button" name="button1"
value="Εμφάνιση Ονομάτων των στοιχείων της φόρμας"
onClick="showFormElements(this.form)">
</form>
<p> Το παράδειγμα αυτό εμφανίζει τα ονόματα όλων των στοιχείων
μιας φόρμας μόλις κάνουμε κλικ σ’ ένα πλήκτρο εντολής. Η
συγκεκριμένη φόρμα περιέχει δύο πλαίσια κειμένου με ονόματα
fname και lname και ένα πλήκτρο εντολής με όνομα button1.
Μόλις κάνουμε κλικ στο πλήκτρο εντολής button1, καλείται η
συνάρτηση showFormElements(), μέσω του συμβάντος (event)
onClick, στην οποία μεταβιβάζεται η παράμετρος this.form, δηλ.
η ίδια η φόρμα. </p>
<p> Μέσα στη συνάρτηση showFormElements() χρησιμοποιούμε την
ιδιότητα length του αντικειμένου Form για να κάνουμε έναν
βρόχο σ’ όλα τα στοιχεία της φόρμας, τα οποία εξ ορισμού έχουν
ονόματα elements[0], elements[1] κοκ. Από κάθε στοιχείο της
φόρμας λαμβάνουμε το όνομά του μέσω της ιδιότητάς του name
και ενώνουμε όλα τα ονόματα σ’ ένα string με όνομα str, στο
οποίο καταχωρούμε και τον χαρακτήρα \n, δηλ. την αλλαγή
γραμμής. Τέλος, εμφανίζουμε το περιεχόμενο του string str σ’ ένα
alert box. </p>
</body>
</html>
52. Η Ιδιότητα Checked ενός Πλαισίου Ελέγχου
<html>
<head>
<script type="text/javascript">
function check() {
var x=document.forms.myForm
x[0].checked=true
}
function uncheck() {
var x=document.forms.myForm
x[0].checked=false
}
</script>
</head>
<body>
<form name="myForm">
<input type="checkbox" value="on">
<input type="button" onclick="check()" value="Επιλογή του Πλαισίου Ελέγχου (Checkbox)">
<input type="button" onclick="uncheck()" value="Αποεπιλογή του Πλαισίου Ελέγχου (Checkbox)">
</form>
<p> Στο παράδειγμα αυτό χρησιμοποιούμε ένα πλαίσιο ελέγχου
(checkbox) και δύο πλήκτρα εντολής (buttons) σε μια φόρμα,
όπου με κλικ στο ένα πλήκτρο εντολής, το πλαίσιο ελέγχου
γίνεται ενεργό (επιλέγεται), ενώ με κλικ στο άλλο πλήκτρο
εντολής, το ίδιο πλαίσιο ελέγχου γίνεται ανενεργό
(αποεπιλέγεται). </p>
<p> Η ιδιότητα που καθορίζει αν ένα πλαίσιο ελέγχου θα είναι
επιλεγμένο ή όχι, είναι η checked, η οποία μπορεί να πάρει μία
από τις τιμές true ή false, αντίστοιχα. Το πλαίσιο ελέγχου είναι το
πρώτο στοιχείο της φόρμας και έχει έτσι την αρίθμηση 0. </p>
</body>
</html>
53. Πλαίσια Ελέγχου (Checkboxes) σε μια Φόρμα
<html>
<head>
<script type="text/javascript">
function check() {
coffee=document.forms[0].coffee
answer=document.forms[0].answer
txt=""
for (i=0;i<coffee.length;++ i) {
if (coffee[i].checked) {
txt=txt + coffee[i].value + " "
}
}
answer.value="Παραγγείλατε καφέ με " + txt
}
</script>
</head>
<body>
<form>
Πώς θέλετε τον καφέ σας; <br /><br />
<input type="checkbox" name="coffee" value="κρέμα"> Με κρέμα <br />
<input type="checkbox" name="coffee" value="ζάχαρη"> Με ζάχαρη <br />
<br />
<input type="button" name="test" onclick="check()" value="Παραγγελία">
<br /><br />
<input type="text" name="answer" size="50">
</form>
<p> Στο παράδειγμα αυτό έχουμε μια φόρμα με δύο πλαίσια ελέγχου,
τα οποία έχουν το ίδιο όνομα coffee και έτσι δημιουργείται
αυτόματα ένας πίνακας (array), όπου τα ονόματα των πλαισίων
ελέγχου γίνονται coffee[0] και coffee[1] αντίστοιχα. Η φόρμα
περιέχει ακόμη ένα πλήκτρο εντολής στο οποίο πρέπει να
κάνουμε κλικ για να γίνει η εικονική παραγγελία και να κληθεί η
συνάρτηση check(), η οποία θα αναλάβει να ελέγξει ποιο ή ποια
πλαίσια ελέγχου έχουν επιλεγεί. </p>
<p> Αν ένα πλαίσιο ελέγχου έχει επιλεγεί, τότε προστίθεται η ιδιότητά
του value σ’ ένα string με όνομα txt και αφού ελεγχθούν και τα
δύο πλαίσια ελέγχου, καταχωρείται ένα κατάλληλο string στο
πλαίσιο κειμένου answer της φόρμας, όπου και θα εμφανισθεί το
αποτέλεσμα της παραγγελίας. </p>
</body>
</html>
54. Πλαίσιο Ελέγχου και Πλαίσια Κειμένου
<html>
<body>
<script type="text/javascript">
function convertField(field) {
if (document.form1.convertUpper.checked) {
field.value=field.value.toUpperCase()
}
}
function convertAllFields() {
document.form1.fname.value=document.form1.fname.value.toUpperCase()
document.form1.lname.value=document.form1.lname.value.toUpperCase()
}
</script>
<form name="form1">
Όνομα : <input type="text" name="fname" onChange="convertField(this)" size="20" />
<br />
Επώνυμο : <input type="text" name="lname" onChange="convertField(this)" size="20" />
<br />
Μετατροπή των καταχωρήσεων σε κεφαλαία γράμματα
<input type="checkBox" name="convertUpper"
onClick="if (this.checked) {convertAllFields()}"
value="ON">
</form>
<p> Το παράδειγμα αυτό χρησιμοποιεί μια φόρμα με δύο πλαίσια
κειμένου και ένα πλαίσιο ελέγχου. Θα πρέπει να
καταχωρήσουμε κάτι στα δύο πλαίσια κειμένου και μόλις
επιλέξουμε το πλαίσιο ελέγχου, όλες οι καταχωρήσεις θα
μετατραπούν σε κεφαλαία γράμματα (uppercase). </p>
<p> Για τη μετατροπή αυτή χρησιμοποιούμε τη γνωστή συνάρτηση
toUpperCase() του αντικειμένου String και η μετατροπή των
καταχωρήσεων σε κεφαλαία γράμματα γίνεται είτε με επιλογή
του πλαισίου ελέγχου ή με οποιαδήποτε αλλαγή σ’ ένα από τα
πλαίσια κειμένου εφόσον είναι ήδη επιλεγμένο το πλαίσιο
ελέγχου. </p>
</body>
</html>
55. Πλήθος των Δεσμών (Anchors) μιας Ιστοσελίδας
<html>
<body>
<a name="A">Πρώτος δεσμός (anchor)</a><br />
<a name="B">Δεύτερος δεσμός (anchor)</a><br />
<a name="C">Τρίτος δεσμός (anchor)</a><br />
<br />
Πλήθος των δεσμών (anchors) που υπάρχουν σ’ αυτό το έγγραφο :
<script type="text/javascript">
document.write(document.anchors.length)
</script>
<p> Το παράδειγμα αυτό εμφανίζει το πλήθος των δεσμών (anchors)
που υπάρχουν σε μια ιστοσελίδα και προς τον σκοπό αυτό
χρησιμοποιεί την ιδιότητα length του αντικειμένου Anchors. Οι
δεσμοί ενός εγγράφου αποκτούν τα ονόματα anchors[0],
anchors[1] κοκ, ανήκουν δηλαδή σ’ έναν πίνακα array. </p>
</body>
</html>
56. Εμφάνιση του Domain Name μιας Ιστοσελίδας
<html>
<body>
Το domain name του site της ιστοσελίδας είναι το :
<script type="text/javascript">
document.write(document.domain)
</script>
<p> Μπορούμε να χρησιμοποιήσουμε την ιδιότητα domain του
αντικειμένου document για να εμφανίσουμε το domain name
(όνομα χώρου) όπου ανήκει η τρέχουσα ιστοσελίδα. </p>
</body>
</html>
57. Εμφάνιση του Referrer Ενός Εγγράφου
<html>
<body>
Το referrer αυτής της ιστοσελίδας είναι το εξής :
<script type="text/javascript">
document.write(document.referrer)
</script>
<p> Μπορούμε να χρησιμοποιήσουμε την ιδιότητα referrer του
αντικειμένου document για να βρούμε το URL του εγγράφου
από το οποίο ήρθαμε στην τρέχουσα ιστοσείδα. </p>
</body>
</html>
58. Εμφάνιση του Τίτλου (Title) Ενός Εγγράφου
<html>
<head>
<title>Florina per Sempre</title>
</head>
<body>
Ο τίτλος αυτής της ιστοσελίδας είναι ο εξής :
<script type="text/javascript"> document.write(document.title)
</script>
<p> Μπορούμε να χρησιμοποιήσουμε την ιδιότητα title του
αντικειμένου document για να εμφανίσουμε τον τίτλο της
τρέχουσας ιστοσελίδας. </p>
</body>
</html>
59. Εμφάνιση του URL Ενός Εγγράφου
<html>
<head>
<script type="text/javascript">
function showURL() {
alert(document.URL)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="showURL()" value="Εμφάνιση του URL">
</form>
<p> Μπορούμε να χρησιμοποιήσουμε την ιδιότητα URL του
αντικειμένου document για να εμφανίσουμε το URL της
τρέχουσας ιστοσελίδας. </p>
</body>
</html>
60. Η Μέθοδος getElementById()
<html>
<head>
<script type="text/javascript">
function getElement() {
var x=document.getElementById("myHeader")
alert("Είμαι ένα " + x.tagName + " στοιχείο")
}
</script>
</head>
<body>
<h1 id="myHeader" onClick="getElement()"> Κάντε κλικ εδώ για να δείτε ποιο στοιχείο είμαι! </h1>
<p> Στο παράδειγμα αυτό δώσαμε το id myHeader σ’ ένα στοιχείο
επικεφαλίδας h1 και μετά με το συμβάν (event) onClick
καλέσαμε τη συνάρτηση getElement(), η οποία χρησιμοποιεί τη
μέθοδο getElementById() για να εντοπίσει ένα στοιχείο με βάση
το id του, για να εμφανίσουμε το είδος του στοιχείου, κάνοντας
χρήση της ιδιότητας tagName. </p>
</body>
</html>
61. Η Μέθοδος getElementsByName()
<html>
<head>
<script type="text/javascript">
function getElements() {
var x=document.getElementsByName("myInput")
alert(x.length + " στοιχεία")
}
</script>
</head>
<body>
<form >
<input name="myInput" type="text" size="20"><br />
<input name="myInput" type="text" size="20"><br />
<input name="myInput" type="text" size="20"><br />
<br />
<input name="mybutton" type="button"
onclick="getElements()"
value="Δείτε πόσα στοιχεία έχουν το όνομα 'myInput'">
</form>
<p> Στο παράδειγμα αυτό χρησιμοποιούμε τη μέθοδο
getElementsByName() για να δούμε πόσα στοιχεία έχουν ίδιο
(κοινό) όνομα. </p>
</body>
</html>
62. Μέτρηση των Φορμών Ενός Εγγράφου
<html>
<body>
<form name="Form1">
Όνομα : <input type="text" size="20">
</form>
<form name="Form2">
Ηλικία : <input type="text" size="3">
</form>
<script type="text/javascript">
txt="Αυτό το έγγραφο περιέχει : " + document.forms.length + " φόρμες."
document.write(txt)
</script>
<p> Το αντικείμενο Forms είναι στην ουσία ένας πίνακας (array), που
περιέχει ως στοιχεία όλες τις φόρμες ενός εγγράφου
(ιστοσελίδας), και η αναφορά σε μια φόρμα μπορεί να γίνει είτε
ως forms[0], forms[1] κοκ, ανάλογα με το ποια φόρμα
εμφανίζεται πρώτη στον κώδικα, είτε με το όνομα που έχει
πάρει η φόρμα από την ιδιότητά της name. Για να εμφανίσουμε
το πλήθος των φορμών ενός εγγράφου, χρησιμοποιούμε τη
γνωστή ιδιότητα length του αντικειμένου forms. </p>
</body>
</html>
63. Μέτρηση των Εικόνων Ενός Εγγράφου
<html>
<body>
<img border="0" src="florina01.jpgf" width="500" height="50"><br />
<img border="0" src="florina02.jpg" width="500" height="50"><p>
<script type="text/javascript">
document.write("Αυτό το έγγραφο περιέχει : " + document.images.length + " εικόνες.")
</script>
</p>
<p> Το αντικείμενο Images είναι στην ουσία ένας πίνακας (array), που
περιέχει ως στοιχεία όλες τις εικόνες ενός εγγράφου
(ιστοσελίδας), και η αναφορά σε μια εικόνα μπορεί να γίνει ως
images[0], images[1] κοκ, ανάλογα με το ποια εικόνα
εμφανίζεται πρώτη στον κώδικα. Για να εμφανίσουμε το πλήθος
των εικόνων ενός εγγράφου, χρησιμοποιούμε τη γνωστή ιδιότητα
length του αντικειμένου images. </p>
</body>
</html>
64. Πρόσβαση στα Στοιχεία μιας Φόρμας
<html>
<body>
<form id="Form1" name="Form1">
Φόρμα1 : <input type="text">
</form>
<form id="Form2" name="Form2">
Φόρμα2 : <input type="text">
</form>
<p><b> Για να εμφανίσουμε το όνομα μιας φόρμας, </b></p>
<p><b> Μπορούμε να χρησιμοποιήσουμε τον αριθμό της φόρμας :
</b></p>
<script type="text/javascript">
document.write("<p>Το όνομα της πρώτης φόρμας είναι : ")
document.write(document.forms[0].name + "</p>")
document.write("<p>Το όνομα της δεύτερης φόρμας είναι : ")
document.write(document.forms[1].name + "</p>")
</script>
<p><b>Ή το όνομα της φόρμας : </b></p>
<script type="text/javascript">
document.write("<p>Το όνομα της πρώτης φόρμας είναι : ")
document.write(document.getElementById("Form1").name + "</p>")
document.write("<p>Το όνομα της δεύτερης φόρμας είναι : ")
document.write(document.getElementById("Form2").name + "</p>")
</script>
</body>
</html>
65. Με Ποιο Πλήκτρο του Ποντικιού Έγινε Κλικ
<html>
<head>
<script type="text/javascript">
function whichButton(event) {
if (event.button==1) {
alert("Κάνατε κλικ στο αριστερό πλήκτρο του ποντικιού.")
}
else {
alert("Κάνατε κλικ στο δεξί πλήκτρο του ποντικιού.")
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p> Κάντε κλικ μέσα στο έγγραφο. Ένα πλαίσιο μηνύματος (alert box)
θα δείξει σε ποιο πλήκτρο του ποντικιού κάνατε κλικ. </p>
<p> Έχουμε ορίσει μέσα στο tag body να γίνεται κλήση της
συνάρτησης whichButton(), με όρισμα το αντικείμενο event, κάθε
φορά που ενεργοποιείται το συμβάν (event) onmousedown, δηλ.
κάθε φορά που κάνουμε κλικ με το ποντίκι. Το αντικείμενο
event έχει την ιδιότητα button, η οποία αν έχει πάρει την τιμή 1,
θα σημαίνει ότι πατήθηκε το αριστερό πλήκτρο του ποντικιού,
αλλιώς, μια άλλη τιμή, θα σημαίνει ότι πατήθηκε το δεξί
πλήκτρο του ποντικιού. </p>
</body>
</html>
66. Οι Συντεταγμένες του Δρομέα (Cursor)
<html>
<head>
<script type="text/javascript">
function show_coords(event) {
x=event.clientX
y=event.clientY
alert("X συντεταγμένη : " + x + ", Y συντεταγμένη : " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p> Κάντε κλικ μέσα στο έγγραφο. Ένα πλαίσιο μηνύματος (alert box)
θα δείξει τις x και y συντεταγμένες του δρομέα. </p>
<p> Χρησιμοποιούμε τις ιδιότητες clientX και clientY του αντικειμένου
event για να βρούμε τις συντεταγμένες του δρομέα (cursor) του
ποντικιού στο σημείο που έγινε κλικ. </p>
</body>
</html>
67. Ο Κώδικας Unicode του Πλήκτρου που Πατήθηκε
<html>
<head>
<script type="text/javascript">
function whichButton(event) {
alert(event.keyCode)
}
</script>
</head>
<body onkeyup="whichButton(event)">
<p> Πατήστε ένα πλήκτρο από το πληκτρολόγιο και ένα πλαίσιο
μηνύματος (alert box) θα εμφανίσει τον κώδικα unicode του
πλήκτρου που πατήθηκε. </p>
<p> Έχουμε ορίσει μέσα στο tag body να γίνεται κλήση της
συνάρτησης whichButton(), με όρισμα το αντικείμενο event, κάθε
φορά που ενεργοποιείται το συμβάν (event) onkeyup, δηλ. κάθε
φορά που πατάμε και αφήνουμε κάποιο πλήκτρο από το
πληκτρολόγιο. Το αντικείμενο event έχει την ιδιότητα keyCode, η
οποία περιέχει τον κωδικό unicode του πλήκτρου που πατήθηκε.
</p>
</body>
</html>
68. Οι Συνεταγμένες του Δρομέα ως προς την Οθόνη
<html>
<head>
<script type="text/javascript">
function coordinates(event) {
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
<p> Κάντε κλικ μέσα στο έγγραφο. Ένα πλαίσιο μηνύματος (alert box)
θα δείξει τις x και y συντεταγμένες του δρομέα σε σχέση με την
οθόνη. </p>
<p> Χρησιμοποιούμε τις ιδιότητες screenX και screenY του
αντικειμένου event για να βρούμε τις συντεταγμένες του δρομέα
(cursor) του ποντικιού, σε σχέση με την οθόνη, στο σημείο που
έγινε κλικ. </p>
</body>
</html>
69. Οι Συνεταγμένες του Δρομέα (Cursor)
<html>
<head>
<script type="text/javascript">
function coordinates(event) {
x=event.x
y=event.y
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
<p> Κάντε κλικ μέσα στο έγγραφο. Ένα πλαίσιο μηνύματος (alert box)
θα δείξει τις x και y συντεταγμένες του δρομέα. </p>
<p> Χρησιμοποιούμε τις ιδιότητες x και y του αντικειμένου event για
να βρούμε τις συντεταγμένες του δρομέα (cursor) του ποντικιού
στο σημείο που έγινε κλικ. Είδαμε ότι το ίδιο αποτέλεσμα είχαμε
και με τις ιδιότητες clientX και clientY του αντικειμένου event.
</p>
</body>
</html>
70. Έλεγχος αν Πατήθηκε το Πλήκτρο Shift
<html>
<head>
<script type="text/javascript">
function isKeyPressed(event) {
if (event.shiftKey==1) {
alert("Πατήθηκε το πλήκτρο shift.")
}
else {
alert("Δεν πατήθηκε το πλήκτρο shift.")
}
}
</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p> Κάντε κλικ μέσα στο έγγραφο. Ένα πλαίσιο μηνύματος (alert box)
θα δείξει αν πατήθηκε και το πλήκτρο shift ή όχι. </p>
<p> Έχουμε ορίσει μέσα στο tag body να γίνεται κλήση της
συνάρτησης isKeyPressed(), με όρισμα το αντικείμενο event, κάθε
φορά που ενεργοποιείται το συμβάν (event) onmousedown. Το
αντικείμενο event έχει την ιδιότητα shiftKey, η οποία παίρνει την
τιμή 1 αν έχει πατηθεί και το πλήκτρο shift, αλλιώς, μια άλλη
τιμή, θα σημαίνει ότι δεν πατήθηκε και το πλήκτρο shift. </p>
</body>
</html>
71. Έλεγχος σε Ποιο Στοιχείο (Element) Έγινε Κλικ
<html>
<head>
<script type="text/javascript">
function whichElement(event) {
var tname
tname=event.srcElement.tagName
alert("Κάνατε κλικ σε στοιχείο με tag name : " + tname)
}
</script>
</head>
<body onmousedown="whichElement(event)">
<p> Κάντε κλικ μέσα στο έγγραφο. Ένα πλαίσιο μηνύματος (alert box)
θα δείξει το όνομα της ετικέτας (tag name) του στοιχείου
(element) στο οποίο κάνατε κλικ. </p>
<h3> Αυτό είναι μια επικεφαλίδα (header) </h3>
<p> Αυτό είναι μια παράγραφος (paragraph) </p>
<img border="0" src="florina01.jpg" width="29" height="28">
<p> Έχουμε ορίσει μέσα στο tag body να γίνεται κλήση της
συνάρτησης whichElement(), με όρισμα το αντικείμενο event,
κάθε φορά που ενεργοποιείται το συμβάν (event) onmousedown.
Το αντικείμενο event έχει την ιδιότητα tagName, η οποία
περιέχει το όνομα ετικέτας (tag mame) του στοιχείου στο οποίο
έγινε κλικ. </p>
</body>
</html>
72. Έλεγχος για το Ποιο Συμβάν (Event) Έλαβε Χώρα
<html>
<head>
<script type="text/javascript">
function whichType(event) {
alert(event.type)
}
</script>
</head>
<body onmousedown="whichType(event)">
<p> Κάντε κλικ μέσα στο έγγραφο. Ένα πλαίσιο μηνύματος (alert box)
θα δείξει το είδος του συμβάντος (event) που ενεργοποιήθηκε.
</p>
<p> Έχουμε ορίσει μέσα στο tag body να γίνεται κλήση της
συνάρτησης whichType(), με όρισμα το αντικείμενο event,
κάθε φορά που ενεργοποιείται το συμβάν (event) onmousedown.
Το αντικείμενο event έχει την ιδιότητα type, η οποία
περιέχει το όνομα (είδος) του συμβάντος που έλαβε χώρα. </p>
</body>
</html>
73. Αλλαγή της Ιδιότητας Action μιας Φόρμας
<html>
<head>
<script type="text/javascript">
function getAction() {
var x=document.forms.myForm
alert(x.action)
}
function changeAction() {
var x=document.forms.myForm
x.action="mywebpage02.html"
alert(x.action)
}
</script>
</head>
<body>
<form name="myForm" action="mywebpage01.html">
<input type="button" onclick="getAction()" value="Δείτε την τιμή της ιδιότητας action">
<br /><br />
<input type="button" onclick="changeAction()" value="Αλλάξτε την τιμή της ιδιότητας action">
</form>
<p> Η ιδιότητα action του αντικειμένου Forms περιέχει το όνομα της
ιστοσελίδας στην οποία θα πάμε όταν κάνουμε υποβολή
(submit) της φόρμας, κάνοντας κλικ στο πλήκτρο εντολής
Submit. Στο παράδειγμα αυτό χρησιμοποιούμε μια φόρμα με
δύο πλήκτρα εντολής, στα οποία αν κάνουμε κλικ καλούνται
αντίστοιχες συναρτήσεις, όπου η μια απλά εμφανίζει την τιμή
της ιδιότητας action της φόρμας myForm, ενώ η άλλη συνάρτηση
αλλάζει την τιμή της ιδιότητας action της φόρμας myForm και
μετά εμφανίζει την καινούργια τιμή. </p>
</body>
</html>
74. Εμφάνιση της Ιδιότητας Method μιας Φόρμας
<html>
<head>
<script type="text/javascript">
function formMethod() {
var x=document.forms.myForm
alert(x.method)
}
</script>
</head>
<body>
<form name="myForm" method="post">
Name : <input type="text" size="20"><br /><br />
<input type="button" onclick="formMethod()" value="Εμφάνιση της μεθόδου (Get ή Post)">
</form>
<p> Στο παράδειγμα αυτό μπορούμε να δούμε τη μέθοδος αποστολής
δεδομένων που χρησιμοποιεί η φόρμα της ιστοσελίδας, δηλ. την
τιμή της ιδιότητας method της φόρμας, η οποία ιδιότητα μπορεί
να πάρει μια από δύο τιμές, Get ή Post. Προς τον σκοπό αυτό
χρησιμοποιούμε την ιδιότητα method του αντικειμένου Forms.
</p>
</body>
</html>
75. Μηδενισμός (Reset) των Πεδίων μιας Φόρμας
<html>
<head>
<script type="text/javascript">
function formReset() {
var x=document.forms.myForm
x.reset()
}
</script>
</head>
<body>
<form name="myForm">
<p> Γράψτε κάτι στα δύο πεδία κειμένου και μετά κάντε κλικ στο πλήκτρο "Reset" </p>
<input type="text" size="20"><br />
<input type="text" size="20"><br /><br />
<input type="button" onclick="formReset()" value="Reset">
</form>
<p> Για να μηδενίσουμε (reset) το περιεχόμενο των πεδίων μιας
φόρμας, χρησιμοποιούμε τη μέθοδο reset() του αντικειμένου
Forms. </p>
</body>
</html>
76. Υποβολή (Submit) μιας Φόρμας
<html>
<head>
<script type="text/javascript">
function formSubmit() {
document.forms.myForm.submit()
}
</script>
</head>
<body>
<form name="myForm" action="mywebpage.asp" method="get">
Όνομα : <input type="text" name="firstname" size="20"><br />
Επώνυμο : <input type="text" name="lastname" size="20">
<br /><br />
<input type="button" onclick="formSubmit()" value="Υποβολή της φόρμας">
</form>
<p> Για να κάνουμε υποβολή (submit) των στοιχείων μιας φόρμας,
συνήθως χρησιμοποιούμε ένα πλήκτρο εντολής του τύπου
Submit, αλλά μπορούμε να χρησιμοποιήσουμε και ένα κανονικό
πλήκτρο εντολής (button) και να καλέσουμε τη μέθοδο submit()
του αντικειμένου Forms. </p>
</body>
</html>
77. Έλεγχος Εγκυρότητας ενός e-mail σε μια Φόρμα
<html>
<head>
<script type="text/javascript">
function validate() {
x=document.myForm
at=x.email.value.indexOf("@")
if (at == -1) {
alert("Δεν είναι έγκυρο το e-mail")
return false
}
}
</script>
</head>
<body>
<form name="myForm" action="submitpage.html" onsubmit="return validate()">
Δώστε το e-mail σας :
<input type="text" name="email" size="20">
<input type="submit" value="Υποβολή">
</form>
<p> Αυτό το παράδειγμα κάνει έναν έλεγχο για το αν ο χρήστης έχει
καταχωρήσει στο πεδίο κειμένου email μιας φόρμας έναν
χαρακτήρα @ και όχι για το αν όντως υπάρχει το e-mail που
καταχωρήθηκε. Ο έλεγχος αυτός γίνεται μόλις υποβάλλεται η
φόρμα με κλικ στο πλήκτρο εντολής Submit, οπότε και καλείται
η συνάρτηση validate(), η οποία χρησιμοποιεί τη μέθοδο
indexOf() του αντικειμένου String για να ελέγξει αν ο
χαρακτήρας @ περιέχεται στο πεδίο κειμένου email. </p>
</body>
</html>
78. Έλεγχος ενός Πεδίου Φόρμας για Περιοχή Τιμών
<html>
<head>
<script type="text/javascript">
function validate() {
x=document.myForm
txt=x.myInput.value
if (txt>=1 && txt<=10) {
return true
}
else {
alert("Πρέπει να είναι ανάμεσα στο 1 και το 10.")
return false
}
}
</script>
</head>
<body>
<form name="myForm" action="submitpage.html" onsubmit="return validate()">
Δώστε έναν αριθμό από το 1 έως το 10 :
<input type="text" name="myInput" size="20">
<input type="submit" value="Υποβολή">
</form>
<p> Στο παράδειγμα αυτό βλέπουμε πώς μπορούμε να κάνουμε
έλεγχο για το αν ένα πλαίσιο κειμένου περιέχει έναν αριθμό σε
μια αποδεκτή περιοχή τιμών. Με την υποβολή των στοιχείων της
φόρμας καλείται η συνάρτηση validate(), η οποία ελέγχει την
τιμή που έχει καταχωρηθεί στο πλαίσιο κειμένου myInput και
προς τον σκοπό αυτό χρησιμοποιεί τον λογικό τελεστή σύζευξης
&&, που είναι το γνωστό And από άλλες γλώσσες
προγραμματισμού. </p>
</body>
</html>
79. Έλεγχος Πεδίου Φόρμας για Πλήθος Χαρακτήρων
<html>
<head>
<script type="text/javascript">
function validate() {
x=document.myForm
input=x.myInput.value
if (input.length>10) {
alert("Όχι περισσότερους από 10 χαρακτήρες.")
return false
}
else {
return true
}
}
</script>
</head>
<body>
<form name="myForm" action="submitpage.html" onsubmit="return validate()">
Καταχωρήστε κάποιο κείμενο μέχρι 10 χαρακτήρες :
<input type="text" name="myInput" size="20">
<input type="submit" value="Υποβολή">
</form>
<p> Στο παράδειγμα αυτό βλέπουμε πώς μπορούμε να κάνουμε
έλεγχο για το αν ένα πλαίσιο κειμένου περιέχει ένα μέγιστο
πλήθος χαρακτήρων. Με την υποβολή των στοιχείων της φόρμας
καλείται η συνάρτηση validate(), η οποία ελέγχει το κείμενο που
έχει καταχωρηθεί στο πλαίσιο κειμένου myInput και προς τον
σκοπό αυτό χρησιμοποιεί την ιδιότητα length του αντικειμένου
String για να ελέγξει το μήκος (πλήθος) των χαρακτήρων του
πλαισίου κειμένου myInput. </p>
</body>
</html>
80. Επικύρωση των Στοιχείων μιας Φόρμας
<html>
<head>
<script type="text/javascript">
function validate() {
x=document.myForm
at=x.email.value.indexOf("@")
code=x.code.value
firstname=x.fname.value
submitOK="True"
if (at==-1) {
alert("Δεν είναι ένα έγκυρο e-mail.")
submitOK="False"
}
if (code<1 || code>10) {
alert("Ο αριθμός πρέπει να είναι από 1 έως και 10.")
submitOK="False"
}
if (firstname.length>10) {
alert("Το όνομα να έχει λιγότερους από 11 χαρακτήρες.")
submitOK="False"
}
if (submitOK=="False") {
return false
}
}
</script>
</head>
<body>
<form name="myForm" action="submitpage.html" onsubmit="return validate()">
Δώστε ένα e-mail :
<input type="text" name="email" size="20"><br />
Δώστε έναν αριθμό από το 1 έως και το 10 :
<input type="text" name="code" size="20"><br />
Δώστε ένα όνομα μέχρι και 10 χαρακτήρες :
<input type="text" name="fname" size="20"><br />
<input type="submit" value="Submit">
</form>
<p> Το παράδειγμα αυτό συνοψίζει τα τρία τελευταία παραδείγματα,
δηλ. κάνει έλεγχο για το αν ένα πεδίο κειμένου περιέχει μια
διεύθυνση e-mail, για το αν ένα άλλο πεδίο κειμένου περιέχει μια
αριθμητική τιμή από το 1 έως και το 10 και για το αν ένα τρίτο
πεδίο κειμένου περιέχει ένα όνομα με 10 το πολύ χαρακτήρες.
Αυτή τη φορά για τον έλεγχο της αριθμητικής τιμής
χρησιμοποιούμε τον λογικό τελεστή διάζευξης, δηλ. τον ||, που
είναι το γνωστό Or σ’ άλλες γλώσσες προγραμματισμού. </p>
</body>
</html>
81. Εστίαση σ’ ένα Πεδίο Κειμένου μιας Φόρμας
<html>
<head>
<script type="text/javascript">
function setfocus() {
document.forms[0].field.focus()
}
</script>
</head>
<body>
<form>
<input type="text" name="field" size="30">
<input type="button" value="Εστίαση στο πεδίο κειμένου" onclick="setfocus()">
</form>
<p> Με τη μέθοδο focus() ενός αντικειμένου πεδίου κειμένου,
μπορούμε να εστιάσουμε (set focus) σ’ ένα πεδίο κειμένου, δηλ.
στην ουσία να τοποθετηθεί μέσα σ’ αυτό ο δείκτης του ποντικιού
ώστε να μπορούμε να γράψουμε κάτι. </p>
</body>
</html>
82. Επιλογή του Περιεχομένου ενός Πεδίου Κειμένου
<html>
<head>
<script type="text/javascript">
function setfocus() {
document.forms[0].txt.select()
document.forms[0].txt.focus()
}
</script>
</head>
<body>
<form>
<input type="text" name="txt" size="30" value="Florina per sempre">
<input type="button" value="Επιλογή του κειμένου" onclick="setfocus()">
</form>
<p> Με τη μέθοδο select() ενός αντικειμένου πεδίου κειμένου,
μπορούμε να επιλέξουμε (select) όλο το περιεχόμενο ενός πεδίου
κειμένου. </p>
</body>
</html>
83. Πλήκτρα Επιλογής (Radio Buttons) σε μια Φόρμα
<html>
<head>
<script type="text/javascript">
function check(browser) {
document.forms[0].answer.value=browser
}
</script>
</head>
<body>
<form>
Επιλέξτε τον αγαπημένο σας browser : <br /><br />
<input type="radio" name="browser" onclick="check(this.value)" value="Internet Explorer">
Internet Explorer<br />
<input type="radio" name="browser" onclick="check(this.value)" value="Netscape">
Netscape<br />
<input type="radio" name="browser" onclick="check(this.value)" value="Opera">
Opera<br />
<input type="radio" name="browser" onclick="check(this.value)" value="Firefox">
Firefox<br /><br />
<input type="text" name="answer" size="20">
</form>
<p> Παρατηρούμε ότι κατά τη δημιουργία πλήκτρων επιλογής που
ανήκουν στην ίδια ομάδα μιας φόρμας, είναι δηλαδή αμοιβαία
αποκλειόμενα, ώστε ένα μόνο να είναι επιλεγμένο κάθε φορά,
δίνουμε σ’ όλα το ίδιο όνομα, εδώ το browser, αλλά διαφορετική
τιμή (value) στο καθένα. Με το κλικ που κάνουμε επιλέγοντας
ένα πλήκτρο επιλογής, ενεργοποιείται το συμβάν (event) onclick
και καλείται η συνάρτηση check() στην οποία μεταβιβάζεται η
τιμή του πλήκτρου επιλογής που επιλέχθηκε. Αυτό που κάνει η
συνάρτηση check() είναι ότι απλά καταχωρεί την τιμή του
επιλεγμένου πλήκτρου επιλογής στο πεδίου κειμένου answer.
</p>
</body>
</html>
84. Λίστα Επιλογής (Dropdown List) σε μια Φόρμα
<html>
<head>
<script type="text/javascript">
function put() {
txt=document.forms[0].myList.
options[document.forms[0].myList.selectedIndex].text
document.forms[0].favorite.value=txt
}
</script>
</head>
<body>
<form>
Επιλέξτε τον αγαπημένο σας browser :
<select name="myList" onchange="put()">
<option>Internet Explorer</option>
<option>Netscape</option>
<option>Opera</option>
<option>Firefox</option>
</select>
<br /><br />
Ο αγαπημένος σας browser είναι ο :
<input type="text" name="favorite" size="20">
</form>
<p> Με το κλικ που κάνουμε επιλέγοντας ένα όνομα φυλλομετρητή
από την πτυσσόμενη λίστα επιλογής, ενεργοποιείται το συμβάν
(event) onchange και καλείται η συνάρτηση put(), η οποία
καταχωρεί το κείμενο (text) της επιλογής (selectedIndex) στο
πεδίο κειμένου favorite. </p>
</body>
</html>
85. Μια Ακόμα Λίστα Επιλογής (Dropdown List)
<html>
<head>
<script type="text/javascript">
function put() {
option=document.forms[0].dropdown.options[document.forms[0].dropdown.selectedIndex].text
txt=document.forms[0].number.value
txt=txt + option
document.forms[0].number.value=txt
}
</script>
</head>
<body>
<form>
Επιλέξτε έναν αριθμό : <br />
<select name="dropdown">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<input type="button" onclick="put()" value="-->">
<input type="text" name="number" size="20">
</form>
<p> Στο παράδειγμα αυτό, κάθε φορά που επιλέγουμε έναν αριθμό,
στην ουσία ένα δεκαδικό ψηφίο, από την πτυσσόμενη λίστα
επιλογής και κάνουμε κλικ στο πλήκτρο επιλογής που περιέχει
τα σύμβολα --> ως ετικέτα, ο αριθμός αυτός προστίθεται δίπλα
στον ήδη επιλεγμένο. Για να γίνει αυτό, καταχωρούμε σε μια
μεταβλητή με όνομα option τον αριθμό που έχει επιλεγεί από την
πτυσσόμενη λίστα και σε μια μεταβλητή με όνομα txt τον αριθμό
που υπάρχει ήδη στο πεδίο κειμένου number. Μετά
προσθέτουμε αυτούς τους δύο αριθμούς αλλά ως strings, δηλ.
στην ουσία τους συνενώνουμε (concatenate), και καταχωρούμε
το αποτέλεσμα στο πεδίο κειμένου number. </p>
</body>
</html>
86. Μενού Επιλογής (Select Menu) σε μια Φόρμα
<html>
<head>
<script type="text/javascript">
function go(form) {
location=form.selectmenu.value
}
</script>
</head>
<body>
<form>
<select name="selectmenu" onchange="go(this.form)">
<option>--Select page--</option>
<option value="http://www.grevena.gr">Γρεβενά</option>
<option value="http://www.kastoria.gr">Καστοριά</option>
<option value="http://www.kozani.gr">Κοζάνη</option>
<option value="http://www.florina.gr">Φλώρινα</option>
</select>
</form>
<p> Στο παράδειγμα αυτό κάθε φορά που επιλέγουμε μια πόλη από
την πτυσσόμενη λίστα ή μενού επιλογής, μεταβαίνουμε στην
αντίστοιχη ιστοσελίδα της πόλης αυτής. Με την επιλογή που
κάνουμε στην πτυσσόμενη λίστα, ενεργοποιείται το συμβάν
(event) onchange και καλείται η συνάρτηση go(), η οποία δέχεται
ως παράμετρο την ίδια τη φόρμα και καταχωρεί την τιμή (value)
που έχει επιλεγεί από την πτυσσόμενη λίστα selectmenu της
φόρμας, δηλ. στην ουσία το URL της κάθε πόλης, στην ιδιότητα
location του αντικειμένου document και έτσι γίνεται η μετάβαση
στην αντίστοιχη ιστοσελίδα. </p>
</body>
</html>
87. Αυτόματη Μετάβαση στο Επόμενο Πεδίο Κειμένου
<html>
<head>
<script type="text/javascript">
function toUnicode(element, content) {
if (content.length==element.maxLength) {
next=element.tabIndex
if (next<document.forms[0].elements.length) {
document.forms[0].elements[next].focus()
}
}
}
</script>
</head>
<body>
<p> Με τη βοήθεια αυτού του script μπορούμε να πάμε αυτόματα στο
επόμενο πεδίο κειμένου όταν έχει συμπληρωθεί το μέγιστο
μήκος χαρακτήρων του τρέχοντος πεδίου κειμένου. </p>
<form>
<input size="3" tabIndex="1" maxLength="3" onkeyup="toUnicode(this, this.value)">
<input size="3" tabIndex="2" maxLength="3" onkeyup="toUnicode(this, this.value)">
<input size="3" tabIndex="3" maxLength="3" onkeyup="toUnicode(this, this.value)">
</form>
<p> Στο παράδειγμα αυτό χρησιμοποιούμε τις ιδιότητες tabIndex και
maxLength των πεδίων κειμένου και κάθε φορά που πατάμε
κάποιο πλήκτρο στο πληκτρολόγιο, ενεργοποιείται το συμβάν
(event) onkeyup και καλείται η συνάρτηση toUnicode() στην
οποία μεταβιβάζονται δύο ορίσματα, το ίδιο το πεδίο κειμένου
(this) και η τιμή του πεδίου κειμένου (this.value). </p>
<p> Η συνάρτηση ελέγχει αν έχουμε φθάσει στο μέγιστο μήκος
χαρακτήρων που δέχεται το ενεργό πεδίο κειμένου,
συγκρίνοντας τις τιμές this.value.length και this.maxLength, και
αν ναι, τότε χρησιμοποιεί μια μεταβλητή next για να εστιάσουμε
(focus) στο επόμενο πεδίο κειμένου αν βρισκόμαστε στο 1ο ή 2ο
πεδίο κειμένου, τα οποία μέσα στη φόρμα έχουν αρίθμηση 0 και
1, αντίστοιχα. </p>
</body>
</html>
88. Αλλαγή του Ύψους μιας Εικόνας (Image)
<html>
<head>
<script type="text/javascript">
function setHeight() {
var x=document.images
x[0].height="250"
}
</script>
</head>
<body>
<img src="florina1.jpg" width="553" height="346" />
<form>
<input type="button" onclick="setHeight()" value="Αλλαγή του ύψους της εικόνας">
</form>
<p> Η εικόνα που φαίνεται μέσα στην ιστοσελίδα έχει αρχικό ύψος
346 pixels και αν κάνουμε κλικ στο πλήκτρο εντολής, το ύψος της
θα γίνει 250 pixels, δηλ. η εικόνα θα κοντύνει, χωρίς, όμως, να
επηρεασθεί και το πλάτος της. </p>
<p> Μόλις κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση setHeight(), η
οποία αλλάζει την ιδιότητα height (ύψος) της μοναδικής εικόνας
που υπάρχει στην ιστοσελίδα, γι’ αυτό και αναφέρεται σ’ αυτήν
ως document.images[0]. </p>
</body>
</html>
89. Αλλαγή της Ίδιας της Εικόνας (Image)
<html>
<head>
<script type="text/javascript">
function setSrc() {
var x=document.images
x[0].src="florina2.jpg"
}
</script>
</head>
<body>
<img src="florina1.jpg" />
<form>
<input type="button" onclick="setSrc()" value="Αλλαγή εικόνας">
</form>
<p> Η εικόνα που υπάρχει στην ιστοσελίδα θα αντικατασταθεί με μια
άλλη εικόνα μόλις κάνουμε κλικ στο πλήκτρο εντολής. </p>
<p> Μόλις κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση setSrc(), η
οποία αλλάζει την ιδιότητα src (source, πηγή, προέλευση) της
μοναδικής εικόνας που υπάρχει στην ιστοσελίδα, γι’ αυτό και
αναφέρεται σ’ αυτήν ως document.images[0]. </p>
</body>
</html>
90. Αλλαγή του Πλάτους μιας Εικόνας (Image)
<html>
<head>
<script type="text/javascript">
function setWidth() {
var x=document.images
x[0].width="300"
}
</script>
</head>
<body>
<img src="florina1.jpg" width="553" height="346" />
<form>
<input type="button" onclick="setWidth()" value="Αλλαγή του πλάτους της εικόνας">
</form>
<p> Η εικόνα που φαίνεται μέσα στην ιστοσελίδα έχει αρχικό πλάτος
553 pixels και αν κάνουμε κλικ στο πλήκτρο εντολής, το πλάτος
της θα γίνει 300 pixels, δηλ. η εικόνα θα μικρύνει, χωρίς, όμως,
να επηρεασθεί και το ύψος της. </p>
<p> Μόλις κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση setWidth(), η
οποία αλλάζει την ιδιότητα width (πλάτος) της μοναδικής
εικόνας που υπάρχει στην ιστοσελίδα, γι’ αυτό και αναφέρεται
σ’ αυτήν ως document.images[0]. </p>
</body>
</html>
91. Αλλαγή του URL της Τρέχουσας Ιστοσελίδας
<html>
<head>
<script type="text/javascript">
function current_Location() {
alert(location)
}
function change_Location() {
window.location="http://www.florina.gr"
}
</script>
</head>
<body>
<form>
<input type="button" onclick="current_Location()" value="Εμφάνιση του τρέχοντος URL">
<input type="button" onclick="change_Location()" value="Αλλαγή του URL">
</form>
<p> Το παράδειγμα αυτό χρησιμοποιεί δύο πλήκτρα εντολής, όπου το
ένα εμφανίζει το URL της τρέχουσας ιστοσελίδας και το άλλο
αλλάζει αυτό το URL με μια συγκεκριμένη διεύθυνση μιας άλλης
ιστοσελίδας. Η ιδιότητα που επηρεάζουμε με τα δύο αυτά
πλήκτρα εντολής είναι η location του αντικειμένου Window.
</p>
</body>
</html>
92. Ανανέωση (Refresh) μιας Ιστοσελίδας
<html>
<head>
<script type="text/javascript">
function refresh() {
window.location.reload()
}
</script>
</head>
<body>
<form>
<input type="button" value="Ανανέωση (refresh) της σελίδας" onclick="refresh()">
</form>
<p> Για να ανανεώσουμε (refresh) την τρέχουσα ιστοσελίδα,
χρησιμοποιούμε τη μέθοδο reload() του αντικειμένου location.
</p>
</body>
</html>
93. Εντοπισμός του Φυλλομετρητή του Χρήστη
<html>
<body>
<script type="text/javascript">
document.write("Ο φυλλομετρητής που χρησιμοποιείτε είναι ο : " + navigator.appName)
</script>
<p> Για να εμφανίσουμε την ονομασία του φυλλομετρητή (browser)
που έχει ένας χρήστης, χρησιμοποιούμε την ιδιότητα appName
του αντικειμένου navigator. </p>
</body>
</html>
94. Πληροφορίες για τον Φυλλομετρητή του Χρήστη
<html>
<body>
<script type="text/javascript">
document.write("<p>Φυλλομετρητής (Browser) : ")
document.write(navigator.appName + "</p>")
document.write("<p>Έκδοση του Φυλλομετρητή : ")
document.write(navigator.appVersion + "</p>")
document.write("<p>Κωδικός (Code) : ")
document.write(navigator.appCodeName + "</p>")
document.write("<p>Πλατφόρμα (Platform) : ")
document.write(navigator.platform + "</p>")
document.write("<p>Ενεργά Cookies : ")
document.write(navigator.cookieEnabled + "</p>")
document.write("<p>Επικεφαλίδα (Header) : ")
document.write(navigator.userAgent + "</p>")
</script>
</body>
</html>
95. Όλα τα Στοιχεία για τον Φυλλομετρητή του Χρήστη
<html>
<body>
<script type="text/javascript">
var x = navigator
document.write("CodeName = " + x.appCodeName)
document.write("<br />")
document.write("MinorVersion = " + x.appMinorVersion)
document.write("<br />")
document.write("Name = " + x.appName)
document.write("<br />")
document.write("Version = " + x.appVersion)
document.write("<br />")
document.write("CookieEnabled = " + x.cookieEnabled)
document.write("<br />")
document.write("CPUClass = " + x.cpuClass)
document.write("<br />")
document.write("OnLine = " + x.onLine)
document.write("<br />")
document.write("Platform = " + x.platform)
document.write("<br />")
document.write("UA = " + x.userAgent)
document.write("<br />")
document.write("BrowserLanguage = " + x.browserLanguage)
document.write("<br />")
document.write("SystemLanguage = " + x.systemLanguage)
document.write("<br />")
document.write("UserLanguage = " + x.userLanguage)
</script>
</body>
</html>
96. Ανακατεύθυνση Χρήστη Ανάλογα με τον Browser
<html>
<head>
<script type="text/javascript">
function redirectme() {
bname=navigator.appName
if (bname.indexOf("Netscape")!=-1) {
window.location="netscape_page.html"
return
}
if (bname.indexOf("Microsoft")!=-1) {
window.location="microsoft_page.html"
return
}
window.location="other_page.html"
}
</script>
</head>
<body onload="redirectme()">
<p> Με το που φορτώνεται αυτή η ιστοσελίδα, ενεργοποιείται το
συμβάν (event) onload και καλείται η συνάρτηση redirectme(), η
οποία ελέγχει αν υπάρχει ένα από τα strings Netscape ή Microsoft
στην ιδιότητα appName του αντικειμένου navigator για να
φορτώσει έτσι την αντίστοιχη ιστοσελίδα. Μπορούμε να
προβλέψουμε και την ύπαρξη μιας τρίτης ιστοσελίδας, στην
περίπτωση που ο χρήστης χρησιμοποιεί κάποιον άλλον
φυλλομετρητή. </p>
</body>
</html>
97. Έλεγχος της Έκδοσης του Browser
<html>
<head>
<script type="text/javascript">
function browserversion() {
txt="Ο browser σας είναι άγνωστος"
browser=navigator.appVersion
if (browser.indexOf("2.")>-1) {
txt="Ο browser σας είναι πολύ παλιός."
}
if (browser.indexOf("3.")>-1) {
txt="Ο browser σας χρειάζεται ενημέρωση."
}
if (browser.indexOf("4.")>-1) {
txt="Ο browser σας είναι πολύ καλός."
}
document.getElementById("message").innerHTML=txt
}
</script>
</head>
<body onload="browserversion()">
<span id="message"></span>
<p> Με το που φορτώνεται αυτή η ιστοσελίδα, ενεργοποιείται το
συμβάν (event) onload και καλείται η συνάρτηση
browserversion(), η οποία ελέγχει την έκδοση (version) του
φυλλομετρητή του χρήστη μέσω της ιδιότητας appVersion του
αντικειμένου navigator. Ανάλογα με την έκδοση του
φυλλομετρητή που εντοπίζεται, δημιουργείται μια μεταβλητή
string με όνομα txt, η οποία καταχωρείται στην ιδιότητα
innerHTML ενός αντικειμένου, για να εμφανισθεί έτσι μέσα στην
ιστοσελίδα, αντί να χρησιμοποιηθεί η γνωστή μέθοδος
document.write(). </p>
</body>
</html>
98. Ενεργοποίηση & Απενεργοποίηση Λίστας Επιλογής
<html>
<head>
<script type="text/javascript">
function makeDisable() {
var x=document.getElementById("mySelect")
x.disabled=true
}
function makeEnable() {
var x=document.getElementById("mySelect")
x.disabled=false
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Γρεβενά</option>
<option>Καστοριά</option>
<option>Κοζάνη</option>
<option>Φλώρινα</option>
</select>
<input type="button" onclick="makeDisable()" value="Απενεργοποίηση της Λίστας Επιλογής">
<input type="button" onclick="makeEnable()" value="Ενεργοποίηση της Λίστας Επιλογής">
</form>
<p> Για να ενεργοποιήσουμε ή απενεργοποιήσουμε μια λίστα
επιλογής, χρησιμοποιούμε την ιδιότητά της disabled, στην οποία
δίνουμε την τιμή false ή true, αντίστοιχα. Μια απενεργοποιημενη
λίστα επιλογής εμφανίζεται με γκρίζο χρώμα και δεν μπορούμε
να επιλέξουμε κανένα στοιχείο της. </p>
</body>
</html>
99. Όνομα Φόρμας που Περιέχει μια Λίστα Επιλογής
<html>
<head>
<script type="text/javascript">
function formAction() {
var x=document.getElementById("mySelect")
alert(x.form.name)
}
</script>
</head>
<body>
<form name="WestMacedonia">
<select id="mySelect">
<option>Γρεβενά</option>
<option>Καστοριά</option>
<option>Κοζάνη</option>
<option>Φλώρινα</option>
</select>
<input type="button" onclick="formAction()" value="Εμφάνιση του ονόματος της φόρμας">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση formAction(), η
οποία εμφανίζει σ’ ένα πλαίσιο μηνύματος (alert box) το όνομα
της φόρμας που περιέχει τη λίστα επιλογής. </p>
</body>
</html>
100. Αριθμός των Επιλογών (Options) Λίστας Επιλογής
<html>
<head>
<script type="text/javascript">
function formAction() {
var x=document.getElementById("mySelect")
alert(x.length)
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Γρεβενά</option>
<option>Καστοριά</option>
<option>Κοζάνη</option>
<option>Φλώρινα</option>
</select>
<input type="button" onclick="formAction()" value="Πόσες επιλογές (options) υπάρχουν στη λίστα;">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση formAction(), η
οποία εμφανίζει σ’ ένα πλαίσιο μηνύματος (alert box) το πλήθος
των επιλογών (options) που περιέχει η λίστα επιλογής,
χρησιμοποιώντας προς τον σκοπό αυτό την ιδιότητα length του
αντικειμένου Select. </p>
</body>
</html>
101. Αλλαγή του Μεγέθους μιας Λίστας Επιλογής
<html>
<head>
<script type="text/javascript">
function formAction() {
var x=document.getElementById("mySelect")
x.size="4"
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Γρεβενά</option>
<option>Καστοριά</option>
<option>Κοζάνη</option>
<option>Φλώρινα</option>
</select>
<input type="button" onclick="formAction()" value="Αλλαγή του μεγέθους της λίστας">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση formAction(), η
οποία αυξάνει το μέγεθος της λίστας σε 4, ώστε να μπορούμε να
βλέπουμε όλα τα στοιχεία της λίστας, χρησιμοποιώντας προς τον
σκοπό αυτό την ιδιότητα size του αντικειμένου Select. Στην ουσία
μετατρέπει τη λίστα από πτυσσόμενη σε πλαίσιο λίστας. </p>
</body>
</html>
102. Πολλαπλή Επιλογή σε Πλαίσιο Λίστας
<html>
<head>
<script type="text/javascript">
function formAction() {
var x=document.getElementById("mySelect")
x.multiple=true
}
</script>
</head>
<body>
<p> Πριν κάνετε κλικ στο πλήκτρο εντολής, προσπαθήστε να
επιλέξετε περισσότερες από μία επιλογές με τα πλήκτρα Shift ή
Control. Μετά, κάντε κλικ στο πλήκτρο επιλογής και
προσπαθήστε ξανά. </p>
<form>
<select id="mySelect" size="4">
<option>Γρεβενά</option>
<option>Καστοριά</option>
<option>Κοζάνη</option>
<option>Φλώρινα</option>
</select>
<input type="button" onclick="formAction()" value="Πολλαπλή επιλογή">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση formAction(), η
οποία δίνει την τιμή true στην ιδιότητα multiple του πλαισίου
λίστας, ώστε να μπορούμε να επιλέξουμε περισσότερες από μία
επιλογές. Με πατημένο το πλήκτρο Shift μπορούμε να κάνουμε
συνεχόμενες επιλογές, ενώ με πατημένο το πλήκτρο Control
μπορούμε να κάνουμε μεμονωμένες επιλογές. </p>
</body>
</html>
103. Εμφάνιση του Κειμένου της Επιλογής
<html>
<head>
<script type="text/javascript">
function getText() {
var x=document.getElementById("mySelect")
alert(x.options[x.selectedIndex].text)
}
</script>
</head>
<body>
<form>
Επιλέξτε μια πόλη :
<select id="mySelect">
<option>Γρεβενά</option>
<option>Καστοριά</option>
<option>Κοζάνη</option>
<option>Φλώρινα</option>
</select>
<br /><br />
<input type="button" onclick="getText()" value="Εμφάνιση της επιλεγμένης πόλης">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση getText(), η
οποία εμφανίζει σ’ ένα πλαίσιο μηνύματος (alert box) το κείμενο
της επιλογής που έχουμε κάνει, δηλ. την πόλη που έχουμε
επιλέξει. </p>
</body>
</html>
104. Εμφάνιση της Αρίθμησης της Επιλογής
<html>
<head>
<script type="text/javascript">
function getIndex() {
var x=document.getElementById("mySelect")
alert(x.selectedIndex)
}
</script>
</head>
<body>
<form>
Επιλέξτε μια πόλη :
<select id="mySelect">
<option>Γρεβενά</option>
<option>Καστοριά</option>
<option>Κοζάνη</option>
<option>Φλώρινα</option>
</select>
<br /><br />
<input type="button" onclick="getIndex()" value="Εμφάνιση αρίθμησης της επιλεγμένης πόλης">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση getIndex(), η
οποία εμφανίζει σ’ ένα πλαίσιο μηνύματος (alert box) την
αρίθμηση της επιλογής που έχουμε κάνει, δηλ. τον αύξοντα
αριθμό της πόλης που έχουμε επιλέξει, όπου η αρίθμηση
ξεκινάει από το 0. </p>
</body>
</html>
105. Αλλαγή μιας Επιλογής σε μια Λίστα Επιλογής
<html>
<head>
<script type="text/javascript">
function changeText() {
var x=document.getElementById("mySelect")
x.options[x.selectedIndex].text="Βέροια"
}
</script>
</head>
<body>
<form>
Επιλέξτε μια πόλη :
<select id="mySelect">
<option>Γρεβενά</option>
<option>Καστοριά</option>
<option>Κοζάνη</option>
<option>Φλώρινα</option>
</select>
<br /><br />
<input type="button" onclick="changeText()" value="Αλλαγή της επιλεγμένης πόλης">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση changeText(), η
οποία αντικαθιστά το κείμενο της επιλεγμένης πόλης με μια
συγκεκριμένη άλλη πόλη. </p>
</body>
</html>
106. Διαγραφή μιας Επιλογής από μια Λίστα Επιλογής
<html>
<head>
<script type="text/javascript">
function formAction() {
var x=document.getElementById("mySelect")
x.remove(x.selectedIndex)
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Γρεβενά</option>
<option>Καστοριά</option>
<option>Κοζάνη</option>
<option>Φλώρινα</option>
</select>
<input type="button" onclick="formAction()" value="Διαγραφή της επιλεγμένης πόλης">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση formAction(), η
οποία διαγράφει την επιλεγμένη πόλη από τη λίστα κάνοντας
χρήση της ιδιότητας remove. </p>
</body>
</html>
107. Λεπτομέρειες για την Οθόνη του Χρήστη
<html>
<body>
<script type="text/javascript">
document.write("Ανάλυση της οθόνης : ")
document.write(screen.width + "*" + screen.height)
document.write("<br />")
document.write("Διαθέσιμη περιοχή θέασης : ")
document.write(screen.availWidth + "*" + screen.availHeight)
document.write("<br />")
document.write("Βάθος χρώματος (color depth) : ")
document.write(screen.colorDepth)
document.write("<br />")
</script>
<p> Το αντικείμενο screen διαθέτει τις ιδιότητες width, height,
availWidth, availHeight και colorDepth. </p>
</body>
</html>
108. Αλλαγή του Πλάτους του Περιθωρίου ενός Πίνακα
<html>
<head>
<script type="text/javascript">
function changeBorder() {
document.getElementById('myTable').border="10"
}
</script>
</head>
<body>
<table border="1" id="myTable">
<tr>
<td>Γρεβενά</td>
<td>Καστοριά</td>
</tr>
<tr>
<td>Κοζάνη</td>
<td>Φλώρινα</td>
</tr>
</table>
<form>
<input type="button" onclick="changeBorder()" value="Αλλαγή πλάτους του περιθωρίου του πίνακα">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση
changeBorder(), η οποία ορίζει την ιδιότητα border του
αντικειμένου Table να είναι ίση με 10, κάτι που δίνει μια
τρισδιάστατη εμφάνιση στον πίνακα. </p>
</body>
</html>
109. Αλλαγή των Ιδοτήτων cellPadding και cellSpacing Πίνακα
<html>
<head>
<script type="text/javascript">
function padding() {
document.getElementById('myTable').cellPadding="15"
}
function spacing() {
document.getElementById('myTable').cellSpacing="15"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Γρεβενά</td>
<td>Καστοριά</td>
</tr>
<tr>
<td>Κοζάνη</td>
<td>Φλώρινα</td>
</tr>
</table>
<form>
<input type="button" onclick="padding()" value="Αλλαγή του Cellpadding">
<input type="button" onclick="spacing()" value="Αλλαγή του Cellspacing">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής για την αλλαγή του
Cellpadding, ενεργοποιείται το συμβάν (event) onclick και
καλείται η συνάρτηση padding(), η οποία ορίζει την ιδιότητα
Cellpadding του αντικειμένου Table να είναι ίση με 15. Η
ιδιότητα Cellpadding του tag <table> καθορίζει το ποσό του
κενού χώρου σε pixels μεταξύ των άκρων των κελιών και των
περιεχομένων τους, με εξ ορισμού τιμή το 1. </p>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής για την αλλαγή του
Cellspacing, ενεργοποιείται το συμβάν (event) onclick και
καλείται η συνάρτηση spacing(), η οποία ορίζει την ιδιότητα
Cellspacing του αντικειμένου Table να είναι ίση με 15. Η ιδιότητα
Cellspacing του tag <table> καθορίζει το διάστημα μεταξύ των
κελιών ενός πίνακα, δηλ. το πάχος των σκιασμένων γραμμών
που διαχωρίζουν τα κελιά, με εξ ορισμού τιμή το 2. Η ρύθμιση
για το διάστημα μεταξύ των κελιών περιλαμβάνει επίσης τον
χώρο στην περίμετρο του πίνακα, δηλ. «αυξάνει» την περίμετρο
του πίνακα. </p>
</body>
</html>
110. Εμφάνιση Πλαισίων (Frames) σ’ έναν Πίνακα
<html>
<head>
<script type="text/javascript">
function aboveFrames() {
document.getElementById('myTable').frame="above"
}
function belowFrames() {
document.getElementById('myTable').frame="below"
}
</script>
</head>
<body>
<table id="myTable">
<tr>
<td>Γρεβενά</td>
<td>Καστοριά</td>
</tr>
<tr>
<td>Κοζάνη</td>
<td>Φλώρινα</td>
</tr>
</table>
<form>
<input type="button" onclick="aboveFrames()" value="Εμφάνιση των πάνω πλαισίων (frames)">
<input type="button" onclick="belowFrames()" value="Εμφάνιση των κάτω πλαισίων (frames)">
</form>
<p> Με το που κάνουμε κλικ σ’ ένα πλήκτρο εντολής, ενεργοποιείται
το συμβάν (event) onclick και καλείται η συνάρτηση
aboveFrames() ή belowFrames(), ανάλογα, η οποία ορίζει την
ιδιότητα frame του αντικειμένου Table να πάρει την τιμή above ή
below και να εμφανισθούν έτσι τα αντίστοιχα πλαίσια (frames)
στον πίνακα. </p>
</body>
</html>
111. Αλλαγή του Ύψους μιας Γραμμής Πίνακα
<html>
<head>
<script type="text/javascript">
function specifyRow() {
var x=document.getElementById('myTable').rows
x[1].height="100"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Γρεβενά</td>
<td>Καστοριά</td>
</tr>
<tr>
<td>Κοζάνη</td>
<td>Φλώρινα</td>
</tr>
</table>
<form>
<input type="button" onclick="specifyRow()" value="Αλλαγή του ύψους της δεύτερης γραμμής">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται
το συμβάν (event) onclick και καλείται η συνάρτηση
specifyRow(), η οποία ορίζει την ιδιότητα height της δεύτερης
γραμμής του αντικειμένου Table, δηλ. της row[1], να πάρει την
τιμή 100 και να ξεχωρίσει έτσι από την πρώτη γραμμή του
πίνακα. </p>
</body>
</html>
112. Εμφάνιση Περιγραμμάτων Γραμμών ή Στηλών Πίνακα
<html>
<head>
<script type="text/javascript">
function rowRules() {
document.getElementById('myTable').rules="rows"
}
function colRules() {
document.getElementById('myTable').rules="cols"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Γρεβενά</td>
<td>Καστοριά</td>
</tr>
<tr>
<td>Κοζάνη</td>
<td>Φλώρινα</td>
</tr>
</table>
<form>
<input type="button" onclick="rowRules()" value="Εμφάνιση των περιγραμμάτων των γραμμών">
<input type="button" onclick="colRules()" value="Εμφάνιση των περιγραμμάτων των στηλών">
</form>
<p> Με το που κάνουμε κλικ σ’ ένα πλήκτρο εντολής, ενεργοποιείται
το συμβάν (event) onclick και καλείται η συνάρτηση
rowRules() ή colRules(), ανάλογα, η οποία ορίζει την ιδιότητα
rules του αντικειμένου Table να πάρει την τιμή rows ή cols και να
εμφανισθούν μόνο τα αντίστοιχα περιγράμματα (borders) στον
πίνακα. </p>
</body>
</html>
113. Δημιουργία Λεζάντας (Caption) σ’ έναν Πίνακα
<html>
<head>
<script type="text/javascript">
function caption() {
var x=document.getElementById('myTable').createCaption()
x.innerHTML="<b>Οι Πόλεις της Δυτικής Μακεδονίας</b>"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Γρεβενά</td>
<td>Καστοριά</td>
</tr>
<tr>
<td>Κοζάνη</td>
<td>Φλώρινα</td>
</tr>
</table>
<form>
<input type="button" onclick="caption()" value="Δημιουργία λεζάντας (caption)">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται
το συμβάν (event) onclick και καλείται η συνάρτηση caption(), η
οποία ορίζει την ιδιότητα innerHTML της μεθόδου
createCaption() του αντικειμένου Table, δηλ. της λεζάντας
(caption) του πίνακα, να πάρει μια συγκεκριμένη τιμή (κείμενο),
η οποία θα εμφανισθεί πάνω ακριβώς από τα κελιά του πίνακα.
</p>
</body>
</html>
114. Διαγραφή Γραμμών από έναν Πίνακα
<html>
<head>
<script type="text/javascript">
function deleteRow(i) {
document.getElementById('myTable').deleteRow(i)
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Δυτική Μακεδονία</td>
<td><input type="button" value="Διαγραφή της γραμμής" onclick="deleteRow(this.parentNode.parentNode.rowIndex)">
</td>
</tr>
<tr>
<td>Κεντρική Μακεδονία</td>
<td><input type="button" value="Διαγραφή της γραμμής" onclick="deleteRow(this.parentNode.parentNode.rowIndex)">
</td>
</tr>
</table>
<p> Με το που κάνουμε κλικ σ’ ένα πλήκτρο εντολής, ενεργοποιείται
το συμβάν (event) onclick και καλείται η συνάρτηση deleteRow(),
η οποία διαγράφει την αντίστοιχη γραμμή του πίνακα,
χρησιμοποιώντας τη μέθοδο deleteRow() του αντικειμένου
Table. </p>
</body>
</html>
115. Εισαγωγή Γραμμής και Κελιών σ’ έναν Πίνακα
<html>
<head>
<script type="text/javascript">
function insRow() {
var x=document.getElementById('myTable').insertRow(1)
var y=x.insertCell(0)
var z=x.insertCell(1)
y.innerHTML="Βέροια"
z.innerHTML="Έδεσσα"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Γρεβενά</td>
<td>Καστοριά</td>
</tr>
<tr>
<td>Κοζάνη</td>
<td>Φλώρινα</td>
</tr>
</table>
<form>
<input type="button" onclick="insRow()" value="Εισαγωγή γραμμής στον πίνακα">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση insRow(), η
οποία εισάγει μια γραμμή στον πίνακα, χρησιμοποιώντας τις
μεθόδους insertRow() και insertCell() του αντικειμένου Table, για
την εισαγωγή γραμμής (row) και κελιών (cell), αντίστοιχα. Με
την ιδιότητα innerHTML δίνουμε τιμές (περιεχόμενο) στα κελιά
που δημιουργήθηκαν. </p>
</body>
</html>
116. Ευθυγράμμιση του Περιεχομένου των Κελιών Πίνακα
<html>
<head>
<script type="text/javascript">
function alignRow() {
var x=document.getElementById('myTable').rows
x[0].align="right"
}
</script>
</head>
<body>
<table width="60%" id="myTable" border="1">
<tr>
<td>Γρεβενά</td>
<td>Καστοριά</td>
</tr>
<tr>
<td>Κοζάνη</td>
<td>Φλώρινα</td>
</tr>
</table>
<form>
<input type="button" onclick="alignRow()" value="Δεξιά στοίχιση της πρώτης γραμμής">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση alignRow(), η
οποία στοιχίζει δεξιά το περιεχόμενο των κελιών της πρώτης
γραμμής του πίνακα (rows[0]), δίνοντας την τιμή right στην
ιδιότητα align. </p>
</body>
</html>
117. Αλλαγή του Περιεχομένου ενός Κελιού Πίνακα
<html>
<head>
<script type="text/javascript">
function changeContent() {
var x=document.getElementById('myTable').rows
var y=x[0].cells
y[0].innerHTML="Βέροια"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Γρεβενά</td>
<td>Καστοριά</td>
</tr>
<tr>
<td>Κοζάνη</td>
<td>Φλώρινα</td>
</tr>
</table>
<form>
<input type="button" onclick="changeContent()" value="Αλλαγή περιεχομένου στο πρώτο κελί">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση
changeContent(), η οποία καταχωρεί στο αριστερό κελί
(cells[0]) της πρώτης γραμμής του πίνακα (rows[0]), κάποιο
άλλο περιεχόμενο, αλλάζοντας την ιδιότητα innerHTML. </p>
</body>
</html>
118. Κατακόρυφη Ευθυγράμμιση Περιεχομένου Κελιών Πίνακα
<html>
<head>
<script type="text/javascript">
function valignRow() {
var x=document.getElementById('myTable').rows
x[0].vAlign="top"
}
</script>
</head>
<body>
<table width="50%" id="myTable" border="1">
<tr>
<td height="50">Γρεβενά</td>
<td height="50">Καστοριά</td>
</tr>
<tr>
<td height="50">Κοζάνη</td>
<td height="50">Φλώρινα</td>
</tr>
</table>
<form>
<input type="button" onclick="valignRow()" value="Κατακόρυφη Ευθυγράμμιση της 1ης Γραμμής">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση valignRow(), η
οποία καταχωρεί στην ιδιότητα vAlign την τιμή top, ώστε να
ευθυγραμμισθεί κατακόρυφα προς τα πάνω η πρώτη γραμμή
του πίνακα (rows[0]). </p>
</body>
</html>
119. Ευθυγράμμιση Περιεχομένου σ’ ένα Μόνο Κελί Πίνακα
<html>
<head>
<script type="text/javascript">
function alignCell() {
var x=document.getElementById('myTable').rows[0].cells
x[0].align="center"
}
</script>
</head>
<body>
<table id="myTable" border="1" width="100%">
<tr>
<td>Γρεβενά</td>
<td>Καστοριά</td>
</tr>
<tr>
<td>Κοζάνη</td>
<td>Φλώρινα</td>
</tr>
</table>
<form>
<input type="button" onclick="alignCell()" value="Ευθυγράμμιση ενός μόνο κελιού">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση alignCell(), η
οποία καταχωρεί στην ιδιότητα align την τιμή center, ώστε να
κεντραρισθεί μόνο το αριστερό κελί (cells[0]) της πρώτης
γραμμής του πίνακα (rows[0]) και όχι ολόκληρη η γραμμή.
</p>
</body>
</html>
120. Κατακόρυφη Ευθυγράμμιση σ’ ένα Μόνο Κελί Πίνακα
<html>
<head>
<script type="text/javascript">
function valignCell() {
var x=document.getElementById('myTable').rows[0].cells
x[0].vAlign="bottom"
}
</script>
</head>
<body>
<table id="myTable" border="1" height="70%">
<tr>
<td>Γρεβενά</td>
<td>Καστοριά</td>
</tr>
<tr>
<td>Κοζάνη</td>
<td>Φλώρινα</td>
</tr>
</table>
<form>
<input type="button" onclick="valignCell()" value="Κατακόρυφη ευθυγράμμιση ενός μόνο κελιού">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση valignCell(), η
οποία καταχωρεί στην ιδιότητα vAlign την τιμή bottom, ώστε να
ευθυγραμμισθεί κατακόρυφα προς τα κάτω μόνο το αριστερό
κελί (cells[0]) της πρώτης γραμμής του πίνακα (rows[0]) και όχι
ολόκληρη η γραμμή. </p>
</body>
</html>
121. Προσθήκη Κελιού σε μια Γραμμή Πίνακα
<html>
<head>
<script type="text/javascript">
function addCell() {
var x=document.getElementById('myTable').rows[0]
var y=x.insertCell(2)
y.innerHTML="Βέροια"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Γρεβενά</td>
<td>Καστοριά</td>
</tr>
<tr>
<td>Κοζάνη</td>
<td>Φλώρινα</td>
</tr>
</table>
<form>
<input type="button" onclick="addCell()" value="Προσθήκη κελιού">
</form>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση addCell(), η
οποία χρησιμοποιεί τη μέθοδο insertCell() για να δημιουργήσει
(προσθέσει) ένα τρίτο κελί μόνο στην πρώτη γραμμή του πίνακα
(rows[0]) και μετά καταχωρεί στην ιδιότητα innerHTML το
περιεχόμενο του καινούργιου κελιού. </p>
</body>
</html>
122. Αλλαγή του Colspan μιας Γραμμής Πίνακα
<html>
<head>
<script type="text/javascript">
function setColSpan() {
var x=document.getElementById('myTable').rows[0].cells
x[0].colSpan="2"
x[1].colSpan="6"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td colspan="4" align=center><b>Ποδόσφαιρο</b></td>
<td colspan="4" align=center><b>Μπάσκετ</b></td>
</tr>
<tr>
<td>Παναθηναϊκός</td>
<td>Ολυμπιακός</td>
<td>Πανιώνιος</td>
<td>Άρης</td>
<td>ΑΕΚ</td>
<td>ΠΑΟΚ</td>
<td>Ηρακλής</td>
<td>Λάρισα</td>
</tr>
</table>
<form>
<input type="button" onclick="setColSpan()" value="Αλλαγή του colspan">
</form>
<p> Χρησιμοποιούμε την ιδιότητα colspan για μια γραμμή ενός
πίνακα, όταν ένα κελί αυτής της γραμμής εκτείνεται (καλύπτει)
σε περισσότερες από μία στήλες μιας άλλης γραμμής. Ο αριθμός
που δίνεται στην ιδιότητα colspan προσδιορίζει και το πλήθος
των κελιών που καλύπτει το υπόψη κελί. </p>
<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το
συμβάν (event) onclick και καλείται η συνάρτηση setColSpan(), η
οποία αλλάζει την τιμή της ιδιότητας colSpan για το πρώτο και
το δεύτερο κελί της πρώτης γραμμής του πίνακα (rows[0]), δηλ.
για τα κελιά cells[0] και cells[1], στα οποία δίνει τις τιμές 2 και
6 αντίστοιχα, ώστε το άθροισμά τους να είναι ίσο με 8, καθώς
καλύπτουν και τα δύο μαζί 8 κελιά από τη δεύτερη γραμμή του
πίνακα. </p>
</body>
</html>
123. Εμφάνιση Πλαισίου Μηνύματος (Alert Box)
<html>
<head>
<script type="text/javascript">
function display_alert() {
alert("Αυτό το μήνυμα εμφανίσθηκε από ένα alert box.")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="display_alert()" value="Εμφάνιση ενός alert box">
</form>
<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο alert() του
αντικειμένου Window για να εμφανισθεί ένα alert box, δηλ. ένα
πλαίσιο ή παράθυρο μηνύματος, στο οποίο μπορούμε απλά να
εμφανίσουμε ένα ενημερωτικό μήνυμα για τον χρήστη, ο οποίος
θα πρέπει να κάνει κλικ στο πλήκτρο ΟΚ για να το κλείσει.
</p>
</body>
</html>
124. Εμφάνιση Alert Box με Αλλαγή Γραμμής
<html>
<head>
<script type="text/javascript">
function display_alert() {
alert("Μπορούμε να κάνουμε και" + '\n' + "αλλαγή γραμμής σ’ ένα alert box.")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="display_alert()" value=" Εμφάνιση ενός alert box με αλλαγή γραμμής">
</form>
<p> Για να κάνουμε αλλαγή γραμμής στο κείμενο ενός alert box,
μπορούμε να χρησιμοποιήσουμε τον γνωστό χαρακτήρα \n και
τα σύμβολα + για να ενώσουμε τα μηνύματα που θα
εμφανισθούν σε κάθε γραμμή. </p>
</body>
</html>
125. Εμφάνιση Πλαισίου Επιβεβαίωσης (Confirm Box)
<html>
<head>
<script type="text/javascript">
function display_confirm() {
var name=confirm("Κάντε κλικ σ’ ένα πλήκτρο")
if (name==true) {
document.write("Κάνατε κλικ στο πλήκτρο OK")
}
else {
document.write("Κάνατε κλικ στο πλήκτρο Cancel")
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="display_confirm()" value="Εμφάνιση ενός confirm box">
</form>
<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο confirm() του
αντικειμένου Window για να εμφανισθεί ένα πλαίσιο ή
παράθυρο μηνύματος, στο οποίο θα μπορούμε να επιλέξουμε να
κάνουμε κλικ είτε στο πλήκτρο ΟΚ είτε στο πλήκτρο Cancel
(Άκυρο), οπότε η μέθοδος confirm() επιστρέφει την τιμή true ή
false, αντίστοιχα. Μπορούμε να χρησιμοποιήσουμε την τιμή
επιστροφής της μεθόδου αυτής για να πάρουμε απάντηση από
τον χρήστη σε μια ερώτησή μας σε στυλ Ναι/Όχι και αποτελεί
το απλούστερο είδος αλληλεπίδρασης (interaction). </p>
</body>
</html>
126. Εμφάνιση Πλαισίου Προτροπής (Prompt Box)
<html>
<head>
<script type="text/javascript">
function display_prompt() {
var name=prompt("Δώσε το όνομά σου : ", "")
if (name!=null && name!="") {
document.write("Γεια σου " + name + "! Πώς είσαι;")
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="display_prompt()" value="Εμφάνιση ενός prompt box">
</form>
<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο prompt() του
αντικειμένου Window για να εμφανισθεί ένα πλαίσιο ή
παράθυρο μηνύματος, στο οποίο θα μπορούμε να γράψουμε
κάτι και να κάνουμε κλικ στο πλήκτρο ΟΚ, οπότε η μέθοδος
prompt() επιστρέφει το κείμενο που καταχωρήσαμε. Μπορούμε
να χρησιμοποιήσουμε την τιμή επιστροφής της μεθόδου αυτής
για να πάρουμε απάντηση από τον χρήστη σε μια ερώτησή μας
σχετικά μ’ ένα όνομα ή με μια τιμή και αποτελεί ένα πιο
προηγμένο είδος αλληλεπίδρασης (interaction) σε σχέση με τη
μέθοδο confirm(). </p>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function open_window() {
window.open("http://www.florina.gr")
}
</script>
</head>
<body>
<form>
<input type=button value="Άνοιγμα νέου παραθύρου" onclick="open_window()">
</form>
<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο open() του
αντικειμένου Window για να ανοίξουμε ένα νέο παράθυρο
φυλλομετρητή και να προσδιορίσουμε και το URL της
ιστοσελίδας που θέλουμε να εμφανισθεί μέσα στο παράθυρο.
</p>
</body>
</html>
128. Άνοιγμα Νέου Παραθύρου με Πολλές Παραμέτρους
<html>
<head>
<script type="text/javascript">
function open_window() {
window.open("http://www.florina.gr", "_blank", "toolbar=yes, location=yes, directories=no, status=no,\
menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=500, height=500")
}
</script>
</head>
<body>
<form>
<input type="button" value="Άνοιγμα νέου παραθύρου" onclick="open_window()">
</form>
<p> Στη μέθοδο open() του αντικειμένου Window μπορούμε να
προσδιορίσουμε πολλές παραμέτρους σχετικά με το νέο
παράθυρο φυλλομετρητή που θέλουμε να εμφανισθεί. </p>
</body>
</html>
129. Άνοιγμα Πολλών Παραθύρων Μαζί
<html>
<head>
<script type="text/javascript">
function open_window() {
window.open("http://www.florina.gr/")
window.open("http://www.kozani.gr/")
}
</script>
</head>
<body>
<form>
<input type=button value="Άνοιγμα Παραθύρων" onclick="open_window()">
</form>
<p> Μπορούμε να καλέσουμε τη μέθοδο open() του αντικειμένου
Window δύο φορές για να εμφανίσουμε δύο διαφορετικές
ιστοσελίδες σε δύο διαφορετικά παράθυρα φυλλομετρητή. </p>
</body>
</html>
130. Εμφάνιση Κειμένου στη Γραμμή Κατάστασης
<html>
<head>
<script type="text/javascript">
function load() {
window.status="Florina per sempre"
}
</script>
</head>
<body onload="load()">
<p> Κοιτάξτε το κείμενο στη γραμμή κατάστασης (status bar) του
παραθύρου του φυλλομετρητή. </p>
<p> Μπορούμε να χρησιμοποιήσουμε την ιδιότητα status του
αντικειμένου Window για να εμφανίσουμε ένα δικό μας κείμενο
στη γραμμή κατάστασης (status bar) του παραθύρου του
φυλλομετρητή. Με το που φορτώνεται η ιστοσελίδα,
ενεργοποιείται το συμβάν (event) onload και καλείται η
συνάρτηση load(), η οποία και καταχωρεί το κείμενό μας στην
ιδιότητα status του αντικειμένου Window. </p>
</body>
</html>
131. Εκτύπωση μιας Ιστοσελίδας
<html>
<head>
<script type="text/javascript">
function printpage() {
window.print()
}
</script>
</head>
<body>
<form>
<input type="button" value="Εκτύπωση της ιστοσελίδας" onclick="printpage()">
</form>
<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο print() του
αντικειμένου Window για να εκτυπώσουμε την τρέχουσα
ιστοσελίδα. </p>
</body>
</html>
132. Αλλαγή Μεγέθους Παραθύρου
<html>
<head>
<script type="text/javascript">
function resizeWindow() {
window.resizeBy(-50, -50)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="resizeWindow()" value="Αλλαγή του μεγέθους του παραθύρου">
</form>
<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο resizeBy() του
αντικειμένου Window για να αλλάξουμε το μέγεθος του
τρέχοντος παραθύρου και να προσδιορίσουμε μεταβολή του
πλάτους και του ύψους του παραθύρου με θετικές ή και με
αρνητικές τιμές. </p>
</body>
</html>
133. Καθορισμός Μεγέθους Παραθύρου
<html>
<head>
<script type="text/javascript">
function resizeWindow() {
window.resizeTo(500, 300)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="resizeWindow()" value="Καθορισμός του μεγέθους του παραθύρου">
</form>
<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο resizeTo() του
αντικειμένου Window για να καθορίσουμε ακριβώς το μέγεθος
του τρέχοντος παραθύρου και όχι για να το αυξήσουμε ή να το
μειώσουμε. </p>
</body>
</html>
134. Η Μέθοδος setTimeout()
<html>
<head>
<script type="text/javascript">
function timeout() {
setTimeout("alert('Αυτό το alert box εμφανίσθηκε 2 δευτερόλεπτα μετά που κάνατε κλικ στο πλήκτρο εντολής.')", 2000)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="timeout()" value="Κάντε κλικ για να εμφανισθεί ένα alert box">
</form>
<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο setTimeout() για να
ορίσουμε την εκτέλεση μιας άλλης μεθόδου μετά από ένα
χρονικό διάστημα, το οποίο μπορούμε να προσδιορίσουμε σε
χιλιοστά του δευτερολέπτου. </p>
</body>
</html>
135. Οι Μέθοδοι setInterval() και clearInterval()
<html>
<head>
<script type="text/javascript">
var intval=""
function start_Int() {
if(intval=="") {
intval=window.setInterval("start_clock()", 1000)
}
else {
stop_Int()
}
}
function stop_Int() {
if(intval!="") {
window.clearInterval(intval)
intval=""
myTimer.innerHTML="Interval Stopped"
}
}
function start_clock() {
var d=new Date()
var sw="πμ"
var h=d.getHours()
var m=d.getMinutes() + ""
var s=d.getSeconds() + ""
if(h>12) {
h-=12
sw="μμ"
}
if(m.length==1) { m="0" + m }
if(s.length==1) { s="0" + s }
myTimer.innerHTML=h + ":" + m + ":" + s + " " + sw
}
</script>
</head>
<body>
<span id="myTimer" style="font-size:16pt; font-weight:bold; color:#FF0000">Interval Stopped</span>
<br /><br />
<input type="button" value="Start" onclick="start_Int()">
<input type="button" value="Stop" onclick="stop_Int()">
<p> Αυτό το παράδειγμα αλλάζει την ιδιότητα innerHTML, στην
ουσία το κείμενο, ενός στοιχείου span, κάθε δευτερόλεπτο.
Μπορούμε να κάνουμε κλικ στο πλήκτρο εντολής "Start" για να
ξεκινήσει η μέθοδος setInterval() και να εμφανίζεται ένα
ψηφιακό ρολόι με ώρες, λεπτά και δευτερόλεπτα και με
αυτόματη ενημέρωση και στο πλήκτρο εντολής "Stop" για να
σταματήσει το μέτρημα του ρολογιού με τη μέθοδο
clearInterval(). </p>
</body>
</html>
136. Η Μέθοδος setTimeout() με Όρισμα Συνάρτηση
<html>
<head>
<script type="text/javascript">
function timeout() {
window.setTimeout("show_alert()", 2000)
}
function show_alert() {
alert("Αυτό το alert box εμφανίσθηκε 2 δευτερόλέπτα μετά που κάνατε κλικ στο πλήκτρο εντολής.")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="timeout()" value="Κάντε κλικ για να εμφανισθεί ένα alert box">
</form>
<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο setTimeout() και για
να ορίσουμε την εκτέλεση μιας συνάρτησης μετά από ένα
χρονικό διάστημα, το οποίο μπορούμε να το προσδιορίσουμε σε
χιλιοστά του δευτερολέπτου. </p>
</body>
</html>
137. Η Μέθοδος setTimeout() με Όρισμα Συνάρτηση-2
<html>
<head>
<script type="text/javascript">
function timeout() {
window.setTimeout("change_text(document.all('t'))", 3000)
}
function change_text(tid) {
tid.style.color="blue"
}
</script>
</head>
<body>
<form>
<input id="t" name="t" type="text" value="Florina per sempre" size="20">
<input type="button" onclick="timeout()" value="Κάντε κλικ για να αλλάξει το χρώμα κειμένου">
</form>
<p> Το χρώμα του κειμένου που υπάρχει στο πλαίσιο κειμένου θα
αλλάξει 3 δευτερόλεπτα αφού θα έχετε κάνει κλικ στο πλήκτρο
εντολής. </p>
<p> Εδώ χρησιμοποιήσαμε τη μέθοδο setTimeout() για να αλλάξουμε
το χρώμα του κειμένου ενός πλαισίου κειμένου μετά από 3
δευτερόλεπτα που έγινε κλικ σ’ ένα πλήκτρο εντολής και
χρησιμοποιήσαμε το id="t" για να προσδιορίσουμε επακριβώς
το πλαίσιο κειμένου. </p>
</body>
</html>
138. Εμφάνιση ενός Μηνύματος pop-up
<html>
<head>
<script type="text/javascript">
function show_popup() {
var p=window.createPopup()
var pbody=p.document.body
pbody.style.backgroundColor="red"
pbody.style.border="solid black 2px"
pbody.innerHTML="Κάντε κλικ εκτός για να κλείσει το pop-up."
p.show(150, 150, 200, 50, document.body)
}
</script>
</head>
<body>
<button onclick="show_popup()">Εμφάνιση ενός pop-up</button>
<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο createPopup() του
αντικειμένου Window για να δημιουργήσουμε ένα αντικείμενο
pop-up, δηλ. ένα πτυσσόμενο μήνυμα, στο οποίο μπορούμε να
δώσουμε χρώμα φόντου με την ιδιότητα backgroundColor, να
ορίσουμε πάχος περιγράμματος με την ιδιότητα border καθώς
και να ορίσουμε το κείμενο που θα εμφανίζεται μέσα του με την
ιδιότητα innerHTML. Με τη μέθοδο show() μπορούμε να
προσδιορίσουμε τη θέση του (συντεταγμένες) μέσα στο
παράθυρο του φυλλομετρητή. </p>
</body>
</html>
139. Πλαίσια (Frames) με και Χωρίς Αλλαγή Μεγέθους
<html>
<frameset id="myFrameset" cols="50%, 50%">
<frame id="leftFrame" src="left_frame.html">
<frame id="rightFrame" src="right_frame.html">
</frameset>
</html>
Ο κώδικας της ιστοσελίδας που περιέχει το αριστερό πλαίσιο (left frame)
<html>
<head>
<script type="text/javascript">
function disableResize() {
parent.document.getElementById("leftFrame").noResize=true
parent.document.getElementById("rightFrame").noResize=true
}
function enableResize() {
parent.document.getElementById("leftFrame").noResize=false
parent.document.getElementById("rightFrame").noResize=false
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disableResize()" value="Χωρίς αλλαγή μεγέθους">
<input type="button" onclick="enableResize()" value="Με αλλαγή μεγέθουςe">
</form>
<p> Στο παράδειγμα αυτό χρησιμοποιούμε την ιδιότητα noResize του
αντικειμένου Frame, στην οποία μπορούμε να δώσουμε την τιμή
true ή false, ώστε να μην μπορούμε ή να μπορούμε, αντίστοιχα,
να αλλάξουμε το μέγεθος ενός πλαισίου (frame). </p>
</body>
</html>
140. Πλαίσια (Frames) με και Χωρίς Ράβδους Κύλισης
<html>
<frameset id="myFrameset" cols="50%, 50%">
<frame id="leftFrame" src="left_frame.html">
<frame id="rightFrame" src="right_frame.html">
</frameset>
</html>
Ο κώδικας της ιστοσελίδας που περιέχει το αριστερό πλαίσιο (left frame)
<html>
<head>
<script type="text/javascript">
function enableScrolling() {
parent.document.getElementById("leftFrame").scrolling="yes"
parent.document.getElementById("rightFrame").scrolling="yes"
}
function disableScrolling() {
parent.document.getElementById("leftFrame").scrolling="no"
parent.document.getElementById("rightFrame").scrolling="no"
}
</script>
</head>
<body>
<form>
<input type="button" onclick="enableScrolling()" value="Με ράβδους κύλισης (scroll bars)">
<input type="button" onclick="disableScrolling()" value="Χωρίς ράβδους κύλισης (scroll bars)">
</form>
<p> Στο παράδειγμα αυτό χρησιμοποιούμε την ιδιότητα scrolling του
αντικειμένου Frame, στην οποία μπορούμε να δώσουμε την τιμή
yes ή no, ώστε το πλαίσιο να περιέχει ή να μην περιέχει,
αντίστοιχα, ράβδους κύλισης (scroll bars). </p>
</body>
</html>
141. Αλλαγή του Περιεχομένου ενός Πλαισίου (Frame)
<html>
<frameset id="myFrameset" cols="50%, 50%">
<frame id="leftFrame" src="left_frame.html">
<frame id="rightFrame" src="right_frame.html">
</frameset>
</html>
Ο κώδικας της ιστοσελίδας που περιέχει το αριστερό πλαίσιο (left frame)
<html>
<head>
<script type="text/javascript">
function newSrc() {
parent.document.getElementById("leftFrame").src="http://www.florina.gr"
parent.document.getElementById("rightFrame").src="http://www.kozani.gr"
}
</script>
</head>
<body>
<form>
<input type="button" onclick="newSrc()" value="Αλλαγή της ιστοσελίδας των πλαισίων">
</form>
<p> Στο παράδειγμα αυτό χρησιμοποιούμε την ιδιότητα src του
αντικειμένου Frame, στην οποία μπορούμε να δώσουμε ως τιμή
ένα URL, ώστε να εμφανισθεί μια ιστοσελίδα που θέλουμε.
</p>
</body>
</html>