ΕΝΟΤΗΤΑ 2 - Inline Code Versus External Files
Εισηγητής
ΜΙΧΑΛΗΣ ΚΑΣΑΠΟΓΛΟΥ
Στο σημερινό δωρεάν μάθημα JavaScript θα δούμε τις διαφορές στην εκτέλεση ενός JavaScript κώδικα που είναι ενσωματωμένος στην HTML (Inline Code) και του JavaScript κώδικα που εκτελείται από ένα εξωτερικό αρχείο (External Files).
Στο προηγούμενο δωρεάν μάθημα JavaScript είχαμε δημιουργήσει μια απλή HTML σελίδα μέσα από την οποία εκτελέσαμε έναν JavaScript κώδικα. Το στοιχείο script που προσθέσαμε στον HTML κώδικα μας έδωσε την δυνατότητα να εκτελέσουμε JavaScript κώδικα που είναι αποθηκευμένος σε ένα εξωτερικό αρχείο. Αυτό το καταφέραμε χρησιμοποιώντας το src το οποίο είναι ένα από τα attributes που έχει να προσφέρει το script στοιχείο.
Υπάρχουν όμως και άλλα attributes που έχει να προσφέρει το script που σε κάποιες περιπτώσεις η χρήση τους μπορεί να είναι ωφέλιμη. Πριν όμως αναλύσουμε τα attributes του script, θα πρέπει να αναφέρουμε όλους τους διαφορετικούς τρόπους με τους οποίους μπορούμε να καλέσουμε έναν JavaScript κώδικα.
Στο απλό παράδειγμα μας, καλέσαμε το myscript.js μέσα στο tag body του HTML για να το εκτελέσουμε. Αυτός ο τρόπος ονομάζεται external file. Μπορούμε όμως να γράψουμε τον ίδιο JavaScript κώδικα μέσα στο HTML και να μην χρειαστεί να καλέσουμε ένα εξωτερικό αρχείο. Αυτός ο τρόπος ονομάζεται Inline Code. Στο παρακάτω παράδειγμα βλέπουμε πως θα αλλάξει ο κώδικας του HTML όταν χρησιμοποιούμε Inline JavaScript Code.
Όπως βλέπετε, ο κώδικας που υπήρχε μέσα στο αρχείο τώρα έχει γραφτεί ανάμεσα στα script tags. Όμως αυτός ο τρόπος να γράφουμε JavaScript κώδικα δεν είναι ο προτεινόμενος και ο λόγος είναι απλός όπως θα εξηγήσουμε τώρα αμέσως. Η HTML εκτελεί τον κώδικα από πάνω προς τα κάτω όπως έχετε γράψει τα tags. Αυτό σημαίνει ότι θα εκτελέσει το tag h3, μετά το tag script και τέλος το tag p. Αν λοιπόν ο JavaScript κώδικας που υπάρχει μέσα στο script καθυστερήσει να ολοκληρώσει την εκτέλεση του ίσως γιατί πραγματοποιεί κάποια δύσκολη πράξη, τότε θα καθυστερήσει να εμφανιστεί και το κείμενο που βρίσκεται στο επόμενο tag που είναι το p. Με άλλα λόγια πρέπει πρώτα να ολοκληρωθεί ο κώδικας του script και μετά να εμφανιστεί το επόμενο κείμενο που περιέχεται στο p. Νομίζω, ότι μπορείτε απόλυτα να καταλάβετε πόσα πολλά προβλήματα μπορεί να μας δημιουργήσει αυτός ο τρόπος και για αυτό άλλωστε τον αποφεύγουμε.
Το να καλούμε ένα JavaScript σαν εξωτερικό αρχείο, μας δίνει αρκετά πλεονεκτήματα. Μερικά από αυτά είναι ότι μπορούμε να αλλάζουμε τον κώδικα του JavaScript πολύ πιο εύκολα γιατί όλος συγκεντρωμένος σε ένα αρχείο, και η ταχύτητα εκτέλεσης του είναι πιο γρήγορη γιατί την πρώτη φορά που θα καλέσουμε την σελίδα, o browser θα κατεβάσει το JavaScript αρχείο και θα το βάλει στην cache μνήμη. Για τις επόμενες φορές που θα καλέσουμε την ίδια σελίδα, θα χρησιμοποιηθεί η cache του browser και δεν θα χρειαστεί να κατεβεί το αρχείο με τον κώδικα ξανά.
Οπότε μέχρι τώρα έχουμε καλύψει την διαφορά ανάμεσα σε inline code και external files. Επίσης έχουμε δει ότι τα εξωτερικά αρχεία JavaScript καλούνται με το script tag χρησιμοποιώντας το src attribute. Όμως το body του HTML είναι το μόνο σημείο που μπορούμε να καλέσουμε την JavaScript σαν εξωτερικό αρχείο? Η απάντηση είναι όχι.
Παραδοσιακά, όλα τα script στοιχεία τοποθετούνται ανάμεσα στο head στοιχείο της σελίδας.
Ο κύριος λόγος για τον οποίο τοποθετούμε τα JavaScript αρχεία στο head tag είναι γιατί θέλουμε να έχουμε όλα τα αρχεία μαζί συγκεντρωμένα στο ίδιο μέρος – π.χ CSS, JavaScript κτλ. Αυτό όμως σημαίνει ότι, όταν θέλουμε να δούμε την συγκεκριμένη σελίδα στο browser, όλα αυτά τα αρχεία πρέπει να έχουν κατέβει και διαβαστεί πριν ακόμα η σελίδα φτάσει στο body tag για να μας δείξει το κείμενο. Αν τα αρχεία έχουν μεγάλο μέγεθος τότε θα υπάρχει μια αισθητή καθυστέρηση στην εμφάνιση της σελίδας και για αρκετά δευτερόλεπτα ο browser δεν θα δείχνει τίποτα. Οπότε και εδώ μπορεί να έχουμε ένα μεγάλο πρόβλημα γρήγορης εμφάνισης της σελίδας.
Για να ανακεφαλαιώσουμε, όταν γράφουμε τον JavaScript κώδικα απευθείας μέσα στον body ή το γράφουμε μέσα στο head (έστω και σαν εξωτερικό αρχείο) μπορεί να έχουμε προβλήματα στην ταχύτητα της εφαρμογής.
Η καλύτερη προσέγγιση, είναι να βάλουμε το JavaScript εξωτερικό αρχείο μέσα στο body αλλά μετά το τέλος του κειμένου.
Χρησιμοποιώντας αυτή την προσέγγιση, η σελίδα θα φορτωθεί πλήρως στον browser πριν φτάσουμε στην επεξεργασία του JavaScript κώδικα. Στον τελικό χρήστη, αυτή η διαδικασία φαίνεται γρηγορότερη συγκρινόμενη με τις υπόλοιπες δύο που έχουμε ήδη αναφέρει.
Ας δημιουργήσουμε ένα ακόμα JavaScript αρχείο με το όνομα mysecondscript.js και ας γράψουμε μέσα σε αυτό ένα απλό console.log( ) μήνυμα.
Ας καλέσουμε τώρα και τα δύο scripts μέσα στο HTML και ας το τρέξουμε για δούμε το αποτέλεσμα στον browser.
Το script στοιχείο ορίζει ένα attribute με το όνομα defer. Ο λόγος που ίσως θέλουμε να το προσθέσουμε στην HTML είναι γιατί θέλουμε να βεβαιωθούμε ότι πρώτα έχει διαβαστεί και φορτωθεί στον browser ολόκληρος ο HTML κώδικας της σελίδας και μετά θα ξεκινήσει η εκτέλεση. Αν και τα αρχεία μας είναι στο τέλος του body, προσθέτοντας το defer σιγουρεύουμε ότι πρώτα θα εκτελεστεί το HTML και μετά το JavaScript. Το attribute defer δεν εφαρμόζεται στα inline scripts αλλά μόνο όταν έχουμε εξωτερικά αρχεία. Το HTML specification λέει ότι τα εξωτερικά αρχεία JavaScript θα εκτελεστούν με την σειρά που έχουν οριστεί, αλλά αυτό μερικές φορές δεν συμβαίνει.
Επίσης υπάρχει και το async attribute το οποίο έχει την ίδια συμπεριφορά με το defer με την διαφορά ότι δεν υπάρχει εγγύηση στην σειρά που θα εκτελεστούν τα JavaScript εξωτερικά αρχεία. Αυτό μερικές φορές είναι χρήσιμο γιατί πρώτον η σελίδα θα φορτωθεί ολόκληρη και δεν χρειάζεται να περιμένουμε για τον JavaScript κώδικα να εκτελεστεί και κατά δεύτερον δεν χρειάζεται το δεύτερο JavaScript αρχείο να περιμένει το πρώτο να ολοκληρώσει την εκτέλεσή του για να ξεκινήσει.
ΕΙΣΗΓΗΤΗΣ
Μιχάλης Κασάπογλου
Ο Μιχάλης Κασάπογλου, είναι ένας από τους πιο έμπειρους τεχνικούς εκπαιδευτές στον χώρο του προγραμματισμού με πάνω από 20 χρόνια εμπειρία. Έχει εργαστεί σαν IT Operations Manager, Senior Programmer, και Training Team Leader ενώ κατέχει και αρκετές πιστοποιήσεις που καλύπτουν ένα μεγάλο φάσμα τεχνολογιών στο προγραμματισμό, σε βάσεις δεδομένων και cloud. Στον ελεύθερο του χρόνο διατηρεί ένα τεχνολογικό blog στο οποίο θα βρείτε αρκετά δωρεάν μαθήματα προγραμματισμού για αρχάριους.
