ΚΕΝΤΡΟ ΠΛΗ.ΝΕ.Τ. Ν. ΦΛΩΡΙΝΑΣ

Οδηγός Αναφοράς της JavaScript

Το Αντικείμενο Array

            Με το αντικείμενο αυτό μπορούμε να δημιουργήσουμε πίνακες (arrays), δηλ. μεταβλητές με δείκτη. Για να δημιουργήσουμε έναν πίνακα χρησιμοποιούμε τη λέξη κλειδί new και δηλώνουμε το μέγεθος (πλήθος των στοιχείων) του πίνακα, ως εξής :

            Mathites = new Array(20);

            Η αρίθμηση των δεικτών ενός πίνακα ξεκινάει από το 0 και έτσι για να αναφερθούμε στα περιεχόμενα ενός πίνακα και να πάρουμε (αποσπάσουμε) τις τιμές τους, μπορούμε να γράψουμε τα εξής :

            FirstMathitis = Mathites[0];

            SecondMathitis = Mathites[1];

            …

            Με την ιδιότητα length μπορούμε να βρούμε το πλήθος των στοιχείων ενός πίνακα, όπως :

PlithosMathiton = Mathites.length;

Οι πίνακες διαθέτουν τις εξής μεθόδους :

• join(), ενώνει όλα τα στοιχεία ενός πίνακα σε μια συμβολοσειρά και τα διαχωρίζει με κόμματα ή μ’ έναν διαχωριστή (delimiter) της επιλογής μας.

• reverse(), τοποθετεί τα στοιχεία ενός πίνακα με ανάποδη σειρά.

• sort(), ταξινομεί τα στοιχεία ενός πίνακα.

Το Αντικείμενο String

            Η JavaScript αντιμετωπίζει τις συμβολοσειρές σαν αντικείμενα string και μπορούμε να δημιουργήσουμε συμβολοσειρές με δύο τρόπους :

            text = "Florina per sempre";

            text = new String("Florina per sempre");

            Μπορούμε να χρησιμοποιήσουμε την ιδιότητα length για να βρούμε το μήκος (πλήθος των χαρακτήρων) μιας συμβολοσειράς.

Οι συμβολοσειρές διαθέτουν τις εξής μεθόδους :

• substring(), επιστρέφει ένα κομμάτι μιας συμβολοσειράς.

• substr(), επιστρέφει ένα κομμάτι μιας συμβολοσειράς.

• toUpperCase(), μετατρέπει όλους τους χαρακτήρες μιας συμβολοσειράς σε κεφαλαία γράμματα.

• toLowerCase(), μετατρέπει όλους τους χαρακτήρες μιας συμβολοσειράς σε πεζά γράμματα.

• indexOf(), ελέγχει αν ένα κομμάτι κειμένου βρίσκεται ή όχι μέσα σε μια συμβολοσειρά, ξεκινώντας από την αρχή μιας συμβολοσειράς.

• lastIndexOf(), ελέγχει αν ένα κομμάτι κειμένου βρίσκεται ή όχι μέσα σε μια συμβολοσειρά, ξεκινώντας από το τέλος μιας συμβολοσειράς.

• link(), δημιουργεί μια σύνδεση (link) με το κείμενο μιας συμβολοσειράς.

• anchor(), δημιουργεί μια σύνδεση (link) τύπου άγκυρας (anchor) με το κείμενο μιας συμβολοσειράς.

Οι επόμενες μέθοδοι μπορούν να χρησιμοποιηθούν για να αλλάξουμε τη μορφοποίηση ενός κειμένου μέσα σε μια ιστοσελίδα, όπου το κείμενο αντιμετωπίζεται σαν αντικείμενο συμβολοσειράς :

• text.big(), αυξάνει το μέγεθος του κειμένου.

• text.blink(), κάνει το κείμενο να αναβοσβήνει (μόνο στον Netscape).

• text.bold(), κάνει το κείμενο έντονο.

• text.italics(), κάνει το κείμενο να έχει πλάγια γραφή.

• text.small(), μειώνει το μέγεθος του κειμένου.

• text.strike(), κάνει το κείμενο να έχει διακριτή διαγραφή.

• text.sub(), μετατρέπει το κείμενο σε μορφή δείκτη (subscript).

