Τεχνικές Προγραμματισμού με την JavaScript Στυλιάδης Κων/νος Φλώρινα, Οκτώβριος 2004.

Παρουσίαση με θέμα: "Τεχνικές Προγραμματισμού με την JavaScript Στυλιάδης Κων/νος Φλώρινα, Οκτώβριος 2004."— Μεταγράφημα παρουσίασης:

1 Τεχνικές Προγραμματισμού με την JavaScript Στυλιάδης Κων/νος Φλώρινα, Οκτώβριος 2004

2 Τι Είναι η JavaScript  Η JavaScript είναι μια γλώσσα συγγραφής σεναρίων (scripting language).  Η JavaScript μπορεί να τοποθετηθεί μέσα σε μια HTML σελίδα ανάμεσα στα tags και.  Όταν υπάρχει κώδικας της JavaScript μέσα σ’ ένα HTML έγγραφο, ο φυλλομετρητής διαβάζει την HTML και μεταφράζει (interprets) την JavaScript.  Ο κώδικας της JavaScript μπορεί να εκτελεσθεί αμέσως ή αργότερα όταν λάβει χώρα ένα συμβάν.  Δημιουργήθηκε από την Netscape με αρχικό όνομα LiveScript.

3 Διαφορές Java και JavaScript Java 1. Περίπλοκη στη χρήση. 2. Χρειάζεται το JDK (Java Developer’s Kit). 3. Τα προγράμματα μεταγλωττίζονται σε εκτελέσιμα αρχεία και ενσωματώνονται στις σελίδες της HTML με την ετικέτα. Οι φυλλομετρητές βλέπουν την ετικέτα και φορτώνουν και τρέχουν το Java applet. JavaScript 1. Σχετικά εύκολη στη χρήση. 2. Χρειάζεται μόνο ένας φυλλομετρητής συμβατός με JavaScript. 3. Τα προγράμματα ενσωματώνονται στις σελίδες της HTML με τη μορφή σεναρίου και δεν χρειάζονται μεταγλώττιση ή διερμήνευση.

4 Διαφορές Java και JavaScript Java 1. Οι εφαρμογές της Java είναι σχετικά αργές. 2. Η Java είναι μια πλήρης γλώσσα προγραμματισμού με πολλές δυνατότητες. 3. Η Java είναι προσανατολισμένη στο αντικείμενο και είναι μια καθαρά αντικειμενοστραφής γλώσσα προγραμματισμού. 4. Η Java έχει αυστηρούς κανόνες στη χρήση των μεταβλητών. JavaScript 1. Η JavaScript εκτελείται πολύ γρήγορα. 2. Η JavaScript είναι πιο κατάλληλη για απλές χρήσεις. 3. Η JavaScript είναι βασισμένη στο αντικείμενο, αλλά δεν είναι μια αληθινή αντικειμενοστραφής γλώσσα προγραμματισμού. 4. Η JavaScript χαρακτηρίζεται από χαλαρότητα ως προς τις μεταβλητές.

5 Τι Μπορεί να Κάνει η JavaScript  Η JavaScript προσφέρει στους σχεδιαστές της HTML ένα προγραμματιστικό εργαλείο, δηλ. εντολές όπως if, while, switch, for κ.ά., που δεν υπάρχουν στην HTML.  Η JavaScript μπορεί να εμφανίσει δυναμικό κείμενο σε μια HTML σελίδα.  Η JavaScript μπορεί να αντιδράσει σε συμβάντα (events).  Η JavaScript μπορεί να διαβάσει και να γράψει σε στοιχεία της HTML.  Η JavaScript μπορεί να χρησιμοποιηθεί για επικύρωση δεδομένων σε φόρμες.

6 Τι Μπορούμε να Κάνουμε με την JavaScript Να προσδώσουμε ζωντάνια στις ιστοσελίδες μας :  Να εμφανίσουμε κυλιόμενα μηνύματα στη γραμ- μή κατάστασης του φυλλομετρητή.  Να επικυρώσουμε (ελέγξουμε) τα περιεχόμενα των πεδίων μιας φόρμας.  Να κάνουμε υπολογισμούς με τα πεδία κειμένου μιας φόρμας.  Να εμφανίσουμε προειδοποιητικά μηνύματα στον χρήστη (επισκέπτη) της ιστοσελίδας.  Να δημιουργήσουμε εφέ κίνησης.  Να προσθέσουμε οριζόντια ή κατακόρυφα μενού και πάρα πολλά άλλα.

