Εισαγωγή

• Τι είναι η Java
• Από τη Java στη JavaScript
• Σύγκριση Java και JavaScript
• Που μπορείτε να βρείτε τη JavaScript
• Σε τι ωφελεί η JavaScript
• Τι μπορείτε να κάνετε με την Java Script
Πολυμερή έγγραφα με πλαίσια
Επαναφόρτωση μέρους του παραθύρου
Δημιουργώντας έγγραφα με αλληλεπίδραση
Περισσότερος έλεγχος στην αλληλεπίδραση με το χρήστη
Έγγραφα με μνήμη
Ζωντανά έγγραφα
Μηνύματα που ολισθαίνουν
Ρολόγια
Χρονικός μηχανισμός αντίστροφης μέτρησης
Έγγραφα με αυτόματη ενημέρωση

Τι είναι η Java

Η Java είναι μια γλώσσα προγραμματισμού, παρόμοια κατά κάποιο τρόπο με τη C++, αλλά με την πρόθεση να είναι πιο αξιόπιστη για εφαρμογές Internet.
Η Java είναι λοιπόν για να φτιάχνετε προγράμματα, αλλά χρειάζεστε και ένα λειτουργικό σύστημα για να τρέξει. Ο προγραμματιστής μπορεί να δημιουργήσει μία και μόνο έκδοση του προγράμματος, που να τρέχει μέσα από ένα μεταφραστή της Java, ένα πρόγραμμα όπως το HotJava ή ο Netscape Navigator. Υπάρχουν διαφορετικοί διερμηνευτές για διαφορετικούς υπολογιστές και λειτουργικά συστήματα ( ο Netscape Navigator που τρέχει σε Macintosh, μια έκδοσή του που τρέχει σε Windows 3.1, μια για Windows 95 κ.λ.π. ). Έτσι, ένα και μόνο πρόγραμμα Java μπορεί να τρέξει σε πολλά και διαφορετικά λειτουργικά συστήματα, εφόσον ο χρήστης έχει έναν διερμηνευτή που να τρέχει στο σύστημά του.
Οι διερμηνευτές της Java δεν είναι αληθινά λειτουργικά συστήματα αν και βασίζονται λίγο-πολύ στις ίδιες αρχές. Ένα λειτουργικό σύστημα είναι η σύζευξη μεταξύ ενός προγράμματος και του υπολογιστή. Αντί για ένα πρόγραμμα που μιλάει κατευθείαν στα περιφερειακά του υπολογιστή, ο προγραμματιστής μπορεί απλά να γράψει ένα πρόγραμμα που μιλάει στο λειτουργικό σύστημα και να βάλει το λειτουργικό σύστημα στον κόπο να λειτουργήσει τα περιφερειακά. Ο διερμηνευτής της Java λειτουργεί με παρόμοιο τρόπο. Βρίσκεται ανάμεσα στο λειτουργικό σύστημα και το Java πρόγραμμα. Αντί να γράφει διαφορετικές εκδοχές του ίδιου προγράμματος, γράφει ένα και μόνο πρόγραμμα που επικοινωνεί με οποιονδήποτε διερμηνευτή της Java σε οποιοδήποτε σύστημα υπολογιστή. Ο διερμηνευτής μεσολαβεί ανάμεσα στο Java πρόγραμμα και το λειτουργικό σύστημα, μεταφράζοντας ό,τι λέει το ένα σε κάτι που μπορεί να καταλάβει το άλλο.
Πρόκειται για ριζοσπαστική τεχνολογία, υποστηρίζουν οι υπερασπιστές της Java, γιατί γκρεμίζει τους περιορισμούς που μπαίνουν στο λογισμικό εξαιτίας των λειτουργικών συστημάτων. Η Java προσφέρει μια πολυδύναμη γλώσσα προγραμματισμού με την οποία μπορούν ναδημιουργηθούν καλομελετημένα προγράμματα που μπορούν να τρέξουν σε πολλούς διαφορετικούς υπολογιστές.

Από τη Java στη JavaScript

