Jak oddzielić JavaScript na swojej stronie internetowej

Kiedy piszesz nowy JavaScript, najprostszym sposobem na jego skonfigurowanie jest osadzenie kodu JavaScript bezpośrednio na stronie internetowej, aby wszystko było w jednym miejscu podczas testowania, aby działało dobrze. Podobnie, jeśli wstawiasz wstępnie napisany skrypt na swoją stronę, instrukcje mogą nakazać Ci osadzenie części lub całego skryptu na samej stronie internetowej.

Jest to w porządku, jeśli chodzi o konfigurację strony i zapewnienie jej prawidłowego działania, ale gdy strona zacznie działać tak, jak chcesz, będziesz w stanie ulepszyć stronę, wyodrębniając JavaScript do zewnętrznego pliku, aby zawartość strony w HTML nie była tak zaśmiecona elementami, które nie zawierają treści, takie jak JavaScript.

Jeśli po prostu skopiujesz i użyjesz skryptów JavaScript napisanych przez inne osoby, ich instrukcje dotyczące dodawania ich skryptów do strony mogą spowodować, że będziesz mieć jedną lub więcej dużych sekcji JavaScript faktycznie jest osadzony na twojej stronie internetowej, a ich instrukcje nie mówią, jak przenieść ten kod ze strony do osobnego pliku i nadal mieć JavaScript praca. Nie martw się, ponieważ niezależnie od tego, jakiego kodu JavaScript używasz na swojej stronie, możesz łatwo przenieść JavaScript ze strony i skonfiguruj go jako osobny plik (lub pliki, jeśli na stronie jest osadzony więcej niż jeden kawałek JavaScript). Proces ten jest zawsze taki sam i najlepiej ilustrowany przykładem.

Zobaczmy, jak może wyglądać fragment JavaScript po umieszczeniu na stronie. Rzeczywisty kod JavaScript będzie inny niż ten pokazany w poniższych przykładach, ale proces jest taki sam w każdym przypadku.

Wbudowany JavaScript powinien wyglądać podobnie do jednego z trzech powyższych przykładów. Oczywiście rzeczywisty kod JavaScript będzie inny niż pokazany, ale JavaScript prawdopodobnie zostanie osadzony na stronie przy użyciu jednej z trzech powyższych metod. W niektórych przypadkach kod może wykorzystywać nieaktualne language = "javascript" zamiast type = "text / javascript" w takim przypadku możesz na początek zaktualizować kod, zastępując atrybut języka typem jeden.

Aby wyodrębnić JavaScript do własnego pliku, musisz najpierw zidentyfikować kod do wyodrębnienia. We wszystkich trzech powyższych przykładach do wyodrębnienia są dwa wiersze rzeczywistego kodu JavaScript. Twój skrypt będzie prawdopodobnie zawierał o wiele więcej wierszy, ale można go łatwo zidentyfikować, ponieważ zajmie to samo miejsce na Twojej stronie, co dwa wiersze JavaScript, które my zostały wyróżnione w powyższych trzech przykładach (wszystkie trzy przykłady zawierają te same dwa wiersze JavaScript, tylko pojemnik wokół nich jest lekko różne).

1. Pierwszą rzeczą, którą musisz zrobić, aby wyodrębnić JavaScript do osobnego pliku, jest otwarcie edytora zwykłego tekstu i uzyskanie dostępu do zawartości strony internetowej. Następnie musisz zlokalizować osadzony JavaScript, który będzie otoczony jedną z odmian kodu pokazanych w powyższych przykładach.
2. Po zlokalizowaniu kodu JavaScript musisz go wybrać i skopiować do schowka. W powyższym przykładzie zaznaczony kod jest podświetlony, nie trzeba wybierać znaczników skryptu ani opcjonalnych komentarzy, które mogą pojawić się wokół kodu JavaScript.
3. Otwórz kolejną kopię edytora zwykłego tekstu (lub inną kartę, jeśli edytor obsługuje otwieranie więcej niż jednego pliku na raz) i wklej tam zawartość JavaScript.
4. Wybierz opisową nazwę pliku, której chcesz użyć dla nowego pliku, i zapisz nową zawartość, używając tej nazwy pliku. W przypadku przykładowego kodu celem skryptu jest wyrwanie się z ramek, aby można było podać odpowiednią nazwę framebreak.js.
5. Więc teraz mamy JavaScript w osobnym pliku, wracamy do edytora, gdzie mamy oryginalną treść strony, aby wprowadzić tam zmiany, aby połączyć się z zewnętrzną kopią skryptu.
6. Ponieważ mamy teraz skrypt w osobnym pliku, możemy usunąć wszystko między znacznikami skryptu w naszej oryginalnej treści, aby plik etykietka.
7. Ostatnim krokiem jest dodanie dodatkowego atrybutu do znacznika skryptu określającego, gdzie może znaleźć zewnętrzny JavaScript. Robimy to za pomocą src = "nazwa pliku" atrybut. W naszym przykładowym skrypcie określilibyśmy src = "framebreak.js".
8. Jedyną komplikacją jest to, że zdecydowaliśmy się przechowywać zewnętrzne skrypty JavaScript w osobnym folderze niż strony internetowe, które ich używają. Jeśli to zrobisz, musisz dodać ścieżkę z folderu strony internetowej do folderu JavaScript przed nazwą pliku. Na przykład, jeśli skrypty JavaScript są przechowywane w pliku js folder w folderze, w którym znajdują się nasze strony internetowe, których potrzebowalibyśmy src = "js / framebreak.js"

