Client-side γλώσσες περιγραφής σεναρίων - Javascript. Client - side γλώσσες περιγραφής σεναρίων

Transcript

1 Client-side γλώσσες περιγραφής σεναρίων - Javascript Client - side γλώσσες περιγραφής σεναρίων Γενικά τα client-side σενάρια είναι μια κατηγορία προγραμμάτων που εκτελούνται στην πλευρά των χρηστών οι οποίοι επισκέπτονται κάποιο συγκεκριμένο Web site που προσφέρει αυτά τα προγράμματα σε συνδυασμό με τα περιεχόμενα του site (ιστοσελίδες). Η εκτέλεση των σεναρίων γίνεται από ένα πρόγραμμα που καλείται μηχανή εκτέλεσης σεναρίων. Το πρόγραμμα αυτό είναι ενσωματωμένο στο browser του εκάστοτε χρήστη. Ένα client-side σενάριο μπορεί να περιέχεται μέσα σε μια ιστοσελίδα του site. Επίσης είναι δυνατόν ένα client-side σενάριο να περιέχεται σε ένα ξεχωριστό αρχείο στο οποίο να αναφέρεται η ιστοσελίδα. Κατόπιν αιτήσεως του χρήστη στο Web server στον οποίο είναι εγκατεστημένο το site, όλα τα απαραίτητα αρχεία (η ιστοσελίδα που περιέχει ένα ή περισσότερα σενάρια, ή η ιστοσελίδα και τα αρχεία που περιέχουν τα σενάρια στα οποία αναφέρεται αυτή) φορτώνονται στο browser του χρήστη. Τα σενάρια εκτελούνται από τη μηχανή εκτέλεσης σεναρίων που είναι ενσωματωμένη στο browser και τα περιεχόμενα της ιστοσελίδας εμφανίζονται στο χρήστη μαζί με δεδομένα τα οποία πιθανόν προέκυψαν από την εκτέλεση των σεναρίων. Ένας περαιτέρω στόχος των client-side σεναρίων είναι η δυναμική αναπροσαρμογή και επεξεργασία των περιεχομένων της ιστοσελίδας που έχει φορτωθεί στο browser του χρήστη. Η αναπροσαρμογή γίνεται με βάση τα δεδομένα της ιστοσελίδας (που μπορεί να έχουν προκύψει από ένα server-side σενάριο) και ενέργειες του χρήστη από τις οποίες προκύπτουν δεδομένα (π.χ. εισαγωγή δεδομένων σε μια φόρμα ή ένα πίνακα) και γεγονότα (π.χ. πάτημα κουμπιού, μετακίνηση ποντικιού) που επεξεργάζεται ένα client-side σενάριο. Η αναπροσαρμογή της ιστοσελίδας συνήθως γίνεται χωρίς κάποια περαιτέρω επικοινωνία με το Web server στον οποίο είναι εγκαταστημένο το site. Πριν προχωρήσουμε στην πιο αναλυτική παρουσίαση μιας ευρέως διαδεδομένης γλώσσας περιγραφής clientside σεναρίων είναι απαραίτητο να ξεκαθαρίσουμε τη διαφορά μεταξύ client-side και server-side σεναρίων. Εν αντιθέσει με τα client-side σενάρια τα server-side σενάρια εκτελούνται από το Web server στον οποίο είναι εγκατεστημένο το Web site. Στόχος των server-side σεναρίων είναι η δυναμική κατασκευή των περιεχομένων των ιστοσελίδων που κατόπιν φορτώνονται στο browser του χρήστη (π.χ. τα αποτελέσματα μιας αναζήτησης). Η κατασκευή των ιστοσελίδων γίνεται με βάση δεδομένα που είναι αποθηκευμένα στο site (π.χ. κατάλογος βιβλίων) και δεδομένα που (π.χ χαρακτηριστικά του χρήστη, προτιμήσεις, λέξεις κλειδιά για αναζήτηση) έχει αποστείλει προηγουμένως ο χρήστης στο Web server μέσω κάποιας αίτησης που προέκυψε κατά τη διάρκεια της επίσκεψης του χρήστη σε κάποια άλλη ιστοσελίδα του ιδίου site. Kάποιες ευρέως διαδεδομένες γλώσσες περιγραφής server-side σεναρίων που αξίζει να αναφερθούν ενδεικτικά είναι οι PHP, JSP, ASP. Αντίστοιχα ανάμεσα στις πλέον διαδεδομένες γλώσσες περιγραφής client-side σεναρίων ξεχωρίζει η Javascript στην οποία θα επικεντρωθούμε στον Οδηγό αυτό.

