Как отделить JavaScript на вашей веб-странице

Когда вы впервые пишете новый JavaScript, самый простой способ установить его - это вставить код JavaScript непосредственно на веб-страницу, чтобы все было в одном месте, пока вы тестируете его, чтобы оно заработало право. Точно так же, если вы вставляете предварительно написанный сценарий на свой веб-сайт, инструкции могут указывать вам встроить части или весь сценарий в саму веб-страницу.

Это нормально для настройки страницы и обеспечения ее правильной работы с самого начала, но как только ваша страница будет работать так, как вы этого хотите, вы сможете улучшить страницу путем извлечения JavaScript во внешний файл, чтобы содержимое вашей страницы в HTML не было настолько загромождено элементами без содержания, такими как JavaScript.

Если вы просто копируете и используете скрипты JavaScripts, написанные другими людьми, то их инструкции о том, как добавить их скрипт на страницу, могут привести к тому, что у вас будет один или несколько больших разделов JavaScript фактически встроен в саму вашу веб-страницу, и в его инструкциях не сказано, как вы можете переместить этот код со своей страницы в отдельный файл и при этом иметь JavaScript Работа. Не беспокойтесь, потому что независимо от того, какой код JavaScript вы используете на своей странице, вы можете легко перемещать JavaScript из вашей страницы и настройте его как отдельный файл (или файлы, если у вас есть более одного фрагмента JavaScript, встроенного в страницу). Процесс для этого всегда одинаков и лучше всего иллюстрируется на примере.

Давайте посмотрим, как может выглядеть фрагмент JavaScript, встроенный в вашу страницу. Ваш фактический код JavaScript будет отличаться от того, который показан в следующих примерах, но процесс одинаков в каждом случае.

Ваш встроенный JavaScript должен выглядеть примерно как один из трех приведенных выше примеров. Конечно, ваш реальный код JavaScript будет отличаться от показанного, но, вероятно, JavaScript будет встроен в страницу одним из трех вышеуказанных методов. В некоторых случаях ваш код может использовать устаревшие язык = "JavaScript" вместо того тип = "текст / JavaScript" в этом случае вы можете начать обновлять код, заменив атрибут языка на тип.

Прежде чем вы сможете извлечь JavaScript в его собственный файл, вы должны сначала определить код, который нужно извлечь. Во всех трех приведенных выше примерах есть две строки фактического кода JavaScript, который нужно извлечь. Ваш сценарий, вероятно, будет содержать гораздо больше строк, но его легко определить, поскольку он будет занимать то же место на вашей странице, что и две строки JavaScript, которые мы выделены в трех приведенных выше примерах (все три примера содержат одинаковые две строки JavaScript, это лишь контейнер вокруг них, который немного разные).

1. Первое, что вам нужно сделать, чтобы фактически извлечь JavaScript в отдельный файл, это открыть текстовый редактор и получить доступ к содержимому вашей веб-страницы. Затем вам нужно найти встроенный JavaScript, который будет окружен одним из вариантов кода, показанных в приведенных выше примерах.
2. Найдя код JavaScript, вам нужно выбрать его и скопировать в буфер обмена. В приведенном выше примере выделенный код выделен, вам не нужно выбирать теги сценария или дополнительные комментарии, которые могут появляться вокруг кода JavaScript.
3. Откройте еще одну копию вашего текстового редактора (или другую вкладку, если ваш редактор поддерживает открытие более одного файла за раз) и пропустите там содержимое JavaScript.
4. Выберите описательное имя файла для использования в новом файле и сохраните новый контент, используя это имя файла. В примере кода целью сценария является выделение кадров, чтобы можно было найти подходящее имя framebreak.js.
5. Итак, теперь у нас есть JavaScript в отдельном файле, который мы возвращаем в редактор, где у нас есть исходное содержимое страницы, чтобы внести туда изменения, чтобы ссылаться на внешнюю копию скрипта.
6. Поскольку теперь у нас есть сценарий в отдельном файле, мы можем удалить все между тегами сценария в нашем исходном содержимом, чтобы тег.
7. Последний шаг - добавить дополнительный атрибут к тегу сценария, определяющий, где он может найти внешний JavaScript. Мы делаем это с помощью SRC = "имя файла" атрибут. В нашем примере скрипта мы бы указали src = "framebreak.js".
8. Единственное осложнение - если мы решили хранить внешние скрипты Java в отдельной папке от веб-страниц, которые их используют. Если вы сделаете это, вам нужно добавить путь от папки веб-страницы к папке JavaScript перед именем файла. Например, если скрипты Java хранятся в JS папка в папке, которая содержит наши веб-страницы нам нужно SRC = "JS / framebreak.js"

Так как же выглядит наш код после того, как мы разделили JavaScript в отдельный файл? В нашем примере JavaScript (при условии, что JavaScript и HTML находятся в одной папке), наш HTML на веб-странице теперь выглядит так:

У нас также есть отдельный файл с именем framebreak.js, который содержит:

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

