Jak połączyć JavaScript z HTML
JavaScript to bardzo popularny język skryptowy, który jest używany zarówno po stronie klienta, jak i na serwerze. JavaScript jest konieczne dla naszych stron internetowych, ponieważ sprawia, że nasza strona internetowa jest interaktywna.
Istnieją trzy podstawowe wymagania, aby zostać deweloperem front-end:
- Html,
- CSS,
- JavaScript
HTML jest skrócony dla języka znaczników hiper tekstu, który zapewnia strukturę naszej strony internetowej, a CSS daje styl naszym stronom. Wreszcie, JavaScript, jak wspomniano wcześniej. JavaScript pomaga również zmienić HTML i CSS.
Teraz pojawia się pytanie, jak możemy połączyć/połączyć JavaScript z HTML. Dzisiaj w tym artykule zbadamy prawie wszystkie sposoby połączenia JavaScript z HTML.
Co to jest znacznik scenariusza?
Przed przejściem do rozwiązania, jak połączyć JavaScript z HTML, spójrzmy na znacznik skryptu.
Tag służy do osadzania skryptów po stronie klienta, które są JavaScript. Ten znacznik ma elementy skryptowe lub odniesienia do innego pliku skryptu za pomocą atrybutu SRC.
Składnia
To jest znacznik skryptu z atrybutem SRC, w którym możemy podać nazwę pliku, którą chcemy odwołać.
Korzystanie z JavaScript w pliku HTML
Możemy połączyć JavaScript do HTML, dodając cały kod JavaScript w pliku HTML. Osiągamy to za pomocą znacznika skryptu, który został wyjaśniony wcześniej. Możemy umieścić znacznik w głowie HTML lub na końcu ciała. Od nas zależy, gdzie chcemy to umieścić, a kiedy chcemy załadować JavaScript. Programiści zwykle nazywają znacznik skryptu, gdy tylko chcą generować treść lub zastosować jakieś działanie. Patrząc na następujący kod, dobrą praktyką jest ładowanie JavaScript po korpusie HTML.
Spójrzmy na przykład:
Przykład
W tym przykładzie najpierw utworzyliśmy przycisk w HTML. Ustaliliśmy wydarzenie do kliknięcia. Za każdym razem, gdy użytkownik kliknie ten przycisk, myfunc () Funkcja zostanie aktywowana. Potem umieściliśmy etykietka. Cały kod JavaScript poszedł tutaj. Umieszczamy funkcję o nazwie myfunc (), w której pokazaliśmy alert.
Gratulacje! Pomyślnie połączyliśmy JavaScript z HTML, dodając kod JavaScript do znacznika skryptu.
Ta metoda jest dobra dla małych stron internetowych lub jednej strony internetowej. Jednak wraz z powiększaniem się aplikacji internetowej kod skryptu również będzie powiększony i będzie naprawdę trudny do obsługi, a także odczytania. Rozwiązaniem jest napisanie JavaScript w dedykowanym osobnym pliku JavaScript i podanie odniesienia do pliku JavaScript w pliku HTML.
Korzystanie z JavaScript w pliku zewnętrznym
Korzystanie z pliku zewnętrznego dla większych skryptów jest korzystne, ponieważ możemy podzielić nasz kod na różne strony JavaScript, a także w różnych plikach. Osiąga się to poprzez odniesienie nazwy pliku JavaScript w atrybucie „SRC” znacznika skryptu w pliku HTML.
Zmieńmy trochę poprzedniego przykładu. Kod pozostanie taki sam. Zrobimy kolejny plik JavaScript o nazwie „Kod.JS ”. Umieścimy cały kod JavaScript w „kodzie.plik js ”i podaj„ kod.odniesienie JS ”w pliku HTML.
Na przykład
Odnieśliśmy się do „kod.JS”Plik za pomocą atrybutu src of etykietka.
Teraz kod.JS plik:
funkcja myFunc ()alert („kliknąłeś mnie”);
Wynik będzie taki sam jak poprzedni przykład i-e.
Zalety zewnętrznego pliku JavaScript
Formalnie podajmy niektóre zalety po omówieniu zewnętrznego pliku JavaScript:
- Oddziela nasz kod HTML i kod JavaScript
- Kod JavaScript staje się czytelny, a także możliwy do utrzymania.
- Kolejną zaletą jest to, że buforowane pliki JavaScript działają w przyspieszaniu ładowania strony.
Selektory JavaScript
W poprzednich przykładach wzięliśmy pomoc w wydarzeniu. Załóżmy, że nie chcemy dodawać zdarzenia i chcemy wybrać element z pliku HTML. JavaScript pomaga nam, zapewniając różne opcje, które nazywane są selektorami JavaScript.
Selektory JavaScript Główną funkcją jest wybranie elementu HTML i wykonanie różnych działań zgodnie z naszymi potrzebami. JavaScript zapewnia różne opcje, jeden z nich to identyfikator.
Możemy podać element atrybut id w HTML, a następnie uzyskać dostęp do JavaScript. Dostępmy do JavaScript przez:
dokument.getElementById („Idname”);ID jest wyjątkowy i używany tylko dla jednego elementu.
JavaScript daje nam również opcję wyboru elementu za pomocą atrybutu klasowego. Możemy użyć nazwy klasy dla różnych elementów. Składnia to:
dokument.querySelelector (".Nazwa klasy");Inną opcją daje nam JavaScript, jest dostęp do elementów JavaScript przy użyciu nazw tagów. Składnia do dostępu do nazw tagów:
dokument.getElementsBaTagname („p”);
Przykład:
Html
JavaScript
const btn = dokument.getElementById („btn”);Btn.addEventListener („kliknij”, funkcja ()
alert („kliknąłeś mnie”);
)
W tym przykładzie uzyskaliśmy dostęp do elementu przycisku za pomocą getElementById (). Następnie umieszczamy zdarzenie, że za każdym razem, gdy użytkownik kliknie przycisk, należy wyświetlić ostrzeżenie.
Możemy osiągnąć to samo wyjście, jeśli używamy:
const btn = dokument.QuerySelelect („BTN”);Należy pamiętać, że musimy ustawić atrybut klasy w elemencie przycisku.
Wniosek
Łączenie JS z HTML sprawia, że Twoja witryna dynamiczna i interaktywna. W tym poście nauczyliśmy cię, jak połączyć JavaScript z HTML. Omówiliśmy dwa główne sposoby osiągnięcia tego zadania.
Pierwszy był używanie JavaScript w pliku HTML. Drugi używał JavaScript poza plikiem HTML za pomocą pliku JavaScript. Być deweloperem front-end, konieczne jest praca zarówno w HTML, jak i JavaScript, a ten artykuł pokazał, jak połączyć oba te.