2 Με τη JavaScript μπορείτε να φτιάξετε σενάρια που να εκτελούν αυτόματες εργασίες, π.χ όταν μια σελίδα του Web ανοίγει ή κλείνει. Επίσης μπορείτε να κάνετε την JavaScript να εκτελεί ενέργειες ανταποκρινόμενη σε ένα συγκεκριμένο γεγονός. Για παράδειγμα όταν ο χρήστης επιλέγει ένα κουμπί ή ένα σύνδεσμο, όταν εστιάζει από ένα στοιχείο μιας φόρμας σε ένα άλλο στοιχείο της κ.ο.κ. Οι ενέργειες αυτές μπορεί να είναι απλές. Τα σενάρια μπορεί να ανοίγουν νέα παράθυρα στον browser και να εμφανίζουν συγκεκριμένα HTML έγγραφα ή να παρουσιάζουν μια σελίδα επιλεγμένη από τον κατάλογο ιστορικού του browser. Μπορεί επίσης να είναι και περίπλοκες δηλαδή ένα σενάριο μπορεί να ελέγχει τα περιεχόμενα μιας φόρμας που θέλει να υποβάλει ένας χρήστης και στη συνέχεια να προειδοποιεί τον χρήστη αν τα δεδομένα είναι λάθος. Το σενάριο μπορεί να ψάξει για πληροφορίες σε μια μικρή βάση δεδομένων ή να κάνει πολύπλοκους υπολογισμούς οικονομικών στοιχείων. Ορισμός και εκτέλεση σεναρίων Javascript. Ο ορισμός ενός σεναρίου Javascript μέσα σε μια HTML ιστοσελίδα μπορεί να γίνει ανάμεσα σε ετικέτες <script language = javascript > Γενικά, τα σενάρια εκτελούνται αμέσως μόλις μια ιστοσελίδα φορτωθεί σε ένα browser. Αυτό δεν είναι πάντα επιθυμητό. Σε αρκετές περιπτώσεις θέλουμε ένα σενάριο να εκτελείται όταν φορτωθεί η ιστοσελίδα, ενώ σε άλλες περιπτώσεις επιθυμούμε να εκτελείται όταν ο χρήστης κάνει κάποια ενέργεια (πάτημα κουμπιού, μετακίνηση ποντικιού). Στην πρώτη περίπτωση, τοποθετούμε τα σενάρια στο <body> τμήμα της ιστοσελίδας. Στην δεύτερη περίπτωση τοποθετούμε τα σενάρια στο <head> </head> τμήμα της ιστοσελίδας. Παραδείγματα αυτών των δύο περιπτώσεων δίνονται παρακάτω: Σενάρια στο body. <html> <head> </head> <body> <script language="javascript">... Σενάρια στο head <html> <head> <script language="javascript">... </head> Όπως αναφέρθηκε προηγουμένως, τα σενάρια στο <head> </head> τμήμα της ιστοσελίδας εκτελούνται με βάση τις ενέργειες του χρήστη. Τα σενάρια αντιστοιχούν σε Javascript συναρτήσεις που περιγράφονται στο <head>

3 </head> τμήμα της ιστοσελίδας. Η εκτέλεση των συναρτήσεων αυτών επιτυγχάνεται με τον καθορισμό των γεγονότων που αντιστοιχούν στις ενέργειες του χρήστη που μας ενδιαφέρουν και τη συσχέτιση των γεγονότων αυτών με τις συναρτήσεις που πρέπει να εκτελεστούν. Τα προηγούμενα καθορίζονται ανάμεσα σε ετικέτες HTML στοιχείων της ιστοσελίδας που προσφέρουν τη δυνατότητα στο χρήστη να ενεργήσει και κατά συνέπεια να παράγει ένα γεγονός το οποίο θα έχει ως αποτέλεσμα την εκτέλεση μιας συνάρτησης. Ένα παράδειγμα δίνεται πιο κάτω. Η συνάρτηση myfunction() ορίζεται στο <head> </head> τμήμα της ιστοσελίδας. Στη φόρμα που ακολουθεί συσχετίζεται το πάτημα του κουμπιού της φόρμας με τη συνάρτηση. Αποτέλεσμα των προηγουμένων είναι η εκτέλεση της συνάρτησης όταν ο χρήστης πατήσει το κουμπί της φόρμας. <html> <head> <script language="javascript"> function myfunction() alert("hello"); </head> <body> <form> <input type="button" onclick="myfunction()" value="call function"> </form> <p> Πατώντας το κουμπί καλείται η συνάρτηση myfunction. </p> </html> Δεδομένα και Μεταβλητές. Οι βασικοί τύποι δεδομένων που μπορεί να διαχειριστεί κάποιος μέσω ενός σεναρίου Javascript είναι αριθμητικές τιμές (π.χ. 4, 3.14), αλφαριθμητικά (π.χ. hello world ) και λογικές τιμές true, false. Όσον αφορά στις αριθμητικές τιμές στη Javascript δεν γίνεται διάκριση μεταξύ ακεραίων και πραγματικών. Οι μεταβλητές σε ένα σενάριο Javascript είναι συμβολικά ονόματα με τα οποία μπορεί να γίνει αναφορά σε αριθμητικές τιμές, αλφαριθμητικά και λογικές τιμές. Μια μεταβλητή μπορεί να δηλωθεί χρησιμοποιώντας τη λέξη κλειδί var και το όνομα της μεταβλητής, ή ακόμα και χωρίς τη χρήση της λέξης κλειδί var. var x; var carname; Τιμές στις μεταβλητές αναθέτονται με τον τελεστή ανάθεσης =. x = 7; carname = lucile ; Τιμές μπορούν να ανατεθούν και κατά τη δήλωση των μεταβλητών. Αξίζει να αναφερθεί ότι σε μια μεταβλητή μπορεί να ανατεθούν τιμές οποιουδήποτε τύπου (αριθμητικές, λογικές, αλφαριθμητικά). var y = 19;

