Το πρώτο μου πρόγραμμα

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

Πριν ξεκινήσουμε το πρώτο μας πρόγραμμα πρέπει να γνωρίζετε ότι:

Η Javascript είναι case Sensitive, δηλαδή τα πεζά και τα κεφαλαία αποτελούν διαφορετικά γράμματα Για παράδειγμα τα test, Test, TEST, TesT αποτελούν γι’ αυτήν 4 διαφορετικές λέξεις. Για να αποφύγετε τα λάθη φροντίστε να αποκτήσετε τη συνήθεια της εγγραφής με ένα συγκεκριμένο τρόπο (π.χ. όλα να γράφονται με πεζά δηλαδή με μικρά γράμματα).
Αν και μπορείτε να γράφετε τις εντολές τη μια κάτω από την άλλη καλό είναι να υποδηλώνετε το τέλος της γραμμής με ένα ελληνικό ερωτηματικό (semicolon).
Αφήστε κενούς χώρους γύρω από τον κώδικά σας. Με τον τρόπο αυτό θα είναι πιο ευανάγνωστος.

Το πρώτο μας πρόγραμμα θα είναι ένα alert box που θα λέει:

Ελπίζω να σας άρεσε η σελίδα μας

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

<html> <head><title>Δοκιμή Javascript</title><script>alert("Ελπίζω να σας άρεσε η σελίδα μας");</script>
</head><body> Το περιεχόμενο της σελίδας </body> </html>

Παρατηρούμε ότι:

Ο Javascript κώδικάς μας αποτελείται από μια μόνο γραμμή. Η semicolon στο τέλος θα μπορούσε να απαλειφθεί αλλά τις καλές συνήθειες πρέπει να τις αρχίζουμε από νωρίς.
Ο κώδικας βρίσκεται μέσα στις οδηγίες (tags) <script> και </script>
Η οδηγία script βρίσκεται μέσα στην οδηγία <head>. Θα μπορούσε όμως να βρίσκεται και σε οποιοδήποτε άλλο σημείο της σελίδας αρκεί να είναι μέσα στο <body> (μεταξύ <body> και </body>). Ο browser διαβάζει τη σελίδα από πάνω προς τα κάτω. Έτσι στο συγκεκριμένο παράδειγμα το alert box Ελπίζω να σας άρεσε η σελίδα μας εμφανίστηκε πριν ακόμη ο χρήστης δει την ίδια τη σελίδα. Γι’ αυτό θα ήταν καλύτερο ο κώδικας να δομηθεί όπως παρακάτω:

<html> <head><title>Δοκιμή Javascript</title></head><body> Το περιεχόμενο της σελίδας<script>alert("Ελπίζω να σας άρεσε η σελίδα μας");</script></body> </html>

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

Προβλήματα:

Αν δοκιμάσατε αυτόν τον κώδικα μόνοι σας πιθανώς να αντιμετωπίσατε τα ακόλουθα προβλήματα:

1. Ο Browser (π.χ. Internet Explorer) δεν εμφανίζει το παράθυρο

Ανάλογα με τις ρυθμίσεις του ο Browser μπορεί να μην επιτρέπει την εμφάνιση alert boxes για λόγους προστασίας από ανεπιθύμητες διαφημίσεις. Εδώ μόνο ο χρήστης μπορεί να επιτρέψει την εμφάνιση του σχετικού παραθύρου.

2. Διαχείριση Ελληνικών

Ενώ ο Internet Explorer εμφανίζει κανονικά το alert box στον Mozilla τα ελληνικά συνήθως έχουν χαθεί:

Δυστυχώς αυτό είναι ένα συχνό πρόβλημα και συχνά δεν μπορούμε να κάνουμε εμείς κάτι για να το αποφύγουμε. Τις περισσότερες φορές πάντως το πρόβλημα διορθώνεται αν δηλώσουμε την ελληνική ως γλώσσα της web σελίδας μας με κάποια οδηγία όπως <meta http-equiv=Content-Type content="text/html; charset=windows-1253"> ή ακόμη καλύτερα: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Τα ελληνικά θα εμφανιστούν σωστά στους περισσότερους browsers αν ο κώδικας γίνει:

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head><title>Δοκιμή Javascript</title></head><body>
Το περιεχόμενο της σελίδας<script>alert("Ελπίζω να σας άρεσε η σελίδα μας");</script></body> </html>

Το πρώτο μου πρόγραμμα

Τρέχουσα Ενότητα: Javascript