W tym poradniku dowiesz się, jak włączyć JavaScript do dokumentu HTML.
Working with Client-side Script
Skryptowanie po stronie klienta odnosi się do rodzaju programów komputerowych, które są wykonywane przez przeglądarkę internetową użytkownika. JavaScript (JS) jest najpopularniejszym językiem skryptowym po stronie klienta w sieci.
Element <script> jest używany do osadzania lub odwoływania się do JavaScript w dokumencie HTML, aby dodać interaktywność do stron internetowych i zapewnić znacznie lepsze wrażenia użytkownika.
Kilka najczęstszych zastosowań JavaScript to sprawdzanie poprawności formularzy, generowanie komunikatów alarmowych, tworzenie galerii obrazów, pokazywanie ukrytej zawartości, manipulowanie DOM i wiele innych.
Dodawanie JavaScript do stron HTML
JavaScript może być osadzony bezpośrednio na stronie HTML lub umieszczony w zewnętrznym pliku skryptu i odwołuje się do niego na stronie HTML. Obie metody używają elementu <script>.
Zagnieżdżanie JavaScript
Aby osadzić JavaScript w pliku HTML, wystarczy dodać kod jako zawartość elementu <script>.
Skrypt w poniższym przykładzie zapisuje ciąg tekstu na stronie internetowej.
Przykład
Wypróbuj ten kod ”
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Embedding JavaScript</title></head><body> <div></div> <script> document.getElementById("greet").innerHTML = "Hello World!"; </script></body></html>Porada: Najlepiej, aby elementy skryptu były umieszczane na dole strony, przed zamykającym znacznikiem body tj. </body>, ponieważ gdy przeglądarka napotka skrypt, wstrzymuje renderowanie reszty strony do czasu przetworzenia skryptu, co może znacząco wpłynąć na wydajność witryny.
Wywołanie zewnętrznego pliku JavaScript
Możesz również umieścić swój kod JavaScript w osobnym pliku (z rozszerzeniem .js), i wywołać ten plik w swoim dokumencie HTML poprzez atrybut src znacznika <script>.
Jest to przydatne, jeśli chcesz, aby ten sam skrypt był dostępny dla wielu dokumentów. Oszczędza to powtarzania tego samego zadania w kółko i sprawia, że witryna jest łatwiejsza w utrzymaniu.
Następujący przykład demonstruje, jak połączyć zewnętrzny plik JS w HTML.
Przykład
Wypróbuj ten kod ”
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Linking External JavaScript</title></head><body> <div></div> <script src="hello.js"></script></body></html>Uwaga: Gdy określony jest atrybut src, element <script> musi być pusty. Oznacza to po prostu, że nie można używać tego samego elementu <script> zarówno do osadzania skryptu JavaScript, jak i do linkowania do zewnętrznego pliku JavaScript w dokumencie HTML.
Porada: Pliki JavaScript to zwykłe pliki tekstowe z rozszerzeniem .js, takie jak „hello.js”. Ponadto, zewnętrzny plik JavaScript zawiera tylko instrukcje JavaScript; nie zawiera elementu <script>...</script> jak osadzony JavaScript.
Element HTML noscript
Element <noscript> jest używany do zapewnienia alternatywnej zawartości dla użytkowników, którzy albo wyłączyli JavaScript w przeglądarce, albo mają przeglądarkę, która nie obsługuje skryptów po stronie klienta.
Ten element może zawierać dowolne elementy HTML, oprócz <script>, które mogą być zawarte w elemencie <body> normalnej strony HTML. Sprawdźmy przykład:
Przykład
Wypróbuj ten kod ”
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Noscript Demo</title> </head><body> <div></div> <script> document.getElementById("greet").innerHTML = "Hello World!"; </script> <noscript> <p>Oops! This website requires a JavaScript-enabled browser.</p> </noscript></body></html>Uwaga: Zawartość wewnątrz elementu noscript zostanie wyświetlona tylko wtedy, gdy przeglądarka użytkownika nie obsługuje skryptów lub skryptowanie jest wyłączone w przeglądarce.