ΑΡΧΙΚΗ ΚΑΤΑΣΚΕΥΗ Bloggs ΚΩΔΙΚΑΣ html JavaScript ΕΙΣΑΓΩΓΗ ManiacΑΝΑΛΥΣΗ Site ΕΙΔΗΣΕΩΝ GadgetManiac ΓΕΝΙΚΑ

Τετάρτη, 30 Ιανουαρίου 2013

ΜΑΘΗΜΑΤΑ JavaScript

   Ιστορία

Η γλώσσα προγραμματισμού JavaScript δημιουργήθηκε αρχικά από τον Brendan Eich της εταιρείας Netscape με την επωνυμία Mocha. Αργότερα, Mocha μετονομάστηκε σε LiveScript, και τελικά σε JavaScript, κυρίως επειδή η ανάπτυξή της επηρεάστηκε περισσότερο από τη γλώσσα προγραμματισμού Java. LiveScript ήταν το επίσημο όνομα της γλώσσας όταν για πρώτη φορά κυκλοφόρησε στην αγορά σε βήτα (beta) εκδόσεις με το πρόγραμμα περιήγησης στο Web, Netscape Navigator εκδοχή 2.0 τον Σεπτέμβριο του 1995. LiveScript μετονομάστηκε σε JavaScript σε μια κοινή ανακοίνωση με την εταιρεία Sun Microsystems στις 4 Δεκεμβρίου, 1995 , όταν επεκτάθηκε στην έκδοση του προγράμματος περιήγησης στο Web, Netscape εκδοχή 2.0B3.

Η JavaScript απέκτησε μεγάλη επιτυχία ως γλώσσα στην πλευρά του πελάτη (client-side) για εκτέλεση κώδικα σε ιστοσελίδες, και περιλήφθηκε σε διάφορα πρόγραμματα περιήγησης στο Web. Κατά συνέπεια, η εταιρεία Microsoft ονόμασε την εφάρμογή της σε JScript για να αποφύγει δύσκολα θέματα εμπορικών σημάτων. JScript πρόσθεσε νέους μεθόδους για να διορθώσει τα Y2K-προβλήματα στην JavaScript, οι οποίοι βασίστηκαν στην java.util.Date τάξη της Java. JScript περιλήφθηκε στο πρόγραμμα Internet Explorer εκδοχή 3.0, το οποίο κυκλοφόρησε τον Αύγουστο του 1996.

Τον Νοέμβριο του 1996, η Netscape ανακοίνωσε ότι είχε υποβάλει τη γλώσσα JavaScript στο Ecma International (μια οργάνωση της τυποποίησης των γλωσσών προγραμματισμού) για εξέταση ως βιομηχανικό πρότυπο, και στη συνέχεια το έργο είχε ως αποτέλεσμα την τυποποιημένη μορφή που ονομάζεται ECMAScript.

Η JavaScript έχει γίνει μία από τις πιο δημοφιλείς γλώσσες προγραμματισμού ηλεκτρονικών υπολογιστών στον Παγκόσμιο Ιστό (Web). Αρχικά, όμως, πολλοί επαγγελματίες προγραμματιστές υποτίμησαν τη γλώσσα διότι το κοινό της ήταν ερασιτέχνες συγγραφείς ιστοσελίδων και όχι επαγγελματίες προγραμματιστές (και μεταξύ άλλων λόγων). Με με τη χρήση της τεχνολογίας Ajax, η JavaScript γλώσσα επέστρεψε στο προσκήνιο και έφερε πιο επαγγελματική προσοχή προγραμματισμού. Το αποτέλεσμα ήταν ένα καινοτόμο αντίκτυπο στην εξάπλωση των πλαισίων και των βιβλιοθηκών, τη βελτίωση προγραμματισμού με JavaScript, καθώς και αυξημένη χρήση της JavaScript έξω από τα προγράμματα περιήγησης στο Web.

Τον Ιανουάριο του 2009, το έργο CommonJS ιδρύθηκε με στόχο τον καθορισμό ενός κοινού προτύπου βιβλιοθήκης κυρίως για την ανάπτυξη της JavaScript έξω από το πρόγραμμα περιήγησης και μέσα σε άλλες τεχνολογίες (π.χ. server-side).
Μοντέλο εκτέλεσης

Η αρχική έκδοση της Javascript βασίστηκε στη σύνταξη στη γλώσσα προγραμματισμού C, αν και έχει εξελιχθεί, ενσωματώνοντας πια χαρακτηριστικά από νεότερες γλώσσες.

Αρχικά χρησιμοποιήθηκε για προγραμματισμό από την πλευρά του πελάτη (client), που ήταν ο φυλλομετρητής (browser) του χρήστη, και χαρακτηρίστηκε σαν client-side γλώσσα προγραμματισμού. Αυτό σημαίνει ότι η επεξεργασία του κώδικα Javascript και η παραγωγή του τελικού περιεχομένου HTML δεν πραγματοποιείται στο διακομιστή, αλλά στο πρόγραμμα περιήγησης των επισκεπτών, ενώ μπορεί να ενσωματωθεί σε στατικές σελίδες HTML. Αντίθετα, άλλες γλώσσες όπως η PHP εκτελούνται στο διακομιστή (server-side γλώσσες προγραμματισμού).

Παρά την ευρεία χρήση της Javascript για συγγραφή προγραμμάτων σε περιβάλλον φυλλομετρητή, αξίζει να σημειωθεί ότι από την αρχή χρησιμοποιήθηκε και για τη συγγραφή κώδικα από την πλευρά του διακομιστή, από την ίδια τη Netscape στο προϊόν LiveWire, με μικρή επιτυχία. Η χρήση της Javascript στο διακομιστή εμφανίζεται πάλι σήμερα, με τη διάδοση του Node.js, ενός μοντέλου προγραμματισμού βασισμένο στα γεγονότα (events).
Javascript και Java

Η Javascript δεν θα πρέπει να συγχέεται με τη Java, που είναι διαφορετική γλώσσα προγραμματισμού και με διαφορετικές εφαρμογές. Η χρήση της λέξης "Java" στο όνομα της γλώσσας έχει περισσότερη σχέση με το προφίλ του προϊόντος που έπρεπε να έχει και λιγότερο με κάποια πιθανή συμβατότητα ή άλλη στενή σχέση με τη Java. Ρόλο σε αυτήν τη σύγχυση έπαιξε και ότι η Java και η Javascript έχουν δεχτεί σημαντικές επιρροές από τη γλώσσα C, ειδικά στο συντακτικό, ενώ είναι και οι δύο αντικειμενοστρεφείς γλώσσες. Τονίζεται ότι ο σωστός τρόπος γραφής της είναι "Javascript" και όχι 'Java script' σαν δύο λέξεις, όπως λανθασμένα γράφεται ορισμένες φορές.
Δείγμα κώδικα Javascript

Ο κώδικας Javascript μιας σελίδας περικλείεται από τις ετικέτες της HTML

 <script type="text/javascript"> και </script>.


Για παράδειγμα, ο ακόλουθος κώδικας Javascript εμφανίζει ένα πλαίσιο διαλόγου με το κείμενο "Γεια σου, κόσμε!":

<script type="text/javascript">
alert('Γεια σου, κόσμε!');
</script>


Αν ο κώδικας Javascript περιέχει περισσότερες από μία εντολές, αυτές θα πρέπει να διαχωριστούν μεταξύ τους με το χαρακτήρα του ελληνικού ερωτηματικού ';' (δηλαδή της λατινικής άνω τελείας). Η χρήση του χαρακτήρα αυτού για την τελευταία εντολή δεν είναι απαραίτητη. Η διαχώριση των εντολών στους νεότερους φυλλομετρητές (browsers) δεν είναι απαραίτητη.

Μια άλλη βασική εντολή, η window.prompt("μήνυμα προς το χρήστη"), ζητάει από το χρήστη να συμπληρώσει ένα κομμάτι μιας αίτησης απευθείας ώστε τα δεδομένα να χρησιμοποιηθούν σαν κείμενo:

<script>
var FIRSTvariable = window.prompt("PLEASE FILL IN YOUR NAME")
alert("Your name is " + FIRSTvariable + ".")
</script>

                                                                                    Πηγή :wikipedia
                                                                                                             
ΠΕΡΙΣΣΟΤΕΡΑ

Τρίτη, 29 Ιανουαρίου 2013

Simon Willison ΕΠΑΝ-ΕΙΣΑΓΩΓΗ στην JavaScript


Εισαγωγή

Το όνομά μου είναι Simon Willison και ο τίτλος αυτής της παρουσίασης είναι «Επαν-εισαγωγή στη JavaScript».

Γιατί χρειάζεται μια νέα εισαγωγή; Διότι η JavaScript μπορεί δίκαια να ισχυριστεί ότι είναι η πιο παρεξηγημένη γλώσσα του κόσμου. Αν και συχνά γίνεται αντικείμενο χλευασμού και χαρακτηρίζεται ως παιχνίδι, πίσω από την απατηλή της απλότητα κρύβονται μερικά ισχυρά γλωσσικά στοιχεία. Ο χρόνος που πέρασε είδε να ξεφυτρώνουν ένας αριθμός από εφαρμογές JavaScript μεγάλης εμβέλειας, δείχνοντας ότι η βαθύτερη γνώση αυτής της τεχνολογίας είναι ένα σημαντικό προσόν για κάθε web developer.

Είναι χρήσιμο να αρχίσουμε με μια ιδέα από την ιστορία της γλώσσας. Η JavaScript δημιουργήθηκε το 1995 από τον Brendan Eich, έναν μηχανικό της Netscape, και εκδόθηκε με τον Netscape 2 στις αρχές του 1996. Το αρχικό της όνομα ήταν LiveScript, αλλά μια ατυχής απόφαση μάρκετινγκ την μετονόμασε σε JavaScript. Το σκεπτικό ήταν να κεφαλαιοποιηθεί η δημοτικότητα της γλώσσας Java της Sun, παρότι οι δύο γλώσσες έχουν ελάχιστα κοινά στοιχεία μεταξύ τους. Αυτό αποτελεί μόνιμη πηγή σύγχυσης από τότε μέχρι σήμερα.

Μερικούς μήνες αργότερα η Microsoft παρουσίασε μια σε γενικές γραμμές συμβατή έκδοση της γλώσσας με το όνομα JScript (μαζί με τον IE3). Η Netscape υπέβαλλε τη γλώσσα στον ECMA International, έναν Ευρωπαϊκό οργανισμό προτύπων, μια πρωτοβουλία που κατέληξε στην πρώτη έκδοση της EcmaScript το 1997. Το πρότυπο έφτασε στην έκδοση 3 το 1999 και από τότε παρέμεινε γενικά αμετάβλητο, αν και η έκδοση 4 βρίσκεται σε φάση ανάπτυξης.

Αυτή η σταθερότητα υπήρξε καλοδεχούμενη από τους developers, καθώς έδωσε χρόνο στις διάφορες υλοποιήσεις να προσαρμοστούν. Θα εστιάσω σχεδόν αποκλειστικά στη διάλεκτο της έκδοσης 3. Στο εξής θα παραμείνω στον όρο JavaScript για λόγους οικειότητας.

Αντίθετα από τις περισσότερες γλώσσες προγραμματισμού η γλώσσα JavaScript δεν έρχεται εφοδιασμένη με δυνατότητες εισόδου/εξόδου. Είναι σχεδιασμένη ως γλώσσα scripting σε ένα περιβάλλον που τη φιλοξενεί, και η ύπαρξη μηχανισμών επικοινωνίας με τον έξω κόσμο είναι ευθύνη αυτού του περιβάλλοντος. Το πιο συνηθισμένο περιβάλλον φιλοξενίας είναι ο browser, αλλά interpreters JavaScript μπορούν να βρεθούν στον Acrobat της Adobe, το Photoshop, τη μηχανή Widget της Yahoo! και αλλού.


Γενική Εικόνα

Ας αρχίσουμε κοιτάζοντας το δομικό λίθο κάθε γλώσσας, τους τύπους. Τα προγράμματα JavaScript χειρίζονται τιμές, και όλες αυτές οι τιμές ανήκουν σε έναν τύπο. Οι τύποι τις JavaScript είναι:

- Numbers
- Strings
- Booleans
- Functions
- Objects

...α, και Undefined και Null, που είναι κάπως παράξενοι τύποι. Και Arrays, που είναι ειδικού τύπου αντικείμενα. Και Dates και Regular Expressions που είναι αντικείμενα που παίρνετε δωρεάν. Και για να είμαι τεχνικά ακριβής οι functions δεν είναι παρά ειδικού τύπου αντικείμενα. Επομένως το διάγραμμα των τύπων μοιάζει περισσότερο με αυτό:

- Number
- String
- Boolean
- Object
--- Function
--- Array
--- Date
--- RegExp
- Null
- Undefined

Και υπάρχει επίσης κι ένας ενσωματωμένος τύπος Error. Ωστόσο τα πράγματα είναι πολύ ευκολότερα αν παραμείνουμε στο πρώτο διάγραμμα.


Αριθμοί

Οι αριθμοί στη JavaScript είναι «τιμές διπλής-ακρίβειας 64-bit μορφής IEEE 754», σύμφωνα με τις προδιαγραφές. Αυτό έχει μερικές ενδιαφέρουσες συνέπειες. Δεν υπάρχουν ακέραιοι στη JavaScript, επομένως πρέπει να είστε λίγο προσεκτικοί με την αριθμητική σας αν έχετε συνηθίσει τα μαθηματικά της Java ή της C. Να είστε σε εγρήγορση για καταστάσεις σαν:

κώδικας:   
0.1 + 0.2 = 0.30000000000000004   


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

κώδικας:   
Math.sin(3.5);
d = Math.PI * r * r;   


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

κώδικας:   
> parseInt("123")
123
> parseInt("010")
8   


Αυτό συνέβη γιατί η συνάρτηση parseInt αποφάσισε να χειριστεί το string σαν οκταδικό αριθμό λόγω του αρχικού ψηφίου 0. Αν φροντίσετε να ορίζετε πάντα τη βάση μπορείτε να αποφύγετε εντελώς αυτό το πρόβλημα:

κώδικας:   
> parseInt("123", 10)
123
> parseInt("010", 10)
10   


Αν θέλετε να μετατρέψετε ένα δυαδικό αριθμό σε δεκαδικό απλά αλλάξτε τη βάση:

κώδικας:   
> parseInt("11", 2)
3   


Η JavaScript έχει επίσης μία ειδική τιμή που λέγεται Not-a-Number. Αυτή κάνει την εμφάνισή της όταν προσπαθήσετε να κάνετε πράγματα όπως να μετατρέψετε μια μη-αριθμητική τιμή σε αριθμό.

κώδικας:   
> parseInt("hello", 10)
NaN   


Η τιμή NaN είναι τοξική. Αν τη δώσετε ως είσοδο σε οποιαδήποτε αριθμητική πράξη το αποτέλεσμα θα είναι επίσης NaN:

κώδικας:   
> NaN + 5
NaN   


Μπορείτε να την ανιχνεύσετε χρησιμοποιώντας την ενσωματωμένη συνάρτηση isNaN:

κώδικας:   
> isNaN(NaN)
true   


Η JavaScript έχει επίσης ειδικές τιμές για το θετικό και αρνητικό άπειρο.

κώδικας:   
> 1 / 0
Infinity
> -1 / 0
-Infinity   



Strings

Τα strings στη JavaScript είναι ακολουθίες χαρακτήρων. Για την ακρίβεια είναι ακολουθίες χαρακτήρων unicode, με κάθε χαρακτήρα να αντιστοιχεί σε ένα αριθμό 16 bit. Αυτό θα πρέπει να ακούγεται ευχάριστα στα αυτιά οποιουδήποτε ασχολήθηκε ποτέ με internationalization.

Όταν χρειάζεστε ένα μεμονωμένο χαρακτήρα απλά χρησιμοποιείστε ένα string με μήκος 1.

Για να βρείτε το μήκος ενός string, χρησιμοποιείστε την ιδιότητα length.

κώδικας:   
> "hello".length
5   


Να η πρώτη μας επαφή με τα αντικείμενα JavaScript! Αλήθεια, ανέφερα ότι και τα strings είναι αντικείμενα; Έχουν και μεθόδους:

κώδικας:   
> "hello".charAt(0)
h
> "hello, world".replace("hello", "goodbye")
goodbye, world
> "hello".toUpperCase()
HELLO   



Άλλοι τύποι

Το null σημαίνει μία εσκεμμένη μη-τιμή. Το undefined σημαίνει ότι δεν έχει ακόμα αποδοθεί κάποια τιμή. Θα μιλήσουμε για τις μεταβλητές αργότερα, αλλά στη JavaScript είναι δυνατό να ορίσουμε μια μεταβλητή χωρίς να της δώσουμε τιμή. Αν το κάνουμε αυτό η τιμή της μεταβλητής είναι η τιμή «undefined».

Η JavaScript έχει ένα τύπο boolean, ο οποίος είναι είτε true είτε false (και τα δύο είναι keywords). Οτιδήποτε άλλο στη γλώσσα θεωρείται είτε αληθές είτε ψευδές, το οποίο προσδιορίζει τι συμβαίνει όταν χρησιμοποιηθεί σε θέση boolean. Οι κανόνες περί αλήθειας και ψεύδους είναι οι εξής:

0, "", NaN, null, και undefined είναι ψευδή. Οτιδήποτε άλλο είναι αληθές.

Υποστηρίζονται τελεστές boolean όπως &&, || και !. Μπορείτε να μετατρέψετε κάθε τιμή σε boolean εφαρμόζοντας δύο φορές τον τελεστή άρνησης:

κώδικας:   
> !!""
false
> !!234
true   



Μεταβλητές

Οι μεταβλητές στη JavaScript δηλώνονται με τη χρήση του keyword var:

κώδικας:   
var a;
var name = "simon";   


Αν δηλώσετε μια μεταβλητή χωρίς να της αποδώσετε κάτι, η τιμή της είναι undefined.


Τελεστές

Οι αριθμητικοί τελεστές της JavaScript είναι οι +, -, *, / και %, το οποίο είναι το υπόλοιπο ακέραιας διαίρεσης. Οι τιμές αποδίδονται με =, και υπάρχουν επίσης σύνθετες εντολές απόδοσης όπως += και -= οι οποίες αναλύονται σε x = x τελεστής y.

κώδικας:   
x += 5
x = x + 5   


Μπορείτε να χρησιμοποιήσετε τους ++ και -- για άυξηση και μείωση αντίστοιχα. Αυτοί μπορούν να τοποθετηθούν πριν ή μετά τη μεταβλητή (prefix/postfix operators).

Ο τελεστής + κάνει επιπλέον και συνένωση string:

κώδικας:   
> "hello" + " world"
hello world   


Αν προσθέσετε έναν αριθμό κι ένα string (ή άλλη τιμή) τα πάντα μετατρέπονται σε string πριν την πράξη. Αυτό μπορεί να σας συλλάβει εξ απροόπτου:

κώδικας:   
> "3" + 4 + 5
345
> 3 + 4 + "5"
75   


Ένας χρήσιμος τρόπος να μετατρέψετε κάτι σε string είναι να του προσθέσετε το κενό string.

Οι συγκρίσεις στη JavaScript μπορούν να γίνουν με χρήση των <, >, <= και >=. Αυτοί λειτουργούν εξίσου με strings και αριθμούς. Η ισότητα είναι ελαφρά πιο περίπλοκη. Ο τελεστής == πραγματοποιεί μετατροπή τύπου αν του δώσετε διαφορετικούς τύπους, με ενίοτε ενδιαφέροντα αποτελέσματα:

κώδικας:   
> "dog" == "dog"
true
> 1 == true
true   


Αν αυτές οι μετατροπές είναι ανεπιθύμητες χρησιμοποιήστε τον τελεστή τριπλό-ίσον:

κώδικας:   
> 1 === true
false
> true === true
true   


Υπάρχουν επίσης τελεστές != και !==.

Η JavaScript έχει ακόμα και δυαδικούς τελεστές. Αν ποτέ τους επιθυμήσετε, εκεί είναι.


Δομές Ελέγχου

Η JavaScript έχει ένα παραπλήσιο πακέτο δομών ελέγχου με άλλες γλώσσες της οικογένειας C. Οι εκτέλεση εντολών κατά συνθήκη υποστηρίζεται με τα if και else. Μπορείτε να σχηματίσετε αλυσίδες απ' αυτά αν θέλετε:

κώδικας:   
var name = "kittens";
if (name == "puppies") {
  name += "!";
} else if (name == "kittens") {
  name += "!!";
} else {
  name = "!" + name;
}
name == "kittens!!"   


Η JavaScript έχει βρόγχους while και do-while. Ο δεύτερος είναι καλός όταν θέλουμε να είμαστε σίγουροι πως το σώμα του βρόγχου θα εκτελεστεί τουλάχιστον μία φορά:

κώδικας:   
while (true) {
  // an infinite loop!
}

do {
  var input = get_input();
} while (inputIsNotValid(input))   


Ο βρόγχος for της JavaScript είναι ο ίδιος όπως στη C και τη Java, σας επιτρέπει να ορίσετε όλα τα δεδομένα ελέγχου του βρόγχου σε μία μόνο γραμμή.

κώδικας:   
for (var i = 0; i < 5; i++) {
  // Will execute 5 times
}   


Οι τελεστές && και || χρησιμοποιούν λογική παράκαμψης (short-circuit), το οποίο σημαίνει ότι η εκτέλεση του δεύτερου τελεστέου θα εξαρτηθεί από τον πρώτο. Αυτό είναι χρήσιμο για τον έλεγχο του null πριν την προσπέλαση ιδιοτήτων αντικειμένων.

κώδικας:   
var name = o && o.getName();   


Ή για τον καθορισμό προεπιλεγμένων τιμών:

κώδικας:   
var name = otherName || "default";   


Η JavaScript έχει ένα τριπλό τελεστή για κατά συνθήκη εντολές της μίας γραμμής:

κώδικας:   
var allowed = (age > 18) ? "yes" : "no";   


Η εντολή switch μπορεί να χρησιμοποιηθεί για πολλαπλές διακλαδώσεις με βάση έναν αριθμό ή string:

κώδικας:   
switch(action) {
    case 'draw':
        drawit();
        break;
    case 'eat':
        eatit();
        break;
    default:
        donothing();
}   


Αν δεν προσθέσετε την εντολή break η εκτέλεση θα συνεχιστεί στο επόμενο επίπεδο. Αυτό πολύ σπάνια είναι επιθυμητό, στην πραγματικότητα είναι καλό να αφήσετε ένα σχόλιο αν σκόπιμα παραλείψετε το break, ώστε να διευκολύνετε το debugging:

κώδικας:   
switch(a) {
    case 1: // fallthrough
    case 2:
        eatit();
        break;
    default:
        donothing();
}   


Ο όρος default είναι προαιρετικός. Μπορείτε να έχετε εκφράσεις τόσο στο switch όσο και στα cases αν θέλετε. Οι συγκρίσεις μεταξύ των δύο γίνονται με τον τελεστή === (αυστηρή ισότητα):

κώδικας:   
switch(1 + 3):
    case 2 + 2:
        yay();
        break;
    default:
        neverhappens();
}   



Αντικείμενα

Τα αντικείμενα της JavaScript είναι απλά συλλογές από ζευγάρια Όνομα/Τιμή. Σαν τέτοια είναι παρεμφερή με:

- Dictionaries στην Python
- Hashes στις Perl και Ruby
- Hash tables στις C και C++
- HashMaps στη Java
- Associative arrays στην PHP

Το γεγονός ότι αυτή η δομή δεδομένων είναι τόσο πλατιά διαδεδομένη είναι χειροπιαστή απόδειξη της προσαρμοστικότητάς της. Εφόσον οτιδήποτε πέρα από τους στοιχειώδεις τύπους στη JavaScript είναι αντικείμενο, κάθε πρόγραμμα JavaScript συνεπάγεται ένα μεγάλο αριθμό από αναζητήσεις σε hash tables. Είναι καλό που αυτές είναι τόσο γρήγορες!

Το τμήμα «Όνομα» είναι ένα string, ενώ το τμήμα «Τιμή» μπορεί να είναι κάθε τιμή JavaScript, συμπεριλαμβανομένων άλλων αντικειμένων. Αυτό σας επιτρέπει να χτίζετε δομές δεδομένων οποιουδήποτε βαθμού πολυπλοκότητας.

Υπάρχουν δύο βασικοί τρόποι να δημιουργηθεί ένα αντικείμενο:

κώδικας:   
var obj = new Object();   


Και:

κώδικας:   
var obj = {};   


Αυτοί είναι σημασιολογικά ισοδύναμοι. Ο δεύτερος ονομάζεται σύνταξη literal και είναι πιο βολικός. Η σύνταξη literal δεν υπήρχε στις πολύ πρώιμες εκδόσεις της γλώσσας, και αυτός είναι ο λόγος που βλέπετε τόσο πολύ κώδικα να χρησιμοποιεί την παλιά μέθοδο.

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

