Πώς προσθέτουμε javascripts σε μια σελίδα

Πολλοί προγραμματιστές δημιουργούν εφαρμογές σε javascript ή άλλα περιβάλλοντα (π.χ. Perl) για δική τους χρήση και στη συνέχεια τις τοποθετούν στο Internet, παρέχοντας τη δυνατότητα και σε άλλους χρήστες να επωφεληθούν από την εργασία τους. Ακόμη λοιπόν και αν δεν γνωρίζουμε javascript μπορούμε να προσθέσουμε κάποια ειδικά εφέ ή εφαρμογές στις σελίδες μας. Εννοείται φυσικά πως σε καμία περίπτωση δεν πρέπει να αντιγράφουμε κώδικα χωρίς τη συγκατάθεση του δημιουργού του.

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




<Script>
        // Created by Stavros Lagoudakis 
        // e-mail: hawkeye@mad.scientist.com
        // This script is provided as is with no guarantees or support. 
        // Please email me only if you have a serious business proposal.

        var d=new Date();
            d.setTime(d.getTime());
        var month = 1;
        var sk="";
        if (d.getDate() == 1) {sk="
Have a nice month!"}        
        if (d.getDay() == 0) {day="Sunday"}
        if (d.getDay() == 1) {day="Monday"; sk="
Have a nice week!"}
        if (d.getDay() == 2) {day="Tuesday"}
        if (d.getDay() == 3) {day="Wednesday"}
        if (d.getDay() == 4) {day="Thursday"}
        if (d.getDay() == 5) {day="Friday"; sk="
Have a nice weekend!"}
        if (d.getDay() == 6) {day="Saturday"}
        month = d.getMonth() + 1;
        document.write("<B><FONT FACE=Arial COLOR=#FDEDB5 SIZE=-1>" + day + " " + 
        d.getDate() + "/" + month + "/" + d.getYear() + "</FONT></B><FONT SIZE=-2 
        FACE=Arial COLOR=#000000><BLINK>" + sk +"</BLINK></FONT>");
</Script>

Για να σας προλάβω, σας πληροφορώ πως δεν υπάρχει κανείς λόγος να γνωρίζετε τι σημαίνει όλος αυτός ο κώδικας (ούτε και εγώ γνωρίζω). Μην πανικοβάλεστε λοιπόν και ακολουθήστε απλώς την παλιά και δοκιμασμένη τακτική του copy - paste. Τα βήματα τα οποία ακολούθησα για να προσθέσω αυτό τον κώδικα στη σελίδα μου ήταν τα ακόλουθα:

  1. Επέλεξα το script που με ενδιαφέρει και βεβαιώθηκα πως έχω πράγματι δικαίωμα να το αντιγράψω.

  2. Επισκεύθηκα τη σελίδα όπου υπήρχε το script, είδα τον κώδικα (View - Source στον Internet Explorer ή View - Page Source στον Netscape Communicator) και τον αντέγραψα στη δικιά μου σελίδα.

  3. Ο κώδικας τοποθετήθηκε μέσα στην οδηγία <HEAD> μετά το </TITLE> (όπως ακριβώς φαίνεται στο παραπάνω παράδειγμα).

Οι παραπάνω εργασίες ισχύουν για όλα τα javascripts. Επειδή όμως κάθε script είναι και ένα ξεχωριστό "πρόγραμμα" με τις δικές του ιδιαιτερότητες πρέπει να διαβάσουμε και τις οδηγίες που έχει γράψει γι' αυτό ο κατασκευαστής του. Δυστυχώς οι οδηγίες αυτές συνήθως είναι σύντομες και γι' αυτό όχι ιδιαίτερα επεξηγηματικές, αν και αυτό είναι μάλλον δικαιολογημένο για ένα λογισμικό που μας δίδεται δωρεάν.

Στην περίπτωση του παραπάνω παραδείγματος οι οδηγίες εμπεριέχονται μέσα στον κώδικα και τις ξεχωρίζουμε από τις δύο καθέτους (//) με τις οποίες ξεκινά κάθε γραμμή με σχόλια.

Το πρώτο σχόλιο αποτελείται από μερικές γραμμές και μας δίνει τα στοιχεία του δημιουργού του script. 

        // Created by Stavros Lagoudakis 
        // e-mail: hawkeye@mad.scientist.com
        // This script is provided as is with no guarantees or support. 
        // Please email me only if you have a serious business proposal.

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


// The trick of this script is a simple gif-image
// consisting of two colors: black and white dots.
// The black dots are transparent.
// By wipeing this gif-image back and forth over the
// textmessages you get an attractive dissolving effect.
// This image is called slidefader.gif.

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


// Configure the left and top margin of the text (pixels).

Ακολουθεί ένα παράδειγμα λειτουργίας αυτού του javascript

Σημείωση: Το συγκεκριμένο script τοποθετείται σε όποιο σημείο της σελίδας θέλουμε (εκεί που θέλουμε να εμφανιστεί το μήνυμα). Πολλά scripts όμως τοποθετούνται υποχρεωτικά μέσα στην οδηγία <HEAD> π.χ.

<HEAD><TITLE>Ο τίτλος της σελίδας</TITLE> <SCRIPT LANGUAGE="JavaScript">...ο κώδικας του script... </SCRIPT></HEAD> 

Γιώργος Επιτήδειος © 2005

Επιστροφή στον Οδηγό Κατασκευής Web Σελίδων