Ένα σύστημα σαν τη Java είναι χρήσιμο μόνο όταν είναι πανταχού παρόν ή βρίσκεται κοντά σε αυτό. Πρέπει να βρίσκεται παντού. Ένα κλασσικό παράδειγμα συστήματος που απέτυχε γιατί δεν ήταν έτσι, είναι το OS/2. Πολλοί χρήστες του OS/2 θα παραπονεθούν ότι το σύστημα αυτό της IBM είναι κατά πολύ ανώτερο από οποιαδήποτε έκδοση των Microsoft Windows. Μπορεί να συμβαίνει μπορεί και όχι. Ένα πράγμα όμως είναι βέβαιο, ότι σχετικά λίγοι χρήστες χρησιμοποιούν OS/2. Αυτό έχει ως συνέπεια να γράφονται πολύ λίγα προγράμματα για το OS/2.
Η Sun αντιλαμβάνεται αυτή τη μικρή ζωτική λεπτομέρεια και θέλει να βεβαιωθεί ότι η Java θα καταλήξει να είναι το λειτουργικό σύστημα για το Internet (το DOS του Internet). Αλλά υπάρχει ένα πρόβλημα: η Java είναι μια γλώσσα προγραμματισμού. Δεν είναι εύκολο να φτιάξεις μια εφαρμογή της Java, εκτός αν είσαι προγραμματιστής που καταλαβαίνει πως να γράψει στη Java. Η Sun λοιπόν σχεδιάζει να προσφέρει ειδικά εργαλεία για να διευκολύνει κάθε μη προγραμματιστή να φτιάξει προγράμματα Java.
Δεν έχει γίνει ακόμα κάτι τέτοιο, αλλά η JavaScript αποτελεί το πρώτο βήμα στην απλοποίηση της Java. Παρόλο που η Netscape ξεκίνησε την ανάπτυξη της JavaScript αυτόνομα, γρήγορα συνεργάστηκαν με τη Sun, συμφωνώντας να κάνουν τη JavaScript ένα υποσύνολο της Java. Η JavaScript μοιάζει κατά κάποιο τρόπο με τη Java αλλά είναι πολύ πιο απλή στη χρήση. Δεν υπάρχει ανάγκη βοηθητικών εργαλείων, ούτε χρειάζεται μεταγλώττιση εφαρμογών της Java. Το μόνο που χρειάζεται είναι να εισάγετε ένα σενάριο στις ηλεκτρονικές σελίδες σας και όταν ένας browser που υποστηρίζει την JavaScript φτάνει στη σελίδα, διαβάζει το σενάριο και ακολουθεί τις οδηγίες.

Σύγκριση Java και JavaScript

Υπάρχουν κάποιες σημαντικές διαφορές ανάμεσα στην Java και την JavaScript. Παρακάτω συγκρίνουμε τα δύο αυτά συστήματα.
 
 

Java	JavaScript
Περίπλοκη στη χρήση	Σχετικά εύκολη στη χρήση
Θα χρειαστείτε το JDK (Java  DevelopersKit) που προσφέρεται  δωρεάν από τη Sun Microsystems.	Δεν χρειάζεστε τίποτε άλλο από  Πληροφορίες για το πως να  γράψετε σενάρια .
Τα προγράμματα  Μεταγλωττίζονται σε εκτελέσιμα έγγραφα.	Τα προγράμματα  ενσωματώνονται στη σελίδα με  τη μορφή σεναρίου.
Στην παρούσα κατάσταση του  Internet οι εφαρμογές της Java  τείνουν να γίνουν λίγο αργές.	Η JavaScript τρέχει πολύ  γρήγορα.
Η Java έχει περισσότερες  Δυνατότητες.	Η JavaScript είναι πιο κατάλληλη για σχετικά απλές εφαρμογές.
Η Java είναι προσανατολισμένη  στο αντικείμενο.	Η JavaScript είναι βασισμένη στο αντικείμενο.
Η Java έχει αυστηρούς κανόνες  γύρω από τη χρήση μεταβλητών.	Η JavaScript είναι πιο χαλαρή στη χρήση μεταβλητών.
Η Java χρησιμοποιεί στατική  σύνδεση. Οι αναφορές στα αντικείμενα πρέπει να υπάρχουν όταν μεταγλωττίζεται το πρόγραμμα.	Η JavaScript χρησιμοποιεί  δυναμική σύνδεση. Οι αναφορές στα αντικείμενα ελέγχονται όταν το σενάριο εκτελείται.

Που μπορείτε να βρείτε τη JavaScript

Αν θέλετε να δημιουργήσετε προγράμματα σε C ++ ή Visual Basic χρειάζεστε ένα περιβάλλον ανάπτυξης λογισμικού και έναν μεταγλωττιστή. Δεν υπάρχει όμως περιβάλλον ανάπτυξης λογισμικού για την JavaScript και θα χρειαστεί ποτέ να μεταγλωττίσετε τα σενάριά σας. Αυτό που θα χρειαστείτε είναι ένας συμβατός με την JavaScript browser. Δηλαδή ένας World Wide Web browser που μπορεί να διαβάσει, να μεταφράσει και να τρέξει τα σενάρια που δημιουργείτε. Αυτό ισχύει για Netscape Navigator 4.0 ή Internet Explorer 4.0 ή νεώτερες εκδόσεις.

Σε τι ωφελεί η JavaScript

Με τη JavaScript μπορείτε να φτιάξετε σενάρια που να εκτελούν αυτόματες εργασίες, π.χ όταν μια σελίδα του Web ανοίγει ή κλείνει. Επίσης μπορείτε να κάνετε την JavaScript να εκτελεί ενέργειες ανταποκρινόμενη σε ένα συγκεκριμένο γεγονός. Για παράδειγμα όταν ο χρήστης επιλέγει ένα κουμπί ή ένα σύνδεσμο, όταν εστιάζει από ένα στοιχείο μιας φόρμας σε ένα άλλο στοιχείο της κ.ο.κ.
Οι ενέργειες αυτές μπορεί να είναι απλές. Τα σενάρια μπορεί να ανοίγουν νέα παράθυρα στον browser και να εμφανίζουν συγκεκριμένα HTML έγγραφα ή να παρουσιάζουν μια σελίδα επιλεγμένη από τον κατάλογο ιστορικού του browser. Μπορεί επίσης να είναι και περίπλοκες δηλαδή ένα σενάριο μπορεί να ελέγχει τα περιεχόμενα μιας φόρμας που θέλει να υποβάλει ένας χρήστης και στη συνέχεια να προειδοποιεί τον χρήστη αν τα δεδομένα είναι λάθος. Το σενάριο μπορεί να ψάξει για πληροφορίες σε μια μικρή βάση δεδομένων ή να κάνει πολύπλοκους υπολογισμούς οικονομικών στοιχείων.