• text.sup(), μετατρέπει το κείμενο σε μορφή εκθέτη (superscript).

Το Αντικείμενο Math

            Το αντικείμενο Math είναι πολύ χρήσιμο για μαθηματικούς υπολογισμούς, αλλά δεν έχουμε τη δυνατότητα να δημιουργήσουμε ένα δικό μας αντικείμενο με τη βοήθειά του.

            Το αντικείμενο Math διαθέτει τις εξής ιδιότητες (σταθερές) :

• Math.E, επιστρέφει τον αριθμό e (περίπου 2.718281), που χρησιμοποιείται ως βάση στους φυσικούς (νεπέριους) λογαρίθμους.

• Math.LN2, επιστρέφει τον φυσικό λογάριθμο του 2 (περίπου 0.693147).

• Math.LN10, επιστρέφει τον φυσικό λογάριθμο του 10 (περίπου 2.302585).

• Math.LOG2E, επιστρέφει τον λογάριθμο του e με βάση το 2 (περίπου 1.442695).

• Math.LOG10E, επιστρέφει τον λογάριθμο του e με βάση το 10 (περίπου 0.434294).

• Math.PI, επιστρέφει τον αριθμό π (λόγος περιφέρειας ενός κύκλου προς τη διάμετρό του), με τιμή 3.1415926.

• Math.SQRT1_2, επιστρέφει την τετραγωνική ρίζα του ½ (περίπου 0.707106).

• Math.SQRT2, επιστρέφει την τετραγωνική ρίζα του 2 (περίπου 1.414213).

            Το αντικείμενο Math διαθέτει τις εξής μεθόδους (συναρτήσεις) :

• Math.acos(), υπολογίζει το τόξο σε ακτίνια με βάσει του συνημιτόνου.

• Math.asin(), υπολογίζει το τόξο σε ακτίνια με βάσει του ημιτόνου.

• Math.atan(), υπολογίζει το τόξο σε ακτίνια με βάσει της εφαπτομένης.

• Math.cos(), υπολογίζει το συνημίτονο ενός αριθμού σε ακτίνια.

• Math.sin(), υπολογίζει το ημίτονο ενός αριθμού σε ακτίνια.

• Math.tan(), υπολογίζει την εφαπτομένη ενός αριθμού σε ακτίνια.

• Math.exp(), επιστρέφει τον αριθμό e υψωμένο σε μια δύναμη.

• Math.log(), επιστρέφει τον φυσικό (νεπέριο) ενός αριθμού, δηλ. με βάση το e.

• Math.max(), επιστρέφει τον μεγαλύτερο από δύο αριθμούς.

• Math.min(), επιστρέφει τον μικρότερο από δύο αριθμούς.

• Math.abs(), επιστρέφει την απόλυτη τιμή ενός αριθμού.

• Math.cell(), στρογγυλοποιεί έναν αριθμό στον αμέσως επόμενό του ακέραιο αριθμό.

• Math.floor(), στρογγυλοποιεί έναν αριθμό στον αμέσως προηγούμενό του ακέραιο αριθμό.

• Math.pow(), υπολογίζει τη δύναμη ενός αριθμού υψωμένου σ’ έναν άλλον αριθμό.

• Math.round(), στρογγυλοποιεί έναν αριθμό στον πλησιέστερό του ακέραιο αριθμό.

• Math.sqrt(), υπολογίζει την τετραγωνική ρίζα ενός αριθμού.

• Math.random(), επιστρέφει έναν τυχαίο αριθμό ανάμεσα στο 0 και το 1.

Το Αντικείμενο Date

            Με το αντικείμενο Date μπορούμε να χειρισθούμε ημερομηνίες και ώρες και μπορούμε είτε να ορίσουμε μια δική μας ημερομηνία είτε να πάρουμε την ημερομηνία του συστήματος και να βρούμε (αποσπάσουμε) την τρέχουσα ημέρα, τον τρέχοντα μήνα, το τρέχοντα έτος και πολλά άλλα.

            Πρέπει να έχουμε υπόψη μας ότι η JavaScript αντιμετωπίζει τις ημερομηνίες σαν αριθμούς σε χιλιοστά του δευτερολέπτου, με αρχή από την 1/1/1970.

            Το αντικείμενο Date διαθέτει πολλές μεθόδους :