7 Πώς Εισάγεται η JavaScript  Με το tag και το χαρακτηριστικό (attribute) language, ως εξής : ή  Ανάμεσα στα tags και πρέπει να γράψουμε τον κώδικα της JavaScript. Η εντολή για να εμφανίσουμε κάποιο κείμενο σε μια σελίδα είναι η document.write : document.write("Γεια σας από τη Φλώρινα")  Το σύμβολο ; είναι προαιρετικό στο τέλος των εντολών.

8 Πώς Εισάγεται η JavaScript  Με το tag και το χαρακτηριστικό (attribute) language, ως εξής : ή  Ανάμεσα στα tags και πρέπει να γράψουμε τον κώδικα της JavaScript. Η εντολή για να εμφανίσουμε κάποιο κείμενο σε μια σελίδα είναι η document.write : document.write("Γεια σας από τη Φλώρινα")  Το σύμβολο ; είναι προαιρετικό στο τέλος των εντολών.

9 Πρώτο Παράδειγμα function message() { alert("Αυτό το alert box κλήθηκε από το συμβάν onload") }

10 Πού Τοποθετείται η JavaScript Scripts στο Τμήμα Head Τα scripts που πρέπει να εκτελεσθούν όταν κληθούν ή όταν προκαλείται ένα συμβάν (event) τοποθετούνται στο τμήμα head. Όταν τοποθετούμε ένα script στο τμήμα head, τότε είναι σίγουρο ότι αυτό θα φορτωθεί πριν χρησιμοποιηθεί. … εντολές … …

11 Πού Τοποθετείται η JavaScript Scripts στο Τμήμα Body Τα scripts που πρέπει να εκτελεσθούν όταν φορτώνεται η σελίδα τοποθετούνται στο τμήμα body. Όταν τοποθετούμε ένα script στο τμήμα body, τότε αυτό συμμετέχει στη διαμόρφωση του περιεχομένου της σελίδας. … εντολές …

12 Τα Εξωτερικά Scripts Τα εξωτερικά scripts είναι αρχεία που περιέχουν κώδικα JavaScript, χωρίς το tag, και έχουν επέκταση.js. Τα ενωματώνουμε σε μια ιστοσελίδα με το tag και το χαρακτηριστικό src, ως εξής : Τοποθετούμε το εξωτερικό script εκεί ακριβώς που θα γράφαμε κανονικά το script.

13 Οι Μεταβλητές (Variables) Κανόνες για τα ονόματα των μεταβλητών :  Τα ονόματα των μεταβλητών ξεχωρίζουν τα πεζά από τα κεφαλαία γράμματα (case sensitive).  Πρέπει να αρχίζουν μ’ ένα γράμμα ή με τον χαρακτήρα _ (underscore).  Η χρήση του var είναι προαιρετική.  Οι μεταβλητές μπορούν να αλλάζουν τύπο δεδομένων κατά την εκτέλεση του κώδικα.

14 Οι Τελεστές Εκχώρησης  =, καταχώριση τιμής, π.χ. a = 5;  +=, αύξηση και καταχώριση, π.χ. a += 5;  -=, μείωση και καταχώριση, π.χ. a -= 5;  *=, πολλαπλασιασμός και καταχώριση, π.χ. a *= 5;  /=, διαίρεση και καταχώριση, π.χ. a /= 5;  %=, ακέραιο υπόλοιπο και καταχώριση, π.χ. a %= 5;  ++, αύξηση κατά ένα, π.χ. a++; ή ++a;  --, μείωση κατά ένα, π.χ. a--; ή --a;

15 Οι Αριθμητικοί Τελεστές  +, πρόσθεση.  -, αφαίρεση.  *, πολλαπλασιασμός.  /, διαίρεση.  %, ακέραιο υπόλοιπο (modulus).

16 Οι Τελεστές Σύγκρισης  ==, ίσο με.  !=, όχι ίσο με.  >  <  >=  <=

17 Οι Λογικοί Τελεστές  &&, and.  ||, or.  !, not.