Τι μπορείτε να κάνετε με την Java Script

Πολυμερή έγγραφα με πλαίσια
Επαναφόρτωση μέρους του παραθύρου
Δημιουργώντας έγγραφα με αλληλεπίδραση
Περισσότερος έλεγχος στην αλληλεπίδραση με το χρήστη
Έγγραφα με μνήμη
Ζωντανά έγγραφα
Μηνύματα που ολισθαίνουν
Ρολόγια
Χρονικός μηχανισμός αντίστροφης μέτρησης
Έγγραφα με αυτόματη ενημέρωση

Πολυμερή έγγραφα με πλαίσια

Μπορείτε να δημιουργήσετε έγγραφα που διαιρούν το παράθυρο του φυλλομετρητή σε επιμέρους κομμάτια. Αυτά τα κομμάτια καλούνται πλαίσια και μεγάλο μέρος της δύναμης της Java Script προέρχεται από τη διαχείριση των συγκεκριμένων πλαισίων.
Τα πλαίσια δίνουν περισσότερο έλεγχο πάνω από την εμφάνιση του εγγράφου από ότι η συμβατική HTML και δίνουν τη δυνατότητα να κρατήσετε σταθερό στην οθόνη ένα μέρος του εγγράφου ενώ κάποια άλλα αλλάζουν. Για παράδειγμα στο ένα έγγραφο μπορείτε να τοποθετήσετε το λογότυπο της εταιρείας, πληροφορίες δικαιωμάτων δημιουργού (copyright) και σε ένα άλλο να περιγράφετε μερικές ιδιαίτερα ενδιαφέρουσες πληροφορίες σχετικά με την εταιρεία. Έτσι το πλαίσιο που περιλαμβάνει το λογότυπο θα παραμένει σταθερό και ορατό ενώ οι πληροφορίες στο άλλο πλαίσιο θα αλλάζουν.
Ο κώδικας Java Script μέσα στο έγγραφο ενός πλαισίου μπορεί να αδειάσει άλλο πλαίσιο ώστε να γράψει νέα HTML ή άλλο κώδικα Java Script μέσα σε άλλο πλαίσιο. Προτού την Java Script ήταν τερατωδώς πολύπλοκη η δημιουργία, κατά τη λειτουργία, μιας νέας σελίδας φτιαγμένης σύμφωνα με τις οδηγίες του χρήστη.
Μια τυπική ιστοσελίδα υλοποιείται από ένα στοιχείο HTML που περιέχει ένα HEAD και ένα BODY στοιχείο. Ένα πλαίσιο εγγράφου συνήθως υλοποιείται από ένα HTML στοιχείο που περιέχει ένα HEAD και ένα FRAMESET στοιχείο. Τα στοιχεία FRAME περιλαμβάνονται μέσα σε FRAMESET στοιχεία και τα FRAMESET μπορούν να περιλαμβάνουν άλλα FRAMESET στοιχεία δίνοντας τη δυνατότητα να διαιρέσετε και να υποδιαιρέσετε το παράθυρο του φυλλομετρητή. Με αυτή την ιδιότητα πρέπει να είσαστε ιδιαίτερα προσεκτικοί γιατί μπορεί να υποδιαιρέσετε το παράθυρο του φυλλομετρητή έως το σημείο που καμία τιμή δεν είναι ορατή. Ένα έγγραφο πλαισίων απαιτεί πολλαπλά αυτόνομα έγγραφα.

Εδώ είναι η λίστα του HTML αρχείου για το έγγραφο πλαισίου. Ακολουθεί το αρχείο main.htm

<HTML>
<HEAD>
<TITLE>Sample Frame Document</TITLE>
</HEAD>
<FRAMESET ROWS="2?%,*">
<FRAME SRC="welcome.htm" NAME="Welcome" SCROLLING="auto"
MARGINWIDTH=1 MARGINHEIGHT=1 NORESIZE>
<FRAMESET COLS="2?%,8?%">
<FRAME SRC="dir.htm" NAME="Directory" SCROLLING="auto"
MARGINWIDTH=1 MARGINHEIGHT=1 NORESIZE>
<FRAME SRC="contents.htm" NAME="Contents" SCROLLING="auto"
MARGINWIDTH=1 MARGINHEIGHT=1 NORESIZE>
</FRAMESET>
</FRAMESET>
</HTML>

Το στοιχείο FRAMESET χωρίζει το παράθυρο σε γραμμές. Στην ανώτατη γραμμή δίνεται (σε ποσοστό) 20% της οθόνης και στην κατώτερη δίνεται το υπόλοιπο 80%. Η ανώτατη γραμμή θα περιλαμβάνει το έγγραφο welcome.htm. Η κατώτατη γραμμή θα περιλαμβάνει ένα στοιχείοFRAMESET που διαιρεί τη γραμμή σε δύο στήλες. Η αριστερή στήλη αποκτά (σε ποσοστό) 20% από το εύρος της γραμμής και περιλαμβάνει το dir.htm. Η δεξιά στήλη αποκτά το υπόλοιπο 80% από το εύρος της γραμμής και περιλαμβάνει το contains.htm. Η επόμενη κατάταξη λίστας είναι η welcome.htm. Εμφανίζει μια απλή γραμμή την "Welcome To My Frame Document". Η γραμμή είναι κεντρικά στοιχισμένη και το κείμενο είναι πράσινο σε μαύρο φόντο.

