Wprowadzenie
JavaScript nie wymaga przedstawiania. Jest to jeden z najpopularniejszych języków programowania do tworzenia stron internetowych. Działa podobnie do HTML i CSS. Wszystkie te języki pomagają projektować i tworzyć aplikacje oraz programy internetowe.
Jak więc konkretnie przydaje się JavaScript? Z pomocą JavaScript możesz uczynić swoje aplikacje i strony internetowe całkiem interaktywnymi. We współczesnym świecie nie ma miejsca na samozadowolenie. Musisz przyciągnąć uwagę widzów w ciągu pierwszych kilku sekund i utrzymać ich zaangażowanie. Nie ma wątpliwości, że ciekawy i responsywny projekt strony internetowej to jeden z najlepszych sposobów, aby to osiągnąć. Na szczęście większość przeglądarek obsługuje JavaScript. Może być on uruchamiany w przeglądarce za pomocą wbudowanych silników.
Dodawanie JavaScript do HTML
Jeśli chcesz używać plików JavaScript w swojej aplikacji internetowej, musisz uruchamiać je równolegle ze znacznikiem HTML. Istnieją dwa sposoby na dodanie JavaScript do HTML. Jednym z podejść jest zrobienie tego bezpośrednio (inline) w dokumencie HTML. Drugim sposobem jest dodanie go jako osobnego pliku. Plik ten zostanie pobrany wraz z dokumentem HTML.
W tym samouczku szczegółowo zbadamy, jak można dodać JavaScript do HTML za pomocą tych dwóch metod.
Jak dodać JavaScript do dokumentów HTML bezpośrednio (inline)
Najpierw zobaczymy, jak można dodać JavaScript do dokumentu HTML bezpośrednio (inline). Aby to zrobić, musisz użyć dedykowanego znacznika HTML. Jest to <script>. Ten znacznik otacza kod JavaScript. Możesz umieścić ten znacznik w dowolnym miejscu w całym znaczniku HTML. To, gdzie go umieścisz, zależy od tego, kiedy chcesz, aby JavaScript się załadował.
Na przykład możesz umieścić go w sekcji <head>, sekcji <body>, a nawet po znaczniku zamykającym </body>. Jeśli chcesz trzymać JavaScript z dala od głównej zawartości kodu HTML, lepiej umieścić ten znacznik w sekcji <head>. Będzie on zawierał kod JavaScript. Z drugiej strony, możesz chcieć, aby Twój kod JavaScript działał wewnątrz układu strony internetowej. W takim przypadku należy umieścić znacznik w sekcji <body>. Zrobisz to, jeśli na przykład używasz document.write do generowania zawartości.
Lepszym sposobem na zrozumienie tego będzie przykład z kodem. Rozważ następujący pusty dokument HTML. Tytuł tego dokumentu w przeglądarce to Dzisiejsza data:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dzisiejsza data</title> </head> <body> </body> </html> |
Jak widać, nie ma tu śladu JavaScript. Dokument zawiera na razie tylko znacznik HTML. Teraz chcielibyśmy dodać trochę kodu JavaScript bezpośrednio (inline), aby ładował się i uruchamiał jednocześnie. Rozważ następujący fragment kodu JavaScript:
|
1 2 |
let d = new Date(); alert("Dzisiejsza data to " + d); |
Zgodnie z powyższym kodem, umożliwiamy naszej stronie internetowej wyświetlanie alertu z dzisiejszą datą. Bez względu na to, kiedy użytkownik odwiedzi stronę, wyświetli ona aktualną datę.
Teraz, aby dodać ten fragment kodu JavaScript do dokumentu HTML, użyjemy znacznika <script>. Przede wszystkim musisz dodać kod JavaScript pomiędzy znacznikami <head>. Informuje to stronę internetową, że ten konkretny kod musi zostać załadowany przed pozostałą zawartością strony. Możesz dodać ten kod pod znacznikami <title>. Oto jak to zrobić:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dzisiejsza data</title> <script> let d = new Date(); alert("Dzisiejsza data to " + d); </script> </head> <body> </body> </html> |
Twój kod JavaScript został dodany. Twoja strona internetowa uruchomi się i załaduje ten skrypt przed resztą strony. Po uruchomieniu witryny otrzymasz powiadomienie z bieżącą datą, coś w tym stylu:
W ten sposób dodaje się kod do sekcji <head> dokumentu HTML. Alternatywą byłoby dodanie skryptu wewnątrz lub na zewnątrz znaczników <body>. Jak zobaczysz w poniższym przykładzie, dodamy ten fragment kodu po sekcji <head>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dzisiejsza data</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>Dzisiejsza data to " + d + "</h1>" </script> </body> </html> |
W wyniku tej modyfikacji po ponownym załadowaniu strony zobaczysz coś takiego:
Jak dodać JavaScript do HTML za pomocą osobnego pliku JavaScript
Małe skrypty JavaScript dobrze współpracują z plikami HTML. Dzieje się tak, ponieważ działają one w całości na jednej stronie lub nawet na mniejszym obszarze. Jeśli pracujesz z większymi skryptami, które obejmują wiele stron, plik może stać się bardzo trudny do zrozumienia. Dlatego może być konieczne dodanie go jako osobnego pliku JavaScript. Plik ten ładowałby się jednocześnie z dokumentem HTML.
W tej sekcji omówimy, jak można dodać JavaScript do HTML przy użyciu osobnego pliku. Kod jest zazwyczaj umieszczany w jednym lub kilku plikach .js. Dokument HTML będzie odwoływał się do tych plików jak do każdego innego zewnętrznego zasobu. Powodów, dla których warto użyć całkowicie osobnego pliku JavaScript, jest wiele. Przede wszystkim sprawia to, że kod jest znacznie łatwiejszy do odczytania i zrozumienia. Nie wspominając o tym, że osobne pliki pozwalają na szybkie ładowanie stron z pamięci podręcznej i są stosunkowo łatwiejsze w utrzymaniu.
Aby skorzystać z tych zalet, musisz wiedzieć, jak połączyć je ze sobą – plik JavaScript i dokument HTML. Aby pomóc Ci to zrozumieć, weźmiemy za przykład mały projekt internetowy. Ten rzekomy projekt zawiera główny plik index.html w katalogu głównym, style.css w katalogu css/ oraz script.js w katalogu js/. Oto nasz mały projekt:
|
1 2 3 4 5 6 7 8 9 10 11 |
projekt/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
W przypadku naszego znacznika HTML użyjemy dokumentu, którego użyliśmy wcześniej:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dzisiejsza data</title> </head> <body> </body> </html> |
Skoro mamy już nasze dwa dokumenty, możemy zacząć je łączyć. Musimy dodać kod JavaScript dotyczący daty do pliku script.js. Dodasz go jako nagłówek <h1> w następujący sposób:
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>Dzisiejsza data to " + d + "</h1>" |
Aby połączyć kod z dokumentem HTML, dodasz odwołanie do skryptu. Odwołanie powinno znajdować się wewnątrz sekcji <body> szablonu HTML lub pod nią. Oto kod, którego tutaj użyjesz:
|
1 |
<script src="js/script.js"></script> |
Jak widzisz, używamy znacznika <script>. Znacznik ten wskazuje na plik script.js, który znajduje się w katalogu js/ projektu. Oto jak kod będzie wyglądał w dokumencie HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dzisiejsza data</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
Jeśli chcesz, możesz wprowadzić pewne modyfikacje stylistyczne, aby upiększyć swoją stronę. Na przykład dodajmy kolor tła do nagłówka <h1>. Dokonamy tej edycji w pliku style.css:
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
Ponieważ edycja ma być widoczna w nagłówku, odwołamy się do niej w sekcji <head> dokumentu HTML. Oto jak utworzysz odwołanie do tego pliku CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dzisiejsza data</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
Teraz, gdy wprowadziliśmy wymagane odwołania, możesz zobaczyć zmiany. Załaduj plik index.html w swojej przeglądarce, a zobaczysz stronę taką jak ta:
Jeśli chcesz zaktualizować kod, możesz edytować wszystkie swoje strony z jednego miejsca. Sprawia to, że utrzymanie stron internetowych jest bardzo łatwe. To właśnie jest zaleta korzystania z osobnego pliku dla skryptów JavaScript.
Podsumowanie
Mamy nadzieję, że ten poradnik pomógł Ci dowiedzieć się więcej o procesie dodawania kodu JavaScript do HTML. Omówiliśmy, jak to zrobić bezpośrednio w dokumencie HTML (inline), a także jak dodać go jako plik .js. Skoro znasz już podstawy, możesz zrobić o wiele więcej z JavaScript w HTML.
Oto kilka zasobów z naszego bloga, które pomogą Ci w dalszym korzystaniu z JavaScript:
- Jeśli budujesz własną aplikację internetową, zapoznaj się z naszym przewodnikiem, jak wybrać najlepszą konfigurację serwera.
- Jeśli chcesz dowiedzieć się, jak założyć bloga za pomocą Ghost, zapoznaj się z tym poradnikiem.
- Zapoznaj się z tym poradnikiem, aby dowiedzieć się, jak zainstalować Node.js na Ubuntu 18.04.
Miłego kodowania!
Komentarze
Brak komentarzy. Bądź pierwszy.