• setDate(), ορίζουμε την ημέρα του μήνα με μια δική μας τιμή.

• setMonth(), ορίζουμε τον μήνα με μια δική μας τιμή, όπου ο Ιανουάριος αντιστοιχεί στο 0 κοκ.

• setYear(), ορίζουμε το έτος με μια δική μας τιμή.

• setFullYear(), ορίζουμε το έτος με μια δική μας 4ψήφια τιμή.

• setTime(), ορίζουμε ολόκληρη την ώρα με μια δική μας τιμή.

• setHours(), ορίζουμε την ώρα με μια δική μας τιμή.

• setMinutes(), ορίζουμε τα λεπτά της ώρας με μια δική μας τιμή.

• setSeconds(), ορίζουμε τα δευτερόλεπτα της ώρας με μια δική μας τιμή.

• getDate(), διαβάζουμε την τρέχουσα ημέρα.

• getMonth(), διαβάζουμε τον τρέχοντα μήνα.

• getYear(), διαβάζουμε το τρέχον έτος.

• getTime(), διαβάζουμε ολόκληρη την τρέχουσα ώρα.

• getHours(), διαβάζουμε την ώρα.

• getMinutes(), διαβάζουμε τα λεπτά της ώρας.

• getSeconds(), διαβάζουμε τα δευτερόλεπτα της ώρας.

• getTimeZoneOffset(), επιστρέφει τη διαφορά της τοπικής ζώνης ώρας από την ώρα GMT.

• toGMTString(), επιστρέφει την ώρα σε κείμενο με βάση τη μορφή GMT.

• toLocalString(), επιστρέφει την ώρα σε κείμενο με βάση τη μορφή της τοπικής ώρας.

• parse(), μετατρέπουμε ένα κείμενο σ’ ένα αντικείμενο ημερομηνίας.

• UTC(), μετατρέπουμε μια ημερομηνία σε μια μορφή ώρας UTC.

Το Αντικείμενο Window

            Με το αντικείμενο window έχουμε πρόσβαση στο παράθυρο του τρέχοντα φυλλομετρητή. Αν έχουμε ανοικτά πολλά παράθυρα φυλλομετρητή ή αν κάποια ιστοσελίδα χρησιμοποιεί πλαίσια (frames), τότε θα υπάρχουν περισσότερα από ένα αντικείμενα window, οπότε θα πρέπει να τους δώσουμε ονόματα για να μπορούμε να τα ξεχωρίσουμε.

            Όταν αναφερόμαστε σε παράθυρα, χρήσιμα είναι και τα εξής :

• self, είναι το τρέχον παράθυρο, αυτό δηλαδή που περιέχει την τρέχουσα ιστοσελίδα.

• top, είναι το παράθυρο που βρίσκεται στην κορυφή και περιέχει (είναι γονέας) όλα τα άλλα παράθυρα.

• parent, είναι ένα παράθυρο που περιέχει άλλα παράθυρα, όπως συμβαίνει σε μια ιστοσελίδα που περιέχει πλαίσια, η οποία είναι γονέας (parent) όλων των παραθύρων πλαισίων που περιέχει.

• frames[], είναι ένας πίνακας που περιέχει όλα τα πλαίσια μιας ιστοσελίδας, όπου για παράδειγμα parent.frames[0] είναι το πρώτο παράθυρο πλαίσιο κοκ.

            Το αντικείμενο window διαθέτει και τα εξής τρία αντικείμενα παιδιά :

• location, είναι η θέση (URL) του HTML εγγράφου που εμφανίζεται μέσα στο παράθυρο της ιστοσελίδας.

• history, περιέχει μια λίστα από τα URLs που έχουμε επισκεφθεί.

• document, είναι το τρέχον έγγραφο ιστοσελίδας.

Το Αντικείμενο Location

            Το αντικείμενο location περιέχει πληροφορίες σχετικά με την τρέχουσα διεύθυνση URL, τα περιεχόμενα της οποίας εμφανίζονται μέσα στο παράθυρο του φυλλομετρητή.

            Διαθέτει τις εξής ιδιότητες :

• protocol, είναι το πρωτόκολλο που υπάρχει στη διεύθυνση URL.