κώδικας:   
obj.name = "Simon"
var name = obj.name;   


Και...

κώδικας:   
obj["name"] = "Simon";
var name = obj["name"];   


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

κώδικας:   
obj.for = "Simon"; // Συντακτικό σφάλμα
obj["for"] = "Simon"; // Δουλεύει θαυμάσια   


Η σύνταξη literal μπορεί να χρησιμοποιηθεί για να αρχικοποιήσει ένα αντικείμενο στην ολότητά του:

κώδικας:   
var obj = {
    name: "Carrot",
    "for": "Max",
    details: {
        color: "orange",
        size: 12
    }
}   


Είναι δυνατή η δημιουργία αλυσίδων από προσπελάσεις ιδιοτήτων:

κώδικας:   
> obj.details.color
orange
> obj["details"]["size"]
12   



Arrays

Τα Arrays στη JavaScript είναι απλά ένα ειδικός τύπος αντικειμένου, όπου ως ονόματα ιδιοτήτων αντί για strings γίνετε χρήση αριθμών. Λειτουργούν σε μεγάλο βαθμό ως κανονικά αντικείμενα (που προσπελαύνονται πάντα με τη σύνταξη []) αλλά έχουν μία μαγική ιδιότητα με όνομα length. Αυτή είναι πάντα κατά μια μονάδα μεγαλύτερη από το μεγαλύτερο δείκτη του array.

Ο παλιός τρόπος δημιουργίας arrays έχει ως εξής:

κώδικας:   
> var a = new Array();
> a[0] = "dog";
> a[1] = "cat";
> a[2] = "hen";
> a.length
3   


Μια πιο βολική σύνταξη είναι τα array literals:

κώδικας:   
> var a = ["dog", "cat", "hen"];
> a.length
3   


Το να αφήσετε ένα πλεονάζον κόμμα στο τέλος του array literal ερμηνεύεται διαφορετικά από browser σε browser, γι αυτό μην το κάνετε.

Σημειώστε πως η array.length δεν είναι πάντα ο αριθμός στοιχείων του array. Δείτε το παρακάτω:

κώδικας:   
> var a = ["dog", "cat", "hen"];
> a[100] = "fox";
> a.length
101   


Θυμηθείτε, το length του array είναι μια μονάδα παραπάνω από το μεγαλύτερο δείκτη.

Αν ζητήσετε έναν μη-υπαρκτό δείκτη array, θα πάρετε undefined:

κώδικας:   
> typeof(a[90])]
undefined   


Λαμβάνοντας υπόψη τα παραπάνω, μπορείτε να διατρέξετε ένα array χρησιμοποιώντας το εξής:

κώδικας:   
for (var i = 0; i < a.length; i++) {
    // Do something with a[i]
}   


Αυτό είναι ελαφρά αναποτελεσματικό καθώς ζητάτε την ιδιότητα length μια φορά σε κάθε βρόγχο. Μια βελτίωση είναι η εξής:

κώδικας:   
for (var i = 0, j = a.length; i < j; i++) {
    // Do something with a[i]
}   


Ένα ακόμα ωραιότερο ιδίωμα είναι:

κώδικας:   
for (var i = 0, item; item = a[i]; i++) {
    // Do something with item
}   


Εδώ θέτουμε δύο μεταβλητές. Στο μέσο της εντολής for συμβαίνει μια απόδοση τιμής και ταυτόχρονα ένας έλεγχος αλήθειας. Αν η απόδοση επιτύχει, ο βρόγχος συνεχίζει. Εφόσον το i αυξάνεται κάθε φορά, τα περιεχόμενα του array θα αποδοθούν στο item το ένα μετά το άλλο. Ο βρόγχος τερματίζει όταν βρεθεί ένα ψευδές στοιχείο (όπως είναι το undefined).

Σημειώστε πως αυτό το trick θα πρέπει να χρησιμοποιείται μόνο για arrays που γνωρίζετε ότι δεν περιέχουν ψευδείς τιμές (για παράδειγμα arrays αντικειμένων ή κόμβων DOM). Αν διατρέχετε αριθμητικά δεδομένα που μπορεί να περιλαμβάνουν το 0 ή strings που μπορεί να περιλαμβάνουν το κενό string, χρησιμοποιήστε το ιδίωμα i, j.

Αν θέλετε να προσθέσετε ένα στοιχείο σε ένα array, ο ασφαλέστερος τρόπος είναι αυτός:

κώδικας:   
a[a.length] = item;   


Καθώς η a.length είναι μια μονάδα μεγαλύτερη από τον μεγαλύτερο δείκτη, μπορείτε να είστε σίγουροι ότι κάνετε απόδοση σε μία κενή θέση στο τέλος του array.

Τα arrays έρχονται εφοδιασμένα μα αρκετές μεθόδους:

a.toString(), a.toLocaleString(), a.concat(item, ..), a.join(sep),
a.pop(), a.push(item, ..), a.reverse(), a.shift(), a.slice(start, end),
a.sort(cmpfn), a.splice(start, delcount, [item]..), a.unshift([item]..)

- η concat επιστρέφει ένα νέο array που περιέχει και τα στοιχεία που προστέθηκαν.
- η pop αφαιρεί και επιστρέφει το τελευταίο στοιχείο.
- η push προσθέτει ένα ή περισσότερα στοιχεία στο τέλος (όπως το ιδίωμα ar[ar.length]).
- η slice επιστρέφει ένα τμήμα του array.
- η sort ταξινομεί και δέχεται ως προαιρετικό όρισμα μία συνάρτηση για τις συγκρίσεις.
- η splice μεταβάλλει ένα array διαγράφοντας ένα τμήμα και αντικαθιστώντας το με άλλα στοιχεία.
- η unshift προσθέτει στοιχεία στην αρχή του array.


Συναρτήσεις

Μαζί με τα αντικείμενα, οι συναρτήσεις είναι το βασικό συστατικό στην κατανόηση της JavaScript. Η πιο στοιχειώδης συνάρτηση δε θα μπορούσε να είναι πολύ απλούστερη απ' αυτήν εδώ:

κώδικας:   
function add(x, y) {
    var total = x + y;
    return total;
}   


Αυτή περιγράφει οτιδήποτε υπάρχει για να μάθει κανείς σχετικά με τις βασικές συναρτήσεις. Μια συνάρτηση JavaScript μπορεί να λάβει 0 ή περισσότερες επώνυμες παραμέτρους. Το σώμα της μπορεί να περιέχει όσες εντολές θέλετε, και μπορείτε να ορίσετε τις δικές τις μεταβλητές οι οποίες είναι τοπικές σε αυτή τη συνάρτηση. Η εντολή return μπορεί να χρησιμοποιηθεί ανά πάσα στιγμή για την επιστροφή μίας τιμής, τερματίζοντας τη συνάρτηση. Αν δε χρησιμοποιηθεί εντολή return (ή χρησιμοποιηθεί χωρίς τιμή), η JavaScript επιστρέφει undefined.

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

κώδικας:   
> add()
Nan // Δε μπορείτε να κάνετε πρόσθεση με το undefined   


Μπορείτε ακόμα να περάσετε περισσότερα ορίσματα απ' όσα περιμένει η συνάρτηση:

κώδικας:   
> add(2, 3, 4)
5 // προστέθηκαν τα πρώτα δύο, το 4 αγνοήθηκε.   


Αυτό ίσως μοιάζει λίγο χαζό, αλλά οι συναρτήσεις έχουν πρόσβαση σε μια επιπλέον μεταβλητή μέσα στο σώμα τους που λέγετε arguments, η οποία είναι ένα αντικείμενο σαν array που κρατά όλες τις τιμές που περάστηκαν στη συνάρτηση. Ας ξαναγράψουμε τη συνάρτηση add έτσι ώστε να μπορεί να δεχτεί κάθε αριθμό ορισμάτων:

κώδικας:   
function add() {
    var sum = 0;
    for (var i = 0, j = arguments.length; i < j; i++) {
        sum += arguments[i];
    }
    return sum;
}

> add(2, 3, 4, 5)
14   


Αυτή ωστόσο δεν είναι περισσότερο χρήσιμη απ' το να γράφαμε 2 + 3 + 4 + 5. Ας φτιάξουμε μία συνάρτηση για τον υπολογισμό του μέσου όρου:

κώδικας:   
function avg() {
    var sum = 0;
    for (var i = 0, j = arguments.length; i < j; i++) {
        sum += arguments[i];
    }
    return sum / arguments.length;
}
> avg(2, 3, 4, 5)
3.5   


Αυτή είναι αρκετά χρήσιμη, αλλά εγκαινιάζει ένα νέο πρόβλημα. Η συνάρτηση avg() δέχεται μία λίστα ορισμάτων χωρισμένη με κόμμα, αλλά τι θα κάνατε αν θέλατε το μέσο όρο ενός array; Θα μπορούσατε απλά να ξαναγράψετε τη συνάρτηση ως εξής:

κώδικας:   
function avgArray(arr) {
    var sum = 0;
    for (var i = 0, j = arr.length; i < j; i++) {
        sum += arr[i];
    }
    return sum / arr.length;
}
> avgArray([2, 3, 4, 5])
3.5   


Αλλά θα ήταν ωραίο να μπορούσαμε να ξαναχρησιμοποιήσουμε τη ρουτίνα που μόλις φτιάξαμε. Ευτυχώς η JavaScript σας επιτρέπει να καλέσετε μια συνάρτηση δίνοντας ένα array με ορίσματα, χρησιμοποιώντας τη μέθοδο apply() οποιουδήποτε αντικειμένου function.

κώδικας:   
> avg.apply(null, [2, 3, 4, 5])
3.5   


Το δεύτερο όρισμα της apply() είναι το array που αναμένεται να περιέχει τα ορίσματα. Το πρώτο θα συζητηθεί παρακάτω. Η έμφαση είναι στο γεγονός ότι και οι συναρτήσεις είναι αντικείμενα.

Η JavaScript σας επιτρέπει να δημιουργήσετε ανώνυμες συναρτήσεις.

κώδικας:   
var avg = function() {
    var sum = 0;
    for (var i = 0, j = arguments.length; i < j; i++) {
        sum += arguments[i];
    }
    return sum / arguments.length;
}   


Αυτή η μορφή είναι σημασιολογικά ισοδύναμη με τη μορφή function avg(). Είναι εξαιρετικά ισχυρή, καθώς σας επιτρέπει να βάλετε μια πλήρη συνάρτηση εκεί που κανονικά θα βάζατε μία έκφραση. Αυτό επιτρέπει κάθε είδους έξυπνα τρικ. Να ένας τρόπος απόκρυψης μερικών τοπικών μεταβλητών, όπως το block scope στη C:

κώδικας:   
> var a = 1;
> var b = 2;
> (function() {
    var b = 3;
    a += b;
})();
> a
4
> b
2   


Η JavaScript σας επιτρέπει να κάνετε αναδρομική κλήση συναρτήσεων. Αυτό είναι ιδιαίτερα χρήσιμο όταν έχετε να κάνετε με δομές δέντρου, όπως αυτές που παίρνετε από το DOM των browsers.

κώδικας:   
function countChars(elm) {
    if (elm.nodeType == 3) { // TEXT_NODE
        return elm.nodeValue.length;
    }
    var count = 0;
    for (var i = 0, child; child = elm.childNodes[i]; i++) {
        count += countChars(child);
    }
    return count;
}   


Αυτό αναδεικνύει ένα δυνητικό πρόβλημα με τις ανώνυμες συναρτήσεις: πώς μπορείτε να τις καλέσετε αναδρομικά αν δε γνωρίζετε το όνομά τους; Η απάντηση βρίσκεται στο αντικείμενο arguments, το οποίο εκτός από το να λειτουργεί ως λίστα ορισμάτων παρέχει επιπλέον μια ιδιότητα με όνομα arguments.callee. Αυτή αναφέρεται πάντα στην τρέχουσα συνάρτηση, και ιδού πως μπορεί με τη βοήθειά της να γίνει εφικτή η αναδρομική κλήση:

κώδικας:   
var charsInBody = (function(elm) {
    if (elm.nodeType == 3) { // TEXT_NODE
        return elm.nodeValue.length;
    }
    var count = 0;
    for (var i = 0, child; child = elm.childNodes[i]; i++) {
        count += arguments.callee(child);
    }
    return count;
})(document.body);   


Εφόσον η arguments.callee είναι η τρέχουσα συνάρτηση και όλες οι συναρτήσεις είναι αντικείμενα, μπορείτε να χρησιμοποιήσετε την arguments.callee για να διατηρήσετε δεδομένα από τη μία κλήση της συνάρτησης στην επόμενη. Να μια συνάρτηση που θυμάται πόσες φορές έχει κληθεί:

κώδικας:   
function counter() {
    if (!arguments.callee.count) {
        arguments.callee.count = 0;
    }
    return arguments.callee.count++;
}

> counter()
0
> counter()
1
> counter()
2   



Μεθόδοι Αντικείμενων

Στον κλασικό αντικειμενοστραφή προγραμματισμό τα αντικείμενα είναι συλλογές δεδομένων και μεθόδων που ενεργούν πάνω σε αυτά τα δεδομένα. Ας θεωρήσουμε ένα αντικείμενο person με πεδία μικρό όνομα κι επώνυμο. Υπάρχουν δύο τρόποι εμφάνισης του πλήρους ονόματος: ως «first last» ή ως «last, first». Να ένας τρόπος να γίνει αυτό χρησιμοποιώντας τις συναρτήσεις και τα αντικείμενα που συζητήσαμε προηγουμένως:

κώδικας:   
function makePerson(first, last) {
    return {
        first: first,
        last: last
    }
}
function personFullName(person) {
    return person.first + ' ' + person.last;
}
function personFullNameReversed(person) {
    return person.last + ', ' + person.first
}
> s = makePerson("Simon", "Willison");
> personFullName(s)
Simon Willison
> personFullNameReversed(s)
Willison, Simon   


Αυτό λειτουργεί, αλλά δεν είναι πολύ όμορφο. Θα καταλήξετε με ντουζίνες συναρτήσεων στο global namespace. Αυτό που θέλουμε στ' αλήθεια είναι ένας τρόπος να προσδέσουμε μια συνάρτηση σε ένα αντικείμενο. Μιας και οι συναρτήσεις είναι αντικείμενα, αυτό είναι εύκολο:

κώδικας:   
function makePerson(first, last) {
    return {
        first: first,
        last: last,
        fullName: function() {
            return this.first + ' ' + this.last;
        },
        fullNameReversed: function() {
            return this.last + ', ' + this.first;
        }
    }
}
> s = makePerson("Simon", "Willison")
> s.fullName()
Simon Willison
> s.fullNameReversed()
Willison, Simon   


Υπάρχει εδώ κάτι που συναντάμε για πρώτη φορά: το keyword this. Όταν χρησιμοποιείται μέσα σε μια συνάρτηση το this αναφέρεται στο τρέχον αντικείμενο. Το τι σημαίνει αυτό εξαρτάται από τον τρόπο που καλέσατε τη συνάρτηση. Αν την καλέσατε με χρήση της τελείας σε ένα αντικείμενο, αυτό το αντικείμενο γίνεται το this. Αν η κλήση έγινε χωρίς τη σύνταξη τελεία, το this αναφέρετε στο global object. Αυτή είναι μια συνηθισμένη πηγή σφαλμάτων. Για παράδειγμα:

κώδικας:   
> s = makePerson("Simon", "Willison")
> var fullName = s.fullName;
> fullName()
undefined undefined   


Όταν καλέσαμε fullName() το this αναφέρθηκε στο global object. Καθώς δεν υπάρχουν global μεταβλητές first και last πήραμε undefined για την κάθε μια απ' αυτές.

Μπορούμε να εκμεταλλευτούμε το keyword this για να βελτιώσουμε τη συνάρτηση makePerson:

κώδικας:   
function Person(first, last) {
    this.first = first;
    this.last = last;
    this.fullName = function() {
        return this.first + ' ' + this.last;
    }
    this.fullNameReversed = function() {
        return this.last + ', ' + this.first;
    }
}
var s = new Person("Simon", "Willison");   


Εγκαινιάσαμε άλλο ένα keyword: το new. Το new συνδέεται στενά με το this. Αυτό που κάνει είναι να δημιουργεί ένα ολοκαίνουργιο αντικείμενο, και μετά καλεί τη συνάρτηση και ταυτόχρονα κάνει το this να αναφέρεται σε αυτό το νέο αντικείμενο. Οι συναρτήσεις που σχεδιάστηκαν να καλούνται με το new ονομάζονται constructor functions. Είναι κοινή πρακτική να γράφουμε με κεφαλαίο πρώτο γράμμα αυτές τις συναρτήσεις, ως υπενθύμιση να τις καλέσουμε με το new.

Τα αντικείμενά μας γίνονται όσο πάει και καλύτερα, αλλά υπάρχουν ακόμα σε αυτά κάποιες άσχημες γωνίες. Κάθε φορά που δημιουργούμε ένα αντικείμενο person, δημιουργούμε ταυτόχρονα δύο ολοκαίνουργιες συναρτήσεις-αντικείμενα μέσα σε αυτό. Δε θα ήταν καλύτερο αν μπορούσαμε να κάνουμε κοινόχρηστο αυτόν τον κώδικα;

κώδικας:   
function personFullName() {
    return this.first + ' ' + this.last;
}
function personFullNameReversed() {
    return this.last + ', ' + this.first;
}
function Person(first, last) {
    this.first = first;
    this.last = last;
    this.fullName = personFullName;
    this.fullNameReversed = personFullNameReversed;
}   


Αυτό είναι καλύτερο: δημιουργούμε τις μεθόδους-συναρτήσεις μόνο μια φορά, και αποδίδουμε αναφορές σε αυτές μέσα στον constructor. Μπορούμε να κάνουμε τίποτα καλύτερο απ' αυτό; Η απάντηση είναι ναι:

κώδικας:   
function Person(first, last) {
    this.first = first;
    this.last = last;
}
Person.prototype.fullName = function() {
    return this.first + ' ' + this.last;
}
Person.prototype.fullNameReversed = function() {
    return this.last + ', ' + this.first;
}   


Το Person.prototype είναι ένα αντικείμενο που το μοιράζονται όλα τα αντικείμενα Person. Αποτελεί μέρος της αλυσίδας αναζήτησης ιδιοτήτων: κάθε φορά που επιχειρούμε να προσπελάσουμε μια ιδιότητα του Person που δεν έχει οριστεί, η JavaScript θα ελέγξει το Person.prototype για να δει αν αυτή η ιδιότητα μπορεί να βρεθεί εκεί. Σαν αποτέλεσμα οτιδήποτε προστίθεται στο Person.prototype γίνεται διαθέσιμο σε όλα τα αντικείμενα που κατασκευάστηκαν με αυτόν τον constructor.

Αυτό είναι ένα απίστευτα ισχυρό εργαλείο. Η JavaScript σας επιτρέπει να μεταβάλλετε ένα prototype οποιαδήποτε στιγμή μέσα στο πρόγραμμά σας, το οποίο σημαίνει πως μπορείτε να προσθέσετε μεθόδους σε υπαρκτά αντικείμενα σε χρόνο εκτέλεσης:

κώδικας:   
> s = new Person("Simon", "Willison");
> s.firstNameCaps();
TypeError on line 1: s.firstNameCaps is not a function
> Person.prototype.firstNameCaps = function() {
    return this.first.toUpperCase()
}
> s.firstNameCaps()
SIMON   


Είναι ενδιαφέρον ότι μπορείτε να προσθέσετε πράγματα στο prototype των ενσωματωμένων αντικειμένων της JavaScript. Ας προσθέσουμε μία μέθοδο στο String που να επιστρέφει αυτό το string αντεστραμμένο:

κώδικας:   
> var s = "Simon";
> s.reversed()
TypeError on line 1: s.reversed is not a function
> String.prototype.reversed = function() {
    var r = '';
    for (var i = this.length - 1; i >= 0; i--) {
        r += this[i];
    }
    return r;
}
> s.reversed()
nomiS   


Η νέα μας μέθοδος δουλεύει ακόμα και σε string literals!

κώδικας:   
> "This can now be reversed".reversed()
desrever eb won nac sihT   


Όπως ανέφερα προηγούμενα το prototype αποτελεί μέρος μιας αλυσίδας. Ο αρχικός κρίκος της αλυσίδας είναι το Object.prototype, του οποίου οι μέθοδοι περιλαμβάνουν το toString(). Αυτή είναι η μέθοδος που καλείται κάθε φορά που προσπαθείτε να μετατρέψετε ένα αντικείμενο σε string. Αυτό είναι χρήσιμο για το debugging του αντικειμένου μας:

κώδικας:   
> var s = new Person("Simon", "Willison");
> s
[object Object]
> Person.prototype.toString = function() {
    return '<Person: ' + this.fullName() + '>';
}
> s
<Person: Simon Willison>   


Θυμάστε ότι η avg.apply() είχε ένα null ως πρώτο όρισμα; Μπορούμε τώρα να το αναθεωρήσουμε. Το πρώτο όρισμα στην apply() είναι το αντικείμενο που θα πρέπει να γίνει το this. Για παράδειγμα να μια επιπόλαιη υλοποίηση του new:

κώδικας:   
function trivialNew(constructor) {
    var o = {}; // Δημιουργία αντικειμένου
    constructor.apply(o, arguments);
    return o;
}   


Αυτό δεν είναι ένα ακριβές υποκατάστατο του new γιατί παραλείπει τη σύνδεση με το κατάλληλο prototype. Είναι δύσκολο να βρεθούν καλά παραδείγματα για την επεξήγηση της apply(), και δεν είναι κάτι που χρησιμεύει πολύ συχνά, αλλά είναι χρήσιμο να ξέρετε γι αυτήν.

Η apply έχει μια αδελφή συνάρτηση με το όνομα call η οποία επίσης σας επιτρέπει να ορίζεται το this, αλλά αντί για ένα array δέχεται μια σειρά ορισμάτων.

κώδικας:   
function lastNameCaps() {
    return this.last.toUpperCase();
}
var s = new Person("Simon", "Willison");
lastNameCaps.call(s);
// Είναι το ίδιο όπως:
s.lastNameCaps = lastNameCaps;
s.lastNameCaps();   



Ένθετες Συναρτήσεις

Είναι επιτρεπτός ο ορισμός συναρτήσεων JavaScript μέσα σε άλλες συναρτήσεις. Το είδαμε προηγούμενα, σε μια συνάρτηση makePerson(). Μια σημαντική λεπτομέρεια των ένθετων συναρτήσεων είναι ότι έχουν πρόσβαση σε μεταβλητές στην εμβέλεια (scope) της εξωτερικής συνάρτησης:

κώδικας:   
function betterExampleNeeded() {
    var a = 1;
    function oneMoreThanA() {
        return a + 1;
    }
    return oneMoreThanA();
}   


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

Αυτό είναι επίσης σημαντικό αντίμετρο στο δέλεαρ των global μεταβλητών. Όταν γράφουμε πολύπλοκο κώδικα είναι συχνά δελεαστικό να κάνουμε χρήση global μεταβλητών για να μοιραστούμε κοινές τιμές σε πολλές συναρτήσεις - το οποίο οδηγεί σε κώδικα που είναι δύσκολος στη συντήρηση. Οι ένθετες συναρτήσεις μπορούν να μοιραστούν μεταβλητές με τον γονέα τους, επομένως μπορείτε να χρησιμοποιήσετε αυτό το μηχανισμό για να ζευγαρώσετε συναρτήσεις όποτε έχει νόημα χωρίς να μολύνετε το global namespace - «local globals» αν προτιμάτε. Η χρήση αυτής της τεχνικής θα πρέπει να γίνεται με περίσκεψη, αλλά είναι μια χρήσιμη δυνατότητα να υπάρχει.


Closures

Αυτό μας οδηγεί σε μία από τις πιο ισχυρές αφαιρέσεις που έχει να προσφέρει η JavaScript - αλλά ενδεχομένως και την πιο δύσκολη να την κατανοήσει κανείς. Τι κάνει αυτό;

κώδικας:   
function makeAdder(a) {
    return function(b) {
        return a + b;
    }
}
x = makeAdder(5);
y = makeAdder(20);
x(6)
?
y(7)
?   


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

Αυτό που συμβαίνει εδώ είναι πάνω-κάτω το ίδιο με αυτό που συνέβαινε με τις ένθετες συναρτήσεις νωρίτερα: μια συνάρτηση ορισμένη μέσα σε μια άλλη έχει πρόσβαση στις μεταβλητές τις εξωτερικής συνάρτησης. Η μόνη διαφορά εδώ είναι ότι η εξωτερική συνάρτηση έχει ολοκληρωθεί, επομένως η κοινή λογική φαίνεται να λέει ότι οι τοπικές μεταβλητές της δεν υπάρχουν πια. Αλλά αυτές εξακολουθούν να υπάρχουν, διαφορετικά οι συναρτήσεις adder δε θα ήταν σε θέση να λειτουργήσουν. Και όχι μόνο αυτό αλλά υπάρχουν δύο «αντίγραφα» των τοπικών μεταβλητών της makeAdder, ένα που είναι 5 και ένα που είναι 20.

