Τεχνικες Προγραμματιςμου με την JavaScript
Τι Είναι η JavaScript Η JavaScript είναι μια γλώσσα συγγραφής σεναρίων (scripting language). Η JavaScript μπορεί να τοποθετηθεί μέσα σε μια HTML σελίδα ανάμεσα στα tags <script> και </script>. Όταν υπάρχει κώδικας της JavaScript μέσα σ’ ένα HTML έγγραφο, ο φυλλομετρητής διαβάζει την HTML και μεταφράζει (interprets) την JavaScript. Ο κώδικας της JavaScript μπορεί να εκτελεσθεί αμέσως ή αργότερα όταν λάβει χώρα ένα συμβάν. Δημιουργήθηκε από την Netscape με αρχικό όνομα LiveScript.
Διαφορές Java και JavaScript Περίπλοκη στη χρήση. Χρειάζεται το JDK (Java Developer’s Kit). Τα προγράμματα μεταγλωττίζονται σε εκτελέσιμα αρχεία και ενσωματώνονται στις σελίδες της HTML με την ετικέτα <APPLET>. Οι φυλλομετρητές βλέπουν την ετικέτα και φορτώνουν και τρέχουν το Java applet. JavaScript Σχετικά εύκολη στη χρήση. Χρειάζεται μόνο ένας φυλλομετρητής συμβατός με JavaScript. Τα προγράμματα ενσωματώνονται στις σελίδες της HTML με τη μορφή σεναρίου και δεν χρειάζονται μεταγλώττιση ή διερμήνευση.
Διαφορές Java και JavaScript
Τι Μπορεί να Κάνει η JavaScript Η JavaScript προσφέρει στους σχεδιαστές της HTML ένα προγραμματιστικό εργαλείο, δηλ. εντολές όπως if, while, switch, for κ.ά., που δεν υπάρχουν στην HTML. Η JavaScript μπορεί να εμφανίσει δυναμικό κείμενο σε μια HTML σελίδα. Η JavaScript μπορεί να αντιδράσει σε συμβάντα (events). Η JavaScript μπορεί να διαβάσει και να γράψει σε στοιχεία της HTML. Η JavaScript μπορεί να χρησιμοποιηθεί για επικύρωση δεδομένων σε φόρμες.
Τι Μπορούμε να Κάνουμε με την JavaScript Να προσδώσουμε ζωντάνια στις ιστοσελίδες μας : Να εμφανίσουμε κυλιόμενα μηνύματα στη γραμ-μή κατάστασης του φυλλομετρητή. Να επικυρώσουμε (ελέγξουμε) τα περιεχόμενα των πεδίων μιας φόρμας. Να κάνουμε υπολογισμούς με τα πεδία κειμένου μιας φόρμας. Να εμφανίσουμε προειδοποιητικά μηνύματα στον χρήστη (επισκέπτη) της ιστοσελίδας. Να δημιουργήσουμε εφέ κίνησης. Να προσθέσουμε οριζόντια ή κατακόρυφα μενού και πάρα πολλά άλλα.
Πώς Εισάγεται η JavaScript Με το tag <script> και το χαρακτηριστικό (attribute) language, ως εξής : <script language="JavaScript"> ή <script type="text/javascript"> Ανάμεσα στα tags <script> και </script> πρέπει να γράψουμε τον κώδικα της JavaScript. Η εντολή για να εμφανίσουμε κάποιο κείμενο σε μια σελίδα είναι η document.write : document.write("Γεια σας από τη Σύρο") Το σύμβολο ; είναι προαιρετικό στο τέλος των εντολών.
Πώς Εισάγεται η JavaScript Με το tag <script> και το χαρακτηριστικό (attribute) language, ως εξής : <script language="JavaScript"> ή <script type="text/javascript"> Ανάμεσα στα tags <script> και </script> πρέπει να γράψουμε τον κώδικα της JavaScript. Η εντολή για να εμφανίσουμε κάποιο κείμενο σε μια σελίδα είναι η document.write : document.write("Γεια σας από τη Σύρο") Το σύμβολο ; είναι προαιρετικό στο τέλος των εντολών.
Πρώτο Παράδειγμα <html> <head> <script type="text/javascript"> function message() { alert("Αυτό το alert box κλήθηκε από το συμβάν onload") } </script> </head> <body onload="message()"> </body> </html>
Πού Τοποθετείται η JavaScript Scripts στο Τμήμα Head Τα scripts που πρέπει να εκτελεσθούν όταν κληθούν ή όταν προκαλείται ένα συμβάν (event) τοποθετούνται στο τμήμα head. Όταν τοποθετούμε ένα script στο τμήμα head, τότε είναι σίγουρο ότι αυτό θα φορτωθεί πριν χρησιμοποιηθεί. <html> <head> <script language="JavaScript"> … εντολές … </script> </head> <body> … </body> </html>
Πού Τοποθετείται η JavaScript Scripts στο Τμήμα Body Τα scripts που πρέπει να εκτελεσθούν όταν φορτώνεται η σελίδα τοποθετούνται στο τμήμα body. Όταν τοποθετούμε ένα script στο τμήμα body, τότε αυτό συμμετέχει στη διαμόρφωση του περιεχομένου της σελίδας. <html> <head> </head> <body> <script language="JavaScript"> … εντολές … </script> </body> </html>
Τα Εξωτερικά Scripts Τα εξωτερικά scripts είναι αρχεία που περιέχουν κώδικα JavaScript, χωρίς το tag <script>, και έχουν επέκταση .js. Τα ενωματώνουμε σε μια ιστοσελίδα με το tag <script> και το χαρακτηριστικό src, ως εξής : <html> <head> </head> <body> <script src="file01.js"> </script> </body> </html> Τοποθετούμε το εξωτερικό script εκεί ακριβώς που θα γράφαμε κανονικά το script.
Οι Μεταβλητές (Variables) Κανόνες για τα ονόματα των μεταβλητών : Τα ονόματα των μεταβλητών ξεχωρίζουν τα πεζά από τα κεφαλαία γράμματα (case sensitive). Πρέπει να αρχίζουν μ’ ένα γράμμα ή με τον χαρακτήρα _ (underscore). Η χρήση του var είναι προαιρετική. Οι μεταβλητές μπορούν να αλλάζουν τύπο δεδομένων κατά την εκτέλεση του κώδικα.
Οι Τελεστές Εκχώρησης =, καταχώριση τιμής, π.χ. a = 5; ++, αύξηση κατά ένα, π.χ. a++; ή ++a; --, μείωση κατά ένα, π.χ. a--; ή --a;
Οι Αριθμητικοί Τελεστές +, πρόσθεση. -, αφαίρεση. *, πολλαπλασιασμός. /, διαίρεση. %, ακέραιο υπόλοιπο (modulus).
Οι Τελεστές Σύγκρισης ==, ίσο με. !=, όχι ίσο με. > < >= <=
Οι Λογικοί Τελεστές &&, and. ||, or. !, not.
Οι Συναρτήσεις (Functions) Απλή Κλήση Συνάρτησης Πώς να καλέσουμε μια συνάρτηση (function). <html> <head> <script type="text/javascript"> function myfunction() { alert("Γεια σας") } </script> </head> <body> <form> <input type="button" onclick="myfunction()" value="Κλήση συνάρτησης"> </form> <p>Με κλικ στο button, θα κληθεί η συνάρτηση που θα εμφανίσει ένα μήνυμα.</p> </body> </html>
Οι Συναρτήσεις (Functions) Συνάρτηση με Ορίσματα (Arguments) Πώς να περάσουμε μεταβλητές σε μια συνάρτηση και πώς να χρησιμοποιήσουμε τις τιμές τους μέσα στη συνάρτηση. <html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt) } </script> </head> <body> <form> <input type="button" onclick="myfunction('Καλημέρα!')" value="Το Πρωί"> <input type="button" onclick="myfunction('Καλό Απόγευμα!')" value="Το Απόγευμα"> </form> <p> Με κλικ σ’ ένα από τα πλήκτρα εντολής, θα κληθεί η συνάρτηση και θα εμφανίσει (alert) το όρισμα που της μεταβιβάζεται. </p> </body> </html>
Οι Συναρτήσεις (Functions) Συνάρτηση με Ορίσματα που Επιστρέφει Τιμή Βρίσκει το άθροισμα (sum) δύο ορισμάτων και επιστρέφει το αποτέλεσμα. <html> <head> <script type="text/javascript"> function total(numberA, numberB) { return numberA + numberB } </script> </head> <body> document.write(total(2, 3)) <p> Το script στο τμήμα body καλεί μια συνάρτηση που έχει δύο ορίσματα. </p> <p> Η συνάρτηση επιστρέφει το άθροισμα (sum) αυτών των δύο ορισμάτων.</p> </body> </html>
Η Εντολή If <html> <body> <script type="text/javascript"> var d = new Date() var time = d.getHours() if (time < 10) { document.write("<b> Καλημέρα </b>") } </script> <p> Αυτό το παράδειγμα δείχνει την εντολή If. </p> <p> Αν η ώρα στον φυλλομετρητή είναι πριν τις 10, θα λάβουμε τον χαιρετισμό "Καλημέρα". </p> </body> </html>
Η Εντολή If ... Εlse <html> <body> <script type="text/javascript"> 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> </body> </html>
Η Εντολή Switch <html> <body> <script type="text/javascript"> var d = new Date() theDay=d.getDay() switch (theDay) { case 6: document.write("Σούπερ Σάββατο") break case 0: document.write("Κυριακή για Ξεκούραση") default: document.write("Ημέρα Εργασίας") } </script> <p> Διαφορετικός χαιρετισμός ανάλογα με την ημέρα. Κυρ=0, Δευτ=1, Τρ=2 κλπ. </p></body></html>
Ο Τελεστής υπό Συνθήκη Η JavaScript έχει και τον τελεστή υπό συνθήκη (conditional operator), που εκχωρεί μια τιμή σε μια μεταβλητή ανάλογα με κάποια συνθήκη. Η σύνταξή του είναι η εξής : Όνομα_μεταβλητής = (συνθήκη) ? Τιμή1 : τιμή2 Παράδειγμα : greeting=(visitor=="PRES")?"Dear President ":"Dear " Αν η μεταβλητή visitor είναι ίση με PRES, τότε καταχωρείται το string "Dear President " στη μεταβλητή greeting, ενώ αν η μεταβλητή visitor δεν είναι ίση με PRES, τότε καταχωρείται το string "Dear " στη μεταβλητή greeting.
Ο Βρόχος For Πώς να χρησιμοποιήσουμε τον βρόχο For για να εμφανίσουμε τις επικεφαλίδες (headers) της HTML. <html> <body> <script type="text/javascript"> for (i = 1; i <= 6; i++) { document.write("<h" + i + "> Επικεφαλίδα : " + i) document.write("</h" + i + ">") } </script> </body> </html>
Ο Βρόχος While Πώς να γράψουμε έναν βρόχο While. <html> <body> <script type="text/javascript"> i = 0 while (i <= 5) { document.write("Αριθμός : " + i) document.write("<br>") i++ } </script> <p> Το <b>i</b> γίνεται ίσο με 0 και ενώ (while) το <b>i</b> είναι μικρότερο από ή ίσο με 5, ο βρόχος θα συνεχίσει να εκτελείται. Το <b>i</b> αυξάνει κατά 1 κάθε φορά που εκτελείται ο βρόχος. </p> </body> </html>
Ο Βρόχος Do While <html> <body> <script type="text/javascript"> i = 0 do { document.write("Αριθμός : " + i) document.write("<br>") i++ } while (i <= 5) </script> <p> Το <b>i</b> γίνεται ίσο με 0. Ο βρόχος εκτελείται </p> <p> Το <b>i</b> αυξάνει κατά 1 κάθε φορά που εκτελείται ο βρόχος και ενώ (while) το <b>i</b> είναι μικρότερο από ή ίσο με 5, ο βρόχος θα συνεχίσει να εκτελείται. </p></body></html>
Χρήσιμες Οδηγίες Η JavaScript Είναι Case Sensitive Η συνάρτηση myfunction δεν είναι το ίδιο με την myFunction. Συνεπώς πρέπει να προσέχουμε τα πεζά και τα κεφαλαία γράμματα. Διάσπαση μιας Γραμμής Κώδικα Μπορούμε να διασπάσουμε μια γραμμή κώδικα με τον χαρακτήρα \ (backslash), ως εξής : document.write("Hello \ World!")
Χρήσιμες Οδηγίες Ειδικοί Χαρακτήρες (Special Characters) document.write ("You \& I sing \"Happy Birthday\".") Το παραπάνω παράδειγμα θα δώσει το εξής αποτέλεσμα : You & I sing "Happy Birthday". Σχόλια (Comments) Μπορούμε να προσθέσουμε ένα σχόλιο (comment) στον κώδικα της JavaScript με τους χαρακτήρες //, ως εξής : sum=a + b // υπολογισμός του αθροίσματος (sum) Ή να χρησιμοποιήσουμε τους χαρακτήρες /* και */, ως εξής : sum=a + b /* υπολογισμός του αθροίσματος (sum) */ Με τη χρήση των /* και */ μπορούμε να δημιουργήσουμε ένα σχόλιο πολλών γραμμών (multi-line comment) : /* Αυτό είναι ένα μπλοκ σχολίου (comment block). Περιέχει πολλές γραμμές */
Το Αντικείμενο String Η JavaScript θεωρεί τις συμβολοσειρές ως αντικείμενα String και διαθέτει πολλές μεθόδους (ενσωματωμένες συναρτήσεις) για να χειρισθεί τα αντικείμενα String. a = "Florina"; Για να δημιουργήσουμε ένα καινούργιο αντικείμενο String, μπορούμε να χρησιμοποιήσουμε τον τρόπο που είδαμε προηγουμένως ή να ακολουθήσουμε την τυπική σύνταξη δημιουργίας αντικειμένου, όπως : a = new String(“Florina");
Μέθοδοι του Αντικειμένου String Length Επιστρέφει το μήκος ενός string. var str="πόσοι χαρακτήρες υπάρχουν" document.write(str.length) IndexOf() Επιστρέφει μια ακέραια τιμή αν το string περιέχει έναν χαρακτήρα και την τιμή –1 αν όχι. var str="Φλώρινα" var character=str.indexOf("Φλώ") if (character>=0) { document.write("Το string περιέχει τον χαρακτήρα") }
Μέθοδοι του Αντικειμένου String Match() Είναι παρόμοια με τη μέθοδο indexOf, αλλά επιστρέφει τους χαρακτήρες που καθορίζουμε ή την τιμή null αν το string δεν περιέχει τους συγκεκριμένους χαρακτήρες. var str = "Η Φλώρινα είναι ωραία" document.write(str.match("ωραία")) Substr() Επιστρέφει συγκεκριμένα τμήματα ενός string. Για παράδειγμα, αν δώσουμε (14, 7), θα επιστραφεί ο 14ος χαρακτήρας και οι επόμενοι 6. Πρέπει να έχουμε υπόψη μας ότι ο πρώτος χαρακτήρας είναι ο 0, ο δεύτερος ο 1 κοκ. var str="Η Φλώρινα είναι ωραία" document.write(str.substr(3, 6))
Μέθοδοι του Αντικειμένου String toLowerCase() και toUpperCase() Μπορούμε να επιστρέψουμε ένα string με πεζά (lower) ή κεφαλαία (upper) γράμματα αντίστοιχα. <html> <body> <script type="text/javascript"> var str=("Γεια σας από τη Φλώρινα!") document.write(str.toLowerCase()) document.write("<br>") document.write(str.toUpperCase()) </script> </body> </html>
Το Αντικείμενο Array Για να χρησιμοποιήσουμε έναν πίνακα στην JavaScript, θα πρέπει πρώτα να τον δηλώσουμε, ως εξής : b = new Array(4); b[0] ="Florina"; b[1] ="Grevena"; b[2] ="Kastoria"; b[3] ="Kozani"; document.write(b.length); Δημιουργήσαμε έναν πίνακα 4 θέσεων, με αρίθμηση από το 0 έως και το 3, και καταχωρίσαμε τα ονόματα των 4 νομών της Δυτικής Μακεδονίας. Βλέπουμε ότι η ιδιότητα length μπορεί να χρησιμοποιηθεί και στους πίνακες και έχει την τιμή 4, όσο το πλήθος των στοιχείων του πίνακα.
Δημιουργία Πίνακα Ένας άλλος τρόπος δημιουργίας πίνακα που δίνει το ίδιο αποτέλεσμα με τον προηγούμενο. <html> <body> <script type="text/javascript"> var famname = new Array("Αντώνης", "Σπύρος", "Βασίλης", "Γιάννης", "Κώστας", "Ιωάννα") for (i=0; i<famname.length; i++) { document.write(famname[i] + "<br>") } </script> </body></html>
Μέθοδοι του Αντικειμένου Array length Επιστρέφει τον αριθμό των στοιχείων ενός πίνακα. reverse() Επιστρέφει τον πίνακα αντεστραμμένο (reversed). slice() Επιστρέφει ένα συγκεκριμένο τμήμα ενός πίνακα. sort() Επιστρέφει έναν ταξινομημένο πίνακα.
Το Αντικείμενο Date Χρησιμοποιείται για να δουλέψουμε με ημερομηνίες (dates) και ώρες (times). Δημιουργούμε ένα στιγμιότυπο (instance) του αντικειμένου Date με τη λέξη κλειδί new. Μπορούμε να αποθηκεύσουμε την τρέχουσα ημερομηνία σε μια μεταβλητή με όνομα mydate, ως εξής : var mydate=new Date() Αφού δημιουργήσουμε ένα στιγμιότυπο (instance) του αντικειμένου Date, μπορούμε να έχουμε πρόσβαση σ’ όλες τις μεθόδους του, από τη μεταβλητή mydate. Αν, για παράδειγμα, θέλουμε να επιστρέψουμε την ημερομηνία (1-31) ενός αντικειμένου Date, πρέπει να γράψουμε το εξής : mydate.getDate()
Δημιουργία Αντικειμένου Date Μπορούμε επίσης να καταχωρήσουμε μια ημερομηνία (date) μέσα στις παρενθέσεις του αντικειμένου Date(), ως εξής : new Date("Month dd, yyyy hh:mm:ss") new Date("Month dd, yyyy") new Date(yy,mm,dd,hh,mm,ss) new Date(yy,mm,dd) new Date(milliseconds) Ακολουθεί ένα παράδειγμα για το πώς μπορούμε να δημιουργήσουμε ένα αντικείμενο Date για καθεμία από τις παραπάνω εντολές : var mydate=new Date("October 12, 1988 13:14:00") var mydate=new Date("October 12, 1988") var mydate=new Date(88,09,12,13,14,00) var mydate=new Date(88,09,12) var mydate=new Date(500)
Μέθοδοι του Αντικειμένου Date Date() – Επιστρέφει ένα νέο αντικείμενο Date. getDate() – Επιστρέφει την ημέρα του μήνα από ένα αντικείμενο Date με τιμή 1-31. getDay() – Επιστρέφει την ημέρα της εβδομάδας (weekday) με τιμή 0-6. getMonth() – Επιστρέφει τον μήνα (month) με τιμή 0-11. getFullYear() – Επιστρέφει το έτος (year) με τιμή π.χ. 2000. getHours() – Επιστρέφει την ώρα (hour) με τιμή 0-23. getMinutes() – Επιστρέφει τα λεπτά (minutes) με τιμή 0-59. getSeconds() – Επιστρέφει τα δευτερόλεπτα (seconds) με τιμή 0- 59.
Το Αντικείμενο Math Το ενσωματωμένο αντικείμενο Math περιλαμβάνει μαθηματικές σταθερές (constants) και συναρτήσεις (functions). Δεν χρειάζεται να δημιουργήσουμε ένα αντικείμενο Math πριν το χρησιμοποιήσουμε. Για να αποθηκεύσουμε έναν τυχαίο αριθμό ανάμεσα στο 0 και το 1 σε μια μεταβλητή με όνομα r_number, γράφουμε το εξής : r_number=Math.random() Για να αποθηκεύσουμε τον στρογγυλοποιημένο αριθμό του 8.6 σε μια μεταβλητή με όνομα r_number, γράφουμε το εξής : r_number=Math.round(8.6) Εύρεση μεγίστου : document.write(Math.max(2, 4))
Μέθοδοι του Αντικειμένου Math max() Επιστρέφει τον μεγαλύτερο από δύο αριθμούς. min() Επιστρέφει τον μικρότερο από δύο αριθμούς. random() Επιστρέφει έναν τυχαίο αριθμό ανάμεσα στο 0 και το 1. round() Επιστρέφει έναν αριθμό που είναι στρογγυλοποιη-μένος στον πλησιέστερο ακέραιο.
Confirm Box Εμφάνιση ενός Πλαισίου Επιβεβαίωσης (Confirm Box) <html> <body> <script type="text/javascript"> var name = confirm("Κάντε κλικ σ’ ένα πλήκτρο") if (name == true) { document.write("Κάνατε κλικ στο OK") } else document.write("Κάνατε κλικ στο Cancel") </script> </body></html>
Prompt Box Εμφάνιση ενός Πλαισίου Προτροπής (Prompt Box) <html> <head> </head> <body> <script type="text/javascript"> var name = prompt("Γράψτε το όνομά σας","") if (name != null && name != "") { document.write("Γεια σου " + name) } </script> </body> </html>
Εμφάνιση Νέου Παραθύρου (pop-up window) <html> <head> <script language=javascript> function openwindow() { window.open("http://www.line.gr") } </script> </head> <body> <form> <input type=button value="Εμφάνιση Παραθύρου" onclick="openwindow()"> </form> </body> </html>
Εμφάνιση Νέου Παραθύρου (pop-up window) με Ιδιότητες <html><head> <script type="text/javascript"> 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> <input type="button" value="Εμφάνιση Παραθύρου" onclick="openwindow()"> </form></body></html>
Εμφάνιση Νέου Παραθύρου με Πλήρες Μέγεθος <html><head> <script language=javascript> 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> <input type=button value="Εμφάνιση Παραθύρου" onclick="openwindow()"> </form></body></html>
Εμφάνιση Νέου Παραθύρου με Συγκεκριμένες Διαστάσεις&Θέση <html> <head> <script type="text/javascript"> function openwindow() { window.open("http://www.lne.gr", "my_new_window", "width=400, height=400, top=0, left=0") } </script> </head> <body> <form> <input type="button" value="Εμφάνιση Παραθύρου" onclick="openwindow()"> </form></body></html>
Εμφάνιση Πολλών Νέων Παραθύρων Ταυτόχρονα <html> <head> <script language=javascript> function openwindow() { window1=window.open("http://www.florina.gr/") window2=window.open("http://www.line.gr/") } </script> </head> <body> <form> <input type=button value="Εμφάνιση Παραθύρων" onclick="openwindow()"> </form></body></html>
Κλείσιμο Παραθύρου <html> <head> <script language=javascript> function openwindow() { mywindow=window.open("http://www.line.gr", "my_new_window", "width=300, height=300") } function closewindow() { mywindow.close() </script> </head><body><form> <input type=button value="Εμφάνιση Παραθύρου" onclick="openwindow()"> <input type=button value="Κλείσιμο Παραθύρου" onclick="closewindow()"> </form></body></html>
Αλλαγή του URL Πώς να στείλουμε τον πελάτη (client) σ’ ένα νέο url/ιστοσελίδα. <html> <head> <script type="text/javascript"> function locate() { location="http://www.line.gr/" } </script> </head> <body> <form> <input type="button" onclick="locate()" value="Νέα Τοποθεσία (URL)"> </form> </body> </html>
Εμφάνιση του source code <html> <head> <script language="JavaScript"> function source() { location="view-source : " + window.location.href } </script> </head> <body> <form> <input type="button" value="Ο Πηγαίος Κώδικας της Σελίδας" onclick="source()"> </form> </body> </html>
Προσθήκη στα Αγαπημένα <html> <head> <script type="text/javascript"> function bookmark() { window.external.AddFavorite("http://www.line.gr","Η Εταιρεία Line") } </script> </head> <body> <form> <input type="button" onclick="bookmark()" value="Κάντε κλικ εδώ για προσθήκη της σελίδας στα αγαπημένα (bookmark – favorites) "> </form> </body> </html>
Δημιουργία Home Page <html> <head> <script type="text/javascript"> function makeDefault(element) { element.style.behavior='url(#default#homepage)'; element.setHomePage('http://www.line.gr'); } </script> </head><body> <p> Κάντε κλικ στο πλήκτρο εντολής (button) για να γίνει η σελίδα Line η αρχική σας σελίδα (default home page). </p> <form> <input type="button" onclick="makeDefault(this)" value="Κάντε την Line την αρχική σας σελίδα"> </form> </body></html>
Ανανέωση (Refresh, Reload) <html> <head> <script type="text/javascript"> function refresh() { location.reload() } </script> </head> <body> <form> <input type="button" value="Ανανέωση (Refresh)" onclick="refresh()"> </form> </body> </html>
Μήνυμα στη Γραμμή Κατάστασης <html> <head> <script type="text/javascript"> function load() { window.status = "Γράψτε εδώ το μήνυμά σας" } </script> </head> <body onload="load()"> <p> Δείτε τη γραμμή κατάστασης (status bar) </p> </body> </html>
Εκτύπωση Ιστοσελίδας <html> <head> <script type="text/javascript"> function printpage() { window.print() } </script> </head> <body> <form> <input type="button" value="Εκτύπωση της σελίδας" onclick="printpage()"> </form> </body></html>
Εφέ Κύλισης Ιστοσελίδας <html> <head> <script type="text/javascript"> function scrolldown() { for (i=1; i<=600; i++) { window.scroll(1, i) } </script> </head> <body> <form> <input type="button" value="Κύλιση (Scroll)" onclick="scrolldown()"> </form> <p>Κάντε κλικ στο πλήκτρο εντολής Scroll για να δείτε το εφέ</p> </body></html>
Επικύρωση e-mail σε Φόρμα Ελέγχουμε αν το πεδίο κειμένου περιέχει τον χαρακτήρα @. <html><head> <script type="text/javascript"> function validate() { x=document.myForm at=x.myEmail.value.indexOf("@") if (at == -1) { alert("Δεν είναι ένα έγκυρο e-mail") return false } } </script></head><body> <form name="myForm" action="submitpage.html" onsubmit="return validate()"> Το e-mail σας : <input type="text" name="myEmail"> <input type="submit" value="Submit"> </form></body></html>
Επικύρωση Πεδίου σε Φόρμα με Μέγιστες και Ελάχιστες Τιμές <html><head> <script type="text/javascript"> function validate() { x=document.myForm txt=x.myInput.value if (txt>=1 && txt<=5) { return true } else { alert("Πρέπει να έχει τιμές από 1 έως 5") return false } } </script></head><body> <form name="myForm" action="submitpage.html" onsubmit="return validate()"> Εισάγετε μια τιμή από 1 έως 5 : <input type="text" name="myInput"> <input type="submit" value="Submit"> </form></body></html>
Επικύρωση Πεδίου σε Φόρμα με το Πλήθος των Χαρακτήρων του <html><head> <script type="text/javascript"> function validate() { x=document.myForm input=x.myInput.value if (input.length>5) { alert("Όχι περισσότερους από 5 χαρακτήρες") return false } else { return true } } </script></head><body> <form name="myForm" action="submitpage.html" onsubmit="return validate()"> Μην γράψετε περισσότερους από 5 χαρακτήρες : <input type="text" name="myInput"> <input type="submit" value="Send input"> </form></body></html>
Εστίαση (Focus) σε Πεδίο Κειμένου Φόρμας <html><head> <script type="text/javascript"> function setfocus() { document.forms[0].field.focus() } </script> </head> <body> <form> <input type="text" name="field" size="30"> <input type="button" value="Get Focus" onclick="setfocus()"> </form> </body> </html>
Επιλογή (Selection) Πεδίου Κειμένου Φόρμας <html><head> <script type="text/javascript"> function setfocus() { document.forms[0].field.select() document.forms[0].field.focus() } </script> </head><body><form> <input type="text" name="field" size="30" value="Φλώρινα"> <input type="button" value="Selected" onclick="setfocus()"> </form></body></html>
Εργασία με Πλήκτρα Επιλογής (Radio Buttons) <html><head> <script type="text/javascript"> function check(browser) { document.forms[0].answer.value=browser } </script></head><body><form> Ο αγαπημένος σας (browser);<br> <input type="radio" name="browser" onclick="check(this.value)" value="Explorer"> Microsoft Internet Explorer <br> onclick="check(this.value)" value="Netscape"> Netscape Navigator <br> <input type="text" name="answer"> </form></body></html>
Εργασία με Πλαίσια Ελέγχου (CheckBoxes) <html><head><script type="text/javascript"> function check() { coffee=document.forms[0].coffee answer=document.forms[0].answer txt="" for (i = 0; i<coffee.length; ++ i) { if (coffee[i].checked) { txt=txt + coffee[i].value + " “ } } answer.value=txt } </script></head><body><form> Πώς πίνετε τον καφέ σας; <br> <input type="checkbox" name="coffee" value="cream"> Με γάλα (cream) <br> <input type="checkbox" name="coffee" value="sugar"> Με ζάχαρη <br> <input type="text" name="answer"> <input type="button" name="test" onclick="check()" value="Παραγγελία (Order)"> </form></body></html>
Εργασία με Πτυσσόμενη Λίστα (DropDown List) <html><head><script type="text/javascript"> function put() { option=document.forms[0].dropdown.options\ [document.forms[0].dropdown.selectedIndex].text txt=option document.forms[0].favorite.value=txt } </script></head><body><form> <p> Επιλέξτε τον αγαπημένο σας φυλλομετρητή : <select name="dropdown" onchange="put()"> <option> Internet Explorer <option> Netscape Navigator </select></p> <p> Ο αγαπημένος σας φυλλομετρητής είναι : <input type="text" name="favorite" value="Internet Explorer"></p> </form></body></html>
Εντοπισμός του Φυλλομετρητή του Χρήστη (Client) <html> <head> <script type="text/javascript"> document.write("Χρησιμοποιείτε τον : "+ navigator.appName) </script> </head> <body> … </body> </html>
Εμφάνιση Στοιχείων του Χρήστη <html><body> <script type="text/javascript"> document.write("Φυλλομετρητής : ") document.write(navigator.appName + "<br>") document.write("Browse Version : ") document.write(navigator.appVersion + "<br>") document.write("Code : ") document.write(navigator.appCodeName + "<br>") document.write("Platform : ") document.write(navigator.platform + "<br>") document.write("Referrer : ") document.write(document.referrer + "<br>") </script></body></html>
Εμφάνιση Στοιχείων της Οθόνης του Χρήστη <html><body> <script type="text/javascript"> document.write("Ανάλυση Οθόνης : ") document.write(screen.width + "*") document.write(screen.height + "<br>") document.write("Διαθέσιμος Πλάτος και Ύψος : ") document.write(window.screen.availWidth + "*") document.write(window.screen.availHeight+ "<br>") document.write("Βάθος Χρώματος : ") document.write(window.screen.colorDepth + "<br>") </script></body></html>