4 y = carim ; Στη Javascript υποστηρίζεται επίσης η δυνατότητα ορισμού πινάκων. var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; Τέλος ο προσδιοριστής const στη δήλωση μιας μεταβλητής σημαίνει ότι η τιμή της μεταβλητής αυτής δεν επιτρέπεται να αλλάξει κατά τη διάρκεια εκτέλεσης του σεναρίου. Τελεστές. Αριθμητικοί τελεστές. Τελεστής Περιγραφή Χρήση + Πρόσθεση δύο αριθμητικών τελεστέων ή var x = 2; συνένωση δύο αλφαριθμητικών. var y = 5; var z; z= x+y; var s = "Hello"+"World"; - Αφαίρεση δύο αριθμητικών τελεστέων. z = x-7 * Πολ/σμος δύο αριθμητικών τελεστέων. z = 5*2 / Διαίρεση δύο αριθμητικών τελεστέων. z = y/x % Υπόλοιπο διαίρεσης δύο αριθμητικών z = 7%2 τελεστέων. ++ Μοναδιαία αύξηση τελεστέου. var x=2; x++; y= ++x; y= x++; -- Μοναδιαία μείωση τελεστέου. x--; --x;

5 Συγκριτικοί τελεστές. Τελεστής Περιγραφή Χρήση = = Ισότητα μεταξύ τελεστέων. 3==8 -> false = == Ισότητα μεταξύ τελεστέων και τύπων var x=3; αυτών των τελεστέων var y="3"; x==y -> true x===y -> false < Μικρότερο. x<y <= Μικρότερο ή ίσο. 5<=x > Μεγαλύτερο. y>4 >= Μεγαλύτερο ή ίσο. x>=y Τελεστές Ανάθεσης Τελεστής Περιγραφή Χρήση = Απλή ανάθεση σε τελεστέο. y = x +3; += Προσθετική αύξηση και ανάθεση σε x += 4; <=> x = x + 4; τελεστέο. -= Αφαιρετική μείωση και ανάθεση σε x -= 4; <=> x = x - 4; τελεστέο. *= Πολλαπλασιαστική αύξηση και x *= 4; <=> x = x * 4; ανάθεση σε τελεστέο. /= Διαιρετική μείωση και ανάθεση σε x /= 4; <=> x = x / 4; τελεστέο..λογικοί Τελεστές. Τελεστής Περιγραφή Χρήση && Λογική Σύζευξη. (x<3 && y<=5) Λογικό Διάζευξη. (x<3 y<=5)! Λογική Άρνηση.!(x>3) Δυαδικοί Τελεστές Τελεστής Περιγραφή Χρήση & Δυαδική Σύζευξη. x & y Δυαδική Διάζευξη. x y ^ Δυαδική Αποκλειστική Διάζευξη. x ^ y << Αριστερή Ολίσθηση. x >> 3 >> Δεξιά Ολίσθηση y << 4

6 Ειδικοί Τελεστές. Τελεστής Περιγραφή Χρήση Συνθήκη? Επιστρέφει Τιμή1 αν ισχύει η συνθήκη ή x=(y<0)? 5: 10 Τιμή1: Τιμή2 αν δεν ισχύει η συνθήκη. Τιμή2 typeof Επιστρέφει τον τύπο της τιμής του τελεστέου var x = hello ; στον οποίο εφαρμόζεται. typeof x; -> string number string boolean Εντολές Συνθήκης. Από άποψη συντακτικού, οι εντολές συνθήκης στη Javascript μοιάζουν κατά πολύ με αντίστοιχες εντολές άλλων γλωσσών προγραμματισμού όπως η C, C++ και Java. Γενικά όπως και στις προαναφερθείσες γλώσσες, έχουμε τη δυνατότητα να χρησιμοποιήσουμε εντολές if, if-else και switch. Συνοπτικά στον παρακάτω πίνακα περιγράφονται αυτές οι εντολές και δίδονται σύντομα παραδείγματα χρήσης τους.