Να τι συνέβη στην πραγματικότητα. Κάθε φορά που η JavaScript εκτελεί μία συνάρτηση δημιουργεί ένα αντικείμενο scope (εμβέλεια) για να κρατήσει τις τοπικές μεταβλητές που υπάρχουν μέσα στη ρουτίνα. Αρχικοποιείται με όσες μεταβλητές πέρασαν ως παράμετροι της συνάρτησης. Αυτό είναι παρόμοιο με το global object όπου ζουν όλες οι global μεταβλητές και συναρτήσεις, αλλά με δύο σημαντικές διαφορές: πρώτον δημιουργείται ένα ολοκαίνουργιο αντικείμενο scope κάθε φορά που ξεκινά η εκτέλεση μιας συνάρτησης, και δεύτερο, αντίθετα με το global object (που στους browsers είναι προσβάσιμο ως window) αυτά τα αντικείμενα scope δε μπορούν να τύχουν άμεσου χειρισμού από τον κώδικα JavaScript. Δεν υπάρχει για παράδειγμα μηχανισμός που να μας επιτρέπει να διατρέξουμε τις ιδιότητες του τρέχοντος αντικειμένου scope.

Έτσι όταν καλείται η makeAdder δημιουργείται ένα αντικείμενο scope με μία ιδιότητα: a, η οποία είναι το όρισμα που περάστηκε στη συνάρτηση makeAdder. Η makeAdder μετά επιστρέφει μια ολοκαίνουργια συνάρτηση. Κανονικά σε αυτό το σημείο ο garbage collector της JavaScript θα μάζευε το αντικείμενο scope που δημιουργήθηκε για την makeAdder, αλλά η συνάρτηση που επεστράφη διατηρεί μια αναφορά σε αυτό το αντικείμενο scope. Σαν αποτέλεσμα το αντικείμενο scope δεν πρόκειται να συλλεχθεί από τον garbage collector μέχρις ότου πάψουν να υπάρχουν αναφορές στη συνάρτηση-αντικείμενο που επέστρεψε η makeAdder.

Τα αντικείμενα scope σχηματίζουν μία αλυσίδα που ονομάζεται scope chain, παρόμοια με την αλυσίδα των prototypes που χρησιμοποιούνται από το σύστημα αντικειμένων της JavaScript.

Μία closure είναι ο συνδυασμός μίας συνάρτησης και του αντικειμένου scope στο οποίο δημιουργήθηκε.

Οι closures σας επιτρέπουν να αποθηκεύσετε δεδομένα κατάστασης (state), και ως τέτοιες μπορούν συχνά να χρησιμοποιηθούν στη θέση αντικειμένων.


Διαρροές μνήμης

Μια δυσάρεστη παρενέργεια των closures είναι ότι κάνουν ιδιαίτερα εύκολη τη διαρροή μνήμης (memory leak) στον Internet Explorer. Η JavaScript είναι μία γλώσσα garbage collected - τα αντικείμενα κατά τη δημιουργία τους καταλαμβάνουν χώρο στη μνήμη και αυτή η μνήμη ανακτάται από τον browser όταν δεν απομένουν άλλες αναφορές στο αντικείμενο. Τα αντικείμενα που παρέχει το περιβάλλον τα διαχειρίζεται το ίδιο το περιβάλλον.

Οι browsers χρειάζεται να διαχειριστούν ένα μεγάλο αριθμό από αντικείμενα που αντιπροσωπεύουν την εκάστοτε HTML σελίδα - τα αντικείμενα του DOM. Είναι ευθύνη του browser να διαχειριστεί τη δέσμευση και αποδέσμευση της μνήμης.

Ο Internet Explorer χρησιμοποιεί το δικό του σύστημα garbage collection γι αυτά τα DOM αντικείμενα, ξεχωριστά από το μηχανισμό που χρησιμοποιεί η JavaScript. Είναι η αλληλεπίδραση μεταξύ των δύο που μπορεί να γίνει αιτία για διαρροές μνήμης.

Μια διαρροή μνήμης συμβαίνει στον IE κάθε φορά που σχηματίζεται μία κυκλική αναφορά ανάμεσα σε ένα αντικείμενο JavaScript και ένα DOM αντικείμενο. Θεωρήστε το εξής:

κώδικας:   
function leakMemory() {
    var el = document.getElementById('el');
    var o = { 'el': el };
    el.o = o;
}   


Η κυκλική αναφορά που σχηματίστηκε εδώ προκαλεί διαρροή μνήμης. Ο IE δε θα αποδεσμεύσει τη μνήμη που είναι σε χρήση για τα αντικείμενα el και o μέχρις ότου ο browser κάνει ολική επανεκκίνηση.

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

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

Οι closures κάνουν εύκολη την ακούσια δημιουργία διαρροών μνήμης. Δείτε αυτό:

κώδικας:   
function addHandler() {
    var el = document.getElementById('el');
    el.onclick = function() {
        this.style.backgroundColor = 'red';
    }
}   


Ο παραπάνω κώδικας ορίζει το στοιχείο που με κλικ θα γίνει κόκκινο. Επίσης δημιουργεί διαρροή μνήμης. Γιατί; Διότι η αναφορά στο el έχει πιαστεί ακούσια από την closure που δημιουργήθηκε για την ανώνυμη εσωτερική συνάρτηση. Αυτό δημιουργεί μία κυκλική αναφορά ανάμεσα σε ένα αντικείμενο JavaScript (τη συνάρτηση) και ένα εγγενές DOM αντικείμενο (το el).

Υπάρχει μια σειρά από workarounds γι αυτό το πρόβλημα. Το απλούστερο είναι:

κώδικας:   
function addHandler() {
    var el = document.getElementById('el');
    el.onclick = function() {
        this.style.backgroundColor = 'red';
    }
    el = null;
}   


Αυτό λειτουργεί με το να σπάει την κυκλική αναφορά.

Αναπάντεχα, ένα τρικ για το σπάσιμο μιας κυκλικής αναφοράς που προκλήθηκε από μια closure είναι η προσθήκη μίας ακόμα closure:

κώδικας:   
function addHandler() {
    var clickHandler = function() {
        this.style.backgroundColor = 'red';
    }
    (function() {
        var el = document.getElementById('el');
        el.onclick = clickHandler;
    })();
}   


Η εσωτερική συνάρτηση εκτελείται άμεσα, και κρύβει τα περιεχόμενά της από την closure που δημιουργήθηκε με την clickHandler.

Ένα άλλο καλό τρικ για την αποφυγή των closures είναι το σπάσιμο των κυκλικών αναφορών κατά το συμβάν window.onunload. Πολλές βιβλιοθήκες συμβάντων θα αναλάβουν να το κάνουν για λογαριασμό σας.
                                                                                                                         Simon Willison
____________________________________________________________

Ο Simon Willison εργάζεται για την Yahoo!, και στο blog του κάνει συχνές αναφορές σε θέματα JavaScript. Ακόμα θα είναι ένας από τους ομιλητές του συνεδρίου @media2006. Το παραπάνω κείμενο μεταφράστηκε χωρίς την άδειά του, αλλά υποθέτω ότι δε θα έχει αντίρρηση.
ΠΕΡΙΣΣΟΤΕΡΑ

Δευτέρα, 28 Ιανουαρίου 2013

ΠΑΡΑΔΕΙΓΜΑΤΑ ΜΕ ΤΗΝ JavaScript



  Παραδείγματα με την JavaScript


    1. Εμφάνιση Κειμένου – Η Εντολή Document.Write()

<html>

<body>

<script type="text/javascript">

document.write("Hello World!")

</script>


<p> Με τη μέθοδο write() του αντικειμένου document μπορούμε να

εμφανίσουμε ένα μήνυμα, δηλ. ένα κείμενο που θα ενσωματωθεί

με τον υπόλοιπο HTML κώδικα της ιστοσελίδας. </p>

</body>

</html>



    2. Μορφοποίηση Κειμένου με HTML Tags

<html>

<body>

<script type="text/javascript">

document.write("<h1>Hello World!</h1>")

</script>

<p> Με τη μέθοδο write() του αντικειμένου document μπορούμε να

χρησιμοποιήσουμε και τα γνωστά tags (ετικέτες) του HTML

κώδικα για να έχουμε την επιθυμητή μορφοποίηση του κειμένου

της ιστοσελίδας. </p>

</body>

</html>



   3. Η JavaScript στο Τμήμα Head

<html>

<head>

<script type="text/javascript">

function message() {

alert("Αυτό το alert box κλήθηκε από το συμβάν onload")

}

</script>

</head>

<body onload="message()">

<p> Μπορούμε να καλέσουμε συναρτήσεις της JavaScript από το

τμήμα body ενός HTML εγγράφου, τις οποίες συναρτήσεις

μπορούμε να γράψουμε στο τμήμα head της ιστοσελίδας. Εδώ

καλείται η συνάρτηση alert() από το συμβάν onload, δηλ. αμέσως

με το φόρτωμα της ιστοσελίδας, η οποία συνάρτηση alert()

εμφανίζει ένα παράθυρο (πλαίσιο) μηνύματος με το κείμενο που

της δόθηκε ως παράμετρος. </p>

</body>

</html>



   4. Η JavaScript στο Τμήμα Body

<html>

<head>

</head>

<body>

<script type="text/javascript">

