Κέντρο ΠΛΗΝΕΤ Ν. Φλώρινας - Μικροεφαρμογές σε JavaScript

ΚΕΝΤΡΟ ΠΛΗ.ΝΕ.Τ. Ν. ΦΛΩΡΙΝΑΣ

Μικροεφαρμογές σε JavaScript

1. Τοποθέτηση JavaScript Κώδικα σε HTML Έγγραφο

<html>

<head>

</head>

<body>

document.write("Γεια σας από τη Φλώρινα")

</script>

<p> Με την εντολή (συνάρτηση) write() του αντικειμένου document της JavaScript μπορούμε να εμφανίσουμε

μηνύματα (κείμενα), τα οποία ενσωματώνονται με το υπόλοιπο κείμενο της ιστοσελίδας και φαίνονται σαν

ενιαία.

</p>

<p> Για να ξεκινήσουμε την JavaScript μέσα σ’ ένα HTML έγγραφο, μπορούμε να χρησιμοποιήσουμε το tag

(ετικέτα) <script language="JavaScript"> για να επισημάνουμε την αρχή του κώδικα της JavaScript και το

tag (ετικέτα) </script> για να επισημάνουμε το τέλος του κώδικα της JavaScript. Ανάμεσα στα δύο αυτά tags

θα πρέπει να γράψουμε τον κώδικα της JavaScript.

</p>

</body>

</html>

2. Μορφοποίηση Κειμένου με HTML Tags

<html>

<body>

document.write("<h1> Γεια σας – εδώ Φλώρινα </h1>")

</script>

<p> Μέσα στην εντολή write μπορούμε να χρησιμοποιήσουμε και tags της HTML, για να επιτύχουμε την μορφοποίηση

που θέλουμε.

</p>

<p> Για να ξεκινήσουμε την JavaScript μέσα σ’ ένα HTML έγγραφο, μπορούμε εναλλακτικά να χρησιμοποιήσουμε

και το tag (ετικέτα) script type="text/javascript" για να επισημάνουμε την αρχή του κώδικα της JavaScript και το

tag (ετικέτα) /script για να επισημάνουμε το τέλος του κώδικα της JavaScript.

</p>

</body>

</html>

3. Τοποθέτηση Script στο Τμήμα Header

<html>

<head>

function header_script(message) {

document.write(message)

}

</script>

</head>

<body>

<h2> Χρήση των Scripts στο Τμήμα Header <h2>