Jak więc wygląda nasz kod po rozdzieleniu kodu JavaScript na osobny plik? W przypadku naszego przykładowego JavaScript (zakładając, że JavaScript i HTML są w tym samym folderze) nasz HTML na stronie internetowej brzmi teraz:

Mamy również osobny plik o nazwie framebreak.js, który zawiera:

if (top.location! = self.location) top.location = self.location;

Twoja nazwa pliku i zawartość pliku będą się znacznie różnić od tego, ponieważ rozpakowałeś cokolwiek JavaScript został osadzony na twojej stronie internetowej i nadał temu plikowi opisową nazwę na podstawie czego to robi. Rzeczywisty proces wyodrębniania będzie jednak taki sam, bez względu na to, jakie wiersze zawiera.

Co z pozostałymi dwiema liniami w każdym z przykładów dwóch i trzech? Cóż, celem tych wierszy w przykładzie drugim jest ukrycie JavaScript przed Netscape 1 i Internetem Explorer 2, z którego nikt już nie korzysta, więc te wiersze nie są tak naprawdę potrzebne w pierwszym miejsce. Umieszczenie kodu w pliku zewnętrznym ukrywa kod w przeglądarkach, które i tak nie rozumieją znacznika skryptu bardziej niż otaczają go w komentarzu HTML. Trzeci przykład jest używany dla stron XHTML, aby powiedzieć walidatorom, że JavaScript powinien być traktowany jako treść strony, a nie sprawdzać go jako HTML (jeśli używasz dokumentu HTML zamiast XHTML, to walidator już o tym wie, więc te tagi nie są potrzebne). Dzięki JavaScript w osobnym pliku nie ma już na stronie żadnego JavaScript, który mógłby zostać pominięty przez walidatory, więc te linie nie są już potrzebne.

Jednym z najbardziej użytecznych sposobów, w jaki JavaScript może być wykorzystany do dodania funkcji do strony internetowej, jest wykonanie pewnego rodzaju przetwarzania w odpowiedzi na działanie użytkownika. Najczęstszym działaniem, na które chcesz zareagować, jest kliknięcie przez użytkownika. Nazywa się moduł obsługi zdarzeń, który pozwala reagować na kliknięcia przez użytkownika na kliknięcie.

Kiedy większość ludzi po raz pierwszy myśli o dodaniu modułu obsługi zdarzeń onclick do swojej strony internetowej, natychmiast myśli o dodaniu go do pliku etykietka. Daje to fragment kodu, który często wygląda:

