Τα πρώτα βήματα

• Τρόποι για να εκτελέσετε σενάρια JavaScript
• Οι ετικέτες SCRIPT
• Οι ετικέτες HTML
• Μερικά Τεχνάσματα της JavaScript
Τοποθέτηση ημερομηνίας τροποποίησης στις ιστοσελίδες σας
Απόκρυψη σεναρίων
Άνοιγμα δευτερογενών παραθύρων
Αυτόματη προώθηση των ιστοσελίδων
Αυτόματη προώθηση με επιβεβαίωση
• Αντιμετώπιση λαθών και αποφυγή προβλημάτων
Αποφυγή των προβλημάτων
Καταγραφή των προβλημάτων
Συνηθισμένα λάθη

Τρόποι για να εκτελέσετε σενάρια JavaScript

Υπάρχουν δύο περιπτώσεις στις οποίες ο browser σας εκτελεί τις εντολές που βρίσκει σε ένα σενάριο JavaScript:
1) Κάποια τμήματα του σεναρίου εκτελούνται με το φόρτωμα της ιστοσελίδας από τον browser.
2) Κάποια τμήματα του σεναρίου εκτελούνται επειδή ο χρήστης πυροδότησε κάποια ενέργεια.
Υπάρχουν δύο πράγματα που ίσως θέλετε να να κάνετε όταν ο browser φορτώνει μια σελίδα. Πρώτον, μπορεί να θέλετε να κάνετε κάτι που ο χρήστης θα δει αμέσως, πχ. ένα πλαίσιο διαλόγου με ένα καλωσόρισμα προς το χρήστη . Δεύτερον, μπορεί να θέλετε να κάνετε κάτι που δεν θα είναι ορατό από το χρήστη, κάτι που θα ετοιμάζει ουσιαστικά το έδαφος για κάτι που άλλο που θα γίνει αργότερα. Μπορείτε π.χ να προσδιορίσετε λειτουργίες που πρόκειται να χρησιμοποιηθούν αργότερα.
Όπως έχουμε δύο περιπτώσεις εκτέλεσης σεναρίων, έτσι έχουμε και δύο τρόπους για να γράψουμε σενάρια. Μπορούμε να τα βάλουμε ανάμεσα σε ετικέτες <SCRIPT> ή </SCRIPT>, ή να τα τοποθετήσουμε μέσα σε ετικέτες HTML .

Οι ετικέτες SCRIPT

Για να βάλετε τον browser να εκτελέσει τις οδηγίες ενός σεναρίου αυτόματα, χωρίς είσοδο στοιχείων από το χρήστη, θα πρέπει να βάλετε το σενάριο ανάμεσα στις ετικέτες <SCRIPT LANGUAGE = "JAVASCRIPT''> και </SCRIPT>, όπως παρακάτω :
<SCRIPT LANGUAGE ="JAVASCRIPT''>
Εδώ μπαίνει το σενάριο της JavaScript.
</SCRIPT>
Τα σενάρια τοποθετούνται οπουδήποτε στο HEAD ή το BODY του HTML εγγράφου σας. Μπορείτε να βάλετε πολλαπλά σενάρια στις σελίδες σας. Δεν χρειάζεται να τα στριμώξετε όλα σε ένα μεγάλο σενάριο. Μπορείτε να έχετε ένα σενάριο στο HEAD και μερικά άλλα στο BODY.

Οι ετικέτες HTML

Ένας άλλος τρόπος, είναι να βάλετε τα σενάρια μέσα σε μια ετικέτα HTML. Αυτό παρέχει ένα τρόπο απόκρισης του σεναρίου σε πράγματα που κάνουν οι χρήστες στη σελίδα. Τα σενάρια αυτά εκτελούνται όταν ο χρήστης κάνει κάποια ενέργεια, όπως το πάτημα ενός κουμπιού ή ενός συνδέσμου. Δηλαδή τα σενάρια εκτελούνται σαν αντίδραση σε ένα γεγονός και βασίζονται σε ειδικούς χειριστές γεγονότων. Εδώ βρίσκεται η αληθινή δύναμη της JavaScript. Το σενάριό σας αντιδρά σε μια ενέργεια του χρήστη χωρίς να υπάρχει επικοινωνία μεταξύ μεταξύ του Web Server και του browser του χρήστη. Όλη η δουλειά γίνεται στον browser.

Ας δούμε ένα παράδειγμα :

Παράδειγμα :

