Εσωτερικές εξωτερικές JavaΣενάριο: Learn with Example
Τζέιμς Χάρτμαν
⚡ Έξυπνη Σύνοψη
Εσωτερικός και εξωτερικός JavaΤο σενάριο περιγράφει τις δύο υποστηριζόμενες τοποθετήσεις για κώδικα σεναρίου μέσα σε ένα διαδικτυακό έργο. Αυτό το άρθρο συγκρίνει και τις δύο προσεγγίσεις, παρουσιάζει παραδείγματα λειτουργίας, εξηγεί τη σωστή σύνδεση με ασύγχρονες και αναβαλλόμενες λειτουργίες και αναφέρει πότε κάθε τοποθέτηση προσφέρει καλύτερη συντηρησιμότητα και απόδοση.
Τι είναι οι Εσωτερικοί και οι Εξωτερικοί JavaΓραφή;
Μπορείς να χρησιμοποιήσεις JavaΚώδικα σεναρίου με δύο τρόπους.
- Μπορείτε είτε να συμπεριλάβετε το JavaΚωδικός σεναρίου εσωτερικά μέσα στο έγγραφο HTML σας Itself.
- Μπορείτε να κρατήσετε το JavaΚωδικός σεναρίου σε ένα ξεχωριστό εξωτερικό αρχείο και μετά τοποθετήστε το δείκτη του ποντικιού σε αυτό το αρχείο από το έγγραφό σας HTML.
Και οι δύο τοποθετήσεις εκτελούν ακριβώς την ίδια γλώσσα και παράγουν το ίδιο αποτέλεσμα στο πρόγραμμα περιήγησης. Η διαφορά έγκειται στο πού αποθηκεύεται ο πηγαίος κώδικας, στον τρόπο με τον οποίο τον κατεβάζει το πρόγραμμα περιήγησης και στο πόσο εύκολα μπορεί να επαναχρησιμοποιηθεί και να συντηρηθεί ο κώδικας σε έναν ιστότοπο.
Τι είναι Εσωτερικό JavaΓραφή;
Εσωτερικός JavaΤο script είναι κώδικας γραμμένος απευθείας μέσα σε ένα ζεύγος ετικετών script στο αρχείο HTML. Το πρόγραμμα περιήγησης διαβάζει την σήμανση από πάνω προς τα κάτω και όταν φτάσει στην ετικέτα script, εκτελεί τις εντολές αμέσως, χωρίς επιπλέον αίτημα δικτύου.
Χρησιμοποιούμε το Internal JS μέχρι στιγμής. Εδώ είναι ένα δείγμα -
<html>
<head>
<title>My First JavaScript code!!!</title>
<script type="text/javascript">
// Create a Date Object
var day = new Date();
// Use getDay function to obtain todays Day.
// getDay() method returns the day of the week as a number like 0 for Sunday, 1 for Monday,….., 5
// This value is stored in today variable
var today = day.getDay();
// To get the name of the day as Sunday, Monday or Saturday, we have created an array named weekday and stored the values
var weekday = new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
// weekday[today] will return the day of the week as we want
document.write("Today is " + weekday[today] + ".");
</script>
</head>
<body>
</body>
</html>
Παραγωγή:
Today is Wednesday.
Η εκτυπωμένη ημέρα αλλάζει με το ρολόι συστήματος του επισκέπτη, επειδή η συνάρτηση getDay επιστρέφει έναν αριθμό από το 0 για την Κυριακή έως το 6 για το Σάββατο και αυτός ο αριθμός χρησιμοποιείται ως δείκτης στον πίνακα ημερών της εβδομάδας.
Τι είναι Εξωτερικό JavaΓραφή;
Σχεδιάζετε να εμφανίζετε την τρέχουσα ημερομηνία και ώρα σε όλες τις ιστοσελίδες σας. Ας υποθέσουμε ότι γράψατε τον κώδικα και τον αντιγράψατε σε όλες τις ιστοσελίδες σας (ας πούμε 100). Αλλά αργότερα, θέλετε να αλλάξετε τη μορφή με την οποία εμφανίζεται η ημερομηνία ή η ώρα. Σε αυτήν την περίπτωση, θα πρέπει να κάνετε αλλαγές και στις 100 ιστοσελίδες. Αυτή θα είναι μια πολύ χρονοβόρα και δύσκολη εργασία.
Έτσι, σώστε το JavaΓραφή κώδικα σε νέο αρχείο με επέκταση .js. Στη συνέχεια, προσθέστε μια γραμμή κώδικα σε όλες τις ιστοσελίδες σας για να οδηγείτε στο αρχείο σας .js ως εξής:
<script type="text/javascript" src="currentdetails.js"></script>
ΣημείωσηΥποτίθεται ότι το αρχείο .js και όλες οι ιστοσελίδες σας βρίσκονται στον ίδιο φάκελο. Εάν το αρχείο external.js βρίσκεται σε διαφορετικό φάκελο, πρέπει να καθορίσετε την πλήρη διαδρομή προς το αρχείο σας στο χαρακτηριστικό src. Το κλείσιμο </script> Η ετικέτα είναι υποχρεωτική παρόλο που το στοιχείο δεν έχει περιεχόμενο, επειδή μια ετικέτα script που κλείνει αυτόματα δεν είναι έγκυρη HTML και η υπόλοιπη σελίδα θα καταληφθεί από το μη τερματισμένο στοιχείο.
Αυτός είναι ο κώδικας που τοποθετείτε μέσα στο currentdetails.js:
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var monthName;
var hours = currentDate.getHours();
var mins = currentDate.getMinutes();
var secs = currentDate.getSeconds();
var strToAppend;
if (hours >12 )
{
hours1 = "0" + (hours - 12);
strToAppend = "PM";
}
else if (hours <12)
{
hours1 = "0" + hours;
strToAppend = "AM";
}
else
{
hours1 = hours;
strToAppend = "PM";
}
if(mins<10)
mins = "0" + mins;
if (secs<10)
secs = "0" + secs;
switch (month)
{
case 1:
monthName = "January";
break;
case 2:
monthName = "February";
break;
case 3:
monthName = "March";
break;
case 4:
monthName = "April";
break;
case 5:
monthName = "May";
break;
case 6:
monthName = "June";
break;
case 7:
monthName = "July";
break;
case 8:
monthName = "August";
break;
case 9:
monthName = "September";
break;
case 10:
monthName = "October";
break;
case 11:
monthName = "November";
break;
case 12:
monthName = "December";
break;
}
var year = currentDate.getFullYear();
var myString;
myString = "Today is " + day + " - " + monthName + " - " + year + ".<br />Current time is " + hours1 + ":" + mins + ":" + secs + " " + strToAppend + ".";
document.write(myString);
Αυτό είναι το τρέχον αρχείο details.js. Μην ανησυχείτε που βλέπετε μεγάλες γραμμές κώδικα. Σύντομα θα μάθετε να προγραμματίζετε. Κάντε αλλαγές στο έγγραφο HTML σας ως εξής:
<html> <head> <title>My External JavaScript Code!!!</title> <script type="text/javascript" src="currentdetails.js"> </script> </head> <body> </body> </html>
⚠️ Προειδοποίηση: Το παλαιότερο σενάριο παραπάνω προτάσσει κάθε ώρα με μηδέν, επομένως η ώρα 11 το πρωί εμφανίζεται ως 011. Επίσης, αντιστοιχίζει hours1 χωρίς να το δηλώσει, κάτι που δημιουργεί μια έμμεση καθολική μεταβλητή και εμφανίζει σφάλμα σε αυστηρή λειτουργία. Η διορθωμένη έκδοση παρακάτω διορθώνει και τα δύο ελαττώματα.
Μια σύγχρονη επανεγγραφή του ίδιου αρχείου είναι συντομότερη, δηλώνει κάθε μεταβλητή και συμπληρώνει σωστά τις τιμές:
// currentdetails.js - corrected modern version const now = new Date(); const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; const hours24 = now.getHours(); const suffix = hours24 >= 12 ? "PM" : "AM"; const hours12 = String(hours24 % 12 || 12).padStart(2, "0"); const mins = String(now.getMinutes()).padStart(2, "0"); const secs = String(now.getSeconds()).padStart(2, "0"); const message = "Today is " + now.getDate() + " - " + months[now.getMonth()] + " - " + now.getFullYear() + ". Current time is " + hours12 + ":" + mins + ":" + secs + " " + suffix + "."; document.getElementById("stamp").textContent = message;
Δείγμα εξόδου:
Today is 29 - July - 2026. Current time is 09:05:07 AM.
Πώς να συνδέσετε ένα εξωτερικό JavaΣωστό αρχείο σεναρίου
Τρεις λεπτομέρειες καθορίζουν εάν ένα εξωτερικό αρχείο φορτώνει καθόλου: η διαδρομή που έχει γραφτεί στο χαρακτηριστικό src, η θέση της ετικέτας script στο έγγραφο και το χαρακτηριστικό loading που εφαρμόζεται σε αυτό.
Οι διαδρομές επιλύονται σε σχέση με το έγγραφο HTML, εκτός εάν παρέχεται μια αρχική κάθετος ή μια πλήρης διεύθυνση.
| Τιμή src | Νόημα | Αποφασίζει να |
|---|---|---|
| currentdetails.js | Ίδιος φάκελος με τη σελίδα HTML | /pages/currentdetails.js |
| js/τρέχουσες λεπτομέρειες.js | Υποφάκελος του τρέχοντος φακέλου | /pages/js/currentdetails.js |
| ../currentdetails.js | Ένας φάκελος πάνω από τον τρέχοντα | /currentdetails.js |
| /assets/js/currentdetails.js | Απόλυτη διαδρομή από τη ρίζα του ιστότοπου | /assets/js/currentdetails.js |
Το χαρακτηριστικό φόρτωσης ελέγχει πότε το πρόγραμμα περιήγησης σταματά την ανάλυση HTML για την εκτέλεση του αρχείου. Ο παρακάτω πίνακας συνοψίζει τις τρεις διαθέσιμες συμπεριφορές.
| Χαρακτηριστικό | Λήψη | Στιγμή Εκτέλεσης | Η παραγγελία διατηρήθηκε |
|---|---|---|---|
| Ν/Α | Αποκλείει την ανάλυση HTML | Αμέσως μετά τη λήψη | Ναι |
| αναβάλλω | Παράλληλα με την ανάλυση | Μετά την ανάλυση του εγγράφου | Ναι |
| Async | Παράλληλα με την ανάλυση | Μόλις ολοκληρωθεί η λήψη | Οχι |
<!-- Recommended for scripts that read the DOM --> <script src="js/currentdetails.js" defer></script> <!-- Recommended for independent third party scripts --> <script src="js/analytics.js" async></script> <!-- Modern module syntax, deferred by default --> <script type="module" src="js/app.js"></script>
💡 Συμβουλές: The type="text/javascript" Το χαρακτηριστικό είναι προαιρετικό στην HTML5 και μπορεί να παραλειφθεί. Διατηρήστε το μόνο όταν υποστηρίζονται πολύ παλιά προγράμματα περιήγησης ή αντικαταστήστε το με type="module" όταν χρησιμοποιείτε εντολές εισαγωγής και εξαγωγής.
Εσωτερικό vs Εξωτερικό JavaΣενάριο: Βασικές διαφορές
Η παρακάτω σύγκριση παρουσιάζει και τις δύο τοποθετήσεις δίπλα-δίπλα, λαμβάνοντας υπόψη τους παράγοντες που συνήθως καθορίζουν την επιλογή.
| Παράγοντας | Εσωτερικός JavaΓραφή | Εξωτερικός JavaΓραφή |
|---|---|---|
| Τοποθεσία αποθήκευσης | Μέσα στο αρχείο HTML | Ξεχωριστό αρχείο με επέκταση .js |
| Επαναχρησιμοποίηση σε όλες τις σελίδες | Απαιτείται αντιγραφή σε κάθε σελίδα | Ένα αρχείο που αναφέρεται από κάθε σελίδα |
| Κλιμάκωση προγράμματος περιήγησης | Επαναφόρτωση με κάθε σελίδα | Αποθηκεύτηκε στην προσωρινή μνήμη μία φορά και επαναχρησιμοποιήθηκε |
| Προσπάθεια συντήρησης | Υψηλό όταν ο κώδικας είναι κοινόχρηστος | Χαμηλό, ένα αρχείο για επεξεργασία |
| Επιπλέον αίτημα HTTP | Οχι | Ναι, ένα ανά αρχείο |
| Debugging | Δυσκολότερο σε ένα μεγάλο αρχείο HTML | Ευκολότερα με σαφή ονόματα αρχείων και αριθμούς γραμμών |
| καλυτερα suited for | Σύντομη λογική για συγκεκριμένες σελίδες | Κοινόχρηστες βιβλιοθήκες και μεγάλα σενάρια |
Πότε να χρησιμοποιείτε το εσωτερικό και το εξωτερικό JavaΓραφή Code?
Εάν έχετε μόνο λίγες γραμμές κώδικα που είναι συγκεκριμένος για μια συγκεκριμένη ιστοσελίδα, τότε είναι προτιμότερο να διατηρήσετε τη δική σας JavaΔημιουργήστε κώδικα σεναρίου εσωτερικά μέσα στο έγγραφό σας HTML.
Από την άλλη πλευρά, εάν σας JavaΟ κώδικας σεναρίου χρησιμοποιείται σε πολλές ιστοσελίδες, τότε θα πρέπει να λάβετε υπόψη το keeping τον κώδικά σας σε ξεχωριστό αρχείο. Σε αυτήν την περίπτωση, εάν θέλετε να κάνετε κάποιες αλλαγές στον κώδικά σας, χρειάζεται μόνο να αλλάξετε μόνο ένα αρχείο, κάτι που διευκολύνει τη συντήρηση του κώδικα. Εάν ο κώδικάς σας είναι πολύ μεγάλος, τότε είναι επίσης καλύτερο να τον φυλάξετε σε ξεχωριστό αρχείο. Αυτό βοηθά στην εύκολη αποσφαλμάτωση.
Ένας πρακτικός κανόνας για αρχάριους είναι ένα όριο περίπου δέκα γραμμών. Οτιδήποτε μικρότερο και συγκεκριμένο για μια σελίδα μπορεί να παραμείνει εσωτερικό, ενώ οτιδήποτε μεγαλύτερο ή κοινόχρηστο ανήκει σε ένα εξωτερικό αρχείο.
Στη γραμμή JavaΣενάριο και γιατί πρέπει να αποφεύγεται
Μια τρίτη τοποθέτηση υπάρχει σε παλαιότερες σελίδες, όπου ο κώδικας γράφεται απευθείας μέσα σε ένα χαρακτηριστικό HTML. Παρόλο που εξακολουθεί να εκτελείται, συνδυάζει τη δομή με τη συμπεριφορά και δεν μπορεί να αποθηκευτεί στην προσωρινή μνήμη, να επαναχρησιμοποιηθεί ή να καλυφθεί από μια αυστηρή πολιτική ασφάλειας περιεχομένου.
<!-- Inline handler: works, but avoid it --> <button onclick="alert('Clicked')">Click me</button> <!-- Preferred: behaviour attached from a script --> <button id="greet">Click me</button> <script> document.getElementById("greet").addEventListener("click", () => { alert("Clicked"); }); </script>
Μόλις εξοικειωθείτε με την τοποθέτηση σεναρίων, συνεχίστε με JavaΜέθοδοι πίνακα σεναρίων, μελέτη βρόχους μέσα JavaΓραφήκαι επεξεργαστείτε το πρακτικός JavaΠαραδείγματα κώδικα σεναρίουΤα εξωτερικά αρχεία διευκολύνουν επίσης πολύ τη διαχείριση της λογικής αποθήκευσης του προγράμματος περιήγησης, όπως π.χ. μπισκότα σε JavaΓραφή.
