Первое знакомство с JavaScript

Введение

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

Лекция имеет следующую структуру:

• Что такое JavaScript, и как он выполняется?
  • Включение JavaScript в документ HTML
  • Соединение с внешним файлом JavaScript
• JavaScript и производительность браузера
• Куда поместить JavaScript
• Безопасность JavaScript и ее отсутствие
• Методы, которые желательно избегать
• Заключение
• Контрольные вопросы

Что такое JavaScript, и как он выполняется?

JavaScript является языком на основе текста, который не требует никаких преобразований перед выполнением. Другие языки, такие как Java и C++ требуют для выполнения компиляции, но код JavaScript выполняется непосредственно специальной программой, которая интерпретирует код и называется синтаксическим анализатором (почти все браузеры web содержат синтаксический анализатор JavaScript).

Для выполнения JavaScript в браузере имеется две возможности - либо поместить его в элемент script в любом месте внутри документа HTML, либо поместить его во внешний файл JavaScript (с расширением .js ), а затем указать этот файл внутри документа HTML с помощью пустого элемента script с атрибутом src. Оба эти метода будут рассмотрены в данном разделе.

Включение JavaScript в документ HTML

Самая общая форма включения 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

Чтобы соединиться с внешним кодом 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 для нескольких документов HTML и легко осуществлять обслуживание этого кода: если потребуется внесение каких-то изменений в код, нужно будет изменить только один единственный файл.
• Код JavaScript будет кэширован браузером. Кэширование означает, что браузер будет сохранять копию кода JavaScript на компьютере посетителя сайта. Когда пользователь в следующий раз загружает тот же самый сценарий, он будет браться не с сервера, а с собственного компьютера пользователя - загружаясь, таким образом, значительно быстрее.
• Можно легко найти сценарий, если понадобится его модифицировать, избавляясь от необходимости просматривать длинные документы HTML, чтобы найти место, где требуется исправить проблему.
• Исправление ошибок становится легче, так как инструмент отладки или консоль ошибок сообщит, какой файл содержит ошибку и точно укажет номер строки.

В документ можно добавлять столько файлов 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>

Однако преимущества такой разработки ослабляются эффектом, который это оказывает на производительность документа. Разные браузеры ведут себя немного по разному, но в худшем варианте (который, к сожалению, реализуется в наиболее часто используемом браузере ) происходит следующее:

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

Все это означает, что отображение web-сайта замедляется, пока все эти действия не выполнятся для всех включенных сценариев. Это может вызывать недовольство посетителей сайта.

Одним из способов обойти эту проблему является использование вспомогательного сценария для создания единственного файла из всех используемых файлов. В этом случае сохраняется преимущество легкости обслуживания, и в то же время сокращаются задержки при отображении web-страницы. В Web существует несколько подобных сценариев - один из них написан на PHP и доступен у Ed Eliot (http://www.ejeliot.com/).

Задержка отображения также определяет, куда желательно поместить JavaScript в документе.