• hostname, είναι το όνομα του κεντρικού υπολογιστή (host).

• port, είναι η πόρτα (θύρα) επικοινωνίας.

• host, είναι ο συνδυασμός του hostname και της πόρτας (port).

• pathname, είναι η διαδρομή και το όνομα του αρχείου ιστοσελίδας.

• href, είναι ολόκληρη η διεύθυνση URL.

Το Αντικείμενο History

Το αντικείμενο history περιέχει πληροφορίες σχετικά με τις διευθύνσεις URL που έχουμε επισκεφθεί. Περιέχει τις εξής μεθόδους :

• back(), πηγαίνει στην προηγούμενη θέση της λίστας ιστορικού.

• forward(), πηγαίνει στην επόμενη θέση της λίστας ιστορικού.

• go(), πηγαίνει σε μια συγκεκριμένη θέση της λίστας ιστορικού.

Το Αντικείμενο Document

            Το αντικείμενο document παριστάνει το τρέχον έγγραφο του παραθύρου του φυλλομετρητή. Περιέχει τα εξής αντικείμενα παιδιά :

• forms[], είναι ένας πίνακας που περιέχει όλες τις φόρμες που υπάρχουν μέσα στο έγγραφο.

• links[], είναι ένας πίνακας που περιέχει όλες τις συνδέσεις που υπάρχουν μέσα στο έγγραφο.

• anchors[], είναι ένας πίνακας που περιέχει όλες τις συνδέσεις τύπου άγκυρας που υπάρχουν μέσα στο έγγραφο.

• images[], είναι ένας πίνακας που περιέχει όλες τις εικόνες που υπάρχουν μέσα στο έγγραφο.

• applets[], είναι ένας πίνακας που περιέχει όλα τα Java applets που υπάρχουν μέσα στο έγγραφο.

Το Αντικείμενο Navigator

            Το αντικείμενο navigator δεν είναι παιδί ούτε γονέας κανενός άλλου αντικειμένου και περιέχει πληροφορίες σχετικά με την έκδοση του φυλλομετρητή, όπως :

• appCodeName, είναι το όνομα κωδικού του φυλλομετρητή, που είναι συνήθως το Mozilla.

• appName, είναι το πλήρες όνομα του φυλλομετρητή.

• appVersion, είναι ο αριθμός της έκδοσης του φυλλομετρητή.

Δημιουργία Αντικειμένου

            Για να μπορέσουμε να δημιουργήσουμε ένα δικό μας αντικείμενο, υπάρχουν οι εξής λέξεις κλειδιά :

• new, δημιουργούμε ένα καινούργιο αντικείμενο.

• this, αναφερόμαστε στο τρέχον αντικείμενο.

• with, κάνουμε προεπιλεγμένο ένα αντικείμενο σε μια ομάδα εντολών για να μην είμαστε αναγκασμένοι να το γράφουμε συνέχεια.

Για να μπορέσουμε να δημιουργήσουμε ένα δικό μας αντικείμενο, γράφουμε πρώτα μια συνάρτηση δημιουργίας αντικειμένων (constructor), με την οποία δίνουμε τιμές στις ιδιότητες του αντικειμένου με τη λέξη κλειδί this, ως εξής :

            function FullName (firtsname, lastname) {

                        this.firstname = firstname;

                        this.lastname = lastname;

            }

            Μετά, για να μπορέσουμε να δημιουργήσουμε ένα στιγμιότυπο (instance) αυτού του αντικειμένου, χρησιμοποιούμε λέξη κλειδί new, ως εξής :

            John01 = new FullName("John", "Georgiadis");

Τροποποίηση Αντικειμένου

            Με τη λέξη κλειδί prototype μπορούμε να προσθέσουμε κι άλλες ιδιότητες στο πρωτότυπο ενός αντικειμένου, δηλ. στον ορισμό του, και έτσι όλα τα αντικείμενα αυτού του τύπου που θα δημιουργήσουμε θα περιλαμβάνουν τις ιδιότητες αυτές.

            Για παράδειγμα, για να προσθέσουμε την ιδιότητα fathersname στο αντικείμενο FullName που δημιουργήσαμε προηγουμένως, γράφουμε την εξής εντολή :

            FullName.prototype.fathersname = "George";