header_script("Μπορούμε να τοποθετήσουμε κώδικα της\

JavaScript, δηλ. ένα script, και στο τμήμα header!")

</script>

<p> Μπορούμε να γράψουμε συναρτήσεις της JavaScript στο τμήμα header ενός HTML εγγράφου και να τις καλέσουμε μέσα

από το τμήμα body, μεταβιβάζοντας και τιμές (παραμέτρους) αν χρειασθεί.</p>

<p> Με το σύμβολο \ μπορούμε να κάνουμε αλλαγή γραμμής στον κώδικα της JavaScript που γράφουμε και να συνεχίσουμε

κανονικά στην επόμενη γραμμή.</p>

</body>

</html>

4. Εισαγωγή Σχολίων σε JavaScript Κώδικα

<html>

<head>

</head>

<body>

<h2> Χρήση Σχολίων στον Κώδικα της JavaScript <h2>

// Αυτή η γραμμή θα αγνοηθεί γιατί είναι σχόλιο (comment)

document.write("Αυτή η γραμμή θα εκτυπωθεί!")

/* Έτσι μπορούμε να γράψουμε πολλές γραμμές

με σχόλια στην JavaScript – Θυμίζει λίγο την C */

</script>

<p> Υπάρχουν δύο τρόποι για να γράψουμε σχόλια (comments) μέσα στον κώδικα της JavaScript : ο ένας είναι με τους

χαρακτήρες // για σχόλιο μίας μόνο γραμμής και ο άλλος είναι με τους χαρακτήρες /* για την αρχή και τους χαρακτήρες

*/ για το τέλος του σχολίου.</p>

</body>

</html>

5. Απόκρυψη JavaScript Κώδικα από Παλιούς Browsers

<html>

<head>

<title> JavaScript Example 5 </title>

</head>

<body>

<h2> Απόκρυψη του Κώδικα από Παλιούς Φυλλομετρητές </h2>

<!-- Απόκρυψη του κώδικα από παλιούς φυλλομετρητές

document.write("Αυτή η γραμμή θα εκτυπωθεί!")

// Εδώ σταματάμε να κρύβουμε τον κώδικα -->

</script>

<p> Επειδή υπάρχουν ακόμα παλιοί φυλλομετρητές που δεν υποστηρίζουν την JavaScript και για να αποφύγουμε την

εμφάνιση ανεπιθύμητων μηνυμάτων στην οθόνη των χρηστών, θα πρέπει να χρησιμοποιήσουμε τα σύμβολα <!-- για αρχή και

τα σύμβολα --> για το τέλος ενός κώδικα της JavaScript. </p>

<p> Τα σύμβολα  χρησιμοποιούνται για σχόλια (comments) στην HTML, αλλά οι σύγχρονοι φυλλομετρητές είναι

σε θέση να καταλάβουν τι θέλουμε να κάνουμε. </p>

</body>

</html>

6. Το Tag <noscript>

<html>

<head>

<title> JavaScript Example 6 </title>

</head>

<body>

<h2> Εμφάνιση Μηνύματος σε Φυλλομετρητές που

Έχουν Απενεργοποιημένη την JavaScript </h2>

document.write("Αυτή η γραμμή θα εκτυπωθεί μόνο αν ο\

φυλλομετρητή του χρήστη έχει ενεργοποιημένη την JavaScript")

</script>

<p> Χρησιμοποιούμε τα tags <noscript> και </noscript> για να εμφανίσουμε το κατάλληλο κείμενο (μήνυμα) προς τον χρήστη

στην περίπτωση που είναι απενεργοποιημένη η λειτουργία της JavaScript στον φυλλομετρητή του.</p>

</body>

</html>

7. Η Ιδιότητα LastModified του Αντικειμένου Document

<html>

<head><title> Ημερομηνία Τελευταίας Τροποποίησης </title></head>

<body>

<h1> Γυμνάσιο Κλεινών Φλώρινας </h1>

<p> Η ιστοσελίδα μας είναι υπό κατασκευή.

Ενημερώθηκε για τελευταία φορά στις : </p>

document.write(document.lastModified);

</script>

<p> Μπορούμε να χρησιμοποιήσουμε την ιδιότητα lastModified του αντικειμένου document για να εμφανίσουμε την ημερομηνία που

έγινε η τελευταία τροποποίηση στο τρέχον έγγραφο ιστοσελίδας. Με τον κώδικα αυτό φαίνεται για πρώτη φορά στα

παραδείγματά μας ο δυναμικός χαρακτήρας της JavaScript, το ότι δηλαδή δεν χρειάζεται να επεμβαίνει ο δημιουργός της

ιστοσελίδας για να αλλάζει κάθε φορά την ημερομηνία της τελευταίας τροποποίησής της, αφού αυτή η διαδικασία γίνεται

αυτόματα με την χρήση των ενσωματωμένων ιδιοτήτων της JavaScript. </p>

</body>

</html>

8. Η Μέθοδος alert() και το Συμβάν OnClick

<html>

<body>

<form>

<input type=button value="Κάντε κλικ εδώ"

onClick="alert('Μήνυμα – Florina per sempre')">

</form>

<p> Μπορούμε να χρησιμοποιήσουμε την εντολή (μέθοδο) alert() του αντικειμένου Window για να εμφανίσουμε ένα σύντομο

ενημερωτικό ή προειδοποιητικό μήνυμα προς τον χρήστη. Το μήνυμα εμφανίζεται μέσα σ’ ένα παράθυρο μηνύματος, που

αποκαλείται message box ή alert box, και τοποθετείται στο κέντρο της οθόνης. Περιέχει ένα μόνο πλήκτρο εντολής, το ΟΚ,

που σημαίνει ότι θα πρέπει να κάνουμε κλικ πάνω του για να το κλείσουμε και να συνεχίσουμε (modal πλαίσιο διαλόγου). Δεν

αναγράψαμε την δεσμευμένη λέξη Window πριν από την εντολή alert() καθώς αυτό θεωρείται το προκαθορισμένο (default)

αντικείμενο της JavaScript. </p>

<p> Το συμβάν (event) onClick λαμβάνει χώρα όταν κάνουμε κλικ με το ποντίκι σ’ ένα αντικείμενο, όπως κάνουμε εδώ σ’ ένα πλήκτρο

εντολής (command button) μιας φόρμας. </p>

</body>

</html>

9. Το Συμβάν OnLoad

<html>

<head>

function message() {

alert("Αυτό το alert box κλήθηκε από το συμβάν onload")

}

</script>

</head>

<p> Το συμβάν (event) onload λαμβάνει χώρα όταν φορτώνεται μια ιστοσελίδα στον φυλλομετρητή μας. Στο

συγκεκριμένο παράδειγμα, το συμβάν onload καλεί τη συνάρτηση message(), η οποία συνάρτηση περιέχει μία

μόνο εντολή για την εμφάνιση ενός alert box. Το αντίθετο συμβάν που λαμβάνει χώρα όταν φεύγουμε

από μια ιστοσελίδα είναι το onunload. Και τα δύο συμβάντα γράφονται μέσα στο tag body.

</p>

</body>

</html>

10. Αλλαγή Γραμμής σε Alert Box & Συμβάν OnUnLoad

<html>

<head>

function message() {

alert("Γεια σας και πάλι! Να πώς μπορούμε" + '\n' +

"να αλλάξουμε γραμμή μέσα σ’ ένα alert box")

}

</script>

</head>

<p> Το συμβάν onunload λαμβάνει χώρα όταν φεύγουμε από μια ιστοσελίδα και γράφεται μέσα στο tag body. Με

τον συμβολισμό \n (newline character), που μας θυμίζει λίγο την C, μπορούμε να αλλάξουμε γραμμή στο κείμενο

ενός μηνύματος.

</p>

</body>

</html>

11. Η Μέθοδος Prompt()

<html>

<body>

var name = prompt("Γράψτε το όνομά σας", "")

if (name != null && name != "") {

document.write("Γεια σου " + name)

}

</script>

<p> Μπορούμε να χρησιμοποιήσουμε την εντολή (μέθοδο) prompt() του αντικειμένου Window για να εμφανίσουμε

ένα πλαίσιο διαλόγου το οποίο θα περιέχει ένα πλαίσιο κειμένου (text box) και τα πλήκτρα εντολής ΟΚ και

Άκυρο (Cancel) και να ζητήσουμε από τον χρήστη να γράψει κάτι. Το κείμενο που θα καταχωρήσει ο χρήστης

θα είναι και η τιμή επιστροφής της μεθόδου prompt(), την οποία και θα μπορούμε να χρησιμοποιήσουμε όπου και

όπως θέλουμε.

Η μέθοδος χρησιμοποιεί δύο παραμέτρους (ορίσματα), όπου στην πρώτη γράφουμε ένα κείμενο ενημέρωσης του

χρήστη σχετικά με το τι περιμένουμε απ’ αυτόν να καταχωρήσει και στην δεύτερη εκχωρούμε μια

προκαθορισμένη τιμή, την οποία ο χρήστης μπορεί να αποδεχθεί ή όχι.

Η μέθοδος prompt() εμφανίζει δύο πλήκτρα εντολής, το ΟΚ και το Άκυρο (Cancel), και επιστρέφει την τιμή null

αν κάνουμε κλικ στο Άκυρο ή πατήσουμε το πλήκτρο escape από το πληκτρολόγιο, ή την τιμή που

καταχωρήσαμε αν κάνουμε κλικ στο ΟΚ ή πατήσουμε το πλήκτρο enter από το πληκτρολόγιο.

Ο τελεστής σύγκρισης != επιστρέφει true αν οι δύο τιμές που συγκρίνονται είναι άνισες. Ο λογικός τελεστής &&

είναι το γνωστό μας λογικό ΚΑΙ (And). </p>

</body>

</html>

12. Η Μέθοδος Prompt() με Προκαθορισμένη Τιμή

var city = prompt("Πόλη κατοικίας : ", "Φλώρινα")

if (city != null && city != "") {

document.write("Καλωσήρθατε από την : " + city)

}

</script>

</body></html>

13. Η Μέθοδος Confirm()

<html>

<body>

var epilogi = confirm("Κάντε κλικ σ’ ένα πλήκτρο")

if (epilogi == true) {

document.write("Κάνατε κλικ στο OK")

}

else {

document.write("Κάνατε κλικ στο Cancel")

}

</script>

<p> Μπορούμε να χρησιμοποιήσουμε την εντολή (μέθοδο) confirm() του αντικειμένου Window για να εμφανίσουμε

ένα πλαίσιο διαλόγου το οποίο θα περιέχει τα πλήκτρα εντολής ΟΚ και Άκυρο (Cancel) και να ζητήσουμε από

τον χρήστη να επιλέξει ένα από τα δύο πλήκτρα. Αν ο χρήστης επιλέξει το ΟΚ ή πατήσει το πλήκτρο enter από

το πληκτρολόγιο, η τιμή επιστροφής της μεθόδου θα είναι true, ενώ αν ο χρήστης επιλέξει το Άκυρο ή πατήσει το

πλήκτρο escape από το πληκτρολόγιο, η τιμή επιστροφής της μεθόδου θα είναι false. Η μέθοδος αυτή μπορεί να

χρησιμοποιηθεί για την υποβολή ερωτήσεων στον χρήστη και την αναμονή απάντησης απ’ αυτόν του στυλ Ναι/Όχι,

όπως π.χ. Άνδρας/Γυναίκα, Μισθωτός/Ημερομίσθιος, Μετρητοίς/Επί πιστώσει κλπ. </p>

</body>

</html>

14. Δημιουργία και Εμφάνιση Μεταβλητής

<html>

<body>

var name = "Φλώρινα"

document.write(name)

document.write("<h1>"+name+"</h1>")

</script>

<p> Αυτό το παράδειγμα δηλώνει μια μεταβλητή με την προαιρετική δήλωση var, της εκχωρεί μια τιμή και μετά την

εμφανίζει δύο φορές, την μια σαν κανονικό κείμενο και την άλλη σαν επικεφαλίδα (heading).

Πρέπει να έχουμε υπόψη μας ότι όταν χρησιμοποιούμε τα ονόματα των μεταβλητών για να εμφανίσουμε την τιμή τους δεν

τα βάζουμε μέσα σε εισαγωγικά. </p>

</body>

</html>

15. Παράδειγμα με την Μέθοδο Prompt()

<html>

<head>

<title>Μια Ιστοσελίδα που Προσαρμόζεται στον Χρήστη</title>

</head>

<body>

lname = prompt("Δώστε το επώνυμο");

fname = prompt("Δώστε το όνομα");

title = prompt("Δώστε έναν τίτλο για την ιστοσελίδα");

document.write("<h1>"+title+"</h1>");

document.write("<h2>Γεια σου "+fname+" "+lname+"</h2>");

</script>

<p> Στο παράδειγμα αυτό χρησιμοποιούμε τρεις μεταβλητές, χωρίς να τις έχουμε δηλώσει προηγουμένως με την δήλωση var, οι

οποίες παίρνουν τιμές από τη μέθοδο prompt(). Επειδή δεν χρησιμοποιήσαμε την δεύτερη παράμετρο της μεθόδου prompt(),

το προτεινόμενο κείμενο στο πλαίσιο κειμένου θα είναι το undefined.

</p>

</body>

</html>

16. Οι Τελεστές Εκχώρησης και Σύγκρισης

<html>

<head>

<title>JavaScript Example 16</title>

</head>

<body>

<h2> Οι Τελεστές Εκχώρησης και Σύγκρισης </h2>

<!-- Απόκρυψη του κώδικα από παλιούς φυλλομετρητές

kila = 0

// Στις εκχωρήσεις χρησιμοποιούμε ένα =

if (kila == 0)

// Στις συγκρίσεις χρησιμοποιούμε δύο ==

{

document.write('Έχουμε : ' + kila + ' Κιλά');

}

// Τέλος απόκρυψης του script -->

</script>

</body>

</html>

17. Η Ιδιότητα Title του Αντικειμένου Document

<html>

<head><title>Παλιός Τίτλος</title>

function newTitle() {

parent.document.title="Νέος τίτλος"

}

</script>

</head>

<body>

<p> Κάντε κλικ στο πλήκτρο εντολής (button) και δείτε τον νέο τίτλο στο παράθυρο του φυλλομετρητή. Η δυνατότητα

αυτή λειτουργεί μόνο στον Internet Explorer. </p>

<form>

</form>

</body>

</html>

18. Αλλαγή του Φόντου της Ιστοσελίδας

<html>

<body>

<p> Επιλέξτε ένα χρώμα από την πτυσσόμενη λίστα για να δείτε να αποκτά η ιστοσελίδα το αντίστοιχο χρώμα φόντου. </p>

<form>

<option value = "40E0D0"> Τυρκουάζ

<option value = "2E8B57"> Πράσινο Θάλασσας

<option value = "87CEEB"> Μπλε ουρανού

<option value ="F4A460"> Καφέ άμμου

<option value ="FFF0F5"> Ροζ

<option value ="FFFFFF" selected> Άσπρο

</select>

</form>

<p> Χρησιμοποιούμε την ιδιότητα bgColor του αντικειμένου document για να αλλάξουμε το χρώμα φόντου της τρέχουσας ιστοσελίδας.

Η ιδιότητα selectedIndex παίρνει σαν τιμή έναν αριθμό ανάλογα με την επιλογή που κάνουμε, όπως 0 για Τυρκουάζ, ενώ η

ιδιότητα value αποκτά την αντίστοιχη τιμή του χρώματος, δηλ. το Τυρκουάζ, την οποία και εκχωρεί στην ιδιότητα bgColor του

αντικειμένου document. </p>

</body>

</html>

19. Εμφάνιση Μηνύματος στη Γραμμή Κατάστασης

<html>

<head>

<title> Μήνυμα στη Γραμμή Κατάστασης </title>

</head>

<a href="index.html"

onMouseover="window.status='Κάντε κλικ για να πάτε στα \

μαθήματα της JavaScript';return true"

onMouseout="window.status='';return true">

<b> Μαθήματα της JavaScript </b></a>

<p> Εκχωρούμε τιμή στην ιδιότητα status του αντικειμένου window, που είναι στην ουσία το κείμενο που εμφανίζεται στην

γραμμή κατάστασης (status bar) του παραθύρου του φυλλομετρητή. Το συμβάν onMouseover ενεργοποιείται όταν

μετακινούμε τον δείκτη του ποντικιού πάνω από ένα αντικείμενο, που εδώ είναι ένας σύνδεσμος (link), ενώ το συμβάν

onMouseout ενεργοποιείται όταν απομακρύνουμε τον δείκτη του ποντικιού από ένα αντικείμενο. </p>

</body>

</html>

20. Απόκρυψη Μηνύματος στη Γραμμή Κατάστασης

<html>

<head>

function statbar(txt) {

window.status = txt;

}

</script>

</head>

<body>

<form>

</form>

<p> Χρησιμοποιούμε δύο πλήκτρα εντολής για να καλούμε με το συμβάν onClick τη συνάρτηση statbar() και να της

μεταβιβάζουμε κάποιο κείμενο σαν όρισμα. Η συνάρτηση statbar() περιέχει μία μόνο εντολή με την οποία καταχωρεί την

τιμή του ορίσματός της στην ιδιότητα status και έτσι η τιμή αυτή εμφανίζεται στην γραμμή κατάστασης του παραθύρου του

φυλλομετρητή. </p>

</body>

</html>

21. Κυλιόμενο Μήνυμα Γραμμής Κατάστασης – 1ο Παράδειγμα

<html>

<body>

var scrollCounter = 0; // μηδενίζουμε τον μετρητή

// ορίζουμε το κείμενο του κυλιόμενου μηνύματος

var scrollText = "Kozani – Grevena – Florina – Kastoria";

// ορίζουμε τον ρυθμό κλήσης της συνάρτησης Scroller()

// ίσο με 70 χιλιοστά του δευτερολέπτου

var scrollDelay = 70;

var i = 0;

// προσθέτουμε 100 κενούς χαρακτήρες πριν από το κείμενο

while (i ++<100)

scrollText = " " + scrollText;

function Scroller() {

window.status = scrollText.substring(scrollCounter++, scrollText.length);

if (scrollCounter == scrollText.length)

scrollCounter = 0;

setTimeout("Scroller()", scrollDelay);

}

Scroller();

</script>

<p> Η συνάρτηση substring() εφαρμόζεται σε μια μεταβλητή συμβολοσειράς (string), που εδώ είναι η scrollText,

χρησιμοποιεί δύο αριθμητικά ορίσματα και επιστρέφει το κομμάτι του string που βρίσκεται ανάμεσα στα δύο αυτά

ορίσματα. Η ιδιότητα length ενός string επιστρέφει το μήκος του string, δηλ. το πλήθος των χαρακτήρων του.

Αυτό έχει σαν αποτέλεσμα να εμφανίζεται στη γραμμή κατάστασης του παραθύρου του φυλλομετρητή το κείμενο που

καταχωρήσαμε στη μεταβλητή συμβολοσειράς scrollText, αρχικά ολόκληρο και μετά κάθε 70 χιλιοστά του δευτερολέπτου

να εμφανίζεται μειωμένο κατά έναν χαρακτήρα τη φορά. Σε κάθε εμφάνιση μηνύματος στη γραμμή κατάστασης αυξάνουμε

κατά ένα και την τιμή του μετρητή scrollCounter.

Μόλις η τιμή του μετρητή scrollCounter γίνει ίση με το μήκος της μεταβλητής συμβολοσειράς scrollText, θα πρέπει να τον

μηδενίσουμε για να ξαναρχίσει η κύλιση του μηνύματος από την αρχική κατάσταση.

Η setTimeout() είναι μια μέθοδος του αντικειμένου window που ορίζει ένα χρονικό διάστημα (timeout), όπου το πρώτο όρισμα

είναι ο κώδικας της JavaScript που θα εκτελεσθεί μετά από μια συγκεκριμένη χρονική περίοδο, εδώ είναι η συνάρτηση

Scroller(), ενώ το δεύτερο όρισμα λέει στον υπολογιστή πότε θα εκτελεσθεί ο κώδικας. Ο χρόνος καθορίζεται σε χιλιοστά του

δευτερολέπτου (milliseconds).</p>

</body>

</html>

22. Κυλιόμενο Μήνυμα Γραμμής Κατάστασης – 2ο Παράδειγμα

<html>

<body>

Text="Florina per sempre!"

i=0

function Scroller() {

window.status=Text.substring(i, Text.length) + ' ' +

Text.substring(0, i–1)

if (i<Text.length) {

i++;

}

else {

i=0

}

setTimeout("Scroller()", 100) }

Scroller();

</script>

<p> Το παράδειγμα αυτό μοιάζει αρκετά με το προηγούμενο καθώς χρησιμοποιεί τις ίδιες συναρτήσεις και ιδιότητες

συμβολοσειρών^ διαφέρει όμως στον τρόπο εμφάνισης του κυλιόμενου μηνύματος, το οποίο διασπά σε δύο κομμάτια που

τα διαχωρίζει μ’ έναν κενό χαρακτήρα. </p>

</body>

</html>

23. Η Μέθοδος SetTimeOut()

<html>

<body>

function timer() {

setTimeout("alert('Ο χρόνος τελείωσε!')", 3000);

}

</script>

<form>

</form>

<p> Με τη βοήθεια των timeouts (ή timers) μπορούμε να επιτρέψουμε στον υπολογιστή να εκτελέσει κάποιον κώδικα μετά από ένα

συγκεκριμένο χρονικό διάστημα. Δημιουργήσαμε ένα πλήκτρο εντολής στο οποίο αν γίνει κλικ θα κληθεί μια συνάρτηση η

οποία θα εμφανίσει ένα alert box μετά από 3 δευτερόλεπτα.

</p>

</body>

</html>

24. Η Συνάρτηση getHours()

<html>

<body>

currentTime = new Date();

if (currentTime.getHours() < 12)

document.write("Καλημέρα");

else if (currentTime.getHours() < 17)

document.write("Καλησπέρα");

else document.write("Καληνύχτα");

</script>

<p> Η συνάρτηση getHours() εφαρμόζεται σ’ ένα αντικείμενο ημερομηνίας και επιστρέφει την τρέχουσα ώρα ως ακέραιο

αριθμό. </p>

</body>

</html>

25. Κλήση Συνάρτησης με το Συμβάν OnClick

<html>

<head>

function myfunction() {

alert("Γεια σας")

}

</script>

</head>

<body>

<form>

</form>

<p> Όταν κάνουμε κλικ στο πλήκτρο εντολής (button), θα κληθεί μια συνάρτηση που θα εμφανίσει ένα μήνυμα σ’

ένα alert box. </p>

</body>

</html>

26. Κλήση Συνάρτησης με το Συμβάν OnMouseOver

<html>

<head>

<title> JavaScript Example 26 </title>

<!-- Απόκρυψη του κώδικα από παλιούς φυλλομετρητές

function message() {

alert("Αυτό το κείμενο ανήκει στη συνάρτηση message()");

}

// Τέλος απόκρυψης του script -->

</script>

</head>

<p> Μετακινείστε το ποντίκι πάνω από

<p> Όταν μετακινήσουμε το ποντίκι πάνω από το κείμενο «εδώ», που αποτελεί σύνδεσμο (link), θα κληθεί μια συνάρτηση που θα

εμφανίσει ένα μήνυμα σ’ ένα alert box. </p>

</body>

</html>

27. Κλήση Συνάρτησης με Παραμέτρους – 1ο Παράδειγμα

<html>

<head>

function myfunction(txt) {

alert(txt)

}

</script>

</head>

<body>

<form>

</form>

<p> Κάνοντας κλικ στο πλήκτρο εντολής (button), θα κληθεί μια συνάρτηση μ’ ένα όρισμα, η οποία θα εμφανίσει αυτό

το όρισμα σ’ ένα alert box. </p>

</body>

</html>

28. Κλήση Συνάρτησης με Παραμέτρους – 2ο Παράδειγμα

<html>

<head>

function myfunction(txt) {

alert(txt)

}

</script>

</head>

<body>

<form>

</form>

<p> Όταν κάνουμε κλικ σ’ ένα από τα πλήκτρα εντολής, θα κληθεί μια συνάρτηση η οποία θα εμφανίσει το όρισμα

που της μεταβιβάζεται σ’ ένα alert box. </p>

</body>

</html>

29. Συνάρτηση που Κάνει Υπολογισμούς

<html>

<head>

<!-- απόκρυψη

function calculation() {

var x = 12;

var y = 5;

var result = x + y;

alert(result);

}

// -->

</script>

</head>

<body>

<form>

</form>

</body>

</html>

30. Συνάρτηση που Επιστρέφει Τιμή – 1ο Παράδειγμα

<html>

<head>

function myFunction() {

return ("Γεια σας, καλημέρα!")

}

</script>

</head>

<body>

document.write(myFunction())

</script>

<p> Το script στο τμήμα body καλεί μια συνάρτηση, η οποία επιστρέφει ένα κείμενο. Για να πάρουμε την τιμή

επιστροφής μιας συνάρτησης, χρησιμοποιούμε την εντολή return. </p>

</body>

</html>

31. Συνάρτηση που Επιστρέφει Τιμή – 2ο Παράδειγμα

<html>

<head>

function total(numberA, numberB) {

return numberA + numberB

}

</script>

</head>

<body>

document.write(total(2, 3))

</script>

<p> Το script στο τμήμα body καλεί μια συνάρτηση με δύο ορίσματα, το 2 και το 3, και η συνάρτηση επιστρέφει το

άθροισμα (sum) των δύο αυτών ορισμάτων.</p>

</body>

</html>

32. Κλήση Συνάρτησης με Παραμέτρους – 3ο Παράδειγμα

<html>

<head>

<title> JavaScript Example 32 </title>

function myFunction(message) {

alert(message);

}

</script>

</head>

Μετακινείστε το ποντίκι πάνω από <a href="page01.html" onMouseover="myFunction('Πίστη'); return true"> εδώ </a>

για να εμφανισθεί το πρώτο μήνυμα <br>

Μετακινείστε το ποντίκι πάνω από <a href="page02.html" onMouseover="myFunction('Ελπίδα'); return true"> εδώ </a>

για να εμφανισθεί το δεύτερο μήνυμα <br>

Μετακινείστε το ποντίκι πάνω από <a href="page03.html" onMouseover="myFunction('Πρόνοια'); return true"> εδώ </a>

για να εμφανισθεί το τρίτο μήνυμα

</body>

</html>

33. Συνάρτηση που Επιστρέφει Τιμή – 3ο Παράδειγμα

<html>

<head>

function maximum(a, b) {

if (a>b)

result = a;

else

result=b;

return result;

}

</script>

<body>

a = prompt("Δώστε τον πρώτο αριθμό");

b = prompt("Δώστε τον δεύτερο αριθμό ");

c = prompt("Δώστε τον τρίτο αριθμό ");

megistos = maximum(parseInt(a), parseInt(b));

megistos = maximum(megistos, parseInt(c));

alert("Ο μέγιστος είναι : " + megistos);

</script>

</body>

</html>

34. Συνάρτηση που Επιστρέφει Τιμή – 4ο Παράδειγμα

<html>

<head>

function average(a, b, c) {

result = (a+b+c)/3;

return result;

}

</script>

<body>

a = parseInt(prompt("Δώστε τον πρώτο αριθμό"));

b = parseInt(prompt("Δώστε τον δεύτερο αριθμό "));

c = parseInt(prompt("Δώστε τον τρίτο αριθμό "));

alert("Ο μέσος όρος είναι : " + average(a, b, c));

</script>

<p> Η συνάρτηση parseInt() είναι χρήσιμη για την μετατροπή ενός string σε αριθμό, ώστε να γίνονται σωστά οι πράξεις, καθώς η

μέθοδος prompt() επιστρέφει συμβολοσειρά (κείμενο). </p>

</body>

</html>

35. Συνάρτηση που Καλεί Άλλη Συνάρτηση

<html>

<head>

function GetNumbers(form) {

var sNumber = form.txtNumber.value

var sPercentage = form.txtPercent.value

form.txtResult.value = Percentage(sNumber, sPercentage)

}

function Percentage(sNum, sPerc) {

var nResult = sNum * (sPerc/100)

return nResult

}

</script>

<body>

<form>

Γράψτε έναν αριθμό :

Γράψτε το ποσοστό % :

</form>

<p> Η συνάρτηση GetNumbers() δέχεται τιμές από δύο πεδία κειμένου της φόρμας και καλεί τη συνάρτηση Percentage στην

οποία μεταβιβάζει τα δύο αυτά ορίσματα. Η συνάρτηση Percentage() υπολογίζει το ένα ποσό σαν ποσοστό του άλλου και

η τιμή που επιστρέφει καταχωρείται στο τρίτο πεδίο κειμένου. </p>

</body>

</html>

36. Μορφοποίηση Κειμένου

<html>

<head>

function MyFunction() {

var sTypedText

sTypedText = prompt("Γράψτε κάτι και πατήστε ΟΚ", " ")

return sTypedText

}

</script>

<body>

var sText

sText =MyFunction()

document.write("Γράψατε : " + sText + "<p>")

document.write("<br> Μεγάλο μέγεθος : " + sText.big())

document.write("<br> Σύνδεσμος : " + sText.link("page01.html"))

document.write("<br> Αναβόσβημα : " + sText.blink())

document.write("<br> Έντονο : " + sText.bold())

document.write("<br> Έγχρωμο : " + sText.fontcolor("green"))

document.write("<br> Πλάγια γράμματα : " + sText.italics())

document.write("<br> Μικρό μέγεθος : " + sText.small())

document.write("<br> Διαγραμμένο : " + sText.strike())

document.write("<br> Εκθέτης : " + sText.sup())

document.write("<br> Δείκτης : " + sText.sub())

document.write("<br> Πεζά : " + sText.toLowerCase())

document.write("<br> Κεφαλαία : " + sText.toUpperCase())

</script>

<p> Το σενάριο αυτό καλεί τη συνάρτηση MyFunction(), όπου γράφουμε κάποιο κείμενο σ’ ένα πλαίσιο προτροπής prompt, êáé

μετά εμφανίζουμε το κείμενο αυτό με διάφορες μορφές, χρησιμοποιώντας τις μεθόδους στοιχειοσειράς. Είναι, όμως,

πολύ πιθανό να μην δουλεύει σωστά το αναβόσβημα (blink).

</p>

</body>

</html>

37. Έλεγχος Καταχωρήσεων σε Φόρμα

<html>

<head>

function validateForm() {

formObj = document.sample;

if ((formObj.name.value == "") ||

(formObj.age.value == "") ||

(formObj.dob.value == "")) {

alert("Δεν έχει γράψει κάτι σ’ όλα τα πεδία");

return false;

}

else

return true;

}

</script>

</head>

<body>

Δώστε όνομα : <input type=text name="name" size=30><br>

Δώστε ηλικία : <input type=text name="age" size=3><br>

Ημερομηνία Γέννησης : <input type=text name="dob" size=10><br>

</form>

<p> Στη φόρμα αυτή χρησιμοποιούμε τρία πλαίσια (πεδία) κειμένου, τα name, age και dob (date of birth), και τα κλασικά πλήκτρα

εντολής Submit και Reset, για υποβολή ή και μηδενισμό των στοιχείων της φόρμας αντίστοιχα. Όταν κάνουμε κλικ στο

πλήκτρο Submit, ενεργοποείται το συμβάν onSubmit το οποίο καλεί με τη σειρά του τη συνάρτηση validateForm(), η οποία

συνάρτηση ελέγχει αν κάποιο από τα πεδία κειμένου της φόρμας δεν έχει καθόλου τιμή, οπότε και εμφανίζει ένα alert box

με το σχετικό μήνυμα και επιστρέφει την τιμή false. Διαφορετικά, δηλ. αν ο χρήστης έχει γράψει κάτι σ’ όλα τα

πεδία κειμένου, επιστρέφει την τιμή true. </p>

</body>

</html>

38. Η Εντολή If

<html>

<body>

var d = new Date()

var time = d.getHours()

if (time < 10) {

document.write("<b> Καλημέρα </b>")

}

</script>

<p> Αυτό το παράδειγμα δείχνει την εντολή If. </p>

<p> Αν η ώρα στον φυλλομετρητή είναι πριν τις 10, θα λάβουμε τον χαιρετισμό "Καλημέρα", αλλιώς τίποτα. </p>

</body>

</html>

39. Η Εντολή If … Else

<html>

<body>

var d = new Date()

var time = d.getHours()

if (time < 10) {

document.write("<b> Καλημέρα </b>")

}

else {

document.write("<b> Καλό Μεσημέρι </b>")

}

</script>

<p> Αυτό το παράδειγμα δείχνει την εντολή If ... Else. </p>

<p> Αν η ώρα στον φυλλομετρητή είναι πριν τις 10, θα λάβουμε τον χαιρετισμό "Καλημέρα", αλλιώς τον χαιρετισμό

"Καλό Μεσημέρι". </p>

</body>

</html>

40. Οι Ένθετες Εντολές If

<html>

<head>

function MyFunction() {

var dToday = new Date()

var nDay = dToday.getDay()

if (nDay == 0) {

alert("Είναι Κυριακή")

}

else {

if (nDay <= 5) {

alert("Είναι καθημερινή")

}

else {

alert("Είναι Σάββατο")

}

} // end if

} // end MyFunction()

</script>

</head>

<p> Οι ένθετες εντολές if είναι εντολές if μέσα σ’ άλλες εντολές if. Θα πρέπει να είμαστε πολύ προσεκτικοί στη χρήση των αγκυλών {

και }, δηλ. για το πού αρχίζει και πού τελειώνει η ομάδα εντολών του κάθε if ή του κάθε else. Προς τον σκοπό αυτό,

αποτελεί πολύ καλή τακτική η χρήση των σχολίων του τύπου // end if και // end function, για να είμαστε σίγουροι για το πού

τελειώνει ο κώδικας του κάθε if ή της κάθε συνάρτησης κοκ.

</p>

</body>

</html>

41. Οι Μέθοδοι getHours() και getDay()

<html>

<head>

function MyFunction() {

var dToday = new Date()

var nHours = dToday.getHours()

var nDay = dToday.getDay()

if ((nDay == 5) && (nHours >= 12)) {

alert("Είναι Παρασκευή απόγευμα!")

}

else {

if ((nDay ==6) || (nDay == 0)) {

alert("Ήρθε το Σαββατοκύριακο")

}

else {

alert("Άλλη μια βαρετή μέρα!")

}

} // end if

} // end function

</script>

</head>

<p> Η μέθοδος getHours() του αντικειμένου Date επιστρέφει την ώρα ενός αντικειμένου ημερομηνίας, όπως είναι εδώ το αντικείμενο

dToday, σαν ακέραιο αριθμό, ενώ η μέθοδος getDay() επιστρέφει την ημέρα της εβδομάδας σαν ακέραιο αριθμό, ξεκινώντας από

το 0 που παριστάνει την Κυριακή, το 1 που παριστάνει τη Δευτέρα κοκ. </p>

</body>

</html>

42. Ο Τελεστής Ανισότητας

<html>

<head>

function FunctionCheck() {

if (document.form.character.value != "Α") {

alert("Η μεταβλητή δεν είναι ίση με το \’Α\’")

}

else {

alert("Η μεταβλητή είναι ίση με το \’Α\’")

} // end if

} // end function

</script>

</head>

<body>

Γράψτε μόνο ένα γράμμα :

</form>

<p> Για να βρούμε αν δύο τιμές είναι άνισες, χρησιμοποιούμε τον τελεστή σύγκρισης !=.

Για να εμφανίσουμε ειδικούς χαρακτήρες, όπως είναι τα εισαγωγικά (‘) ή το (&) κ.ά., μέσα σε μηνύματα alert box,

χρησιμοποιούμε τον χαρακτήρα \ πριν απ’ αυτούς. </p>

</body>

</html>

43. Οι Λογικές Τιμές και ο Τελεστής Άρνησης

<html>

<head>

function CheckStatus(aStatus) {

if (!aStatus) {

alert("Η bStatus είναι ψευδής")

}

else {

alert("Η bStatus είναι αληθής")

} // end if

} // end function

</script>

</head>

<body>

var bStatus = true

</script>

Κάντε κλικ στο πλήκτρο εντολής για να δείτε την τιμή της λογικής μεταβλητής :

<input type=button value="Κάντε κλικ για έλεγχο"

onClick= "CheckStatus(bStatus)">

</form>

<p> Η JavaScript χρησιμοποιεί τις λογικές τιμές true και false, όπως όλες οι γνωστές γλώσσες προγραμματισμού.

Για να πάρουμε την αντίθετη τιμή μιας λογικήςμεταβλητής χρησιμοποιούμε τον τελεστή άρνισης ! πριν

από το όνομα της μεταβλητής. </p>

</body>

</html>

44. Ο Τριαδικός Τελεστής Σύγκρισης

<html>

<head>

function MyFunction() {

var dToday = new Date()

var nSeconds = dToday.getSeconds()

var sText = (nSeconds > 30) ? "περισσότερο" : "λιγότερο"

alert("Πέρασε " + sText + " από το μισό αυτού του λεπτού.")

} // end function

</script>

</head>

<p> Ο τριαδικός τελεστής σύγκρισης μάς είναι γνωστός και από τη γλώσσα προγραμματισμού C και αποτελεί στην ουσία έναν

σύντομο τρόπο γραφής της εντολής if … else. Η παράσταση που βρίσκεται μέσα στις παρενθέσεις ελέγχεται

αν είναι αληθής (true) ή ψευδής (false) και στην πρώτη περίπτωση καταχωρείται στη μεταβλητή η τιμή που ακολουθεί

το σύμβολο ?, ενώ στη δεύτερη περίπτωση καταχωρείται στη μεταβλητή η τιμή που ακολουθεί το σύμβολο :. </p>

</body>

</html>

45. Η Μέθοδος Random()

<html>

<body>

var r=Math.random()

if (r>0.5) {

document.write("<a href='http://www.line.gr'>\

Η Εταιρεία Line </a>")

}

else {

document.write("<a href='http://www.florina.gr'>\

Μάθετε για τη Φλώρινα </a>")

} // end if

</script>

<p> Η μέθοδος random() του αντικειμένου Math παράγει έναν τυχαίο αριθμό στο διάστημα 0 έως 1 και έτσι η

πιθανότητα να εκτελεσθεί το if ή το else στον παραπάνω κώδικα είναι 50%. </p>

</body>

</html>

46. Η Εντολή Switch

<html>

<body>

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("Ανυπομονώ για το Σαββατοκύριακο!")

} // end switch

</script>

<p> Αυτό το παράδειγμα δείχνει την εντολή switch, που μας είναι κι αυτή γνωστή από τη γλώσσα προγραμματισμού C. Σύμφωνα με

τον παραπάνω κώδικα, θα λάβουμε έναν διαφορετικό χαιρετισμό ανάλογα με την ημέρα της εβδομάδας, όπου

Κυριακή=0, Δευτέρα=1, Τρίτη=2 κλπ. </p>

</body>

</html>

47. Ο Βρόχος For

<html>

<body>

for (i = 0; i <= 5; i++) {

document.write("Αριθμός : " + i)

document.write("<br>")

} // end for

</script>

<p> Επεξήγηση : </p>

<p> Ο βρόχος for θέτει το <b>i</b> ίσο με 0. </p>

<p> Όσο το <b>i</b> είναι μικρότερο από ή ίσο με 5, ο βρόχος θα συνεχίσει να εκτελείται. </p>

<p> Το <b>i</b> αυξάνει κατά 1 κάθε φορά που εκτελείται ο βρόχος. </p>

</body>

</html>

48. Παράδειγμα με Βρόχους στα HTML Headers

<html>

<body>

for (i = 1; i <= 6; i++) {

document.write("<h" + i + "> Επικεφαλίδα : " + i)

document.write("</h" + i + ">")

} // end for

</script>

<p> Το παράδειγμα αυτό εμφανίζει όλες τις επικεφαλίδες (headers) της HTML, ξεκινώντας από την 1, που είναι και η μεγαλύτερη σε

μέγεθος, μέχρι και την 6, που είναι η μικρότερη σε μέγεθος.

</p>

</body>

</html>

49. Ο Βρόχος While – 1ο Παράδειγμα

<html>

<body>

i = 0

while (i <= 5) {

document.write("Αριθμός : " + i)

document.write("<br>")

i++

} // end while

</script>

<p> Επεξήγηση : </p>

<p> Το <b>i</b> γίνεται ίσο με 0. </p>

<p> Ενώ (while) το <b>i</b> είναι μικρότερο από ή ίσο με 5, ο βρόχος θα συνεχίσει να εκτελείται. </p>

<p> Το <b>i</b> αυξάνει κατά 1 κάθε φορά που εκτελείται ο βρόχος. </p>

</body>

</html>

50. Ο Βρόχος While – 2ο Παράδειγμα

<html>

<body>

function MyFunction() {

var sWord = " "

while (sWord != "Florina") {

sWord = prompt("Γράψτε Florina για έξοδο", "")

} // end while

alert("Ο βρόχος ολοκληρώθηκε")

} // end function

</script>

<p> Σ’ αυτήν την περίπτωση του βρόχου while περιμένουμε από τον χρήστη να καταχωρήσει κάτι σ’ ένα πλαίσιο προτροπής (prompt)

και μόνο όταν αυτό που καταχωρήσει ο χρήστης είναι ίσο με Florina, όπου παίζει ρόλο η αναγραφή πεζών – κεφαλαίων, τότε

μόνο θα τελειώσει ο βρόχος while και θα εμφανισθεί το μήνυμα στο alert box. </p>

</body>

</html>

51. Ο Βρόχος Do While – 1ο Παράδειγμα

<html>

<body>

i = 0

do {

document.write("Αριθμός : " + i)

document.write("<br>")

i++

} while (i <= 5)

</script>

<p> Επεξήγηση : </p>

<p> Το <b>i</b> γίνεται ίσο με 0. </p>

<p> Ο βρόχος εκτελείται </p>

<p> Το <b>i</b> αυξάνει κατά 1 κάθε φορά που εκτελείται ο βρόχος. </p>

<p> Ενώ (while) το <b>i</b> είναι μικρότερο από ή ίσο με 5, ο βρόχος θα συνεχίσει να εκτελείται. </p>

</body>

</html>

52. Ο Βρόχος Do While – 2ο Παράδειγμα

<html>

<body>

function MyFunction() {

var sWord = " "

do {

sWord = prompt("Γράψτε Florina για έξοδο", "")

} while (sWord != "Florina")

alert("Ο βρόχος ολοκληρώθηκε")

} // end function

</script>

<p> Σ’ αυτήν την περίπτωση του βρόχου do while περιμένουμε από τον χρήστη να καταχωρήσει κάτι σ’ ένα πλαίσιο προτροπής

(prompt) και μόνο όταν αυτό που καταχωρήσει ο χρήστης είναι ίσο με Florina, όπου παίζει ρόλο η αναγραφή πεζών –

κεφαλαίων, τότε μόνο θα τελειώσει ο βρόχος while και θα εμφανισθεί το μήνυμα στο alert box.

Η μόνη διαφορά του βρόχου while από τον βρόχο do while είναι το πότε γίνεται ο έλεγχος της συνθήκης. </p>

</body>

</html>

53. Η Εντολή Break

<html>

<body>

function MyFunction() {

var i

var bResult

for (i=1; i<20; i++) {

bResult = confirm("Πατήστε το Cancel για Break")

if (!bResult) {

break;

} // end if

} // end for

alert("Ο βρόχος ολοκληρώθηκε, το i είναι ίσο με : " + i)

} // end function

</script>

<p> Η εντολή break χρησιμοποιείται για την έξοδο από έναν βρόχο πριν ακόμα τελειώσουν οι επαναλήψεις ή γίνει ψευδής η

συνθήκη. Χρησιμοποιείται και στην εντολή switch. </p>

</body>

</html>

54. Η Εντολή Continue

<html>

<body>

function MyFunction() {

var i = 0

var bResult

while (i<20) {

bResult = confirm("Πατήστε το Cancel για Continue")

if (!bResult) {

continue;

} // end if

i++

} // end while

alert("Ο βρόχος ολοκληρώθηκε, το i είναι ίσο με : " + i)

} // end function

</script>

<p> Η εντολή continue χρησιμοποιείται για την επαναφορά ενός βρόχου στην αρχή, πριν ακόμα εκτελεσθούν όλες οι

εναπομείνουσες εντολές του βρόχου. </p>

</body>

</html>

55. Ψηφιακό Ρολόι με Αυτόματη Ενημέρωση

<html>

<head>

var timer = null

function stop() {

clearTimeout(timer)

} // end function stop()

function start() {

// δημιουργία ενός αντικειμένου Date, του time, στο

// οποίο θα καταχωρήσουμε την τρέχουσα ώρα του

// συστήματος του χρήστη

var time = new Date()

// η μεταβλητή hours θα περιέχει την ώρα

var hours = time.getHours()

// η μεταβλητή minutes θα περιέχει τα λεπτά

var minutes = time.getMinutes()

// αν τα λεπτά είναι λιγότερα από 10, θα μπει

// μπροστά το 0

minutes=((minutes < 10) ? "0" : "") + minutes

// η μεταβλητή seconds θα περιέχει τα δευτερόλεπτα

var seconds = time.getSeconds()

// αν τα δευτερόλεπτα είναι λιγότερα από 10, θα μπει

// μπροστά το 0

seconds=((seconds < 10) ? "0" : "") + seconds

// σχηματίζεται η μεταβλητή clock που θα περιέχει

// την ώρα σε πλήρη ψηφιακή μορφή, π.χ. 21:06:18

var clock = hours + ":" + minutes + ":" + seconds

// η τιμή της μεταβλητής clock καταχωρείται στο πεδίο

// display της πρώτης (μοναδικής) φόρμας του εγγράφου

document.forms[0].display.value = clock

// καλείται η γνωστή συνάρτηση setTimeout(), με

// ορίσματα τη συνάρτηση start(), για την εμφάνιση του

// ψηφιακού ρολογιού, και την τιμή 1000, δηλ. θα

// εκτελείται κάθε 1 δευτερόλεπτο και άρα κάθε 1" θα

// γίνεται η ενημέρωση του ψηφιακού ρολογιού

timer = setTimeout("start()", 1000)

} // end function start()

</script>

</head>

<form>

</form>

<p> Με το φόρτωμα αυτής της ιστοσελίδας, θα εμφανίζεται ένα ψηφιακό ρολόι με αυτόματη ενημέρωση. </p>

</body>

</html>

56. Η Ιδιότητα Length του Αντικειμένου String

<html>

<body>

var str="Florina per sempre"

document.write(str.length)

</script>

<p> Με την ιδιότητα length ενός αντικειμένου String μπορούμε να βρούμε πόσοι χαρακτήρες υπάρχουν σ’ ένα string. </p>

</body>

</html>

57. Η Μέθοδος IndexOf() του Αντικειμένου String

<html>

<body>

var str="Φλώρινα"

var character=str.indexOf("Φλώ")

document.write(character + "<br>")

if (character>=0) {

document.write("Το string περιέχει τον συγκεκριμένο \

χαρακτήρα")

}

else {

document.write("Το string δεν περιέχει τον συγκεκριμένο \

χαρακτήρα")

} // end if

</script>

<p> Με τη μέθοδο indexOf() μπορούμε να ελέγξουμε αν ένα string περιέχει έναν συγκεκριμένο χαρακτήρα ή ομάδα χαρακτήρων.

Επιστρέφει μια ακέραια τιμή (integer), συνήθως την 0, αν όντως περιέχει τον χαρακτήρα και την τιμή –1 αν όχι. Μπορούμε να

χρησιμοποιήσουμε αυτή τη μέθοδο για την επικύρωση μιας φόρμας (form validation), ιδίως στην περίπτωση που

αναζητούμε το @ σ’ ένα e-mail που καταχώρησε ο χρήστης σ’ ένα πεδίο κειμένου της φόρμας. </p>

</body>

</html>

58. Η Μέθοδος Match() του Αντικειμένου String

<html>

<body>

var str = "Η Φλώρινα είναι ωραία"

document.write(str.match("ωραία"))

</script>

<p> Η μέθοδος match() είναι παρόμοια με τη μέθοδο indexOf, δηλ. με τη βοήθειά της μπορούμε να ελέγξουμε αν ένα string περιέχει

έναν συγκεκριμένο χαρακτήρα ή ομάδα χαρακτήρων, μόνο που επιστρέφει τους χαρακτήρες που καθορίζουμε ή την τιμή null

αν το string δεν περιέχει τους συγκεκριμένους χαρακτήρες.

</p>

</body>

</html>

59. Η Μέθοδος Substr()του Αντικειμένου String

<html>

<body>

var str="Η Φλώρινα είναι ωραία"

document.write(str.substr(3, 6))

</script>

<p> Η μέθοδος subsrt() επιστρέφει συγκεκριμένα τμήματα ενός string. Για παράδειγμα, αν δώσουμε (14, 7), θα επιστραφεί ο

14^ος χαρακτήρας και οι επόμενοι 6. Πρέπει να έχουμε υπόψη μας ότι ο πρώτος χαρακτήρας ενός string είναι ο 0, ο δεύτερος ο

1 κοκ. </p>

</body>

</html>

60. Η Μέθοδος toLowerCase() του Αντικειμένου String

<html>

<body>

var str=("Γεια σας από τη Φλώρινα!")

document.write(str.toLowerCase())

</script>

<p> Η μέθοδος toLowerCase() επιστρέφει ένα string μ’ όλα τα γράμματά του πεζά (lower case). </p>

</body>

</html>

61. Η Μέθοδος toUpperCase() του Αντικειμένου String

<html>

<body>

var str=("Γεια σας από τη Φλώρινα!")

document.write(str.toUpperCase())

</script>

<p> Η μέθοδος toUpperCase() επιστρέφει ένα string μ’ όλα τα γράμματά του κεφαλαία (upper case). </p>

</body>

</html>

62. Η Μέθοδος toUpperCase() – 2ο Παράδειγμα

<html>

<body>

var sText

var sUpper

sText = prompt("Γράψτε κάτι με μικρά γράμματα", " ")

sUpper = sText.toUpperCase()

document.write("Το κείμενο με κεφαλαία γράμματα είναι : \

<p><h3>" + sUpper + "</h3>")

</script>

</body>

</html>

63. Δημιουργία Πίνακα – 1ο Παράδειγμα

<html>

<body>

var famname = new Array(6)

famname[0] = "Αντώνης"

famname[1] = "Σπύρος"

famname[2] = "Βασίλης"

famname[3] = "Γιάννης"

famname[4] = "Κώστας"

famname[5] = "Ιωάννα"

for (i=0; i<6; i++) {

document.write(famname[i] + "<br>")

} // end for

</script>

<p> Πρώτα δηλώνουμε τον πίνακα και μετά καταχωρούμε τιμές στα στοιχεία του με την εντολή for. </p>

</body>

</html>

64. Δημιουργία Πίνακα – 2ο Παράδειγμα

<html>

<body>

var famname = new Array("Αντώνης", "Σπύρος", "Βασίλης",

"Γιάννης", "Κώστας", "Ιωάννα")

for (i=0; i<famname.length; i++) {

document.write(famname[i] + "<br>")

} // end for

</script>

<p> Στην περίπτωση αυτή δηλώνουμε τον πίνακα και ταυτόχρονα καταχωρούμε τιμές στα στοιχεία του με την εντολή for. Επίσης,

χρησιμοποιήσαμε τη μέθοδο length του αντικειμένου Array για να βρούμε το πλήθος των στοιχείων του πίνακα. </p>

</body>

</html>

65. Εμφάνιση Ημερομηνίας (Date)

<html>

<body>

// δημιουργία αντικειμένου τύπου ημερομηνίας

var d = new Date()

// εμφάνιση της ημερομηνίας

document.write(d.getDate())

// ένωση με τον χαρακτήρα (.)

document.write(".")

// εμφάνιση του μήνα

document.write(d.getMonth() + 1)

// ένωση με τον χαρακτήρα (.)

document.write(".")

// εμφάνιση του έτους σε πλήρη μορφή

document.write(d.getFullYear())

</script>

<p> Στην εμφάνιση του μήνα προσθέσαμε το 1, καθώς ο Ιανουάριος έχει την τιμή 0, ο Φεβρουάριος την τιμή 1 κοκ. </p>

</body>

</html>

66. Εμφάνιση Ώρας (Time)

<html>

<body>

// δημιουργία αντικειμένου τύπου ημερομηνίας

var d = new Date()

// εμφάνιση της ώρας

document.write(d.getHours())

// ένωση με τον χαρακτήρα (.)

document.write(".")

// εμφάνιση των λεπτών

document.write(d.getMinutes())

// ένωση με τον χαρακτήρα (.)

document.write(".")

// εμφάνιση των δευτερολέπτων

document.write(d.getSeconds())

</script>

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

εμφανίσουμε τη διεθνή ώρα (GMT ή UTC), θα πρέπει να χρησιμοποιήσουμε τις μεθόδους getUTCHours(),

getUTCMinutes() κ.ά. Το μειονέκτημα αυτού του παραδείγματος είναι ότι η εμφάνιση της ώρας είναι στατική και δεν

ενημερώνεται αν δεν κάνουμε ανανέωση (refresh) τη σελίδα.

</p>

</body>

</html>

67. Ορισμός Ημερομηνίας

<html>

<body>

// δημιουργία αντικειμένου τύπου ημερομηνίας

var d = new Date()

// ορισμός του έτους

d.setFullYear("1990")

document.write(d)

</script>

<p> Εκτός από το να πάρουμε την τρέχουσα ημερομηνία του συστήματος, μπορούμε να ορίσουμε την ημερομηνία (date) ή

την ώρα (time) στο αντικείμενο date, με τις μεθόδους setDate(), setHour(), setFullYear() κ.ά. Στο παράδειγμα αυτό αλλάξαμε

μόνο το έτος και αφήσαμε όλα τα άλλα στοιχεία της ημερομηνίας απείρακτα. Η εμφάνιση της ημερομηνίας με την

εντολή document.write(d) μπορεί να μας φανεί λίγο άκομψη.

</p>

</body>

</html>

68. Εμφάνιση της Διεθνούς Ώρας (UTC Time)

<html>

<body>

// δημιουργία αντικειμένου τύπου ημερομηνίας

var d = new Date()

// εμφάνιση της ώρας σύμφωνα με την διεθνή ώρα (UTC)

document.write(d.getUTCHours())

// ένωση με τον χαρακτήρα (.)

document.write(".")

// εμφάνιση των λεπτών σύμφωνα με την διεθνή ώρα (UTC)

document.write(d.getUTCMinutes())

// ένωση με τον χαρακτήρα (.)

document.write(".")

// εμφάνιση των δευτερολέπτων

// σύμφωνα με την διεθνή ώρα (UTC)

document.write(d.getUTCSeconds())

</script>

<p> Η μέθοδος getUTCDate() επιστρέφει την διεθνή ώρα (Universal

Time Coordinated), που είναι η ώρα που έχει καθορισθεί από

το World Time Standard. </p>

</body>

</html>

69. Εμφάνιση Ημέρας της Εβδομάδας

<html>

<body>

// δημιουργία αντικειμένου τύπου ημερομηνίας

var d=new Date()

// δημιουργία ενός πίνακα 7 στοιχείων με τις ημέρες της

// εβδομάδας

var weekday=new Array("Κυριακή", "Δευτέρα", "Τρίτη", "Τετάρτη", "Πέμπτη", "Παρασκευή", "Σάββατο")

// εμφάνιση της σημερινής (τρέχουσας) ημέρας

document.write("Σήμερα είναι : " + weekday[d.getDay()])

// αλλαγή γραμμής

document.write("<br>")

// εμφάνιση του αριθμού της σημερινής (τρέχουσας) ημέρας

document.write("Αριθμός ημέρας : " + d.getDay())

</script>

<p> Εμφανίζουμε το όνομα της τρέχουσας ημέρας και τον αριθμό της. Χρησιμοποιούμε το αντικείμενο array για να αποθηκεύσουμε τα

ονόματα και ισχύει ότι Κυριακή=0, Δευτέρα=1 κοκ. </p>

</body>

</html>

70. Εμφάνιση Πλήρους Ημερομηνίας

<html>

<body>

// δημιουργία αντικειμένου τύπου ημερομηνίας

var d=new Date()

// δημιουργία ενός πίνακα 7 στοιχείων με τις ημέρες της

// εβδομάδας

var weekday=new Array("Κυριακή", "Δευτέρα", "Τρίτη", "Τετάρτη", "Πέμπτη", "Παρασκευή", "Σάββατο")

// δημιουργία ενός πίνακα 12 στοιχείων με τους μήνες

var monthname=new Array("Ιαν", "Φεβρ", "Μαρ", "Απρ", "Μαι", "Ιουν", "Ιουλ", "Αυγ", "Σεπτ", "Οκτ", "Νοε", "Δεκ")

// εμφάνιση της ημέρας της εβδομάδας

document.write(weekday[d.getDay()] + " ")

// εμφάνιση της ημερομηνίας

document.write(d.getDate() + ". ")

// εμφάνιση του μήνα

document.write(monthname[d.getMonth()] + " ")

// εμφάνιση του έτους

document.write(d.getFullYear())

</script>

<p> Εμφανίζουμε μια πλήρη ημερομηνία με το όνομα της ημέρας και το όνομα του μήνα. </p>

</body>

</html>

71. Συνεχής Εμφάνιση Ώρας

<html>

<head>

var timer = null

function stop() {

clearTimeout(timer)

} // end function stop()

function start() {

var time = new Date()

var hours = time.getHours()

var minutes = time.getMinutes()

var seconds = time.getSeconds()

var clock = hours

clock += ((minutes < 10) ? ":0" : ":") + minutes

clock += ((seconds < 10) ? ":0" : ":") + seconds

document.forms[0].display.value = clock;

timer = setTimeout("start()", 1000);

} // end function start()

</script>

</head>

<form>

</form>

<p> Πώς να εμφανίσουμε την ώρα στις σελίδες μας με συνεχή ανανέωση ανά 1 δευτερόλεπτο. Το παραπάνω script είναι

παρόμοιο μ’ ένα προηγούμενο παράδειγμα, μόνο που εμφανίζει την ώρα σ’ ένα πεδίο κειμένου (input field) και συνεχίζει να την

εμφανίζει ανά 1 δευτερόλεπτο. </p>

</body>

</html>

72. Εμφάνιση Ημερομηνίας και Ώρας

<html>

<head>

<title> Εμφάνιση Ημερομηνίας και Ώρας </title>

</head>

<body>

<h1> Τρέχουσα Ημερομηνία και Ώρα </h1>

<br>

now = new Date();

// η τοπική ώρα σε πλήρη μορφή

localtime = now.toString();

// η διεθνής ώρα σε πλήρη μορφή

utctime = now.toGMTString();

// εμφάνιση της τοπικής ώρας σε πλήρη μορφή

document.write("<b>Τοπική Ώρα: </b>"+localtime+"<br>");

// εμφάνιση της διεθνούς ώρας σε πλήρη μορφή

document.write("<b>Ώρα UTC :</b>"+utctime+"<br>");

hours = now.getHours();

minutes = now.getMinutes();

seconds = now.getSeconds();

// αύξηση του μεγέθους της γραμματοσειράς

document.write("<font size=+5>");

document.write(hours+":"+minutes+":"+seconds);

document.write("</font>");

</script>

</body>

</html>

73. Στρογγυλοποίηση Αριθμού

<html>

<body>

document.write(Math.round(7.25))

</script>

<p> Με τη μέθοδο round() του αντικειμένου Math μπορούμε να στρογγυλοποιήσουμε έναν αριθμό στον πλησιέστερο ακέραιο.

Για παράδειγμα, η Math.round(7.25) θα επιστρέψει 7, ενώ η Math.round(7.85) θα επιστρέψει 8. </p>

</body>

</html>

74. Δημιουργία Τυχαίου Αριθμού

<html>

<body>

document.write(Math.random())

</script>

<p> Η μέθοδος random() του αντικειμένου Math επιστρέφει έναν τυχαίο αριθμό (random number) ανάμεσα στο 0 και το 1. </p>

</body>

</html>

75. Δημιουργία Τυχαίου Ακέραιου Αριθμού από 0 – 10

<html>

<body>

no=Math.random()*10

document.write(Math.round(no))

</script>

<p> Με τις μεθόδους random() και round() μπορούμε να δημιουργήσουμε έναν τυχαίο ακέραιο αριθμό από το 0 έως και

το 10. </p>

</body>

</html>

76. Εύρεση Μεγίστου Από Δύο Αριθμούς

<html>

<body>

document.write(Math.max(2, 4))

</script>

<p> Η μέθοδος max() του αντικειμένου Math δέχεται δύο αριθμούς σαν ορίσματα και επιστρέφει τον μεγαλύτερο απ’ αυτούς. </p>

</body>

</html>

77. Εύρεση Ελαχίστου Από Δύο Αριθμούς

<html>

<body>

document.write(Math.min(2, 4))

</script>

<p> Η μέθοδος min() του αντικειμένου Math δέχεται δύο αριθμούς σαν ορίσματα και επιστρέφει τον μικρότερο απ’ αυτούς. </p>

</body>

</html>

78. Μετατροπή Βαθμών Κελσίου σε Φαρενάιτ

<html>

<head>

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)

} // end if

} // end function

</script>

</head>

<body>

<b> Καταχωρήστε έναν αριθμό σε κάποιο από τα πεδία κειμένου και ο αριθμός θα μετατραπεί σε βαθμούς Κελσίου (Celsius) ή

Φαρενάιτ (Fahrenheit), ανάλογα. </b>

<br>

<input type="text" name="celsius" onkeyup="convert('C')"> Βαθμοί Κελσίου <br> είναι ίσοι με <br>

<input type="text" name="fahrenheit" onkeyup="convert('F')"> Βαθμούς Φαρενάιτ

</form>

<p> Χρησιμοποιούμε τη μέθοδο <b> Math.round() </b> έτσι ώστε το αποτέλεσμα να είναι ένας ακέραιος αριθμός.

Το συμβάν onlkeup λαμβάνει χώρα μόλις πατήσουμε και αφήσουμε ένα πλήκτρο από το πληκτρολόγιο. </p>

</body>

</html>

79. Εμφάνιση Pop-Up Window – 1ο Παράδειγμα

<html>

<head>

function openwindow() {

window.open("http://www.line.gr", "my_new_window",

"toolbar=yes, location=yes, directories=no, status=no,\

menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes,\

width=400, height=400")

}

</script>

</head>

<body>

<form>

</form>

<p> Με τη μέθοδο open() του αντικειμένου window μπορούμε να εμφανίσουμε ένα αναδυόμενο παράθυρο (pop-up window) και

να ρυθμίσουμε πολλές παραμέτρους του, όπως τη διεύθυνση (URL) της ιστοσελίδας που θέλουμε να περιέχει, την ονομασία

του, το πλάτος και το ύψος του, το αν θα έχει ράβδους κύλισης ή όχι, το αν θα μπορεί ο χρήστης να αλλάξει το μέγεθός του κ.ά.

</p>

</body>

</html>

80. Εμφάνιση Pop-Up Window – 2ο Παράδειγμα

<html>

<head>

function popup() {

window.open('dhtml.html', 'mywin', 'toolbar=no, location=no,\

directories=no, status=no, menubar=no, resizable=no,\

copyhistory=no, scrollbars=no, width=480, height=440');

}

</script>

</head>

<body>

<big><a href="javascript:popup()"> Κάντε κλικ εδώ για να εμφανισθεί ένα αναδυόμενο παράθυρο

(pop-up window)</a></big><br>

</p>

</body>

</html>

81. Εμφάνιση Νέου Παραθύρου με Πλήρες Μέγεθος

<html>

<head>

function openwindow() {

w_height=screen.availheight

w_width=screen.availwidth

window.open("default.asp", "", "height=w_height, \

width=w_width, left=0, top=0")

}

</script>

</head>

<body>

<form>

</form>

<p> Με τις ιδιότητες availwidth και availheight του αντικειμένου screen βρίσκουμε το μέγιστο διαθέσιμο πλάτος και ύψος ενός

παραθύρου. </p>

</body>

</html>

82. Τοποθέτηση του Νέου Παραθύρου

<html>

<head>

function openwindow() {

window.open("http://www.line.gr", "my_new_window", "width=400, height=400, top=0, left=0")

}

</script>

</head>

<body>

<form>

</form>

<p> Μπορούμε να ορίσουμε το ακριβές πλάτος και ύψος καθώς και την απόσταση από την κορυφή και από την αριστερή πλευρά

του αναδυόμενου παραθύρου που θέλουμε να εμφανίσουμε.

</p>

</body>

</html>

83. Πολλαπλά Παράθυρα (Multiple Windows)

<html>

<head>

function openwindow() {

window1=window.open("http://www.florina.gr/")

window2=window.open("http://www.line.gr/")

}

</script>

</head>

<body>

<form>

</form>

<p> Πώς να εμφανίσουμε (pop up) περισσότερα από ένα παράθυρα μ’ ένα μόνο κλικ. </p>

</body>

</html>

84. Κλείσιμο ενός Παραθύρου

<html>

<head>

function openwindow() {

mywindow=window.open("http://www.line.gr",

"my_new_window", "width=300, height=300")

}

function closewindow() {

mywindow.close()

}

</script>

</head>

<body>

<form>

</form>

<p> Με τη μέθοδο close() του αντικειμένου window μπορούμε να κλείσουμε ένα παράθυρο, αφού πρώτα το έχουμε ανοίξει και

του έχουμε δώσει και όνομα. </p>

</body>

</html>

85. Άνοιγμα και Κλείσιμο Κενού Παραθύρου

<html>

<head>

function openWindow() {

newWindow = window.open('', 'newWin', 'toolbar=yes,\

location=yes, scrollbars=yes, width=300, height=200')

} // end function open()

function closeWindow() {

if (newWindow && !newWindow.closed) {

newWindow.close()

} // end if

} // end function close()

</script>

</head>

<h2> Άνοιγμα και Κλείσιμο Παραθύρου </h2>

<h3>

<a href="JavaScript:openWindow()"> Άνοιγμα Παραθύρου </a>

<br>

<a href="JavaScript:closeWindow()"> Κλείσιμο Παραθύρου </a>

</h3>

</center>

</body>

</html>

86. Εύρεση Σελίδας Προέλευσης

<html>

<head>

</head>

<body>

<h2> Από Πού Έρχομαι; </h2>

if (document.referrer != '') {

document.write("Ήρθατε από : "+document.referrer)

}

</script>

</center>

<p> Με την ιδιότητα referrer του αντικειμένου document μπορούμε να μάθουμε από ποια ιστοσελίδα ήρθε (βρέθηκε) ένας χρήστης στη

σελίδα μας. </p>

</body>

</html>

87. Καταχώριση Τιμής σε Πεδίο Κειμένου Φόρμας

<html>

<head>

</head>

<body>

</form>

<p> Μπορούμε να καταχωρούμε τιμές στα πεδία κειμένου μιας φόρμας και όχι μόνο να τις διαβάζουμε. </p>

</body>

</html>

88. Επικύρωση Τιμής Πεδίου Κειμένου Φόρμας

<html>

<head>

function validate() {

x=document.myForm

at=x.myEmail.value.indexOf("@")

if (at == –1) {

alert("Προσοχή! Δεν είναι ένα έγκυρο e-mail")

return false

} // end if

} // end function

</script>

</head>

<body>

Γράψτε τη διεύθυνση του e-mail σας :

</form>

<p> Χρησιμοποιούμε τη μέθοδο indexOf() του αντικειμένου String για να ελέγξουμε την καταχώριση του χρήστη στο πεδίο κειμένου

της φόρμας. Αν ο χρήστης δεν έγραψε κάπου τον χαρακτήρα @, που είναι απαραίτητος στη διεύθυνση ενός e-mail, τότε η

μέθοδος indexOf() θα επιστρέψει την τιμή –1. </p>

</body>

</html>

89. Έλεγχος Τιμών Πεδίων Φόρμας

<html>

<head>

function first() {

// δημιουργεί ένα alert box με το κείμενο που

// καταχωρήθηκε στο στοιχείο κειμένου (text element)

alert("Η τιμή του textelement είναι : " +

document.myForm.myText.value);

} // end function first()

function second() {

// αυτή η συνάρτηση ελέγχει την κατάσταση

// του πλαισίου ελέγχου (checkbox)

var myString= "Το πλαίσιο ελέγχου είναι ";

// είναι το πλαίσιο ελέγχου (checkbox) επιλεγμένο ή όχι;

if (document.myForm.myCheckbox.checked)

myString += "επιλεγμένο (checked)"

else

myString += "δεν είναι επιλεγμένο (not checked)";

// string εξόδου

alert(myString);

} // end function second()

</script>

</head>

<br>

</form>

document.write("Ο κωδικός του χρώματος φόντου είναι : ");

document.write(document.bgColor + "<br>");

document.write("Το κείμενο στο δεύτερο πλήκτρο είναι : ");

document.write(document.myForm.button2.value);

</script>

<p> Αν κάνουμε κλικ στο button1, θα κληθεί η συνάρτηση first() και θα εμφανισθεί το περιεχόμενο του πεδίου κειμένου σ’ ένα alert

box, ενώ αν κάνουμε κλικ στο button2, θα κληθεί η συνάρτηση second(), θα γίνει έλεγχος αν είναι επιλεγμένο ή όχι το πλαίσιο

ελέγχου και θα εμφανισθεί ένα ανάλογο μήνυμα. </p>

</body>

</html>

90. Επικύρωση Μήκους Καταχώρισης Πεδίου Φόρμας

<html>

<head>

function validate() {

x=document.myForm

input=x.myInput.value

if (input.length>5) {

alert("Όχι περισσότερους από 5 χαρακτήρες")

return false

}

else {

return true

} // end if

} // end function

</script>

</head>

<body>

Μην γράψετε περισσότερους από 5 χαρακτήρες :

</form>

<p> Χρησιμοποιούμε την ιδιότητα length του αντικειμένου String για να ελέγξουμε το πλήθος των χαρακτήρων που καταχώρισε ο

χρήστης στο πεδίο κειμένου της φόρμας. Αν η τιμή αυτή είναι μεγαλύτερη από 5, θα εμφανισθεί ένα alert box με το κατάλληλο

μήνυμα. </p>

</body>

</html>

91. Επικύρωση Πολλών Στοιχείων Φόρμας

<html>

<head>

function validate() {

x=document.myForm

at=x.myEmail.value.indexOf("@")

code=x.myCode.value

firstname=x.myName.value

submitOK="True"

if (at==–1) {

alert("Δεν είναι ένα έγκυρο e-mail")

submitOK="False"

} // end if

if (code<1 || code>5) {

alert("Ο κώδικας πρέπει να είναι από 1 έως 5")

submitOK="False"

} // end if

if (firstname.length>10) {

alert("Το όνομά σας πρέπει να έχει λιγότερα από\

10 γράμματα")

submitOK="False"

} // end if

if (submitOK=="False") {

return false

}

else {

return true

} // end if

} // end function

</script>

</head>

<body>

Γράψτε το e-mail σας : <input type="text" name="myEmail"><br>

Γράψτε τον κώδικά σας με τιμές από 1 έως 5 : <input type="text" name="myCode"><br>

Γράψτε το όνομά σας το πολύ με 10 γράμματα : <input type="text" name="myName"><br>

</form>

<p> Στο παράδειγμα αυτό κάνουμε έλεγχο στις καταχωρήσεις τριών πεδίων κειμένου μιας φόρμας, χρησιμοποιώντας κάθε φορά

διαφορετικές μεθόδους και ιδιότητες. </p>

</body>

</html>

92. Επικύρωση Καταχώρισης ενός Πεδίου Κειμένου

<html>

<head>

function validate() {

x=document.myForm

txt=x.myInput.value

if (txt>=1 && txt<=5) {

return true

}

else {

alert("Πρέπει να έχει τιμές από 1 έως 5")

return false

} // end if

} // end function

</script>

</head>

<body>

Εισάγετε μια τιμή από 1 έως 5 : <input type="text" name="myInput">

</form>

<p> Πώς μπορούμε να επικυρώσουμε (validate) την καταχώριση ενός πεδίου κειμένου (input field) με ελάχιστες και μέγιστες τιμές.

</p>

</body>

</html>

93. Αλλαγή Τιμής Πεδίου Κειμένου Φόρμας

<html>

<head>

function ChangeText() {

document.Customer.Lastname.value = "Florina"

} // end function

</script>

</head>

<body>

</form>

<p> Όταν κάνουμε κλικ στο πλήκτρο εντολής της φόρμας, θα καλείται η συνάρτηση ChangeText(), η οποία θα καταχωρεί το

κείμενο Florina στο πλαίσιο κειμένου της φόρμας, στην ουσία στην ιδιότητα value του πλαισίου κειμένου Lastname της φόρμας

Customer του εγγράφου. </p>

</body>

</html>

94. Εστίαση (Focus) σε Πεδίο Κειμένου Φόρμας

<html>

<head>

function setfocus() {

document.forms[0].field.focus()

} // end function

</script>

</head>

<body>

<form>

</form>
<p> Για να κάνουμε εστίαση (focus) σ’ ένα πεδίο κειμένου (input field), χρησιμοποιούμε τη μέθοδο focus(). </p>

</body>

</html>

95. Μετάβαση στο Επόμενο Πεδίο Κειμένου Φόρμας

<html>

<head>

function Check(elmnt, content) {

if (content.length==elmnt.maxLength) {

next=elmnt.tabIndex

if (next<document.forms[0].elements.length) {

document.forms[0].elements[next].focus()

} // end if

if (next==document.forms[0].elements.length) {

document.forms[0].elements[0].focus()

} // end if

} // end function

</script>

</head>

<body>

Προσοχή : Καταχωρήστε μέχρι 3 χαρακτήρες : <input type="text" size="3" tabindex="1" name="myInput"

maxlength="3" onkeyup="Check(this, this.value)">

<br> Προσοχή : Καταχωρήστε μέχρι 3 χαρακτήρες : <input type="text" size="3" tabindex="2" name="mySecond"

maxlength="3" onkeyup="Check(this, this.value)">

<br> Προσοχή : Καταχωρήστε μέχρι 3 χαρακτήρες : <input type="text" size="3" tabindex="3" name="myThird"

maxlength="3" onkeyup="Check(this, this.value)">

</form>

<p> Πηγαίνουμε αυτόματα στο επόμενο πεδίο κειμένου όταν έχει γεμίσει το τρέχον πεδίο κειμένου. Η ιδιότητα forms[0] του

αντικειμένου document αναφέρεται στην πρώτη φόρμα του εγγράφου, που εδώ τυγχάνει να είναι και η μοναδική. Επίσης, η

ιδιότητα elements αναφέρεται στα στοιχεία που περιέχει μια φόρμα και όπου το elements[0] είναι το πρώτο στοιχείο της

φόρμας με τη σειρά που αυτά είναι γραμμένα μέσα στα tags <form> και </form>, το elements.length αναφέρεται στο

πλήθος των στοιχείων μιας φόρμας, το elements[next] αναφέρεται στο επόμενο στοιχείο από το τρέχον (επιλεγμένο)

στοιχείο της φόρμας.

Το συμβάν onkeyup εκτελείται κάθε φορά που καταχωρούμε έναν χαρακτήρα σ’ ένα από τα πεδία κειμένου της φόρμας και

καλεί τη συνάρτηση Check(), στην οποία μεταβιβάζει δύο ορίσματα : το ίδιο το στοιχείο (this) και την τιμή (περιεχόμενο)

του στοιχείου (this.value). Η ιδιότητα tabIndex ενός πεδίου μιας φόρμας καθορίζει τη σειρά επιλογής των πεδίων όταν πατάμε το

πλήκτρο tab από το πληκτρολόγιο. </p>

</body>

</html>

96. Επιλογή (Select) Πεδίου Κειμένου Φόρμας

<html>

<head>

function setfocus() {

document.forms[0].field.select()

document.forms[0].field.focus()

} // end function

</script>

</head>

<body>

<form>

</form>

<p> Με τη μέθοδο select() μπορούμε να κάνουμε το περιεχόμενο ενός πεδίου κειμένου (input field) να είναι επιλεγμένο

(selected). Η διαφορά της μεθόδου select() από τη μέθοδο focus() είναι ότι η select() επιλέγει (μαυρίζει) όλο το περιεχόμενο ενός

πεδίου κειμένου, ενώ η μέθοδος focus() απλά τοποθετεί τον δείκτη του ποντικιού μέσα στο πεδίο κειμένου. </p>

</body>

</html>

97. Πλήκτρα Επιλογής (Radio Buttons) Φόρμας

<html>

<head>

function check(browser) {

document.forms[0].answer.value=browser

} // end function

</script>

</head>

<body>

<form>

Ποιος είναι ο αγαπημένος σας φυλλομετρητής (browser);<br>

<input type="radio" name="browser" onclick="check(this.value)" value="Explorer"> Microsoft Internet Explorer <br>

<input type="radio" name="browser" onclick="check(this.value)" value="Netscape"> Netscape Navigator <br>

</form>

<p> Το παράδειγμα αυτό δείχνει πώς μπορούμε να επιλέξουμε κάποιο από μια ομάδα πλήκτρων επιλογής (radio buttons).

Μόλις κάνουμε κλικ σε κάποιο πλήκτρο επιλογής, ενεργοποιείται το συμβάν onclick και καλείται η συνάρτηση

check() στην οποία μεταβιβάζουμε την τιμή (value) του πλήκτρου επιλογής, η οποία εμφανίζεται μετά στο πεδίο

κειμένου answer.

Τα πλήκτρα επιλογής που έχουν την ίδια τιμή στην ιδιότητά τους name, όπως εδώ έχουν την ίδια ονομασία browser, λέμε ότι

ανήκουν στην ίδια ομάδα, που πρακτικά σημαίνει ότι όταν κάνουμε κλικ σ’ ένα πλήκτρο επιλογής μιας ομάδας, τότε

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

</body>

</html>

98. Πλαίσια Ελέγχου (CheckBoxes) Φόρμας

<html>

<head>

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 + " "

} // end if

} // end for

answer.value=txt

} // end function

</script>

</head>

<body>

<form>

Πώς πίνετε τον καφέ σας; <br>

<input type="checkbox" name="coffee" value="με γάλα"> Με γάλα (cream) <br>

<input type="checkbox" name="coffee" value="με ζάχαρη"> Με ζάχαρη (sugar) <br>

<p> Το παράδειγμα αυτό δείχνει πώς μπορούμε να επιλέξουμε κάποιο ή κάποια από μια ομάδα πλαισίων ελέγχου (checkboxes).

Μόλις κάνουμε κλικ σε κάποιο πλαίσιο ελέγχου, γίνεται true η ιδιότητά του checked. Με το κλικ που κάνουμε στο πλήκτρο

εντολής καλείται η συνάρτηση check(), η οποία με την ιδιότητα length βρίσκει το πλήθος των πλαισίων ελέγχου της ομάδας

coffee της φόρμας και ελέγχει την ιδιότητα checked κάθε πλαισίου ελέγχου για να διαπιστώσει αν είναι επιλεγμένο.

Τα πλαίσια ελέγχου είναι καταχωρημένα στον πίνακα (array) coffee, όπου το πρώτο πλαίσιο ελέγχου είναι το coffee[0], το

επόμενο το coffee[1] κοκ. Αν ένα πλαίσιο ελέγχου είναι επιλεγμένο, τότε η ιδιότητά του checked θα είναι true και άρα θα

προσθέσουμε την τιμή του (value) στο string txt. Το string txt που θα σχηματισθεί από τις επιλογές του χρήστη θα μπορεί να είναι

κενό ή να έχει μόνο την επιλογή γάλα ή μόνο την επιλογή ζάχαρη ή και τις δύο επιλογές γάλα και ζάχαρη. Η τιμή του string txt θα

εμφανισθεί στο πεδίο κειμένου answer.

Τα πλαίσια ελέγχου που έχουν την ίδια τιμή στην ιδιότητά τους name, όπως εδώ έχουν την ίδια ονομασία coffee, λέμε ότι

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

</body>

</html>

99. Επιλογή από Πτυσσόμενη Λίστα – 1ο Παράδειγμα

<html>

<head>

function put() {

option=document.forms[0].dropdown.options

[document.forms[0].dropdown.selectedIndex].text

txt=option

document.forms[0].favorite.value=txt

} // end function

</script>

</head>

<body>

<form>

<p> Επιλέξτε τον αγαπημένο σας φυλλομετρητή :

<option> Internet Explorer

<option> Netscape Navigator

</select></p>

<p> Ο αγαπημένος σας φυλλομετρητής είναι :

</form>

<p> Το παράδειγμα αυτό δείχνει πώς μπορούμε να επιλέξουμε από μια πτυσσόμενη λίστα (drop down list). Αρχικά το πεδίο

κειμένου περιέχει την επιλογή Internet Explorer και μόλις επιλέξουμε κάτι από την πτυσσόμενη λίστα θα ενεργοποιηθεί το

συμβάν onchange, το οποίο θα καλέσει τη συνάρτηση put(), η οποία και θα εμφανίσει την επιλογή που κάναμε στο πεδίο

κειμένου της φόρμας.

Η ιδιότητα selectedIndex μιας πτυσσόμενης λίστας αναφέρεται στη σειρά που έχει το επιλεγμένο στοιχείο της λίστας, όπου το

πρώτο έχει τη θέση 0, και η ιδιότητα text επιστρέφει την τιμή (κείμενο) ενός στοιχείου της λίστας. Τα στοιχεία μιας

πτυσσόμενης λίστας είναι καταχωρημένα σ’ έναν πίνακα (array) με όνομα options. </p>

</body>

</html>

100. Επιλογή από Πτυσσόμενη Λίστα – 2ο Παράδειγμα

<html>

<head>

function Dest(form) {

var sGo

if (form.select1.selectedIndex == 0) sGo = "page00.html";

if (form.select1.selectedIndex == 1) sGo = "page01.html";

if (form.select1.selectedIndex == 2) sGo = "page02.html";

if (form.select1.selectedIndex == 3) sGo = "page03.html";

if (form.select1.selectedIndex == 4) sGo = "page04.html";

if (form.select1.selectedIndex == 5) sGo = "page05.html";

if (form.select1.selectedIndex == 6) sGo = "page06.html";

if (form.select1.selectedIndex == 7) sGo = "page07.html";

if (form.select1.selectedIndex == 8) sGo = "page08.html";

if (form.select1.selectedIndex == 9) sGo = "page09.html";

form.select1.blur()

Win1 = open(sGo, "Window1", "width=400, height=200")

Win1.focus()

} // end function

</head>

</script>

<body>

<form>

<option selected value> Άσπρο Δωμάτιο

<option> Κόκκινο Δωμάτιο

<option> Πράσινο Δωμάτιο

<option> Πορφυρό Δωμάτιο

<option> Σταχτύ Δωμάτιο

<option> Καφέ Δωμάτιο

<option> Κίτρινο Δωμάτιο

<option> Γαλάζιο Δωμάτιο

<option> Κεραμιδί Δωμάτιο

<option> Λαδί Δωμάτιο

</select>

</form>

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

ανοίγει κάθε φορά ένα διαφορετικό έγγραφο (ιστοσελίδα) σε καινούργιο παράθυρο. Η ιδιότητα size ενός πλαισίου λίστας

καθορίζει πόσα στοιχεία της λίστας θα βλέπουμε κάθε φορά. Πολύ καλή είναι η επιλογή size = 1, για να βλέπουμε έτσι μόνο

το επιλεγμένο στοιχείο της λίστας. Εδώ που έχουμε size = 4 θα βλέπουμε 4 στοιχεία της λίστας ταυτόχρονα.

Η ιδιότητα selected value ενός πλαισίου λίστας καθορίζει το στοιχείο της λίστας που θα εμφανίζεται με το φόρτωμα της

ιστοσελίδας. </p>

</body>

</html>

101. Εντοπισμός του Φυλλομετρητή του Χρήστη

<html>

<head>

</head>

<body>

document.write("Ο φυλλομετρητής που έχετε είναι ο : "+navigator.appName)

</script>

<p> Η ιδιότητα appName του αντικειμένου navigator περιέχει το όνομα του φυλλομετρητή (browser) που χρησιμοποιούμε. </p>

</body>

</html>

102. Μήνυμα Ανάλογο του Φυλλομετρητή του Χρήστη

<html>

<head>

</head>

<body>

document.write("Hallo from Florina!");

alert("Καλωσήρθατε στη σελίδα της JavaScript");

if (navigator.appName=="Netscape") {

document.write("<br> Έχετε τον Netscape Navigator ");

}

else if (navigator.appName=="Microsoft Internet Explorer") {

document.write("<br> Έχετε τον Internet Explorer ");

} // end if

</script>

</body>

</html>

103. Επίδειξη της Εντολής For

<html>

<body>

loop=10

document.write("<br><br><b>Επίδειξη της εντολής For \

στην JavaScript :</b>");

document.write("<br>") ;

for (i=1; i<=loop; i++) {

document.write("<br>Αριθμός γραμμής : "+i)

} // end for

</script>

</body>

</html>

104. Έλεγχος των Καταχωρίσεων του Χρήστη

<html>

<head>

function validate(field) {

// το string αυτό περιέχει τους αποδεκτούς χαρακτήρες

var valid = "abcdefghijklmnopqrstuvwxyz0123456789";

var ok = "yes";

// η μεταβλητή temp θα περιέχει έναν-έναν τους χαρακτήρες

// που θα καταχωρήσει ο χρήστης στο πεδίο κειμένου

var temp;

for (var i=0; i<field.value.length; i++) {

// αποσπάμε έναν-έναν τους χαρακτήρες της μεταβλητής

// field, που είναι στην ουσία η τιμή του πεδίου κειμένου

temp = "" + field.value.substring(i, i+1);

// έλεγχος αν ο χαρακτήρας temp ανήκει στις αποδεκτές

// τιμές του string valid

if (valid.indexOf(temp) == –1)

ok = "no";

} // end for

// αν η μεταβλητή ok έχει την τιμή no, αυτό σημαίνει ότι ένας

// τουλάχιστον από τους χαρακτήρες του πεδίου κειμένου που

// καταχώρισε ο χρήστης δεν ανήκει στους αποδεκτούς

// χαρακτήρες που υπάρχουν στο string valid, οπότε και

// εμφανίζουμε ένα ανάλογο μήνυμα, επιλέγουμε το πεδίο

// κειμένου και υποχρεώνουμε τον χρήστη να καταχωρήσει ξανά

if (ok == "no") {

alert("Προσοχή! Μόνο γράμματα και αριθμοί!");

field.focus();

field.select();

} // end if

} // end function

</script>

</head>

<body>

<br>

</form>

</center>

<p> Το συμβάν onBlur λαμβάνει χώρα όταν απομακρυνόμαστε από ένα αντικείμενο μιας φόρμας, πρόκειται δηλαδή για το αντίθετο

του συμβάντος focus. </p>

</body>

</html>

105. Αλλαγή του Χρώματος Φόντου της Ιστοσελίδας

<html>

<body>

Αλλαγή του Χρώματος Φόντου της Ιστοσελίδας

</big></strong></h3>

<p align="center"> Μετακινείστε το ποντίκι πάνω από τα παρακάτω κείμενα για να αλλάξει το χρώμα φόντου της τρέχουσας

ιστοσελίδας :

</p>

<p>

<a href="plinet.html" onMouseover="document.bgColor= 'red'"> Κόκκινο Χρώμα Φόντου</a></p>

<p>

<a href="plinet.html" onMouseover="document.bgColor='green'"> Πράσινο Χρώμα Φόντου</a></p>

<p>

<a href="plinet.html" onMouseover="document.bgColor='blue'"> Μπλε Χρώμα Φόντου</a></p>

<p>

<a href="plinet.html" onMouseover="document.bgColor='#c0c0c0'"> Γκρι Χρώμα Φόντου</a></p>

<p> Το συμβάν onMouseover λαμβάνει χώρα όταν μετακινούμε το ποντίκι πάνω από ένα αντικείμενο της ιστοσελίδας, όπως είναι

εδώ το κείμενο ενός υπερσυνδέσμου (hyperlink). Στην προκειμένη περίπτωση αλλάζουμε το χρώμα φόντου της

τρέχουσας ιστοσελίδας, τροποποιώντας την ιδιότητα bgColor του αντικειμένου document. Οι τιμές που μπορούμε να δώσουμε

στην ιδιότητα αυτή μπορεί να είναι το όνομα ενός χρώματος ή και πιο συγκεκριμένες τιμές σε 16δική μορφή με πρόθεμα τον

χαρακτήρα #.

Επίσης, στο παράδειγμα αυτό ενώ χρησιμοποιήσαμε εντολές της JavaScript, πουθενά δεν βάλαμε το tag script. </p>

</body>

</html>

106. Εύρεση Μεγαλύτερου από Δύο Αριθμούς

<html>

<body>

Εύρεση Μεγαλύτερου Από Δύο Αριθμούς

</strong></big></p>

<form>

<br>

Γράψτε δύο αριθμούς :

<br>

</form>

<p> Η μέθοδος max() του αντικειμένου Math δέχεται δύο αριθμητικά ορίσματα και επιστρέφει το μεγαλύτερο. Εδώ την καλούμε από

το συμβάν onclick. </p>

</body>

</html>

107. Υπολογισμός Περιφέρειας Κύκλου

<html>

<body>

Υπολογισμός Περιφέρειας Κύκλου

</big></big></strong></p>

<form>

<br>

Γράψτε την ακτίνα ενός κύκλου :

</form>

<p> Η μέθοδος round() του αντικειμένου Math δέχεται ένα αριθμητικό όρισμα και το επιστρέφει στρογγυλοποιημένο στον

πλησιέστερο ακέραιο αριθμό. Εδώ την καλούμε από το συμβάν onclick.

Επίσης, η σταθερά PI του αντικειμένου Math είναι η γνωστή μας τιμή του π= 3.141592653589793. </p>

</body>

</html>

108. Υπολογισμός της Τετραγωνικής Ρίζας Αριθμού

<html>

<body>

Υπολογισμός Τετραγωνικής Ρίζας Αριθμού

</big></big></strong></p>

<form>

<br> Γράψτε έναν αριθμό :

</form>

<p> Η μέθοδος sqrt() του αντικειμένου Math δέχεται ένα αριθμητικό όρισμα και επιστρέφει την τετραγωνική του ρίζα.

Εδώ την καλούμε από το συμβάν onclick. Επίσης, χρησιμοποιούμε τη μέθοδο round() του αντικειμένου

Math και μια έξυπνη τεχνική για να στρογγυλοποιήσουμε το αποτέλεσμα του υπολογισμού της τετραγωνικής ρίζας σε δύο

δεκαδικά. </p>

</body>

</html>

109. Μετατροπή από Ευρώ σε Δραχμές

<html>

<body>

Μετατροπή από Ευρώ σε Δραχμές

</big></strong></big></p>

<form><br> Καταχωρήστε μια τιμή :

</form>

<p> Στο παράδειγμα αυτό χρησιμοποιούμε ένα πεδίο κειμένου όπου καταχωρούμε μια αριθμητική τιμή και μετά μπορούμε να

επιλέξουμε ένα από τα δύο πλήκτρα εντολής για να μετατραπεί η τιμή αυτή σε ευρώ ή σε δραχμές και να εμφανισθεί σε

αντίστοιχα πεδία κειμένου. </p>

</body>

</html>

110. Πληροφορίες για τον Φυλλομετρητή του Χρήστη

<html>

<body>

document.write("<b>Φυλλομετρητής : </b>")

document.write(navigator.appName + "<br>")

document.write("<b>Έκδοση του φυλλομετρητή : </b>")

document.write(navigator.appVersion + "<br>")

document.write("<b>Code : </b>")

document.write(navigator.appCodeName + "<br>")

document.write("<b>Πλατφόρμα : </b>")

document.write(navigator.platform + "<br>")

document.write("<b>Referrer : </b>")

document.write(document.referrer + "<br>")

</script>

</body>

</html>

111. Πληροφορίες για την Οθόνη του Χρήστη

<html>

<body>

document.write("<b>Ανάλυση Οθόνης : </b>")

document.write(screen.width + "*")

document.write(screen.height + "<br>")

document.write("<b>Διαθέσιμη Περιοχή Απεικόνισης : </b>")

document.write(window.screen.availWidth + "*")

document.write(window.screen.availHeight + "<br>")

document.write("<b>Βάθος Χρώματος : </b>")

document.write(window.screen.colorDepth + "<br>")

</script>

</body>

</html>

112. Ανακατεύθυνση (Redirection)

<html>

<head>

function redirectme() {

bname=navigator.appName

if (bname.indexOf("Netscape") != -1) {

window.location="page_netscape.html"

return

} // end if

if (bname.indexOf("Microsoft") != -1) {

window.location="page_explorer.html"

return

} // end if

window.location="page_other.html"

} // end function

</script>

</head>

<body>

<form>

</form>

<p> Το παράδειγμα αυτό δείχνει πώς μπορούμε να ανακατευθύνουμε (redirect) τον χρήστη σε διαφορετικές ιστοσελίδες ανάλογα με

τον φυλλομετρητή που χρησιμοποιεί. Προς τον σκοπό αυτό χρησιμοποιούμε την ιδιότητα location του

αντικειμένου window. </p>

</body>

</html>

113. Έλεγχος της Έκδοσης του Φυλλομετρητή

<html>

<head>

function browserversion() {

txt="Ο φυλλομετρητής σας είναι άγνωστος"

browser=navigator.appVersion

if (browser.indexOf("2.")>-1) {

txt="Ο φυλλομετρητής σας είναι παμπάλαιος"

} // end if

if (browser.indexOf("3.")>-1) {

txt="Πρέπει να βελτιώσετε τον φυλλομετρητή σας"

} // end if

if (browser.indexOf("4.")>-1) {

txt="Ο φυλλομετρητής σας είναι καινούργιος"

} // end if

document.forms[0].message.value=txt

} // end function

</script>

</head>

<form>

</form>

<p> Το παράδειγμα αυτό δείχνει πώς μπορούμε να εμφανίσουμε ένα διαφορετικό μήνυμα στον χρήστη ανάλογα με την έκδοση

(version) του φυλλομετρητή που χρησιμοποιεί. </p>

</body>

</html>

114. Κύλιση (Scroll Down) Ιστοσελίδας

<html>

<head>

function scrolldown() {

window.scroll(1, 600)

} // end function

</script>

</head>

<body>

<form>

</form>

<p> Η μέθοδος scroll του αντικειμένου window κυλάει (scrolls) την ιστοσελίδα στις καθορισμένες συντεταγμένες x, y. </p>

</body>

</html>

115. Εφέ Κύλισης (Scrolling Effect) Ιστοσελίδας

<html>

<head>

function scrolldown() {

for (i=1; i<=600; i++) {

window.scroll(1, i)

} // end for

} // end function

</script>

</head>

<body>

<form>

</form>

<p> Κάντε κλικ στο πλήκτρο εντολής Scroll για να δείτε το εφέ κύλισης της ιστοσελίδας. </p>

</body>

</html>

116. Κύλιση προς τα Δεξιά (Scroll Right)

<html>

<head>

function scrolldown() {

window.scroll(500, 1)

} // end function

</script>

</head>

<body>

<form>

</form>

<p> Η μέθοδος scroll του αντικειμένου window κυλάει (scrolls) το έγγραφο στις καθορισμένες συντεταγμένες x, y. </p>

</body>

</html>

117. Εκτύπωση Ιστοσελίδας

<html>

<head>

function printpage() {

window.print()

} // end function

</script>

</head>

<body>

<form>

</form>

<p> Για να εκτυπώσουμε μια ιστοσελίδα χρησιμοποιούμε τη μέθοδο print() του αντικειμένου window. </p>

</body>

</html>

118. Ανανέωση (Refresh) Ιστοσελίδας

<html>

<head>

function refresh() {

location.reload()

} // end function

</script>

</head>

<body>

<form>

</form>

<p> Για να ανανεώσουμε (refresh) το περιεχόμενο της τρέχουσας ιστοσελίδας, χρησιμοποιούμε τη μέθοδο reload() του

αντικειμένου location. </p>

</body>

</html>

119. Δημιουργία Αρχικής Σελίδας (HomePage)

<html>

<head>

function makeDefault(element) {

element.style.behavior='url(#default#homepage)';

element.setHomePage('http://www.line.gr');

} // end function

</script>

</head>

<body>

<form>

</form>

<p> Μόλις κάνουμε κλικ στο πλήκτρο εντολής, θα εμφανισθεί ένα πλαίσιο μηνύματος με τα πλήκτρα εντολής Ναι και Όχι, για να

επιλέξουμε αν θέλουμε να γίνει η σελίδα Line η αρχική μας σελίδα (default home page). </p>

</body>

</html>

120. Προσθήκη Σελίδας στα Αγαπημένα (Μόνο στον ΙΕ)

<html>

<head>

function bookmark() {

window.external.AddFavorite("http://www.line.gr", "Η Εταιρεία Line")

} // end function

</script>

</head>

<body>

<form>

</form>

<p> Μόλις κάνουμε κλικ στο πλήκτρο εντολής, θα εμφανισθεί το γνωστό πλαίσιο διαλόγου Προσθήκη στα Αγαπημένα, όπου

μπορούμε να επιλέξουμε σε ποιον φάκελο των Αγαπημένων και με ποιο όνομα θα προστεθεί η τρέχουσα ιστοσελίδα. Το δεύτερο

όρισμα της μεθόδου AddFavorite() θα είναι και το προτεινόμενο.

</p>

</body>

</html>

121. Εμφάνιση του Πηγαίου Κώδικα (Source Code)

<html>

<head>

function source() {

location="view-source : " + window.location.href

} // end function

</script>

</head>

<body>

<form>

</form>

</body>

</html>

122. Αλλαγή του URL

<html>

<head>

function locate() {

location="http://www.line.gr/"

} // end function

</script>

</head>

<body>

<form>

</form>

<p> Πώς να στείλουμε τον πελάτη (client) σ’ ένα νέο url/σελίδα. </p>

</body>

</html>

123. To Συμβάν OnBlur

<html>

<head>

function testAge(form) {

var nAge = form.ageBox.value

if (nAge >= 18) {

if (nAge >= 100) {

alert("Γράψατε " + nAge + " χρόνια. \

Είναι σωστό;")

} // end if

}

else {

alert("Πρέπει να είστε πάνω από 18 χρονών")

} // end if

} // end function

</script>

</head>

<body>

<form>

Γράψτε την ηλικία σας (πρέπει να είστε άνω των 18 ) :

<br>

</form>

<p> Το blur είναι το συμβάν της απομάκρυνσης από την εστίαση (focus) σ’ ένα στοιχείο φόρμας. Όταν δηλαδή φεύγουμε από ένα

στοιχείο φόρμας και πάμε σ’ ένα άλλο στοιχείο φόρμας ή απλά πατάμε το ποντίκι οπουδήποτε έξω από το στοιχείο φόρμας ή

όταν πατάμε το πλήκτρο Tab, αλλά υπάρχουν δύο τουλάχιστον στοιχεία στη φόρμα.

Στο παράδειγμά μας ελέγχουμε την ηλικία που καταχωρεί ο χρήστης σ’ ένα πεδίο κειμένου. Μόλις φύγουμε από το πεδίο

κειμένου λαμβάνει χώρα το συμβάν onblur, το οποίο καλεί τη συνάρτηση testAge και της μεταβιβάζει σαν όρισμα την τρέχουσα

φόρμα. Τοποθετούμε στη μεταβλητή nAge της συνάρτησης την τιμή που υπάρχει στο πεδίο κειμένου ageBox της φόρμας και

μετά ελέγχουμε με μια εντολή if αν η τιμή αυτή, η ηλικία δηλαδή, είναι μεγαλύτερη ή ίση από 18.

Αν είναι μεγαλύτερη ή ίση από 18, ελέγχουμε μήπως είναι και μεγαλύτερη ή ίση από 100, οπότε εμφανίζουμε ένα σχετικό

μήνυμα. Αν, όμως, είναι μεγαλύτερη από 18 και μικρότερη από 100, τότε είναι εντάξει. Αν, όμως, η ηλικία είναι μικρότερη από

18, τότε εκτελούμε την εντολή else και εμφανίζουμε ένα σχετικό μήνυμα προειδοποίησης.

</p>

</body>

</html>

124. Το Συμβάν OnFocus

<html>

<head>

function runTotal(form) {

var nNum1 = parseFloat(form.num1.value)

var nNum2 = parseFloat(form.num2.value)

form.total.value = nNum1 + nNum2

} // end function

</script>

</head>

<body>

<form>

Γράψτε τον πρώτο αριθμό : <input type = "text" name = "num1" value = "0"><br>

Γράψτε τον δεύτερο αριθμό : <input type = "text" name = "num2" value = "0"><br>

Κάντε κλικ εδώ για να δείτε το άθροισμα : <input type = "text" name = "total" onfocus = "runTotal(this.form)">

</form>

<p> Το συμβάν onfocus είναι το ακριβώς αντίθετο του onblur. Ενεργοποιείται όταν εστιάζουμε (κάνουμε κλικ) σ’ ένα στοιχείο

μιας φόρμας. Για να εστιάσουμε σ’ ένα στοιχείο φόρμας, υπάρχουν δύο τρόποι : ή πατάμε το πλήκτρο Tab ή κάνουμε

κλικ με το ποντίκι μέσα στο στοιχείο.

Αν πατήσουμε το πλήκτρο Tab για να πάμε στο πλαίσιο κειμένου total της φόρμας ή κάνουμε κλικ μέσα του με το

ποντίκι, θα κληθεί ο χειριστής συμβάντων onfocus, ο οποίος θα καλέσει με τη σειρά του τη συνάρτηση runTotal() και θα

υπολογισθεί και θα εμφανισθεί το άθροισμα στο πλαίσιο κειμένου.

Η συνάρτηση parseFloat() δέχεται σαν είσοδο μια στοιχειοσειρά, αφαιρεί τα γράμματα και κρατάει μόνο τα ψηφία που περιέχει,

επιστρέφοντας έτσι έναν δεκαδικό αριθμό. Υπάρχει και η αντίστοιχη συνάρτηση parseInt(), που επιστρέφει έναν ακέραιο

αριθμό.

Η συνάρτηση runTotal() διαβάζει τις τιμές από δύο πλαίσια κειμένου μιας φόρμας και τοποθετεί το άθροισμά τους σ’ ένα

τρίτο πλαίσιο κειμένου στην ίδια φόρμα. </p>

</body>

</html>

125. Το Συμβάν OnLoad

<html>

<head>

function confirmEntry() {

if (confirm("Πατήστε ΟΚ για να πάτε σ’ άλλη σελίδα")) {

location = "page01.html";

} // end if

} // end function

</script>

</head>

<p> Το συμβάν onload κάνει τον φυλλομετρητή να εκτελέσει ένα σενάριο όταν έχει ολοκληρωθεί η φόρτωση της ιστοσελίδας. Ο

χειριστής αυτός μπορεί να τοποθετηθεί μόνο στις ετικέτες body και frameset. Μια συνηθισμένη χρήση του χειριστή αυτού είναι

για να εμφανίζουμε ένα εισαγωγικό μήνυμα, όπως στο παράδειγμά μας.

Η συνάρτηση confirmEntry() χρησιμοποιεί μια εντολή if για να εμφανίσει ένα πλαίσιο διαλόγου επιβεβαίωσης confirm μ’ ένα

σχετικό μήνυμα. Αν κάνουμε κλικ στο πλήκτρο ΟΚ, η εντολή confirm() θα επιστρέψει τιμή true, θα εκτελεστεί η εντολή

location και θα πάμε σε μια άλλη ιστοσελίδα. Αν, όμως, κάνουμε κλικ στο πλήκτρο Cancel, η εντολή confirm() θα επιστρέψει τιμή

false και δεν θα γίνει τίποτα. </p>

</body>

</html>

126. Το Συμβάν OnSelect

<html>

<body>

<form>

</form>

<p> Το συμβάν onselect κάνει τον φυλλομετρητή να εκτελεί ένα σενάριο όταν επιλέγουμε κάποιο κείμενο σ’ ένα πεδίο κειμένου

(text) ή σε μια περιοχή κειμένου (textarea) μιας φόρμας. Η χρήση του πάντως είναι περιορισμένη. </p>

</body>

</html>

127. Το Συμβάν OnMouseOver

<html>

<head>

function confirmMove() {

if (confirm("Πατήστε ΟΚ για να πάτε σ’ άλλη σελίδα")) {

location = "page02.html"

} // end if

} // end function

</script>

</head>

<body>

<a hfer = "page01.html" onmouseover = "confirmMove()"> Κάντε κλικ εδώ <i>Μη!</i></a>

<p> To συμβάν onmouseover εκτελεί ένα σενάριο όταν τοποθετούμε τον δείκτη του ποντικιού πάνω από ένα αντικείμενο και

χρησιμοποιείται συνήθως για να εμφανίζουμε μηνύματα στη γραμμή κατάστασης.

Εδώ όταν τοποθετήσουμε τον δείκτη του ποντικιού πάνω από τον σύνδεσμο, θα εμφανισθεί ένα πλαίσιο διαλόγου

επιβεβαίωσης και αν κάνουμε κλικ στο πλήκτρο ΟΚ, θα φορτωθεί η σελίδα page02.html, ενώ αν κάνουμε κλικ στο

πλήκτρο Cancel, θα επιστρέψουμε στο τρέχον έγγραφο. </p>

</body>

</html>

128. Το Συμβάν OnUnLoad

<html>

<head>

function farewell() {

alert("Σας ευχαριστούμε για την επίσκεψή σας");

} // end function

</script>

</head>

<p> Το συμβάν onunload κάνει τον φυλλομετρητή να εκτελέσει ένα σενάριο όταν φύγουμε από την τρέχουσα ιστοσελίδα και

φορτώσουμε μια άλλη ιστοσελίδα. Ο χειριστής αυτός μπορεί να τοποθετηθεί μόνο στις ετικέτες body και frameset. </p>

</body>

</html>

129. Το Συμβάν OnSubmit

<html>

<head>

function testAge() {

var nAge = document.age.ageBox.value

if (nAge >= 18) {

if (nAge >= 100) {

alert("Γράψτε μια ηλικία μεταξύ 18 και 99")

return false

}

else {

return true

} // end if

}

else {

alert("Πρέπει να είστε άνω των 18")

return false

} // end if

} // end function

</script>

</head>

<body>

Γράψτε την ηλικία σας (πρέπει να είστε άνω των 18) : <br>

</form>

<p> Το συμβάν onsubmit εκτελεί ένα σενάριο όταν κάνουμε κλικ στο πλήκτρο Submit για να υποβάλλουμε μια φόρμα και

χρησιμοποιείται συνήθως για να μπορούμε να αξιολογήσουμε μια φόρμα.

Τοποθετείται στην ετικέτα form και όχι στην ετικέτα submit και όταν κάνουμε κλικ στο πλήκτρο Submit, εκτελείται το σενάριο

που είναι δηλωμένο στο onsubmit.

Στο παράδειγμά μας χρησιμοποιούμε τον χειριστή συμβάντων onsubmit για να στείλουμε τις τιμές που υπάρχουν στα στοιχεία

μιας φόρμας σε μια συνάρτηση, η οποία μπορεί να ελέγξει αν είναι σωστές. Αν δεν είναι σωστές οι τιμές, η φόρμα δεν θα τις

υποβάλλει.

Μόλις γράψουμε μια ηλικία στο πλαίσιο κειμένου ageBox και κάνουμε κλικ στο πλήκτρο Submit για να υποβάλλουμε τη

φόρμα, καλείται η συνάρτηση testAge(), η οποία ελέγχει αν η ηλικία είναι σωστή, στην ουσία αν είναι μεγαλύτερη ή ίση από 18

και μικρότερη ή ίση από 99. Αν ναι, τότε επιστρέφεται η τιμή true και υποβάλλεται η φόρμα, διαφορετικά επιστρέφεται η τιμή

false και δεν υποβάλλεται η φόρμα. </p>

</body>

</html>

130. Εφαρμογή σε JavaScript – Ημερομηνία Γέννησης

Η παρακάτω εφαρμογή δημιουργεί μια φόρμα όπου ζητάει να καταχωρήσουμε το επώνυμο, το όνομα καθώς και το έτος, τον μήνα και την ημέρα της γέννησής μας. Μετά, ελέγχει τα στοιχεία της ημερομηνίας για να βεβαιωθεί ότι είναι έγκυρα, ότι δεν έχουμε καταχωρήσει για παράδειγμα μήνα Α-πρίλιο και ημερομηνία 31.

<html>

<head>

// η συνάρτηση checkYear() ελέγχει αν το έτος γέννησης του

// χρήστη κυμαίνεται από 1850 έως 2004

function checkYear() {

a=document.Birthday.byear.value;

if (a<1850 || a>2004) {

alert("Γράψτε ένα έτος από 1850 έως 2004");

return false;

} // end if

} // end function checkYear()

// η συνάρτηση checkMonth() ελέγχει αν ο μήνας γέννησης του

// χρήστη κυμαίνεται από 1 έως 12

function checkMonth() {

b=document.Birthday.bmonth.value;

if (b>=1 && b<= 12) {

return true;

}

else {

alert("Γράψτε έναν μήνα από 1 έως 12");

return false;

} // end if

} // end function checkMonth()

// η συνάρτηση checkDay() ελέγχει την ημέρα γέννησης του

// χρήστη ανάλογα και με τον μήνα που έχει καταχωρήσει

function checkDay() {

b=document.Birthday.bmonth.value;

c=document.Birthday.bday.value;

// αν ο μήνας είναι ένας από εκείνους που έχουν

// 31 ημέρες

if (b==1 || b==3 || b==5 || b==7 || b==8 ||

b==10 || b==12) {

if (c>=1 && c<=31) {

return true;

}

else {

alert("Ο μήνας αυτός έχει 31 ημέρες");

return false;

} // end if

// αν ο μήνας είναι ένας από εκείνους που έχουν

// 30 ημέρες

if (b==4 || b==6 || b==9 || b==11) {

if (c>=1 && c<=30) {

return true;

}

else {

alert("Ο μήνας αυτός έχει 30 ημέρες");

return false;

} // end if

// ο Φεβρουάριος χρήζει ιδιαίτερης αντιμετώπισης

if (b==2) {

if (c>=1 && c<=29) {

return true;

}

else {

alert("Ο Φεβρουάριος έχει έως 29 ημέρες")

return false;

} // end if

} // end function checkDay()

</script>

</head>

<body>

Επώνυμο : <input type = "text" name = "Fname">

Όνομα : <input type = "text" name = "Lname"><br>

Έτος Γέννησης : <input type = "text" name = "byear" onchange = "checkYear()"><br>

Μήνας Γέννησης : <input type = "text" name = "bmonth" onchange = "checkMonth()"><br>

Ημέρα Γέννησης : <input type = "text" name = "bday" onchange = "checkDay()">

</form>

</body>

</html>

131. Εφαρμογή σε JavaScript – Δόσεις Δανείου

Η παρακάτω εφαρμογή δημιουργεί μια φόρμα όπου ζητάει να καταχωρήσουμε το ποσό ενός δανείου καθώς και το ετήσιο επιτόκιο και το πλήθος των ετών αποπληρωμής. Η εφαρμογή υπολογίζει και εμφανίζει τη μηνιαία δόση, το συνολικό ποσό πληρωμής καθώς και τους τόκους.

<html>

<head>

<title> Υπολογισμός Δόσεων Δανείου </title>

</head>

<body>

<b><i> Γράψτε τα Στοιχεία του Δανείου : </i></b>

<br>

Ποσό Δανείου : <input type = "text" name = "principal" size=12 onchange = "calculate()"><br>

Επιτόκιο : <input type = "text" name = "interest" size = 12 onchange = "calculate()"><br>

Έτη Αποπληρωμής : <input type = "text" name="years" size=12 onchange = "calculate()"><br><br>

<br>

<b><i> Στοιχεία Αποπληρωμής του Δανείου : </i></b>

<br>

Μηνιαία Δόση : <input type = "text" name = "payment" size=12>

<br>

Ποσό Πληρωμής : <input type = "text" name = "total" size=12>

<br>

Ποσό Τόκων: <input type = "text" name ="totalinterest" size=12>

</form>

</body>

function calculate() {

// μετατρέπουμε το επιτόκιο σε δεκαδικό αριθμό και από

// ετήσια σε μηναία αναλογία και υπολογίζουμε τους

// μήνες αποπληρωμής του δανείου

var principal = document.loandata.principal.value;

var interest = document.loandata.interest.value / 100 / 12;

var payments = document.loandata.years.value * 12;

// υπολογίζουμε το μηνιαίο ποσό των δόσεων

var x = Math.pow(1+interest, payments);

var monthly = (principal * x * interest) / (x - 1);

// υπολογίζουμε και στρογγυλοποιούμε τα στοιχεία του

// δανείου

document.loandata.payment.value =

Math.round(monthly);

document.loandata.total.value =

Math.round(monthly * payments);

document.loandata.totalinterest.value =

Math.round((monthly* payments) - principal);

}

</script>

</html>

132. Έλεγχος Συγκεκριμένων Χαρακτήρων

<html>

<head>

function check(input) {

// το string valid περιέχει όλους τους έγκυρους χαρακτήρες

var valid = "1234567890/- ";

// η λογική μεταβλητή found θα έχει τιμή true ή false

var found = true;

// ελέγχουμε όλους τους χαρακτήρες του πεδίου κειμένου

for (var i = 0; i < input.length; i++) {

// η μέθοδος charAt(i) επιστρέφει τον χαρακτήρα από τη

// θέση i ενός string

var chr = input.charAt(i);

// ελέγχουμε αν ο chr ανήκει στο string valid

// και αν δεν ανήκει θέτουμε found=false

if (valid.indexOf(chr)==-1) {

found = false;

alert("Input not ok!");

return

} // end if

} // end for

// αν το found παρέμεινε αμετάβλητο, τότε όλοι οι χαρακτήρες

// που καταχώρισε ο χρήστης θα είναι ΟΚ

if (found) {

alert("Input ok!");

}

else {

alert("Input not ok!");

} // end if

return;

} // end function check()

</script>

</head>

<body>

<form>

Γράψτε τον αριθμό του τηλεφώνου σας : <input type="text" name="telephone" value="">

</form>

<p> Μερικές φορές θέλουμε να περιορίσουμε τις καταχωρήσεις μιας φόρμας σε συγκεκριμένους χαρακτήρες ή ψηφία. Εδώ έχουμε

ένα παράδειγμα ελέγχου ενός τηλεφωνικού αριθμού, δηλ. αν περιέχει μόνο αριθμητικά ψηφία ή και τα σύμβολα (‘/’, ‘-‘, ‘ ‘).

Η συνάρτηση check() δέχεται σαν είσοδο την καταχώριση του χρήστη από το πεδίο κειμένου της φόρμας και επιστρέφει την

τιμή true αν όλοι οι χαρακτήρες είναι έγκυροι (valid) ή την τιμή false αν έστω και ένας χαρακτήρας δεν είναι έγκυρος. </p>

</body>

</html>

133. Παράδειγμα με τον Τριαδικό Τελεστή Σύγκρισης

<html>

<head>

<title> Ο Τριαδικός Τελεστής Σύγκρισης </title>

</head>

<body>

var lexeis = prompt("Πόσες λέξεις βρήκατε;", "");

document.write("Βρήκατε : " + lexeis +((lexeis==1) ? " λέξη." : " λέξεις."));

</script>

<p> Μπορούμε να χρησιμοποιήσουμε τον τριαδικό τελεστή σύγκρισης για να έχουμε μια πολύ σύντομη μορφή της εντολής if … else.

</p>

</body>

</html>

134. Παράδειγμα με την Εντολή Switch

<html>

<head>

<title> Μετάβαση στην Ιστοσελίδα μιας Πόλης </title>

</head>

<body>

city = prompt("Καταχωρήστε μια πόλη", "");

switch (city) {

case "grevena" :

window.location="www.grevena.html";break;

case "kozani" :

window.location="www.kozani.html";break;

case "kastoria" :

window.location="www.kastoria.html";break;

case "florina" :

window.location="www.florina.html";break;

default :

window.location="www.greece.html";

} // end switch

</script>

<p> Χρησιμοποιούμε την εντολή switch για να κατευθύνουμε τον χρήστη στην ιστοσελίδα μιας πόλης που επέλεξε ο ίδιος.

Η επιλογή της πόλης θα γίνεται μ’ ένα πλαίσιο προτροπής prompt.

</p>

</body>

</html>

135. Εφαρμογή με Πίνακες και Βρόχους

<html>

<head>

<title> Παράδειγμα με Πίνακες και Βρόχους </title>

</head>

<body>

<h1> Παράδειγμα με Πίνακες και Βρόχους </h1>

<p> Καταχωρήστε ονόματα και πατήστε Cancel για έξoδο </p>

names = new Array();

i=0;

do {

next = prompt("Καταχωρήστε ένα όνομα");

if (next>" " && next != "undefined") names[i]=next;

i++;

} while (next>" " && next != "undefined");

document.write("<h2>"+names.length+" ονόματα δόθηκαν.</h2> ");

document.write("<ol>") ;

for (i in names) {

document.write("<li>"+names[i]+ "<br>") ;

} // end for

document.write("</ol>") ;

</script>

<p> Η εφαρμογή αυτή ζητά από τον χρήστη να καταχωρήσει κάποια ονόματα σ’ ένα πλαίσιο προτροπής prompt. Τα ονόματα θα

καταχωρούνται σ’ έναν πίνακα και μετά θα εμφανίζονται με τη σειρά καταχώρησής τους σε μια αριθμημένη λίστα.

Ο χρήστης θα μπορεί να καταχωρεί συνέχεια ονόματα και ο βρόχος θα σταματήσει είτε όταν δεν γράψει κάτι ο χρήστης,

οπότε θα καταχωρηθεί το προεπιλεγμένο κείμενο undefined της εντολής prompt(), ή κάνει κλικ στο πλήκτρο Άκυρο (Cancel).

</p>

</body>

</html>

136. Ο Βρόχος For … In

<html>

<head>

<title> Ο Βρόχος for … in </title>

</head>

<body>

<h1> Παράδειγμα με την εντολή for … in </h1>

i=0;

for (i in navigator) {

document.write("Ιδιότητα : "+i+"<br>");

document.write("Τιμή : "+navigator[i]+ "<br><br>");

} // end for

</script>

<p> Ο βρόχος for … in χρησιμοποιείται για να εκτελούμε μια συγκεκριμένη λειτουργία για κάθε ιδιότητα ενός αντικειμένου.

Το παράδειγμα αυτό εμφανίζει τις ιδιότητες του αντικειμένου navigator.

Σε κάθε επανάληψη του βρόχου, η μεταβλητή i λαμβάνει τιμή ίση με την επόμενη ιδιότητα του αντικειμένου με το οποίο τη

συσχετίσαμε. Παρατηρούμε ότι στην ουσία οι ιδιότητες των αντικειμένων είναι καταχωρημένες σε πίνακες για ευκολότερη

πρόσβαση.

</p>

</body>

</html>

137. Το While (true) και η Εντολή Break

<html>

<head>

<title> Το While (true) και η Εντολή Break </title>

</head>

<body>

while (true) {

var number = prompt("Δώστε έναν αριθμό – 0 για έξοδο", "");

if (number==0) break;

} // end while

</script>

<p> Αν και φαινομενικά ο παραπάνω βρόχος δεν θα τερματίσει ποτέ, γιατί η συνθήκη του είναι πάντα αληθής, χρησιμοποιούμε την

εντολή break για έξοδο από τον βρόχο.

</p>

</body>

</html>

138. Η Λέξη Κλειδί With

<html>

<head>

<title> Η Λέξη Κλειδί With </title>

</head>

<body>

var name = prompt("Δώστε ένα όνομα", "");

with (name) {

window.alert("Πλήθος γραμμάτων : " + length);

window.alert("Το όνομα με πεζά : " + toLowerCase());

} // end with

</script>

<p> Με τη λέξη κλειδί with μπορούμε να προσδιορίσουμε ένα αντικείμενο και ακολουθείται από ένα μπλοκ εντολών ανάμεσα

στα σύμβολα { και }. Αυτό σημαίνει ότι οπουδήποτε μέσα σ’ αυτό το μπλοκ των εντολών υπάρχουν αναφορές σε ιδιότητες

χωρίς σαφή καθορισμό αντικειμένου, θα εννοείται αναφορά στο εν λόγω αντικείμενο, χωρίς να είμαστε έτσι αναγκασμένοι να

γράφουμε κάθε φορά την ίδια μεταβλητή του αντικειμέου. Στο παραπάνω παράδειγμα, η ιδιότητα length και η μέθοδος

toLowerCase() αναφέρονται στη συμβολοσειρά name.

</p>

</body>

</html>

139. Στρογγυλοποίηση Αριθμού σε Δύο Δεκαδικά Ψηφία

<html>

<head>

<title> Στρογγυλοποίηση Αριθμού σε Δύο Δεκαδικά Ψηφία </title>

</head>

<body>

var num = prompt("Δώστε έναν αριθμό", "");

num = Math.round(num * 100)/100;

window.alert("Στρογγυλοποιημένος σε 2 δεκαδικά : " + num);

</script>

<p> Με τη μέθοδο round() του αντικειμένου Math μπορούμε να στρογγυλοποιήσουμε έναν αριθμό στον πλησιέστερό του ακέραιο

αριθμό, αλλά με κατάλληλες τεχνικές μπορούμε να τον στρογγυλοποιήσουμε σε δύο ή και περισσότερα δεκαδικά

ψηφία.

</p>

</body>

</html>

140. Στρογγυλοποίηση Αριθμού σε Δύο Μηδενικά

<html>

<head>

<title> Στρογγυλοποήση Αριθμού σε Δύο Μηδενικά </title>

</head>

<body>

var num = prompt("Δώστε έναν αριθμό", "");

num = Math.round(num / 100)*100;

window.alert("Στρογγυλοποιημένος στο 100 : " + num);

</script>

αριθμό, αλλά με κατάλληλες τεχνικές μπορούμε να τον στρογγυλοποιήσουμε σε δύο ή και περισσότερα μηδενικά.

</p>

</body>

</html>

141. Υπολογισμός Μέσου Όρου Τυχαίων Αριθμών

<html>

<head>

<title> Υπολογισμός Μέσου Όρου Τυχαίων Αριθμών </title>

</head>

<body>

<h1> Παράδειγμα με Υπολογισμό Μέσου Όρου </h1>

sum = 0; // μηδενισμός του αθροιστή

for (i=0; i<10000; i++) {

num = Math.random(); // δημιουργία τυχαίου αριθμού

sum += num; // πρόσθεση στον αθροιστή

// εμφάνιση προοδευτικού μηνύματος στη γραμμή κατάστασης

window.status = "Είναι ο " + i + "ος αριθμός";

} // end for

mo = sum / 10000; // υπολογισμός του μέσου όρου

// στρογγυλοποίηση του μέσου όρου με 3 δεκαδικά ψηφία

mo = Math.round(mo * 1000) / 1000;

document.write("<h2> Μέσος όρος 10.000 τυχαίων αριθμών : " + mo+"</h2> ");

</script>

<p> Με τη μέθοδο random() του αντικειμένου Math παράγουμε πάρα πολλούς τυχαίους αριθμούς, 10.000 για παράδειγμα, και

υπολογίζουμε τον μέσο όρο τους. Αν ο μέσος όρος πλησιάζει στον αριθμό 0.5, αυτό θα σημαίνει ότι

η μέθοδος random() του αντικειμένου Math θα παράγει πράγματι τυχαίους αριθμούς με ισοκατανομή ανάμεσα στο 0 και

το 1. </p>

</body></html>

142. Δημιουργία Πλήκτρων Μπρος & Πίσω

<html>

<head>

<title> Πλοήγηση με Γραφικά Πλήκτρα Back και Forward </title>

</head>

<body>

<h1> Πλήκτρα Back και Forward </h1>

<hr>

<hr>

<p> Δημιουργούμε δύο πλήκτρα που κάνουν την ίδια δουλειά που κάνουν και τα πλήκτρα Μπροστά (Forward) και Πίσω (Back)

του φυλλομετρητή. Ο χρήστης θα μπορεί να κάνει κλικ σ’ αντίστοιχες εικόνες για τις λειτουργίες Μπροστά (Forward) και

Πίσω (Back).

Παρατηρούμε ότι δεν χρησιμοποιούμε καθόλου τις ετικέτες script, αλλά μόνο δύο εντολές της JavaScript.

</p>

</body>

</html>

143. Προσαρμογή Ενσωματωμένων Αντικειμένων

<html>

<head>

<title> Προσθήκη Μεθόδου στο Αντικείμενο String </title>

</head>

<body>

function addhead(level) {

// το html θα έχει τιμές από h1 έως h6

html = "h" + level;

text = this.toString();

start = "<" + html + ">"; // tag π.χ. <h1>

stop = "</" + html + ">"; // tag π.χ. </h1>

// η τιμή επιστροφής θα είναι της μορφής <h1>κείμενο</h1>

return start + text + stop;

} // end function

// προσθήκη της νέας μεθόδου heading() στο αντικείμενο String

String.prototype.heading = addhead;

// κλήση της νέας μεθόδου heading() με διαφορετικά ορίσματα

document.write("Florina per sempre".heading(2));

document.write("Kozani".heading(3));

</script>

<p> Στην JavaScript έχουμε τη δυνατότητα να ορίσουμε δικές μας μεθόδους για τα ενσωματωμένα αντικείμενα, εκτός από τις ήδη

υπάρχουσες. Με τη λέξη κλειδί prototype μπορούμε να αλλάξουμε τον ορισμό ενός αντικειμένου έξω από την αντίστοιχη

συνάρτηση δημιουργίας του.

Για να γίνει κατανοητός ο τρόπος δημιουργίας μιας νέας μεθόδου για το αντικείμενο String, για παράδειγμα,

μετατρέπουμε μια συμβολοσειρά ώστε να γίνει μέρος της επικεφαλίδας του HTML κώδικα, δηλ. από το h1 έως το h6.

Η μέθοδος που δημιουργούμε και ενσωματώνουμε στο αντικείμενο String αποκαλείται heading() και δέχεται μία

παράμετρο, δηλ. έναν ακέραιο αριθμό από 1 έως 6, για να μπορούμε να ξέρουμε ποια επικεφαλίδα (heading) του HTML

κώδικα θέλει ο χρήστης.

</p>

</body>

</html>

144. Αποθήκευση Δεδομένων σε Αντικείμενα

<html>

<head>

<title> Παράδειγμα με Προσαρμοσμένα Αντικείμενα </title>

// δημιουργία της μεθόδου του αντικειμένου

function PrintCard() {

line1 = "<b>Όνομα : </b>" + this.name + "<br>\n";

line2 = "<b>Διεύθυνση : </b>" + this.address + "<br>\n";

line3 = "<b>Τηλέφωνο Εργασίας : </b>" + this.workphone +

"<br>\n";

line4 = "<b>Τηλέφωνο Οικίας : </b>" + this.homephone +

"<hr>\n";

document.write(line1, line2, line3, line4);

} // end function

// ορισμός (δημιουργία) του νέου αντικειμένου

function Card(name, address, workphone, homephone) {

this.name = name;

this.address = address;

this.workphone = workphone;

this.homephone = homephone;

this.PrintCard = PrintCard;

} // end function

</script>

</head>

<body>

<h1> Δημιουργία και Εμφάνιση Στοιχείων Πελατών </h1>

// δημιουργία τριών στιγμιοτύπων για το αντικείμενο Card

Petros = new Card("Αντωνιάδης Πέτρος", "Στ. Δραγούμη 10", "2385077777", "2385088888");

Antonis = new Card("Γεωργιάδης Αντώνης", "Δημ. Καλλέργη 20", "2385066666", "2385099999");

Christos = new Card("Γεωργιάδης Χρήστος", "Βογατσικού 30", "2385155555", "2385144444");

// εκτύπωση των στοιχείων των τριών στιγμιοτύπων

Petros.PrintCard();

Antonis.PrintCard();

Christos.PrintCard();

</script>

<p> Δημιουργούμε ένα νέο αντικείμενο με όνομα Card και μια μέθοδό του. Μετά δημιουργούμε τρία στιγμιότυπά του όπου

καταχωρούμε αντίστοιχες τιμές στις ιδιότητές τους και τέλος εκτυπώνουμε (εμφανίζουμε) τις τιμές των ιδιοτήτων των τριών

αυτών αντικειμένων μέσα από τον κώδικα της ιστοσελίδας.

<p>

</body>

</html>

145. Το Χειριστήριο Συμβάντος OnClick – 1

<html>

<head>

<title> Το Χειριστήριο Συμβάντος OnClick </title>

</head>

<body>

Κάντε κλικ εδώ για να πάτε στην ιστοσελίδα της Φλώρινας

</a>

<p> Το χειριστήριο συμβάντος onClick λαμβάνει χώρα όταν κάνουμε κλικ με το ποντίκι σ’ ένα αντικείμενο. Εδώ εμφανίζει ένα

προειδοποιητικό μήνυμα σ’ ένα alert box όταν κάνουμε κλικ στο κείμενο της σύνδεσης.

Στην περίπτωση αυτή το χειριστήριο συμβάντος onClick καλείται πριν φορτωθεί η συνδεδεμένη ιστοσελίδα στον

φυλλομετρητή μας και μπορούμε έτσι να εμφανίσουμε μια προειδοποίηση προς τον χρήστη.

</p>

</body>

</html>

146. Το Χειριστήριο Συμβάντος OnClick – 2

<html>

<head>

<title> Το Χειριστήριο Συμβάντος OnClick </title>

</head>

<body>

Κάντε κλικ εδώ για να πάτε στην ιστοσελίδα της Φλώρινας

</a>

confirm box όταν κάνουμε κλικ στο κείμενο της σύνδεσης. Στην περίπτωση αυτή το χειριστήριο συμβάντος onClick καλείται πριν

φορτωθεί η συνδεδεμένη ιστοσελίδα στον φυλλομετρητή μας.

Αν κάνουμε κλικ στο πλήκτρο Cancel του confirm box θα επιστραφεί η τιμή false και η σύνδεση δεν θα ακολουθηθεί ενώ

αν κάνουμε κλικ στο πλήκτρο OK του confirm box θα επιστραφεί η τιμή true και η σύνδεση θα ακολουθηθεί κανονικά.

</p>

</body>

</html>

147. Προσθήκη Περιγραφών Σύνδεσης

<html>

<head>

<title> Προσθήκη Περιγραφών Σύνδεσης </title>

// εμφανίζει ένα μήνυμα στη γραμμή κατάστασης

// η εντολή return true χρησιμοποιείται για να συνεχίζει να

// εμφανίζεται το μήνυμα στη γραμμή κατάστασης και να μην

// αντικατασταθεί από την προβολή της διεύθυνσης URL

function definestatus(text) {

window.status = text;

return true;

} // end function definestatus()

// απαλείφει το μήνυμα της γραμμής κατάστασης

function clearstatus() {

window.status = "";

} // end function clearstatus()

</script>

</head>

<body>

<h1> Δημιουργία Περιγραφικών Συνδέσεων </h1>

<p> Μετακινείστε τον δείκτη του ποντικιού πάνω από κάθε σύνδεσμο για να δείτε χρήσιμες πληροφορίες για τον κάθε Νομό </p>

<a href="Kastoria.html"

onMouseOver="definestatus(‘Λίμνη-Γούνα’);return true;"

onMouseOut="clearstatus();">

Νομός Καστοριάς </a><br>

<a href="Kozan.html"

onMouseOver="definestatus(‘Λαογραφικό Μουσείο’);return true;"

onMouseOut="clearstatus();">

Νομός Κοζάνης </a><br>

<a href="Grevena.html"

onMouseOver="definestatus(‘Βασιλίτσα’);return true;"

onMouseOut="clearstatus();">

Νομός Γρεβενών </a><br>

<a href="Florina.html"

onMouseOver="definestatus(‘Πρέσπες-Νυμφαίο’);return true;"

onMouseOut="clearstatus();">

Νομός Φλώρινας </a><br>

<p> Η εφαρμογή αυτή περιλαμβάνει τέσσερις συνδέσμους (links) προς τους τέσσερις νομούς της Δυτικής Μακεδονίας, όπου όταν

μετακινούμε τον δείκτη του ποντικιού πάνω από τον κάθε σύνδεσμο, εμφανίζονται χρήσιμες πληροφορίες στη γραμμή

κατάστασης, οι οποίες απαλείφονται μόλις απομακρύνουμε τον δείκτη του ποντικιού από τον κάθε σύνδεσμο.

</p>

</body>

</html>

148. Άνοιγμα και Κλείσιμο Παραθύρων

<html>

<head>

<title> Άνοιγμα και Κλείσιμο Παραθύρων </title>

</head>

<body>

<h1> Ανοίξτε και Κλείστε Παράθυρα </h1>

<input type="button" value="Άνοιγμα Παραθύρου" onClick="NewWindow=window.open('', 'NewWindow',

'width=100, height=50, toolbar=yes, status=yes');">

</form>

<p> Η εφαρμογή αυτή περιέχει τρία πλήκτρα εντολής (command buttons), όπου το πρώτο ανοίγει ένα καινούργιο παράθυρο, το

δεύτερο το κλείνει και το τρίτο προσπαθεί να κλείσει το κύριο παράθυρο του φυλλομετρητή.

Για το κλείσιμο του κύριου παραθύρου του φυλλομετρητή, εμφανίζεται ένα πλαίσιο διαλόγου επιβεβαίωσης (confirm box)

όπου ερωτόμαστε αν θέλουμε να κλείσουμε αυτό το παράθυρο ή όχι.

</p>

</body>

</html>

149. Μετρητής και Διακοπή Χρόνου

<html>

<head>

<title> Εφαρμογή με Διακοπή Χρόνου </title>

var counter = 0;

// καλούμε τη συνάρτηση Update() 2 δευτερόλεπτα

// μετά τη φόρτωση της ιστοσελίδας

id = window.setTimeout("Update()", 2000);

function Update() {

counter++;

window.status = "Ο μετρητής έχει τιμή : " + counter;

document.myform.myinput.value="Ο μετρητής έχει τιμή : " + counter;

id = window.setTimeout("Update()", 2000);

} // end function

</script>

</head>

<body>

<h1> Έλεγχος Μετρητή </h1><br>

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

</p>

<p> Μπορείτε να κάνετε κλικ στο πλήκτρο ΜΗΔΕΝΙΣΜΟΣ για να μηδενίσετε τον μετρητή ή στο πλήκτρο ΣΤΑΜΑΤΗΜΑ για να τον

σταματήσετε.

</p>

</form>

<p> Η εφαρμογή αυτή ενημερώνει έναν μετρητή κάθε δύο δευτερόλεπτα και εμφανίζει την τιμή του σ’ ένα πεδίο κειμένου

μιας φόρμας και στη γραμμή κατάστασης του φυλλομετρητή. Η φόρμα περιέχει ακόμα ένα πλήκτρο εντολής για τον

μηδενισμό (reset) του μετρητή και ένα άλλο πλήκτρο εντολής για το σταμάτημα (stop) της λειτουργίας της διακοπής χρόνου.

</p>

</body>

</html>

150. Τα Παράθυρα Διαλόγου

<html>

<head>

<title>Παράθυρα Διαλόγου alert(), confirmation() & prompt()</title>

</head>

<body>

<h1> alert(), confirmation() & prompt() </h1><br>

<p> Μπορείτε να κάνετε κλικ στα παρακάτω πλήκτρα εντολής για να δείτε τα αντίστοιχα παράθυρα διαλόγου.

</p>

<input type="button" value="Confirm Box" onClick="temp=window.confirm(‘Πείτε Ναι ή Όχι’);"

window.status=(temp)?'confirm:true':'confirm:false';">

<input type="button" value="Prompt Box"

onClick="temp=window.prompt('Γράψτε κάτι : ', 'Φλώρινα');"

window.status=temp;">

</form>

<p> Η εφαρμογή αυτή περιέχει μια φόρμα με τρία πλήκτρα εντολής για την εμφάνιση αντίστοιχα ενός παραθύρου διαλόγου

προειδοποίησης, ενός παραθύρου διαλόγου επιβεβαίωσης και ενός παραθύρου διαλόγου προτροπής.

</p>

</body>

</html>

151. Δημιουργία Πλαισίου Πλοήγησης

Ο κώδικας HTML για την ιστοσελίδα main.html :

<html>

<head>

<title> Παράδειγμα Πλοήγησης με Πλαίσια (Frames) </title>

</head>

</frameset>

</html>

Και ο κώδικας HTML για την ιστοσελίδα left.html :

<html>

<head>

<title> Το Αριστερό Πλαίσιο Πλοήγησης </title>

</head>

<body>

<h1> Οι Τέσσερις Νομοί της Δυτικής Μακεδονίας </h1><br>

<p> Μπορείτε να κάνετε κλικ στους παρακάτω συνδέσμους για να δείτε πληροφορίες για την ιστορία και τον τουρισμό του κάθε

νομού στο δεξί και το αριστερό πλαίσιο αντίστοιχα.

</p>

<a href="#" onClick="parent.right.location=’gre_history.html’;

window.location=’gre_tourism.html’;">

Νομός Γρεβενών </a>

<br>

<a href="#" onClick="parent.right.location=’kas_history.html’;

window.location=’kas_tourism.html’;">

Νομός Καστοριάς </a>

<br>

<a href="#" onClick="parent.right.location=’koz_history.html’;

window.location=’koz_tourism.html’;">

Νομός Κοζάνης </a>

<br>

<a href="#" onClick="parent.right.location=’flo_history.html’;

window.location=’flo_tourism.html’;">

Νομός Φλώρινας</a>

<br>

<p> Η εφαρμογή αυτή περιέχει δύο κατακόρυφα πλαίσια, όπου στο αριστερό πλαίσιο υπάρχουν τέσσερις σύνδεσμοι (links), όπου με

το κλικ σ’ έναν απ’ αυτούς φορτώνεται μια ιστοσελίδα στο δεξί πλαίσιο και μια άλλη ιστοσελίδα στο τρέχον (αριστερό) πλαίσιο.

Επειδή χρειάζεται να φορτώσουμε δύο σελίδες ταυτόχρονα, η JavaScript είναι απαραίτητη, αλλιώς αν θέλαμε να φορτώσουμε

μία μόνο σελίδα στο άλλο πλαίσιο, θα μπορούσαμε να χρησιμοποιήσουμε την ιδιότητα target του tag <a>. Με τη χρήση

της JavaScript μπορούμε να φορτώσουμε ιστοσελίδες σε δύο πλαίσια ταυτόχρονα.

Θα πρέπει να δημιουργήσουμε δύο ιστοσελίδες, τη μια με όνομα main.html και την άλλη με όνομα left.html. Το δεξί πλαίσιο

αρχικά θα είναι κενό και έτσι δεν θα χρειασθεί να δημιουργήσουμε μια ιστοσελίδα και γι’ αυτό.

Η ιστοσελίδα left.html θα περιέχει τέσσερις συνδέσμους για τους τέσσερις νομούς της Δυτικής Μακεδονίας και με το κλικ σ’ έναν

απ’ αυτούς θα εμφανίζεται μια ιστοσελίδα σχετικά με την ιστορία του αντίστοιχου νομού στο δεξί πλαίσιο και μια άλλη

ιστοσελίδα σχετικά με τα τουριστικά αξιοθέατα του ίδιου νομού στο τρέχον (αριστερό) πλαίσιο.

</p>

</body>

</html>

152. Εμφάνιση των Δεδομένων Φόρμας σε Παράθυρο

<html>

<head>

<title> Εμφάνιση Δεδομένων Φόρμας σε Παράθυρο </title>

function display() {

DisplayWindow = window.open(‘’, ‘NewWindow’, ‘toolbar=no, status=no, width=300, height=300’);

message = "<ul><li><b>Όνομα : </b>" + document.MyForm.name.value;

message += "<li><b>Διεύθυνση : </b>" + document.MyForm.address.value;

message += "<li><b>Τηλέφωνο : </b>" + document.MyForm.phone.value + "</ul>";

DisplayWindow.document.write(message);

} // end function

</script>

</head>

<body>

<h1> Εμφάνιση Δεδομένων Φόρμας σε Παράθυρο </h1>

<p> Καταχωρήστε τα στοιχεία σας στα πεδία της φόρμας και κάντε κλικ στο πλήτρο εντολής Εμφάνιση για να τα δείτε να

εμφανίζονται σ’ ένα αναδυόμενο παράθυρο.

</p>

<p>

Όνομα : <input type="text" name="name" length="20">

</p><p>

Διεύθυνση : <input type="text" name="address" length="30">

</p><p>

Τηλέφωνο : <input type="text" name="phone" length="10">

</p><p>

</p>

</form>

<p> Στην εφαρμογή αυτή θα μπορούμε να καταχωρούμε σε μια φόρμα στοιχεία όπως όνομα, διεύθυνση και τηλέφωνο και με

κλικ σ’ ένα πλήκτρο εντολής, τα στοιχεία αυτά θα εμφανίζονται σ’ ένα αναδυόμενο παράθυρο.

</p>

</body>

</html>

153. Αποστολή των Δεδομένων Φόρμας με E-Mail

<html>

<head>

<title> Αποστολή Δεδομένων Φόρμας με e-mail </title>

</head>

<body>

<h1> Αποστολή Δεδομένων Φόρμας με e-mail </h1>

<p> Καταχωρήστε τα στοιχεία σας στα πεδία της φόρμας και κάντε κλικ στο πλήκτρο εντολής Αποστολή για να σταλούν με e-mail.

</p>

<p>

Όνομα : <input type="text" name="name" length="20">

</p><p>

Διεύθυνση : <input type="text" name="address" length="30">

</p><p>

Τηλέφωνο : <input type="text" name="phone" length="10">

</p><p>

</p>

</form>

<p> Με την εφαρμογή αυτή μπορούμε να στείλουμε τα δεδομένα μιας φόρμας με ηλεκτρονικό ταχυδρομείο (e-mail). Γι’ αυτή τη

δουλειά δεν θα χρειασθεί βέβαια καθόλου κώδικας σε JavaScript, αν και θα μπορούσε να χρησιμοποιηθεί για την

επικύρωση των δεδομένων της φόρμας.

Για να μπορέσουμε να στείλουμε με e-mail τα δεδομένα μιας φόρμας, θα πρέπει να χρησιμοποιήσουμε την ενέργεια mailto:

στην ιδιότητα action της φόρμας.

</p>

</body>

</html>

154. Επικύρωση και Αποστολή των Δεδομένων Φόρμας

<html>

<head>

<title> Επικύρωση και Αποστολή Δεδομένων Φόρμας </title>

function validate() {

if (document.MyForm.name.value.length < 1) {

alert("Προσοχή! Λάθος όνομα");

return false;

} // end if

if (document.MyForm.address.value.length < 3) {

alert("Προσοχή! Λάθος διεύθυνση");

return false;

} // end if

if (document.MyForm.phone.value.length != 10) {

alert("Προσοχή! Λάθος τηλέφωνο – Γράψτε 10 ψηφία");

return false;

} // end if

return true;

} // end function

</script>

</head>

<body>

<h1> Επικύρωση και Αποστολή Δεδομένων Φόρμας </h1>

<p> Καταχωρήστε τα στοιχεία σας στα πεδία της φόρμας και κάντε κλικ στο πλήκτρο εντολής Αποστολή για να επικυρωθούν και αν

είναι σωστά να σταλούν με e-mail.

</p>

<p>

Όνομα : <input type="text" name="name" length="20">

</p><p>

Διεύθυνση : <input type="text" name="address" length="30">

</p><p>

Τηλέφωνο : <input type="text" name="phone" length="10">

</p><p>

</p>

</form>

<p> Στην εφαρμογή αυτή κάνουμε επικύρωση των καταχωρήσεων στα πεδία μιας φόρμας. Στην ουσία ελέγχουμε με μια συνάρτηση τα

μήκη των πεδίων κειμένου της φόρμας. Όταν ο χρήστης κάνει κλικ στο πλήκτρο υποβολής για να

υποβάλει τη φόρμα, καλείται η συνάρτηση validate() από το χειριστήριο συμβάντος onSubmit, η οποία επιστρέφει τιμή true ή

false. Αν επιστρέψει τιμή true, η φόρμα θα υποβληθεί κανονικά, ενώ αν επιστρέψει τιμή false, η φόρμα δεν θα υποβληθεί. </p>

</body>

</html>

155. Οι Χάρτες Εικόνων στην JavaScript

<html>

<head>

<title> Παράδειγμα με Χάρτη Εικόνας (Image Map) </title>

function update(nomos) {

document.MyForm.text.value = nomos ;

} // end function

</script>

</head>

<body>

<h1> Οι Χάρτες Εικόνων στην JavaScript </h1>

<p> Σ’ αυτή την εικόνα παρουσιάζεται ο χάρτης της Περιφέρειας

Δυτικής Μακεδονίας, τον οποίο έχουμε διαιρέσει με βάση τους 4

Νομούς της Περιφέρειας. Αν μετακινήσετε τον δείκτη του

ποντικιού πάνω από έναν Νομό, θα δείτε σχετικές πληροφορίες

στη γραμμή κατάστασης, ενώ αν κάνετε κλικ σε κάποιον Νομό,

θα εμφανισθεί ένα σχετικό κείμενο στο πεδίο κειμένου.

</p>

<hr>

<area shape=rect coords="14, 15, 150, 90"

href="javascript:update('Γρεβενά');"

onMouseOver="window.status='Νομός Γρεβενών';return true;">

<area shape=rect coords="160, 16, 280, 85"

href="javascript:update('Καστοριά');"

onMouseOver="window.status='ΝομόςΚαστοριάς';return true;">

<area shape=rect coords="290, 15, 390, 90"

href="javascript:update('Κοζάνη');"

onMouseOver="window.status='Νομός Κοζάνης';return true;">

<area shape=rect coords="14, 100, 80, 180"

href="javascript:update('Φλώρινα');"

onMouseOver="window.status='Νομός Φλώρινας';return true;">

<area shape=default

href="javascript:update('Εκτός Περιφέρειας');"

onMouseOver="window.status=’Εκτός Περιφέρ.’;return true;">

</map>

<hr>

<p> Επιλέξατε τον Νομό :

</p><p>

</form>

<hr>

<p> Ένας χάρτης εικόνας (image map) είναι μια εικόνα που έχει διαιρεθεί σε διάφορα τμήματα, ορθογώνιας, κυκλικής ή

πολυγωνικής μορφής, το καθένα από τα οποία λειτουργεί ως ανεξάρτητο hot spot, δηλ. κάνοντας κλικ πάνω του μπορούμε να

πάμε σε μια διαφορετική διεύθυνση ιστοσελίδας.

Χαρακτηριστικό παράδειγμα αποτελεί ο χάρτης της Ελλάδας, τον οποίο μπορούμε να μετατρέψουμε σε χάρτη εικόνας με βάση

τους νομούς ή τις περιφέρειες της χώρας και έτσι από την ίδια αρχική εικόνα, η οποία παρεμένει ανέπαφη, να έχουμε πολλούς

συνδέσμους (links) προς διαφορετικές ιστοσελίδες.

Αυτό που θα πρέπει να κάνουμε μέσα στον HTML κώδικα της ιστοσελίδας είναι να χρησιμοποιήσουμε το tag <map> με την

ιδιότητα name για να αποδώσουμε ένα όνομα στον συγκεκριμένο χάρτη εικόνας και μετά να χρησιμοποιήσουμε

αυτό το όνομα στην ιδιότητα usemap του tag <img> κατά την εισαγωγή της εικόνας στην ιστοσελίδα.

</p>

</body>

</html>

156. Τα Rollovers

<html>

<head>

<title> Παράδειγμα με RollOvers </title>

</head>

<body>

<h1> Οι Δυναμικές Εικόνες (RollOvers) </h1>

<p> Η παρακάτω εικόνα θα αλλάζει σε μια παραλλαγή της αν μετακινήσετε τον δείκτη του ποντικιού από πάνω της. Κάνοντας

κλικ πάνω της θα μπορείτε να μεταβείτε σε μια άλλη ιστοσελίδα.

</p>

<hr>

<a href="dytikimakedonia.html"

onMouseOver="document.images[0].src=’dytmak02.jpg’;"

onMouseOut="document.images[0].src=’dytmak01.jpg’;">

</a>

<hr>

<p> Τα rollovers είναι εικόνες που αλλάζουν όταν μετακινούμε τον δείκτη του ποντικιού από πάνω τους. Θα πρέπει να

χρησιμοποιήσουμε το χειριστήριο συμβάντος onMouseOver για να αντικαθιστούμε την εικόνα με μια άλλη έκδοσή της και ξανά

το χειριστήριο συμβάντος onMouseOut για να επαναφέρουμε την αρχική (κανονική) εικόνα. Φυσικά, θα μπορούμε να ορίσουμε

και έναν σύνδεσμο (link) όταν κάνουμε κλικ στο συγκεκριμένο rollover.

</p>

</body>

</html>

157. Δημιουργία ενός Εφέ Κίνησης (Animation)

<html>

<head>

<title> Παράδειγμα με Εφέ Κίνησης (Animation) </title>

i=1;

function loadimages() {

document.images[0].src="florina"+i+".jpg";

i = (i+1) % 5;

window.setTimeout("loadimages();", 2000);

} // end function

</script>

</head>

<h1> Ένα Απλό Εφέ Κίνησης (Animation) </h1>

<p> Κάθε 2 δευτερόλεπτα θα βλέπετε να εμφανίζεται μια άλλη εικόνα. Οι εικόνες συνολικά είναι 5 και όταν εμφανισθεί και η

τελευταία, η προβολή θα αρχίζει πάλι από την αρχική εικόνα.

</p>

<p> Εδώ έχουμε ένα παράδειγμα δημιουργίας ενός απλού εφέ κίνησης (animation) στην JavaScript, όπου έχουμε διαδοχική

εναλλαγή κάποιων σχετικών εικόνων στην ίδια θέση.

</p>

</body>

</html>

158. Προώθηση του Χρήστη σε Ξεχωριστές Σελίδες

<html>

<head>

<title> Αυτόματη Προώθηση του Χρήστη </title>

</head>

<body>

<h1> Αυτόματη Προώθηση του Χρήστη </h1>

<p> Η ιστοσελίδα αυτή εντοπίζει τον φυλλομετρητή του χρήστη και τον στέλνει αυτόματα στην αντίστοιχη ιστοσελίδα. </p>

if (navigator.appName.IndexOf("Netscape")>-1)

&& navigator.appVersion.IndexOf("5")>-1)

window.location="page_netscape.html";

if (navigator.appName.IndexOf("Microsoft")>-1)

&& navigator.appVersion.IndexOf("4")>-1)

window.location="page_netscape.html";

window.location="page_default.html";

</script>

</body>

</html>

159. Παράδειγμα μ’ ένα Απλό Φύλλο Στυλ

<html>

<head>

<title> Παράδειγμα με Φύλλο Στυλ </title>

<style>

body {

color:blue

}

p {

text-align:center;

margin-left:20%;

margin-right:20%

}

h1, h2, h3 {

color:green

}

ul {

color:red;

font-weight:bold

}

</style>

</head>

<body>

<p> Η παραπάνω επικεφαλίδα είναι του επιπέδου 1 και έχει πράσινο χρώμα, ενώ το κείμενο αυτής της παραγράφου έχει μπλε χρώμα, το οποίο είναι το προκαθορισμένο χρώμα του σώματος του κειμένου. Είναι επίσης κεντραρισμένο και έχει περιθώρια αριστερά και δεξιά 20%. Οι ρυθμίσεις αυτές είναι οι προκαθορισμένες για τις παραγράφους. </p>

<p style="color:yellow"> Το κείμενο αυτής της παραγράφου έχει κίτρινο χρώμα, γιατί ορίσαμε ένα συγκεκριμένο στυλ μόνο για το χρώμα της συγκεκριμένης παραγράφου και το οποίο επικάλυψε το προκαθορισμένο χρώμα του κειμένου. </p>

<ul>

<li> Αυτό είναι ένα στοιχείο μιας λίστας με κουκκίδες, που έχει κόκκινο χρώμα και έντονη γραφή. Αυτές είναι και οι προκαθορισμένες ρυθμίσεις για τις λίστες με κουκκίδες.

<li style="color:black"> Αυτό είναι ένα άλλο στοιχείο της ίδιας λίστας με κουκκίδες, αλλά που έχει μαύρο χρώμα με ιδιαίτερη ρύθμιση μόνο για τη συγκεκριμένη κουκκίδα.

</ul>

<p> Η εφαρμογή αυτή χρησιμοποιεί ένα ενσωματωμένο φύλλο στυλ, το οποίο ορίζει ότι το κανονικό κείμενο του εγγράφου θα έχει

μπλε χρώμα, οι παράγραφοι θα είναι κεντραρισμένες και με μεγάλα αριστερά και δεξιά περιθώρια, οι επικεφαλίδες 1 και 2

θα έχουν πράσινο χρώμα και οι λίστες κουκκίδων θα έχουν έντονη γραφή και κόκκινο χρώμα.

Οι ρυθμίσεις αυτές είναι γενικές και ισχύουν γι’ όλο το έγγραφο, εκτός κι αν ορίσουμε κάτι άλλο μέσα στο έγγραφο για κάποιο

συγκεκριμένο στοιχείο του εγγράφου, όπου η ρύθμιση αυτή υπερισχύει της γενικής ρύθμισης. </p>

</body>

</html>

160. Εφαρμογή με Δυναμικά Στυλ

<html>

<head>

<title> Έλεγχος των Στυλ με την JavaScript </title>

function changehead() {

i = document.MyForm.heading.selectedIndex;

headcolor = document.MyForm.heading.options[i].value;

head1.style.color = headcolor;

} // end function

function changebody() {

i = document.MyForm.body.selectedIndex;

documentcolor = document.MyForm.body.options[i].value;

p1.style.color = documentcolor;

} // end function

</script>

</head>

<body>

<h1 id="head1"> Αυτή η επικεφαλίδα είναι επιπέδου 1 (h1) και μπορείτε να ελέγξετε το χρώμα της από την αντίστοιχη

πτυσσόμενη λίστα

</h1>

<h1> Αυτή η επικεφαλίδα είναι επιπέδου 1 (h1) αλλά δεν μπορείτε να ελέγξετε το χρώμα της από την αντίστοιχη πτυσσόμενη λίστα

</h1>

<hr>

<p id="p1"> Μπορείτε να ελέγξετε το χρώμα του κειμένου αυτής της παραγράφου από την αντίστοιχη πτυσσόμενη λίστα </p>

<p> Δεν μπορείτε να ελέγξετε το χρώμα του κειμένου αυτής της παραγράφου από την αντίστοιχη πτυσσόμενη λίστα </p>

<b> Επιλογή Χρώματος Επικεφαλίδας : </b>

<option value="black"> Μαύρο </option>

<option value="red"> Κόκκινο </option>

<option value="green"> Πράσινο </option>

<option value="yellow"> Κίτρινο </option>

</select>

<br>

<b> Επιλογή Χρώματος Παραγράφου : </b>

<option value="black"> Μαύρο </option>

<option value="red"> Κόκκινο </option>

<option value="green"> Πράσινο </option>

<option value="yellow"> Κίτρινο </option>

</select>

</form>

<p> Η εφαρμογή αυτή περιέχει δύο πτυσσόμενες λίστες από τις οποίες μπορούμε να επιλέγουμε το χρώμα μιας επικεφαλίδας

επιπέδου h1 και μιας παραγράφου. Εμείς επιλέγουμε απλά την πτυσσόμενη λίστα και το χρώμα που θέλουμε και αυτό

εφαρμόζεται αυτόματα στα αντίστοιχα αντικείμενα.

Για να μπορέσουμε να το πετύχουμε αυτό δώσαμε ένα όνομα (identifier, αναγνωριστικό) σε μια επικεφαλίδα h1 και σε μια

παράγραφο, χρησιμοποιώντας την ιδιότητα id. Μετά, μέσα σε μια συνάρτηση της JavaScript διαβάζουμε το

χρώμα της επιλογής που κάνει ο χρήστης από την πτυσσόμενη λίστα και το καταχωρούμε στην ιδιότητα style.color του

αντίστοιχου αντικειμένου, δηλ. της επικεφαλίδας ή της παραγράφου.

</p>

</body>

</html>

161. Εφαρμογή με Δυναμικό HTML Εφέ Κίνησης

<html>

<head>

<title> Animation με Δυναμική HTML </title>

var pos1=-95;

var pos2=-95;

var pos3=-95;

var speed1=Math.floor(Math.random()*10)+2;

var speed2=Math.floor(Math.random()*10)+2;

var speed3=Math.floor(Math.random()*10)+2;

function next() {

pos1+=speed1;

pos2+=speed2;

pos3+=speed3;

if (pos1 > 795) pos1=-95;

if (pos2 > 795) pos2=-95;

if (pos3 > 795) pos3=-95;

image1.style.left=pos1;

image2.style.left=pos2;

image3.style.left=pos3;

window.setTimeout("next()", 10);

} // end function

</script>

</head>

<h1> Δημιουργία ενός Animation με Δυναμική HTML </h1>

<hr>

</div>

</div>

</div>

<p> Στην εφαρμογή αυτή έχουμε συνδυασμό HTML, JavaScript και δυναμικών χαρακτηριστικών. Εισάγουμε τρεις εικόνες σε τρία

διαφορετικά στρώματα και ενώ και οι τρεις εικόνες βρίσκονται αρχικά στην ίδια κατακόρυφη θέση, δημιουργούμε τρεις

τυχαίους αριθμούς και αναγκάζουμε τα στρώματα να μετακινούνται με την ταχύτητα που ορίζεται από τους τρεις

τυχαίους αριθμούς.

Μόλις τα στρώματα, άρα και οι εικόνες που βρίσκονται μέσα τους, φθάσουν στην άκρη της οθόνης, θα επιστρέφουν στην αρχή

και η κίνηση θα συνεχίζεται με τον ίδιο ρυθμό. Μπορούμε να κάνουμε συνεχείς ανανεώσεις (refresh) της ιστοσελίδας για να

βλέπουμε τη δημιουργία και άλλων τυχαίων αριθμών και ποια εικόνα «τρέχει» πιο γρήγορα.

Χρησιμοποιούμε την ιδιότητα left ενός στρώματος, η οποία ορίζει την απόστασή του από το αριστερό άκρο του παραθύρου

του φυλλομετρητή.

</p>

</body>

</html>

162. Απόκρυψη και Εμφάνιση Αντικειμένων

<html>

<head>

<title> Απόκρυψη και Εμφάνιση Αντικειμένων </title>

function ShowHide() {

showhead1 = document.MyForm.head1.checked;

showhead2 = document.MyForm.head2.checked;

head1.style.visibility = (showhead1) ? "visible" : "hidden";

head2.style.visibility = (showhead2) ? "visible" : "hidden";

} // end function

</script>

</head>

<body>

<h1 id="head1"> Αυτή είναι η πρώτη επικεφαλίδα </h1>

<h1 id="head2"> Αυτή είναι η δεύτερη επικεφαλίδα </h1>

<p> Επιλέξτε τα πλαίσια ελέγχου για να εμφανίζετε και να κρύβετε διαδοχικά τις δύο επικεφαλίδες πρώτου επιπέδου (h1). </p>

<b> Εμφάνιση της πρώτης επικεφαλίδας </b><br>

<b> Εμφάνιση της δεύτερης επικεφαλίδας </b><br>

</form>

<p> Η εφαρμογή αυτή περιέχει δύο επικεφαλίδες επιπέδου h1, τις οποίες θα μπορούμε να εμφανίζουμε και να κρύβουμε με δύο

αντίστοιχα πλαίσια ελέγχου. Όταν το πλαίσιο ελέγχου θα είναι επιλεγμένο, η αντίστοιχη

επικεφαλίδα θα είναι ορατή, ενώ όταν δεν θα είναι επιλεγμένο, η αντίστοιχη επικεφαλίδα θα αποκρύπτεται. Χρησιμοποιούμε τις

τιμές visible και hidden της ιδιότητας visibility. </p>

</body>

</html>

163. Τροποποίηση Κειμένου σε Σελίδα

<html>

<head>

<title> Τροποποίηση Κειμένου </title>

function ChangeTitle() {

var newtitle = document.MyForm.newtitle.value;

head1.firstChild.nodeValue = newtitle;

} // end function

</script>

</head>

<body>

<h1 id="head1"> Δυναμικό Κείμενο Επικεφαλίδας </h1>

<p> Εισάγετε ένα νέο κείμενο στο πεδίο κειμένου και κάντε κλικ στο πλήκτρο εντολής για να δείτε να αλλάζει η επικεφαλίδα πρώτου

επιπέδου (h1).

</p>

</form>

<p> Η εφαρμογή αυτή περιέχει μια φόρμα μ’ ένα πεδίο κειμένου και ένα πλήκτρο εντολής, όπου το κείμενο που καταχωρούμε στο

πεδίο κειμένου θα εμφανίζεται στη θέση μιας επικεφαλίδας επιπέδου h1.

Χρησιμοποιούμε την ιδιότητα firstChild της επικεφαλίδας h1, η οποία ιδιότητα επιστρέφει τον κόμβο κειμένου, ο οποίος είναι

και το μόνο παιδί της επικεφαλίδας, ενώ η ιδιότητα nodeValue περιέχει το κείμενο της επικεφαλίδας.

</p>

</body>

</html>

164. Προσθήκη Κειμένου σε Σελίδα

<html>

<head>

<title> Προσθήκη Κειμένου </title>

function AddText() {

var newtext = document.MyForm.newtext.value;

var node = document.createTextNode(" " + newtext) ;

p1.appendChild(node) ;

} // end function

</script>

</head>

<body>

<h1> Δυναμική Προσθήκη Κειμένου </h1>

<p id="p1"> Εισάγετε ένα νέο κείμενο στο πεδίο κειμένου και κάντε κλικ στο πλήκτρο εντολής για να δείτε να προστίθεται το

κείμενο στην ιστοσελίδα.

</p>

</form>

πεδίο κειμένου θα προστίθεται στην ιστοσελίδα. Χρησιμοποιούμε τη μέθοδο createTextNode(), η οποία

δημιουργεί έναν καινούργιο κόμβο με το κείμενο που της περνάμε ως όρισμα. Μετά χρησιμοποιούμε και τη μέθοδο

appendChild() για να προσθέσουμε τον κόμβο που δημιουργήσαμε προηγουμένως σε μια παράγραφο με

συγκεκριμένο αναγνωριστικό (id).

</p>

</body>

</html>

165. Εργασία με Κυλιόμενο Μήνυμα

<html>

<head>

<title> Κυλιόμενο Μήνυμα μέσα σε Ιστοσελίδα </title>

msg = "Florina per sempre - ";

msg += "Αυτό το κυλιόμενο μήνυμα εμφανίζεται ";

msg += "μέσα στην ιστοσελίδα";

pos = 0;

function ScrollMessage() {

var newtext = msg.substring(pos, msg.length) + " … " + msg.substring(0, pos);

t1.firstChild.nodeValue = newtext;

pos++;

if (pos>msg.length) pos=0;

window.setTimeout("ScrollMessage()", 200);

} // end function

</script>

</head>

<h1> Ένα Άλλο Κυλιόμενο Μήνυμα </h1>

<p> Εμφανίζουμε ένα κυλιόμενο μήνυμα όχι στη γραμμή κατάστασης αλλά μέσα σ’ ένα κελί ενός πίνακα.

</p>

<tr>

<td id="t1" width="90%"> Το Κυλιόμενο Μήνυμα </td>

</tr>

</table>

<p> Έχουμε ήδη δει την εφαρμογή που εμφανίζει ένα κυλιόμενο μήνυμα στη γραμμή κατάστασης, εδώ όμως έχουμε ένα

κυλιόμενο μήνυμα μέσα στην ίδια την ιστοσελίδα. Αυτό που κάνουμε είναι ότι αντί να καταχωρούμε το μήνυμα (κείμενο)

στη μεταβλητή window.status, το καταχωρούμε σ’ έναν κόμβο κειμένου της ιστοσελίδας.

</p>

</body>

</html>

166. Αναπαραγωγή Ήχου με την JavaScript

<html>

<head>

<title> Αναπαραγωγή Μουσικής με την JavaScript </title>

function playmusic(file) {

document.embeds[file].play();

} // end function

</script>

</head>

<body>

<h1> Αναπαραγωγή Μουσικής με την JavaScript </h1>

<p> Μπορείτε να κάνετε κλικ σε μια από τις δύο εικόνες για να ακούσετε ένα διαφορετικό αρχείο μουσικής (midi).

</p>

<p> Στην εφαρμογή αυτή με το κλικ με το ποντίκι σε κάποιες εικόνες γίνεται αναπαραγωγή κάποιων αρχείων μουσικής (midi). Για να

συμπεριλάβουμε τα αρχεία ήχων χρησιμοποιούμε την ετικέτα embed, με την παράμετρο autostart=false ώστε να μην

γίνεται αυτόματα η αναπαραγωγή του ήχου με το φόρτωμα του αντίστοιχου αρχείου και επίσης την παράμετρο hidden=true

ώστε να μην εμφανίσει ο φυλλομετρητής τους γνωστούς πίνακες ελέγχου για τον ήχο.

Η αναπαραγωγή των ήχων γίνεται με τη συνάρτηση playmusic(), η οποία δέχεται μία παράμετρο, που είναι ένας αριθμός με τιμή

0 ή 1, ανάλογα με την εικόνα στην οποία κάναμε κλικ, οπότε και καλείται (αναπαράγεται) το αντίστοιχο ενσωματωμένο

αντικείμενο του πίνακα embeds με τη μέθοδο play().

</p>

</body>

</html>

167. Εφαρμογή με Τυχαίους Αριθμούς

<html>

<head>

<title> Μαντέψτε έναν Αριθμό από το 1 έως το 100 </title>

var num = Math.floor(Math.random()*100)+1;

var tries = 0;

function guessit() {

var guess = document.MyForm.guess1.value;

tries++;

window.status = "Δοκιμές : " + tries;

if (guess < num)

document.MyForm.hint.value = "Λάθος, δώστε έναν \

μεγαλύτερο αριθμό";

if (guess > num)

document.MyForm.hint.value = "Λάθος, δώστε έναν \

μικρότερο αριθμό";

if (guess == num) {

window.alert("Σωστά! Τον μαντέψατε σε " + tries +

" προσπάθειες");

// ξαναφορτώνεται η ιστοσελίδα

location.reload();

} // end if

if (tries == 10) {

window.alert("Λυπούμεθα, έχουν τελειώσει οι \

προσπάθειές σας. Κάνατε συνολικά " + tries +

" προσπάθειες. Ο αριθμός ήταν : " + num);

// ξαναφορτώνεται η ιστοσελίδα

location.reload();

} // end if

} // end function

</script>

</head>

<body>

<h1> Μαντέψτε έναν Αριθμό από το 1 έως το 100 </h1>

<p> Προσπαθήστε να μαντέψετε έναν ακέραιο αριθμό από το 1 έως το 100 σε 10 το πολύ προσπάθειες. </p>

</form>

<p> Η εφαρμογή αυτή δημιουργεί έναν τυχαίο ακέραιο αριθμό από το 1 έως το 100 και μας προτρέπει να τον μαντέψουμε με 10

προσπάθειες. Αν δεν τον βρούμε με μια προσπάθεια, μας ενημερώνει αν ο αριθμός είναι μεγαλύτερος ή μικρότερος απ’

αυτόν που δώσαμε, έτσι ώστε να έχουμε καλύτερα περιθώρια εντοπισμού του. </p>

</body>

</html>

168. Εφαρμογή με Πτυσσόμενες Λίστες

<html>

<head>

<title> Περιήγηση στη Δυτική Μακεδονία </title>

var num = Math.floor(Math.random()*100)+1;

var tries = 0;

function Navigate() {

var i = document.MyForm.thema.selectedIndex;

var j = document.MyForm.nomos.selectedIndex;

themaval = document.MyForm.thema.options[i].value;

nomosval = document.MyForm.nomos.options[j].value;

if (themaval=="x" || nomosval =="x") return;

window.location = themaval + "_" + nomosval + ".html";

} // end function

</script>

</head>

<body>

<h1> Περιήγηση στη Δυτική Μακεδονία </h1>

<p> Επιλέξτε ένα θέμα και έναν νομό από τις αντίστοιχες πτυσσόμενες λίστες και κάντε κλικ στο πλήκτρο εντολής

Μετάβαση για να μεταβείτε στην αντίστοιχη ιστοσελίδα.

</p>

<option value="x" selected> Επιλέξτε ένα Θέμα

<option value="history"> Ιστορία

<option value="geography"> Γεωγραφία

<option value="folklore"> Λαογραφία

<option value="tourism"> Τουρισμός

</select>

<option value="x" selected> Επιλέξτε έναν Νομό

<option value="grevena"> Γρεβενών

<option value="kastoria"> Καστοριάς

<option value="kozani"> Κοζάνης

<option value="florina"> Φλώρινας

</select>

</form>

<p> Η εφαρμογή αυτή χρησιμοποιεί δύο πτυσσόμενες λίσες, όπου από τη μια μπορούμε να επιλέξουμε ένα θέμα όπως Ιστορία,

Γεωγραφία, Λαογραφία και Τουρισμός και από την άλλη έναν από τους τέσσερις νομούς της Δυτικής Μακεδονίας.

Αφού κάνουμε τις επιλογές μας και από τις δύο πτυσσόμενες λίστες, με κλικ σ’ ένα πλήκτρο εντολής θα φορτώνεται η

αντίστοιχη ιστοσελίδα που θα περιέχει πληροφορίες για τον νομό αλλά και για το συγκεκριμένο θέμα που επιλέξαμε.

Οι ιστοσελίδες θα είναι της μορφής history_florina.html, σχετικά με την ιστορία του Ν. Φλώρινας, tourism_kastoria.html, σχετικά

με τον τουρισμό στον Ν. Καστοριάς κοκ και αυτό για να μπορούμε να συνθέσουμε εύκολα την αντίστοιχη ιστοσελίδα από

τις επιλογές που θα κάνει ο χρήστης.

</p>

</body>

</html>

Επιστροφή