document.write("Αυτό το μήνυμα εμφανίζεται με το φόρτωμα \

της ιστοσελίδας")

</script>

            <p> Με τα tags <script="text/javascript"> και </script>

ενημερώνουμε τον φυλλομετρητή ότι ακολουθεί κώδικας σε

JavaScript, ενώ με τον χαρακτήρα \ μπορούμε να συνεχίσουμε να

γράφουμε στην επόμενη γραμμή. </p>

</body>

</html>



   5. Ένα Εξωτερικό Αρχείο της JavaScript (.js)

<html>

<head>

</head>

<body>

<script src="xxx.js">

</script>

<p> Το πραγματικό script με τον κώδικα της JavaScript βρίσκεται σ’

ένα εξωτερικό αρχείο script με όνομα "xxx.js" και εδώ απλά

εισάγουμε (ενσωματώνουμε) το περιεχόμενό του στην τρέχουσα

ιστοσελίδα. </p>

            <p> Τα πλεονεκτήματα της ιδιότητας src του tag <script> είναι ότι δεν

είμαστε αναγκασμένοι να ενσωματώνουμε στην ιστοσελίδα μας

μακροσκελή κώδικα σε JavaScript, ο οποίος βρίσκεται

αποθηκευμένος σ’ ένα άλλο αρχείο, το ότι πολλοί χρήστες

μπορούν να χρησιμοποιήσουν τον κώδικα που περιέχεται στο

ίδιο εξωτερικό αρχείο με επέκταση .js καθώς και το ότι αν

γίνουν κάποιες αλλαγές στον κώδικα του εξωτερικού αυτού

αρχείου με επέκταση .js, δεν θα χρειασθεί  να ενσωματώσουμε

εκ νέου τον κωδικά του. </p>

</body>

</html>



     6. Δήλωση, Εκχώρηση & Εμφάνιση Τιμής Μεταβλητής

<html>

<body>

<script type="text/javascript">

var name = "Florina"

document.write(name)

document.write("<h1>"+name+"</h1>")

</script>

<p> Στο παράδειγμα αυτό δηλώνουμε μια μεταβλητή της JavaScript με

την εντολή δήλωσης var και με το όνομα name, μετά της

εκχωρούμε μια τιμή και τέλος την εμφανίζουμε με τη μέθοδο

write() ως απλό κείμενο. </p>

<p> Αμέσως μετά εμφανίζουμε την τιμή (περιεχόμενο) της

μεταβλητής name ακόμα μία φορά, αυτή τη φορά ως

επικεφαλίδα επιπέδου h1. </p>

</body>

</html>



      7. Δήλωση και Κλήση Συνάρτησης (Function)

<html>

<head>

<script type="text/javascript">

function myfunction() {

alert("Florina per sempre")

}

</script>

</head>

<body>

<form>

<input type="button"

onclick="myfunction()"

value="Κλήση της συνάρτησης">

</form>

<p> Στο παράδειγμα αυτό βλέπουμε τον τρόπο κλήσης μιας

συνάρτησης (function) της JavaScript, όπου κάνοντας κλικ σ’

ένα πλήκτρο εντολής (button) μιας φόρμας (form), καλείται μια

συνάρτηση που περιέχει μια άλλη συνάρτηση, την γνωστή alert(),

και εμφανίζει ένα alert box μ’ ένα μήνυμα. </p>

</body>

</html>



     8. Συνάρτηση με Όρισμα (Argument) – 1



<html>

<head>

<script type="text/javascript">

function myfunction(txt) {

alert(txt)

}

</script>

</head>

<body>

<form>

<input type="button"

onclick="myfunction('Florina per sempre')"

value="Κλήση της συνάρτησης">

</form>

<p> Στο παράδειγμα αυτό, γίνεται κλήση μιας συνάρτησης στην οποία

μεταβιβάζουμε ένα όρισμα (argument), εδώ ένα μήνυμα

κειμένου, και η συνάρτηση χρησιμοποιεί μια τοπική μεταβλητή

με όνομα txt για να εμφανίσει αυτό το μήνυμα σ’ ένα alert box.

</p>

</body>

</html>



     9. Συνάρτηση με Όρισμα (Argument) – 2

<html>

<head>

<script type="text/javascript">

function myfunction(txt) {

alert(txt)

}

</script>

</head>

<body>

<form>

<input type="button"

onclick="myfunction('Καλημέρα!')"

value="Το Πρωί">

<input type="button"

onclick="myfunction('Καλησπέρα!')"

value="Το Απόγευμα">

</form>

<p> Στο παράδειγμα αυτό χρησιμοποιούμε δύο πλήκτρα εντολής με

διαφορετικές ετικέτες (ιδιότητα value) και κάθε φορά που

κάνουμε κλικ σ’ ένα απ’ αυτά τα πλήκτρα εντολής, θα καλείται

η ίδια συνάρτηση αλλά θα εμφανίζεται το αντίστοιχο

(διαφορετικό) μήνυμα στο alert box. </p>

</body>

</html>



    10. Συνάρτηση που Επιστρέφει Τιμή

<html>

<head>

<script type="text/javascript">

function myFunction() {

return ("Γεια σας, να έχετε μια ευχάριστη διαμονή!")

}

</script>

</head>

<body>

<script type="text/javascript">

document.write(myFunction())

</script>

<p> Το script της JavaScript που βρίσκεται στο τμήμα body καλεί μια

συνάρτηση, η οποία επιστρέφει μια τιμή με την εντολή return και

εμφανίζει ένα κείμενο καλοσωρίσματος, το οποίο

ενσωματώνεται με το υπόλοιπο κείμενο της ιστοσελίδας. </p>

</body>

</html>



    11. Συνάρτηση με Ορίσματα που Επιστρέφει Τιμή

<html>

<head>

<script type="text/javascript">

function total(numberA, numberB) {

return numberA + numberB

}

</script>

</head>

<body>

<script type="text/javascript">

document.write(total(10, 20))

</script>

<p> Εδώ καλούμε μια συνάρτηση στην οποία μεταβιβάζουμε δύο

ορίσματα, τους αριθμούς 10 και 20, και η συνάρτηση επιστρέφει

με την εντολή return το άθροισμα αυτών των δύο παραμέτρων

(arguments). </p>

</body>

</html>



     12. Η Εντολή If

<html>

<body>

<script type="text/javascript">

var d = new Date()

var time = d.getHours()

if (time < 11) {

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

}

</script>

<p> Με το παράδειγμα αυτό άρχισε να φαίνεται καλύτερα ο

δυναμικός χαρακτήρας της JavaScript. Πιο συγκεκριμένα,

δημιουργούμε ένα καινούργιο αντικείμενο τύπου ημερομηνίας

(Date) με όνομα d και με τη βοήθειά του εκχωρούμε την

τρέχουσα ώρα του συστήματος του χρήστη στη μεταβλητή time.

</p>

<p> Μετά, κάνουμε χρήση της εντολής if, η οποία στη σύνταξή της

θυμίζει αρκετά την αντίστοιχη εντολή της γλώσσας

προγραμματισμού C, και αν η ώρα στο σύστημα του χρήστη

είναι πριν τις 11, θα εμφανισθεί ο χαιρετισμός "Καλημέρα",

αλλιώς τίποτα. </p>

</body>

</html>



      13. Η Εντολή If ... Else

<html>

<body>

<script type="text/javascript">

var d = new Date()

var time = d.getHours()

if (time < 11) {

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

}

else {

document.write("<b>Καλό υπόλοιπο ημέρας</b>")

}

</script>

<p> Στο παράδειγμα αυτό φαίνεται ο τρόπος σύνταξης της εντολής

if … else, όπου τώρα αν η ώρα στο σύστημα του χρήστη είναι

πριν τις 11, θα εμφανισθεί ο χαιρετισμός "Καλημέρα", αλλιώς θα

εμφανισθεί ο χαιρετισμός "Καλό υπόλοιπο ημέρας". </p>

</body>

</html>



      14. Επιλογή Τυχαίου Συνδέσμου (Random Link)

<html>

<body>

<script type="text/javascript">

var r=Math.random()

if (r>0.5) {

document.write("<a href='http://dipe.flo.sch.gr'>\

Δ/νση Α’/θμιας Εκπ/σης Φλώρινας</a>")

}

else {

document.write("<a href='http://dide.flo.sch.gr'>\

Δ/νση Β’/θμιας Εκπ/σης Φλώρινας</a>")

}

</script>

<p> Στο παράδειγμα αυτό γίνεται χρήση της συνάρτησης random()

του αντικειμένου Math, η οποία συνάρτηση παράγει

(δημιουργεί) έναν τυχαίο δεκαδικό αριθμό στο διάστημα 0 έως

1, και όπου ανάλογα με την τιμή που παράγεται από τη

συνάρτηση random(), εμφανίζεται ένας σύνδεσμος (link) είτε για

την ιστοσελίδα της Δ/νσης Α’/θμιας Εκπ/σης Φλώρινας ή για την

ιστοσελίδα της Δ/νσης Β’/θμιας Εκπ/σης Φλώρινας. </p>

<p> Οι πιθανότητες να εμφανισθεί η μια ή η άλλη ιστοσελίδα πρέπει

να είναι 50-50 και αυτό θα φανεί αν κάνουμε συνέχεια

ανανέωση (refresh) στην ιστοσελίδα μας, οπότε θα πρέπει να

εμφανίζονται από ίσες περίπου φορές οι δύο σύνδεσμοι. </p>

</body>

</html>



      15. Η Εντολή Switch

<html>

<body>

<script type="text/javascript">

var d = new Date()

theDay=d.getDay()

switch (theDay) {

case 5:

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

break

case 6:

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

                                                break

            case 0:

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

            break

            default:

                                                document.write("Ανυπομονώ για το\

Σαββατοκύριακο!")

}

</script>

<p> Στο παράδειγμα αυτό φαίνεται ο τρόπος σύνταξης της εντολής

switch, που θυμίζει πολύ την αντίστοιχη εντολή της γλώσσας

προγραμματισμού C. Κάνουμε χρήση του αντικειμένου Date για

να εκχωρήσουμε την τρέχουσα ημέρα της εβδομάδας, που

υπάρχει στο σύστημα του χρήστη, στη μεταβλητή theDay και

μετά εμφανίζουμε ένα διαφορετικό μήνυμα (χαιρετισμό)

ανάλογα με την τιμή της μεταβλητή αυτής, στην ουσία δηλαδή

ανάλογα με το ποια ημέρα είναι. </p>

<p> Οι αριθμοί των ημερών της εβδομάδας είναι ως εξής :

Κυριακή = 0, Δευτέρα = 1, Τρίτη =2 κοκ. </p>

</body>

</html>



       16. Ο Βρόχος For

<html>

<body>

<script type="text/javascript">

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

document.write("Ο αριθμός είναι : " + i)

document.write("<br>")

}

</script>

<p> Στο παράδειγμα αυτό φαίνεται ο τρόπος σύνταξης της εντολής

for, όπου ο βρόχος ξεκινάει με την τιμή i=0 και όσο το

<b>i</b> είναι μικρότερο από ή ίσο με το 10, ο βρόχος (loop)

θα συνεχίσει να εκτελείται και να εμφανίζεται ένα μήνυμα με

τον τρέχοντα αριθμό. </p>

<p> Ταυτόχρονα κάνουμε και αλλαγή γραμμής με το tag <br>. Το

<b>i</b> αυξάνεται κατά 1 κάθε φορά που εκτελείται ο

βρόχος. Και η εντολή αυτή θυμίζει πολύ την αντίστοιχη εντολή

της γλώσσας προγραμματισμού C. </p>

</body>

</html>



       17. Βρόχος στις Επικεφαλίδες (Headers) της HTML

<html>

<body>

<script type="text/javascript">

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

document.write("<h" + i + ">Επικεφαλίδα : " + i)

document.write("</h" + i + ">")

}

</script>

<p> Μπορούμε να χρησιμοποιήσουμε την εντολή for για να

εμφανίσουμε πολύ εύκολα και τις 6 επικεφαλίδες (headers) του

κώδικα HTML, δηλ. τα tags h1 έως h6. Αν δεν

χρησιμοποιούσαμε την εντολή for, θα έπρεπε να γράψουμε 6

φορές την αντίστοιχη εντολή document.write(). Βλέπουμε τον

τρόπο ενσωμάτωσης της μεταβλητής του βρόχου, της i, μέσα στο

αντίστοιχο tag. </p>

</body>

</html>



       18. Ο Bρόχος While

<html>

<body>

            <script type="text/javascript">

i = 0

while (i <= 10) {

document.write("Ο αριθμός είναι : " + i)

document.write("<br>")

i++

}

</script>

<p> Στο παράδειγμα αυτό φαίνεται ο τρόπος σύνταξης της εντολής

while, όπου ο βρόχος ξεκινάει με την τιμή i=0 και όσο το

<b>i</b> είναι μικρότερο από ή ίσο με το 10, ο βρόχος (loop)

θα συνεχίσει να εκτελείται και να εμφανίζεται ένα μήνυμα με

τον τρέχοντα αριθμό. </p>

<p> Ταυτόχρονα κάνουμε αλλαγή γραμμής με το tag <br> και

αυξάνουμε το <b>i</b> κατά ένα, με τον γνωστό από την C

τελεστή αύξησης i++, κάθε φορά που εκτελείται ο βρόχος. Και

η εντολή αυτή θυμίζει πολύ την αντίστοιχη εντολή της γλώσσας

προγραμματισμού C, όπου ο έλεγχος της συνθήκης γίνεται στην

αρχή του βρόχου. </p>

</body>

</html>



      19. Ο Βρόχος Do … While

<html>

<body>

<script type="text/javascript">

i = 0

do {

document.write("Ο αριθμός είναι : " + i)

document.write("<br>")

i++

}

while (i <= 10)

</script>

<p> Στο παράδειγμα αυτό φαίνεται ο τρόπος σύνταξης της εντολής

 do … while, όπου ο βρόχος ξεκινάει με την τιμή i=0 και όσο το

<b>i</b> είναι μικρότερο από ή ίσο με το 10, ο βρόχος (loop)

θα συνεχίσει να εκτελείται και να εμφανίζεται ένα μήνυμα με

τον τρέχοντα αριθμό. </p>

<p> Ταυτόχρονα κάνουμε αλλαγή γραμμής με το tag <br> και

αυξάνουμε το <b>i</b> κατά ένα, με τον γνωστό από την C

τελεστή αύξησης i++, κάθε φορά που εκτελείται ο βρόχος. Και

η εντολή αυτή θυμίζει πολύ την αντίστοιχη εντολή της γλώσσας

προγραμματισμού C, όπου ο έλεγχος της συνθήκης γίνεται στο

τέλος του βρόχου. </p>

</body>

</html>



       20. Η Ιδιότητα Length του Αντικειμένου String

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre!"

document.write("<p>Το παρακάτω κείμενο περιέχει " + str.length + " χαρακτήρες </p>")

document.write("<p>" + str + "</p>")

</script>

            <p> Με την ιδιότητα length του αντικειμένου String μπορούμε να

βρούμε το πλήθος των γραμμάτων, στην ουσία των χαρακτήρων,

που περιέχονται σε μια μεταβλητή του τύπου string. </p>

</body>

</html>



        21. Η Μέθοδος IndexOf() του Αντικειμένου String

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre"

var pos=str.indexOf("per")

if (pos>=0) {

document.write("Το per βρέθηκε στη θέση : ")

document.write(pos + "<br />")

}

else {

document.write("Δεν βρέθηκε το per")

}

</script>

<p> Με τη μέθοδο indexOf() του αντικειμένου String μπορούμε να

εξετάσουμε αν ένα κομμάτι κειμένου περιέχεται σ’ ένα string. Αν

το κομμάτι κειμένου βρεθεί μέσα στο string, η μέθοδος

επιστρέφει τη θέση του πρώτου χαρακτήρα του κειμένου μέσα

στο string, αλλιώς επιστρέφει την τιμή –1. </p>

<p> Πρέπει να έχουμε υπόψη μας ότι η θέση του πρώτου χαρακτήρα

ενός string είναι η 0. </p>

</body>

</html>



       22. Η Μέθοδος Match() του Αντικειμένου String

<html>

<body>

<script type="text/javascript">

var str = "Florina per sempre"

document.write(str.match("sempre"))

</script>

<p> Με τη μέθοδο match() του αντικειμένου String μπορούμε να

εξετάσουμε αν ένα κομμάτι κειμένου περιέχεται σ’ ένα string. Αν

το κομμάτι κειμένου βρεθεί μέσα στο string, η μέθοδος

επιστρέφει το ίδιο το κομμάτι κειμένου. </p>

</body>

</html>



       23. Η Μέθοδος Substr() του Αντικειμένου String

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre"

document.write(str.substr(2, 7))

</script>

<p> Με τη μέθοδο substr() του αντικειμένου String μπορούμε να

αποσπάσουμε (απομονώσουμε) ένα συγκεκριμένο κομμάτι ενός

string. Στο συγκεκριμένο παράδειγμα, δώσαμε τα ορίσματα 2

και 7 και το κομμάτι κειμένου που επιστρέφεται από τη μέθοδο

είναι το orina p, δηλ. αρχίζει από τη θέση 2, καθώς η αρχή είναι

το 0, και μετράει 7 χαρακτήρες σε πλήθος. </p>

</body>

</html>



       24. Η Μέθοδος Substring() του Αντικειμένου String

<html>

<body>

<script type="text/javascript">

var str="Florina per sempre"

document.write(str.substring(2, 6))

</script>

<p> Με τη μέθοδο substring() του αντικειμένου String μπορούμε

επίσης να αποσπάσουμε (απομονώσουμε) ένα συγκεκριμένο

κομμάτι ενός string. Στο συγκεκριμένο παράδειγμα, δώσαμε τα

ορίσματα 2 και 6 και το κομμάτι κειμένου που επιστρέφεται

από τη μέθοδο είναι το orin, δηλ. αρχίζει από τη θέση 2, καθώς η

αρχή είναι το 0, και πάει έως και τον 6ο χαρακτήρα, τον οποίο

δεν συμπεριλαμβάνει. </p>

</body>

</html>



       25. Η Μέθοδος toLowerCase() του Αντικειμένου String

<html>

<body>

<script type="text/javascript">

var str=("Florina per sempre")

document.write(str.toLowerCase())

</script>

<p> Με τη μέθοδο toLowerCase() του αντικειμένου String μπορούμε

να μετατρέψουμε όλα τα γράμματα ενός string σε πεζά

(lower case). </p>

</body>

</html>



       26. Η Μέθοδος toUpperCase() του Αντικειμένου String

<html>

<body>

<script type="text/javascript">

var str=("Florina per sempre")

document.write(str.toUpperCase())

</script>

<p> Με τη μέθοδο toUpperCase() του αντικειμένου String μπορούμε

να μετατρέψουμε όλα τα γράμματα ενός string σε κεφαλαία

(upper case). </p>

</body>

</html>



      27. Δημιουργία Πίνακα (Array)

<html>

<body>

<script type="text/javascript">

var cityname = new Array(4)

cityname[0] = "Γρεβενά"

cityname[1] = "Καστοριά"

cityname[2] = "Κοζάνη"

cityname[3] = "Φλώρινα"

document.write("Οι Νομοί της Δυτικής Μακεδονίας : "+"<br>")

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

document.write(cityname[i] + "<br>")

}

</script>

<p> Για τη δημιουργία ενός πίνακα (array) στην JavaScript,

δημιουργούμε ένα νέο αντικείμενο του τύπου Array,

προσδιορίζουμε τη διάστασή του και η αρίθμηση του πίνακα

ξεκινάει από το 0. </p>

</body>

</html>



       28. Δημιουργία Πίνακα με Απόδοση Τιμών

<html>

<body>

<script type="text/javascript">

var cityname = new Array("Γρεβενά", "Καστοριά", "Κοζάνη", "Φλώρινα")

document.write("Οι Νομοί της Δυτικής Μακεδονίας : "+"<br>")

for (i=0; i<cityname.length; i++) {

document.write(cityname[i] + "<br>")

}

</script>

<p> Μπορούμε μαζί τη δήλωση ενός πίνακα να ορίσουμε και τις τιμές

του απευθείας. Με την ιδιότητα length του αντικειμένου Array

μπορούμε να βρούμε το μέγεθος του πίνακα, δηλ. το πλήθος των

στοιχείων που περιέχει. </p>

</body>

</html>



       29. Μερικές Ιδιότητες και Μέθοδοι των Πινάκων

<html>

<body>

<script type="text/javascript">

var cityname = new Array(4)

cityname[0] = "Γρεβενά"

cityname[1] = "Καστοριά"

cityname[2] = "Κοζάνη"

cityname[3] = "Φλώρινα"

document.write(cityname.length + "<br>")

document.write(cityname.join("-") + "<br>")

document.write(cityname.reverse() + "<br>")

document.write(cityname.push("Πέλλα", "Ημαθία") + "<br>")

document.write(cityname.join("-") + "<br>")

document.write(cityname.pop() + "<br>")

document.write(cityname.join("-") + "<br>")

document.write(cityname.shift() + "<br>")

document.write(cityname.join("-") + "<br>")

</script>

            <p> Η ιδιότητα length εμφανίζει το πλήθος των στοιχείων του πίνακα,

η μέθοδος join() εμφανίζει τα στοιχεία του πίνακα σε μια σειρά

χωρισμένα με τον χαρακτήρα που δίνουμε ως όρισμα, η μέθοδος

reverse() αντιστρέφει τα στοιχεία του πίνακα, η μέθοδος push()

προσθέτει στοιχεία στον πίνακα και επιστρέφει το καινούργιο

μεγεθός του, η μέθοδος pop() αφαιρεί και επιστρέφει το

τελευταίο στοιχείο του πίνακα και η μέθοδος shift() αφαιρεί και

επιστρέφει το πρώτο στοιχείο του πίνακα. </p>

</body>

</html>



       30. Η Μέθοδος Concat() του Αντικειμένου Array

<html>

<body>

<script type="text/javascript">

var cityname = new Array(4)

cityname[0] = "Γρεβενά"

cityname[1] = "Καστοριά"

cityname[2] = "Κοζάνη"

cityname[3] = "Φλώρινα"

var cityname2 = new Array(4)

cityname2[0] = "Βόλος"

cityname2[1] = "Λάρισα"

cityname2[2] = "Καρδίτσα"

cityname2[3] = "Τρίκαλα"

var cityname3 = new Array("Έδεσσα", "Βέροια")

document.write(cityname.concat(cityname2) + "<br>")

document.write(cityname.concat(cityname2, cityname3) + "<br>")

                        document.write(cityname.join() + "<br>")

                        document.write(cityname2.join() + "<br>")

                        document.write(cityname3.join() + "<br>")

</script>

<p> Με τη μέθοδο concat() του αντικειμένου Array μπορούμε να

εμφανίσουμε τα στοιχεία δύο ή και περισσοτέρων πινάκων στη

σειρά. Οι πίνακες μένουν αμετάβλητοι. </p>

</body>

</html>



        31. Η Μέθοδος Slice() του Αντικειμένου Array

<html>

<body>

<script type="text/javascript">

var cityname = new Array(4)

cityname[0] = "Γρεβενά"

cityname[1] = "Καστοριά"

cityname[2] = "Κοζάνη"

cityname[3] = "Φλώρινα"

document.write(cityname.slice(2) + "<br>")

                        document.write(cityname.join() + "<br>")

</script>

            <p> Η μέθοδος slice() του αντικειμένου Array επιστρέφει έναν πίνακα

χωρίς το πλήθος των πρώτων στοιχείων του πίνακα που θα

προσδιορίσουμε στο όρισμα της μεθόδου. Ο πίνακας μένει

αμετάβλητος. </p>

</body>

</html>



        32. Μέθοδοι του Αντικειμένου Date για την Ημερομηνία

<html>

<body>

<script type="text/javascript">

var d = new Date()

document.write(d.getDate())

document.write(".")

document.write(d.getMonth() + 1)

document.write(".")

document.write(d.getFullYear())

</script>

            <p> Η μέθοδος getDate() επιστρέφει τον αριθμό της ημέρας του μήνα,

η μέθοδος getMonth() επιστρέφει τον αριθμό του μήνα και η

μέθοδος getFullYear() επιστρέφει το έτος σε πλήρη μορφή. Όλες

οι παραπάνω τιμές ισχύουν για την τρέχουσα ημερομηνία του

συστήματος του χρήστη. </p>

</body>

</html>



            33. Μέθοδοι του Αντικειμένου Date για την Ώρα

<html>

<body>

<script type="text/javascript">

var d = new Date()

document.write(d.getHours())

document.write(".")

document.write(d.getMinutes())

document.write(".")

document.write(d.getSeconds())

</script>

<p> Η μέθοδος getHours() επιστρέφει την ώρα σε 24ωρη μορφή, η

μέθοδος getMinutes() επιστρέφει τα λεπτά και η μέθοδος

getSeconds() επιστρέφει τα δευτερόλεπτα. Όλες οι παραπάνω

τιμές ισχύουν για την τρέχουσα ώρα του συστήματος του χρήστη.

</p>

</body>

</html>



           34. Η Μέθοδος SetFullYear() του Αντικειμένου Date

<html>

<body>

<script type="text/javascript">

var d = new Date()

d.setFullYear("2005")

document.write(d)

</script>

            <p> Με τη μέθοδο setFullYear() του αντικειμένου Date μπορούμε να

ορίσουμε το έτος της ημερομηνίας, το οποίο μπορεί να είναι

διαφορετικό από το τρέχον έτος του συστήματος του χρήστη.

</p>

</body>

</html>



          35. Μέθοδοι του Αντικειμένου Date για την Ώρα UTC

<html>

<body>

<script type="text/javascript">

var d = new Date()

document.write(d.getUTCHours())

document.write(".")

document.write(d.getUTCMinutes())

document.write(".")

document.write(d.getUTCSeconds())

</script>

<p> Η μέθοδος getUTCHours() επιστρέφει την ώρα σε 24ωρη μορφή,

η μέθοδος getUTCMinutes() επιστρέφει τα λεπτά και η μέθοδος

getUTCSeconds() επιστρέφει τα δευτερόλεπτα. Όλες οι

παραπάνω τιμές ισχύουν φυσικά για την τρέχουσα ώρα του

συστήματος του χρήστη, αλλά για τη διεθνή ώρα UTC (Universal

Time Coordinated) και όχι για την τοπική ώρα. </p>

</body>

</html>



          36. Εμφάνιση της Τρέχουσας Ημέρας της Εβδομάδας

<html>

<body>

<script type="text/javascript">

var d=new Date()

var weekday=new Array("Κυριακή", "Δευτέρα", "Τρίτη", "Τετάρτη", "Πέμπτη", "Παρασκευή", "Σάββατο")

document.write("Σήμερα είναι : " + weekday[d.getDay()])

</script>

<p> Η μέθοδος getDay() του αντικειμένου Date επιστρέφει την ημέρα

της εβδομάδας της τρέχουσας ημερομηνίας του συστήματος του

χρήστη, αλλά ως έναν αριθμό από το 0 έως και το 6, όπου

0=Κυριακή, 1=Δευτέρα κοκ. Έτσι, για να μπορέσουμε να

εμφανίσουμε την τρέχουσα ημέρα της εβδομάδας του

υπολογιστή του χρήστη σε κατανοητή μορφή, δημιουργήσαμε

έναν πίνακα με το όνομα weekday και καταχωρήσαμε εκεί τα

ονόματα των 7 ημερών της εβδομάδας. </p>

</body>

</html>



          37. Εμφάνιση του Ονόματος της Ημέρας και του Μήνα

<html>

<body>

<script type="text/javascript">

var d=new Date()

var weekday=new Array("Κυριακή", "Δευτέρα", "Τρίτη", "Τετάρτη", "Πέμπτη", "Παρασκευή", "Σάββατο")

var monthname=new Array("Ιαν", "Φεβρ", "Μαρ", "Απρ", "Μαι", "Ιουν", "Ιουλ", "Αυγ", "Σεπτ", "Οκτ", "Νοε", "Δεκ")

document.write(weekday[d.getDay()] + ", ")

document.write(d.getDate() + "  ")

document.write(monthname[d.getMonth()] + " ")

document.write(d.getFullYear())

</script>

<p> Η μέθοδος getMonth() του αντικειμένου Date επιστρέφει τον

αριθμό του μήνα της τρέχουσας ημερομηνίας του συστήματος

του χρήστη, με αρίθμηση από το 1 έως και το 12. Έτσι, για να

μπορέσουμε να εμφανίσουμε τον τρέχοντα μήνα του υπολογιστή

του χρήστη σε πιο κατανοητή μορφή, δημιουργήσαμε έναν

πίνακα με το όνομα monthname και καταχωρήσαμε εκεί τα

ονόματα των 12 μηνών του έτους. </p>

</body>

</html>



         38. Δημιουργία Ψηφιακού Ρολογιού

<html>

<head>

<script type="text/javascript">

var timer = null

function stop() {

clearTimeout(timer)

}

function start() {

var time = new Date()

var hours = time.getHours()

var minutes = time.getMinutes()

minutes=((minutes < 10) ? "0" : "") + minutes

var seconds = time.getSeconds()

seconds=((seconds < 10) ? "0" : "") + seconds

var clock = hours + ":" + minutes + ":" + seconds

document.forms[0].display.value = clock

timer = setTimeout("start()", 1000)

}

</script>

</head>

<body onload="start()" onunload="stop()">

<form>

<input type="text" name="display" size="20">

</form>

            <p> Το παράδειγμα αυτό δημιουργεί ένα ψηφιακό ρολόι που

εμφανίζει την τρέχουσα ώρα του υπολογιστή του χρήστη και

ενημερώνεται μόνο του κάθε 1 δευτερόλεπτο. Η ώρα

εμφανίζεται σ’ ένα πλαίσιο κειμένου μιας φόρμας και περιέχει

την ώρα σε 24ωρη μορφή, τα λεπτά και τα δευτερόλεπτα,

χωρισμένα με τον χαρακτήρα :. </p>

            <p> Δημιουργούμε ένα καινούργιο αντικείμενο με όνομα time, του

τύπου Date, και από εκεί καταχωρούμε την τρέχουσα ώρα, τα

λεπτά και τα δευτερόλεπτα στις αντίστοιχες μεταβλητές hours,

minutes και seconds. Χρησιμοποιούμε τον γνωστό από την C

δυαδικό τελεστή σύγκρισης, ώστε τα λεπτά και τα δευτερόλεπτα

να αποτελούνται πάντα από 2 ψηφία. </p>

            <p> Στη μεταβλητή clock καταχωρούμε τις τιμές των τριών αυτών

αριθμών και το string που δημιουργείται, το καταχωρούμε στο

περιεχόμενο του μοναδικού στοιχείου της μοναδικής φόρμας της

ιστοσελίδας, που είναι ένα πλαίσιο κειμένου με όνομα display

και μέγεθος 20. Επειδή δεν δώσαμε όνομα στη φόρμα,

χρησιμοποιούμε το στάνταρτ όνομα forms[0], δηλ. το πρώτο

στοιχείο του πίνακα φορμών forms[] της ιστοσελίδας.     </p>

            <p> Για να μπορέσει να εμφανισθεί η ψηφιακή ώρα μέσα στο πλαίσιο

κειμένου, χρησιμοποιούμε και τις έτοιμες συναρτήσεις

setTimeout() και clearTimeout(), καθώς και το αντικείμενο timer

και ορίζουμε χρόνο επανάληψης ίσο με 1000, δηλ. κάθε 1.000

χιλιοστά του δευτερολέπτου, άρα κάθε 1 δευτερόλεπτο.

</p>

<p> Η συνάρτηση start() καλείται με το συμβάν (event) onload, δηλ.

κάθε φορά που φορτώνεται η ιστοσελίδα στον φυλλομετρητή,

ενώ η συνάρτηση stop() καλείται με το συμβάν (event) onunload,

δηλ. κάθε φορά που εγκαταλείπουμε την ιστοσελίδα από τον

φυλλομετρητή. </p>

</body>

</html>



             39. Η Μέθοδος Round() του Αντικειμένου Math

<html>

<body>

<script type="text/javascript">

document.write(Math.round(4.57))

</script>

            <p> Με τη μέθοδο round() του αντικειμένου Math μπορούμε να

στρογγυλοποιήσουμε έναν δεκαδικό αριθμό στον πλησιέστερο

ακέραιο. Η τιμή που θα εμφανισθεί από τη μέθοδο round() στο συγκεκριμένο παράδειγμα θα είναι 5. </p>

</body>

</html>



         40. Η Μέθοδος Random() του Αντικειμένου Math

<html>

<body>

<script type="text/javascript">

document.write(Math.random())

</script>

<p> Με τη μέθοδο random() του αντικειμένου Math μπορούμε να

εμφανίσουμε έναν τυχαίο δεκαδικό αριθμό στο διάστημα 0 έως

1, με το 1 να μην συμπεριλαμβάνεται. </p>

</body>

</html>



41. Δημιουργία Τυχαίου Ακέραιου Αριθμού

<html>

<body>

<script type="text/javascript">

number=Math.random() * 10

document.write(Math.round(number))

</script>

<p> Για να δημιουργήσουμε έναν τυχαίο ακέραιο αριθμό στο

διάστημα 0 έως και 10, πρώτα χρησιμοποιούμε τη μέθοδο

random() του αντικειμένου Math για να δημιουργήσουμε έναν

τυχαίο δεκαδικό αριθμό στο διάστημα 0 έως 1, μετά

πολλαπλασιάζουμε αυτήν την τιμή με το 10 και τέλος παίρνουμε

το ακέραιο μέρος του γινομένου που έχει προκύψει. </p>

</body>

</html>



            42. Η Μέθοδος Max() του Αντικειμένου Math

<html>

<body>

<script type="text/javascript">

document.write("Μεγαλύτερος από τους 10 και 20 είναι ο : ")

document.write(Math.max(10, 20))

</script>

            <p> Με τη μέθοδο max() του αντικειμένου Math, μπορούμε να βρούμε

το μεγαλύτερο από δύο αριθμητικά ορίσματα. </p>

</body>

</html>



                43. Η Μέθοδος Min() του Αντικειμένου Math

<html>

<body>

<script type="text/javascript">

document.write("Μικρότερος από τους 10 και 20 είναι ο : ")

document.write(Math.min(10, 20))

</script>

            <p> Με τη μέθοδο min() του αντικειμένου Math, μπορούμε να βρούμε

το μικρότερο από δύο αριθμητικά ορίσματα. </p>

</body>

</html>



                     44. Μετατροπή Βαθμών Κελσίου σε Φαρενάιτ

<html>

<head>

<script type="text/javascript">

function convert(degree) {

if (degree=="C") {

                        F=document.myform.celsius.value * 9 / 5 + 32

                                    document.myform.fahrenheit.value=Math.round(F)

                        }

else {

                        C=(document.myform.fahrenheit.value -32) * 5 / 9

                        document.myform.celsius.value=Math.round(C)

                        }

}

</script>

</head>

<body>

<b> Καταχωρήστε έναν αριθμό σ’ ένα από τα δύο πλαίσια κειμένου

και ο αριθμός θα μετατραπεί αυτόματα σε βαθμούς Κελσίου ή

Φαρενάιτ, ανάλογα. </b><br />

<form name="myform">

<input name="celsius" onkeyup="convert('C')">

βαθμοί Κελσίου<br />είναι ίσοι με<br />

<input name="fahrenheit" onkeyup="convert('F')">

βαθμούς Φαρενάιτ

</form>

<br /> Χρησιμοποιήσαμε τη μέθοδο <b>round()</b> του

αντικειμένου Math, ώστε το αποτέλεσμα να εμφανίζεται ως

ακέραιος αριθμός.

            <p> Το παράδειγμα αυτό χρησιμοποιεί δύο πλαίσια κειμένου μιας

φόρμας, ένα για την εμφάνιση της τιμής μιας θερμοκρασίας σε

βαθμούς Κελσίου και ένα άλλο για την εμφάνιση της αντίστοιχης

θερμοκρασίας σε βαθμούς Φαρενάιτ. </p>

            <p> Η φόρμα έχει το όνομα myform και τα δύο πλαίσια κειμένου τα

ονόματα celsius και fahrenheit. Μόλις καταχωρήσουμε έναν

αριθμό σ’ ένα από τα δύο πλαίσια κειμένου, ενεργοποιείται το

συμβάν (event) onkeyup και καλείται η συνάρτηση convert() με

όρισμα είτε το C ή το F, ανάλογα βέβαια σε ποιο πλαίσιο

κειμένου γράψαμε κάτι. </p>

<p> Η συνάρτηση convert() χρησιμοποιεί μια τοπική μεταβλητή

με όνομα degree για να χειρισθεί την τιμή C ή F. Υπολογίζει την

αντίστοιχη τιμή σε βαθμούς Φαρενάιτ αν η μεταβλητή degree

είναι ίση με C, την στρογγυλοποιεί στον πλησιέστερο ακέραιο

και την καταχωρεί στο πλαίσιο κειμένου fahrenheit. Αν η

μεταβλητή degree είναι ίση με F, υπολογίζει την αντίστοιχη τιμή

σε βαθμούς Κελσίου, την στρογγυλοποιεί στον πλησιέστερο

ακέραιο και την καταχωρεί στο πλαίσιο κειμένου celsius. </p>

</body>

</html>



                        45. Μετατροπή Χαρακτήρα σε Unicode

<html>

<head>

<script type="text/javascript">

function toUnicode() {

var str=document.myForm.myInput.value

if (str!="") {

            unicode=str.charCodeAt(0)

            }

document.myForm.unicode.value=unicode

}

</script>

</head>

<body>

<form name="myForm">

Γράψτε έναν χαρακτήρα : <br />

<input size="1" name="myInput" maxlength="1" onkeyup="toUnicode()">

<hr />

Ο κώδικας Unicode του χαρακτήρα : <br />

<input size="3" name="unicode">

</form>

            <p> Με τη μέθοδο charCodeAt(0) μπορούμε να βρούμε τον κώδικα

Unicode ενός οποιουδήποτε χαρακτήρα. Μόλις γράψουμε έναν

χαρακτήρα στο πλαίσιο κειμένου myInput της φόρμας,

εκτελείται το συμβάν (event) onkeyup και καλείται η συνάρτηση

toUnicode(), η οποία διαβάζει το περιεχόμενο του πλαισίου

κειμένου myInput της φόρμας, χρησιμοποιεί τη μέθοδο

charCodeAt(0) για να υπολογίσει  τον κώδικα Unicode του

χαρακτήρα που καταχωρήθηκε και καταχωρεί αυτόν τον

κώδικα Unicode στο πλαίσιο κειμένου unicode της φόρμας.

</p>

</body>

</html>



                      46. Αλλαγή URL και Κειμένου Ενός Συνδέσμου (Link)

<html>

<head>

<script type="text/javascript">

function myHref() {

document.getElementById('myAnchor').innerHTML=

"Επισκεφθείτε τη Φλώρινα"

document.getElementById('myAnchor').href=

"http://www.florina.gr"

}

</script>

</head>

<body>

<a id="myAnchor" href="http://www.kozani.gr"> Επισκεφθείτε την Κοζάνη </a>

<form>

<input type="button" onclick="myHref()" value="Αλλαγή του URL και του κειμένου του link">

</form>

            <p> Αυτό το παράδειγμα έχει πρόσβαση σε αντικείμενα DOM της

JavaScript. Πιο συγκεκριμένα, αλλάζει τις ιδιότητες (attributes)

innerHTML και href ενός αντικειμένου του τύπου Anchor, όπου

η πρώτη ιδιότητα αναφέρεται στο κείμενο ενός δεσμού (anchor)

και η δεύτερη ιδιότητα αναφέρεται στη διεύθυνση (URL) που θα

οδηγηθούμε αν κάνουμε κλικ στον δεσμό. </p>

<p> Χρησιμοποιούμε έναν δεσμό στον οποίο δίνουμε το id myAnchor

για να τον αντιμετωπίσουμε ως αντικείμενο και να μπορέσουμε

έτσι να τον διαχειριστούμε και μια φόρμα που περιέχει ένα

πλήκτρο εντολής (button), στο οποίο αν κάνουμε κλικ καλείται η

συνάρτηση myHref(), η οποία εντοπίζει το αντικείμενο του

δεσμού κάνοντας χρήση της συνάρτησης getElementById() και

του id του δεσμού και έτσι αποκτά πρόσβαση στις ιδιότητες

innerHTML και href του δεσμού, για να μπορεί να αλλάξει τις

τιμές τους. </p>

</body>

</html>



               47. Αλλαγή της Ιδιότητας Target ενός Link

<html>

<head>

<script type="text/javascript">

function myTarget() {

document.getElementById('myAnchor').target="_blank"

}

</script>

</head>

<body>

<a id="myAnchor" href="http://www.florina.gr"> Επισκεφθείτε τη Φλώρινα </a>

<form>

<input type="button" onclick="myTarget()" value="Άνοιγμα του συνδέσμου σ’ ένα νέο παράθυρο">

</form>

<p> Δοκιμάστε τον σύνδεσμο (link) πριν και αφού έχετε κάνει κλικ

στο πλήκτρο εντολής. Η διαφορά είναι ότι την πρώτη φορά η

καινούργια ιστοσελίδα θα ανοίξει στο ίδιο παράθυρο, ενώ τη

δεύτερη φορά η καινούργια ιστοσελίδα θα ανοίξει σ’ ένα νέο

παράθυρο. </p>

            <p> Το παράδειγμα αυτό αναφέρεται στο αντικειμένου Anchor και

χρησιμοποιεί την ιδιότητά του target, στην οποία δίνει την τιμή

_blank, ώστε να αναγκάσει έναν σύνδεσμο (lnik) να ανοίξει μια

καινούργια ιστοσελίδα σ’ ένα νέο και όχι στο τρέχον παράθυρο.

</p>

</body>

</html>



48. Οι Συναρτήσεις Focus() και Blur()

<html>

<head>

<style type="text/css">

a:active {color:blue}

</style>

<script type="text/javascript">

function getfocus() {

document.getElementById('flo').focus()

}

function losefocus() {

document.getElementById('flo').blur()

}

</script>

</head>

<body>

<a id="flo" href="http://www.florina.gr"> Επισκεφθείτε τη Φλώρινα </a>

<form>

<input type="button" onclick="getfocus()" value="Εστίαση">

<input type="button" onclick="losefocus()" value="Απώλεια Εστίασης">

</form>

            <p> Το παράδειγμα αυτό χρησιμοποιεί τις μεθόδους focus() και blur()

του αντικειμένου Anchor, για να μπορέσουμε να αποκτήσουμε

εστίαση ή για να έχουμε απώλεια εστίασης, αντίστοιχα, από έναν

σύνδεσμο (link). </p>

</body>

</html>



49. Μετάβαση σε Συγκεκριμένο Δεσμό (Anchor)

<html>

<body>

<script type="text/javascript">

function linkToAnchor(num) {

var win2=open("mywebpage.html", "secondLinkWindow", "scrollbars=yes, width=250, height=200")

win2.location.hash=num

}

</script>

<h3> Σύνδεσμοι (Links) και Δεσμοί (Anchors) </h3>

<p> Κάντε κλικ σ’ ένα από τα πλήκτρα εντολής για να εμφανισθεί ο

αντίστοιχος δεσμός (anchor) μιας ιστοσελίδας σ’ ένα άλλο

παράθυρο. </p>

<form>

<input type="button" value="0" onClick="linkToAnchor(this.value)">

<input type="button" value="1" onClick="linkToAnchor(this.value)">

<input type="button" value="2" onClick="linkToAnchor(this.value)">

<input type="button" value="3" onClick="linkToAnchor(this.value)">

</form>

<p> Σ’ αυτό το παράδειγμα υπάρχουν δύο παράθυρα. Το πρώτο

παράθυρο είναι η κεντρική ιστοσελίδα και περιέχει μια φόρμα

με τέσσερα πλήκτρα εντολής (buttons), ενώ το δεύτερο

παράθυρο ανοίγει εφόσον κάνουμε κλικ σ’ ένα από τα τέσσερα

πλήκτρα εντολής, τα οποία έχουν ετικέτες τους αριθμούς 0 έως

και 3, οπότε πηγαίνουμε στον αντίστοιχο δεσμό (anchor) της

ιστοσελίδας με όνομα mywebpage.html. </p>

<p> Η μετάβαση στον αντίστοιχο δεσμό γίνεται με την εκχώρηση της

κατάλληλης τιμής στην ιδιότητα hash του αντικειμένου location

του δεύτερου παραθύρου, το οποίο έχει το όνομα win2. Με το

κλικ σ’ ένα από τα πλήκτρα εντολής ενεργοποιείται το συμβάν

(event) onClick και καλείται η συνάρτηση linkToAnchor(), στην

οποία μεταβιβάζεται η παράμετρος this.value, δηλ. η τιμή του

ίδιου του πλήκτρου εντολής. </p>

</body>

</html>



50. Εμφάνιση του Ονόματος μιας Φόρμας

<html>

<body>

<form name="myForm">

Το όνομα της φόρμας είναι :

<input type="text" name="text1" size="20">

<br /><br />

<input type="button"

value="Εμφάνιση του ονόματος της φόρμας"

onClick="this.form.text1.value=this.form.name">

</form>

            <p> Στο παράδειγμα αυτό χρησιμοποιούμε μια φόρμα με όνομα

myForm, η οποία περιέχει ένα πλαίσιο κειμένου, που είναι κενό

αρχικά, και ένα πλήκτρο εντολής, στο οποίο αν κάνουμε κλικ θα

εμφανισθεί το όνομα της φόρμας μέσα στο πλαίσιο κειμένου. </p>

<p> Με το κλικ στο πλήκτρο εντολής, ενεργοποιείται το συμβάν

 (event) onClick και καταχωρείται το όνομα της φόρμας, δηλ. η

ιδιότητά της name, στην ιδιότητα value του πλαισίου κειμένου

της φόρμας. </p>

</body>

</html>



51. Εμφάνιση Ονομάτων των Στοιχείων μιας Φόρμας

<html>

<head>

<script type="text/javascript">

function showFormElements(theForm) {

str="Τα στοιχεία της φόρμας είναι τα εξής : "

for (i=0; i<theForm.length; i++)

str+=" \n " + theForm.elements[i].name

alert(str)

}

</script>

</head>

<body>

<form>

Όνομα : <input type="text" name="fname" size="20">

<br />

Επώνυμο : <input type="text" name="lname" size="20">

<br /><br />

<input type="button" name="button1"

value="Εμφάνιση Ονομάτων των στοιχείων της φόρμας"

onClick="showFormElements(this.form)">

</form>

            <p> Το παράδειγμα αυτό εμφανίζει τα ονόματα όλων των στοιχείων

μιας φόρμας μόλις κάνουμε κλικ σ’ ένα πλήκτρο εντολής. Η

συγκεκριμένη φόρμα περιέχει δύο πλαίσια κειμένου με ονόματα

fname και lname και ένα πλήκτρο εντολής με όνομα button1.

Μόλις κάνουμε κλικ στο πλήκτρο εντολής button1, καλείται η

συνάρτηση showFormElements(), μέσω του συμβάντος (event)

onClick, στην οποία μεταβιβάζεται η παράμετρος this.form, δηλ.

η ίδια η φόρμα. </p>

            <p> Μέσα στη συνάρτηση showFormElements() χρησιμοποιούμε την

ιδιότητα length του αντικειμένου Form για να κάνουμε έναν

βρόχο σ’ όλα τα στοιχεία της φόρμας, τα οποία εξ ορισμού έχουν

ονόματα elements[0], elements[1] κοκ. Από κάθε στοιχείο της

φόρμας λαμβάνουμε το όνομά του μέσω της ιδιότητάς του name

και ενώνουμε όλα τα ονόματα σ’ ένα string με όνομα str, στο

οποίο καταχωρούμε και τον χαρακτήρα \n, δηλ. την αλλαγή

γραμμής. Τέλος, εμφανίζουμε το περιεχόμενο του string str σ’ ένα

alert box. </p>

</body>

</html>



52. Η Ιδιότητα Checked ενός Πλαισίου Ελέγχου

<html>

<head>

<script type="text/javascript">

function check() {

var x=document.forms.myForm

x[0].checked=true

}

function uncheck() {

var x=document.forms.myForm

x[0].checked=false

}

</script>

</head>

<body>

<form name="myForm">

<input type="checkbox" value="on">

<input type="button" onclick="check()" value="Επιλογή του Πλαισίου Ελέγχου (Checkbox)">

<input type="button" onclick="uncheck()" value="Αποεπιλογή του Πλαισίου Ελέγχου (Checkbox)">

</form>

            <p> Στο παράδειγμα αυτό χρησιμοποιούμε ένα πλαίσιο ελέγχου

(checkbox) και δύο πλήκτρα εντολής (buttons) σε μια φόρμα,

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

γίνεται ενεργό (επιλέγεται), ενώ με κλικ στο άλλο πλήκτρο

εντολής, το ίδιο πλαίσιο ελέγχου γίνεται ανενεργό

(αποεπιλέγεται). </p>

<p> Η ιδιότητα που καθορίζει αν ένα πλαίσιο ελέγχου θα είναι

επιλεγμένο ή όχι, είναι η checked, η οποία μπορεί να πάρει μία

από τις τιμές true ή false, αντίστοιχα. Το πλαίσιο ελέγχου είναι το

πρώτο στοιχείο της  φόρμας και έχει έτσι την αρίθμηση 0. </p>

</body>

</html>



53. Πλαίσια Ελέγχου (Checkboxes) σε μια Φόρμα

<html>

<head>

<script type="text/javascript">

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

}

