2η ΣΥΝΑΝΤΗΣΗ ΚΑΘΗΓΗΤΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΥΤΙΚΗΣ ΜΑΚΕ ΟΝΙΑΣ

Transcript

1 2η ΣΥΝΑΝΤΗΣΗ ΚΑΘΗΓΗΤΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΥΤΙΚΗΣ ΜΑΚΕ ΟΝΙΑΣ Τεχνικές Προγραµµατισµού στην JavaScript Εισηγητής : Στυλιάδης Κων/νος Πτολεµαΐδα, 25 Οκτ 2004 Τι Είναι η JavaScript Η JavaScript είναι µια γλώσσα συγγραφής σεναρίων (scripting language). Η JavaScript µπορεί να τοποθετηθεί µέσα σε µια HTML σελίδα ανάµεσα στα tags <script> και. Όταν υπάρχει κώδικας της JavaScript µέσα σ ένα HTML έγγραφο, ο φυλλοµετρητής διαβάζει την HTML και µεταφράζει (interprets) την JavaScript. ΟκώδικαςτηςJavaScript µπορείναεκτελεσθείαµέσως ή αργότερα όταν λάβει χώρα ένα συµβάν. ηµιουργήθηκε από την Netscape µε αρχικό όνοµα LiveScript. ιαφορές Java και JavaScript ιαφορές Java και JavaScript Java 1. Περίπλοκη στη χρήση. 2. Χρειάζεται το JDK (Java Developer s Kit). 3. Τα προγράµµατα µεταγλωττίζονται σε εκτελέσιµα αρχείακαι ενσωµατώνονται στις σελίδες της HTML µε την ετικέτα <APPLET>. Οι φυλλοµετρητές βλέπουν την ετικέτα και φορτώνουν και τρέχουν το Java applet. JavaScript 1. Σχετικά εύκολη στη χρήση. 2. Χρειάζεται µόνο ένας φυλλοµετρητής συµβατός µε JavaScript. 3. Τα προγράµµατα ενσωµατώνονται στις σελίδες της HTML µετηµορφή σεναρίου και δεν χρειάζονται µεταγλώττιση ή διερµήνευση. Java 1. Οι εφαρµογές της Java είναι σχετικά αργές. 2. Η Java είναι µια πλήρης γλώσσα προγραµµατισµού µε πολλές δυνατότητες. 3. Η Java είναι προσανατολισµένη στο αντικείµενο και είναι µια καθαρά αντικειµενοστραφής γλώσσα προγραµµατισµού. 4. Η Java έχει αυστηρούς κανόνες στη χρήση των µεταβλητών. JavaScript 1. Η JavaScript εκτελείται πολύ γρήγορα. 2. Η JavaScript είναι πιο κατάλληλη για απλές χρήσεις. 3. Η JavaScript είναι βασισµένη στο αντικείµενο, αλλά δεν είναι µια αληθινή αντικειµενοστραφής γλώσσα προγραµµατισµού. 4. Η JavaScript χαρακτηρίζεται από χαλαρότητα ως προς τις µεταβλητές. Τι Μπορεί να Κάνει η JavaScript Η JavaScript προσφέρει στους σχεδιαστές της HTML ένα προγραµµατιστικό εργαλείο, δηλ. εντολές όπως if, while, switch, for κ.ά., που δεν υπάρχουν στην HTML. Η JavaScript µπορεί να εµφανίσει δυναµικό κείµενο σε µια HTML σελίδα. Η JavaScript µπορεί να αντιδράσει σε συµβάντα (events). Η JavaScript µπορείναδιαβάσεικαιναγράψεισε στοιχεία της HTML. Η JavaScript µπορεί να χρησιµοποιηθεί για επικύρωση δεδοµένων σε φόρµες. Τι Μπορούµε ούµε να Κάνουµε µε την JavaScript Να προσδώσουµεζωντάνιαστιςιστοσελίδεςµας : Να εµφανίσουµε κυλιόµενα µηνύµατα στη γραµ-µή κατάστασης του φυλλοµετρητή. Να επικυρώσουµε (ελέγξουµε) τα περιεχόµενα των πεδίων µιας φόρµας. Να κάνουµε υπολογισµούς µε τα πεδία κειµένου µιας φόρµας. Να εµφανίσουµε προειδοποιητικάµηνύµατα στον χρήστη (επισκέπτη) της ιστοσελίδας. Να δηµιουργήσουµε εφέ κίνησης. Να προσθέσουµε οριζόντια ή κατακόρυφα µενού και πάρα πολλά άλλα. 1

