Wewnętrzne i zewnętrzne JavaSkrypt: Ucz się na przykładzie
Jamesa Hartmana
⚡ Inteligentne podsumowanie
Wewnętrzny i zewnętrzny JavaSkrypt opisuje dwa obsługiwane sposoby rozmieszczenia kodu skryptu w projekcie internetowym. W tym artykule porównano oba podejścia, przedstawiono działające przykłady, wyjaśniono prawidłowe łączenie z async i defer oraz wskazano, kiedy każde z rozmieszczeń zapewnia lepszą konserwowalność i wydajność.
Czym jest wewnętrzne i zewnętrzne JavaScenariusz?
Możesz użyć JavaKod skryptowy można pisać na dwa sposoby.
- Możesz dołączyć JavaKod skryptu wewnętrznie w dokumencie HTML sama.
- Możesz zatrzymać JavaKod skryptu w oddzielny plik zewnętrzny a następnie wskaż ten plik w dokumencie HTML.
Oba te miejsca wykorzystują dokładnie ten sam język i generują ten sam wynik w przeglądarce. Różnica polega na tym, gdzie przechowywany jest kod źródłowy, w jaki sposób przeglądarka go pobiera oraz jak łatwo kod można ponownie wykorzystać i utrzymać w witrynie.
Co to jest Wewnętrzne JavaScenariusz?
Wewnętrzne JavaSkrypt to kod napisany bezpośrednio w parze znaczników skryptu w pliku HTML. Przeglądarka odczytuje znaczniki od góry do dołu i po dotarciu do znacznika skryptu natychmiast wykonuje polecenia, bez dodatkowych żądań sieciowych.
Do tej pory korzystaliśmy z wewnętrznego JS. Oto próbka –
<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>
Wyjście:
Today is Wednesday.
Wydrukowany dzień zmienia się w zależności od zegara systemowego odwiedzającego, ponieważ getDay zwraca liczbę od 0 dla niedzieli do 6 dla soboty, a liczba ta jest używana jako indeks w tablicy dni tygodnia.
Co jest zewnętrzne JavaScenariusz?
Planujesz wyświetlać aktualną datę i godzinę na wszystkich swoich stronach internetowych. Załóżmy, że napisałeś kod i skopiowałeś go na wszystkie swoje strony (powiedzmy 100). Ale później chcesz zmienić format wyświetlania daty lub godziny. W takim przypadku będziesz musiał wprowadzić zmiany na wszystkich 100 stronach. Będzie to bardzo czasochłonne i trudne zadanie.
Więc zapisz JAVASCRIPT kod w nowym pliku z rozszerzeniem .js. Następnie dodaj wiersz kodu na wszystkich swoich stronach internetowych, aby wskazywał plik .js w następujący sposób:
<script type="text/javascript" src="currentdetails.js"></script>
NoteZakłada się, że plik .js i wszystkie strony internetowe znajdują się w tym samym folderze. Jeśli plik external.js znajduje się w innym folderze, należy podać pełną ścieżkę do pliku w atrybucie src. </script> Tag jest obowiązkowy, nawet jeśli element nie ma żadnej zawartości, ponieważ samozamykający się tag script nie jest prawidłowym kodem HTML i reszta strony zostałaby wchłonięta przez niezakończony element.
Oto kod, który należy umieścić w pliku 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);
To jest Twój plik currentdetails.js. Nie przejmuj się długimi liniami kodu. Wkrótce nauczysz się kodować. Wprowadź zmiany w swoim dokumencie HTML w następujący sposób:
<html> <head> <title>My External JavaScript Code!!!</title> <script type="text/javascript" src="currentdetails.js"> </script> </head> <body> </body> </html>
⚠️ Ostrzeżenie: W powyższym skrypcie starszej generacji każda godzina jest poprzedzona zerem, więc 11 rano jest wyświetlana jako 011. Przypisuje on również hours1 Bez deklaracji, co tworzy niejawną zmienną globalną i zgłasza błąd w trybie ścisłym. Poprawiona wersja poniżej naprawia oba błędy.
Nowoczesna wersja tego samego pliku jest krótsza, deklaruje każdą zmienną i poprawnie uzupełnia wartości:
// 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;
Przykładowe dane wyjściowe:
Today is 29 - July - 2026. Current time is 09:05:07 AM.
Jak połączyć zewnętrzny JavaPlik skryptu poprawnie
O tym, czy plik zewnętrzny zostanie w ogóle załadowany, decydują trzy szczegóły: ścieżka zapisana w atrybucie src, pozycja znacznika skryptu w dokumencie i zastosowany do niego atrybut loading.
Ścieżki są rozwiązywane względem dokumentu HTML, chyba że podano ukośnik na początku lub pełny adres.
| Wartość src | Znaczenie | Uchwala się do |
|---|---|---|
| bieżące szczegóły.js | Ten sam folder co strona HTML | /strony/currentdetails.js |
| js/currentdetails.js | Podfolder bieżącego folderu | /strony/js/currentdetails.js |
| ../currentdetails.js | Jeden folder wyżej od bieżącego | /currentdetails.js |
| /zasoby/js/currentdetails.js | Ścieżka absolutna z katalogu głównego witryny | /zasoby/js/currentdetails.js |
Atrybut loading kontroluje, kiedy przeglądarka kończy parsowanie kodu HTML, aby uruchomić plik. Poniższa tabela podsumowuje trzy dostępne zachowania.
| Atrybut | Pobierz | Moment wykonania | Zamówienie zachowane |
|---|---|---|---|
| żaden | Blokuje parsowanie HTML | Zaraz po pobraniu | Tak |
| odraczać | Równolegle z analizą składniową | Po przeanalizowaniu dokumentu | Tak |
| async | Równolegle z analizą składniową | Gdy pobieranie się zakończy | Nie |
<!-- 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>
💡 Wskazówka: type="text/javascript" Atrybut jest opcjonalny w HTML5 i można go pominąć. Zachowaj go tylko wtedy, gdy obsługujesz bardzo stare przeglądarki, lub zastąp go atrybutem type="module" podczas korzystania z instrukcji importu i eksportu.
Wewnętrzne kontra zewnętrzne JavaScenariusz: Kluczowe różnice
Poniższe porównanie zestawia oba miejsca obok siebie, biorąc pod uwagę czynniki, które zazwyczaj decydują o wyborze.
| Czynnik | Wewnętrzne JavaScenariusz | Zewnętrzny JavaScenariusz |
|---|---|---|
| Miejsce przechowywania | Wewnątrz pliku HTML | Oddzielny plik z rozszerzeniem .js |
| Ponowne użycie na różnych stronach | Wymaga skopiowania na każdą stronę | Jeden plik, do którego odwołuje się każda strona |
| Buforowanie przeglądarki | Ponownie pobrano z każdą stroną | Zapisano w pamięci podręcznej raz i użyto ponownie |
| Wysiłek konserwacyjny | Wysoki, gdy kod jest współdzielony | Niska, jeden plik do edycji |
| Dodatkowe żądanie HTTP | Nie | Tak, jeden na plik |
| Debugowanie | Trudniej w przypadku długiego pliku HTML | Łatwiej dzięki wyraźnym nazwom plików i numerom wierszy |
| Najlepiej nadaje się do | Krótka logika specyficzna dla strony | Biblioteki współdzielone i długie skrypty |
Kiedy stosować wewnętrzne i zewnętrzne JavaScenariusz Code?
Jeśli masz tylko kilka linii kodu charakterystycznych dla konkretnej strony internetowej, lepiej zachować kod JavaSkryptuj kod wewnętrznie w swoim dokumencie HTML.
Z drugiej strony, jeśli twój JavaKod skryptu jest używany na wielu stronach internetowych, wtedy powinieneś rozważyć jego zachowanieping Twój kod w osobnym pliku. W takim przypadku, jeśli chcesz wprowadzić jakieś zmiany w kodzie, wystarczy zmienić tylko jeden plik, co ułatwia konserwację kodu. Jeśli kod jest zbyt długi, lepiej jest również przechowywać go w osobnym pliku. Ułatwia to debugowanie.
Praktyczną zasadą dla początkujących jest ograniczenie się do około dziesięciu wierszy. Wszystko, co krótsze i specyficzne dla danej strony, może pozostać w pliku wewnętrznym, natomiast wszystko, co dłuższe lub współdzielone, powinno znaleźć się w pliku zewnętrznym.
W linii JavaSkrypt i dlaczego należy go unikać
Trzecie miejsce występuje na starszych stronach, gdzie kod jest napisany bezpośrednio w atrybucie HTML. Chociaż nadal działa, łączy strukturę z zachowaniem i nie może być buforowany, ponownie używany ani objęty ścisłą polityką bezpieczeństwa treści.
<!-- 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>
Gdy już będziesz czuć się komfortowo, umieszczając skrypty, kontynuuj JavaMetody tablicowe skryptów, nauka zapętla się JavaScenariuszi przepracować praktyczny JavaPrzykłady kodu skryptuPliki zewnętrzne znacznie ułatwiają również zarządzanie logiką przechowywania danych w przeglądarce, np. ciasteczka w JavaScenariusz.