18 Οι Συναρτήσεις (Functions) Απλή Κλήση Συνάρτησης Πώς να καλέσουμε μια συνάρτηση (function). function myfunction() { alert("Γεια σας") } Με κλικ στο button, θα κληθεί η συνάρτηση που θα εμφανίσει ένα μήνυμα.

19 Οι Συναρτήσεις (Functions) Συνάρτηση με Ορίσματα (Arguments) Πώς να περάσουμε μεταβλητές σε μια συνάρτηση και πώς να χρησιμοποιήσουμε τις τιμές τους μέσα στη συνάρτηση. function myfunction(txt) { alert(txt) } Με κλικ σ’ ένα από τα πλήκτρα εντολής, θα κληθεί η συνάρτηση και θα εμφανίσει (alert) το όρισμα που της μεταβιβάζεται.

20 Οι Συναρτήσεις (Functions) Συνάρτηση με Ορίσματα που Επιστρέφει Τιμή Βρίσκει το άθροισμα (sum) δύο ορισμάτων και επιστρέφει το αποτέλεσμα. function total(numberA, numberB) { return numberA + numberB } document.write(total(2, 3)) Το script στο τμήμα body καλεί μια συνάρτηση που έχει δύο ορίσματα. Η συνάρτηση επιστρέφει το άθροισμα (sum) αυτών των δύο ορισμάτων.

21 Η Εντολή If var d = new Date() var time = d.getHours() if (time < 10) { document.write(" Καλημέρα ") } Αυτό το παράδειγμα δείχνει την εντολή If. Αν η ώρα στον φυλλομετρητή είναι πριν τις 10, θα λάβουμε τον χαιρετισμό "Καλημέρα".

22 Η Εντολή If... Εlse var d = new Date() var time = d.getHours() if (time < 10) { document.write(" Καλημέρα ") } else { document.write(" Καλό Μεσημέρι ") } Αυτό το παράδειγμα δείχνει την εντολή If... Else. Ανάλογα με την ώρα, θα λάβουμε τον χαιρετισμό "Καλημέρα" ή "Καλό Μεσημέρι".

23 Η Εντολή Switch var d = new Date() theDay=d.getDay() switch (theDay) { case 6: document.write("Σούπερ Σάββατο") break case 0: document.write("Κυριακή για Ξεκούραση") break default: document.write("Ημέρα Εργασίας") } Διαφορετικός χαιρετισμός ανάλογα με την ημέρα. Κυρ=0, Δευτ=1, Τρ=2 κλπ.

24 Ο Τελεστής υπό Συνθήκη Η JavaScript έχει και τον τελεστή υπό συνθήκη (conditional operator), που εκχωρεί μια τιμή σε μια μεταβλητή ανάλογα με κάποια συνθήκη. Η σύνταξή του είναι η εξής : Όνομα_μεταβλητής = (συνθήκη) ? Τιμή1 : τιμή2 Παράδειγμα : greeting=(visitor=="PRES")?"Dear President ":"Dear " Αν η μεταβλητή visitor είναι ίση με PRES, τότε καταχωρείται το string "Dear President " στη μεταβλητή greeting, ενώ αν η μεταβλητή visitor δεν είναι ίση με PRES, τότε καταχωρείται το string "Dear " στη μεταβλητή greeting.

25 Ο Βρόχος For Πώς να χρησιμοποιήσουμε τον βρόχο For για να εμφανίσουμε τις επικεφαλίδες (headers) της HTML. for (i = 1; i <= 6; i++) { document.write(" Επικεφαλίδα : " + i) document.write(" ") }

26 Ο Βρόχος While Πώς να γράψουμε έναν βρόχο While. i = 0 while (i <= 5) { document.write("Αριθμός : " + i) document.write(" ") i++ } Το i γίνεται ίσο με 0 και ενώ (while) το i είναι μικρότερο από ή ίσο με 5, ο βρόχος θα συνεχίσει να εκτελείται. Το i αυξάνει κατά 1 κάθε φορά που εκτελείται ο βρόχος.

27 Ο Βρόχος Do While i = 0 do { document.write("Αριθμός : " + i) document.write(" ") i++ } while (i <= 5) Το i γίνεται ίσο με 0. Ο βρόχος εκτελείται Το i αυξάνει κατά 1 κάθε φορά που εκτελείται ο βρόχος και ενώ (while) το i είναι μικρότερο από ή ίσο με 5, ο βρόχος θα συνεχίσει να εκτελείται.