7 Εντολή Σύνταξη Χρήση if if (συνθήκη) /* εντολές */ if - else if (συνθήκη) /* εντολές */ else /* εντολές */ if (συνθήκη) /*εντολές*/ else if(συνθήκη) /*εντολές*/ else /*εντολές*/ switch switch (expression) case τιμήl : /*εντολές*/ break; case τιμή2: /*εντολές */ break;... default : /*εντολές*/ <html> <body> <script language="javascript"> var d = new Date(); var time = d.gethours(); if (time<10) document.write( "<b>good morning</b>"); else if (time>=10 && time<16) document.write( "<b>good day</b>"); else document.write( "<b>hello World!</b>"); <p> This example demonstrates the if..else. </p> </html> <html> <body> <script language="javascript"> // You will receive a different // greeting based // on what day it is. var d=new Date(); theday=d.getday(); switch (theday) case 5: document.write("finally Friday"); break; case 6: document.write("super Saturday"); break; case 0: document.write("sleepy Sunday"); break; default: document.write( "I'm looking forward!"); </html>

8 Εντολές Επανάληψης. Παρόμοια με τις εντολές συνθήκης, οι εντολές επανάληψης της Javascript μοιάζουν με αντίστοιχες εντολές άλλων γλωσσών προγραμματισμού όπως η C, C++ και Java. Γενικά υπάρχουν 3 είδη εντολών επανάληψης, for, while και do-while. Το συντακτικό κάθε μίας από αυτές παρουσιάζεται συνοπτικά στον παρακάτω πίνακα μαζί με σύντομα παραδείγματα χρήσης τους. Εντολή Σύνταξη Χρήση for for ( αρχική ανάθεση <html> μεταβλητής; συνθήκη; <body> αύξηση/μείωση μεταβλητής;) <script language="javascript"> var i=0; /*εντολές*/ for (i=0;i<=10;i++) document.write("the number is " + i); document.write("<br />"); </html> while while (συνθήκη) <html> /*εντολές*/ <body> <script language="javascript"> var i=0; while (i<=10) document.write("the number is " + i); document.write("<br />"); i=i+1; </html> do-while do <html> /*εντολές*/ <body> while(συνθήκη) <script language="javascript"> var i=0; do document.write("the number is " + i); document.write("<br />"); i=i+1; while (i<0); </html>

9 Συναρτήσεις. Μια συνάρτηση ορίζεται χρησιμοποιώντας τη λέξη κλειδί function. Εν συνεχεία ακολουθεί το όνομα της συνάρτησης και εντός παρενθέσεων μια λίστα παραμέτρων των οποίων τα ονόματα χωρίζονται με,. Αν η συνάρτηση δεν δέχεται κάποιες παραμέτρους τότε η λίστα που περιέχεται εντός παρενθέσεων είναι κενή. Τέλος ακολουθεί το μπλοκ εντολών της συνάρτησης εντός αγκίστρων. Ακολουθεί παράδειγμα συνάρτησης. function square(number) return number * number; Το μπλοκ εντολών μιας συνάρτησης εκτελείται όταν καλεστεί μια συνάρτηση με συγκεκριμένες τιμές για τις παραμέτρους της. square (5) Μια συνάρτηση μπορεί να είναι αναδρομική, δηλαδή να καλεί τον εαυτό της. function factorial(n) if ((n == 0) (n == 1)) return 1 else var result = (n * factorial(n-1) ); return result // Μπορεί να καλεστεί όπως φαίνεται πιο κάτω: a=factorial(1) // returns 1 b=factorial(2) // returns 2 c=factorial(3) // returns 6 d=factorial(4) // returns 24 e=factorial(5) // returns 120 Μια συνάρτηση μπορεί να δέχεται σαν παράμετρο μια άλλη συνάρτηση η οποία εν συνεχεία καλείται στο μπλοκ εντολών της πρώτης. function map(f,a) var result = new Array; for (var i = 0; i!= a.length; i++) result[i] = f(a[i]); return result; //κλήση της συνάρτησης map(function(x) return x * x * x, [0, 1, 2, 5, 10]); // επιστρέφει [0, 1, 8, 125, 1000].

