Ненавязчивый JavaScript (англ. Unobtrusive JavaScript) является относительно новой техникой в программировании на языке JavaScript, используемой в Вебе. Этот термин был изобретен в 2002 году Стюартом Лэнгриджем.[1] Хотя он официально не определён, под его принципами обычно понимаются следующие:
- отделение функциональности веб-страницы («уровень поведения») от структуры, содержания и представления Web-страницы;[2]
- лучшие практики по избежанию проблем традиционного программирования на JavaScript (таких как зависимость от браузера и недостаток маcштабируемости);
- постоянное совершенствование по поддержке пользовательских агентов, которые могут не в полной мере поддерживать функциональность JavaScript.[3]
Предпосылки появления парадигмы
JavaScript давно имел репутацию языка, непригодного для серьёзного применения и развития. Такая ситуация складывалась в основном из-за несовместимых реализаций языка и Document Object Model в различных браузерах. Недавнее появление стандартизированных браузеров возвело JavaScript в рамки высококачественного средства отладки, в результате стало возможным организовать масштабируемость JavaScript кода, а появление интерфейсов AJAX и Веб 2.0сделали это необходимым.
Если JavaScript была зарезервирована для относительно простых и важных задач, таких, как форма подтверждения и декоративные новинки, то в настоящее время язык используются для создания основной функциональности сайта. Ненавязчивый JavaScript можно рассматривать как часть более широкого движения веб-стандартов; в основном, поскольку спрос на кросс-совместимость браузера привел к усилению акцента на стандартизированные разметки и стиль, увеличился спрос на Rich Internet Applications, это вызывало движение в направлении более надежных методов в ненавязчивом JavaScript.
Отделение поведения от разметки
Традиционно вызовы функций JavaScript размещались непосредственно в разметке документа. Пример ниже иллюстрирует типичную реализацию валидацию поля формы:
<input type="text" name="date" onchange="validateDate(this);" />
Однако разметка предназначена для описания структуры документа, но не его поведения. Сочетание же этих посылов ведёт к ухудшению поддерживаемости сайта. Происходит это по той же причине, что и смешивание структуры и представления: если сайт содержит сотни полей с датами, добавление соответствующего атрибута onchange к каждому (и модификация их позже в случае необходимости) может оказаться трудоёмкой процедурой. Кроме того, смешивание структуры и поведения ведёт к повышению требований к профессиональным качествам человека, который будет этим заниматься.
Ненавязчивое решение заключается в программной установке обработчиков событий. Обычно это достигается логическим выделением элементов, для которых необходим тот или иной обработчик в класс с последующей обработкой:
<input type="text" class="validatedDate" />
Скрипт может просматривать все элементы input, относящиеся к классу validatedDate и устанавливать для них нужный обработчик:
window.onload = function(){ var inputs = document.getElementsByTagName('input'); for(var i = 0, l = inputs.length; i<l; i++){ input = inputs[i]; if(input.name && (input.className.indexOf('validatedDate') > -1) ){ input.onchange = function(){ validateDate(); }; } } }; function validateDate(){ // логика обработчика }
Следующий скрипт специфичен для библиотеки JavaScript jQuery:
$(document).ready(function(){ $('input.validatedDate').bind('change', validateDate); }); function validateDate(){ // логика обработчика }
Поскольку атрибут class отражает семантическую роль элемента, такой подход согласуется с рекомендациями W3C, основанными на современных стандартах.
Примечания
- ↑ Лэнгридж, Стюарт Ненавязчивый DHTML и мощь маркированных списков (2002-11). Проверено 4 июня 2009.(англ.)
- ↑ Кейт, Джереми Отделение поведения (2006-06-20). Проверено 4 июня 2009.(англ.)
- ↑ Олсон, Томми Изящная деградация и постоянное совершенствование (2007-02-06). Проверено 4 июня 2009.(англ.)
разбор GET запроса средствами JavaScript
GET запросы (запросы через адресную строку) можно легко разбирать при помощи JavaScript. Продемонстрирую это на следующем примере: напишите в адресной строке любые параметры в формате?параметр=значение&параметр=значение...переменные GET запроса:
var tmp = new Array(); // два вспомагательных var tmp2 = new Array(); // массива var param = new Array(); var get = location.search; // строка GET запроса if(get != '') { tmp = (get.substr(1)).split('&'); // разделяем переменные for(var i=0; i < tmp.length; i++) { tmp2 = tmp[i].split('='); // массив param будет содержать param[tmp2[0]] = tmp2[1]; // пары ключ(имя переменной)->значение } var obj = document.getElementById('greq'); // вывод на экран for (var key in param) { obj.innerHTML += key+" = "+param[key]+""; } } Ключевым значением является location.search (см. статью про tag base).
gorniy 22.05.09 23:11
А вот как теперь кракозябры %EF%E0%F0%E0%EC%E5%F2%F0 = %E7%ED%E0%F7%E5%ED%E8%E5 в нормальный текст превратить?
mvn_2000 13.08.09 07:39
м.б. так:
<html><body>
<script>function q (s) { s = decodeURIComponent(s); alert(s); }</script>
<a href="javascript:q('%EF%E0%F0%E0%EC%E5%F2%F0 = %E7%ED%E0%F7%E5%ED%E8%E5');">test</a>
</body></html>
Практически на каждом сайте можно видеть ссылки, содержащие в себе параметры после знака "?", например, http://some.site.com/?id=1. Обычно обработкой таких параметров занимается серверный скрипт, но иногда возникает необходимость узнать эти параметры внутри JavaScript. О том, как это сделать, и пойдёт рассказ сегодня.
Что представляют из себя, так называемые, GET-параметры? На самом деле - это просто строка адреса, но принято, что если в URL-е встречается символ "?", то все символы после него являются параметрами. Трактовка параметров - стандартна: сначала идёт название переменной, потом символ "=", потом значение переменной, переменные разделяются символом "&". Узнать текущий адрес в JavaScript можно прочитав значение window.location. Парсить строку после "?" придётся в два прохода: сначала разбить на группы "переменная=значение", а потом уже разбить на составные части.
Разбиение строки параметров облегчается тем, что в JavaScript имеется специальная строковая функция -split(), результатом которой будет массив строк. Для того, чтобы её использовать, сначала необходимо создать обьект String, так как данная функция является методом этого обьекта. Делается это просто:
someVar = new String("some text");Затем делим строку на подстроки:
someArray = someVar.split("x");Где "x" - символ деления строки на подстроки. Для того, чтобы найти в строке какой-либо символ, необходимо воспользоваться ещё одной строковой функцией - indexOf():
someVar.indexOf('?');Ввод в теорию закончен. Приступим к практике. Я решил, что все GET-переменные стоит хранить в двух отдельных глобальных массивах: один хранит названия, другой - значения. К сожалению JavaScript не поддерживает ассоциативные массивы, поэтому воспользуемся указанным мною способом. Также необходимо сохранить количество GET-переменных. Конечно, всегда можно вызвать функцию подсчёта размера массива, но стилистически мой метод лучше. И так, глобальные переменные и массивы:
var _GET_Keys; // Пока что пустой массив var _GET_Values; var _GET_Count = 0; // элементов пока нет var _GET_Default = '';Значение переменной _GET_Default будет обьяснено позже. Далее создам функцию get_parseGET(), которая будет парсить URL и создавать массивы с переменными. В самом начале функция создаёт обьектString и проверяет в нём наличие символа "?":
get = new String(window.location); x = get.indexOf('?'); if(x!=-1) { // здесь будет основной код } else ;Далее вырезаем часть строки, находящуюся после найденного символа:
l = get.length; get = get.substr(x+1, l-x);Теперь делим строку на группы "переменная=значение", вычисляем общее количество переменных и подготавливаемся к создаиню необходимых массивов:
l = get.split('&'); x = 0; _GET_Count = l.length; _GET_Keys = new Array(_GET_Count); _GET_Values = new Array(_GET_Count);И в заключение разделяем полученные группы на два массива с именами переменных и их значениями:
for(i in l) { get = l[i].split('='); _GET_Keys[x] = get[0]; _GET_Values[x] = get[1]; x++; }В данном примере используется конструкция for .. in, перебирающая все элементы массива. Синтаксис данной конструкции:
for ( key in array ) { // Ваши действия }где key - название ключа, которое будет выбрано из массива array. В теле цикла к текущему элементу можно бдует обратиться array[key].
Вторая функция из библиотеки - get_fetchVar(key), позволяет узнать значение заданной GET-переменной. Работает простым перебором массива _GET_Keys. Если ключ не найден, то возвращает значение _GET_Default, которое упоминалось выше. Хочу заметить, что значение _GET_Default вовсе НЕ обязательно менять в самой библиотеке - при необходимости, это можно сделать в Вашем HTML-коде:
<script language="JavaScript">_GET_Default="tra la la";</script>В самом конце скрипта следует вызов get_parseGET(); и на этом библиотека заканчивается. Вы можетескачать библиотеку и посмотреть её в действии.
источник: www.erased.info
Пятое издание бестселлера «JavaScript. Подробное руководство» полностью обновлено. Рассматриваются взаимодействие с протоколом HTTP и применение технологии Ajax, обработка XML-документов, создание графики на стороне клиента с помощью тега , пространства имен в JavaScript, необходимые для разработки сложных программ, классы, замыкания, Flash и встраивание сценариев JavaScript в Java-приложения.
Часть I знакомит с основами JavaScript. В части II описывается среда разработки сценариев, предоставляемая веб-броузерами. Многочисленные примеры демонстрируют, как генерировать оглавление HTML-документа, отображать анимированные изображения DHTML, автоматизировать проверку правильности заполнения форм, создавать всплывающие подсказки с использованием Ajax, как применять XPath и XSLT для обработки XML-документов, загруженных с помощью Ajax. Часть III – обширный справочник по базовому JavaScript (классы, объекты, конструкторы, методы, функции, свойства и константы, определенные в JavaScript 1.5 и ECMAScript v3). Часть IV – справочник по клиентскому JavaScript (API веб-броузеров, стандарт DOM API Level 2 и недавно появившиеся стандарты: объект XMLHttpRequest и тег ).
Год выпуска: 2008
Автор: Дэвид Флэнаган
Издательство: Символ-Плюс
ISBN-10: 5-93286-103-7
ISBN-13: 978-5-93286-103-5
Формат: PDF
Качество: eBook (изначально компьютерное)
Количество страниц: 982
Размер: 15.41 MB