Освоение Ajax: Часть 6. Создание web приложений основанных на DOM

Для того чтобы создать интерактивные приложения Ajax, нужно объединить DOM и код JavaScript. Из предыдущих статей вы могли узнать о принципах, применяемых в программирование DOM, а именно, как web-браузер просматривает web страницы в виде списка древовидных элементов. Следовательно, структура программирования, применяемая в DOM, должна быть вам понятна. С помощью этой статьи вы сможете реализовать свои знания на практике и создать простую web страничку с результатами, полученными посредством использования JavaScript для управления DOM не перезагружая, или не обновляя страничку.

Вы ознакомились с двумя статьями, в которых содержится вводная информация о DOM. Сейчас вы достаточно хорошо владеете информацией о работе DOM. (Откройте Ресурсы чтобы получить ссылки на первые две статьи о DOM, а также на более ранние статьи о Ajax.) При помощи этой статьи вы сможете практически реализовать свои знания. Вы сможете создать основное web приложение с интерфейсом пользователя, который изменяется в зависимости от действий пользователя; и вы, конечно, будете использовать DOM, чтобы управлять изменениями интерфейса. К тому времени как вы закончите эту статью, вы сможете применить большую часть технологий и принципов DOM, о которых узнали.

Я могу предположить, что вы уже ознакомились с двумя последними статьями; если нет, то вам стоит изучить их, так как там содержится необходимая вам информация о DOM, и том, как web-браузеры изменяют структуру HTML и CSS на отдельный список с древовидным отображением, который представляет собой web страничку. Все основные принципы DOM, о которых упоминалось ранее, будут использованы в этой статье для создания рабочей, основанной на DOM, web страницы. В случае, если на одном из этапов этой статьи у вас возникнут проблемы и произойдет заминка, вы можете прерваться, пересмотреть предыдущие статьи, а затем возобновить действия.

Начните с пробного приложения

Ссылка на код

Для того чтобы полностью сосредоточиться на DOM и коде JavaScript, я повел себя немного небрежно и отобразил HTML в микрокомандном стилевом оформлении (как align выравнивание на h1 и p элемент). Несмотря на то, что попыток создать страницу у вас много, я советую найти время и поместить все ваши стили во внешнюю CSS таблицу стилей для всех полученных вами приложений.

Давайте начнем с того, что соберем вместе основные приложения, а затем добавим немного эффекта DOM. Следуя общему представлению о том, что DOM может перемещать объекты по всей web странице, не придерживаясь формы (а, значит, он отлично подходит Ajax), давайте создадим обычную страницу, на которой будет только цилиндр и текст командной кнопки Фокус Покус! (Вы можете предугадать, что из этого получиться?)

Начальный HTML

Листинг 1 отображает HTML для этой страницы; это всего лишь основа, у которой есть форма, заголовок, изображение и кнопка, на которую можно нажать.

Листинг 1. HTML для пробного приложения

				
<html>
 <head>
  <title>Magic Hat</title>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" />
   </p>
  </form>                                                                     
 </body>
</html>

Наряду с другими изображениями, использованными в этой статье, вы сможете найти и загрузить этот HTML в конце статьи. Однако, я очень советую вам загружать только образцы (как я создавал приложение по всей статье), а затем вручную печатать в HTML по мере следования образцу. Так вы намного лучше сможете понять, что такое код DOM, нежели просто прочитав статью, и открыв после этого законченное приложение.

Отображение примера web страницы

Здесь нет ничего сложного, просто открываете страницы и вы должны увидеть что-то похожее на рисунок 1.

Рисунок 1. Обычный цилиндр

Конечная стадия HTML.

Однако, необходимо помнить, что кнопка Листинг 1 и Рисунок 1 типа кнопка, это не кнопка просмотра. Если вы воспользуетесь этой кнопкой, то ее нажатие может привести к тому, что браузер попробует поменять форму; конечно, форма не содержит action атрибута (полностью умышленный), поэтому создастся неактивный бесконечный узел. (Для того чтобы увидеть результат, вы должны попробовать сделать это сами.) Воспользовавшись стандартной кнопкой ввода (не используя кнопку просмотра) вы сможете установить связь между функциями JavaScript и кнопкой, а также взаимодействовать с браузером без изменения формы.

В начало

Прибавьте больше примеров приложений

А сейчас добавим к web страничке что-то из JavaScript, DOM и немного магии.

Использование функции getElementById

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