</script>

</head>

<body>

<form>

Πώς θέλετε τον καφέ σας; <br /><br />

<input type="checkbox" name="coffee" value="κρέμα"> Με κρέμα <br />

<input type="checkbox" name="coffee" value="ζάχαρη"> Με ζάχαρη <br />

<br />

<input type="button" name="test" onclick="check()" value="Παραγγελία">

<br /><br />

<input type="text" name="answer" size="50">

</form>

            <p> Στο παράδειγμα αυτό έχουμε μια φόρμα με δύο πλαίσια ελέγχου,

τα οποία έχουν το ίδιο όνομα coffee και έτσι δημιουργείται

αυτόματα ένας πίνακας (array), όπου τα ονόματα των πλαισίων

ελέγχου γίνονται coffee[0] και coffee[1] αντίστοιχα. Η φόρμα

περιέχει ακόμη ένα πλήκτρο εντολής στο οποίο πρέπει να

κάνουμε κλικ για να γίνει η εικονική παραγγελία και να κληθεί η

συνάρτηση check(), η οποία θα αναλάβει να ελέγξει ποιο ή ποια

πλαίσια ελέγχου έχουν επιλεγεί. </p>

            <p> Αν ένα πλαίσιο ελέγχου έχει επιλεγεί, τότε προστίθεται η ιδιότητά

του value σ’ ένα string με όνομα txt και αφού ελεγχθούν και τα

δύο πλαίσια ελέγχου, καταχωρείται ένα κατάλληλο string στο

πλαίσιο κειμένου answer της φόρμας, όπου και θα εμφανισθεί το

αποτέλεσμα της παραγγελίας. </p>

</body>

</html>



54. Πλαίσιο Ελέγχου και Πλαίσια Κειμένου

<html>

<body>

<script type="text/javascript">

function convertField(field) {

if (document.form1.convertUpper.checked) {

            field.value=field.value.toUpperCase()

            }

}

function convertAllFields() {

document.form1.fname.value=document.form1.fname.value.toUpperCase()

document.form1.lname.value=document.form1.lname.value.toUpperCase()

}

</script>

<form name="form1">

Όνομα : <input type="text" name="fname" onChange="convertField(this)" size="20" />

<br />

Επώνυμο : <input type="text" name="lname" onChange="convertField(this)" size="20" />

<br />

Μετατροπή των καταχωρήσεων σε κεφαλαία γράμματα

<input type="checkBox" name="convertUpper"

onClick="if (this.checked) {convertAllFields()}"

value="ON">

</form>

            <p> Το παράδειγμα αυτό χρησιμοποιεί μια φόρμα με δύο πλαίσια

κειμένου και ένα πλαίσιο ελέγχου. Θα πρέπει να

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

επιλέξουμε το πλαίσιο ελέγχου, όλες οι καταχωρήσεις θα

μετατραπούν σε κεφαλαία γράμματα (uppercase). </p>

<p> Για τη μετατροπή αυτή χρησιμοποιούμε τη γνωστή συνάρτηση

toUpperCase() του αντικειμένου String και η μετατροπή των

καταχωρήσεων σε κεφαλαία γράμματα γίνεται είτε με επιλογή

του πλαισίου ελέγχου ή με οποιαδήποτε αλλαγή σ’ ένα από τα

πλαίσια κειμένου εφόσον είναι ήδη επιλεγμένο το πλαίσιο

ελέγχου. </p>

</body>

</html>



55. Πλήθος των Δεσμών (Anchors) μιας Ιστοσελίδας

<html>

<body>

<a name="A">Πρώτος δεσμός (anchor)</a><br />

<a name="B">Δεύτερος δεσμός (anchor)</a><br />

<a name="C">Τρίτος δεσμός (anchor)</a><br />

<br />

Πλήθος των δεσμών (anchors) που υπάρχουν σ’ αυτό το έγγραφο :

<script type="text/javascript">

document.write(document.anchors.length)

</script>

            <p> Το παράδειγμα αυτό εμφανίζει το πλήθος των δεσμών (anchors)

που υπάρχουν σε μια ιστοσελίδα και προς τον σκοπό αυτό

χρησιμοποιεί την ιδιότητα length του αντικειμένου Anchors. Οι

δεσμοί ενός εγγράφου αποκτούν τα ονόματα anchors[0],

anchors[1] κοκ, ανήκουν δηλαδή σ’ έναν πίνακα array. </p>

</body>

</html>



56. Εμφάνιση του Domain Name μιας Ιστοσελίδας

<html>

<body>

Το domain name του site της ιστοσελίδας είναι το :

<script type="text/javascript">

document.write(document.domain)

</script>

            <p> Μπορούμε να χρησιμοποιήσουμε την ιδιότητα domain του

αντικειμένου document για να εμφανίσουμε το domain name

(όνομα χώρου) όπου ανήκει η τρέχουσα ιστοσελίδα. </p>

</body>

</html>



57. Εμφάνιση του Referrer Ενός Εγγράφου

<html>

<body>

Το referrer αυτής της ιστοσελίδας είναι το εξής :

<script type="text/javascript">

document.write(document.referrer)

</script>

<p> Μπορούμε να χρησιμοποιήσουμε την ιδιότητα referrer του

αντικειμένου document για να βρούμε το URL του εγγράφου

από το οποίο ήρθαμε στην τρέχουσα ιστοσείδα. </p>

</body>

</html>



58. Εμφάνιση του Τίτλου (Title) Ενός Εγγράφου

<html>

<head>

<title>Florina per Sempre</title>

</head>

<body>

Ο τίτλος αυτής της ιστοσελίδας είναι ο εξής :

<script type="text/javascript"> document.write(document.title)

</script>

<p> Μπορούμε να χρησιμοποιήσουμε την ιδιότητα title του

αντικειμένου document για να εμφανίσουμε τον τίτλο της

τρέχουσας ιστοσελίδας. </p>

</body>

</html>



59. Εμφάνιση του URL Ενός Εγγράφου

<html>

<head>

<script type="text/javascript">

function showURL() {

alert(document.URL)

}

</script>

</head>

<body>

<form>

<input type="button" onclick="showURL()" value="Εμφάνιση του URL">

</form>

<p> Μπορούμε να χρησιμοποιήσουμε την ιδιότητα URL του

αντικειμένου document για να εμφανίσουμε το URL της

τρέχουσας ιστοσελίδας. </p>

</body>

</html>



60. Η Μέθοδος getElementById()

<html>

<head>

<script type="text/javascript">

function getElement() {

var x=document.getElementById("myHeader")

alert("Είμαι ένα " + x.tagName + " στοιχείο")

}

</script>

</head>

<body>

<h1 id="myHeader" onClick="getElement()"> Κάντε κλικ εδώ για να δείτε ποιο στοιχείο είμαι! </h1>

            <p> Στο παράδειγμα αυτό δώσαμε το id myHeader σ’ ένα στοιχείο

επικεφαλίδας h1 και μετά με το συμβάν (event) onClick

καλέσαμε τη συνάρτηση getElement(), η οποία χρησιμοποιεί τη

μέθοδο getElementById() για να εντοπίσει ένα στοιχείο με βάση

το id του, για να εμφανίσουμε το είδος του στοιχείου, κάνοντας

χρήση της ιδιότητας tagName. </p>

</body>

</html>



61. Η Μέθοδος getElementsByName()

<html>

<head>

<script type="text/javascript">

function getElements() {

var x=document.getElementsByName("myInput")

alert(x.length + " στοιχεία")

}

</script>

</head>

<body>

<form >

<input name="myInput" type="text" size="20"><br />

<input name="myInput" type="text" size="20"><br />

<input name="myInput" type="text" size="20"><br />

<br />

<input name="mybutton" type="button"

onclick="getElements()"

value="Δείτε πόσα στοιχεία έχουν το όνομα 'myInput'">

</form>

            <p> Στο παράδειγμα αυτό χρησιμοποιούμε τη μέθοδο

getElementsByName() για να δούμε πόσα στοιχεία έχουν ίδιο

(κοινό) όνομα. </p>

</body>

</html>



62. Μέτρηση των Φορμών Ενός Εγγράφου

<html>

<body>

<form name="Form1">

Όνομα :  <input type="text" size="20">

</form>

<form name="Form2">

Ηλικία : <input type="text" size="3">

</form>

<script type="text/javascript">

txt="Αυτό το έγγραφο περιέχει :  " + document.forms.length + " φόρμες."

document.write(txt)

</script>

            <p> Το αντικείμενο Forms είναι στην ουσία ένας πίνακας (array), που

περιέχει ως στοιχεία όλες τις φόρμες ενός εγγράφου

(ιστοσελίδας), και η αναφορά σε μια φόρμα μπορεί να γίνει είτε

ως forms[0], forms[1] κοκ, ανάλογα με το ποια φόρμα

εμφανίζεται πρώτη στον κώδικα, είτε με το όνομα που έχει

πάρει η φόρμα από την ιδιότητά της name. Για να εμφανίσουμε

το πλήθος των φορμών ενός εγγράφου, χρησιμοποιούμε τη

γνωστή ιδιότητα length του αντικειμένου forms. </p>

</body>

</html>



63. Μέτρηση των Εικόνων Ενός Εγγράφου

<html>

<body>

<img border="0" src="florina01.jpgf" width="500" height="50"><br />

<img border="0" src="florina02.jpg" width="500" height="50"><p>

<script type="text/javascript">

document.write("Αυτό το έγγραφο περιέχει : " + document.images.length + " εικόνες.")

</script>

</p>

<p> Το αντικείμενο Images είναι στην ουσία ένας πίνακας (array), που

περιέχει ως στοιχεία όλες τις εικόνες ενός εγγράφου

(ιστοσελίδας), και η αναφορά σε μια εικόνα μπορεί να γίνει ως

images[0], images[1] κοκ, ανάλογα με το ποια εικόνα

εμφανίζεται πρώτη στον κώδικα. Για να εμφανίσουμε το πλήθος

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

length του αντικειμένου images. </p>

</body>

</html>



64. Πρόσβαση στα Στοιχεία μιας Φόρμας

<html>

<body>

<form id="Form1" name="Form1">

Φόρμα1 : <input type="text">

</form>

<form id="Form2" name="Form2">

Φόρμα2 : <input type="text">

</form>

<p><b> Για να εμφανίσουμε το όνομα μιας φόρμας, </b></p>

<p><b> Μπορούμε να χρησιμοποιήσουμε τον αριθμό της φόρμας :

</b></p>

<script type="text/javascript">

document.write("<p>Το όνομα της πρώτης φόρμας είναι : ")

document.write(document.forms[0].name + "</p>")

document.write("<p>Το όνομα της δεύτερης φόρμας είναι : ")

document.write(document.forms[1].name + "</p>")

</script>

<p><b>Ή το όνομα της φόρμας : </b></p>

<script type="text/javascript">

document.write("<p>Το όνομα της πρώτης φόρμας είναι : ")

document.write(document.getElementById("Form1").name + "</p>")

document.write("<p>Το όνομα της δεύτερης φόρμας είναι : ")

document.write(document.getElementById("Form2").name + "</p>")

</script>

</body>

</html>



65. Με Ποιο Πλήκτρο του Ποντικιού Έγινε Κλικ

<html>

<head>

<script type="text/javascript">

function whichButton(event) {

if (event.button==1) {

alert("Κάνατε κλικ στο αριστερό πλήκτρο του ποντικιού.")

}

else {

alert("Κάνατε κλικ στο δεξί πλήκτρο του ποντικιού.")

}

}

</script>

</head>

<body onmousedown="whichButton(event)">

<p> Κάντε κλικ μέσα στο έγγραφο. Ένα πλαίσιο μηνύματος (alert box)

θα δείξει σε ποιο πλήκτρο του ποντικιού κάνατε κλικ. </p>

            <p> Έχουμε ορίσει μέσα στο tag body να γίνεται κλήση της

συνάρτησης whichButton(), με όρισμα το αντικείμενο event, κάθε

φορά που ενεργοποιείται το συμβάν (event) onmousedown, δηλ.

κάθε φορά που κάνουμε κλικ με το ποντίκι. Το αντικείμενο

event έχει την ιδιότητα button, η οποία αν έχει πάρει την τιμή 1,

θα σημαίνει ότι πατήθηκε το αριστερό πλήκτρο του ποντικιού,

αλλιώς, μια άλλη τιμή, θα σημαίνει ότι πατήθηκε το δεξί

πλήκτρο του ποντικιού. </p>

</body>

</html>



66. Οι Συντεταγμένες του Δρομέα (Cursor)

<html>

<head>

<script type="text/javascript">

function show_coords(event) {

x=event.clientX

y=event.clientY

alert("X συντεταγμένη : " + x + ", Y συντεταγμένη : " + y)

}

</script>

</head>

<body onmousedown="show_coords(event)">

<p> Κάντε κλικ μέσα στο έγγραφο. Ένα πλαίσιο μηνύματος (alert box)

θα δείξει τις x και y συντεταγμένες του δρομέα. </p>

<p> Χρησιμοποιούμε τις ιδιότητες clientX και clientY του αντικειμένου

event για να βρούμε τις συντεταγμένες του δρομέα (cursor) του

ποντικιού στο σημείο που έγινε κλικ. </p>

</body>

</html>



67. Ο Κώδικας Unicode του Πλήκτρου που Πατήθηκε

<html>

<head>

<script type="text/javascript">

function whichButton(event) {

alert(event.keyCode)

}

</script>

</head>

<body onkeyup="whichButton(event)">

<p> Πατήστε ένα πλήκτρο από το πληκτρολόγιο και ένα πλαίσιο

μηνύματος (alert box) θα εμφανίσει τον κώδικα unicode του

πλήκτρου που πατήθηκε. </p>

            <p> Έχουμε ορίσει μέσα στο tag body να γίνεται κλήση της

συνάρτησης whichButton(), με όρισμα το αντικείμενο event, κάθε

φορά που ενεργοποιείται το συμβάν (event) onkeyup, δηλ. κάθε

φορά που πατάμε και αφήνουμε κάποιο πλήκτρο από το

πληκτρολόγιο. Το αντικείμενο event έχει την ιδιότητα keyCode, η

οποία περιέχει τον κωδικό unicode του πλήκτρου που πατήθηκε.

</p>

</body>

</html>



68. Οι Συνεταγμένες του Δρομέα ως προς την Οθόνη

<html>

<head>

<script type="text/javascript">

function coordinates(event) {

x=event.screenX

y=event.screenY

alert("X=" + x + " Y=" + y)

}

</script>

</head>

<body onmousedown="coordinates(event)">

<p> Κάντε κλικ μέσα στο έγγραφο. Ένα πλαίσιο μηνύματος (alert box)

θα δείξει τις x και y συντεταγμένες του δρομέα σε σχέση με την

οθόνη. </p>

<p> Χρησιμοποιούμε τις ιδιότητες screenX και screenY του

αντικειμένου event για να βρούμε τις συντεταγμένες του δρομέα

(cursor) του ποντικιού, σε σχέση με την οθόνη, στο σημείο που

έγινε κλικ. </p>

</body>

</html>



69. Οι Συνεταγμένες του Δρομέα (Cursor)

<html>

<head>

<script type="text/javascript">

function coordinates(event) {

x=event.x

y=event.y

alert("X=" + x + " Y=" + y)

}

</script>

</head>

<body onmousedown="coordinates(event)">

<p> Κάντε κλικ μέσα στο έγγραφο. Ένα πλαίσιο μηνύματος (alert box)

θα δείξει τις x και y συντεταγμένες του δρομέα. </p>

<p> Χρησιμοποιούμε τις ιδιότητες x και y του αντικειμένου event για

να βρούμε τις συντεταγμένες του δρομέα (cursor) του ποντικιού

στο σημείο που έγινε κλικ. Είδαμε ότι το ίδιο αποτέλεσμα είχαμε