28 Χρήσιμες Οδηγίες Η JavaScript Είναι Case Sensitive Η συνάρτηση myfunction δεν είναι το ίδιο με την myFunction. Συνεπώς πρέπει να προσέχουμε τα πεζά και τα κεφαλαία γράμματα. Διάσπαση μιας Γραμμής Κώδικα Μπορούμε να διασπάσουμε μια γραμμή κώδικα με τον χαρακτήρα \ (backslash), ως εξής : document.write("Hello \ World!")

29 Χρήσιμες Οδηγίες Ειδικοί Χαρακτήρες (Special Characters) Μπορούμε να εισάγουμε ειδικούς χαρακτήρες (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). Περιέχει πολλές γραμμές */

30 Το Αντικείμενο String Η JavaScript θεωρεί τις συμβολοσειρές ως αντικείμενα String και διαθέτει πολλές μεθόδους (ενσωματωμένες συναρτήσεις) για να χειρισθεί τα αντικείμενα String. a = "Florina"; Για να δημιουργήσουμε ένα καινούργιο αντικείμενο String, μπορούμε να χρησιμοποιήσουμε τον τρόπο που είδαμε προηγουμένως ή να ακολουθήσουμε την τυπική σύνταξη δημιουργίας αντικειμένου, όπως : a = new String(“Florina");

31 Μέθοδοι του Αντικειμένου String Length Επιστρέφει το μήκος ενός string. var str="πόσοι χαρακτήρες υπάρχουν" document.write(str.length) IndexOf() Επιστρέφει μια ακέραια τιμή αν το string περιέχει έναν χαρακτήρα και την τιμή – 1 αν όχι. var str="Φλώρινα" var character=str.indexOf("Φλώ") if (character>=0) { document.write("Το string περιέχει τον χαρακτήρα") }

32 Μέθοδοι του Αντικειμένου 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))

33 Μέθοδοι του Αντικειμένου String toLowerCase() και toUpperCase() Μπορούμε να επιστρέψουμε ένα string με πεζά (lower) ή κεφαλαία (upper) γράμματα αντίστοιχα. var str=("Γεια σας από τη Φλώρινα!") document.write(str.toLowerCase()) document.write(" ") document.write(str.toUpperCase())

34 Το Αντικείμενο 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, όσο το πλήθος των στοιχείων του πίνακα.

35 Δημιουργία Πίνακα Ένας άλλος τρόπος δημιουργίας πίνακα που δίνει το ίδιο αποτέλεσμα με τον προηγούμενο. var famname = new Array("Αντώνης", "Σπύρος", "Βασίλης", "Γιάννης", "Κώστας", "Ιωάννα") for (i=0; i<famname.length; i++) { document.write(famname[i] + " ") }

36 Μέθοδοι του Αντικειμένου Array length Επιστρέφει τον αριθμό των στοιχείων ενός πίνακα. reverse() Επιστρέφει τον πίνακα αντεστραμμένο (reversed). slice() Επιστρέφει ένα συγκεκριμένο τμήμα ενός πίνακα. sort() Επιστρέφει έναν ταξινομημένο πίνακα.

37 Το Αντικείμενο Date Χρησιμοποιείται για να δουλέψουμε με ημερομηνίες (dates) και ώρες (times). Δημιουργούμε ένα στιγμιότυπο (instance) του αντικειμένου Date με τη λέξη κλειδί new. Μπορούμε να αποθηκεύσουμε την τρέχουσα ημερομηνία σε μια μεταβλητή με όνομα mydate, ως εξής : var mydate=new Date() Αφού δημιουργήσουμε ένα στιγμιότυπο (instance) του αντικειμένου Date, μπορούμε να έχουμε πρόσβαση σ’ όλες τις μεθόδους του, από τη μεταβλητή mydate. Αν, για παράδειγμα, θέλουμε να επιστρέψουμε την ημερομηνία (1- 31) ενός αντικειμένου Date, πρέπει να γράψουμε το εξής : mydate.getDate()

38 Δημιουργία Αντικειμένου 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)

39 Μέθοδοι του Αντικειμένου 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.

40 Το Αντικείμενο 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))