Рисунок 2. Тот же цилиндр, только с кроликом
Тот же цилиндр, только с кроликом

Первый этап этого мошенничества с DOM включает поиск узла, который представляет собой img элемент на web странице. Как правило, легче всего это сделать, используя getElementById() метод, имеющийся в document документе, который представляет web страницу. Ранее вы уже сталкивались с этим методом; он действует так:

var elementNode = document.getElementById("id-of-element");

Прибавление id атрибута к HTML

Это основа JavaScript, но с вашим HTML нужно поработать: добавить id атрибут к элементу, к которому вы хотите получить доступ. То есть img элемент, который вы хотите заменить (новым изображением с кроликом); следовательно, вы так должны заменить ваш HTML, чтобы он выглядел как листинг 2.

Листинг 2. Прибавление id атрибута

				
<html>
 <head>
  <title>Magic Hat</title>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" />
   </p>
  </form>                                                                     
 </body>
</html>

Если вы перезагрузите (или повторно откроете) эту страницу, вы увидите, что ничего не изменилось; прибавление id атрибута никак не отразится на web странице. Однако, используя JavaScript и DOM, работать с этим элементом станет намного проще.

Блокировка элемента img

Сейчас вы без особых трудностей можете использовать getElementById(). Вы владеете ID нужного вам элемента - topHat - и можете хранить его на новой переменной JavaScript. К вашей HTML странице прибавляется код, показанный в листинге 3.

Листинг 3. Получение доступа к img элементу

				

<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" />
   </p>
  </form>                                                                     
 </body>
</html>

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

В начало

Изменить изображение достаточно сложно

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

Здесь находится все необходимое для замены существующего изображения на более новое, с кроликом:

Создайте новый img элемент.
Вы можете получить доступ к родителю (контейнеру) данного img элемента.
Поместите новый img элемент, в качестве потомка контейнера, прямо перед существующим img элементом.
Удалите старый img элемент.
Разместите элементы так, чтобы созданные вами функции JavaScript можно было вызвать, щелкнув на кнопку Фокус Покус!

Создание нового img элемента

Из прошлых двух статей вы должны помнить, что ключом к всевозможным составляющим DOM является document документ. Он представляет собой всю web страницу, что дает вам возможность получить доступ к эффективным методам getElementById(), ,и создавать новые узлы. Это последнее свойство, которое вам нужно использовать.

Прежде всего, вы должны создать новый img элемент. Не забывайте о том, что в DOM все представлено в виде узлов, но затем они делятся на три основные группы:

Элементы
Атрибуты
Текстовые узлы

Существует ряд других групп, но в процессе программирования в 90% вам нужны будут именно эти три группы. В этом случае вам необходим новый элемент img. В JavaScript вам нужен будет этот код:

var newImage = document.createElement("img");

Это создаст новый узел, печатающий element под названием img. В HTML, это выглядит так:

<img />

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

Что касается содержания img - это пустой узел. Однако, вы должны добавить атрибут src, который устанавливает изображение, которое нужно загрузить. Использовать здесь метод addAttribute() было бы неправильным. Разработчики DOM предположили, что нам, как программистам, должны нравиться небольшие сокращения (и это действительно так!). Следовательно, для добавления новых атрибутов и изменения значения уже существующих, они создали один метод: setAttribute().

Если вы вызовите setAttribute() и замените существующий атрибут, его значение изменится на то, которое вы добавили. Но, если вы вызовите setAttribute() и добавите несуществующий атрибут, DOM без проблем добавит атрибут, используя предусмотренное вами значение. Один метод, двойной результат! Таким же образом вы должны добавить нижеследующее в JavaScript:

var newImage = document.createElement("img");
newImage.setAttribute("src", "rabbit-hat.gif");

Это даст изображение, и соответственно установит его источник. Ваш документ HTML должен выглядеть так:

Листинг 4. Создание четвертого изображения, используя DOM

				
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      var newImage = document.createElement("img");
      newImage.setAttribute("src", "rabbit-hat.gif");
    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" />
   </p>
  </form>                                                                     
 </body>
</html>

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

Как получить родителя первичного изображения

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

Из предыдущих статей вы должны помнить, что DOM представляет web страницу в виде древовидного списка, как иерархию узлов. У каждого узла есть родитель (узел, занимающий более высокое положение, чем его потомки), а иногда, и его собственные потомки. В случае с данным изображением, потомков нет (помните, что изображение – это пустой узел), зато есть родитель. Вас не должно волновать, что собой представляет этот родитель; вы просто должны получить к нему доступ.