<HTML>
<HEAD>
<TITLE>Welcome</TITLE>
</HEAD>
<BODY BGCOLOR="??????" TEXT="??8???">
<P ALIGN=CENTERWelcome to My Frame Document</P>
</BODY>
</HTML>

Ακολουθεί το dir.htm. Περιέχει μια λίστα θεμάτων με λίστες ένθετες σε άλλες λίστες. Όπως το welcome.htm χρησιμοποιεί πράσινα γράμματα σε μαύρο φόντο.

<HTML>
<HEAD>
<TITLE>Directory</TITLE>
</HEAD>
<BODY BGCOLOR="??????" TEXT="??8???">
<UL>
<LI>Multi-Part Documents
<UL>
<LI>Reload Part of the Window
<LI>Interactive Documents
</UL>
<LI>More Control over User Interaction
<LI>Documents with Memory
<LI>Live Documents
<UL>
<LI>Scrolling Messages
<LI>Clocks
<LI>Countdown Timers
<LI>Self-Updating Documents
</UL>
</UL>
</BODY>
</HTML>

Τέλος είναι το contents.htm. Εμφανίζει ένα από τα θέματα γι'αυτή τη σελίδα με πράσινα γράμματα σε μαύρο φόντο.

<HTML>
<HEAD>
<TITLE>Contents</TITLE >
</HEAD>
<BODY BGCOLOR="??????" TEXT="??8???">
<P>
<B>JavaScript</B> offers you <I>much</I> more expressive
power than HTML alone. This chapter will touch on a few of
the things you can do with <B>JavaScript</B>, and is by no
means exhaustive.
</P>
</BODY>
</HTML>

Επαναφόρτωση μέρους του παραθύρου

Και τι μπορείτε να κάνετε από τη στιγμή που έχετε υποδιαιρέσει το παράθυρο του φυλλομετρητή; Μπορείτε να ενημερώσετε ένα πλαίσιο φορτώνοντας το με ένα νέο έγγραφο ενώ τα άλλα πλαίσια παραμένουν σταθερά. Στο έγγραφο που υλοποιείται από το αρχείο main.htm το ανώτατο πλαίσιο περιέχει πληροφορίες σχετικά με το συνολικό σκοπό της ιστοσελίδας της επιχείρησης. Το χαμηλότερο αριστερά πλαίσιο περιέχει ένα κατάλογο σελίδων που αναφέρονται στο σκοπό που εκφράστηκε ανώτατο πλαίσιο έγγραφο. Το χαμηλότερο δεξιά πλαίσιο περιέχει μια σελίδα που ο χρήστης έχει επιλέξει από τον κατάλογο στο χαμηλότερο αριστερά πλαίσιο. Το ανώτατο και το χαμηλότερο αριστερά πλαίσιο δεν αλλάζουν ποτέ - μένουν σταθερά- αλλά ο χρήστης μπορεί να αλλάξει σελίδες στο χαμηλότερο δεξιά πλαίσιο.

Δημιουργώντας έγγραφα με αλληλεπίδραση

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

Το main2.htm απλά διαιρεί την οθόνη σε δύο γραμμές.

<HTML>
<HEAD>
<TITLE>Self-Modifying Document</TITLE>
</HEAD>
<FRAMESET ROWS="6?%,*">
<FRAME SRC="input.htm" NAME="input" SCROLLING="auto"
MARGINWIDTH=1 MARGINHEIGHT=1 NORESIZE>
<FRAMESET ROWS="78%">
<FRAME SRC="output.htm" NAME="output" SCROLLING="auto"
MARGINWIDTH=1 MARGINHEIGHT=1 NORESIZE>
</FRAMESET>
</FRAMESET>
</HTML>

Αυτό είναι το input.htm :