και με τις ιδιότητες clientX και clientY του αντικειμένου event.

</p>

</body>

</html>



70. Έλεγχος αν Πατήθηκε το Πλήκτρο Shift

<html>

<head>

<script type="text/javascript">

function isKeyPressed(event) {

if (event.shiftKey==1) {

alert("Πατήθηκε το πλήκτρο shift.")

}

else {

alert("Δεν πατήθηκε το πλήκτρο shift.")

}

}

</script>

</head>

<body onmousedown="isKeyPressed(event)">

<p> Κάντε κλικ μέσα στο έγγραφο. Ένα πλαίσιο μηνύματος (alert box)

θα δείξει αν πατήθηκε και το πλήκτρο shift ή όχι. </p>

            <p> Έχουμε ορίσει μέσα στο tag body να γίνεται κλήση της

συνάρτησης isKeyPressed(), με όρισμα το αντικείμενο event, κάθε

φορά που ενεργοποιείται το συμβάν (event) onmousedown. Το

αντικείμενο event έχει την ιδιότητα shiftKey, η οποία παίρνει την

τιμή 1 αν έχει πατηθεί και το πλήκτρο shift, αλλιώς, μια άλλη

τιμή, θα σημαίνει ότι δεν πατήθηκε και το πλήκτρο shift. </p>

</body>

</html>



71. Έλεγχος σε Ποιο Στοιχείο (Element) Έγινε Κλικ

<html>

<head>

<script type="text/javascript">

function whichElement(event) {

var tname

tname=event.srcElement.tagName

alert("Κάνατε κλικ σε στοιχείο με tag name : " + tname)

}

</script>

</head>

<body onmousedown="whichElement(event)">

<p> Κάντε κλικ μέσα στο έγγραφο. Ένα πλαίσιο μηνύματος (alert box)

θα δείξει το όνομα της ετικέτας (tag name) του στοιχείου

(element) στο οποίο κάνατε κλικ. </p>

<h3> Αυτό είναι μια επικεφαλίδα (header) </h3>

<p> Αυτό είναι μια παράγραφος (paragraph) </p>

<img border="0" src="florina01.jpg" width="29" height="28">

            <p> Έχουμε ορίσει μέσα στο tag body να γίνεται κλήση της

συνάρτησης whichElement(), με όρισμα το αντικείμενο event,

κάθε φορά που ενεργοποιείται το συμβάν (event) onmousedown.

Το αντικείμενο event έχει την ιδιότητα tagName, η οποία

περιέχει το όνομα ετικέτας (tag mame) του στοιχείου στο οποίο

έγινε κλικ. </p>

</body>

</html>



72. Έλεγχος για το Ποιο Συμβάν (Event) Έλαβε Χώρα

<html>

<head>

<script type="text/javascript">

function whichType(event) {

alert(event.type)

}

</script>

</head>

<body onmousedown="whichType(event)">

<p> Κάντε κλικ μέσα στο έγγραφο. Ένα πλαίσιο μηνύματος (alert box)

θα δείξει το είδος του συμβάντος (event) που ενεργοποιήθηκε.

</p>

            <p> Έχουμε ορίσει μέσα στο tag body να γίνεται κλήση της

συνάρτησης whichType(), με όρισμα το αντικείμενο event,

κάθε φορά που ενεργοποιείται το συμβάν (event) onmousedown.

Το αντικείμενο event έχει την ιδιότητα type, η οποία

περιέχει το όνομα (είδος) του συμβάντος που έλαβε χώρα. </p>

</body>

</html>



73. Αλλαγή της Ιδιότητας Action μιας Φόρμας

<html>

<head>

<script type="text/javascript">

function getAction() {

var x=document.forms.myForm

alert(x.action)

}

function changeAction() {

var x=document.forms.myForm

x.action="mywebpage02.html"

alert(x.action)

}

</script>

</head>

<body>

<form name="myForm" action="mywebpage01.html">

<input type="button" onclick="getAction()" value="Δείτε την τιμή της ιδιότητας action">

<br /><br />

<input type="button" onclick="changeAction()" value="Αλλάξτε την τιμή της ιδιότητας action">

</form>

            <p> Η ιδιότητα action του αντικειμένου Forms περιέχει το όνομα της

ιστοσελίδας στην οποία θα πάμε όταν κάνουμε υποβολή

(submit) της φόρμας, κάνοντας κλικ στο πλήκτρο εντολής

Submit. Στο παράδειγμα αυτό χρησιμοποιούμε μια φόρμα με

δύο πλήκτρα εντολής, στα οποία αν κάνουμε κλικ καλούνται

αντίστοιχες συναρτήσεις, όπου η μια απλά εμφανίζει την τιμή

της ιδιότητας action της φόρμας myForm, ενώ η άλλη συνάρτηση

αλλάζει την τιμή της ιδιότητας action της φόρμας myForm και

μετά εμφανίζει την καινούργια τιμή. </p>

</body>

</html>



74. Εμφάνιση της Ιδιότητας Method μιας Φόρμας

<html>

<head>

<script type="text/javascript">

function formMethod() {

var x=document.forms.myForm

alert(x.method)

}

</script>

</head>

<body>

<form name="myForm" method="post">

Name : <input type="text" size="20"><br /><br />

<input type="button" onclick="formMethod()" value="Εμφάνιση της μεθόδου (Get ή Post)">

</form>

            <p> Στο παράδειγμα αυτό μπορούμε να δούμε τη μέθοδος αποστολής

δεδομένων που χρησιμοποιεί η φόρμα της ιστοσελίδας, δηλ. την

τιμή της ιδιότητας method της φόρμας, η οποία ιδιότητα μπορεί

να πάρει μια από δύο τιμές, Get ή Post. Προς τον σκοπό αυτό

χρησιμοποιούμε την ιδιότητα method του αντικειμένου Forms.

</p>

</body>

</html>



75. Μηδενισμός (Reset) των Πεδίων μιας Φόρμας

<html>

<head>

<script type="text/javascript">

function formReset() {

var x=document.forms.myForm

x.reset()

}

</script>

</head>

<body>

<form name="myForm">

<p> Γράψτε κάτι στα δύο πεδία κειμένου και μετά κάντε κλικ στο πλήκτρο "Reset" </p>

<input type="text" size="20"><br />

<input type="text" size="20"><br /><br />

<input type="button" onclick="formReset()" value="Reset">

</form>

            <p> Για να μηδενίσουμε (reset) το περιεχόμενο των πεδίων μιας

φόρμας, χρησιμοποιούμε τη μέθοδο reset() του αντικειμένου

Forms. </p>

</body>

</html>



76. Υποβολή (Submit) μιας Φόρμας

<html>

<head>

<script type="text/javascript">

function formSubmit() {

document.forms.myForm.submit()

}

</script>

</head>

<body>

<form name="myForm" action="mywebpage.asp" method="get">

Όνομα : <input type="text" name="firstname" size="20"><br />

Επώνυμο : <input type="text" name="lastname" size="20">

<br /><br />

<input type="button" onclick="formSubmit()" value="Υποβολή της φόρμας">

</form>

            <p> Για να κάνουμε υποβολή (submit) των στοιχείων μιας φόρμας,

συνήθως χρησιμοποιούμε ένα πλήκτρο εντολής του τύπου

Submit, αλλά μπορούμε να χρησιμοποιήσουμε και ένα κανονικό

πλήκτρο εντολής (button) και να καλέσουμε τη μέθοδο submit()

του αντικειμένου Forms. </p>

</body>

</html>



77. Έλεγχος Εγκυρότητας ενός e-mail σε  μια Φόρμα

<html>

<head>

<script type="text/javascript">

function validate() {

x=document.myForm

at=x.email.value.indexOf("@")

if (at == -1) {

            alert("Δεν είναι έγκυρο το e-mail")

            return false

            }

}

</script>

</head>

<body>

<form name="myForm" action="submitpage.html" onsubmit="return validate()">

Δώστε το e-mail σας :

<input type="text" name="email" size="20">

<input type="submit" value="Υποβολή">

</form>

<p> Αυτό το παράδειγμα κάνει έναν έλεγχο για το αν ο χρήστης έχει

καταχωρήσει στο πεδίο κειμένου email μιας φόρμας έναν

χαρακτήρα @ και όχι για το αν όντως υπάρχει το e-mail που

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

φόρμα με κλικ στο πλήκτρο εντολής Submit, οπότε και καλείται

η συνάρτηση validate(), η οποία χρησιμοποιεί τη μέθοδο

indexOf() του αντικειμένου String για να ελέγξει αν ο

χαρακτήρας @ περιέχεται στο πεδίο κειμένου email. </p>

</body>

</html>



78. Έλεγχος ενός Πεδίου Φόρμας για Περιοχή Τιμών

<html>

<head>

<script type="text/javascript">

function validate() {

x=document.myForm

txt=x.myInput.value

if (txt>=1 && txt<=10) {

return true

}

else {

alert("Πρέπει να είναι ανάμεσα στο 1 και το 10.")

return false

}

}

</script>

</head>

<body>

<form name="myForm" action="submitpage.html" onsubmit="return validate()">

Δώστε έναν αριθμό από το 1 έως το 10 :

<input type="text" name="myInput" size="20">

<input type="submit" value="Υποβολή">

</form>

            <p> Στο παράδειγμα αυτό βλέπουμε πώς μπορούμε να κάνουμε

έλεγχο για το αν ένα πλαίσιο κειμένου περιέχει έναν αριθμό σε

μια αποδεκτή περιοχή τιμών. Με την υποβολή των στοιχείων της

φόρμας καλείται η συνάρτηση validate(), η οποία ελέγχει την

τιμή που έχει καταχωρηθεί στο πλαίσιο κειμένου myInput και

προς τον σκοπό αυτό χρησιμοποιεί τον λογικό τελεστή σύζευξης

&&, που είναι το γνωστό And από άλλες γλώσσες

προγραμματισμού. </p>

</body>

</html>



79. Έλεγχος Πεδίου Φόρμας για Πλήθος Χαρακτήρων

<html>

<head>

<script type="text/javascript">

function validate() {

x=document.myForm

input=x.myInput.value

if (input.length>10) {

alert("Όχι περισσότερους από 10 χαρακτήρες.")

return false

}

else {

return true

}

}

</script>

</head>

<body>

<form name="myForm" action="submitpage.html" onsubmit="return validate()">

Καταχωρήστε κάποιο κείμενο μέχρι 10 χαρακτήρες :

<input type="text" name="myInput" size="20">

<input type="submit" value="Υποβολή">

</form>

            <p> Στο παράδειγμα αυτό βλέπουμε πώς μπορούμε να κάνουμε

έλεγχο για το αν ένα πλαίσιο κειμένου περιέχει ένα μέγιστο

πλήθος χαρακτήρων. Με την υποβολή των στοιχείων της φόρμας

καλείται η συνάρτηση validate(), η οποία ελέγχει το κείμενο που

έχει καταχωρηθεί στο πλαίσιο κειμένου myInput και προς τον

σκοπό αυτό χρησιμοποιεί την ιδιότητα length του αντικειμένου

String για να ελέγξει το μήκος (πλήθος) των χαρακτήρων του

πλαισίου κειμένου myInput. </p>

</body>

</html>



80. Επικύρωση των Στοιχείων μιας Φόρμας

<html>

<head>

<script type="text/javascript">

function validate() {

x=document.myForm

at=x.email.value.indexOf("@")

code=x.code.value

firstname=x.fname.value

submitOK="True"

if (at==-1) {

alert("Δεν είναι ένα έγκυρο e-mail.")

submitOK="False"

}

if (code<1 || code>10) {

alert("Ο αριθμός πρέπει να είναι από 1 έως και 10.")

submitOK="False"

}

if (firstname.length>10) {

alert("Το όνομα να έχει λιγότερους από 11 χαρακτήρες.")

submitOK="False"

}

if (submitOK=="False") {

return false

}

}

</script>

</head>

<body>

<form name="myForm" action="submitpage.html" onsubmit="return validate()">

Δώστε ένα e-mail :

<input type="text" name="email" size="20"><br />

Δώστε έναν αριθμό από το 1 έως και το 10 :

<input type="text" name="code" size="20"><br />

Δώστε ένα όνομα μέχρι και 10 χαρακτήρες :

<input type="text" name="fname" size="20"><br />

<input type="submit" value="Submit">

</form>

            <p> Το παράδειγμα αυτό συνοψίζει τα τρία τελευταία παραδείγματα,

δηλ. κάνει έλεγχο για το αν ένα πεδίο κειμένου περιέχει μια

διεύθυνση e-mail, για το αν ένα άλλο πεδίο κειμένου περιέχει μια

αριθμητική τιμή από το 1 έως και το 10 και για το αν ένα τρίτο

πεδίο κειμένου περιέχει ένα όνομα με 10 το πολύ χαρακτήρες.

Αυτή τη φορά για τον έλεγχο της αριθμητικής τιμής

χρησιμοποιούμε τον λογικό τελεστή διάζευξης, δηλ. τον ||, που

είναι το γνωστό Or σ’ άλλες γλώσσες προγραμματισμού. </p>

</body>

</html>



81. Εστίαση σ’ ένα Πεδίο Κειμένου μιας Φόρμας

<html>

<head>

<script type="text/javascript">

function setfocus() {

document.forms[0].field.focus()

}

</script>

</head>

<body>

<form>

<input type="text" name="field" size="30">

<input type="button" value="Εστίαση στο πεδίο κειμένου" onclick="setfocus()">

</form>

            <p> Με τη μέθοδο focus() ενός αντικειμένου πεδίου κειμένου,

μπορούμε να εστιάσουμε (set focus) σ’ ένα πεδίο κειμένου, δηλ.

στην ουσία να τοποθετηθεί μέσα σ’ αυτό ο δείκτης του ποντικιού

ώστε να μπορούμε να γράψουμε κάτι. </p>

</body>

</html>



82. Επιλογή του Περιεχομένου ενός Πεδίου Κειμένου

<html>

<head>

<script type="text/javascript">

function setfocus() {

document.forms[0].txt.select()

document.forms[0].txt.focus()

}

</script>

</head>

<body>

<form>

<input type="text" name="txt" size="30" value="Florina per sempre">

<input type="button" value="Επιλογή του κειμένου" onclick="setfocus()">

</form>

            <p> Με τη μέθοδο select() ενός αντικειμένου πεδίου κειμένου,

μπορούμε να επιλέξουμε (select) όλο το περιεχόμενο ενός πεδίου

κειμένου. </p>

</body>

</html>



83. Πλήκτρα Επιλογής (Radio Buttons) σε μια Φόρμα

<html>

<head>

<script type="text/javascript">

function check(browser) {

document.forms[0].answer.value=browser

}

</script>

</head>

<body>

<form>

Επιλέξτε τον αγαπημένο σας browser : <br /><br />

<input type="radio" name="browser" onclick="check(this.value)" value="Internet Explorer">

Internet Explorer<br />

<input type="radio" name="browser" onclick="check(this.value)" value="Netscape">

Netscape<br />

<input type="radio" name="browser" onclick="check(this.value)" value="Opera">

Opera<br />

<input type="radio" name="browser" onclick="check(this.value)" value="Firefox">

Firefox<br /><br />

<input type="text" name="answer" size="20">

</form>

            <p> Παρατηρούμε ότι κατά τη δημιουργία πλήκτρων επιλογής που

ανήκουν στην ίδια ομάδα μιας φόρμας, είναι δηλαδή αμοιβαία

αποκλειόμενα, ώστε ένα μόνο να είναι επιλεγμένο κάθε φορά,

δίνουμε σ’ όλα το ίδιο όνομα, εδώ το browser, αλλά διαφορετική

τιμή (value) στο καθένα. Με το κλικ που κάνουμε επιλέγοντας

ένα πλήκτρο επιλογής, ενεργοποιείται το συμβάν (event) onclick

και καλείται η συνάρτηση check() στην οποία μεταβιβάζεται η

τιμή του πλήκτρου επιλογής που επιλέχθηκε. Αυτό που κάνει η

συνάρτηση check() είναι ότι απλά καταχωρεί την τιμή του

επιλεγμένου πλήκτρου επιλογής στο πεδίου κειμένου answer.

</p>

</body>

</html>



84. Λίστα Επιλογής (Dropdown List) σε μια Φόρμα

<html>

<head>

<script type="text/javascript">

function put() {

txt=document.forms[0].myList.

options[document.forms[0].myList.selectedIndex].text

document.forms[0].favorite.value=txt

}

</script>

</head>

<body>

<form>

Επιλέξτε τον αγαπημένο σας browser :

<select name="myList" onchange="put()">

<option>Internet Explorer</option>

            <option>Netscape</option>

            <option>Opera</option>

<option>Firefox</option>

</select>

<br /><br />

Ο αγαπημένος σας browser είναι ο :

<input type="text" name="favorite" size="20">

</form>

<p> Με το κλικ που κάνουμε επιλέγοντας ένα όνομα φυλλομετρητή

από την πτυσσόμενη λίστα επιλογής, ενεργοποιείται το συμβάν

(event) onchange και καλείται η συνάρτηση put(), η οποία

καταχωρεί το κείμενο (text) της επιλογής (selectedIndex) στο

πεδίο κειμένου favorite. </p>

</body>

</html>



85. Μια Ακόμα Λίστα Επιλογής (Dropdown List)

<html>

<head>

<script type="text/javascript">

function put() {

option=document.forms[0].dropdown.options[document.forms[0].dropdown.selectedIndex].text

txt=document.forms[0].number.value

txt=txt + option

document.forms[0].number.value=txt

}

</script>

</head>

<body>

<form>

Επιλέξτε έναν αριθμό : <br />

<select name="dropdown">

            <option>0</option>

            <option>1</option>

            <option>2</option>

            <option>3</option>

            <option>4</option>

            <option>5</option>

            <option>6</option>

            <option>7</option>

            <option>8</option>

            <option>9</option>

</select>

<input type="button" onclick="put()" value="-->">

<input type="text" name="number" size="20">

</form>

            <p> Στο παράδειγμα αυτό, κάθε φορά που επιλέγουμε έναν αριθμό,

στην ουσία ένα δεκαδικό ψηφίο, από την πτυσσόμενη λίστα

επιλογής και κάνουμε κλικ στο πλήκτρο επιλογής που περιέχει

τα σύμβολα --> ως ετικέτα, ο αριθμός αυτός προστίθεται δίπλα

στον ήδη επιλεγμένο. Για να γίνει αυτό, καταχωρούμε σε μια

μεταβλητή με όνομα option τον αριθμό που έχει επιλεγεί από την

πτυσσόμενη λίστα και σε μια μεταβλητή με όνομα txt τον αριθμό

που υπάρχει ήδη στο πεδίο κειμένου number. Μετά

προσθέτουμε αυτούς τους δύο αριθμούς αλλά ως strings, δηλ.

στην ουσία τους συνενώνουμε (concatenate), και καταχωρούμε

το αποτέλεσμα στο πεδίο κειμένου number. </p>

</body>

</html>



86. Μενού Επιλογής (Select Menu) σε μια Φόρμα

<html>

<head>

<script type="text/javascript">

function go(form) {

location=form.selectmenu.value

}

</script>

</head>

<body>

<form>

<select name="selectmenu" onchange="go(this.form)">

   <option>--Select page--</option>

   <option value="http://www.grevena.gr">Γρεβενά</option>

   <option value="http://www.kastoria.gr">Καστοριά</option>

   <option value="http://www.kozani.gr">Κοζάνη</option>

  <option value="http://www.florina.gr">Φλώρινα</option>

</select>

</form>

            <p> Στο παράδειγμα αυτό κάθε φορά που επιλέγουμε μια πόλη από

την πτυσσόμενη λίστα ή μενού επιλογής, μεταβαίνουμε στην

αντίστοιχη ιστοσελίδα της πόλης αυτής. Με την επιλογή που

κάνουμε στην πτυσσόμενη λίστα, ενεργοποιείται το συμβάν

(event) onchange και καλείται η συνάρτηση go(), η οποία δέχεται

ως παράμετρο την ίδια τη φόρμα και καταχωρεί την τιμή (value)

που έχει επιλεγεί από την πτυσσόμενη λίστα selectmenu της

φόρμας, δηλ. στην ουσία το URL της κάθε πόλης, στην ιδιότητα

location του αντικειμένου document και έτσι γίνεται η μετάβαση

στην αντίστοιχη ιστοσελίδα. </p>

</body>

</html>



87. Αυτόματη Μετάβαση στο Επόμενο Πεδίο Κειμένου

<html>

<head>

<script type="text/javascript">

function toUnicode(element, content) {

if (content.length==element.maxLength) {

next=element.tabIndex

            if (next<document.forms[0].elements.length) {

                        document.forms[0].elements[next].focus()

                        }

            }

}

</script>

</head>

<body>

<p> Με τη βοήθεια αυτού του script μπορούμε να πάμε αυτόματα στο

επόμενο πεδίο κειμένου όταν έχει συμπληρωθεί το μέγιστο

μήκος χαρακτήρων του τρέχοντος πεδίου κειμένου. </p>

<form>

<input size="3" tabIndex="1" maxLength="3" onkeyup="toUnicode(this, this.value)">

<input size="3" tabIndex="2" maxLength="3" onkeyup="toUnicode(this, this.value)">

<input size="3" tabIndex="3" maxLength="3" onkeyup="toUnicode(this, this.value)">

</form>

            <p> Στο παράδειγμα αυτό χρησιμοποιούμε τις ιδιότητες tabIndex και

maxLength των πεδίων κειμένου και κάθε φορά που πατάμε

κάποιο πλήκτρο στο πληκτρολόγιο, ενεργοποιείται το συμβάν

(event) onkeyup και καλείται η συνάρτηση toUnicode() στην

οποία μεταβιβάζονται δύο ορίσματα, το ίδιο το πεδίο κειμένου

(this) και η τιμή του πεδίου κειμένου (this.value). </p>

<p> Η συνάρτηση ελέγχει αν έχουμε φθάσει στο μέγιστο μήκος

χαρακτήρων που δέχεται το ενεργό πεδίο κειμένου,

συγκρίνοντας τις τιμές this.value.length και this.maxLength, και

αν ναι, τότε χρησιμοποιεί μια μεταβλητή next για να εστιάσουμε

(focus) στο επόμενο πεδίο κειμένου αν βρισκόμαστε στο 1ο ή 2ο

πεδίο κειμένου, τα οποία μέσα στη φόρμα έχουν αρίθμηση 0 και

1, αντίστοιχα. </p>

</body>

</html>



88. Αλλαγή του Ύψους μιας Εικόνας (Image)

<html>

<head>

<script type="text/javascript">

function setHeight() {

var x=document.images

x[0].height="250"

}

</script>

</head>

<body>

<img src="florina1.jpg" width="553" height="346" />

<form>

<input type="button" onclick="setHeight()" value="Αλλαγή του ύψους της εικόνας">

</form>

            <p> Η εικόνα που φαίνεται μέσα στην ιστοσελίδα έχει αρχικό ύψος

346 pixels και αν κάνουμε κλικ στο πλήκτρο εντολής, το ύψος της

θα γίνει 250 pixels, δηλ. η εικόνα θα κοντύνει, χωρίς, όμως, να

επηρεασθεί και το πλάτος της. </p>

            <p> Μόλις κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση setHeight(), η

οποία αλλάζει την ιδιότητα height (ύψος) της μοναδικής εικόνας

που υπάρχει στην ιστοσελίδα, γι’ αυτό και αναφέρεται σ’ αυτήν

ως document.images[0]. </p>

</body>

</html>



89. Αλλαγή της Ίδιας της Εικόνας (Image)

<html>

<head>

<script type="text/javascript">

function setSrc() {

var x=document.images

x[0].src="florina2.jpg"

}

</script>

</head>

<body>

<img src="florina1.jpg" />

<form>

<input type="button" onclick="setSrc()" value="Αλλαγή εικόνας">

</form>

            <p> Η εικόνα που υπάρχει στην ιστοσελίδα θα αντικατασταθεί με μια

άλλη εικόνα μόλις κάνουμε κλικ στο πλήκτρο εντολής. </p>

            <p> Μόλις κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση setSrc(), η

οποία αλλάζει την ιδιότητα src (source, πηγή, προέλευση) της

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

αναφέρεται σ’ αυτήν ως document.images[0]. </p>

</body>

</html>



90. Αλλαγή του Πλάτους μιας Εικόνας (Image)

<html>

<head>

<script type="text/javascript">

function setWidth() {

var x=document.images

x[0].width="300"

}

</script>

</head>

<body>

<img src="florina1.jpg" width="553" height="346" />

<form>

<input type="button" onclick="setWidth()" value="Αλλαγή του πλάτους της εικόνας">

</form>

<p> Η εικόνα που φαίνεται μέσα στην ιστοσελίδα έχει αρχικό πλάτος

553 pixels και αν κάνουμε κλικ στο πλήκτρο εντολής, το πλάτος

της θα γίνει 300 pixels, δηλ. η εικόνα θα μικρύνει, χωρίς, όμως,