41 Μέθοδοι του Αντικειμένου Math max() Επιστρέφει τον μεγαλύτερο από δύο αριθμούς. min() Επιστρέφει τον μικρότερο από δύο αριθμούς. random() Επιστρέφει έναν τυχαίο αριθμό ανάμεσα στο 0 και το 1. round() Επιστρέφει έναν αριθμό που είναι στρογγυλοποιη- μένος στον πλησιέστερο ακέραιο.

42 Confirm Box Εμφάνιση ενός Πλαισίου Επιβεβαίωσης (Confirm Box) var name = confirm("Κάντε κλικ σ’ ένα πλήκτρο") if (name == true) { document.write("Κάνατε κλικ στο OK") } else { document.write("Κάνατε κλικ στο Cancel") }

43 Prompt Box Εμφάνιση ενός Πλαισίου Προτροπής (Prompt Box) var name = prompt("Γράψτε το όνομά σας","") if (name != null && name != "") { document.write("Γεια σου " + name) }

44 Εμφάνιση Νέου Παραθύρου (pop-up window) function openwindow() { window.open("http://www.line.gr") } <input type=button value="Εμφάνιση Παραθύρου" onclick="openwindow()">

45 Εμφάνιση Νέου Παραθύρου (pop-up window) με Ιδιότητες 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") } <input type="button" value="Εμφάνιση Παραθύρου" onclick="openwindow()">

46 Εμφάνιση Νέου Παραθύρου με Πλήρες Μέγεθος function openwindow() { w_height=screen.availheight w_width=screen.availwidth window.open("default.asp", "", "height=" + w_height +", width=" + w_width + ", left=0, top=0") } <input type=button value="Εμφάνιση Παραθύρου" onclick="openwindow()">

47 Εμφάνιση Νέου Παραθύρου με Συγκεκριμένες Διαστάσεις&Θέση function openwindow() { window.open("http://www.lne.gr", "my_new_window", "width=400, height=400, top=0, left=0") } <input type="button" value="Εμφάνιση Παραθύρου" onclick="openwindow()">

48 Εμφάνιση Πολλών Νέων Παραθύρων Ταυτόχρονα function openwindow() { window1=window.open("http://www.florina.gr/") window2=window.open("http://www.line.gr/") } <input type=button value="Εμφάνιση Παραθύρων" onclick="openwindow()">

49 Κλείσιμο Παραθύρου function openwindow() { mywindow=window.open("http://www.line.gr", "my_new_window", "width=300, height=300") } function closewindow() { mywindow.close() } <input type=button value="Εμφάνιση Παραθύρου" onclick="openwindow()"> <input type=button value="Κλείσιμο Παραθύρου" onclick="closewindow()">

50 Αλλαγή του URL Πώς να στείλουμε τον πελάτη (client) σ’ ένα νέο url/ιστοσελίδα. function locate() { location="http://www.line.gr/" } <input type="button" onclick="locate()" value="Νέα Τοποθεσία (URL)">

51 Εμφάνιση του source code function source() { location="view-source : " + window.location.href } <input type="button" value="Ο Πηγαίος Κώδικας της Σελίδας" onclick="source()">

52 Προσθήκη στα Αγαπημένα function bookmark() { window.external.AddFavorite("http://www.line.gr","Η Εταιρεία Line") } <input type="button" onclick="bookmark()" value="Κάντε κλικ εδώ για προσθήκη της σελίδας στα αγαπημένα (bookmark – favorites) ">

53 Δημιουργία Home Page function makeDefault(element) { element.style.behavior='url(#default#homepage)'; element.setHomePage('http://www.line.gr'); } Κάντε κλικ στο πλήκτρο εντολής (button) για να γίνει η σελίδα Line η αρχική σας σελίδα (default home page). <input type="button" onclick="makeDefault(this)" value="Κάντε την Line την αρχική σας σελίδα">

54 Ανανέωση (Refresh, Reload) function refresh() { location.reload() } <input type="button" value="Ανανέωση (Refresh)" onclick="refresh()">

55 Μήνυμα στη Γραμμή Κατάστασης function load() { window.status = "Γράψτε εδώ το μήνυμά σας" } Δείτε τη γραμμή κατάστασης (status bar)