Для того чтобы это сделать, вы можете просто воспользоваться parentNode узлами родителя, которые есть у всех узлов DOM, например:

var imgParent = hatImage.parentNode;

Это действительно просто! Вам известно, что у родителя есть потомки, так как один у него уже есть: старое отображение. Кроме этого, вам не нужно знать, является родитель div, или p, или даже body страницы; все это не важно!

Вставка нового изображения

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

insertBefore(newNode, oldNode)
appendChild(newNode)

Так как вам нужно, чтобы новое изображение появилось на месте старого, вы должны insertBefore() (также вы должны будете использовать removeChild()перемещение потомка). Здесь имеется ряд JavaScript, который вы будете использовать для вставки нового изображения перед уже существующим:

var imgParent = hatImage.parentNode;
imgParent.insertBefore(newImage, hatImage);

Сейчас у родителя изображения есть два потомка: новое изображение, которое следует после старого. Здесь важно отметить, что содержание вокруг этого изображения не меняется, и порядок этого содержания остается таким же, как и перед вставкой. Теперь у родителя имеется еще один потомок – новое изображение, которое находиться перед старым.

Перемещение старого изображения

Сейчас вы должны переместить старое изображение; вы хотите получить новое изображение на web странице. Так как у вас есть родитель, сделать это достаточно просто. Вы можете просто вызвать removeChild() и нажать на узел, который хотите переместить, как например:

var imgParent = hatImage.parentNode;
imgParent.insertBefore(newImage, hatImage);
imgParent.removeChild(hatImage);

Сейчас вы заменили старое изображение на новое. Ваш документ HTML должен выглядеть как листинг 5.

Листинг 5. Replacing the old image with the new

				
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      var newImage = document.createElement("img");
      newImage.setAttribute("src", "rabbit-hat.gif");
      var imgParent = hatImage.parentNode;
      imgParent.insertBefore(newImage, hatImage);
      imgParent.removeChild(hatImage);
    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" />
   </p>
  </form>                                                                     
 </body>
</html>

Установка JavaScript

Последнее и может быть самое простое – это соединить форму HTML с указанной функцией JavaScript. Нужно, чтобы showRabbit() функция срабатывала каждый раз, когда пользователь нажимает на кнопку Фокус Покус! Для того чтобы этого достичь, просто дополните вашу страницу HTML onClick обработчиком событий:

<input type="button" value="Hocus Pocus!" onClick="showRabbit();" />

На этом этапе программирования JavaScript,это можно сделать с помощью стандартных действий. Добавьте это на вашу HTML страницу, сохраните страницу, а затем загрузите ее в ваш web-браузер. На начальной стадии страница должна выглядеть так: Рисунок 1; щелкните на Фокус Покус! и вы должны получить такой результат, как на рисунке 3.

Рисунок 3. Должен появиться кролик

В начало

Изменение изображения более легким способом

Если вы вернетесь и просмотрите все действия, которые вы сделали для изменения изображения, а затем пересмотрите все доступные методы, вы, скорее всего, заметите метод, который называется replaceNode(). Этот метод поможет вам заменить один узел на другой. Еще раз рассмотрите предпринятые вами действия:

Создайте новый img элемент.
Получите доступ к родителю (контейнеру) данного img элемента.
Вставьте новый imgэлемент в качестве потомка, прямо перед уже существующим img элементом.
Переместите новый img элемент.
Расположите объекты таким образом, чтобы функцию JavaScript, которую вы создали, пользователь мог вызвать, щелкнув на Фокус Покус!

Вместе с методом replaceNode(), вы можете уменьшить количество действий. Можете совместить 3 и 4 этапы, так что оформление будет таким:

Создайте новый img элемент.
Получите доступ к родителю (контейнеру) данного img элемента.
Замените старый img элемент на только что созданный новый элемент.
Расположите объекты таким образом, чтобы функцию JavaScript, которую вы создали, пользователь мог вызвать, щелкнув на Фокус Покус!

Это может показаться мелочью, но это значительно облегчает процесс. Листинг 6 показывает, каким способом вы можете сделать изменения: перемещением insertBefore() и removeChild() методом вызова.