To jest źle sposób użycia onclick, chyba że masz rzeczywisty znaczący adres w atrybucie href, aby osoby bez JavaScript zostały przeniesione gdzieś po kliknięciu linku. Wiele osób pomija również „return false” z tego kodu, a potem zastanawia się, dlaczego góra bieżącej strony zawsze się ładuje po uruchomieniu skryptu (to jest to, co href = "#" mówi stronie, aby zrobiła, chyba że false zostanie zwrócony przez wszystkie programy obsługi zdarzeń. Oczywiście, jeśli masz coś znaczącego jako miejsce docelowe linku, możesz chcieć tam pójść po uruchomieniu kodu onclick, a wtedy nie będziesz potrzebować „return false”.

Wiele osób nie zdaje sobie sprawy z tego, że można dodać moduł obsługi zdarzeń onclick każdy Tag HTML na stronie internetowej w celu interakcji, gdy użytkownik kliknie tę treść. Jeśli więc chcesz uruchomić coś, gdy ludzie klikną obraz, możesz użyć:

Jeśli chcesz uruchomić coś, gdy ktoś kliknie tekst, możesz użyć:

jakiś tekst

Oczywiście nie dają one automatycznej wskazówki wizualnej, że pojawi się odpowiedź, jeśli odwiedzający je kliknie tak jak robi to link, ale możesz sam dodać tę wizualną wskazówkę, projektując obraz lub zakres odpowiednio.

Inną rzeczą wartą uwagi na temat tych sposobów dołączania modułu obsługi zdarzeń onclick jest to, że nie wymagają one „return false”, ponieważ nie ma domyślnej akcji, która nastąpiłaby po kliknięciu elementu, która musi być niepełnosprawny.

Te sposoby dołączania onclick stanowią znaczną poprawę w stosunku do złej metody, z której korzysta wiele osób, ale nadal jest to daleka droga od najlepszego sposobu jej kodowania. Jednym z problemów z dodawaniem onclick przy użyciu dowolnej z powyższych metod jest to, że nadal miesza JavaScript z HTML. na kliknięcie jest nie atrybut HTML, jest to moduł obsługi zdarzeń JavaScript. Aby oddzielić nasz JavaScript od naszego HTML, aby strona była łatwiejsza w utrzymaniu, musimy pobrać odnośnik onclick z pliku HTML do osobnego pliku JavaScript, do którego należy.

Najłatwiejszym sposobem na to jest zastąpienie kliknięcia w kodzie HTML za pomocą ID ułatwi to dołączenie modułu obsługi zdarzeń do odpowiedniego miejsca w kodzie HTML. Nasz HTML może teraz zawierać jedną z następujących instrukcji:

 jakiś tekst

Następnie możemy zakodować JavaScript w osobnym pliku JavaScript, który jest albo połączony z dolną częścią strony, albo który znajduje się w nagłówku strony i gdzie nasz kod znajduje się w funkcji, która jest wywoływana po zakończeniu ładowania strony. Nasz JavaScript do dołączenia procedur obsługi zdarzeń wygląda teraz następująco:

document.getElementById ('img1'). onclick = dosomething; document.getElementById ('sp1'). onclick = dosomething;

Jedną rzecz do zapamiętania. Zauważysz, że zawsze pisaliśmy po kliknięciu w całości małymi literami. Podczas kodowania instrukcji w kodzie HTML zobaczysz, że niektórzy ludzie piszą ją jako onClick. Jest to błędne, ponieważ nazwy procedur obsługi zdarzeń JavaScript są pisane małymi literami i nie ma takiej procedury obsługi jak onClick. Możesz tego uniknąć, jeśli umieścisz JavaScript bezpośrednio w tagu HTML, ponieważ HTML nie rozróżnia wielkości liter, a przeglądarka odwzoruje go na poprawną nazwę dla Ciebie. Nie można uniknąć niewłaściwej wielkiej litery w samym JavaScript, ponieważ JavaScript rozróżnia małe i duże litery i nie ma czegoś takiego w JavaScript jak onClick.

Ten kod jest ogromnym ulepszeniem w stosunku do poprzednich wersji, ponieważ teraz zarówno dołączamy zdarzenie do poprawnego elementu w naszym HTML, jak i mamy JavaScript całkowicie oddzielny od HTML. Możemy to jeszcze poprawić.

Jedynym problemem, który pozostaje, jest to, że możemy dołączyć tylko jeden moduł obsługi zdarzeń onclick do określonego elementu. Jeśli w dowolnym momencie będziemy musieli dołączyć inną procedurę obsługi zdarzeń onclick do tego samego elementu, to wcześniej dołączone przetwarzanie nie będzie już dołączone do tego elementu. Kiedy dodajesz wiele różnych skryptów do swojej strony internetowej w różnych celach, jest co najmniej jeden możliwość, że dwa lub więcej z nich może chcieć zapewnić pewne przetwarzanie do wykonania, gdy ten sam element jest kliknięty. Brudnym rozwiązaniem tego problemu jest określenie, gdzie ta sytuacja się pojawia, i połączenie przetwarzania, które należy wywołać razem, z funkcją, która wykonuje całe przetwarzanie.

Podczas gdy takie starcia są mniej powszechne w przypadku onclick niż w przypadku obciążenia, konieczność wcześniejszej identyfikacji i łączenia ich nie jest idealnym rozwiązaniem. Nie jest to wcale rozwiązanie, gdy rzeczywiste przetwarzanie, które musi zostać dołączone do elementu, zmienia się w czasie, tak że czasami jest jedna rzecz do zrobienia, czasem inna, a czasem jedno i drugie.

Najlepszym rozwiązaniem jest całkowite zaprzestanie korzystania z procedury obsługi zdarzeń i zamiast tego użycie detektora zdarzeń JavaScript (razem z odpowiednim attachEvent dla Jscript - ponieważ jest to jedna z tych sytuacji, w których JavaScript i JScript różnić się). Możemy to zrobić najłatwiej, najpierw tworząc funkcję addEvent, która doda detektor zdarzeń lub załącznik w zależności od tego, który z obsługiwanych języków jest obsługiwany;

funkcja addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); zwróć prawdę; } else if (el.attachEvent) {return el.attachEvent ('on' + eType, fn); } }