2 Πώς Εισάγεται η JavaScript Με το tag <script> και το χαρακτηριστικό (attribute) language, ως εξής : <script language="javascript"> ή Ανάµεσα στα tags <script> και πρέπει να γράψουµε τον κώδικα της JavaScript. Η εντολή για να εµφανίσουµε κάποιο κείµενο σε µια σελίδα είναι η document.write : document.write("γεια σας από τη Φλώρινα") Το σύµβολο ; είναι προαιρετικό στο τέλος των εντολών. Πώς Εισάγεται η JavaScript Με το tag <script> και το χαρακτηριστικό (attribute) language, ως εξής : <script language="javascript"> ή Ανάµεσα στα tags <script> και πρέπει να γράψουµε τον κώδικα της JavaScript. Η εντολή για να εµφανίσουµε κάποιο κείµενο σε µια σελίδα είναι η document.write : document.write("γεια σας από τη Φλώρινα") Το σύµβολο ; είναι προαιρετικό στο τέλος των εντολών. Πρώτο Παράδειγµα function message() alert("αυτό το alert box κλήθηκε από το συµβάν onload") <body onload="message()"> Πού Τοποθετείται η JavaScript Scripts στο Τµήµα Head Τα scripts που πρέπει να εκτελεσθούν όταν κληθούν ή όταν προκαλείται ένα συµβάν (event) τοποθετούνται στο τµήµα head. Όταν τοποθετούµε έναscript στο τµήµα head, τότε είναι σίγουρο ότι αυτό θα φορτωθεί πριν χρησιµοποιηθεί. <script language="javascript"> εντολές Πού Τοποθετείται η JavaScript Scripts στο Τµήµα Body Τα scripts που πρέπει να εκτελεσθούν όταν φορτώνεται η σελίδα τοποθετούνται στο τµήµα body. Όταν τοποθετούµε έναscript στο τµήµα body, τότε αυτό συµµετέχει στη διαµόρφωση του περιεχοµένου της σελίδας. <script language="javascript"> εντολές Τα Εξωτερικά Scripts Τα εξωτερικά scripts είναι αρχεία που περιέχουν κώδικα JavaScript, χωρίς το tag <script>, και έχουν επέκταση.js. Τα ενωµατώνουµε σε µια ιστοσελίδα µε το tag <script> και το χαρακτηριστικό src, ως εξής : <script src="file01.js"> Τοποθετούµε το εξωτερικό script εκεί ακριβώς που θα γράφαµε κανονικά το script. 2

3 Οι Μεταβλητές (Variables) Κανόνες για τα ονόµατα των µεταβλητών : Τα ονόµατα των µεταβλητών ξεχωρίζουν τα πεζά από τα κεφαλαία γράµµατα (case sensitive). Πρέπει να αρχίζουν µ ένα γράµµα ή µε τον χαρακτήρα _ (underscore). Η χρήση του var είναι προαιρετική. Οι µεταβλητές µπορούν να αλλάζουν τύπο δεδοµένων κατά την εκτέλεση του κώδικα. Οι Τελεστές Εκχώρησης =, καταχώριση τιµής, π.χ. a = 5; +=, αύξηση και καταχώριση, π.χ. a += 5; -=, µείωση και καταχώριση, π.χ. a -= 5; *=, πολλαπλασιασµός και καταχώριση, π.χ. a *= 5; /=, διαίρεση και καταχώριση, π.χ. a /= 5; %=, ακέραιο υπόλοιπο και καταχώριση, π.χ. a %= 5; ++, αύξηση κατά ένα, π.χ. a++; ή ++a; --, µείωση κατά ένα, π.χ. a--; ή --a; Οι Αριθµητικοί Τελεστές +, πρόσθεση. -, αφαίρεση. *, πολλαπλασιασµός. /, διαίρεση. %, ακέραιο υπόλοιπο (modulus). Οι Τελεστές Σύγκρισης ==, ίσο µε.!=, όχι ίσο µε. > < >= <= Οι Λογικοί Τελεστές &&, and., or.!, not. Οι Συναρτήσεις (Functions) Απλή Κλήση Συνάρτησης Πώς να καλέσουµε µια συνάρτηση (function). function myfunction() alert("γεια σας") <input type="button" onclick="myfunction()" value="κλήση συνάρτησης"> <p>με κλικ στο button, θα κληθεί η συνάρτηση που θα εµφανίσει ένα µήνυµα.</p> 3