να επηρεασθεί και το ύψος της. </p>

            <p> Μόλις κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση setWidth(), η

οποία αλλάζει την ιδιότητα width (πλάτος) της μοναδικής

εικόνας που υπάρχει στην ιστοσελίδα, γι’ αυτό και αναφέρεται

σ’ αυτήν ως document.images[0]. </p>

</body>

</html>



91. Αλλαγή του URL της Τρέχουσας Ιστοσελίδας

<html>

<head>

<script type="text/javascript">

function current_Location() {

alert(location)

}

function change_Location() {

window.location="http://www.florina.gr"

}

</script>

</head>

<body>

<form>

<input type="button" onclick="current_Location()" value="Εμφάνιση του τρέχοντος URL">

<input type="button" onclick="change_Location()" value="Αλλαγή του URL">

</form>

            <p> Το παράδειγμα αυτό χρησιμοποιεί δύο πλήκτρα εντολής, όπου το

ένα εμφανίζει το URL της τρέχουσας ιστοσελίδας και το άλλο

αλλάζει αυτό το URL με μια συγκεκριμένη διεύθυνση μιας άλλης

ιστοσελίδας. Η ιδιότητα που επηρεάζουμε με τα δύο αυτά

πλήκτρα εντολής είναι η location του αντικειμένου Window.

</p>

</body>

</html>





92. Ανανέωση (Refresh) μιας Ιστοσελίδας



<html>

<head>

<script type="text/javascript">

function refresh() {

window.location.reload()

}

</script>

</head>

<body>

<form>

<input type="button" value="Ανανέωση (refresh) της σελίδας" onclick="refresh()">

</form>

            <p> Για να ανανεώσουμε (refresh) την τρέχουσα ιστοσελίδα,

χρησιμοποιούμε τη μέθοδο reload() του αντικειμένου location.

</p>

</body>

</html>



93. Εντοπισμός του Φυλλομετρητή του Χρήστη

<html>

<body>

<script type="text/javascript">

document.write("Ο φυλλομετρητής που χρησιμοποιείτε είναι ο : " +  navigator.appName)

</script>

            <p> Για να εμφανίσουμε την ονομασία του φυλλομετρητή (browser)

που έχει ένας χρήστης, χρησιμοποιούμε την ιδιότητα appName

του αντικειμένου navigator. </p>

</body>

</html>



94. Πληροφορίες για τον Φυλλομετρητή του Χρήστη

<html>

<body>

<script type="text/javascript">

document.write("<p>Φυλλομετρητής (Browser) : ")

document.write(navigator.appName + "</p>")



document.write("<p>Έκδοση του Φυλλομετρητή : ")

document.write(navigator.appVersion + "</p>")



document.write("<p>Κωδικός (Code) : ")

document.write(navigator.appCodeName + "</p>")



document.write("<p>Πλατφόρμα (Platform) : ")

document.write(navigator.platform + "</p>")



document.write("<p>Ενεργά Cookies : ")

document.write(navigator.cookieEnabled + "</p>")



document.write("<p>Επικεφαλίδα (Header) : ")

document.write(navigator.userAgent + "</p>")

</script>

</body>

</html>



95. Όλα τα Στοιχεία για τον Φυλλομετρητή του Χρήστη

<html>

<body>

<script type="text/javascript">

var x = navigator

document.write("CodeName = " + x.appCodeName)

document.write("<br />")

document.write("MinorVersion = " + x.appMinorVersion)

document.write("<br />")

document.write("Name = " + x.appName)

document.write("<br />")

document.write("Version = " + x.appVersion)

document.write("<br />")

document.write("CookieEnabled = " + x.cookieEnabled)

document.write("<br />")

document.write("CPUClass = " + x.cpuClass)

document.write("<br />")

document.write("OnLine = " + x.onLine)

document.write("<br />")

document.write("Platform = " + x.platform)

document.write("<br />")

document.write("UA = " + x.userAgent)

document.write("<br />")

document.write("BrowserLanguage = " + x.browserLanguage)

document.write("<br />")

document.write("SystemLanguage = " + x.systemLanguage)

document.write("<br />")

document.write("UserLanguage = " + x.userLanguage)

</script>

</body>

</html>



96. Ανακατεύθυνση Χρήστη Ανάλογα με τον Browser

<html>

<head>

<script type="text/javascript">

function redirectme() {

bname=navigator.appName

if (bname.indexOf("Netscape")!=-1) {

            window.location="netscape_page.html"

            return

}

if (bname.indexOf("Microsoft")!=-1) {

            window.location="microsoft_page.html"

            return

            }

window.location="other_page.html"

}

</script>

</head>

<body onload="redirectme()">

            <p> Με το που φορτώνεται αυτή η ιστοσελίδα, ενεργοποιείται το

συμβάν (event) onload και καλείται η συνάρτηση redirectme(), η

οποία ελέγχει αν υπάρχει ένα από τα strings Netscape ή Microsoft

στην ιδιότητα appName του αντικειμένου navigator για να

φορτώσει έτσι την αντίστοιχη ιστοσελίδα. Μπορούμε να

προβλέψουμε και την ύπαρξη μιας τρίτης ιστοσελίδας, στην

περίπτωση που ο χρήστης χρησιμοποιεί κάποιον άλλον

φυλλομετρητή. </p>

</body>

</html>



97. Έλεγχος της Έκδοσης του Browser

<html>

<head>

<script type="text/javascript">

function browserversion() {

txt="Ο browser σας είναι άγνωστος"

browser=navigator.appVersion

if (browser.indexOf("2.")>-1) {

txt="Ο browser σας είναι πολύ παλιός."

}

if (browser.indexOf("3.")>-1) {

txt="Ο browser σας χρειάζεται ενημέρωση."

}

if (browser.indexOf("4.")>-1) {

txt="Ο browser σας είναι πολύ καλός."

}

document.getElementById("message").innerHTML=txt

}

</script>

</head>

<body onload="browserversion()">

<span id="message"></span>

            <p> Με το που φορτώνεται αυτή η ιστοσελίδα, ενεργοποιείται το

συμβάν (event) onload και καλείται η συνάρτηση

browserversion(), η οποία ελέγχει την έκδοση (version) του

φυλλομετρητή του χρήστη μέσω της ιδιότητας appVersion του

αντικειμένου navigator. Ανάλογα με την έκδοση του

φυλλομετρητή που εντοπίζεται, δημιουργείται μια μεταβλητή

string με όνομα txt, η οποία καταχωρείται στην ιδιότητα

innerHTML ενός αντικειμένου, για να εμφανισθεί έτσι μέσα στην

ιστοσελίδα, αντί να χρησιμοποιηθεί η γνωστή μέθοδος

document.write(). </p>

</body>

</html>



98. Ενεργοποίηση & Απενεργοποίηση Λίστας Επιλογής

<html>

<head>

<script type="text/javascript">

function makeDisable() {

var x=document.getElementById("mySelect")

x.disabled=true

}

function makeEnable() {

var x=document.getElementById("mySelect")

x.disabled=false

}

</script>

</head>

<body>

<form>

<select id="mySelect">

<option>Γρεβενά</option>

            <option>Καστοριά</option>

            <option>Κοζάνη</option>

            <option>Φλώρινα</option>

</select>

<input type="button" onclick="makeDisable()" value="Απενεργοποίηση της Λίστας Επιλογής">

<input type="button" onclick="makeEnable()" value="Ενεργοποίηση της Λίστας Επιλογής">

</form>

            <p> Για να ενεργοποιήσουμε ή απενεργοποιήσουμε μια λίστα

επιλογής, χρησιμοποιούμε την ιδιότητά της disabled, στην οποία

δίνουμε την τιμή false ή true, αντίστοιχα. Μια απενεργοποιημενη

λίστα επιλογής εμφανίζεται με γκρίζο χρώμα και δεν μπορούμε

να επιλέξουμε κανένα στοιχείο της. </p>

</body>

</html>



99. Όνομα Φόρμας που Περιέχει μια Λίστα Επιλογής

<html>

<head>

<script type="text/javascript">

function formAction() {

var x=document.getElementById("mySelect")

alert(x.form.name)

}

</script>

</head>

<body>

<form name="WestMacedonia">

<select id="mySelect">

<option>Γρεβενά</option>

            <option>Καστοριά</option>

            <option>Κοζάνη</option>

            <option>Φλώρινα</option>

</select>

<input type="button" onclick="formAction()" value="Εμφάνιση του ονόματος της φόρμας">

</form>

            <p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση formAction(), η

οποία εμφανίζει σ’ ένα πλαίσιο μηνύματος (alert box) το όνομα

της φόρμας που περιέχει τη λίστα επιλογής. </p>

</body>

</html>



100. Αριθμός των Επιλογών (Options) Λίστας Επιλογής

<html>

<head>

<script type="text/javascript">

function formAction() {

var x=document.getElementById("mySelect")

alert(x.length)

}

</script>

</head>

<body>

<form>

<select id="mySelect">

<option>Γρεβενά</option>

            <option>Καστοριά</option>

            <option>Κοζάνη</option>

            <option>Φλώρινα</option>

</select>

<input type="button" onclick="formAction()" value="Πόσες επιλογές (options) υπάρχουν στη λίστα;">

</form>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση formAction(), η

οποία εμφανίζει σ’ ένα πλαίσιο μηνύματος (alert box) το πλήθος

των επιλογών (options) που περιέχει η λίστα επιλογής,

χρησιμοποιώντας προς τον σκοπό αυτό την ιδιότητα length του

αντικειμένου Select. </p>

</body>

</html>



101. Αλλαγή του Μεγέθους μιας Λίστας Επιλογής

<html>

<head>

<script type="text/javascript">

function formAction() {

var x=document.getElementById("mySelect")

x.size="4"

}

</script>

</head>

<body>

<form>

<select id="mySelect">

<option>Γρεβενά</option>

            <option>Καστοριά</option>

            <option>Κοζάνη</option>

            <option>Φλώρινα</option>

</select>

<input type="button" onclick="formAction()" value="Αλλαγή του μεγέθους της λίστας">

</form>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση formAction(), η

οποία αυξάνει το μέγεθος της λίστας σε 4, ώστε να μπορούμε να

βλέπουμε όλα τα στοιχεία της λίστας, χρησιμοποιώντας προς τον

σκοπό αυτό την ιδιότητα size του αντικειμένου Select. Στην ουσία

μετατρέπει τη λίστα από πτυσσόμενη σε πλαίσιο λίστας. </p>

</body>

</html>



102. Πολλαπλή Επιλογή σε Πλαίσιο Λίστας

<html>

<head>

<script type="text/javascript">

function formAction() {

var x=document.getElementById("mySelect")

x.multiple=true

}

</script>

</head>

<body>

<p> Πριν κάνετε κλικ στο πλήκτρο εντολής, προσπαθήστε να

επιλέξετε περισσότερες από μία επιλογές με τα πλήκτρα Shift ή

Control. Μετά, κάντε κλικ στο πλήκτρο επιλογής και

προσπαθήστε ξανά. </p>

<form>

<select id="mySelect" size="4">

<option>Γρεβενά</option>

            <option>Καστοριά</option>

            <option>Κοζάνη</option>

            <option>Φλώρινα</option>

</select>

<input type="button" onclick="formAction()" value="Πολλαπλή επιλογή">

</form>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση formAction(), η

οποία δίνει την τιμή true στην ιδιότητα multiple του πλαισίου

λίστας, ώστε να μπορούμε να επιλέξουμε περισσότερες από μία

επιλογές. Με πατημένο το πλήκτρο Shift μπορούμε να κάνουμε

συνεχόμενες επιλογές, ενώ με πατημένο το πλήκτρο Control

μπορούμε να κάνουμε μεμονωμένες επιλογές. </p>

</body>

</html>



103. Εμφάνιση του Κειμένου της Επιλογής

<html>

<head>

<script type="text/javascript">

function getText() {

var x=document.getElementById("mySelect")

alert(x.options[x.selectedIndex].text)

}

</script>

</head>

<body>

<form>

Επιλέξτε μια πόλη :

<select id="mySelect">

<option>Γρεβενά</option>

            <option>Καστοριά</option>

            <option>Κοζάνη</option>

            <option>Φλώρινα</option>

</select>

<br /><br />

<input type="button" onclick="getText()" value="Εμφάνιση της επιλεγμένης πόλης">

</form>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση getText(), η

οποία εμφανίζει σ’ ένα πλαίσιο μηνύματος (alert box) το κείμενο

της επιλογής που έχουμε κάνει, δηλ. την πόλη που έχουμε

επιλέξει. </p>

</body>

</html>



104. Εμφάνιση της Αρίθμησης της Επιλογής

<html>

<head>

<script type="text/javascript">

function getIndex() {

var x=document.getElementById("mySelect")

alert(x.selectedIndex)

}

</script>

</head>

<body>

<form>

Επιλέξτε μια πόλη :

<select id="mySelect">

<option>Γρεβενά</option>

            <option>Καστοριά</option>

            <option>Κοζάνη</option>

            <option>Φλώρινα</option>

</select>

<br /><br />

<input type="button" onclick="getIndex()" value="Εμφάνιση αρίθμησης της επιλεγμένης πόλης">

</form>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση getIndex(), η

οποία εμφανίζει σ’ ένα πλαίσιο μηνύματος (alert box) την

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

αριθμό της πόλης που έχουμε επιλέξει, όπου η αρίθμηση

ξεκινάει από το 0. </p>

</body>

</html>



105. Αλλαγή μιας Επιλογής σε μια Λίστα Επιλογής

<html>

<head>

<script type="text/javascript">

function changeText() {

var x=document.getElementById("mySelect")

x.options[x.selectedIndex].text="Βέροια"

}

</script>

</head>

<body>

<form>

Επιλέξτε μια πόλη :

<select id="mySelect">

<option>Γρεβενά</option>

            <option>Καστοριά</option>

            <option>Κοζάνη</option>

            <option>Φλώρινα</option>

</select>

<br /><br />

<input type="button" onclick="changeText()" value="Αλλαγή της επιλεγμένης πόλης">

</form>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση changeText(), η

οποία αντικαθιστά το κείμενο της επιλεγμένης πόλης με μια

συγκεκριμένη άλλη πόλη. </p>

</body>

</html>



106. Διαγραφή μιας Επιλογής από μια Λίστα Επιλογής

<html>

<head>

<script type="text/javascript">

function formAction() {

var x=document.getElementById("mySelect")

x.remove(x.selectedIndex)

}

</script>

</head>

<body>

<form>

<select id="mySelect">

<option>Γρεβενά</option>

            <option>Καστοριά</option>

            <option>Κοζάνη</option>

            <option>Φλώρινα</option>

</select>

<input type="button" onclick="formAction()" value="Διαγραφή της επιλεγμένης πόλης">

</form>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση formAction(), η

οποία διαγράφει την επιλεγμένη πόλη από τη λίστα κάνοντας

χρήση της ιδιότητας remove. </p>

</body>

</html>



107. Λεπτομέρειες για την Οθόνη του Χρήστη

<html>

<body>

<script type="text/javascript">

document.write("Ανάλυση της οθόνης : ")

document.write(screen.width + "*" + screen.height)

document.write("<br />")

document.write("Διαθέσιμη περιοχή θέασης : ")

document.write(screen.availWidth + "*" + screen.availHeight)

document.write("<br />")

document.write("Βάθος χρώματος (color depth) : ")

document.write(screen.colorDepth)

document.write("<br />")

</script>

            <p> Το αντικείμενο screen διαθέτει τις ιδιότητες width, height,

availWidth, availHeight και colorDepth. </p>

</body>

</html>



108. Αλλαγή του Πλάτους του Περιθωρίου ενός Πίνακα

<html>

<head>

<script type="text/javascript">

function changeBorder() {

document.getElementById('myTable').border="10"

}

</script>

</head>

<body>

<table border="1" id="myTable">

<tr>

<td>Γρεβενά</td>

<td>Καστοριά</td>

</tr>

<tr>

<td>Κοζάνη</td>

<td>Φλώρινα</td>

</tr>

</table>

<form>

<input type="button" onclick="changeBorder()" value="Αλλαγή πλάτους του περιθωρίου του πίνακα">

</form>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση

changeBorder(), η οποία ορίζει την ιδιότητα border του

αντικειμένου Table να είναι ίση με 10, κάτι που δίνει μια

τρισδιάστατη εμφάνιση στον πίνακα. </p>

</body>

</html>



109. Αλλαγή των Ιδοτήτων cellPadding και cellSpacing Πίνακα

<html>

<head>

<script type="text/javascript">

function padding() {

document.getElementById('myTable').cellPadding="15"

}