Οι Εντολές της JavaScript

            Για να εισάγουμε σχόλια (comments) στην JavaScript, υπάρχουν δύο τρόποι :

            // αυτό είναι ένα σχόλιο μίας γραμμής

            /* αυτό είναι ένα σχόλιο που μπορεί να συνεχίσει σε πολλές γραμμές

και που πρέπει να ανοίξει και να κλείσει με τους ειδικούς χαρακτήρες

            */

            Με την εντολή break μπορούμε να διακόψουμε έναν βρόχο πριν ακόμη ολοκληρωθεί και να συνεχίσουμε την εκτέλεση των εντολών με τις εντολές που ακολουθούν μετά το σώμα του βρόχου.

            Ακολουθεί ένα παράδειγμα.

function MyFunction() {

var i

            var bResult

for (i=1; i<20; i++) {

                                    bResult = confirm("Πατήστε το Cancel για Break")

if (!bResult) {

                                                break;

                                    } // end if

                        } // end for

alert("Ο βρόχος ολοκληρώθηκε, το i είναι ίσο με : " + i)

} // end function

            Με την εντολή continue μπορούμε να συνεχίσουμε την εκτέλεση ενός βρόχου με την επόμενη επανάληψη και να αγνοήσουμε έτσι τις υπόλοιπες εντολές του βρόχου.

            Ακολουθεί ένα παράδειγμα.

function MyFunction() {

            var i = 0

var bResult

            while (i<20) {

                                    bResult = confirm("Πατήστε το Cancel για Continue")

                                    if (!bResult) {

                                                continue;

} // end if

i++

                        } // end while

                        alert("Ο βρόχος ολοκληρώθηκε, το i είναι ίσο με : " + i)

} // end function

            Με την εντολή for μπορούμε να δημιουργήσουμε έναν βρόχο όταν έχουμε ένα συγκεκριμένο πλήθος επαναλήψεων.

            Ακολουθεί ένα παράδειγμα.

for (i = 0; i <= 5; i++) {

document.write("Αριθμός : " + i)

document.write("<br>")

} // end for

            Με την εντολή for … in έχουμε έναν πολύ χρήσιμο τρόπο πρόσβασης σ’ όλες τις ιδιότητες ενός αντικειμένου ή σ’ όλα τα στοιχεία ενός πίνακα.

            Ακολουθεί ένα παράδειγμα.

            for (i in navigator) {

                        document.write("Ιδιότητα :  "+i+"<br>");

                        document.write("Τιμή :  "+navigator[i]+ "<br><br>");

            } // end for

            Με την εντολή while μπορούμε να δημιουργήσουμε έναν βρόχο που θα επαναλαμβάνεται όσο μια συνθήκη είναι αληθής. Ο έλεγχος της συνθήκης γίνεται στην αρχή του βρόχου και έτσι υπάρχει περίπτωση να μην εκτελεστούν καθόλου οι εντολές που περιέχει ο βρόχος αν η συνθήκη είναι από την αρχή ψευδής.

            Ακολουθεί ένα παράδειγμα.

function MyFunction() {

            var sWord = " "

            while (sWord != "Florina") {

                        sWord = prompt("Γράψτε Florina για έξοδο", "")

                        } // end while

                        alert("Ο βρόχος ολοκληρώθηκε")

            } // end function

Με την εντολή do … while μπορούμε να δημιουργήσουμε έναν βρόχο που θα επαναλαμβάνεται όσο μια συνθήκη είναι αληθής. Ο έλεγχος της συνθήκης γίνεται στο τέλος του βρόχου και αφού έχουν εκτελεσθεί οι εντολές που περιέχει ο βρόχος μία τουλάχιστον φορά.

            Ακολουθεί ένα παράδειγμα.

function MyFunction() {

var sWord = " "

            do {

                                    sWord = prompt("Γράψτε Florina για έξοδο", "")

            } while (sWord != "Florina")

                        alert("Ο βρόχος ολοκληρώθηκε")

            } // end function

            Με την εντολή if … else μπορούμε να εκτελέσουμε μια εντολή ή μια ομάδα εντολών αν είναι αληθής μια συνθήκη και μια άλλη εντολή ή μια άλλη ομάδα εντολών αν είναι ψευδής η ίδια συνθήκη. Η χρήση της λέξης κλειδί else είναι προαιρετική.

            Ακολουθεί ένα παράδειγμα. 

