Περιεχόμενα. Πρόλογος...11

Transcript

1 Περιεχόμενα Πρόλογος...11 Κεφάλαιο 1: Εισαγωγή...13 Η ιστορία της JavaScript...13 Τι είναι η JavaScript...15 Διαφορά μεταξύ σεναρίου και προγράμματος...16 Δυνατότητες και περιορισμοί της JavaScript...16 Τα απαραίτητα για το ξεκίνημα...17 Μερικές ιδέες για το ξεκίνημα...18 Το πρώτο σενάριο JavaScript...20 Οι δεσμευμένες λέξεις της JavaScript...24 Μερικοί βασικοί κανόνες...25 Ερωτήσεις και ασκήσεις...27 Κεφάλαιο 2: Βασικές έννοιες της JavaScript...29 Αντικειμενοστρεφής προγραμματισμός...29 Αντικείμενα...30 Κλάσεις...31 Οι μέθοδοι alert(), confirm(), και prompt() του αντικειμένου window...32 Οι μέθοδοι write() και writeln() του αντικειμένου document...37 Ερωτήσεις και ασκήσεις...38 Κεφάλαιο 3: Δεδομένα Μεταβλητές Υπολογισμοί...41 Τύποι δεδομένων...41 Μεταβλητές...43 Παραστάσεις και τελεστές...47 Αριθμητικοί τελεστές...47 Τελεστές σύγκρισης...48 Λογικοί τελεστές

2 8 Η γλώσσα JavaScript Ο τριαδικός τελεστής...51 Οι μοναδιαίοι τελεστές αύξησης και μείωσης...51 Περισσότερα για τις εκχωρήσεις...52 Συνένωση αλφαριθμητικών...52 Πίνακες...55 Μετατροπή τύπων και υπολογισμός παραστάσεων Οι συναρτήσεις parseint(), parsefloat(), και eval()...59 Ακολουθίες διαφυγής...62 Ερωτήσεις και ασκήσεις...63 Κεφάλαιο 4: Προγραμματισμός με τη γλώσσα JavaScript...67 Εισαγωγή...67 Η δομή επιλογής...69 Ένθετα if...76 Η δομή πολλαπλής επιλογής switch...79 Η δομή επανάληψης...82 Η εντολή επανάληψης while...82 Η εντολή επανάληψης do while...85 Η δομή επανάληψης for...86 Η εντολή επανάληψης for in...89 Οι εντολές break και continue...92 Ερωτήσεις και ασκήσεις...95 Κεφάλαιο 5: Συναρτήσεις και συμβάντα Η έννοια της συνάρτησης Η εντολή return Συναρτήσεις που καλούν άλλες συναρτήσεις Εμβέλεια των μεταβλητών Αναδρομικές συναρτήσεις Εσωτερικές συναρτήσεις της JavaScript Συμβάντα και χειριστές συμβάντων Ερωτήσεις και ασκήσεις Κεφάλαιο 6: Αντικείμενα Τα αντικείμενα στην JavaScript Το αντικείμενο Array Οι μέθοδοι του αντικειμένου Array Το αντικείμενο Math Το αντικείμενο String Το αντικείμενο Date Η δεσμευμένη λέξη this Η δεσμευμένη λέξη with Η συνάρτηση-κατασκευαστής Ερωτήσεις και ασκήσεις...166