10 Έτοιμες Συναρτήσεις. Στον παρακάτω πίνακα παρουσιάζονται συνοπτικά διάφορες βοηθητικές συναρτήσεις που προσφέρει έτοιμες η Javascript καθώς και παραδείγματα χρήσης τους. Οι συναρτήσεις αυτές αφορούν στα παρακάτω επιμέρους θέματα: 1. Έλεγχος τύπου δεδομένων και μετατροπές από ένα τύπο δεδομένων σε ένα άλλο. 2. Αποτίμηση εκφράσεων. 3. Δημιουργία βοηθητικών παραθύρων. parseint(x, [radix]) parsefloat(x) isnan(x) eval(s) alert(msg) confirm(msg) prompt(msg) Δέχεται σαν παράμετρο ένα αλφαριθμητικό και προσπαθεί να το μετατρέψει σε μια αντίστοιχη ακέραια αριθμητική τιμή. Παραδείγματα. parseint("3 chances") //returns 3 <!--[if!supportlinebreaknewline]--> <!--[endif]--> parseint(" 5 alive") //returns 5 <!--[if!supportlinebreaknewline]--> <!--[endif]--> parseint("i have 3 computers") //returns NaN <!--[if!supportlinebreaknewline]--> <!--[endif]--> parseint("17", 8) //returns 15 Δέχεται σαν παράμετρο ένα αλφαριθμητικό και προσπαθεί να το μετατρέψει σε μια αντίστοιχη πραγματική αριθμητική τιμή. Παράδειγμα. parsefloat("-3.98 points") //returns Δέχεται σαν παράμετρο ένα αλφαριθμητικό και επιστρέφει false αν το αλφαριθμητικό εκφράζει μια νόμιμη αριθμητική τιμή. Διαφορετικά επιστρέφει true. Δέχεται σαν παράμετρο ένα αλφαριθμητικό το οποίο εκφράζει μια Javascript έκφραση και την αποτιμά. Παράδειγμα. eval("8+3+1") //returns 12 <!--[if!supportlinebreaknewline]--> <!--[endif]--> Δέχεται σαν παράμετρο ένα αλφαριθμητικό και σαν αποτέλεσμα δημιουργεί ένα βοηθητικό παράθυρο στο οποίο εμφανίζεται το αλφαριθμητικό μαζί με ένα OK κουμπί που αποδεσμεύει το παράθυρο. Δέχεται σαν παράμετρο ένα αλφαριθμητικό και σαν αποτέλεσμα δημιουργεί ένα βοηθητικό παράθυρο στο οποίο εμφανίζεται το αλφαριθμητικό μαζί με ένα OK και ένα Cancel κουμπί. Παράδειγμα. var yourstate= confirm( "Are you sure you are ok?") if (yourstate) alert("good!") Δέχεται σαν παράμετρο ένα αλφαριθμητικό και σαν αποτέλεσμα δημιουργεί ένα βοηθητικό παράθυρο στο οποίο εμφανίζεται το αλφαριθμητικό μαζί με ένα OK, ένα Cancel κουμπί μια περιοχή στην οποία ο χρήστης μπορεί να εισάγει κείμενο. Παράδειγμα. var thename= prompt("please enter your name") alert(thename)

11 Χειριστές Συμβάντων Στη JavaScript μπορούμε να δηλώσουμε χειριστές συμβάντων ώστε να αντιδρά το πρόγραμμα μόλις συμβαίνει ένα γεγονός. Για παράδειγμα αν θέλουμε να συμβεί κάτι μόλις πατήσει ο χρήστης με το ποντίκι πάνω σε ένα στοιχείο της ιστοσελίδας προσθέτουμε τον χειριστή onclick στο στοιχείο αυτό. Το παρακάτω κουμπί μόλις πατηθεί θα εμφανίσει ένα μήνυμα Hello. <input type = "button" value ="Πάτησε με " onclick="alert('hello' )"> Στη JavaScript είναι διαθέσιμοι οι παρακάτω χειριστές συμβάντων Χειριστές Συμβάντων Παραθύρου (Window Events handlers ) onload onunload Λαμβάνει χώρα μόλις ολοκληρωθεί το φόρτωμα μιας σελίδας Λαμβάνει χώρα μόλις κλείσουμε μια σελίδα Χειριστές Συμβάντων Ποντικιού (Mouse Events handlers ) onmouseover onmouseout onclick ondblclick onmousedown onmouseup onmousemove Λαμβάνει χώρα όταν περάσει το ποντίκι πάνω από ένα αντικείμενο Λαμβάνει χώρα όταν απομακρυνθεί το ποντίκι από ένα αντικείμενο Λαμβάνει χώρα όταν κάνουμε κλικ σ' ένα αντικείμενο Λαμβάνει χώρα όταν κάνουμε διπλό κλικ σ' ένα αντικείμενο Λαμβάνει χώρα όταν πατάμε με το ποντίκι σ' ένα αντικείμενο Λαμβάνει χώρα όταν αφήσουμε το ποντίκι απ' ένα αντικείμενο που έχουμε κάνει κλικ Λαμβάνει χώρα όταν κουνάμε το ποντίκι συνέχεια πάνω απ' ένα αντικείμενο Χειριστές Συμβάντων Φόρμας (Form Events handlers ) onchange onsubmit onreset onblur onselect onfocus Λαμβάνει χώρα μόλις κάνουμε αλλαγή σε κάποιο στοιχείο της φόρμας Λαμβάνει χώρα μόλις υποβάλλουμε μια φόρμα Λαμβάνει χώρα μόλις μηδενίσουμε μια φόρμα Λαμβάνει χώρα μόλις αφήσουμε ένα αντικείμενο Λαμβάνει χώρα μόλις επιλέξουμε κάτι σε μια φόρμα Λαμβάνει χώρα μόλις κάνουμε ένα αντικείμενο ενεργό Αναφορά σε στοιχεία της ιστοσελίδας Αφού προσδιορίσουμε έναν κωδικό (id) σε ένα στοιχείο της ιστοσελίδας μπορούμε να αποκτήσουμε πρόσβαση σε αυτό και να αλλάξουμε τα χαρακτηριστικά του με την JavaScript χρησιμοποιώντας τη συνάρτηση getelementbyid().