56 Εκτύπωση Ιστοσελίδας function printpage() { window.print() } <input type="button" value="Εκτύπωση της σελίδας" onclick="printpage()">

57 Εφέ Κύλισης Ιστοσελίδας function scrolldown() { for (i=1; i<=600; i++) { window.scroll(1, i) } <input type="button" value="Κύλιση (Scroll)" onclick="scrolldown()"> Κάντε κλικ στο πλήκτρο εντολής Scroll για να δείτε το εφέ

58 Επικύρωση e-mail σε Φόρμα Ελέγχουμε αν το πεδίο κειμένου περιέχει τον χαρακτήρα @. function validate() { x=document.myForm at=x.myEmail.value.indexOf("@") if (at == -1) { alert("Δεν είναι ένα έγκυρο e-mail") return false } } <form name="myForm" action="submitpage.html" onsubmit="return validate()"> Το e-mail σας :

59 Επικύρωση Πεδίου σε Φόρμα με Μέγιστες και Ελάχιστες Τιμές function validate() { x=document.myForm txt=x.myInput.value if (txt>=1 && txt<=5) { return true } else { alert("Πρέπει να έχει τιμές από 1 έως 5") return false } } <form name="myForm" action="submitpage.html" onsubmit="return validate()"> Εισάγετε μια τιμή από 1 έως 5 :

60 Επικύρωση Πεδίου σε Φόρμα με το Πλήθος των Χαρακτήρων του function validate() { x=document.myForm input=x.myInput.value if (input.length>5) { alert("Όχι περισσότερους από 5 χαρακτήρες") return false } else { return true } } <form name="myForm" action="submitpage.html" onsubmit="return validate()"> Μην γράψετε περισσότερους από 5 χαρακτήρες :

61 Εστίαση (Focus) σε Πεδίο Κειμένου Φόρμας function setfocus() { document.forms[0].field.focus() } <input type="button" value="Get Focus" onclick="setfocus()">

62 Επιλογή (Selection) Πεδίου Κειμένου Φόρμας function setfocus() { document.forms[0].field.select() document.forms[0].field.focus() } <input type="text" name="field" size="30" value="Φλώρινα"> <input type="button" value="Selected" onclick="setfocus()">

63 Εργασία με Πλήκτρα Επιλογής (Radio Buttons) function check(browser) { document.forms[0].answer.value=browser } Ο αγαπημένος σας (browser); <input type="radio" name="browser" onclick="check(this.value)" value="Explorer"> Microsoft Internet Explorer <input type="radio" name="browser" onclick="check(this.value)" value="Netscape"> Netscape Navigator

64 Εργασία με Πλαίσια Ελέγχου (CheckBoxes) 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 } Πώς πίνετε τον καφέ σας; Με γάλα (cream) Με ζάχαρη <input type="button" name="test" onclick="check()" value="Παραγγελία (Order)">

65 Εργασία με Πτυσσόμενη Λίστα (DropDown List) function put() { option=document.forms[0].dropdown.options\ [document.forms[0].dropdown.selectedIndex].text txt=option document.forms[0].favorite.value=txt } Επιλέξτε τον αγαπημένο σας φυλλομετρητή : Internet Explorer Netscape Navigator Ο αγαπημένος σας φυλλομετρητής είναι : <input type="text" name="favorite" value="Internet Explorer">

66 Εντοπισμός του Φυλλομετρητή του Χρήστη (Client) document.write("Χρησιμοποιείτε τον : "+ navigator.appName) …

67 Εμφάνιση Στοιχείων του Χρήστη document.write("Φυλλομετρητής : ") document.write(navigator.appName + " ") document.write("Browse Version : ") document.write(navigator.appVersion + " ") document.write("Code : ") document.write(navigator.appCodeName + " ") document.write("Platform : ") document.write(navigator.platform + " ") document.write("Referrer : ") document.write(document.referrer + " ")

68 Εμφάνιση Στοιχείων της Οθόνης του Χρήστη document.write("Ανάλυση Οθόνης : ") document.write(screen.width + "*") document.write(screen.height + " ") document.write("Διαθέσιμος Πλάτος και Ύψος : ") document.write(window.screen.availWidth + "*") document.write(window.screen.availHeight+ " ") document.write("Βάθος Χρώματος : ") document.write(window.screen.colorDepth + " ")