Лаб 2 (1075651), страница 5
Текст из файла (страница 5)
Для примера возьмем ту же задачуподсветки параграфов и реакции на нажатие на параграф, которая быларассмотрена с использованием «чистого» Javascript.<!DOCTYPE html><html><head><title>Вывод структуры страницы.</title><meta charset="utf-8" /><style>#result {font-style: italic;}div.text p { margin: 0 5px 5px 5px; background-color:yellow}</style><script src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("div.text p").mouseover(function(){this.style.backgroundColor = "green";}).mouseout(function(){this.style.backgroundColor = "yellow";}).click(function () {// По идентификатору находим элемент, в который надо поместить результат$("#result").html("<hr/><p>"+Date()+"</p>" +"<" + this.nodeName + ">" + this.textContent +"<p>Вывод завершен!</p><hr/>");})})</script></head><body><div><h1>События HTML</h1><p>Нажмите на текст любого параграфа</p></div><div class="text"><p>1.
Параграф внутри интересующего нас div !</p><p>2. Параграф внутри интересующего нас div !!</p></div><div class="text"><p>3. Параграф внутри интересующего нас div !!!</p><p>4. Параграф внутри интересующего нас div !!!!</p></div><!-- Сюда поместим результат --><div id="result"></div></body></html>Следует обратить внимание на то, что в этом случае HTML-разметка несодержит декларации обработчиков. Назначение обработчиков происходит избиблиотеки jQuery при помощи соответствующих свойств DOM-модели,однако доступ к ним осуществляется через методы самой библиотеки.Обратите внимание на то, что метод $(document).ready вызывается толькопосле того, как браузером загружен весь код страницы и всех подключаемыхjs-файлов. Только после этого можно безопасно назначить обработчики.
Всоответствии с принципами jQuery их назначение производится через селектор$("div.text p").mouseover(function(){…}Полезная статья об использовании jQuery: http://habrahabr.ru/post/149349/31Библиотека DojoБиблиотека предназначена для полноценного программирования клиентскихприложений. Включается в себя как средства манипулирования с объектами,так и средства для декларативного описания элементов страницы, а такжесредства для динамического создания графических управляющих элементов настранице.Рассмотрим пример назначения обработчиков событий средствами Dojo.<!DOCTYPE html><html><head><title>Вывод структуры страницы.</title><meta charset="utf-8" /><style>#result {font-style: italic;}div.text p { margin: 0 5px 5px 5px; background-color:yellow}</style><script src="dojo/dojo.js"data-dojo-config='async: true, parseOnLoad: false'></script><script type="text/javascript">require(["dojo/ready", "dojo/query"], function(ready, query){ready(function(){query("div.text p").forEach(function(node){node.onmouseover = function(){this.style.backgroundColor = "green";}node.onmouseout = function() {this.style.backgroundColor = "yellow";};node.onclick = function () {//По идентификатору находим элемент, куда следует поместить результатquery("#result")[0].innerHTML = "<hr/><p>"+Date()+"</p>" +"<" + this.nodeName + ">" + this.textContent +"<p>Вывод завершен!</p><hr/>";}})})})</script></head><body><div><h1>События HTML</h1><p>Нажмите на текст любого параграфа</p></div><div class="text"><p>1.
Параграф внутри интересующего нас div !</p><p>2. Параграф внутри интересующего нас div !!</p></div><div class="text"><p>3. Параграф внутри интересующего нас div !!!</p><p>4. Параграф внутри интересующего нас div !!!!</p></div><!-- Сюда поместим результат --><div id="result"></div></body></html>32Представленный пример соответствует рассмотренным ранее примерамподсветки и реакции на щелчок мышью для «чистого» Javascript и jQuery.Также как и в случае jQuery используется специальное средство dojo/query,гарантирующее загрузку браузером всех модулей. Также, как и в jQueryиспользуется селектор элементов, однако назначение обработчиковпроизводится через свойства DOM непосредственно, а не с использованиемновых методов.В части создания форм в Dojo принципиально то, что поддерживает два стиляпрограммирования.
Декларативный на основании разметки HTML, когдакаркас для отображения уже задан и динамический, когда состав элементовформируется динамически в процессе выполнения Javascript-кода.Приведём пример из учебника «Разработка HTML-виджетов с помощью Dojo.Игорь Кусаков»2:Создание Dojo-виджета на основании разметки:<html><head><script type="text/javascript"src="dojoAjax/dojo.js"></script><script type="text/javascript">dojo.require("dojo.widget.HelloWorld");dojo.require("dojo.widget.Button");</script></head><body><div dojoType="HelloWorld"><div dojoType="Button"></div></div></body></html>Код виджета dojoAjax/HelloWorld.js:dojo.provide("dojo.widget.HelloWorld");dojo.require("dojo.widget.HtmlWidget");dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget, {isContainer: true,templateString: '<div><div dojoAttachPoint="containerNode">'+ '</div></div>'});Виджет также модет быть создан с помощью метода createWidget:<html><head><script type="text/javascript" src="dojoAjax/dojo.js"></script><script type="text/javascript">dojo.require("dojo.widget.HelloWorld");dojo.require("dojo.widget.Button");dojo.addOnLoad(function(){var button = dojo.widget.createWidget("Button",2http://www.ibm.com/developerworks/ru/edu/wa-dojowidgets/section9.html33{caption: "Submit"});dojo.widget.byId('someID').addChild(button);});</script></head><body><div id="someID" dojoType="HelloWorld"></div></body></html>Динамический метод создания позволяет генерировать страницу на основеданных.
Более подробно см. [3].Дополнительные примеры см: http://demos.dojotoolkit.org/demos/ http://docs.dojocampus.org/quickstart/index http://anton.shevchuk.name/wp-demo/dojo-for-beginners/ http://www.ibm.com/developerworks/ru/edu/wa-dojowidgets/В отличии от jQuery претендует на достаточность для решения большинствазадач клиентского веб-программирования.Отметим также, что существуют средства для графического создания форм наоснове Dojo: http://www.wavemaker.com/34.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