function spacing() {

document.getElementById('myTable').cellSpacing="15"

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>Γρεβενά</td>

<td>Καστοριά</td>

</tr>

<tr>

<td>Κοζάνη</td>

<td>Φλώρινα</td>

</tr>

</table>

<form>

<input type="button" onclick="padding()" value="Αλλαγή του Cellpadding">

<input type="button" onclick="spacing()" value="Αλλαγή του Cellspacing">

</form>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής για την αλλαγή του

Cellpadding, ενεργοποιείται το συμβάν (event) onclick και

καλείται η συνάρτηση padding(), η οποία ορίζει την ιδιότητα

Cellpadding του αντικειμένου Table να είναι ίση με 15. Η

ιδιότητα Cellpadding του tag <table> καθορίζει το ποσό του

κενού χώρου σε pixels μεταξύ των άκρων των κελιών και των

περιεχομένων τους, με εξ ορισμού τιμή το 1. </p>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής για την αλλαγή του

Cellspacing, ενεργοποιείται το συμβάν (event) onclick και

καλείται η συνάρτηση spacing(), η οποία ορίζει την ιδιότητα

Cellspacing του αντικειμένου Table να είναι ίση με 15. Η ιδιότητα

Cellspacing του tag <table> καθορίζει το διάστημα μεταξύ των

κελιών ενός πίνακα, δηλ. το πάχος των σκιασμένων γραμμών

που διαχωρίζουν τα κελιά, με εξ ορισμού τιμή το 2. Η ρύθμιση

για το διάστημα μεταξύ των κελιών περιλαμβάνει επίσης τον

χώρο στην περίμετρο του πίνακα, δηλ. «αυξάνει» την περίμετρο

του πίνακα. </p>

</body>

</html>



110. Εμφάνιση Πλαισίων (Frames) σ’ έναν Πίνακα

<html>

<head>

<script type="text/javascript">

function aboveFrames() {

document.getElementById('myTable').frame="above"

}

function belowFrames() {

document.getElementById('myTable').frame="below"

}

</script>

</head>

<body>

<table id="myTable">

<tr>

<td>Γρεβενά</td>

<td>Καστοριά</td>

</tr>

<tr>

<td>Κοζάνη</td>

<td>Φλώρινα</td>

</tr>

</table>

<form>

<input type="button" onclick="aboveFrames()" value="Εμφάνιση των πάνω πλαισίων (frames)">

<input type="button" onclick="belowFrames()" value="Εμφάνιση των κάτω πλαισίων (frames)">

</form>

<p> Με το που κάνουμε κλικ σ’ ένα πλήκτρο εντολής, ενεργοποιείται

το συμβάν (event) onclick και καλείται η συνάρτηση

aboveFrames() ή belowFrames(), ανάλογα, η οποία ορίζει την

ιδιότητα frame του αντικειμένου Table να πάρει την τιμή above ή

below και να εμφανισθούν έτσι τα αντίστοιχα πλαίσια (frames)

στον πίνακα. </p>

</body>

</html>



111. Αλλαγή του Ύψους μιας Γραμμής Πίνακα

<html>

<head>

<script type="text/javascript">

function specifyRow() {

var x=document.getElementById('myTable').rows

x[1].height="100"

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>Γρεβενά</td>

<td>Καστοριά</td>

</tr>

<tr>

<td>Κοζάνη</td>

<td>Φλώρινα</td>

</tr>

</table>

<form>

<input type="button" onclick="specifyRow()" value="Αλλαγή του ύψους της δεύτερης γραμμής">

</form>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται

το συμβάν (event) onclick και καλείται η συνάρτηση

specifyRow(), η οποία ορίζει την ιδιότητα height της δεύτερης

γραμμής του αντικειμένου Table, δηλ. της row[1], να πάρει την

τιμή 100 και να ξεχωρίσει έτσι από την πρώτη γραμμή του

πίνακα. </p>

</body>

</html>



112. Εμφάνιση Περιγραμμάτων Γραμμών ή Στηλών Πίνακα

<html>

<head>

<script type="text/javascript">

function rowRules() {

document.getElementById('myTable').rules="rows"

}

function colRules() {

document.getElementById('myTable').rules="cols"

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>Γρεβενά</td>

<td>Καστοριά</td>

</tr>

<tr>

<td>Κοζάνη</td>

<td>Φλώρινα</td>

</tr>

</table>

<form>

<input type="button" onclick="rowRules()" value="Εμφάνιση των περιγραμμάτων των γραμμών">

<input type="button" onclick="colRules()" value="Εμφάνιση των περιγραμμάτων των στηλών">

</form>

<p> Με το που κάνουμε κλικ σ’ ένα πλήκτρο εντολής, ενεργοποιείται

το συμβάν (event) onclick και καλείται η συνάρτηση

rowRules() ή colRules(), ανάλογα, η οποία ορίζει την ιδιότητα

rules του αντικειμένου Table να πάρει την τιμή rows ή cols και να

εμφανισθούν μόνο τα αντίστοιχα περιγράμματα (borders) στον

πίνακα. </p>

</body>

</html>



113. Δημιουργία Λεζάντας (Caption) σ’ έναν Πίνακα

<html>

<head>

<script type="text/javascript">

function caption() {

var x=document.getElementById('myTable').createCaption()

x.innerHTML="<b>Οι Πόλεις της Δυτικής Μακεδονίας</b>"

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>Γρεβενά</td>

<td>Καστοριά</td>

</tr>

<tr>

<td>Κοζάνη</td>

<td>Φλώρινα</td>

</tr>

</table>

<form>

<input type="button" onclick="caption()" value="Δημιουργία λεζάντας (caption)">

</form>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται

το συμβάν (event) onclick και καλείται η συνάρτηση caption(), η

οποία ορίζει την ιδιότητα innerHTML της μεθόδου

createCaption() του αντικειμένου Table, δηλ. της λεζάντας

(caption) του πίνακα, να πάρει μια συγκεκριμένη τιμή (κείμενο),

η οποία θα εμφανισθεί πάνω ακριβώς από τα κελιά του πίνακα.

</p>

</body>

</html>



114. Διαγραφή Γραμμών από έναν Πίνακα

<html>

<head>

<script type="text/javascript">

function deleteRow(i) {

document.getElementById('myTable').deleteRow(i)

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>Δυτική Μακεδονία</td>

<td><input type="button" value="Διαγραφή της γραμμής" onclick="deleteRow(this.parentNode.parentNode.rowIndex)">

</td>

</tr>

<tr>

<td>Κεντρική Μακεδονία</td>

<td><input type="button" value="Διαγραφή της γραμμής" onclick="deleteRow(this.parentNode.parentNode.rowIndex)">

</td>

</tr>

</table>

<p> Με το που κάνουμε κλικ σ’ ένα πλήκτρο εντολής, ενεργοποιείται

το συμβάν (event) onclick και καλείται η συνάρτηση deleteRow(),

η οποία διαγράφει την αντίστοιχη γραμμή του πίνακα,

χρησιμοποιώντας τη μέθοδο deleteRow() του αντικειμένου

Table. </p>

</body>

</html>



115. Εισαγωγή Γραμμής και Κελιών σ’ έναν Πίνακα

<html>

<head>

<script type="text/javascript">

function insRow() {

var x=document.getElementById('myTable').insertRow(1)

var y=x.insertCell(0)

var z=x.insertCell(1)

y.innerHTML="Βέροια"

z.innerHTML="Έδεσσα"

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>Γρεβενά</td>

<td>Καστοριά</td>

</tr>

<tr>

<td>Κοζάνη</td>

<td>Φλώρινα</td>

</tr>

</table>

<form>

<input type="button" onclick="insRow()" value="Εισαγωγή γραμμής στον πίνακα">

</form>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση insRow(), η

οποία εισάγει μια γραμμή στον πίνακα, χρησιμοποιώντας τις

μεθόδους insertRow() και insertCell() του αντικειμένου Table, για

την εισαγωγή γραμμής (row) και κελιών (cell), αντίστοιχα. Με

την ιδιότητα innerHTML δίνουμε τιμές (περιεχόμενο) στα κελιά

που δημιουργήθηκαν. </p>

</body>

</html>



116. Ευθυγράμμιση του Περιεχομένου των Κελιών Πίνακα

<html>

<head>

<script type="text/javascript">

function alignRow() {

var x=document.getElementById('myTable').rows

x[0].align="right"

}

</script>

</head>

<body>

<table width="60%" id="myTable" border="1">

<tr>

<td>Γρεβενά</td>

<td>Καστοριά</td>

</tr>

<tr>

<td>Κοζάνη</td>

<td>Φλώρινα</td>

</tr>

</table>

<form>

<input type="button" onclick="alignRow()" value="Δεξιά στοίχιση της πρώτης γραμμής">

</form>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση alignRow(), η

οποία στοιχίζει δεξιά το περιεχόμενο των κελιών της πρώτης

γραμμής του πίνακα (rows[0]), δίνοντας την τιμή right στην

ιδιότητα align. </p>

</body>

</html>



117. Αλλαγή του Περιεχομένου ενός Κελιού Πίνακα

<html>

<head>

<script type="text/javascript">

function changeContent() {

var x=document.getElementById('myTable').rows

var y=x[0].cells

y[0].innerHTML="Βέροια"

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>Γρεβενά</td>

<td>Καστοριά</td>

</tr>

<tr>

<td>Κοζάνη</td>

<td>Φλώρινα</td>

</tr>

</table>

<form>

<input type="button" onclick="changeContent()" value="Αλλαγή περιεχομένου στο πρώτο κελί">

</form>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση

changeContent(), η οποία καταχωρεί στο αριστερό κελί

(cells[0]) της πρώτης γραμμής του πίνακα (rows[0]), κάποιο

άλλο περιεχόμενο, αλλάζοντας την ιδιότητα innerHTML. </p>

</body>

</html>



118. Κατακόρυφη Ευθυγράμμιση Περιεχομένου Κελιών Πίνακα

<html>

<head>

<script type="text/javascript">

function valignRow() {

var x=document.getElementById('myTable').rows

x[0].vAlign="top"

}

</script>

</head>

<body>

<table width="50%" id="myTable" border="1">

<tr>

<td height="50">Γρεβενά</td>

<td height="50">Καστοριά</td>

</tr>

<tr>

<td height="50">Κοζάνη</td>

<td height="50">Φλώρινα</td>

</tr>

</table>

<form>

<input type="button" onclick="valignRow()" value="Κατακόρυφη Ευθυγράμμιση της 1ης Γραμμής">

</form>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση valignRow(), η

οποία καταχωρεί στην ιδιότητα vAlign την τιμή top, ώστε να

ευθυγραμμισθεί κατακόρυφα προς τα πάνω η πρώτη γραμμή

του πίνακα (rows[0]). </p>

</body>

</html>



119. Ευθυγράμμιση Περιεχομένου σ’ ένα Μόνο Κελί Πίνακα

<html>

<head>

<script type="text/javascript">

function alignCell() {

var x=document.getElementById('myTable').rows[0].cells

x[0].align="center"

}

</script>

</head>

<body>

<table id="myTable" border="1" width="100%">

<tr>

<td>Γρεβενά</td>

<td>Καστοριά</td>

</tr>

<tr>

<td>Κοζάνη</td>

<td>Φλώρινα</td>

</tr>

</table>

<form>

<input type="button" onclick="alignCell()" value="Ευθυγράμμιση ενός μόνο κελιού">

</form>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση alignCell(), η

οποία καταχωρεί στην ιδιότητα align την τιμή center, ώστε να

κεντραρισθεί μόνο το αριστερό κελί (cells[0]) της πρώτης

γραμμής του πίνακα (rows[0]) και όχι ολόκληρη η γραμμή.

</p>

</body>

</html>



120. Κατακόρυφη Ευθυγράμμιση σ’ ένα Μόνο Κελί Πίνακα

<html>

<head>

<script type="text/javascript">

function valignCell() {

var x=document.getElementById('myTable').rows[0].cells

x[0].vAlign="bottom"

}

</script>

</head>

<body>

<table id="myTable" border="1" height="70%">

<tr>

<td>Γρεβενά</td>

<td>Καστοριά</td>

</tr>

<tr>

<td>Κοζάνη</td>

<td>Φλώρινα</td>

</tr>

</table>

<form>

<input type="button" onclick="valignCell()" value="Κατακόρυφη ευθυγράμμιση ενός μόνο κελιού">

</form>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση valignCell(), η

οποία καταχωρεί στην ιδιότητα vAlign την τιμή bottom, ώστε να

ευθυγραμμισθεί κατακόρυφα προς τα κάτω μόνο το αριστερό

κελί (cells[0]) της πρώτης γραμμής του πίνακα (rows[0]) και όχι

ολόκληρη η γραμμή. </p>

</body>

</html>



121. Προσθήκη Κελιού σε μια Γραμμή Πίνακα

<html>

<head>

<script type="text/javascript">

function addCell() {

var x=document.getElementById('myTable').rows[0]

var y=x.insertCell(2)

y.innerHTML="Βέροια"

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>Γρεβενά</td>

<td>Καστοριά</td>

</tr>

<tr>

<td>Κοζάνη</td>

<td>Φλώρινα</td>

</tr>

</table>

<form>

<input type="button" onclick="addCell()" value="Προσθήκη κελιού">

</form>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση addCell(), η

οποία χρησιμοποιεί τη μέθοδο insertCell() για να δημιουργήσει

(προσθέσει) ένα τρίτο κελί μόνο στην πρώτη γραμμή του πίνακα

(rows[0]) και μετά καταχωρεί στην ιδιότητα innerHTML το

περιεχόμενο του καινούργιου κελιού. </p>

</body>

</html>



122. Αλλαγή του Colspan μιας Γραμμής Πίνακα

<html>

<head>

<script type="text/javascript">

function setColSpan() {

var x=document.getElementById('myTable').rows[0].cells

x[0].colSpan="2"

x[1].colSpan="6"

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td colspan="4" align=center><b>Ποδόσφαιρο</b></td>

<td colspan="4" align=center><b>Μπάσκετ</b></td>

</tr>

<tr>

<td>Παναθηναϊκός</td>

<td>Ολυμπιακός</td>

<td>Πανιώνιος</td>

<td>Άρης</td>

<td>ΑΕΚ</td>

<td>ΠΑΟΚ</td>

<td>Ηρακλής</td>

<td>Λάρισα</td>

</tr>

</table>

<form>

<input type="button" onclick="setColSpan()" value="Αλλαγή του colspan">

</form>

            <p> Χρησιμοποιούμε την ιδιότητα colspan για μια γραμμή ενός

πίνακα, όταν ένα κελί αυτής της γραμμής εκτείνεται (καλύπτει)

σε περισσότερες από μία στήλες μιας άλλης γραμμής. Ο αριθμός

που δίνεται στην ιδιότητα colspan προσδιορίζει και το πλήθος

των κελιών που καλύπτει το υπόψη κελί. </p>

<p> Με το που κάνουμε κλικ στο πλήκτρο εντολής, ενεργοποιείται το

συμβάν (event) onclick και καλείται η συνάρτηση setColSpan(), η

οποία αλλάζει την τιμή της ιδιότητας colSpan για το πρώτο και

το δεύτερο κελί της πρώτης γραμμής του πίνακα (rows[0]), δηλ.

για τα κελιά cells[0] και cells[1], στα οποία δίνει τις τιμές 2 και

6 αντίστοιχα, ώστε το άθροισμά τους να είναι ίσο με 8, καθώς

καλύπτουν και τα δύο μαζί 8 κελιά από τη δεύτερη γραμμή του

πίνακα. </p>

</body>

</html>



123. Εμφάνιση Πλαισίου Μηνύματος (Alert Box)

<html>

<head>

<script type="text/javascript">

function display_alert() {

alert("Αυτό το μήνυμα εμφανίσθηκε από ένα alert box.")

}

</script>

</head>

<body>

<form>

<input type="button" onclick="display_alert()" value="Εμφάνιση ενός alert box">

</form>

<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο alert() του

αντικειμένου Window για να εμφανισθεί ένα alert box, δηλ. ένα

πλαίσιο ή παράθυρο μηνύματος, στο οποίο μπορούμε απλά να

εμφανίσουμε ένα ενημερωτικό μήνυμα για τον χρήστη, ο οποίος

θα πρέπει να κάνει κλικ στο πλήκτρο ΟΚ για να το κλείσει.

</p>

</body>

</html>



124. Εμφάνιση Alert Box με Αλλαγή Γραμμής

<html>

<head>

<script type="text/javascript">

function display_alert() {

alert("Μπορούμε να κάνουμε και" + '\n' + "αλλαγή γραμμής σ’ ένα alert box.")

}

</script>

</head>

<body>

<form>

<input type="button" onclick="display_alert()" value=" Εμφάνιση ενός alert box με αλλαγή γραμμής">

</form>

<p> Για να κάνουμε αλλαγή γραμμής στο κείμενο ενός alert box,

μπορούμε να χρησιμοποιήσουμε τον γνωστό χαρακτήρα \n και

τα σύμβολα + για να ενώσουμε τα μηνύματα που θα

εμφανισθούν σε κάθε γραμμή. </p>

</body>

</html>



125. Εμφάνιση Πλαισίου Επιβεβαίωσης (Confirm Box)

<html>

<head>

<script type="text/javascript">

function display_confirm() {

var name=confirm("Κάντε κλικ σ’ ένα πλήκτρο")

if (name==true) {

document.write("Κάνατε κλικ στο πλήκτρο OK")

}

else {

document.write("Κάνατε κλικ στο πλήκτρο Cancel")

}

}

</script>

</head>

<body>

<form>

<input type="button" onclick="display_confirm()" value="Εμφάνιση ενός confirm box">

</form>

<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο confirm() του

αντικειμένου Window για να εμφανισθεί ένα πλαίσιο ή

παράθυρο μηνύματος, στο οποίο θα μπορούμε να επιλέξουμε να

κάνουμε κλικ είτε στο πλήκτρο ΟΚ είτε στο πλήκτρο Cancel

(Άκυρο), οπότε η μέθοδος confirm() επιστρέφει την τιμή true ή

false, αντίστοιχα. Μπορούμε να χρησιμοποιήσουμε την τιμή

επιστροφής της μεθόδου αυτής για να πάρουμε απάντηση από

τον χρήστη σε μια ερώτησή μας σε στυλ Ναι/Όχι και αποτελεί

το απλούστερο είδος αλληλεπίδρασης (interaction). </p>

</body>

</html>



126. Εμφάνιση Πλαισίου Προτροπής (Prompt Box)

<html>

<head>

<script type="text/javascript">

function display_prompt() {

var name=prompt("Δώσε το όνομά σου : ", "")

if (name!=null && name!="") {

document.write("Γεια σου " + name + "! Πώς είσαι;")

}

}

</script>

</head>

<body>

<form>

<input type="button" onclick="display_prompt()" value="Εμφάνιση ενός prompt box">

</form>

<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο prompt() του

αντικειμένου Window για να εμφανισθεί ένα πλαίσιο ή

παράθυρο μηνύματος, στο οποίο θα μπορούμε να γράψουμε

κάτι και να κάνουμε κλικ στο πλήκτρο ΟΚ, οπότε η μέθοδος

prompt() επιστρέφει το κείμενο που καταχωρήσαμε. Μπορούμε

να χρησιμοποιήσουμε την τιμή επιστροφής της μεθόδου αυτής

για να πάρουμε απάντηση από τον χρήστη σε μια ερώτησή μας

σχετικά μ’ ένα όνομα ή με μια τιμή και αποτελεί ένα πιο

προηγμένο είδος αλληλεπίδρασης (interaction) σε σχέση με τη

μέθοδο confirm(). </p>

</body>

</html>



127. Άνοιγμα Νέου Παραθύρου

<html>

<head>

<script type="text/javascript">

function open_window() {

window.open("http://www.florina.gr")

}

</script>

</head>

<body>

<form>

<input type=button value="Άνοιγμα νέου παραθύρου" onclick="open_window()">

</form>

<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο open() του

αντικειμένου Window για να ανοίξουμε ένα νέο παράθυρο

φυλλομετρητή και να προσδιορίσουμε και το URL της

ιστοσελίδας που θέλουμε να εμφανισθεί μέσα στο παράθυρο.

</p>

</body>

</html>



128. Άνοιγμα Νέου Παραθύρου με Πολλές Παραμέτρους

<html>

<head>

<script type="text/javascript">

function open_window() {

window.open("http://www.florina.gr", "_blank", "toolbar=yes, location=yes, directories=no, status=no,\

menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=500, height=500")

}

</script>

</head>

<body>

<form>

<input type="button" value="Άνοιγμα νέου παραθύρου" onclick="open_window()">

</form>

<p> Στη μέθοδο open() του αντικειμένου Window μπορούμε να

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

παράθυρο φυλλομετρητή που θέλουμε να εμφανισθεί. </p>

</body>

</html>



129. Άνοιγμα Πολλών Παραθύρων Μαζί

<html>

<head>

<script type="text/javascript">

function open_window() {

window.open("http://www.florina.gr/")

window.open("http://www.kozani.gr/")

}

</script>

</head>

<body>

<form>

<input type=button value="Άνοιγμα Παραθύρων" onclick="open_window()">

</form>

<p> Μπορούμε να καλέσουμε τη μέθοδο open() του αντικειμένου

Window δύο φορές για να εμφανίσουμε δύο διαφορετικές

ιστοσελίδες σε δύο διαφορετικά παράθυρα φυλλομετρητή. </p>

</body>

</html>



130. Εμφάνιση Κειμένου στη Γραμμή Κατάστασης

<html>

<head>

<script type="text/javascript">

function load() {

window.status="Florina per sempre"

}

</script>

</head>

<body onload="load()">

<p> Κοιτάξτε το κείμενο στη γραμμή κατάστασης (status bar) του

παραθύρου του φυλλομετρητή. </p>

<p> Μπορούμε να χρησιμοποιήσουμε την ιδιότητα status του

αντικειμένου Window για να εμφανίσουμε ένα δικό μας κείμενο

στη γραμμή κατάστασης (status bar) του παραθύρου του

φυλλομετρητή. Με το που φορτώνεται η ιστοσελίδα,

ενεργοποιείται το συμβάν (event) onload και καλείται η

συνάρτηση load(), η οποία και καταχωρεί το κείμενό μας στην

ιδιότητα status του αντικειμένου Window. </p>

</body>

</html>



131. Εκτύπωση μιας Ιστοσελίδας

<html>

<head>

<script type="text/javascript">

function printpage() {

window.print()

}

</script>

</head>

<body>

<form>

<input type="button" value="Εκτύπωση της ιστοσελίδας" onclick="printpage()">

</form>

<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο print() του

αντικειμένου Window για να εκτυπώσουμε την τρέχουσα

ιστοσελίδα. </p>

</body>

</html>



132. Αλλαγή Μεγέθους Παραθύρου

<html>

<head>

<script type="text/javascript">

function resizeWindow() {

window.resizeBy(-50, -50)

}

</script>

</head>

<body>

<form>

<input type="button" onclick="resizeWindow()" value="Αλλαγή του μεγέθους του παραθύρου">

</form>

<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο resizeBy() του

αντικειμένου Window για να αλλάξουμε το μέγεθος του

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

πλάτους και του ύψους του παραθύρου με θετικές ή και με

αρνητικές τιμές. </p>

</body>

</html>



133. Καθορισμός Μεγέθους Παραθύρου

<html>

<head>

<script type="text/javascript">

function resizeWindow() {

window.resizeTo(500, 300)

}

</script>

</head>

<body>

<form>

<input type="button" onclick="resizeWindow()" value="Καθορισμός του μεγέθους του παραθύρου">

</form>

<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο resizeTo() του

αντικειμένου Window για να καθορίσουμε ακριβώς το μέγεθος

του τρέχοντος παραθύρου και όχι για να το αυξήσουμε ή να το

μειώσουμε. </p>

</body>

</html>



134. Η Μέθοδος setTimeout()

<html>

<head>

<script type="text/javascript">

function timeout() {

setTimeout("alert('Αυτό το alert box εμφανίσθηκε 2 δευτερόλεπτα μετά που κάνατε κλικ στο πλήκτρο εντολής.')", 2000)

}

</script>

</head>

<body>

<form>

<input type="button" onclick="timeout()" value="Κάντε κλικ για να εμφανισθεί ένα alert box">

</form>

<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο setTimeout() για να

ορίσουμε την εκτέλεση μιας άλλης μεθόδου μετά από ένα

χρονικό διάστημα, το οποίο μπορούμε να προσδιορίσουμε σε

χιλιοστά του δευτερολέπτου. </p>

</body>

</html>



135. Οι Μέθοδοι setInterval() και clearInterval()

<html>

<head>

<script type="text/javascript">

var intval=""

function start_Int() {

if(intval=="") {

        intval=window.setInterval("start_clock()", 1000)

}

else {

     stop_Int()

}

}

function stop_Int() {

if(intval!="") {

            window.clearInterval(intval)

            intval=""

            myTimer.innerHTML="Interval Stopped"

            }

}

function start_clock() {

var d=new Date()

var sw="πμ"

var h=d.getHours()

var m=d.getMinutes() + ""

var s=d.getSeconds() + ""

if(h>12) {

            h-=12

            sw="μμ"

            }

if(m.length==1)        {          m="0" + m     }

if(s.length==1)         {          s="0" + s       }

myTimer.innerHTML=h + ":" + m + ":" + s + " " + sw

}

</script>

</head>

<body>

<span id="myTimer" style="font-size:16pt; font-weight:bold; color:#FF0000">Interval Stopped</span>

<br /><br />

<input type="button" value="Start" onclick="start_Int()">

<input type="button" value="Stop" onclick="stop_Int()">

<p> Αυτό το παράδειγμα αλλάζει την ιδιότητα innerHTML, στην

ουσία το κείμενο, ενός στοιχείου span, κάθε δευτερόλεπτο.

Μπορούμε να κάνουμε κλικ στο πλήκτρο εντολής "Start" για να

ξεκινήσει η μέθοδος setInterval() και να εμφανίζεται ένα

ψηφιακό ρολόι με ώρες, λεπτά και δευτερόλεπτα και με

αυτόματη ενημέρωση και στο πλήκτρο εντολής "Stop" για να

σταματήσει το μέτρημα του ρολογιού με τη μέθοδο

clearInterval(). </p>

</body>

</html>



136. Η Μέθοδος setTimeout() με Όρισμα Συνάρτηση

<html>

<head>

<script type="text/javascript">

function timeout() {

window.setTimeout("show_alert()", 2000)

}

function show_alert() {

alert("Αυτό το alert box εμφανίσθηκε 2 δευτερόλέπτα μετά που κάνατε κλικ στο πλήκτρο εντολής.")

}

</script>

</head>

<body>

<form>

<input type="button" onclick="timeout()" value="Κάντε κλικ για να εμφανισθεί ένα alert box">

</form>

<p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο setTimeout() και για

να ορίσουμε την εκτέλεση μιας συνάρτησης μετά από ένα

χρονικό διάστημα, το οποίο μπορούμε να το προσδιορίσουμε σε

χιλιοστά του δευτερολέπτου. </p>

</body>

</html>



137. Η Μέθοδος setTimeout() με Όρισμα Συνάρτηση-2

<html>

<head>

<script type="text/javascript">

function timeout() {

window.setTimeout("change_text(document.all('t'))", 3000)

}

function change_text(tid) {

tid.style.color="blue"

}

</script>

</head>

<body>

<form>

<input id="t" name="t" type="text" value="Florina per sempre" size="20">

<input type="button" onclick="timeout()" value="Κάντε κλικ για να αλλάξει το χρώμα κειμένου">

</form>

<p> Το χρώμα του κειμένου που υπάρχει στο πλαίσιο κειμένου θα

αλλάξει 3 δευτερόλεπτα αφού θα έχετε κάνει κλικ στο πλήκτρο

εντολής. </p>

<p> Εδώ χρησιμοποιήσαμε τη μέθοδο setTimeout() για να αλλάξουμε

το χρώμα του κειμένου ενός πλαισίου κειμένου μετά από 3

δευτερόλεπτα που έγινε κλικ σ’ ένα πλήκτρο εντολής και

χρησιμοποιήσαμε το id="t" για να προσδιορίσουμε επακριβώς

το πλαίσιο κειμένου. </p>

</body>

</html>



138. Εμφάνιση ενός Μηνύματος pop-up

<html>

<head>

<script type="text/javascript">

function show_popup() {

var p=window.createPopup()

var pbody=p.document.body

pbody.style.backgroundColor="red"

pbody.style.border="solid black 2px"

pbody.innerHTML="Κάντε κλικ εκτός για να κλείσει το pop-up."

p.show(150, 150, 200, 50, document.body)

}

</script>

</head>

<body>

<button onclick="show_popup()">Εμφάνιση ενός pop-up</button>

            <p> Μπορούμε να χρησιμοποιήσουμε τη μέθοδο createPopup() του

αντικειμένου Window για να δημιουργήσουμε ένα αντικείμενο

pop-up, δηλ. ένα πτυσσόμενο μήνυμα, στο οποίο μπορούμε να

δώσουμε χρώμα φόντου με την ιδιότητα backgroundColor, να

ορίσουμε πάχος περιγράμματος με την ιδιότητα border καθώς

και να ορίσουμε το κείμενο που θα εμφανίζεται μέσα του με την

ιδιότητα innerHTML. Με τη μέθοδο show() μπορούμε να

προσδιορίσουμε τη θέση του (συντεταγμένες) μέσα στο

παράθυρο του φυλλομετρητή. </p>

</body>

</html>



139. Πλαίσια (Frames) με και Χωρίς Αλλαγή Μεγέθους

<html>

<frameset id="myFrameset" cols="50%, 50%">

<frame id="leftFrame" src="left_frame.html">

<frame id="rightFrame" src="right_frame.html">

</frameset>

</html>

Ο κώδικας της ιστοσελίδας που περιέχει το αριστερό πλαίσιο (left frame)

<html>

<head>

<script type="text/javascript">

function disableResize() {

parent.document.getElementById("leftFrame").noResize=true

parent.document.getElementById("rightFrame").noResize=true

}

function enableResize() {

parent.document.getElementById("leftFrame").noResize=false

parent.document.getElementById("rightFrame").noResize=false

}

</script>

</head>

<body>

<form>

<input type="button" onclick="disableResize()" value="Χωρίς αλλαγή μεγέθους">

<input type="button" onclick="enableResize()" value="Με αλλαγή μεγέθουςe">

</form>

<p> Στο παράδειγμα αυτό χρησιμοποιούμε την ιδιότητα noResize του

αντικειμένου Frame, στην οποία μπορούμε να δώσουμε την τιμή

true ή false, ώστε να μην μπορούμε ή να μπορούμε, αντίστοιχα,

να αλλάξουμε το μέγεθος ενός πλαισίου (frame). </p>

</body>

</html>



140. Πλαίσια (Frames) με και Χωρίς Ράβδους Κύλισης

<html>

<frameset id="myFrameset" cols="50%, 50%">

<frame id="leftFrame" src="left_frame.html">

<frame id="rightFrame" src="right_frame.html">

</frameset>

</html>

Ο κώδικας της ιστοσελίδας που περιέχει το αριστερό πλαίσιο (left frame)

<html>

<head>

<script type="text/javascript">

function enableScrolling() {

parent.document.getElementById("leftFrame").scrolling="yes"

parent.document.getElementById("rightFrame").scrolling="yes"

}

function disableScrolling() {

parent.document.getElementById("leftFrame").scrolling="no"

parent.document.getElementById("rightFrame").scrolling="no"

}

</script>

</head>

<body>

<form>

<input type="button" onclick="enableScrolling()" value="Με ράβδους κύλισης (scroll bars)">

<input type="button" onclick="disableScrolling()" value="Χωρίς ράβδους κύλισης (scroll bars)">

</form>

<p> Στο παράδειγμα αυτό χρησιμοποιούμε την ιδιότητα scrolling του

αντικειμένου Frame, στην οποία μπορούμε να δώσουμε την τιμή

yes ή no, ώστε το πλαίσιο να περιέχει ή να μην περιέχει,

αντίστοιχα, ράβδους κύλισης (scroll bars). </p>

</body>

</html>



141. Αλλαγή του Περιεχομένου ενός Πλαισίου (Frame)

<html>

<frameset id="myFrameset" cols="50%, 50%">

<frame id="leftFrame" src="left_frame.html">

<frame id="rightFrame" src="right_frame.html">

</frameset>

</html>

Ο κώδικας της ιστοσελίδας που περιέχει το αριστερό πλαίσιο (left frame)

<html>

<head>

<script type="text/javascript">

function newSrc() {

parent.document.getElementById("leftFrame").src="http://www.florina.gr"

parent.document.getElementById("rightFrame").src="http://www.kozani.gr"

}

</script>

</head>

<body>

<form>

<input type="button" onclick="newSrc()" value="Αλλαγή της ιστοσελίδας των πλαισίων">

</form>

<p> Στο παράδειγμα αυτό χρησιμοποιούμε την ιδιότητα src του

αντικειμένου Frame, στην οποία μπορούμε να δώσουμε ως τιμή

ένα URL, ώστε να εμφανισθεί μια ιστοσελίδα που θέλουμε.

</p>

</body>

</html>
ΠΕΡΙΣΣΟΤΕΡΑ