3 Περιεχόμενα 9 Κεφάλαιο 7: Η JavaScript στα προγράμματα περιήγησης: Παράθυρα και πλαίσια Εισαγωγή JavaScript και προγράμματα περιήγησης Το αντικείμενο window Άνοιγμα και κλείσιμο παραθύρων Πλαίσια Ταυτόχρονη αλλαγή του περιεχομένου πολλών πλαισίων Το ψευδοπρωτόκολλο javascript: Το αντικείμενο Navigator Το αντικείμενο screen Ερωτήσεις και ασκήσεις Κεφάλαιο 8: Έγγραφα και εικόνες Το αντικείμενο document στο μοντέλο DOM Οι ιδιότητες του αντικειμένου document Οι ιδιότητες all και layers Ανίχνευση του προγράμματος περιήγησης Οι μέθοδοι του αντικειμένου document Το αντικείμενο image Εφέ rollover Πολλαπλά εφέ εναλλαγής εικόνων (multiple rollovers) Τα "μπισκότα" Ερωτήσεις και ασκήσεις Κεφάλαιο 9: Φόρμες και JavaScript Εισαγωγή Το αντικείμενο form Ανάγνωση και εγγραφή σε πλαίσιο κειμένου φόρμας Περιοχή κειμένου Ραδιοπλήκτρα Πλαίσια ελέγχου Λίστες Υποβολή της φόρμας στο διακομιστή Επικύρωση των δεδομένων της φόρμας με τη χρήση JavaScript Ένα ολοκληρωμένο παράδειγμα δημιουργίας φόρμας Ερωτήσεις και ασκήσεις Κεφάλαιο 10: JavaScript και DHTML Τι είναι η DHTML Φύλλα επάλληλων στυλ Ψευδοκλάσεις Τοποθέτηση στοιχείων στο έγγραφο Επίπεδα JavaScript και φύλλα στυλ Κίνηση Οπτικά εφέ με τον Internet Explorer: Φίλτρα και μεταπτώσεις Ερωτήσεις και ασκήσεις...328

4 10 Η γλώσσα JavaScript Κεφάλαιο 11: Ειδικά θέματα Σφάλματα Συντακτικά σφάλματα Σφάλματα χρόνου εκτέλεσης Λογικά σφάλματα Κανονικές παραστάσεις Δημιουργία και σύνδεση εξωτερικών αρχείων JavaScript Εμφάνιση του πηγαίου κώδικα JavaScript μιας σελίδας Συνεργασία JavaScript και Java Παράρτημα 1: Στοιχεία της γλώσσας HTML Εισαγωγή Δημιουργία και βασική οργάνωση ενός εγγράφου HTML Μορφοποίηση κειμένου Εισαγωγή εικόνων σε μια ιστοσελίδα Σύνδεσμοι και αγκυρώσεις Λίστες Πίνακες Πλαίσια Φόρμες Φύλλα επάλληλων στυλ Ειδικές ετικέτες στυλ Ιδιότητες και τιμές Παράρτημα 2: Απαντήσεις στις ερωτήσεις και τις ασκήσεις του βιβλίου Ευρετήριο...477

