Подключение кода к гипертекстовой странице

10. Подключение JavaScript к гипертекстовой странице

JavaScript-код можно подключать к гипертекстовой странице четырьмя способами:

Из внешнего файла.
Располагать внутри элемента SCRIPT.
Записывать в виде значения «событийного» атрибута элемента, такого как onload, onclick (щелчок мыши) и других (с приставкой on).
Записывать как тело URL-адреса при помощи псевдопротокола javascript:.

JavaScript во внешнем файле

Файл с кодом должен иметь расширение js. Этот файл указывается в заголовочной части HTML-кода следующим элементом SCRIPT:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
  <HEAD>
    ...
    <SCRIPT type="text/javascript" src="main.js"></SCRIPT>
    ...
  </HEAD>
  <BODY>
    ...
  </BODY>
</HTML>

В образце представленном выше, в элементе SCRIPT при помощи атрибута src указан файл со скриптами main.js. Значение text/javascript атрибута type подсказывает браузеру, что код написан на языке JavaScript.

Замечание 1. Помимо JavaScript скрипты для браузера можно записывать на языке Visual Basic Scripting Edition корпорации Microsoft, больше известном как VBSript. Однако этот язык поддерживает только Internet Explorer. Если мы создаём кроссбраузерный документ, то альтернативы JavaScript нет.

Замечание 2. Изначально элемент SCRIPT не поддерживал атрибут type, и язык скриптов указывался при помощи атрибута language:


<SCRIPT language="JavaScript" src="main.js"></SCRIPT>

Стандарт W3C сегодня отвергает атрибут language, но его часто можно увидеть в старых кодах или в новых, где он используется для совместимости с устаревшими браузерами.

Пример 1

Смотрите Пример 1 (JS во внешнем файле)

JavaScript внутри элемента `SCRIPT`

Код JavaScript можно располагать внутри элемента SCRIPT, как в головной части HTML-кода, так и в его теле. Пример 1 можно переписать в виде одного HTML-файла, как показано в примере 2. Здесь JavaScript-код располагается в головной части HTML.

Пример 2

Смотрите Пример 2 (JS в голове HTML-кода)

А вот другой пример, в котором JavaScript-код располагается и в голове, и в теле HTML-кода.

Пример 3

Смотрите Пример 3 (JS в голове и теле HTML-кода)

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

Замечание 1. К этой общей программе относятся и коды, записанный в отдельном файле js и подсоединённые к HTML при помощи атрибута src в элементе SCRIPT, размещённой в головной части HTML-кода.

Замечание 2. Нельзя использовать один элемент SCRIPT для подключения внешнего файла и для размещения JavaScript-кода внутри него.

Метод write(str) объекта document (который является свойством объекта window) применяется для отображения на страницу HTML-кода, заданного строкой str (аргумент метода) в той точке документа, в которой он расположен.

JavaScript как значение «событийного» атрибута элемента

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

Пример 4

Файл index.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
  <HEAD>
    <META http-equiv="Content-Type" 
          content="text/html; charset=windows-1251">
    <TITLE>Пример 4</TITLE>
  </HEAD>
  <BODY>
    <H1>Пример 4</H1>
    <BUTTON onclick="alert('Спасибо!');">Нажми меня</BUTTON>
  </BODY>
</HTML>

Смотрите Пример 4 (JS как значение событийного атрибута)

В приведенном выше примере JavaScript-код alert('Спасибо!') выполняется, когда пользователь щёлкает мышью на элементе BUTTON.

Видим, что JavaScript-код записывается в виде строки (сколь угодно длинной), и в нём могут использоваться любые конструкции языка, кроме комментариев «//».

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

Следующий пример демонстрирует такой способ обработки событий.

Пример 5

Файл index.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
  <HEAD>
    <META http-equiv="Content-Type" 
          content="text/html; charset=windows-1251">
    <SCRIPT type="text/javascript" src="main.js"></SCRIPT>
    <TITLE>Пример 5</TITLE>
  </HEAD>
  <BODY>
    <H1>Пример 5</H1>
    <BUTTON onclick="addP();">Добавить абзац к документу</BUTTON>
  </BODY>
</HTML>

Файл main.js


addP.counter = 1; // Счетчик абзацев. Переменная введена как свойство 
                  // объекта addP, чтобы не вводить лишнее глобальное 
                  // имя. Можно было бы с этой целью воспользоваться  
                  // механизмом замыкания.
// Обработчик события onclick на элементе BUTTON
function addP()
{
  // Создадим элемент "абзац"
  var el = document.createElement("p");
  // Добавим к созданному элементу потомка -- текстовый элемент 
  el.appendChild(document.createTextNode("Абзац номер "+(addP.counter++)+"."));
  // Добавим построенный элемент к BODY -- и он сразу отобразится на экране
  document.body.appendChild(el);
}

