1.2 Размещение кода JavaScript на HTML-странице

Главный вопрос любого начинающего программиста: «Как оформить программу и выполнить ее?». Попробуем на него ответить как можно проще, но при этом не забывая обо всех способах применения JavaScript-кода.

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

  • гипертекстовая ссылка (схема URL);
  • обработчик события (в атрибутах, отвечающих событиям);
  • подстановка (entity);
  • вставка (контейнер  ).

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

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

Примечание 1. Все последующие примеры Вы можете проверять на работоспособность в Вашем браузере самостоятельно. Для этого скопируйте текст примера в файл (скажем, primer.html ); если текст примера состоит только из JavaScript-кода, то заключите его в тэги  и . Получившийся файл можно просматривать в браузере.

Примечание 2. В данной вводной лекции примеры даются без разбора деталей всех использованных конструкций — воспринимайте их пока интуитивно. Последующие лекции все прояснят. Опишем лишь два важнейших оператора, встречающихся почти в каждом примере. Оператор alert(строка) выводит эту строку на экран в окне предупреждения, пример такого окна изображен на рис. 1.1. Оператор document.write(строка) записывает указанную строку в текущий HTML-документ. Например, следующие два фрагмента HTML-документа равносильны:

Простой HTML-документ Использование document.write()
<HTML>
<BODY>
<H1>Заголовок</H1>
</BODY>
</HTML>
<HTML>
<BODY>
<SCRIPT>document.write(‘<H1>Заголовок</H1>’);</SCRIPT>
</BODY>
</HTML>