4 Οι Συναρτήσεις (Functions) Συνάρτηση µεορίσµατα (Arguments) Πώς να περάσουµε µεταβλητές σε µια συνάρτηση και πώς να χρησιµοποιήσουµε τιςτιµές τους µέσα στη συνάρτηση. function myfunction(txt) alert(txt) <input type="button" onclick="myfunction('καληµέρα!')" value="το Πρωί"> <input type="button" onclick="myfunction('καλό Απόγευµα!')" value="το Απόγευµα"> <p> Με κλικ σ ένα από τα πλήκτρα εντολής, θα κληθεί η συνάρτηση και θα εµφανίσει (alert) το όρισµα που της µεταβιβάζεται. </p> Οι Συναρτήσεις (Functions) Συνάρτηση µεορίσµατα που Επιστρέφει Τιµή Βρίσκει το άθροισµα (sum) δύο ορισµάτωνκαιεπιστρέφειτοαποτέλεσµα. function total(numbera, numberb) return numbera + numberb document.write(total(2, 3)) <p> Το script στο τµήµα body καλεί µια συνάρτηση που έχει δύο ορίσµατα. </p> <p> Η συνάρτηση επιστρέφει το άθροισµα (sum) αυτών των δύο ορισµάτων.</p> Η Εντολή If Η Εντολή If... Εlse var d = new Date() var time = d.gethours() if (time < 10) document.write("<b> Καληµέρα </b>") <p> Αυτό το παράδειγµα δείχνει την εντολή If. </p> <p> Αν η ώρα στον φυλλοµετρητή είναι πριν τις 10, θα λάβουµε τον χαιρετισµό "Καληµέρα". </p> var d = new Date() var time = d.gethours() if (time < 10) document.write("<b> Καληµέρα </b>") else document.write("<b> Καλό Μεσηµέρι </b>") <p> Αυτό το παράδειγµα δείχνει την εντολή If... Else. Ανάλογα µε την ώρα, θα λάβουµε τον χαιρετισµό "Καληµέρα" ή "Καλό Μεσηµέρι". </p> Η Εντολή Switch Ο Τελεστής υπό Συνθήκη var d = new Date() theday=d.getday() switch (theday) case 6: document.write("σούπερ Σάββατο") break case 0: document.write("κυριακή για Ξεκούραση") break default: document.write("ηµέρα Εργασίας") <p> ιαφορετικός χαιρετισµός ανάλογα µε τηνηµέρα. Κυρ=0, ευτ=1, Τρ=2 κλπ. </p> Η JavaScript έχει και τον τελεστή υπό συνθήκη (conditional operator), που εκχωρεί µια τιµή σεµια µεταβλητή ανάλογα µεκάποιασυνθήκη. Ησύνταξή του είναι η εξής : Όνοµα_µεταβλητής µεταβλητής = (συνθήκη)? Τιµή1 : τιµή2 Παράδειγµα : greeting=(visitor=="pres")?"dear President ":"Dear " Αν η µεταβλητή visitor είναι ίση µε PRES, τότε καταχωρείται το string "Dear President " στη µεταβλητή greeting, ενώ αν η µεταβλητή visitor δεν είναι ίση µε PRES, τότε καταχωρείται το string "Dear " στη µεταβλητή greeting. 4

