В этой лекции будут рассмотрены основы JavaScript - как и где использовать его, каких проблем избегать, и общие основы, чтобы можно было начать свой путь развития и стать первоклассным разработчиком JavaScript.
Лекция имеет следующую структуру:
JavaScript является языком на основе текста, который не требует никаких преобразований перед выполнением. Другие языки, такие как Java и C++ требуют для выполнения компиляции, но код JavaScript выполняется непосредственно специальной программой, которая интерпретирует код и называется синтаксическим анализатором (почти все браузеры web содержат синтаксический анализатор JavaScript).
Для выполнения JavaScript в браузере имеется две возможности - либо поместить его в элемент script в любом месте внутри документа HTML, либо поместить его во внешний файл JavaScript (с расширением .js ), а затем указать этот файл внутри документа HTML с помощью пустого элемента script с атрибутом src. Оба эти метода будут рассмотрены в данном разделе.
Самая общая форма включения JavaScript в страницу HTML будет выглядеть примерно следующим образом:
<script> var x = 3; alert('hello there, I am JavaScript - x is '+x); </script>
Можно поместить этот текст в любом месте документа, и он будет выполняться, но некоторые места определенно лучше других - этот вопрос будет рассмотрен в дальнейшем.
Так как в будущем возможно использование на страницах Web нескольких различных типов сценариев, то имеет смысл добавить название используемого сценария в виде типа MIME:
<script type="text/javascript"> var x = 3; alert('hello there, I am JavaScript - x is '+x); </script>
Примечание: В Web можно встретить примеры сценариев, которые имеют атрибут language="javascript". Это не является частью какого-либо стандарта и совершенно бесполезно, удаляйте это там, где можете. Это напоминание о старых недобрых временах, когда на страницах Web был также популярен язык VBScript. Однако VBScript со временем использовать перестали, так как он работал только в Internet Explorer.
В прошлом было необходимо комментировать JavaScript в HTML, чтобы браузер не показывал код как HTML. Так как это относится только к очень старым браузерам, то об этом больше беспокоиться не стоит. Однако, если вы используете в качестве DOCTYPE строгий XHTML, необходимо помещать любой код JavaScript в блок CDATA, чтобы выполнить проверку (не беспокойтесь об этом - на самом деле это не важно на данном этапе изучения):
<script type="text/javascript"> /* <![CDATA[ */ var x = 3; alert('hello there, I am JavaScript - x is '+x); /* ]]> */ </script>
Однако для документов строгого XHTML более разумно вообще не включать какой-либо код JavaScript, а вместо этого держать его во внешнем документе.
Чтобы соединиться с внешним кодом JavaScript (на том же сервере или хранящемся где-то в Сети), необходимо только добавить атрибут src в элемент script:
<script type="text/javascript" src="myscript.js"></script>
Когда такой элемент встречается на странице, браузер загружает файл myscript.js и выполняет его. Любое содержимое внутри самого элемента script будет пропущено, если в нем встречается атрибут src. Следующий пример загрузит файл myscript.js и выполнит код в нем, но вообще не выполнит alert внутри элемента script.
<script type="text/javascript" src="myscript.js"> alert('I am pointless as I won\'t be executed'); </script>
Размещение кода JavaScript во внешнем файле имеет много смысла, так как:
В документ можно добавлять столько файлов JavaScript, сколько потребуется, но существует несколько соображений, которые необходимо рассмотреть, прежде чем становиться на этот путь.
Разбиение большого кода JavaScript на различные файлы, каждый из которых имеет дело с одной задачей, является отличной идеей для сохранения легкости обслуживания функций и ускорения исправления ошибок. Например, можно было бы иметь несколько блоков сценариев следующего вида:
<script type="text/javascript" src="config.js"></script> <script type="text/javascript" src="base.js"></script> <script type="text/javascript" src="effects.js"></script> <script type="text/javascript" src="validation.js"></script> <script type="text/javascript" src="widgets.js"></script>
Однако преимущества такой разработки ослабляются эффектом, который это оказывает на производительность документа. Разные браузеры ведут себя немного по разному, но в худшем варианте (который, к сожалению, реализуется в наиболее часто используемом браузере ) происходит следующее:
Все это означает, что отображение web-сайта замедляется, пока все эти действия не выполнятся для всех включенных сценариев. Это может вызывать недовольство посетителей сайта.
Одним из способов обойти эту проблему является использование вспомогательного сценария для создания единственного файла из всех используемых файлов. В этом случае сохраняется преимущество легкости обслуживания, и в то же время сокращаются задержки при отображении web-страницы. В Web существует несколько подобных сценариев - один из них написан на PHP и доступен у Ed Eliot (http://www.ejeliot.com/).
Задержка отображения также определяет, куда желательно поместить JavaScript в документе.