Ненавязчивый JavaScript

Ненавязчивый 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, основанными на современных стандартах.

Примечания

1. ↑ Лэнгридж, Стюарт Ненавязчивый DHTML и мощь маркированных списков (2002-11). Проверено 4 июня 2009.(англ.)
2. ↑ Кейт, Джереми Отделение поведения (2006-06-20). Проверено 4 июня 2009.(англ.)
3. ↑ Олсон, Томми Изящная деградация и постоянное совершенствование (2007-02-06). Проверено 4 июня 2009.(англ.)

источник: http://ru.wikipedia.org/wiki/Ненавязчивый_JavaScript

Read more

разбор GET запроса средствами JavaScript

разбор 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://www.easywebscripts.net/javascript/get.php

Read more

JavaScript и GET-параметры

Практически на каждом сайте можно видеть ссылки, содержащие в себе параметры после знака "?", например, 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

источник: http://www.compdoc.ru/internet/java/get_parameters/

Read more

JavaScript. Подробное руководство, 5-е издание :: Дэвид Флэнаган

Пятое издание бестселлера «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

Read more