Листинг 6. Замена старого изображения на новое (в один этап)

				
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      var newImage = document.createElement("img");
      newImage.setAttribute("src", "rabbit-hat.gif");
      var imgParent = hatImage.parentNode;
      imgParent.replaceChild(newImage, hatImage);
    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" onClick="showRabbit();"  />
   </p>
  </form>                                                                     
 </body>
</html>

Изменения опять же не значительные, но они иллюстрируют достаточно важный момент в кодировании DOM: для выполнения какого-либо задания обычно имеется несколько способов. Если вы внимательно рассмотрите все доступные вам способы, то увидите, что в большинстве случаев количество действий с пяти или четырех можно сократить до двух-трех; вы также можете найти более короткий путь для решения задания.

В начало

Изменение изображения действительно легким способом

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

Не забывайте о том, что элемент изображения в значительной степени регулируется его src атрибутом, который приписывается какому-то файлу (или локальному URI или внешнему URL). В настоящий момент вы заменили изображение узла новым изображением; однако, проще просто -- изменить src символы данного изображения! Это объединяет всю работу по созданию нового узла, нахождения родителя узла, и замену старого узла, в один этап:

hatImage.setAttribute("src", "rabbit-hat.gif");

Это все, что нужно сделать! Обратите внимание на листинг 7, который подает это решение в контексте всей web страницы.

Листинг 7. Изменение src символа

				
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "rabbit-hat.gif");
    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" onClick="showRabbit();"  />
   </p>
  </form>                                                                     
 </body>
</html>

Это одна из самых простых вещей в DOM: когда вы обновляете атрибут, web страница сразу же изменяется. Как только изображение укажет на новый файл, браузер загружает файл, и страница обновляется. Вам не нужно ее перезагружать или создавать новый элемент отображения! Результат такой же, как и на рисунке 3, который находится выше (код значительно проще).

В начало

Как спрятать этого кролика

На данный момент, у вас уже есть достаточно неплохо оформленная web страница, но она все еще немного примитивна. И хотя кролик уже выскакивает из шляпы, кнопка в нижней части экрана все еще показывает Фокус Покус! и все еще вызывает функцию showRabbit(). Это значит, что если вы щелкните на кнопку, после того как кролик появился, вы просто зря потратите время на обработку. Кроме того, это совершенно бесполезно, а в бесполезных кнопках нет ничего хорошего. Давайте посмотрим, сможем ли мы использовать DOM, чтобы внести еще несколько изменений и сделать кнопку полезной независимо от того, находится ли кролик в шляпе или уже выскочил из нее.

Изменение текста командной кнопки

Самый простой способ – это поменять текст, после того как пользователь щелкнул на кнопку. Это не означает, что появится что-то волшебное; самое худшее, что может сделать страница, это намекнуть пользователю, что что-то не в порядке. Перед тем как вы сможете изменить знак, вы должны получить доступ к узлу; и прежде чем вы сможете это сделать, вам нужен опознавательный значок, для того чтобы дать ссылку кнопки. К этому времени уже должна быть шляпа, не так ли? Листинг 8 добавляет id атрибуты к кнопке.

Листинг 8. Добавление определяющего атрибута

				
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "rabbit-hat.gif");
    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" id="hocusPocus" 
           onClick="showRabbit();" />
   </p>
  </form>                                                                     
 </body>
</html>

Теперь получить доступ к кнопке вашего JavaScript несложно:

function showRabbit() {
  var hatImage = document.getElementById("topHat");
  hatImage.setAttribute("src", "rabbit-hat.gif");
  var button = document.getElementById("hocusPocus");
}

Для того чтобы изменить значение текста командной кнопки, вы, наверное, уже впечатали следующею строчку JavaScript. Снова, setAttribute() начинает действовать:

function showRabbit() {
  var hatImage = document.getElementById("topHat");
  hatImage.setAttribute("src", "rabbit-hat.gif");
  var button = document.getElementById("hocusPocus");
  button.setAttribute("value", "Get back in that hat!");
}

При помощи этих несложных действий DOM, текст изменится, как только появиться кролик. К этому моменту ваша HTML страница и завершенная showRabbit() должна выглядеть как листинг 9.

Листинг 9. Завершенная web страница

				
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "rabbit-hat.gif");
      button.setAttribute("value", "Get back in that hat!");
    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" id="hocusPocus" 
           onClick="showRabbit();" />
   </p>
  </form>                                                                     
 </body>
</html>

Возвращение кролика в шляпу

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