5 Κεφάλαιο 5 Συναρτήσεις και συμβάντα Η έννοια της συνάρτησης Συνάρτηση (function) ονομάζεται ένα τμήμα κώδικα (μια ομάδα από εντολές) με ξεχωριστό όνομα που εκτελεί μια συγκεκριμένη εργασία. Μια συνάρτηση καταρχήν ορίζεται και κατόπιν καλείται. Η κλήση μιας συνάρτησης γίνεται με το όνομά της και έχει αποτέλεσμα την εκτέλεση του κώδικα που περιέχει. Η χρήση συναρτήσεων διευκολύνει τη δημιουργία αρθρωτών και όχι μονολιθικών προγραμμάτων. Επιπλέον, ο κώδικας μιας συνάρτησης γράφεται μία φορά κατά τον ορισμό της, και μπορεί να κληθεί από διάφορα σημεία του προγράμματος. Ο ορισμός των συναρτήσεων γίνεται συνήθως στην περιοχή επικεφαλίδας (<HEAD>) ενός εγγράφου HTML, και έχει την ακόλουθη μορφή: function όνομα_συνάρτησης(παράμετροι) { Εντολές Όπως παρατηρούμε, στη δήλωση μιας συνάρτησης τοποθετείται αρχικά η λέξη function και ακολουθούν: Το όνομα της συνάρτησης. Για το όνομα της συνάρτησης ισχύουν όσα έχουμε αναφέρει για τις μεταβλητές, ότι δηλαδή πρέπει να ξεκινά με 101

6 102 Η γλώσσα JavaScript γράμμα του λατινικού αλφαβήτου ή χαρακτήρα υπογράμμισης, να μην περιέχει κενά διαστήματα, να μη χρησιμοποιούνται δεσμευμένες λέξεις ως ονόματα συναρτήσεων, κ.λπ. Ένα ζεύγος παρενθέσεων μέσα στο οποίο τοποθετούνται οι παράμετροι της συνάρτησης. Οι παράμετροι είναι τιμές που περνάμε στη συνάρτηση και οι οποίες θα υποστούν επεξεργασία στο εσωτερικό της. Εάν υπάρχουν περισσότερες από μία παράμετροι, τις χωρίζουμε με κόμματα. Επίσης, εάν δε χρειάζονται οι παράμετροι μπορούμε να τις παραλείψουμε, οπότε θα γραφεί μόνο το ζεύγος των παρενθέσεων. Το "σώμα" της συνάρτησης. Είναι οι εντολές που χρησιμοποιεί η συνάρτηση και οι οποίες επιτελούν την επιθυμητή εργασία. Οι εντολές αυτές τοποθετούνται ανάμεσα σε δύο άγκιστρα, {. Κατά την εκτέλεσή της μια συνάρτηση μπορεί να επιστρέψει ή να μην επιστρέψει κάποια τιμή. Εάν επιστραφεί κάποια τιμή αυτό γίνεται με την εντολή return. Για να εκτελεστεί μια συνάρτηση, πρέπει να κληθεί στο σημείο του σεναρίου που επιθυμούμε. Η κλήση της συνάρτησης γίνεται με το όνομά της ακολουθούμενο από τις παρενθέσεις ( ). Ο χώρος μέσα στις παρενθέσεις είτε είναι κενός (εάν δεν υπάρχουν ορίσματα), είτε περιέχει ορίσματα χωρισμένα με κόμματα. Η κλήση της συνάρτησης μπορεί να γίνει είτε στην περιοχή επικεφαλίδας (<HEAD>), είτε στην περιοχή του κύριου σώματος (<BODY>) ενός εγγράφου HTML. Παράδειγμα Να δημιουργηθεί μια συνάρτηση add() η οποία να προσθέτει δύο αριθμούς και να τυπώνει το αποτέλεσμα στο έγγραφο. Με βάση τα όσα αναφέραμε προηγουμένως, ο ορισμός της συνάρτησης είναι: function add(number1, number2) { var sum = number1 + number2 document.write(sum); Η δήλωση αυτή θα τοποθετηθεί στο τμήμα <HEAD> του εγγράφου. Για να καλέσουμε τη συνάρτηση ώστε να προσθέσει δύο αριθμούς (έστω τους 234

7 Κεφάλαιο 5: Συναρτήσεις και συμβάντα 103 και 436), γράφουμε το όνομά της και ως ορίσματα χρησιμοποιούμε τους συγκεκριμένους αριθμούς add (234, 436); Η κλήση θα τοποθετηθεί στο τμήμα <HEAD> του εγγράφου. Θα μπορούσαμε όμως να την τοποθετήσουμε και στο τμήμα <BODY>. Ακολουθεί ολόκληρο το αρχείο function_add.html, το οποίο περιέχει τον κώδικα:<html> <HEAD> <TITLE> ΣΥΝΑΡΤΗΣΗ add() </TITLE>  </HEAD> <BODY> </BODY> </HTML> Το αποτέλεσμα του σεναρίου μέσα από το πρόγραμμα περιήγησης είναι το επόμενο:

8 104 Η γλώσσα JavaScript Το ίδιο αποτέλεσμα θα είχαμε, αν τοποθετούσαμε την κλήση της συνάρτησης στο τμήμα <BODY> του εγγράφου. Εννοείται ότι η τοποθέτηση θα γίνει μέσα σε ένα ζεύγος ετικετών <SCRIPT>, όπως φαίνεται παρακάτω: <HTML> <HEAD> <TITLE> ΣΥΝΑΡΤΗΣΗ add() </TITLE>  </HEAD> <BODY> add(234,436); </BODY> </HTML> Η εντολή return Σε πολλές περιπτώσεις θέλουμε η συνάρτηση να επιστρέφει κάποια τιμή μετά την εκτέλεση του κώδικά της. Τότε χρησιμοποιούμε την εντολή return μαζί με μια μεταβλητή στην οποία εκχωρείται η τιμή που θα επιστραφεί. H σύνταξη της εντολής return είναι: return όνομα_μεταβλητής; Ας εξετάσουμε μια παραλλαγή της συνάρτησης του προηγούμενου παραδείγματος, η οποία επιστρέφει την τιμή του αθροίσματος των δύο αριθμών αντί να την τυπώνει στο έγγραφο. Η συνάρτηση θα έχει την παρακάτω μορφή:

9 Κεφάλαιο 5: Συναρτήσεις και συμβάντα 105 function add(number1,number2) { var sum=number1+number2; return sum; Στο σώμα του εγγράφου η κλήση της συνάρτησης θα γίνει με τη γραμμή: document.write(add(234,436)); Στη συνέχεια μπορείτε να δείτε ολόκληρο το τροποποιημένο έγγραφο: <HTML> <HEAD> <TITLE> Εντολή return </TITLE>  </HEAD> <BODY> <SCRIPT LANGUAGE=" JavaScript"> document.write(add(234,436)); </BODY> </HTML> Θα μπορούσαμε να μη χρησιμοποιήσουμε καθόλου τη μεταβλητή sum στον ορισμό της συνάρτησης, συντάσσοντας τη συνάρτηση όπως παρακάτω: function add(number1,number2) { return number1+number2; Συναρτήσεις που καλούν άλλες συναρτήσεις Αν χρειαστεί, μια συνάρτηση μπορεί να καλέσει μια άλλη συνάρτηση. Για το σκοπό αυτόν η δεύτερη συνάρτηση τοποθετείται μέσα στο σώμα της πρώτης. Απαραίτητη προϋπόθεση είναι ο ορισμός της δεύτερης συνάρτησης να έχει προηγηθεί του ορισμού της πρώτης.

10 106 Η γλώσσα JavaScript Έστω ότι θέλουμε να δημιουργήσουμε μια συνάρτηση, τη square(), η ο- ποία υπολογίζει το τετράγωνο ενός αριθμού, και μια άλλη συνάρτηση, την quadratic(), η οποία υπολογίζει την τέταρτη δύναμη αριθμού. Μπορούμε μέσα από την quadratic() να καλούμε τη square(), αρκεί να την έχουμε ορίσει προηγουμένως. function square(x) { return x*x; function quadratic(y) { return square(y)*square(y) ; Παράδειγμα Να δημιουργηθεί συνάρτηση που να υπολογίζει το τετράγωνο αριθμού και συνάρτηση που να υπολογίζει την τέταρτη δύναμη αριθμού. Στη συνέχεια να εισάγεται ένας αριθμός από το πληκτρολόγιο και να τυπώνεται η τέταρτη δύναμή του σε ένα πλαίσιο προειδοποίησης. Το αρχείο functioncall.html είναι το επόμενο: <HTML> <HEAD> <TITLE> Κλήση συνάρτησης από συνάρτηση </TITLE>  </HEAD> <BODY> var num=parsefloat(prompt("δώστε έναν αριθμό","0")); window.alert("η 4η δύναμη του αριθμού είναι "+quadratic(num)); </BODY> </HTML>

11 Κεφάλαιο 5: Συναρτήσεις και συμβάντα 107 Όταν φορτώνουμε το αρχείο στο πρόγραμμα περιήγησης, εμφανίζεται ένα πλαίσιο διαλόγου που ζητά να δώσουμε έναν αριθμό: Στη συνέχεια υπολογίζεται η τέταρτη δύναμη του αριθμού που καταχωρίσαμε. Εμβέλεια των μεταβλητών Οι μεταβλητές που χρησιμοποιεί η JavaScript διακρίνονται σε δύο κατηγορίες: καθολικές και τοπικές. Μια μεταβλητή που ορίζεται έξω από μια συνάρτηση χαρακτηρίζεται ως καθολική (global), και αναγνωρίζεται σε όλα τα σημεία του εγγράφου, ακόμα και μέσα στις συναρτήσεις. Μια καθολική μεταβλητή μπορεί να οριστεί με ή χωρίς τη χρήση της λέξης var.

12 108 Η γλώσσα JavaScript Αντίθετα, μια μεταβλητή που δηλώνεται μέσα σε μια συνάρτηση χαρακτηρίζεται ως τοπική (local), και ισχύει μόνο μέσα στη συνάρτηση στην οποία ορίστηκε. Για παράδειγμα, η μεταβλητή sum που χρησιμοποιήσαμε στη συνάρτηση add() του παραδείγματος σε προηγούμενη ενότητα είναι μια τοπική μεταβλητή. Όταν η συνάρτηση ολοκληρωθεί, όλες οι τοπικές μεταβλητές που υπήρχαν μέσα σε αυτή παύουν να υφίστανται. Εάν η συνάρτηση ξανακληθεί δημιουργούνται νέες τοπικές μεταβλητές. Η δήλωση της τοπικής μεταβλητής μέσα στη συνάρτηση γίνεται με τη χρήση της λέξης var. Εάν δε χρησιμοποιηθεί η λέξη var, τότε η μεταβλητή θεωρείται καθολική. Εάν ορίσουμε μια τοπική μεταβλητή μέσα σε μια συνάρτηση χρησιμοποιώντας το ίδιο όνομα με μια καθολική μεταβλητή, τότε μέσα στη συνάρτηση ισχύει η τοπική μεταβλητή. Εάν η μεταβλητή αλλάξει τιμή (πάντα μέσα στη συνάρτηση), αυτό δεν επηρεάζει την καθολική μεταβλητή. Παράδειγμα Στο παράδειγμα που ακολουθεί οι τιμές των καθολικών μεταβλητών τυπώνονται στο έγγραφο, ενώ η συνάρτηση somefunction() εμφανίζει τις τιμές των μεταβλητών σε ένα πλαίσιο προειδοποίησης. Παρατηρούμε ότι η τιμή της y είναι η ίδια και στις δύο περιπτώσεις. <HTML> <HEAD> <TITLE> Καθολικές και τοπικές μεταβλητές </TITLE>  </HEAD> <BODY>

13 Κεφάλαιο 5: Συναρτήσεις και συμβάντα 109 </BODY> </HTML> Αναδρομικές συναρτήσεις Αναδρομική (recursive) ονομάζεται μια συνάρτηση η οποία καλεί τον εαυτό της. Η αναδρομή είναι μια τεχνική που προσφέρουν όλες οι σύγχρονες γλώσσες προγραμματισμού, και είναι χρήσιμη σε πολλές περιπτώσεις. Για να καταλάβουμε την έννοια της αναδρομής θα εξετάσουμε ένα παράδειγμα συνάρτησης η οποία μπορεί να δημιουργηθεί με τον κλασικό τρόπο, και στη συνέχεια θα δούμε πώς μπορούμε να την υλοποιήσουμε με αναδρομή. Θα χρησιμοποιήσουμε το κλασικό παράδειγμα του υπολογισμού του παραγοντικού ενός θετικού ακέραιου αριθμού. Από τα μαθηματικά γνωρίζουμε ότι ως n! (διαβάζεται n παραγοντικό) ορίζεται το γινόμενο: n! = n(n 1)... Εξ ορισμού ισχύει 1!=1 και 0!=1. Θα δημιουργήσουμε καταρχήν μια ιστοσελίδα για τον υπολογισμό του n! με τον κλασικό τρόπο. Ο υπολογισμός θα γίνει με βάση τον τύπο ορισμού του παραγοντικού και με τη χρήση μιας δομής επανάληψης: <HTML> <HEAD> <TITLE> Υπολογισμός του παραγοντικού με τον κλασικό τρόπο </TITLE>

14 110 Η γλώσσα JavaScript  </HEAD> <BODY> var num=parseint(prompt("δώστε έναν ακέραιο αριθμό","0")); window.alert("το παραγοντικό του αριθμού "+num+" είναι: "+factorial(num)); </BODY> </HTML> Με το άνοιγμα του αρχείου ιστοσελίδας στο πρόγραμμα περιήγησης, μας ζητείται να δώσουμε έναν αριθμό: Στη συνέχεια, σε ένα πλαίσιο προειδοποίησης τυπώνεται το παραγοντικό του αριθμού που πληκτρολογήσαμε.

15 Κεφάλαιο 5: Συναρτήσεις και συμβάντα 111 Ας δούμε τώρα πώς μπορούμε να δημιουργήσουμε μια αναδρομική συνάρτηση που να έχει το ίδιο αποτέλεσμα. Από τον ορισμό του παραγοντικού που είδαμε στην αρχή, μπορούμε να διαπιστώσουμε ότι ισχύει και η ακόλουθη σχέση: n! = n( n 1)! Αυτό σημαίνει ότι μπορούμε να υπολογίσουμε το παραγοντικό ενός αριθμού πολλαπλασιάζοντάς τον με το παραγοντικό του προηγουμένου του. Η σκέψη αυτή μας οδηγεί στην εξής διατύπωση της συνάρτησης factorial(). function factorial(x) { if (x>1) return x*factorial(x-1); else return 1; Μέσα στη συνάρτηση, η δομή if εξετάζει αν ο αριθμός που περάσαμε ως παράμετρο είναι μεγαλύτερος από 1. Αν είναι, επιστρέφει το γινόμενο του αριθμού με τη συνάρτηση factorial(), χρησιμοποιώντας ως όρισμα έναν αριθμό κατά ένα μικρότερο από το x. Αυτό σημαίνει ότι η συνάρτηση "πηγαίνει προς τα κάτω" μέχρι να συναντήσει το 1, του οποίου υπολογίζει το παραγοντικό (που είναι 1), και στη συνέχεια "ανεβαίνει" υπολογίζοντας τα επόμενα παραγοντικά μέχρι να φθάσει στο x. Ένα άλλο θέμα που πρέπει να προσέξουμε είναι να δώσουμε σωστά τον αριθμό του οποίου θέλουμε να υπολογίσουμε το παραγοντικό να μη δώσουμε δηλαδή αρνητικό αριθμό. Αυτό μπορεί να γίνει με τον κώδικα: var num=-1; while (num<0) num=parseιnt(prompt("δώστε ένα θετικό ακέραιο","-1")); Η τελική έκδοση του κώδικα για το παράδειγμα υπολογισμού του n! με αναδρομική διαδικασία είναι η ακόλουθη: <HTML> <HEAD> <TITLE> Υπολογισμός του παραγοντικού με αναδρομή </TITLE> <!-- var num=-1; while (num < 0) num=parseint(prompt("δώστε ένα θετικό ακέραιο","-1")); window.alert("το "+num+"! είναι "+factorial(num));

16 112 Η γλώσσα JavaScript function factorial(x) { if (x>1) return x*factorial(x-1); else return 1; //--> </HEAD> <BODY> </BODY> </HTML> Εσωτερικές συναρτήσεις της JavaScript Η JavaScript διαθέτει έναν αριθμό από εσωτερικές συναρτήσεις, μερικές από τις οποίες έχουμε ήδη εξετάσει, ενώ κάποιες άλλες θα δούμε σε ε- πόμενα κεφάλαια. Οι συναρτήσεις αυτές φαίνονται στον πίνακα που ακολουθεί: Συνάρτηση eval() isfinite() isnan() parseint(), parsefloat() Number(), String() escape(), unescape() Λειτουργία Υπολογίζει μια αριθμητική παράσταση μέσα σε ένα αλφαριθμητικό. Εξετάζει το όρισμα και παίρνει την τιμή true αν είναι πεπερασμένο. Αν το όρισμα δεν είναι πεπερασμένο ή είναι NaN, τότε επιστρέφει false. Εξετάζει το όρισμα και επιστρέφει true αν είναι NaN, αλλιώς επιστρέφει false. Και οι δύο συναρτήσεις δέχονται αλφαριθμητικό όρισμα και επιστρέφουν αριθμητικό. Εάν ο πρώτος χαρακτήρας του αλφαριθμητικού δε μπορεί να μετατραπεί σε αριθμό, επιστρέφουν NaN. Δέχονται ως όρισμα ένα αντικείμενο, και επιστρέφουν έναν αριθμό ή ένα αλφαριθμητικό αντίστοιχα. Χρησιμοποιούνται για την κωδικοποίηση και αποκωδικοποίηση αλφαριθμητικών.