12 Παράδειγμα εναλλαγής Εικόνας Στο παρακάτω παράδειγμα μόλις ο χρήστης περάσει το ποντίκι πάνω (onmouseover) από την εικόνα με κωδικό img1 εμφανίζεται μια άλλη εικόνα, ενώ με το που φεύγει το ποντίκι από την εικόνα επανεμφανίζεται η αρχική εικόνα <html> <head> <title>change Image</title> <script> function mouseoverimage() document.getelementbyid("img1").src = "download1.jpg"; function mouseoutimage() document.getelementbyid("img1").src = "download.jpg"; </head> <body> <img id="img1" src="download.jpg" onmouseover="mouseoverimage()" onmouseout="mouseoutimage()"/> </html> Αναφορά σε Φόρμες και σε Στοιχεία Φόρμας Μπορούμε να αναφερόμαστε σε μια φόρμα και σε στοιχεία της μέσω του κωδικού που θα προσδιορίσουμε, όπως στο παραπάνω παράδειγμα. Εναλλακτικά μπορούμε να χρησιμοποιήσουμε τον πίνακα forms[ ], ο οποίος περιέχει μια λίστα απ' όλα τα αντικείμενα φόρμας που υπάρχουν στο έγγραφο. Παρόμοια, μπορούμε να χρησιμοποιήσουμε την ιδιότητα (πίνακα) elements[ ] μιας φόρμας για να αναφερόμαστε στα στοιχεία μιας φόρμας, η οποία ιδιότητα είναι μια λίστα απ' όλα τα αντικείμενα-στοιχεία που περιέχει η φόρμα. Η αρίθμηση ξεκινά από το 0. Μπορούμε να αναφερθούμε στα στοιχεία μιας φόρμας με το όνομα ή τη θέση τους μέσα στον πίνακα στοιχείων. Για παράδειγμα, για να πάρουμε την τιμή ενός πλαισίου κειμένου με όνομα Lname που

13 βρίσκεται στη δεύτερη φόρμα secondform και είναι το τέταρτο κατά σειρά στοιχείο της φόρμας, μπορούμε να χρησιμοποιήσουμε έναν από τους εξής τέσσερις τρόπους : document.secondform.lname.value document.secondform.elements[3].value document.forms[1].lname.value document.forms[1].elements[3].value Παράδειγμα ελέγχου υποβολής φόρμας <html> <head> <script type="text/javascript"> function validate() x=document.myform at=x. .value.indexof("@") code=x.code.value firstname=x.fname.value submitok="true" if (at==-1) alert("check address!") submitok="false" if (code<1 code>10) alert("the number is not acceptable. Please retry.") submitok="false" if (firstname.length>10) alert("the name is not acceptable. Please retry.") submitok="false" if (submitok=="false") return false else return true </head> <body> <form name="myform" method="post" action="form_submitted.html" onsubmit="return validate()"> address : <input type="text" name=" " size="20"> <br /> Pick a number between 1-10 : <input type="text" name="code" size="20"> <br /> Choose a name (up to 10 characters) : <input type="text" name="fname" size="20"> <br /> <input type="submit" value="submit"> </form> </html>