<SCRIPT LANGUAGE = "JAVASCRIPT''>
<!--
document.write("Tελευταία τροποποίηση εγγράφου :'')
document.write(document.lastModified)
<!--
</SCRIPT>

Στη συνέχεια φτιάξαμε ένα κουμπί στην ιστοσελίδα ως εξής :
<FORM>
<INPUT TYPE = ''button'' NAME = ''AlertButton''VALUE = ''Πατήστε εδώ''onclick = ''alert ('Μόλις πατήσατε το κουμπί')''>
</FORM>
</BODY>
</HTML>

Μερικά Τεχνάσματα της JavaScript

Τοποθέτηση ημερομηνίας τροποποίησης στις ηλεκτρονικές σελίδες σας

Είναι συχνά χρήσιμο να εμφανίζετε μια ημερομηνία στη σελίδα σας, που δείχνει την τελευταία φορά που τροποποιήθηκε το πηγαίο έγγραφο. Οι αναγνώστες μπορούν εύκολα να δούν πόσο πρόσφατες είναι οι πληροφορίες. Η JavaScript σας παρέχει έναν απλό και γρήγορο τρόπο να το κάνετε αυτό. Δείτε τι πρέπει να κάνετε.

Υπόδειξη :
1.Ανοίξτε μια από τις ηλεκτρονικές σελίδες σας με τον διορθωτή HTML που χρησιμοποιείτε και τοποθετήστε τον δρομέα ακριβώς εκεί που θέλετε να δείτε την ημερομηνία να εμφανίζεται.

2. Πληκτρολογήστε τα παρακάτω :
<SCRIPT LANGUAGE = ΄΄JAVASCRIPT''>
document.write(΄΄Το έγγραφο τροποποιήθηκε τελευταία φορά:'')
document.write(document.lastModified)
</SCRIPT>

3. Αποθηκεύστε τη σελίδα σας και δείτε τη με ένα browser συμβατό με JavaScript.
Σημειώστε ότι μπορείτε να αλλάξετε το κείμενο αν θέλετε.

Απόκρυψη σεναρίων

Υπάρχει όμως ένα μικρό πρόβλημα με το σενάριο που γράψατε προηγουμένως. Συγκεκριμένοι browser που δεν υποστηρίζουν JavaScript, την επεξεργάζονται σαν απλό κείμενο και την παρουσιάζουν λίγο παράδοξα. Η διόρθωση γίνεται ως εξής :

Υπόδειξη :

<SCRIPT LANGUAGE = ΄΄JAVASCRIPT''>
<!--
document.write(΄΄Το έγγραφο τροποποιήθηκε για τελευταία φορά :'')
document.write(document.lastModified)
//-->
</SCRIPT>

Όπως παρατηρήσατε, προσθέσαμε δύο γραμμές, <!-- και //--> . Αυτές είναι οι ετικέτες σχολίου που χρησιμοποιούνται στην HTML. Οι browsers αγνοούν οτιδήποτε βρίσκεται μεταξύ των γραμμών αυτών.

Άνοιγμα δευτερογενών παραθύρων

Μπορείτε να χρησιμοποιήσετε τη JavaScript να κάνει όλα τα τεχνάσματα σε δευτερογενή παράθυρα. Αν θέλετε να ανοίξετε ένα άλλο παράθυρο και να βάλετε τα περιεχόμενα ενός συγκεκριμένου HTML εγγράφου σ 'αυτό, πρέπει να κάνετε τα εξής:

Υπόδειξη :

Πρώτα βάλτε τα παρακάτω στην αρχή του HTML εγγράφου:
<head>
<SCRIPT LANGUAGE = ΄΄JAVASCRIPT''>
<!--
function WinOpen( ) {
open(΄΄Window.htm'',΄΄Window1΄΄, ΄΄toolbar = yes''); }
//-->
</SCRIPT>
</head>

Κάπου στο έγγραφο προσθέστε τα εξής :
<form>
<input type = ΄΄button'' name = ΄΄WindowButton'' value =΄΄Δευτερογενές Παράθυρο -Πάτησε με ΄΄onclick=΄΄WinOpen ( )''>
</form>

Αυτόματη προώθηση των ιστοσελίδων

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

Υπόδειξη :

<SCRIPT LANGUAGE = ΄΄JAVASCRIPT''>
<!--
alert(΄΄Το URL έχει αλλάξει. Παρακαλούμε σημειώστε το καινούργιο όταν σας προωθήσουμε στη νέα μας σελίδα.'')
//-->
</SCRIPT>
</HEAD>
<BODY onload = "location ='2-12A.htm'">

Καταρχήν βάλαμε ένα προειδοποιητικό μήνυμα στην κορυφή της σελίδας. Αυτό τρέχει μόλις ο browser αρχίζει να διαβάζει το HTML έγγραφο, άρα το πλαίσιο του προειδοποιητικού μηνύματος ανοίγει πρώτο. Όταν ο χρήστης πατήσει το OK, ο browser συνεχίζει την ανάγνωση μέχρι που φτάνει στην ετικέτα <BODY>. Εκεί συναντάει τον χειριστή onload και συνεχίζει να φορτώνει την σελίδα και όταν τελειώσει τρέχει την εντολή onload. Η εντολή αυτή του δείχνει την τοποθεσία του εγγράφου που πρέπει να φορτώσει τώρα ( στο παράδειγμά μας το έγγραφο 2-12Α.ΗΤΜ ). Έτσι ο browser φορτώνει αυτόματα το επόμενο έγγραφο.
Αυτή η τεχνική κρύβει όμως ένα πρόβλημα. Αναστατώνει, ως ένα βαθμό, τις λίστες ιστορικού του χρήστη. Αν κάποιος χρησιμοποιήσει το κουμπί back για να γυρίσει πίσω, θα φτάσει στο έγγραφό σας, το οποίο θα τον ρίξει ξανά μπροστά. Υπάρχει όμως και άλλος τρόπος για αυτόματη προώθηση, η αυτόματη προώθηση με επιβεβαίωση .

Αυτόματη προώθηση με επιβεβαίωση

Μπορείτε να αντιμετωπίσετε αυτό το παραπάνω πρόβλημα τοποθετώντας ένα πλαίσιο επιβεβαίωσης. Ο χρήστης θα δει το μήνυμα, αλλά θα έχει την επιλογή ανάμεσα στα κουμπιά OK και Cancel. Όταν ο χρήστης δει για πρώτη φορά το μήνυμα θα πατήσει OK και θα μεταφερθεί στη σελίδα σας. Όταν όμως γυρίσει πίσω με το κουμπί back μπορεί να πατήσει το Cancel και μετά πάλι το back. Αυτή τη φορά δεν θα πάει μπρος-πίσω. Να πως γίνεται αυτό :

Υπόδειξη :

<SCRIPT LANGUAGE = ΄΄JAVASCRIPT''>
<!--
function redirect ( ) {
if ( confirm ( ΄΄Η σελίδα έχει μεταφερθεί. Παρακαλούμε σημειώστε την καινούργια της θέση και ζητήστε από τον ιδιοκτήτη της σελίδας από την οποία ήρθατε να αλλάξει τον σύνδεσμο. Πατήστε OK για να πάτε στη νέα σελίδα.'')) {
location='2-12A.htm'
}
}
<!--Τέλος-->
</SCRIPT>
</HEAD>
<BODY onload = "redirect ( )''>

Αυτό είναι πιο περίπλοκο. Δημιουργήσαμε μια λειτουργία που καλέσαμε redirect, η οποία περιέχει μια πρόταση if. Η if πρόταση χρησιμοποιεί μια ενσωματωμένη λειτουργία που λέγεται confirm που μοιάζει πολύ με τη λειτουργία alert με μόνη διαφορά ότι δημιουργεί ένα πλαίσιο επιβεβαίωσης με τα κουμπιά OK και Cancel. Στο τέλος της πρότασης if βρίσκεται η εντολή location = '2-12A.htm'. Που σημαίνει ''αν ο χρήστης πατήσει το OK, εμφάνισε το έγγραφο 2-12Α.htm''.

Αντιμετώπιση λαθών και αποφυγή προβλημάτων

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

Αποφυγή των προβλημάτων

Καλύτερα να προλαμβάνετε τα λάθη παρά να προσπαθείτε να τα βρείτε στα σενάριά σας μετέπειτα. Αυτό μπορείτε να το καταφέρετε ακολουθώντας λίγους κανόνες :

• Να φτιάχνετε τα σενάριά σας κομμάτι-κομμάτι και να ελέγχετε καθένα τους πριν προχωρήσετε στο επόμενο. Είναι ευκολότερο να βρείτε λάθος σε 10 ή 20 γραμμές κώδικα απ'ότι σε μερικές εκατοντάδες.
• Χρησιμοποιήστε άφθονα σχόλια για να σας υπενθυμίζουν τι κάνει κάθε τμήμα, τι δεδομένα περιέχουν οι μεταβλητές, τι κάνουν οι λειτουργίες κλπ.
• Μην αλλάζετε τους τύπους των μεταβλητών. Πιθανότατα να μπερδευτείτε αν το κάνετε και να καταλήξετε να χρησιμοποιείτε λανθασμένα μια μεταβλητή.
• Χρησιμοποιήστε καλές ονομασίες. Αν βάζετε λογικά ονόματα στις μεταβλητές σας, θα σας βοηθήσει να αναγνωρίζετε τα δεδομένα που περιέχει κάθε μεταβλητή και τον τύπο της και θα κάνει ευκολότερη την ανάγνωση των σεναρίων και την ταξινόμησή τους.
• Δηλώνετε τις μεταβλητές με σαφήνεια. Αν δεν τις δηλώνετε σωστά χρησιμοποιώντας var, θα έχετε προβλήματα καθώς θα χρησιμοποιούνται λάθος μεταβλητές.
• Μην χρησιμοποιείτε για μεταβλητές εσωτερικών λειτουργιών ονόματα που χρησιμοποιείτε για κάτι άλλο που δηλώνετε καθολικά.
• Προσέχετε κατά την διαβίβαση παραμέτρων. Καλύτερα να αλλάζετε τις τοπικές μεταβλητές και όχι τις καθολικές.
• Πολλές λέξεις της JavaScript είναι ευαίσθητες στον τύπο χαρακτήρων, οπότε πρέπει να είστε προσεκτικοί όταν δακτυλογραφείτε τα σενάριά σας.
• Τα ονόματα των μεταβλητών και των λειτουργιών είναι ευαίσθητα στον τύπο χαρακτήρων. Η συνετή απόδοση ονομάτων θα βοηθήσει ώστε να μην δηλώνετε μια μεταβλητή ή να ορίζετε μια λειτουργία και να την καλείτε μετά με λάθος όνομα.
• Βάζετε παρενθέσεις στις λογικές προτάσεις. Οι προτάσεις αυτές μπορεί να είναι αρκετά δυσνόητες . Χρησιμοποιώντας παρενθέσεις βεβαιώνεστε ότι οι προτάσεις σας θα κάνουν ακριβώς αυτό που πρέπει.
• Ορίζετε τις λειτουργίες και τις καθολικές μεταβλητές στο HEAD. Με τον τρόπο αυτό σιγουρεύετε ότι θα δημιουργηθούν πριν φορτωθεί το υπόλοιπο του εγγράφου. Ο χρήστης δεν μπορεί να κάτι που χρησιμοποιεί μια λειτουργία, πριν αυτή η λειτουργία γίνει διαθέσιμη.

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

Βασικά υπάρχουν δύο ειδών σφάλματα :

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

Ορίστε ορισμένα συνηθισμένα λάθη που πρέπει να προσέχετε :

• Δημιουργήσατε εκφράσεις συνθήκης (if) χρησιμοποιώντας τον τελεστή εκχώρησης =, αντί του τελεστή ισότητας = =.
• Χρησιμοποιήσατε μια μεταβλητή πριν ακόμη τη δηλώσετε.
• Χρησιμοποιήσατε μια μεταβλητή που την έχετε μεν δηλώσει, αλλά δεν έχει αρχικοποιηθεί, δεν περιέχει δηλαδή καμία τιμή.
• Ξεχάσατε να βάλετε παρενθέσεις εκεί που πρέπει ή ξεχάσατε κάποιες από αυτές.
• Δηλώσατε μια μεταβλητή εσωτερική σε μια συνάρτηση και στη συνέχεια προσπαθήσατε να την χρησιμοποιήσετε σαν καθολική, εξω από τη συνάρτηση.
• Ξεχάσατε να βάλετε ( ) αμέσως μετά από το όνομα μιας συνάρτησης.
• Δεν βάλατε εισαγωγικά εκεί που έπρεπε π.χ. σε σταθερές συμβολοσειρών(string).
• Χρησιμοποιήσατε διπλά εισαγωγικά αντί των απλών.
• Δεν δηλώσατε καθαρά μια μεταβλητή (με το var) σε μια συνάρτηση και όταν πήγατε να τη χρησιμοποιήσετε είδατε ότι παίρνετε την τιμή από μια καθολική μεταβλητή που έχει το ίδιο όνομα.
• Δακτυλογραφήσατε λάθος κάποιο όνομα ή λέξη ή τα γράψατε με διαφορετικό τύπο χαρακτήρων.
• Αλλάξατε κατά λάθος τον τύπο μιας μεταβλητής και κατέληξε να χρησιμοποιείται για λάθος λόγο.
• Δημιουργήσατε μια έκφραση Boolean που δεν κατανοείτε ακριβώς και δουλεύει
• διαφορετικά απ' ότι περιμένατε. Οι συνδιασμοί πολλών μεταβλητών Boolean και τελεστών Boolean αποκτούν διαφορετικό νόημα, ανάλογα με το που βάζετε τις παρενθέσεις.
• Δημιουργήσατε έναν υπολογισμό που δεν δουλεύει όπως θα περιμένατε. Οι υπολογισμοί, επίσης, εξαρτώνται από την προτεραιότητα των τελεστών και το που βάζετε τις παρενθέσεις.