Ваше имя файла и содержимое файла будет сильно отличаться от этого, потому что вы извлекли какой-либо JavaScript был встроен в вашу веб-страницу и дал файлу описательное имя, основанное на том, что оно делает. Фактический процесс его извлечения будет одинаковым, хотя независимо от того, какие строки он содержит.

Как насчет тех двух других строк в каждом из примеров два и три? Итак, цель этих строк в примере два - скрыть JavaScript от Netscape 1 и Интернета Explorer 2, ни один из которых больше никто не использует, и поэтому эти строки на самом деле не нужны в первом место. Размещение кода во внешнем файле скрывает код от браузеров, которые не понимают тег скрипта более эффективно, чем, в любом случае, заключая его в HTML-комментарий. Третий пример используется для страниц XHTML, чтобы сообщить валидаторам, что JavaScript должен рассматриваться как содержимое страницы, а не для его проверки. как HTML (если вы используете тип документа HTML, а не XHTML, тогда валидатор уже знает это, поэтому эти теги не являются требуется). С JavaScript в отдельном файле больше нет JavaScript на странице, который будет пропущен валидаторами, и поэтому эти строки больше не нужны.

Одним из наиболее полезных способов использования JavaScript для добавления функциональности на веб-страницу является выполнение какой-либо обработки в ответ на действие вашего посетителя. Наиболее распространенное действие, на которое вы хотите ответить, - это когда посетитель нажимает на что-либо. Обработчик события, который позволяет вам реагировать на нажатие на что-либо, называется по щелчку.

Когда большинство людей сначала думают о добавлении обработчика событий onclick на свою веб-страницу, они сразу же думают о добавлении его в тег. Это дает фрагмент кода, который часто выглядит так:

Это неправильно способ использовать onclick, если у вас нет фактического значимого адреса в атрибуте href, чтобы те, у кого нет JavaScript, были перенесены куда-нибудь при нажатии на ссылку. Многие люди также пропускают «return false» из этого кода, а затем задаются вопросом, почему верхняя часть текущей страницы всегда загружается после запуска скрипта (что и говорит href = "#" странице, если только из всех обработчиков событий не возвращается false. Конечно, если у вас есть что-то значимое в качестве пункта назначения ссылки, вы можете перейти туда после выполнения кода onclick, и тогда вам не понадобится «return false».

Многие люди не понимают, что обработчик события onclick можно добавить в Любые HTML-тег на веб-странице для взаимодействия, когда ваш посетитель нажимает на этот контент. Поэтому, если вы хотите, чтобы что-то запускалось, когда люди нажимали на изображение, вы можете использовать:

Если вы хотите что-то запустить, когда люди нажимают на текст, вы можете использовать:

некоторый текст

Конечно, они не дают автоматической визуальной подсказки, что будет ответ, если ваш посетитель нажмет на них так, как это делает ссылка, но вы можете легко добавить эту визуальную подсказку, стилизовав изображение или диапазон соответственно.

Еще одна вещь, которую следует отметить в отношении этих способов присоединения обработчика событий onclick, заключается в том, что они не требуют return false, потому что при щелчке по элементу не будет действия по умолчанию, которое должно быть отключен.

Эти способы прикрепления onclick являются большим улучшением плохого метода, который используют многие люди, но он все еще далек от того, чтобы быть лучшим способом его кодирования. Одна из проблем, связанных с добавлением onclick любым из вышеперечисленных методов, заключается в том, что он все еще смешивает ваш JavaScript с вашим HTML. по щелчку является не атрибут HTML, это обработчик событий JavaScript. Таким образом, чтобы отделить JavaScript от нашего HTML, чтобы упростить поддержку страницы, нам нужно получить эту ссылку по щелчку из файла HTML в отдельный файл JavaScript, к которому она принадлежит.

Самый простой способ сделать это - заменить щелчок в HTML Я бы это облегчит прикрепление обработчика событий к соответствующему месту в HTML. Таким образом, наш HTML теперь может содержать одно из следующих утверждений:

 некоторый текст

Затем мы можем кодировать JavaScript в отдельном файле JavaScript, который либо связан с нижней частью тела страницы, либо которая находится в заголовке страницы и где наш код находится внутри функции, которая сама вызывается после завершения загрузки страницы. Наш JavaScript для присоединения обработчиков событий теперь выглядит так:

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

Стоит отметить одну вещь. Вы заметите, что мы всегда пишем на клике полностью в нижнем регистре. При кодировании выражения в их HTML вы увидите, что некоторые люди пишут его как onClick. Это неправильно, так как имена обработчиков событий JavaScript строчные, и такого обработчика, как onClick, не существует. Вы можете обойтись без него, если напрямую включите JavaScript в тег HTML, поскольку HTML не учитывает регистр, и браузер отобразит его на правильное имя. Вы не можете избежать ошибочной капитализации в самом JavaScript, так как JavaScript чувствителен к регистру и в JavaScript нет такой вещи, как onClick.

Этот код является огромным улучшением по сравнению с предыдущими версиями, потому что теперь мы оба присоединяем событие к правильному элементу в нашем HTML, и у нас JavaScript полностью отделен от HTML. Мы можем улучшить это еще дальше, хотя.

Единственная проблема, которая остается, заключается в том, что мы можем прикрепить только один обработчик события onclick к определенному элементу. Если нам в любое время понадобится присоединить другой обработчик события onclick к тому же элементу, тогда ранее присоединенная обработка больше не будет присоединена к этому элементу. Когда вы добавляете множество различных сценариев на свою веб-страницу для различных целей, возникает как минимум вероятность того, что двое или более из них захотят обеспечить некоторую обработку, которая будет выполняться, когда один и тот же элемент нажал на. Грязное решение этой проблемы состоит в том, чтобы определить, где возникает эта ситуация, и объединить обработку, которая должна быть вызвана вместе, с функцией, которая выполняет всю обработку.

Хотя подобные столкновения встречаются реже с onclick, чем с нагрузкой, необходимость заранее идентифицировать столкновения и объединять их вместе - не идеальное решение. Это не решение вообще, когда фактическая обработка, которая должна быть присоединена к элементу, изменяется со временем, так что иногда есть одна вещь, которую нужно сделать, иногда другая, а иногда и обе.

Лучшее решение - полностью прекратить использование обработчика событий и вместо этого использовать прослушиватель событий JavaScript (вместе с с соответствующим attachEvent для Jscript - так как это одна из тех ситуаций, где JavaScript и JScript отличается). Мы можем сделать это проще всего, сначала создав функцию addEvent, которая добавит либо прослушиватель событий, либо вложение в зависимости от того, какой из двух поддерживает поддерживаемый язык;

function addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); вернуть истину; } else if (el.attachEvent) {return el.attachEvent ('on' + eType, fn); } }