14 Αντικείμενα JavaScript Το Αντικείμενο Window Το αντικείμενο window βρίσκεται στην κορυφή της ιεραρχίας των αντικειμένων και περιέχει ιδιότητες και μεθόδους που σχεδιάστηκαν για να παρέχουν πληροφορίες και να μας βοηθούν να επεξεργαζόμαστε το ίδιο το παράθυρο αλλά και το έγγραφο που περιέχει. Οι ιδιότητες του αντικειμένου window είναι οι εξής : defaultstatus, το προκαθορισμένο κείμενο της γραμμής κατάστασης. history, η λίστα ιστορικού του παραθύρου. length, ο αριθμός των πλαισίων (frames) του παραθύρου. name, το όνομα του παραθύρου. opener, αναφέρεται στο παράθυρο στο οποίο ένα σενάριο χρησιμοποίησε την εντολή window.open για να ανοίξει το τρέχον παράθυρο. parent, το γονικό παράθυρο σ' ένα σύνολο πλαισίων. self, το τρέχον παράθυρο. status, το κείμενο της γραμμής κατάστασης. top, το παράθυρο κορυφής. window, το τρέχον παράθυρο. Παράδειγμα 1ο Σε περίπτωση που θέλετε να προωθείτε αυτόματα ο επισκέπτης μια ιστοσελίδας σε μια άλλη με όνομα new_page.html (που είναι πιθανόν η Αρχική Σελίδα της νέα έκδοσης της τοποθεσίας σας), μπορείτε να χρησιμοποιήσετε την ιδιότητα location ως εξής: <Body onload='' location='new_page.html' ''> Παράδειγμα 2ο Εμφάνιση και κλείσιμο νέου παραθύρου <html> <head> <script type="text/javascript"> function openwin() mywindow=window.open("","","width=200,height=100"); mywindow.document.write("<p>this is 'mywindow'</p>"); function closewin() mywindow.close(); </head> <body> <input type="button" value="open 'mywindow'" onclick="openwin()" />

15 <input type="button" value="close 'mywindow'" onclick="closewin()" /> </html> Παράδειγμα 3ο Εμφάνιση κυλιόμενου μηνύματος στη γραμμή κατάστασης <HTML> <HEAD> <TITLE>Scrolling Message</TITLE> <SCRIPT> <!-- var winlength = 100; // guess at how many spaces wide the status bar is var speed = 200; // number of milliseconds between updates function scroll(count) var msg = "Κυλιόμενο Μήνυμα στη Γραμμή Κατάστασης (status bar)."; var out = " "; var cmd = "scroll("; if (count <= winlength && 0 < count) var c = 0; for (c = 0 ; c < count ; c++) out += " "; out += msg; else if (count <= 0) if (-count < msg.length) out += msg.substring(-count,msg.length); else count = winlength + 1; window.status = out; count--; cmd += count + ")"; window.settimeout(cmd,speed); //--> </SCRIPT> </HEAD> <BODY ONLOAD="window.setTimeout('scroll(winLength)',speed);"> </BODY> </HTML>

16 Το Αντικείμενο Document Οι ιδιότητες του αντικειμένου document είναι οι εξής : alinkcolor, το χρώμα ενός ενεργού συνδέσμου. anchor, ένας σύνδεσμός του εγγράφου anchors, ένας πίνακας που περιέχει όλους τους συνδεσμούς του εγγράφου. bgcolor, το χρώμα του παρασκηνίου του εγγράφου. cookie, ένα κομμάτι κειμένου με πληροφορίες για τη σελίδα. fgcolor, το χρώμα του κειμένου του εγγράφου. form, μια φόρμα του εγγράφου. forms, ένας πίνακας που περιέχει όλες τις φόρμες του εγγράφου. lastmodified, η ημερομηνία τελευταίας τροποποίησης του εγγράφου. link, ένας σύνδεσμος του εγγράφου. links, ένας πίνακας που περιέχει όλους τους συνδέσμους του εγγράφου. location, το πλήρες URL του εγγράφου. referrer, το URL του εγγράφου που περιέχει έναν σύνδεσμο στον οποίο κάναμε κλικ για να έρθουμε στο τρέχον έγγραφο. title, το κείμενο που βρίσκεται ανάμεσα στις ετικέτες <title> και </title>. vlinkcolor, το χρώμα ενός συνδέσμου που έχουμε επισκεφθεί. Οι μέθοδοι του αντικειμένου document είναι οι εξής : clear(), καθαρίζει το περιεχόμενο ενός εγγράφου. close(), κλείνει τη ροή εγγράφου. open(), ανοίγει τη ροή εγγράφου. write(), γράφει ένα κείμενο στο έγγραφο. writeln(), γράφει ένα αντικείμενο στο έγγραφο και προσθέτει μια αλλαγή γραμμής. Αντικείμενο Date Το αντικείμενο Date μάς δίνει τη δυνατότητα να δουλεύουμε με ημερομηνίες και ώρες. Για να γίνει αυτό, πρέπει να δημιουργήσουμε ένα αντίγραφο αντικειμένου με τη λέξη κλειδί new, ως εξής : Today = new Date(); Όταν δημιουργούμε ένα αντικείμενο Date, μπορούμε να πάρουμε την τρέχουσα ημερομηνία και ώρα του συστήματος, όπως κάναμε πριν, ή να ορίσουμε μια δική μας ημερομηνία και ώρα, μ' έναν από τους εξής τρόπους : Date1 = new Date("8, 30, 2001, 10:50:14") Date2 = new Date(2001, 8, 30) Date3 = new Date(2001, 8, 30, 10, 50, 14) Για το αντικείμενο Date υπάρχουν οι εξής μέθοδοι : getdate(), επιστρέφει την ημερομηνία. getday(), επιστρέφει την ημέρα της εβδομάδας. gethours(), επιστρέφει την ώρα. getminutes(), επιστρέφει τα λεπτά. getmonth(), επιστρέφει τον μήνα. getseconds(), επιστρέφει τα δευτερόλεπτα. gettime(), επιστρέφει την πλήρη ώρα. gettimezoneoffset(), επιστρέφει τη διαφορά από την ώρα Greenwich.