function hideRabbit() {
  var hatImage = document.getElementById("topHat");
  hatImage.setAttribute("src", "topHat.gif");
  var button = document.getElementById("hocusPocus");
  button.setAttribute("value", "Hocus Pocus!");
}

На самом деле, нужно выполнить те же действия функции showRabbit() только в обратном порядке. Сделайте изображение цилиндра без кролика, нажмите на кнопку, и замените значок на Фокус Покус!

В начало

Работа с обработчиком событий

В этом месте образец приложения имеет один недостаток: несмотря на то, что текст кнопки изменяется, действие, которое следует после нажатия кнопки, не происходит. К счастью, вы можете изменить результат (действие, которое происходит) применив DOM. Итак, если кнопка читает Вернуться к изображению шляпы! при ее нажатии должен появиться текст hideRabbit(). И наоборот, как только кролик исчезает, кнопка возвращается к команде showRabbit().

Избегаем addEventHandler()

Кроме этого onclick свойства, существует другой метод для добавления обработчика событий, например onClick или onBlur; он не случайно называется addEventHandler(). К сожалению, Microsoft ™ Internet Explorer™ не поддерживает этот метод, следовательно, если вы воспользуетесь им в JavaScript, миллионы пользователей Internet Explorer увидят на вашей странице только ошибку (и, возможно, жалобы). Не используйте этот метод. Вы можете получить те же результаты, воспользовавшись методами, описанными в этой статье; они действительно работают с Internet Explorer.

Если вы посмотрите на HTML, то увидите, что событие, с которым вы имеете дело, здесь onClick. В JavaScript, вы можете вызвать это событие, используя onclick свойства кнопки. (Запомните, что в HTML, свойство обычно подается как onClick, с большой буквы C, и в JavaScript, это onclick, все строчные буквы.) Таким образом, вы можете изменить событие, отмеченные на кнопке: вы просто устанавливаете новую функцию onclick свойства.

Однако здесь есть небольшая проблема: onclick свойство должно быть введено вызовом функций (не строкой с именем функции), а ссылкой самой функции. В JavaScript, вы можете давать ссылку функции, используя ее имя, и без каких-либо вводных слов или фраз. Следовательно, функцию, которая запускается нажатием кнопки, вы можете поменять на:

button.onclick = myFunction;

В вашем документе HTML делать такие изменения очень просто. Проверьте листинг 10, который переключает функции запускаемые кнопкой.

Листинг 10. Изменение функции выбора кнопки

				
<html>
 <head>
  <title>Magic Hat</title>
  <script language="JavaScript">
    function showRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "rabbit-hat.gif");
      var button = document.getElementById("hocusPocus");
      button.setAttribute("value", "Get back in that hat!");
      button.onclick = hideRabbit;
    }

    function hideRabbit() {
      var hatImage = document.getElementById("topHat");
      hatImage.setAttribute("src", "topHat.gif");
      var button = document.getElementById("hocusPocus");
      button.setAttribute("value", "Hocus Pocus!");
      button.onclick = showRabbit;                                           
    }
  </script>
 </head>

 <body>
  <h1 align="center">Welcome to the DOM Magic Shop!</h1>
  <form name="magic-hat">
   <p align="center">
    <img src="topHat.gif" id="topHat" />
    <br /><br />
    <input type="button" value="Hocus Pocus!" id="hocusPocus" 
           onClick="showRabbit();" />
   </p>
  </form>                                                                     
 </body>
</html>

Это завершенное, готовое для пользования приложение DOM. Попробуйте и сами увидите!

В начало

В заключение

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

Несмотря на то, что это последняя статья из серии, посвященной Объектной Модели Документов, вы увидите еще не одну статью о DOM. На самом деле, вам будет непросто работать с Ajax и JavaScript без применения DOM, по крайней мере, в некоторых аспектах. Создаете ли вы сложные эффекты перемещения или выделения, или же просто работаете с текстовыми блоками и изображениями, DOM предоставляет вам доступ к web странице действительно легким способом.

Если вы чувствуете, что некоторые моменты использования DOM вам все еще не понятны, найдите время и пересмотрите эти три статьи; в остальных статьях DOM будет использоваться практически без пояснений, и вы, конечно же, не хотите запутаться в деталях и упустить важную информацию о других понятиях, как, например XML или JSON. Не сомневайтесь в том, что сможете без проблем применить DOM, сможете сами написать несколько основанных на DOM приложений, и будете готовы к решению проблем, связанных со структурой данных, которые мы будем обсуждать через несколько месяцев.