Теперь мы можем прикрепить обработку, которую мы хотим, чтобы происходило при нажатии на наш элемент, используя:

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

Использование этого метода присоединения кода, который будет обрабатываться при щелчке элемента, означает, что выполнение еще одного вызова addEvent для добавления другой функции к выполнение при нажатии на конкретный элемент не заменит предыдущую обработку новой обработкой, а вместо этого позволит обеим функциям быть запустить. Нам не нужно знать при вызове addEvent, есть ли у нас уже функция, присоединенная к элемент, который запускается при нажатии, новая функция будет запускаться вместе с функциями, которые были ранее прилагается.

Если нам нужна возможность удалять функции из того, что запускается при нажатии на элемент, то мы можем создать соответствующая функция deleteEvent, вызывающая соответствующую функцию для удаления прослушивателя событий или прикрепленного событие?

Один из недостатков этого последнего способа прикрепления обработки состоит в том, что действительно старые браузеры не поддерживают эти относительно новые способы прикрепления обработки событий к веб-странице. Сейчас должно быть достаточно людей, использующих такие устаревшие браузеры, чтобы игнорировать их в том, что J (ava) Скрипт, который мы пишем, кроме написания нашего кода таким образом, чтобы он не вызывал огромных ошибок Сообщения. Вышеприведенная функция написана так, чтобы ничего не делать, если не поддерживается ни один из используемых ей способов. Большинство из этих действительно старых браузеров также не поддерживают метод getElementById для ссылки на HTML, поэтому if (! document.getElementById) return false; в верхней части любой из ваших функций, которые делают такие вызовы, также будет уместно. Конечно, многие люди, пишущие JavaScript, не настолько внимательны к тем, кто все еще использует античные браузеры и таким образом, эти пользователи должны привыкнуть видеть ошибки JavaScript почти на каждой веб-странице, которую они посещают.

Какой из этих различных способов вы используете, чтобы прикрепить обработку к вашей странице для запуска, когда ваши посетители нажимают на что-то? Если то, как вы это делаете, ближе к примерам вверху страницы, чем к примерам внизу страницы, то, возможно, это так. время, когда вы думали об улучшении способа написания вашей обработки по клику, чтобы использовать один из лучших методов, представленных ниже стр.

Глядя на код для кросс-браузерного прослушивателя событий, вы заметите, что есть четвертый параметр, который мы назвали УНЦ, использование которого не очевидно из предыдущего описания.

Браузеры имеют два разных порядка, в которых они могут обрабатывать события, когда событие инициируется. Они могут работать снаружи внутрь от

• UC = true для обработки на этапе захвата
• uC = false для обработки во время пузырьковой фазы.

Таким образом, там, где есть несколько других тегов, обернутых вокруг того, что событие было запущено на этапе захвата, запускается сначала, начиная с самого внешнего тега и двигаясь в к тому, который вызвал событие, а затем, когда тег, к которому прикреплено событие, был обработан, фаза пузыря переворачивает процесс и возвращается обратно. опять таки.

Internet Explorer и традиционные обработчики событий всегда обрабатывают фазу пузыря, а не фазу захвата и поэтому всегда начинают с самого конкретного тега и работают вне.

Итак, с обработчиками событий:

хх