5 Ο Βρόχος For Πώς να χρησιµοποιήσουµε τον βρόχο For για να εµφανίσουµε τις επικεφαλίδες (headers) της HTML. for (i = 1; i <= 6; i++) document.write("<h" + i + "> Επικεφαλίδα : " + i) document.write("</h" + i + ">") Ο Βρόχος While Πώς να γράψουµε ένανβρόχοwhile. i = 0 while (i <= 5) document.write("αριθµός : " + i) document.write("<br>") i++ <p> Το <b>i</b> γίνεται ίσο µε 0 και ενώ (while) το <b>i</b> είναι µικρότερο από ή ίσο µε 5, ο βρόχος θα συνεχίσει να εκτελείται. Το <b>i</b> αυξάνει κατά 1 κάθε φορά που εκτελείται ο βρόχος. </p> Ο Βρόχος Do While Χρήσιµες Οδηγίες i = 0 do document.write("αριθµός : " + i) document.write("<br>") i++ while (i <= 5) <p> Το <b>i</b> γίνεται ίσο µε 0. Ο βρόχος εκτελείται </p> <p> Το <b>i</b> αυξάνει κατά 1 κάθε φορά που εκτελείται οβρόχοςκαι ενώ (while) το <b>i</b> είναι µικρότερο από ή ίσο µε 5, ο βρόχος θα συνεχίσει να εκτελείται. </p> Η JavaScript Είναι Case Sensitive Η συνάρτηση myfunction δεν είναι το ίδιο µε την myfunction. Συνεπώς πρέπει να προσέχουµεταπεζάκαιτακεφαλαίαγράµµατα. ιάσπαση µιας Γραµµής Κώδικα Μπορούµε να διασπάσουµε µια γραµµή κώδικα µε τον χαρακτήρα \ (backslash), ως εξής : document.write("hello \ World!") Χρήσιµες Οδηγίες Ειδικοί Χαρακτήρες (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). Περιέχει πολλές γραµµές */ Το Αντικείµενο String Η JavaScript θεωρεί τις συµβολοσειρές ως αντικείµενα String και διαθέτει πολλές µεθόδους (ενσωµατωµένες συναρτήσεις) γιαναχειρισθείτα αντικείµενα String. a = "Florina"; Για να δηµιουργήσουµε ένα καινούργιο αντικείµενο String, µπορούµε ναχρησιµοποιήσουµε τον τρόπο που είδαµε προηγουµένως ή να ακολουθήσουµε την τυπική σύνταξη δηµιουργίας αντικειµένου, όπως : a = new String( Florina"); 5

6 Μέθοδοι του Αντικειµένου 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) γράµµατα αντίστοιχα. var str=("γεια σας από τη Φλώρινα!") document.write(str.tolowercase()) document.write("<br>") document.write(str.touppercase()) Το Αντικείµενο 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, όσο το πλήθος των στοιχείων του πίνακα. ηµιουργία Πίνακα Ένας άλλος τρόπος δηµιουργίας πίνακα που δίνει το ίδιο αποτέλεσµα µε τον προηγούµενο. var famname = new Array("Αντώνης", "Σπύρος", "Βασίλης", "Γιάννης", "Κώστας", "Ιωάννα") for (i=0; i<famname.length; i++) document.write(famname[i] + "<br>") Μέθοδοι του Αντικειµένου Array length Επιστρέφει τον αριθµό των στοιχείων ενός πίνακα. reverse() Επιστρέφει τον πίνακα αντεστραµµένο (reversed). slice() Επιστρέφει ένα συγκεκριµένο τµήµαενόςπίνακα. sort() Επιστρέφει έναν ταξινοµηµένο πίνακα. 6

7 Το Αντικείµενο 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, :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 µε τιµή getday() Επιστρέφει την ηµέρα της εβδοµάδας (weekday) µε τιµή 0-6. getmonth() Επιστρέφει τον µήνα (month) µετιµή getfullyear() Επιστρέφει το έτος (year) µε τιµή π.χ gethours() Επιστρέφει την ώρα (hour) µετιµή getminutes() Επιστρέφει τα λεπτά (minutes) µετιµή getseconds() Επιστρέφει τα δευτερόλεπτα (seconds) µετιµή Το Αντικείµενο 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)) Μέθοδοι του Αντικειµένου MathM max() Επιστρέφει τον µεγαλύτερο από δύο αριθµούς. min() Επιστρέφει τον µικρότερο από δύο αριθµούς. random() Επιστρέφει έναν τυχαίο αριθµό ανάµεσα στο 0 και το 1. round() Επιστρέφει έναν αριθµό που είναι στρογγυλοποιη-µένος στον πλησιέστερο ακέραιο. Confirm Box Εµφάνιση ενός Πλαισίου Επιβεβαίωσης (Confirm Box) var name = confirm("κάντε κλικ σ ένα πλήκτρο") if (name == true) document.write("κάνατε κλικ στο OK") else document.write("κάνατε κλικ στο Cancel") 7

