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

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

<html>

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 και το

</script>

</head>

<body>

<h2> Χρήση των Scripts στο Τμήμα Header <h2> <script language="JavaScript">

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

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

</script>

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

από το τμήμα body, μεταβιβάζοντας και τιμές (παραμέτρους) αν

χρειασθεί.</p>

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

JavaScript που γράφουμε και να συνεχίσουμε

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

</body>

</html >

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

<html>

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

// Αυτή η γραμμή θα αγνοηθεί γιατί είναι σχόλιο (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> <script language="JavaScript">

</script>

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

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

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

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

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

</html>

6. Το Tag <noscript>

<html>

<head>

<title> JavaScript Example 6 </title>
</head >

<body>

<h2> Εμφάνιση Μηνύματος σε Φυλλομετρητές που
Έχουν Απενεργοποιημένη την JavaScript </h2>
<script language="JavaScript">

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> <script language="JavaScript">

document.write(document.lastModified); </script>

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

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

κώδικα αυτό φαίνεται για πρώτη φορά στα

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

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

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

</body>

</html >

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

<html>

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

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>

alert("Γεια σας και πάλι! Να πώς μπορούμε" + '\n' +
"να αλλάξουμε γραμμή μέσα σ ένα alert box")
}

</script>
</head>

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

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

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

</p>

</body>
</html >

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

<html>

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>

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 >