17 getyear(), επιστρέφει το έτος, parse(), επιστρέφει τα χιλιοστά του δευτερολέπτου από 1/1/1970. setdate(), ορίζει την ημερομηνία. sethours(), ορίζει την ώρα. setminutes(), ορίζει τα λεπτά. setmonth(), ορίζει τον μήνα. setseconds(), ορίζει τα δευτερόλεπτα. settime(), ορίζει την πλήρη ώρα. setyear(), ορίζει το έτος. togmtstring(), μετατρέπει την ημερομηνία σε στοιχειοσειρά ώρας Greenwich. tolocalestring(), μετατρέπει την ημερομηνία σε στοιχειοσειρά. UTC(), επιστρέφει τα χιλιοστά του δευτερολέπτου από 1/1/1970. Το Αντικείμενο Math Το αντικείμενο Math περιέχει ιδιότητες και μεθόδους που χρησιμοποιούνται για να εκτελέσουμε μαθηματικούς υπολογισμούς. Οι ιδιότητες του αντικειμένου είναι σταθερές, όπως το π, το e κ.ά., ενώ οι μέθοδοι του αντικειμένου είναι συναρτήσεις εύρεσης μεγίστου, εύρεσης ημιτόνου κ.ά. Οι ιδιότητες του αντικειμένου Math είναι οι εξής : E, η σταθερά e = 2,718. LN2, ο φυσικός λογάριθμος του 2 (περίπου 0,693). LN10, ο φυσικός λογάριθμος του 10 (περίπου 2,302). LOG2E, ο λογάριθμος του e με βάση το 2 (περίπου 1,442). LOG10E, ο δεκαδικός λογάριθμος του e (περίπου 0,434). PI, ο αριθμός π = 3, SQRT1_2, η τετραγωνική ρίζα του 1/2 (περίπου 0,707). SQRT2, η τετραγωνική ρίζα του 2 (περίπου 1,414). Οι μέθοδοι του αντικειμένου Math είναι οι εξής : abs(), επιστρέφει την απόλυτη τιμή ενός αριθμού. acos(), επιστρέφει το συνημίτονο τόξου ενός αριθμού. asin(), επιστρέφει το ημίτονο τόξου ενός αριθμού. atan(), επιστρέφει την εφαπτομένη τόξου ενός αριθμού. ceil(), επιστρέφει τον αμέσως επόμενο ακέραιο ενός αριθμού. cos(), επιστρέφει το συνημίτονο ενός αριθμού. exp(), επιστρέφει τη δύναμη ενός αριθμού με βάση το e. floor(), επιστρέφει τον αμέσως προηγούμενο ακέραιο ενός αριθμού. log(), επιστρέφει τον φυσικό λογάριθμο ενός αριθμού (με βάση το e). max(), επιστρέφει τον μεγαλύτερο από δύο αριθμούς. min(), επιστρέφει τον μικρότερο από δύο αριθμούς. pow(), επιστρέφει τη δύναμη ενός αριθμούς ως προς μια βάση. round(), στρογγυλοποιεί έναν αριθμό στον πλησιέστερο ακέραιο. sin(), επιστρέφει το ημίτονο ενός αριθμού. sqrt(), επιστρέφει την τετραγωνική ρίζα ενός αριθμού. tan(), επιστρέφει την εφαπτομένη ενός αριθμού. Για παράδειγμα :

18 form.result.value = Math.max(form.num1.value, form.num2.value) Η παραπάνω εντολή βρίσκει τον μεγαλύτερο από δύο αριθμούς που είναι καταχωρημένοι σε δύο πλαίσια κειμένου μιας φόρμας, με όνομα num1 και num2 αντίστοιχα, και τον καταχωρεί σ' ένα τρίτο πλαίσιο κειμένου με όνομα result.