8 Prompt Box Εµφάνιση ενός Πλαισίου Προτροπής (Prompt Box) var name = prompt("γράψτε το όνοµά σας","") if (name!= null && name!= "") document.write("γεια σου " + name) Εµφάνιση Νέου Παραθύρου (pop-up window) <script language=javascript> function openwindow() window.open(" <input type=button value="εµφάνιση Παραθύρου" onclick="openwindow()"> Εµφάνιση Νέου Παραθύρου (pop-up window) µε Ιδιότητες function openwindow() window.open(" "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()"> Εµφάνιση Νέου Παραθύρου µε Πλήρες Μέγεθος <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") <input type=button value="εµφάνιση Παραθύρου" onclick="openwindow()"> Εµφάνιση Νέου Παραθύρου µε Συγκεκριµένες ιαστάσεις&θέση function openwindow() window.open(" "my_new_window", "width=400, height=400, top=0, left=0") <input type="button" value="εµφάνιση Παραθύρου" onclick="openwindow()"> Εµφάνιση Πολλών Νέων Παραθύρων Ταυτόχρονα <script language=javascript> function openwindow() window1=window.open(" window2=window.open(" <input type=button value="εµφάνιση Παραθύρων" onclick="openwindow()"> 8

9 Κλείσιµο Παραθύρου Αλλαγή του URL <script language=javascript> function openwindow() mywindow=window.open(" "my_new_window", "width=300, height=300") function closewindow() mywindow.close() <input type=button value="εµφάνιση Παραθύρου" onclick="openwindow()"> <input type=button value="κλείσιµο Παραθύρου" onclick="closewindow()"> Πώς να στείλουµε τονπελάτη(client) σ ένα νέο url/ιστοσελίδα. function locate() location=" <input type="button" onclick="locate()" value="νέα Τοποθεσία (URL)"> Εµφάνιση του source code Προσθήκη στα Αγαπηµένα <script language="javascript"> function source() location="view-source : " + window.location.href <input type="button" value="ο Πηγαίος Κώδικας της Σελίδας" onclick="source()"> function bookmark() window.external.addfavorite(" Εταιρεία Line") <input type="button" onclick="bookmark()" value="κάντε κλικ εδώ για προσθήκη της σελίδας στα αγαπηµένα (bookmark favorites) "> ηµιουργία Home Page Ανανέωση (Refresh, Reload) function makedefault(element) element.style.behavior='url(#default#homepage)'; element.sethomepage(' <p> Κάντε κλικ στο πλήκτρο εντολής (button) γιαναγίνειη σελίδα Line ηαρχικήσαςσελίδα(default home page). </p> <input type="button" onclick="makedefault(this)" value="κάντε την Line την αρχική σας σελίδα"> function refresh() location.reload() <input type="button" value="ανανέωση (Refresh)" onclick="refresh()"> 9

10 Μήνυµα στη Γραµµή Κατάστασης function load() window.status = "Γράψτε εδώ το µήνυµά σας" <body onload="load()"> <p> είτε τη γραµµή κατάστασης (status bar) </p> Εκτύπωση Ιστοσελίδας function printpage() window.print() <input type="button" value="εκτύπωση της σελίδας" onclick="printpage()"> Εφέ Κύλισης Ιστοσελίδας Επικύρωση σε Φόρµα function scrolldown() for (i=1; i<=600; i++) window.scroll(1, i) <input type="button" value="κύλιση (Scroll)" onclick="scrolldown()"> <p>κάντε κλικ στο πλήκτρο εντολής Scroll για να δείτε το εφέ</p> Ελέγχουµε αντοπεδίοκειµένου περιέχει τον function validate() x=document.myform at=x.my .value.indexof("@") if (at == -1) alert(" εν είναι ένα έγκυρο ") return false <form name="myform" action="submitpage.html" onsubmit="return validate()"> Το σας : <input type="text" name="my "> <input type="submit" value="submit"> Επικύρωση Πεδίου σε Φόρµα µε Μέγιστες και Ελάχιστες Τιµές 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 : <input type="text" name="myinput"> <input type="submit" value="submit"> Επικύρωση Πεδίου σε Φόρµα µε το Πλήθος των Χαρακτήρων του 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 χαρακτήρες : <input type="text" name="myinput"> <input type="submit" value="send input"> 10

11 Εστίαση (Focus) σε Πεδίο Κειµένου Φόρµας function setfocus() document.forms[0].field.focus() <input type="text" name="field" size="30"> <input type="button" value="get Focus" onclick="setfocus()"> Επιλογή (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()"> Εργασία µε Πλήκτρα Επιλογής (Radio Buttons) function check(browser) document.forms[0].answer.value=browser Οαγαπηµένος σας (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> <input type="text" name="answer"> Εργασία µε Πλαίσια Ελέγχου (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 Πώς πίνετε τον καφέ σας; <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)"> Εργασία µε Πτυσσόµενη Λίστα (DropDown List) function put() option=document.forms[0].dropdown.options\ [document.forms[0].dropdown.selectedindex].text txt=option document.forms[0].favorite.value=txt <p> Επιλέξτε τον αγαπηµένο σας φυλλοµετρητή : <select name="dropdown" onchange="put()"> <option> Internet Explorer <option> Netscape Navigator </select></p> <p> Οαγαπηµένος σας φυλλοµετρητής είναι : <input type="text" name="favorite" value="internet Explorer"></p> Εντοπισµός του Φυλλοµετρητή του Χρήστη (Client) document.write("χρησιµοποιείτε τον : "+ navigator.appname) 11

12 Εµφάνιση Στοιχείων του Χρήστη 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>") Εµφάνιση Στοιχείων της Οθόνης του Χρήστη 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>") 12