var d = new Date()

var time = d.getHours()

if (time < 10) {

document.write("<b> Καλημέρα </b>")

}

else {

document.write("<b> Καλό Μεσημέρι </b>")

}

            Με τον τριαδικό τελεστή σύγκρισης μπορούμε να αποφύγουμε τη χρήση της εντολής if … else και να έχουμε το ίδιο αποτέλεσμα αλλά μ’ έναν πιο σύντομο τρόπο.

            Ακολουθεί ένα παράδειγμα.

            var sText = (nSeconds > 30) ? "περισσότερο" :  "λιγότερο"

            Στην παραπάνω εντολή, αν η τιμή της μεταβλητής nSeconds είναι μεγαλύτερη από 30, τότε θα καταχωρηθεί η τιμή (συμβολοσειρά) "περισσότερο" στη μεταβλητή sText, ενώ αν η τιμή της μεταβλητής nSeconds είναι μικρότερη ή ίση από 30, τότε θα καταχωρηθεί η τιμή (συμβολοσειρά) "λιγότερο" στη μεταβλητή sText.

            Με την εντολή switch μπορούμε να έχουμε ένα σύνολο από εντολές που θα εκτελεστούν ανάλογα με την τιμή μιας μεταβλητής.

            Ακολουθεί ένα παράδειγμα.

switch (theDay) {

case 5:

document.write("Επιτέλους Παρασκευή!")

break

case 6:

            document.write("Σούπερ Σάββατο!")

break

case 0:

                        document.write("Κυριακή για Ξεκούραση!")

break

default:

            document.write("Ανυπομονώ για το Σαββατοκύριακο!")

}  // end switch

            Στο παραπάνω παράδειγμα αν η τιμή της μεταβλητής theDay είναι ίση με 5 θα εμφανισθεί ένα συγκεκριμένο μήνυμα, αν είναι ίση με 6 θα εμφανισθεί ένα άλλο μήνυμα, αν είναι ίση με 0 θα εμφανισθεί ένα άλλο μήνυμα, ενώ αν έχει μια οποιαδήποτε άλλη τιμή, θα εμφανισθεί το μήνυμα που υπάρχει στο τμήμα default της εντολής switch. Η χρήση της εντολής break μέσα σε κάθε κομμάτι της εντολής switch είναι απαραίτητη αν θέλουμε να εκτελεσθούν μόνο οι εντολές που ανήκουν στο συγκεκριμένο κομμάτι και όχι και οι υπόλοιπες.

            Με την εντολή return, που χρησιμοποιείται μόνο μέσα στον κώδικα των συναρτήσεων (functions), μπορούμε να τερματίσουμε την εκτέλεση μιας συνάρτησης και να επιστρέψουμε, αν θέλουμε, μια τιμή στο όνομα της συνάρτησης.

            Με την πρόταση var μπορούμε να ορίσουμε (δηλώσουμε) μια μεταβλητή και να της αποδώσουμε και τιμή προαιρετικά. Αν και η χρήση της πρότασης var δεν είναι υποχρεωτική στη JavaScript, είναι καλό να την χρησιμοποιούμε τουλάχιστον στις δηλώσεις των τοπικών μεταβλητών μιας συνάρτησης, για να μην υπάρξει έτσι σύγχυση με τις καθολικές μεταβλητές που δηλώνονται στο κυρίως σώμα ενός script.

Οι Ενσωματωμένες Συναρτήσεις της JavaScript

            Με τη συνάρτηση parseInt() μπορούμε να αναζητήσουμε μια ακέραια τιμή στην αρχή ενός string (συμβολοσειράς). Αν βρεθεί μια τέτοια ακέραια τιμή, τότε η συνάρτηση την επιστρέφει, διαφορετικά επιστρέφει την τιμή Nan (not a number).

            Με τη συνάρτηση parseFloat() μπορούμε να αναζητήσουμε μια δεκαδική τιμή στην αρχή ενός string (συμβολοσειράς). Αν βρεθεί μια τέτοια δεκαδική τιμή, τότε η συνάρτηση την επιστρέφει, διαφορετικά επιστρέφει την τιμή Nan (not a number).

Επιστροφή