| Индекс материала |
|---|
| Введение в Prototype |
| Функция $() |
| Функция $$() |
| Методы обхода DOM-документа |
| Создание нового элемента и вставка его в DOM |
| Удаление элемента из DOM |
| Все страницы |
Prototype – это JavaScript фреймворк, применяемый для разработки кроссбраузерных приложений по технологии Ajax.
Загрузка и установка
Весь фреймворк описан в одном файле, таким образом, чтобы начать его использовать, вам нужно просто подгрузить этот файл в ваш html код.
Начнем с того, что скачаем Prototype. Официальная страничка фреймворка http://prototypejs.org. Скачать текущую версию можно по адресу: http://prototypejs.org/download. Файл, который вы скачаете, будет называться примерно так: prototype-1.6.0.2.js, где цифры указывают на номер версии фреймворка. Этот файл, в последствии, нужно будет сохранить вместе с файлами вашего проекта.
Для удобства можно создать каталог “js” в корне проекта, где будут храниться все ваши JavaScript программы, и сохранить здесь библиотеку фреймворка, переименовав ее в prototype.js. Таким образом, если ваш сайт www.site.by, файл фреймворка будет доступен по адресу www.site.by/ js/prototype.js.
Подключаем Prototype
Итак, нужная библиотека у нас есть, и теперь настало время опробовать ее в деле. Как и любой сценарий на javaScript, Prototype легко подгружается в html код станицы. Загрузка фреймворка выглядит следующим образом:
<html>
<head>
<title>Загрузка Prototype и определение версии библиотеки</title>
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript">
alert('Prototype ' + Prototype.Version + ' загружен');
</script>
</head>
<body>
</body>
</html>
Код, приведенный выше, вызывает окно, в котором выводится информация о версии Prototype.
Документация
На официальном сайте фреймворка опубликована неплохая подборка материалов по API. Вам стоит ознакомиться с данными материалами, кат как к ним можно всегда обратиться для решения тех или иных вопросов, которые будут возникать в ходе разработки под Prototype.
Функция $()
Функция $() имеет схожие возможности с document.getElementById() (традиционный способ извлечения DOM-элемента через JavaScript) за исключением дополнительных функциональных особенностей, которые привносит Prototype. Данные дополнения – это набор методов для каждого элемента, которые упрощают процесс разработки программного кода.
Функция $() принимает как один, так и несколько входных параметров. Если задан только один аргумент функции, то результатом так же будет один выходной элемент. Если на вход пришло несколько значений, то результатом будет массив выходных элементов.
Для извлечения одного (нескольких) элементов с помощью $(), можно использовать в качестве параметра функции ID элемента, либо сам элемент.
Код ниже – пример использования $(). В этом скрипте производится извлечение DIV с ID exampleDiv и изменение содержимого данного DIV’а с помощью функции update().
<html>
<head>
<title>Извлечение элемента функцией $() и его модификация</title>
<script type="text/javascript" src="/js/prototype.js"></script>
</head>
<body>
<div id="exampleDiv"></div>
<script type="text/javascript">
$('exampleDiv').update('Содержимое DIV изменено!');
</script>
</body>
</html>
<html>
<head>
<title>Проверка на существование элемента</title>
<script type="text/javascript" src="/js/prototype.js"></script>
</head>
<body>
<div id="exampleDiv"></div>
<script type="text/javascript">
var elt = $('exampleDiv');
if (elt)
elt.update('Содержимое DIV изменено!');
</script>
</body>
</html
При разработке собственной функции для работы с DOM-элементами ее можно унифицировать с помощью функции $(), чтобы избежать лишней проверки на предмет, что передано в качестве аргумента ID или сам элемент. В следующем примере представлена пользовательская функция и два различных способа ее вызова:
<html>
<head>
<title>Используем $() для расширения возможностей функции</title>
<script type="text/javascript" src="/js/prototype.js"></script>
</head>
<body>
<div id="exampleDiv"></div>
<script type="text/javascript">
function myFunction(elt, message)
{
elt = $(elt);
elt.update(message);
}
myFunction('exampleDiv', 'Div обновлен');
myFunction($('exampleDiv'), 'Div снова обновлен');
</script>
</body>
</html>
Функция $$()
Это одна из наиболее значимых функций представленных в Prototype. Она позволяет делать выборку множества элементов из DOM-документа по средствам CSS меток. Функция всегда возвращает массив найденных элементов, отсортированный в порядке их следования в HTML документе.
Чтобы лучше понять суть работы функции $$() давайте обратимся к примерам:
- $$(‘img’) – производит выборку всех элементов изображений в документе
- $$('#container a') – производит выборку всех ссылок с ID=container
- $$('div.someClass input[type=submit]') – возвращает все элементы типа submit (кнопки), которые находятся внутри DIV’a с классом someClass
Если в результате поиска ни один из элементов не найден, функция вернет пустой массив.
Следующий пример демонстрирует работу функции $$(). В этом скрипте производится перебор найденных элементов и присвоение им порядкового номера.
<html>
<head>
<title>Выборка нескольких элементов через функцию $$()</title>
<script type="text/javascript" src="/js/prototype.js"></script>
</head>
<body>
<div>
<ul id="someElement">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="exampleDiv"></div>
<script type="text/javascript">
var items = $$('#someElement li');
for (var i = 0; i < items.size(); i++) {
items[i].update('Элемент ' + i);
}
</script>
</body>
</html>
При работе с $$() можно использовать более одного входного параметра, что позволяет производить извлечение объектов, применяя составные CSS метки в качестве аргументов.
Метод select()
Метод select() – одна из расширенных функций представленных в Prototype (ранее метод носил название getElementsBySelector()). Теперь, как и функция $$() , этот метод поддерживает одну или несколько CSS меток в качестве входных параметров. Ключевое отличие от $$() – select производит поиск только внутри элемента, для которого он вызван.
В предыдущем примере мы использовали ID элемента для ускорения поиска. Синтаксис был таким: $('#someId .someClass'). Если применять для этих же целей метод select, то код будет следующим: $('someId').select('.someClass').
Модифицируем предыдущий скрипт – воспользуемся select вместо $$().
<html>
<head>
<title>Используем select() для поиска объектов внутри некоторого элемента</title>
<script type="text/javascript" src="/js/prototype.js"></script>
</head>
<body>
<div>
<ul id="someElement">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="exampleDiv"></div>
<script type="text/javascript">
var elt = $('someElement');
var items = elt.select('li');
for (var i = 0; i < items.size(); i++) {
items[i].update('Элемент ' + i);
}
</script>
</body>
</html>
Методы обхода DOM-документа
В дополнении к функциям $$() и select(), производящим извлечение объектов из DOM, в Prototype представлены дополнительные методы, позволяющие работать с объектами странички: up(), down(), next() и previous(). С помощью этих функций вы легко сможете обратиться к элементу связанному с текущим.
В отличие от $$() и select(), каждый из этих методов возвращает только один элемент. По этой причине вполне уместным будет использование цепочки данных методов, т.е. одновременный вызов нескольких функций.
Метод up()
Данный метод применяется для поиска элементов по структуре дерева DOM документа. Если вызвать функцию up() без каких-либо параметров, то в качестве результата будет возвращен родительский элемент по отношению к текущему.
Если вам нужно извлечь не прямого родителя объекта, а какой-либо из элементов более высокого уровня, стоит в качестве аргумента функции задать индекс нужного элемента. К примеру, up(0) извлечет родительский элемент, up(1) - вернет элемент на уровень выше родительского, up(2) – на 2 уровня выше родительского.
В качестве альтернативы можно использовать CSS метки, чтобы получить доступ к нужному объекту. В этом случае, функция вернет первый элемент соответствующий критериям выборки. Например, у вас есть картинка внутри таблицы (<table><tr><td> <img /> </td></tr></table>), можно воспользоваться imgElt.up('table') для извлечения объекта таблицы, в то время как вызов функции без параметра imgElt.up() привел бы нас к элементу <td>.
Допускается совместное использование числовых индексов и CSS меток. К примеру, если существует изображение внутри двух div-тегов и стоит задача получить доступ к внешнему div’у. Такую задачку можно решить вызвав up() со следующими параметрами: imgElt.up('div', 1). Если бы вместо 1 был указан 0, то функция вернула бы внутренний div, т.е. ближайший к изображению.
Следующий код демонстрирует несколько примеров использования метода up().
<html>
<head>
<title>Пример использования up()</title>
<script type="text/javascript" src="/js/prototype.js"></script>
</head>
<body>
<div id="main" class="foo">
<table class="foo">
<tr>
<td>
<a href="#"><img src="/someImage.png" id="someImage" /></a>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var img = $('someImage');
// несколько эквивалентных способов получить доступ к ссылке:
var link = img.up();
var link = img.up(0);
var link = img.up('a');
// доступ кячейке
var cell = img.up(1);
var cell = img.up('td');
// класс foo используется в двух различных случаях
var table = img.up('.foo');
var div = img.up('.foo', 1);
</script>
</body>
</html>
Метод down()
Назначение метода down() противоположно up(). Данный метод производит поиск потомков текущего элемента. Т.е. поиск производится не вверх по дереву DOM, а вниз – вглубь.
Как и метод up(), этот метод может быть вызван без параметров, с параметром в качестве числового индекса или CSS метки, либо в комбинированном режиме.
Принцип работы метода down() очень похож на метод select(), рассмотренный ранее, за тем лишь исключением, что down() возвращает только один единственный объект. Потому, стоит отметить, что someElt.down('.foo') более эффективный способ получить доступ к единичному объекту, нежели someElt.select('.foo')[0].
Важно знать, что если попытаться обратиться через метод select() к какому-то конкретному элементу и так окажется, что он не существует, select() вернет ошибку. При использовании для этих целей метода down(), подобное не произойдет.
Небольшой пример работы с методом down().
<html>
<head>
<title>Пример работы метода down()</title>
<script type="text/javascript" src="/js/prototype.js"></script>
</head>
<body>
<div id="main" class="foo">
<table class="foo">
<tr>
<td>
<a href="#"><img src="/someImage.png" id="someImage" /></a>
</td>
<td>
Second cell
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var div = $('main');
// Несколько способов поиска элемента table
var table = div.down();
var table = div.down('table');
var table = div.down('.foo');
// Попытка обращения к конкретному элементу
var secondCell = div.down('td', 1);
// Составной запрос
var image = div.down('table.foo a img#someImage');
</script>
</body>
</html>
Для работы с элементами одного уровня используются методы next() и previous(). Суть их работы вытекает из названия – next() осуществляет переход к следующему элементу по отношению к текущему, в то время как previous() возвращает элемент, который находится перед текущим.
Оба метода поддерживают те же аргументы, что и методы up() и down().
<html>
<head>
<title>Используем next() и previous() для поиска одноуровневых элементов</title>
<script type="text/javascript" src="/js/prototype.js"></script>
</head>
<body>
<div>
<ul>
<li id="first">First item</li>
<li id="second">Second item</li>
<li id="third">Third item</li>
<li id="fourth">Fourth item</li>
<li id="fifth">Fifth item</li>
</ul>
</div>
<script type="text/javascript">
var secondElement = $('first').next();
var secondElement = $('third').previous();
var thirdElement = $('third').previous().next();
// следующий вызов функции вернет null
//так как #fifth последний элемент этого уровня
var nullElement = $('fifth').next();
</script>
</body>
</html>
Поскольку вызов любой из функции up(), down(), next() или previous() приводит к обращению к одному элементу, допускается использование цепочечных вызовов этих методов.
Например, если выполнить такой код elt.down().up(), то в результате получим текущий элемент elt, но данное утверждение неверно для такого вызова: elt.up().down(). В этом случае результатом не всегда может оказаться текущий элемент; все зависит от порядка следования элементов включенных в объект elt. Аналогично, elt.next().previous() так же вернет elt.
Существуют примеры и более полезного применения цепочечных вызовов. Например, если вам необходимо найти все элементы одного уровня можно воспользоваться elt.next(someSelector) для извлечения всех предшествующих элементов текущему, а конструкцией elt.previous(someSelector) найдем все последующие элементы этого уровня.
Стоит отметить, что следует аккуратно подходить к вопросу использования цепочечных команд. Так как довольно часто, при не продуманном написании кода, одна из функций цепочки может приводить к возникновению ошибки. Как правило, в тех случаях, когда происходит обращение к несуществующему элементу.
Начиная с версии 1.6.0 в Prototype появились инструменты облегчающие процесс создания новых DOM-элементов, которые, в последствии, одинаково хорошо воспринимаются всеми браузерами. DOM-элементы создаются как сущности класса Element. В конструктор класса передаются два аргумента: первый – тип элемента, второй – атрибуты создаваемого элемента.
Приведенный ниже, скрипт демонстрирует динамический процесс создания гиперссылки (эквивалент стандартного тега <a>). В этом примере, для задания текста ссылки используется метод update(), а с помощью insert() мы внедряем созданный тег в код документа.
<html>
<head>
<title>Создание нового элемента в DOM</title>
<script type="text/javascript" src="/js/prototype.js"></script>
</head>
<body>
<div id="main">
<div>Some item</div>
</div>
<script type="text/javascript">
var attrs = {
href : 'http://www.example.by',
target : '_blank'
};
var link = new Element('a', attrs);
link.update('Посетите этот сайт');
$('main').insert(link);
</script>
</body>
</html>
Итак, если бы html-документ, который был создан нами динамически, писался вручную, получилось бы следующее:
Когда мы использовали код $('main').insert(link), что эквивалентно $('main').insert({ bottom : link }), элемент <a> был вставлен в конец кода, как последний дочерний тег. Чтобы сделать его первым, т.е. сделать так, что ссылка будет перед div’ом с текстом “Some item”, нужно немного изменить параметры вызываемого метода на следующие: $('main').insert({ top : link }). В результате html-код примет вид:
Чтобы вставить ссылку перед div’ом с id = main, следует снова изменить атрибуты метода insert(). Теперь код будет выглядеть так: $('main').insert({ before : link }). Тогда html-код будет следующим:
И наконец, если нужно чтобы ссылка была после main div’а. Переписываем метод: $('main').insert({ after : link }). В результате получаем:
Стоит отметить, что метод insert() допускает использование html-кода в качестве своего аргумента. Тогда создание нового элемента, в нашем случае ссылки, может быть осуществлено следующим образом.
<html>
<head>
<title>Создание нового элемента в DOM</title>
<script type="text/javascript" src="/js/prototype.js"></script>
</head>
<body>
<div id="main">
<div>Some item</div>
</div>
<script type="text/javascript">
$('main').insert('<a href="http://www.example.by" target="_blank">Посетите этот сайт</a>');
</script>
</body>
</html>
Удаление элемента из DOM
Последнее, что стоит рассмотреть в рамках темы управления элементами DOM, так это удаление объектов. Данная задача решается с помощью вызова метода remove() для элемента, который необходимо удалить.
При вызове данного метода в качестве результата своей работы он возвращает удаленный элемент, таким образом, по необходимости вы можете сохранить удаляемый объект, а потом восстановить его, если, например, стоит задача на время его скрыть.
Сразу хочу отметить, что решения задачи со скрытием элемента правильнее будет использовать специализированные функции фреймворка Prototype – это hide() и show(). Функцию remove() стоит использовать только с целью избавиться от ненужного объекта. Следующий пример демонстрирует remove() в действии.
<html>
<head>
<title>Удаление элемента из DOM с помощью метода remove()</title>
<script type="text/javascript" src="/js/prototype.js"></script>
</head>
<body>
<div id="main">
<div>Some item</div>
</div>
<script type="text/javascript">
$('main').remove();
</script>
</body>
</html>