В начало

Загрузка

Полные примеры, включая код HTML и рисунки

Описание	Имя	Размер	Метод загрузки
Только графические примеры	wa-ajaxintro6/ajax_6-images_download.zip	91 KB	HTTP
wa-ajaxintro6/ajax_6-complete_examples.zip	93 KB	HTTP


	Информация о методах загрузки

Ресурсы

Научиться

Оригинал статьи Mastering Ajax, Part 6: Build DOM-based Web applications.
Использование DOM для web-откликов и Предварительные запросы и отклики в Ajax: Из этой серии прочитайте первую и вторую статьи о программировании DOM, или просмотрите все статьи о Mastering Ajax .
"Создайте динамические приложения Java " (Филипп Маккарти, разработка, сентябрь 2005): изучите Ajax, используя Java ™.
"Размещение объектов Java по частям для Ajax" (Филипп Маккарти, разработка, октябрь 2005): Изучите, как нужно распространять объекты по сети; взаимодействовать с Ajax, соответственно с Java.
"Вызов web-сервера SOAP с Ajax" (Джеймс Снил, разработка, октябрь 2005): Изучите эту актуальную статью об объединении Ajax и web-сервера, основанного на SOAP; вы сможете узнать, как применить web-браузер, размещенный на web-сервисах SOAP, используя конструктивные шаблоны Ajax.
Домашняя страница DOM во всемирном web консорциуме: Зайдите на базовою страницу, для получения полной информации о DOM.
Функциональные требования DOM 3 Уровня: Из доступных видов и свойств для использования DOMс различных языков, определите основу Объектной Модели Документов.
Создание языка ECMAScript для DOM: Если вы программист, работающий с JavaScript и хотите использовать DOM с вашего кода, это приложение к определению основной части Объектной Модели Документов Уровня 3, наверняка, вас заинтересуют.
"Ajax: Новый подход к web приложениям" (Джеси Джеймс Керрет, Adaptive Path, февраль 2005): Прочитайте статью, которая раскрывает имя Ajax. С этой статьей должны ознакомиться все разработчики Ajax.
web область создания разработок: Вы можете расширить свои знания в области web-разработок при помощи статей, учебных пособий, форумов других источников.
технические события developerWorks and Webcasts: Получайте информацию обо всех конференциях (о программных продуктах) для технических разработчиков.

Получить продукты и технологии

Head Rush Ajax, Бред Маклафлин (O'Reilly Media, 2006): Запомните основные идеи этой статьи, Head First style.
Java и XML, Второй выпуск (Бред Маклафлин, O'Reilly Media, Inc., 2001): Просмотрите исследования автора о трансформации XHTML и XML.
Основное руководство (Дэвид Фленеген , O'Reilly Media, Inc., 2001): Внимательно изучите инструкции по работе с JavaScript и динамическими web страницами. Следующий выпуск содержит еще две главы о Ajax.
Head First HTML с CSS и XHTML (Элизабет и Эрик Фриманы, O'Reilly Media, Inc., 2005): Узнайте больше информации о нормированных страницах HTML и XHTML, и как применять CSS для HTML.
пробная программа IBM : Создайте свой следующий проект на основе компьютерной программы, которую можно загрузить непосредственно с developerWorks.

Обсудить

Блоги developerWorks : Станьте членом сообщества developerWorks.
Ajax форум developerWorks: Изучите, обсудите, разместите на этом форуме для web разработчиков информацию, необходимую для изучения и использования AJAX.

Об авторе


		Брэт Маклафлин работает с компьютерами со времен Logo (помните маленький треугольник?). За последние несколько лет он стал одним из наиболее известных авторов и программистов сообщества по технологиям Java и XML. Он работал в Nextel Communications над реализацией сложных корпоративных систем, в Lutris Technologies, фактически, над созданием сервера приложений, а с недавнего времени - в O'Reilly Media, Inc., где продолжает писать и редактировать книги по данной тематике. Его готовящаяся книга "Head Rush Ajax" рассматривает инновационный подход "Вперед головой" к изучению Ajax; она пишется совместно с известными соавторами Эриком и Бет Фримэн. Его недавняя книга "Java 5.0 Tiger: Заметки разработчика" является первой доступной книгой по новейшей технологии Java, а его классическая "Java и XML" остается одной из наиболее авторитетных работ по использованию технологий XML в языке программирования Java.