Gdzie umieścić JavaScript w dokumencie HTML?
JavaScript w tagu
Ilekroć otwierana jest strona HTML, jest pierwszym załadowanym znacznikiem treści, co oznacza, że wszystkie dane w środku są ładowane przed tagiem. Jeśli JavaScript zostanie dodany do znacznika głowy, nie będzie czekać na pełne załadowanie strony internetowej i zostanie załadowany do pamięci przeglądarki. Aby to zademonstrować, utwórz podstawową stronę HTML, która zachęci użytkownika, gdy tylko zostanie załadowana do pamięci przeglądarki.
Weź następujący plik HTML:
Dokument
Jak widać, skrypt jest dodawany w etykietka. Jednak w znaczniku ciała ładowanie na stronie internetowej jest ładowany obraz 8k, którego załadowanie zajmie kilka chwil. Załaduj stronę HTML i wyjście:
Z tego wyjścia jasno wynika, że umieszczenie skryptu w przyczynach ładuje się nawet przed gotowym DOM.
JavaScript w tagu
Jak wspomniano powyżej, można umieścić JavaScript w etykietka. Umożliwi to DOM pełne załadowanie, a następnie załadowanie JavaScript zgodnie z jego pozycją w znaczniku.
Aby to zademonstrować, utworzymy przycisk na stronie HTML z następującymi wierszami i w funkcjonalności do tego przycisku z następującymi wierszami:
Dokument
W powyższym fragmencie kodu dodana jest słuchacz zdarzenia na przycisku, który ostrzega użytkownika po przycisku naciśnij wszystko za pomocą skryptu wewnątrz . Wykonaj ten plik HTML i obserwuj następujące dane wyjściowe:
Z powyższego wyjścia jasno wynika, że skrypt działa dobrze w znaczniku
JavaScript w tag lub tag
Aby odpowiedzieć na to pytanie, weź ostatni przykład i po prostu przenieś znacznik skryptu do ostrzegania użytkownika po przycisku Naciśnij w znacznik:
Dokument
Po wykonaniu w tym programie różnica nie jest widoczna, ponieważ wyjście wygląda jak następujące:
Jednak otwarcie konsoli przeglądarki pokazuje różnicę, ponieważ w konsoli występuje ten błąd:
Ten błąd jest spowodowany przez JavaScript próbującą uzyskać odniesienie elementu z znacznika ciała, który nie został jeszcze zainicjowany przez DOM, ponieważ JavaScript w znaczniku głowy wykonywano jeszcze przed pełnym załadowaniem DOM.
Podsumowując, umieszczenie skryptu w znaczniku głowy lub znaczniku ciała sprowadza się do działania strony internetowej.
Zakończyć
JavaScript można umieścić w dwóch różnych miejscach w pliku dokumentu HTML w tag lub w etykietka. Umieszczenie JavaScript w znaczniku głowy powoduje, że przeglądarka ładuje skrypt, zanim DOM będzie w pełni gotowy. Podczas gdy włączenie JavaScript do Ładuje skrypt po przygotowaniu DOM. Z tego powodu nie ma optymalnego miejsca do włączenia JavaScript do dokumentu HTML i zależy to od zadania, które chce się wykonać.