Możemy teraz dołączyć przetwarzanie, które ma się odbywać po kliknięciu naszego elementu za pomocą:

addEvent (document.getElementById ('spn1'), 'click', dosomething, false);

Zastosowanie tej metody dołączania kodu do przetworzenia po kliknięciu elementu oznacza, że ​​wykonanie kolejnego wywołania addEvent w celu dodania innej funkcji uruchamiany po kliknięciu określonego elementu nie zastąpi wcześniejszego przetwarzania nowym przetwarzaniem, ale zamiast tego pozwoli obu funkcjom biegać. Nie musimy wiedzieć, kiedy wywołujemy addEvent, czy mamy już przypisaną funkcję element do uruchomienia po kliknięciu, nowa funkcja zostanie uruchomiona wraz z funkcjami, które były poprzednio przywiązany.

Gdybyśmy potrzebowali możliwości usuwania funkcji z tego, co uruchamia się po kliknięciu elementu, moglibyśmy utworzyć odpowiadająca mu funkcja deleteEvent, która wywołuje odpowiednią funkcję do usunięcia detektora zdarzeń lub dołączenia zdarzenie?

Jedyną wadą tego ostatniego sposobu dołączenia przetwarzania jest to, że te naprawdę stare przeglądarki nie obsługują tych stosunkowo nowych sposobów dołączania przetwarzania zdarzeń do strony internetowej. Powinno być już mało osób korzystających z takich przestarzałych przeglądarek, aby zignorować je w tym, co J Skrypt, który piszemy oprócz pisania naszego kodu w taki sposób, aby nie powodował ogromnej liczby błędów wiadomości. Powyższa funkcja została napisana, aby nic nie robić, jeśli nie jest obsługiwany żaden z jej sposobów. Większość z tych naprawdę starych przeglądarek nie obsługuje metody getElementById odwoływania się do HTML, a więc jest to bardzo proste if (! document.getElementById) zwraca false; na górze dowolnej z funkcji, które wykonują takie wywołania, byłoby również odpowiednie. Oczywiście, wiele osób piszących JavaScript nie bierze się tak bardzo za tych, którzy nadal używają antycznych przeglądarek i więc ci użytkownicy muszą przyzwyczaić się do błędów JavaScript na prawie każdej stronie, którą odwiedzają.

Który z tych różnych sposobów używasz do dołączenia przetwarzania na swojej stronie, aby był uruchamiany, gdy odwiedzający coś klikną? Jeśli sposób, w jaki to robisz, jest bliższy przykładom na górze strony niż przykładom na dole strony, być może jest to czas pomyślałeś o ulepszeniu sposobu pisania przetwarzania onclick, aby użyć jednej z lepszych metod przedstawionych poniżej strona.

Patrząc na kod detektora zdarzeń między przeglądarkami, zauważysz, że istnieje czwarty parametr, który wywołaliśmy uC, których użycie nie jest oczywiste z poprzedniego opisu.

Przeglądarki mają dwa różne porządki, w których mogą przetwarzać zdarzenia po ich uruchomieniu. Mogą pracować od zewnątrz do wewnątrz od

• uC = true, aby przetworzyć podczas fazy przechwytywania
• uC = fałsz przetwarzany podczas fazy bąbelkowej.

Tak więc tam, gdzie jest kilka innych tagów owiniętych wokół tego, że zdarzenie zostało wywołane w fazie przechwytywania, najpierw zaczyna się od tagu najbardziej zewnętrznego i przechodzi do w kierunku tego, który wywołał zdarzenie, a następnie po przetworzeniu znacznika, do którego zostało dołączone zdarzenie, faza bąbelkowa odwraca proces i wycofuje się jeszcze raz.

Internet Explorer i tradycyjne programy obsługi zdarzeń zawsze przetwarzają fazę bąbelkową, a nigdy fazę przechwytywania, dlatego zawsze zaczynają się od najbardziej specyficznego znacznika i działają na zewnątrz.

Tak więc z modułami obsługi zdarzeń:

xx