megafon4u.ru

Когда-то давно, еще до появления CSS, мы были вынуждены смешивать в HTML-страницах стилевую разметку со структурой документа. Эти воспоминания заставят содрогнуться любого, кто создавал тогда страницы. Потом пришел CSS. Он позволил отделить стилистическую информацию от структуры документа. Благодаря ему стало возможным полностью изменить стиль отображения страницы путем простой замены таблицы стилей.
Это был очень важный шаг. HTML-код стал проще и понятнее. Однако стилевая разметка это не единственное, что засоряет код страницы. До сих пор можно увидеть такое:

<input type="text"  value="текст" onclick="this.value=''" />

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

<input type="text"  value="текст" id="pole"  />

Эта надпись выглядит проще. Теперь во внешнем файле сценария запишем такие строчки:

window.onload=function(){
  document.getElementById('pole').onclick=clear;
}
function clear(){
  document.getElementById('pole').value='';
}

Сначала мы привязываем обработчик события к полю input, а затем предписываем, что оно должно делать в ответ на действия пользователя.
Ненавязчивый JavaScript - это мощная методика, позволяющая разделить обязанности в веб-приложениях, но за это приходится платить. Для достижения поставленной цели нам потребовалось добавить немного больше строк кода. Однако борьба за чистоту кода не единственная причина, по которой нам нужно использовать данную технику. Существует огромное количество движков (систем управления содержимым, к примеру DRUPAL), которые не позволяют встроить обработчики в HTML-код страницы. Тут на выручку как раз и приходит ненавязчивый JavaScript. Благодаря ему разработчик опять начинает чувствовать полную власть над каждым элементом веб-страницы.
Если вы решили на своем сайте использовать библиотеку jQuery, то код можно будет сократить:

$(function(){
  $('#pole').bind('click',function(event)  {$('#pole').val('')});
  });

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