Смотрите Пример 5 (Обработчик события)

Можно вообще избавиться от JavaScript-кода в HTML, назначив обработчик события onclick в JS-файле. Тем самым мы полностью разделим «содержание» и «поведение» документа. Следующий пример демонстрирует такую возможность.

Пример 6

Файл index.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
  <HEAD>
    <META http-equiv="Content-Type" 
          content="text/html; charset=windows-1251">
    <SCRIPT type="text/javascript" src="main.js"></SCRIPT>
    <TITLE>Пример 6</TITLE>
  </HEAD>
  <BODY>
    <H1>Пример 6</H1>
    <BUTTON id="button">Добавить абзац к документу</BUTTON>
  </BODY>
</HTML>

Файл main.js


// Обработчик события onload
// Функциональный литерал будет вызван после полной загрузки 
// документа и построения объектной модели 
window.onload = function ()
{
  // Назначить обработчик события onclick элементу с id="button"
  document.getElementById("button").onclick = addP;
}

addP.counter = 1; // Счетчик абзацев. Переменная введена как свойство 
                  // объекта addP, чтобы не вводить лишнее глобальное 
                  // имя. Можно было также с этой целью воспользоваться  
                  // замыканием.
// Обработчик события onclick на элементе id="button"
function addP()
{
  // Создадим элемент "абзац"
  var el = document.createElement("p");
  // Добавим к созданному элементу потомка -- текстовый элемент 
  el.appendChild(document.createTextNode("Абзац номер "+(addP.counter++)+"."));
  // Добавим построенный элемент к BODY -- и он сразу отобразится на экране
  document.body.appendChild(el);
}

Смотрите Пример 6 (Назначение обработчика в JS-файле)

JavaScript как тело URL-адреса

JavaScript-код можно записывать всюду, где в HTML-коде используется URL-адрес, например, в открывающем теге элемента A:


<A href="javascript:код">Текст</A>

При щелчке на такой ссылке происходит следующее:

Выполняется код, записанный за ключевым словом псевдопротокола javascript:.
Строковое значение последней инструкции кода используется для построения нового HTML-документа, который загружается в окно браузера.

Пример 7

Файл index.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
  <HEAD>
    <META http-equiv="Content-Type" 
          content="text/html; charset=windows-1251">
    <TITLE>Пример 7</TITLE>
  </HEAD>
  <BODY>
    <H1>Пример 7</H1>
    <A href="javascript:
       /* ; -- обязательны, // -- запрещены  */
       var str = '<BODY>';
       str +='<H1>Новый документ</H1>';
       str += '</BODY>';
       str; /* значение последнего выражения -- содержимое строки  */
     ">Построить новый документ</A>
  </BODY>
</HTML>

Смотрите Пример 7 (JS как тело URL-адреса)

Если последняя инструкция не возвращает значения, текущий документ сохраняется (новый не строится).

Пример 8

Файл index.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
  <HEAD>
    <META http-equiv="Content-Type" 
          content="text/html; charset=windows-1251">
    <TITLE>Пример 8</TITLE>
  </HEAD>
  <BODY>
    <H1>Пример 8</H1>
    <A href="javascript:alert('Спасибо!')">Щелкни на мне</A>
  </BODY>
</HTML>

Смотрите Пример 8 (JS как тело URL-адреса)

Один из способов гарантировать отмену построения нового документа — закончить код инструкцией void 0.

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


<A href="javascript:scroll(0,0); void 0">вверх</A>

Замечание 1. Функция scroll(x,y) является методом глобального объекта window. Она прокручивает документ так, что координаты окна устанавливаются в положение x,y относительно начала документа.

Замечание 2. Ссылку наверх можно сделать и так:


<H1 id=top>Заголовок сайта</H1> <!-- Первый элемент страницы -->
  ...
 <A href="#top">вверх</A>       <!-- Переход на элемент с id=top -->

Но здесь перемещение заносится в историю переходов браузера. Если такая ссылка нажималась много раз, кнопка Назад браузера будет исполнять «танец» на текущей странице, запутывая пользователя.

Переход наверх без занесения в историю переходов можно закодировать и так:


<A href="javascript:void scroll(0,0)">вверх</A>

Будет работать и такая конструкция:


<A href="javascript:scroll(0,0)">вверх</A>

так как метод scroll ничего не возвращает.

10. Подключение JavaScript к гипертекстовой странице

JavaScript во внешнем файле

JavaScript внутри элемента SCRIPT

JavaScript как значение «событийного» атрибута элемента

JavaScript как тело URL-адреса

JavaScript внутри элемента `SCRIPT`