<HTML>
<HEAD>
<TITLE>Input</TITLE>
<SCRIPT>
<!-- hide script
function sayHello(form)
{
parent.output.document.open();
parent.output.document.open();
var gt = unescape("%3E");
parent.output.document.write("<HTML" + gt);
parent.output.document.write("<BODY BGCOLOR='??4???' TEXT='FFFFFF'" + gt);
parent.output.document.write("Hello " + form.firstName.value + " " +
form.middleName.value + " " + form.lastName.value);
parent.output.document.write("</BODY" + gt);
parent.output.document.write("</HTML" + gt);
parent.output.document.close();
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="??4???" TEXT="FFFFFF">
<FORM NAME="form">
<INPUT TYPE=TEXT SIZE=2? NAME="firstName"> First Name
<BR>
<INPUT TYPE=TEXT SIZE=2? NAME="middleName"> Middle Name
<BR>
<INPUT TYPE=TEXT SIZE=2? NAME="lastName"> Last Name
<BR>
<INPUT TYPE=BUTTON VALUE="Say Hello"
ONCLICK="sayHello(this.form)">
</FORM>
</BODY>
</HTML>

Το input.htm δημιουργεί μια φόρμα μέσα στην οποία μπορείτε να γράψετε το μικρό όνομα το μεσαίο και το επίθετο. Αφού ολοκληρωθεί η διαδικασία εισαγωγής κλικάρετε πάνω στο κουμπί με την επιγραφή "Say Hello" και η συνάρτηση "Say Hello" της JavaScript καλείται με μια αναφορά για τη φόρμα σαν παράμετρο. Η συνάρτηση "Say Hello " ανοίγει το έγγραφο στο παραγόμενο στην έξοδο - αυτό που φαίνεται εξωτερικά-πλαίσιο δημιουργεί και εμφανίζει μια σελίδα σ'αυτό το πλαίσιο. Χρησιμοποιεί τη φόρμα για να πάρει τα ονόματα που έχουμε εισάγει και να τα ενσωματώσει μέσα στη νέα σελίδα. Η υλοποίηση της συγκεκριμένης εργασίας χωρίς την JavaScript θα απαιτούσε την σύνταξη ενός προγράμματος που θα έτρεχε σ'έναν εξυπηρετητή (server) μια αρκετά πιο δύσκολη εργασία από το τοποθετήσετε μαζί αυτά τα μικρά κομμάτια της JavaScript.

Ακολουθεί το input.htm :

<HTML>
<BODY BGCOLOR="??4???" TEXT="FFFFFF">
</BODY>
</HTML>

Αυτός ο κώδικας κάνει το φόντο του κάθε πλαισίου να ταιριάζει με τον φόντο άλλων πλαισίων.

Περισσότερος έλεγχος στην αλληλεπίδραση με το χρήστη

Η JavaScript αναγνωρίζει αρκετά γεγονότα (events) που ο χρήστης μπορεί να προξενήσει μέσα σ'ένα έγγραφο. Μπορείτε να δημιουργήσετε κώδικα JavaScript που θα αντιδρά σ'αυτά τα γεγονότα, παρέχοντας αλληλεπίδραση με το χρήστη. Μέσα σ'ένα στοιχείο FORM, υπάρχουν τα στοιχεία SELECT, INPUT και TEXTAREA που δρουν ως πεδία εισαγωγής. Ο χρήστης μπορεί τυπικά να μετακινεί το δρομέα από το ένα πεδίο εισαγωγής στο άλλο χρησιμοποιώντας το πλήκτρο TAB ή κλικάροντας το ποντίκι σ'ένα πεδίο εισαγωγής.
Όταν ο χρήστης μετακινεί το δρομέα από το ένα πεδίο εισαγωγής (πηγή) σ'ένα άλλο (προορισμός) το πεδίο του προορισμού αποκτά την εστίαση και ο χρήστης μπορεί να τροποποιήσει τα περιεχόμενα του συγκεκριμένου πεδίου. Την ίδια στιγμή το πεδίο εισαγωγής χάνει την εστίαση. Στην ορολογία του Netscape το πεδίο προορισμού υπέστη ένα γεγονός εστίασης και το πεδίο πηγής ένα γεγονός συσκότισης.
Ένα άλλο είδος γεγονότων παίρνει μέρος όταν ο χρήστης υπερτονίζει κείμενο σ'ένα πλαίσιο. Αυτό ονομάζεται γεγονός επιλογής. Ένα γεγονός αλλαγής παίρνει χώρα όταν κείμενο μέσα σ'ένα πεδίο αλλάζει και η εστίαση μεταφέρεται σ'ένα άλλο πεδίο. Μπορούμε να γράψουμε JavaScript δηλώσεις ή συναρτήσεις όταν οποιαδήποτε από τα γεγονότα συμβαίνουν -βρίσκονται σ'ένα πεδίο.
Ο παρακάτω κώδικας παρουσιάζει πώς αυτά τα γεγονότα και οι χειριστές γεγονότων δουλεύουν. Κάθε ένα από τα πεδία εισαγωγής έχει χειριστές γεγονότων που χειρίζονται εστίαση(focus), συσκότιση(blur), επιλογή(select), αλλαγή(change) ή click γεγονότα. Κάθε διαχειριστής γεγονότος καλεί τη αγγέλουσα συνάρτηση περνώντας το όνομα του πεδίου εισαγωγής και το όνομα του διαχειριστή. Η αγγέλουσα συνάρτηση εμφανίζει την πληροφορία στη περιοχή του παραθύρου κατάστασης.

<HTML>
<HEAD>
<TITLE>Focus, Blur, Select, Change, Click Test</TITLE>
<SCRIPT>
<!--
function announce(widgetName, eventType)
{
status = "The " + widgetName + " field just experienced a " +
eventType + " event";
return true;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM ONSUBMIT="return false">
<INPUT TYPE=BUTTON NAME="button" VALUE="button"
ONCLICK="announce('button','click')">
<INPUT TYPE=CHECKBOX NAME="checkbox"
ONCLICK="announce('checkbox','click')">A
<INPUT TYPE=CHECKBOX NAME="checkbox"
ONCLICK="announce('checkbox','click')">B
<INPUT TYPE=CHECKBOX NAME="checkbox"
ONCLICK="announce('checkbox','click')">C
<INPUT TYPE=RADIO NAME='radio'
ONCLICK="announce('radio','click')">AM
<INPUT TYPE=RADIO NAME='radio'
ONCLICK="announce('radio','click')">FM
<BR>
<INPUT TYPE=RESET NAME="reset"
ONCLICK="announce('reset','click')">
<BR>
<INPUT TYPE=SUBMIT NAME="submit"
ONCLICK="announce('submit','click')">
<BR>
<INPUT TYPE=TEXT NAME="text" SIZE=1?
ONBLUR="announce('text','blur')"
ONCHANGE="announce('text','change')"
ONFOCUS="announce('text','focus')"
ONSELECT="announce('text','select')">
<BR>
<TEXTAREA NAME="textArea" COLS="2?" ROWS="2"
ONBLUR="announce('textarea','blur')"
ONCHANGE="announce('textarea','change')"
ONFOCUS="announce('textarea','focus')"
ONSELECT="announce('textarea','select')"
Sample Text
</TEXTAREA>
<BR>
<SELECT NAME="select"
ONBLUR="announce('select','blur')"
ONCHANGE="announce('select','change')"
ONFOCUS="announce('select','focus')">
<OPTION>Option 1
<OPTION>Option 2
<OPTION>Option 3
</SELECT>
</FORM>
</BODY>
</HTML>

Προσοχή

Μπορεί τυχαία να θέσετε τον φυλλομετρητή σ'ένα ατελείωτο βρόχο δημιουργώντας αλυσίδα γεγονότων που επαναλαμβάνονται. Αναδυώμενα (Pop- up) 0παράθυρα που δημιουργήθηκαν χρησιμοποιώντας μια από τις alert, confirm ή prompt μεθόδους μπορούν να αλληλεπιδράσουν άσχημα όταν δημιουργούνται από ένα χειριστή γεγονότος εστίασης. Σαν παράδειγμα, ο παρακάτω κώδικας pops- up ένα alert παράθυρο όταν το πεδίο κειμένου λαμβάνει προσοχή.

<HTML>
<HEAD>
<TITLE>Endless Loop</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE=TEXT NAME="text" SIZE=1?
ONFOCUS="alert('Here we go again...')">
</FORM>
</BODY>
</HTML>

Αν το alert παράθυρο τύχει να εμφανισθεί πάνω από το πεδίο κειμένου τότε θα έχετε πρόβλημα. Παρακάτω βλέπετε ακριβώς τι θα συμβεί.

1. Το πεδίο κειμένου αποκτά την εστίαση.
2. Ο διαχειριστής κειμένου onFocus ξεκινά την εκτέλεση.
3. Το παράθυρο alert, αναδύεται αποκτώντας την εστίαση από το πεδίο κειμένου.
4. Ο χρήστης αποδεσμεύει το παράθυρο alert.
5. Το παράθυρο alert διαγράφεται. Η εστίαση επιστρέφει στο πεδίο κειμένου.
6. Ο διαχειριστής κειμένου onFocus ξεκινά την εκτέλεση.
7. Το παράθυρο alert, pops -up αποκτώντας την εστίαση …

Για να αποφύγετε αυτού του είδους τους ατελείωτους βρόχους, τοποθείστε μηνύματα σ'ένα πεδίο εισόδου κειμένου, στη περιοχή κατάστασης του παραθύρου, ή σ'ένα άλλο παράθυρο ή πλαίσιο καθ'ολοκληρία. Μέσα σ'ένα στοιχείο FORM, ένα άλλο είδος γεγονότος, το γεγονός υποβολής (submit), συμβαίνει όταν ο χρήστης κλικάρει πάνω σ'ένα κουμπί υποβολής. Πριν την εμφάνιση της JavaScript η επιλογή ενός κουμπιού υποβολής έστελνε τη φόρμα δεδομένων σε μία διαδικασία CGI σ'ένα απομακρυσμένο εξυπηρετητή. Η διαδικασία CGI επεξεργαζόταν τα δεδομένα και έστελνε πίσω μια νέα σελίδα με δεδομένα. Με την JavaScript μπορείτε να γράψετε έναν διαχειριστή γεγονότων για το γεγονός υποβολής και να κάνετε αυτό που θέλετε. Τα περισσότερα από τα περιεχόμενα του πεδίου εισόδου είναι προσιτά στον δικό σας κώδικα JavaScript. Τα πεδία κωδικών - συνθημάτων αποτελούν μια εξαίρεση γιατί μπορείτε να τροποποιήσετε τα δεδομένα και να αποφασίσετε να μην τα διαγράψετε όλα. Μπορείτε να δημιουργήσετε ένα έγγραφο και να το εμφανίσετε σ'ένα άλλο πλαίσιο ή παράθυρο. Και ακόμη μπορείτε να το στείλετε σε μια διαδικασία CGI.
Μπορείτε να γράψετε διαχειριστές γεγονότων που θα εκτελούνται όταν το ποντίκι θα κινείται πάνω από προκαθορισμένα αντικείμενα. Ένα τέτοιο γεγονός καλείται mouseover γεγονός. Μπορείτε να προσδιορίσετε διαχειριστές γεγονότων που θα εκτελούνται όταν το έγγραφο φορτώνεται (ένα load γεγονός) και όταν το έγγραφο εξέρχεται(ένα unload γεγονός).

Έγγραφα με μνήμη

Με τη χρήση ενός ιδιαίτερου χαρακτηριστικού που καλείται cookie τα έγγραφα μπορούν να μοιράσουν πληροφορίες μεταξύ τους. Μπορούμε να γράψουμε κώδικα JavaScript για τη δημιουργία, τροποποίηση και διαγραφή των cookies. Τα cookies είναι μικρά αντικείμενα δεδομένων που ανήκουν στο σύστημα του χρήστη. Η δύναμή τους είναι ότι παραμένουν στη μνήμη. Όταν το έγγραφο που δημιούργησε ή τροποποίησε ένα cookie δεν είναι φορτωμένο, τα δεδομένα του cookie είναι ακόμη εκεί. Άλλα έγγραφα που γνωρίζουν για το cookie μπορούν να προσπελάσουν και να τροποποιήσουν τα δεδομένα του, ώστε αυτά να μοιραστούν μεταξύ των εγγράφων.
Μια δυνατή χρήση των cookies είναι σε on-line καταλόγους. Η αποθήκευση ενός εκτεταμένου καταλόγου προϊόντων ή θεμάτων δεν θα απαιτούσε την τοποθέτηση ολόκληρου του καταλόγου σ'ένα μόνο έγγραφο.Είναι καλύτερο να διασπάσετε τον κατάλογο σε εύχρηστα κομμάτια με κάθε ξεχωριστό έγγραφο να συγκεντρώνεται σε μία συγκεκριμένη κατηγορία θέματος- εμπορεύματος.
Μπορείτε να χρησιμοποιήσετε cookies για να θυμόσαστε θέματα σχετικά με τον χρήστη και να παρουσιάζετε κομψά τα περιεχόμενα των εγγράφων σας στον συγκεκριμένο χρήστη. Ένα παράδειγμα αποτελεί ένας προσωπικός χαιρετισμός συνδυασμένος με μια ένδειξη του χρονικού διαστήματος από την τελευταία φορά που ο χρήστης φόρτωσε το έγγραφο.
Μπορεί να θέλετε να εμφανίζονται μερικές πληροφορίες στην αρχή της ημέρας. Χρησιμοποιώντας ένα cookie, το έγγραφο μπορεί να θυμάται πότε φορτώθηκε αρχικά για πρώτη φορά της ημέρας (από έναν συγκεκριμένο χρήστη) ή έναν επακόλουθο - διαδοχικό χρόνο. Για παράδειγμα στην πρώτη επίσκεψη της ημέρας μπορεί να φορτώνει ένα έγγραφο που να περιέχει την πρόβλεψη του καιρού της ημέρας, που πιθανότερα δεν θέλουμε να δούμε αργότερα την ίδια μέρα. Μπορείτε να εμφανίζετε ένα αγαπημένο cartoon. Αφού είδατε το cartoon δεν υπάρχει λόγος να το δείτε ξανά και ξανά.

Ζωντανά έγγραφα

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

Μηνύματα που ολισθαίνουν

Πιθανόν θα έχετε δει τα μικρά έξυπνα μηνύματα που ολισθαίνουν κατά μήκος της μπάρας κατάστασης του φυλλομετρητή. Το μήνυμα ξεκινά με αυθαίρετο αριθμό κενών (το παράδειγμα που ακολουθεί χρησιμοποιεί 200). Το μήνυμα, με τα καθοδηγητικά κενά, γράφονται στην μπάρα κατάστασης. Ένας χρονοδιακόπτης ξεκινά, when timed out, τη διαδικασία από την αρχή αλλά με ένα λιγότερο κενό από τη προηγούμενη επανάληψη. Όταν ο αριθμός των κενών, προτού το μήνυμα, γίνεται μηδενικός η στρατηγική αλλάζει. Αντί το μήνυμα να προσαρτάται σ'ένα αλφαριθμητικό κενών, ένα υποαλφαριθμητικό του μηνύματος εμφανίζεται. Με κάθε επανάληψη το σημείο εκκίνησης του υποαλφαριθμητικού μετακινείται ένα χαρακτήρα προς τα δεξιά κάνοντας το μήνυμα να εμφανίζεται πως μετακινείται προς τα αριστερά. Όταν το μήνυμα δεν φαίνεται πια, συνήθως ολόκληρος ο κύκλος ξεκινά από την αρχή. Ακολουθεί ένα παράδειγμα για το πώς θα δημιουργήσετε ένα μήνυμα που ολισθαίνει.

<HTML>
<HEAD>
<TITLE>Scrolling Message</TITLE>
<SCRIPT>
<!--
var winLength = 2??; // guess at how many spaces wide the status bar is
var speed = 1??; // number of milliseconds between updates
function scroll(count)
{
var msg = "Hi! This is my scrolling message in the status bar.";
var out = " ";
var cmd = "scroll(";
if (count <= winLength && ? < count)
{
var c = ?;
for (c = ? ; c < count ; c++)
{
out += " ";
}
out += msg;
}
else if (count <= ?)
{
if (-count < msg.length)
{
out += msg.substring(-count,msg.length);
}
else
{
count = winLength + 1;
}
}
window.status = out;
count--;
cmd += count + ")";
window.setTimeout(cmd,speed);
}
//-->
</SCRIPT>
</HEAD>
<BODY ONLOAD="window.setTimeout('scroll(winLength)',speed);">
</BODY>
</HTML>

Τα μηνύματα που ολισθαίνουν δεν είναι απαραίτητο να φαίνονται στην περιοχή status. Μπορείτε να δημιουργήσετε μια φόρμα και να τοποθετήσετε το μήνυμα σ'ένα πεδίο κειμένου μέσα στη φόρμα.

Ρολόγια

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

<HEAD>
<TITLE>Clock</TITLE>
<SCRIPT>
<!--
function updateTime()
{
var now = new Date();
var time = "" + now.getHours() + ":";
var minute = now.getMinutes();
if (minute < 1?)
{
time += "?";
}
time += minute + ":";
var second = now.getSeconds();
if (second < 1?)
{
time += "?";
}
time += second;
window.status = time;
window.setTimeout("updateTime()",1???);
}
//--
</SCRIPT>
</HEAD>
<BODY ONLOAD="window.setTimeout('updateTime()',1???);">
</BODY>
</HTML>

Αυτός ο κώδικας δέχεται την τρέχουσα ημερομηνία δημιουργώντας ένα νέο αντικείμενο Date. Αποσπά την τρέχουσα ώρα τα λεπτά και τα δευτερόλεπτα και τα εμφανίζει στην μπάρα κατάστασης. Στην περίπτωση των λεπτών και των δευτερολέπτων ελέγχει αν κάποια τιμή είναι μονό ψηφίο. Αν μια από αυτές τις τιμές είναι, προσθέτει το αρχικό μηδενικό (π.χ. μια ώρα δώδεκα και πέντε θα εμφανιζόταν ακανόνιστα - παράξενα ως "12:5:0"). Αφού εμφανισθεί η ώρα ένας νέος χρονοδιακόπτης δημιουργείται που θα τερματίσει ακριβώς 1,000 χιλιοστό του δευτερολέπτου. Όταν ο χρονοδιακόπτης τερματίζει εμφανίζει την ώρα και θέτει έναν άλλο χρονοδιακόπτη.

Χρονικός μηχανισμός αντίστροφης μέτρησης

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

<HTML>
<HEAD>
<TITLE>Count Down</TITLE>
<SCRIPT>
<!--
function countDown(tick)
{
if (tick == ?)
{
window.status = "We have liftoff...";
return;
}
var time = "T minus ";
var minute = Math.floor(tick / 6?);
if (minute < 1?)
{
time += "?";
}
time += minute + ":";
var second = tick % 6?;
if (second < 1?)
{
time += "?";
}
time += second;
window.status = time;
--tick;
var command = "countDown(" + tick + ")";
window.setTimeout(command,1???);
}
//-->
</SCRIPT>
</HEAD>
<BODY ONLOAD="window.setTimeout('countDown(12?)',1???);">
</BODY>
</HTML>

Εδώ ένας ακέραιος κρατά την ώρα σε δευτερόλεπτα. Η ώρα διαιρείται με 60 για να πάρουμε τα λεπτά (η math.floor() χρησιμοποιείται ώστε να είμαστε σίγουροι ότι το πηλίκο είναι ένας ακέραιος ) και το ακέραιο υπόλοιπο χρησιμοποιείται για να πάρουμε τα δευτερόλεπτα. Τα λεπτά και τα δευτερόλεπτα εμφανίζονται στην μπάρα κατάστασης. Στο τέλος του κώδικα του χρονοδιακόπτη ένα νέο TIME- OUT δημιουργείτε που επαναλαμβάνει τον κώδικα μ'ένα λιγότερο δευτερόλεπτο, ένα δευτερόλεπτο αργότερα. Όταν τα δευτερόλεπτα μηδενίζονται, η μπάρα κατάστασης αλλάζει και δεν δημιουργούνται άλλα time- outs.

Έγγραφα με αυτόματη ενημέρωση

Ένα έγγραφο μπορεί να αυτοενημερωθεί. Για παράδειγμα κάθε πέντε λεπτά 'ένα χρηματιστηριακό - μεσιτικό γραφείο μπορεί να δημιουργήσει μια εικόνα GIF που θα εμφανίζει ένα γράφημα με την άνοδο και κάθοδο του Dow -Jones κατά τη διάρκεια ενός 5λεπτου διαστήματος. Μπορείτε να δημιουργήσετε ένα έγγραφο που περιέχει το GIF αρχείο σαν εσωτερική εικόνα , και το έγγραφο μπορεί να αυτοενημερώνεται κάθε πέντε λεπτά. Το έγγραφο καλεί την history.go() κάθε 300 δεύτερα (5 λεπτά). Το νέο κάλεσμα της history.go() δρα σαν τη χρήση του Reload.

<HTML>
<HEAD>
<TITLE>The Dow Jones</TITLE>
</HEAD>
<BODY>
<IMG SRC="http://www.mythical_brokerage_house.com/DJ.GIF"
ALT="Picture it..." HEIGHT="5??" WIDTH="5??">
</BODY ONLOAD="window.setTimeout('history.go(?)',3?????)">
</HTML>