Лаб 2 (1075651), страница 4
Текст из файла (страница 4)
Однако помните, что использованиеэтого свойства полностью удалит все дочерние элементы, если они были увладельца innerHTML.Пример заполнения заголовка в таблице у созданного элемента table:var table = document.createElement("table"); // Создать элемент <table>table.border = 1; // Установить атрибут// Добавить в таблицу заголовок Имя|Тип|Значениеtable.innerHTML = "<tr><th>Имя</th><th>Тип</th><th>Значение</th></tr>";Обработка событийРассмотрим следующий код<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Вывод структуры страницы.</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>#result {font-style: italic;}div.text p { margin: 0 5px 5px 5px; background-color:yellow}</style><script type="text/javascript">function print(el){// По идентификатору находим элемент,// в который надо поместить результатvar result = document.getElementById('result');result.innerHTML = "<hr/><p>"+Date()+"</p>" +"<" + el.nodeName + ">" + el.textContent +"<p>Вывод завершен!</p><hr/>";}function mouseOver(el){el.style.backgroundColor = "green";}function mouseOut(el){el.style.backgroundColor = "yellow";}</script></head><body><div><h1>События HTML</h1><p>Нажмите на текст любого параграфа</p></div><div class="text"><p onclick="print(this)">1.
Параграф внутри div !</p><p onclick="print(this)">2. Параграф внутри div !!</p></div><div class="text"><p onclick="print(this)"onMouseOut="mouseOut(this)" onMouseOver="mouseOver(this)">3. Параграф внутри интересующего нас div !!!</p><p onclick="print(this)"onMouseOut="mouseOut(this)" onMouseOver="mouseOver(this)">214. Параграф внутри интересующего нас div !!!!</p></div><!-- Сюда поместим результат --><div id="result"></div></body></html>Элементы HTML имеют атрибуты, позволяющие назначить обработчики.
Впредставленном примере для элементов <p> назначаются обработчики onclick(щелчок мышью по элементы), onMouseOver (появление указателя мыши надэлементом), onMouseOut (выход указателя мыши за пределы элемента).Значение this, передаваемое обработчикам, содержит указатель на элемент,вызывающий этот обработчик.В коде обработчиков для изменения цвета фона используются свойства,предоставленные DOM-моделью.function mouseOver(el){el.style.backgroundColor = "green";}В обработчике щелчка мышью производится поиск элемента для вставки, атакже извлекается содержимое инициировавшего его элемента:function print(el){var result = document.getElementById('result');result.innerHTML = "<hr/><p>"+Date()+"</p>" +"<" + el.nodeName + ">" + el.textContent +"<p>Вывод завершен!</p><hr/>";}Объект, созданный вызовом Date(), содержит текущие дату и время.В целом, в рамках модели DOM существуют обработчики, которыепредставлены в таблице 3.
Подробнее см. [1].Таблица 3 Модули и интерфейсы событий DOMИмя модуляHTMLEventsИнтерфейс EventEventMouseEventsMouseEventUIEventsUIEventMutationEventsMutationEventТипы событийabort, blur, change, error, focus, load,reset, resize, scroll, select, submit,unloadclick, mousedown, mousemove,mouseout, mouseover, mouseupDOMActivate, DOMFocusIn,DOMFocusOutDOMAttrModified,DOMCharacterDataModified,DOMNodeInserted,DOMNodeInsertedIntoDocument,DOMNodeRemoved,DOMNodeRemovedFromDocument,DOMSubtreeModified22Средства отладкиВ зависимости от того, предполагается ли отлаживать серверную иликлиентскую части программ, используются различные средства отладки.Чаще всего на JavaScript реализуют только клиентскую часть, поэтомуиспользуют средства отладки, интегрированные в браузер. Наиболее удобнымисредствами в данный момент являются расширение Firebug для Mozilla Firefox,а также модуль DragonFly браузера Opera, а также встроенный отладчик дляGoogle Chrome.
Для вспомогательных целей иногда используют встроенныйотладчик Microsoft Internet Explorer.В целом, доступны следующие способы отладки: Формирование диалоговых сообщений с текстом – вызов в кодепрограммы функции alert("Значение переменной..."). Вывод отладочных сообщений в консоль браузераconsole.log("..."),console.error("..."),console.warn("..."),console.info("..."). Использование интерактивного отладчика.Использование интерактивного отладчика в Mozilla Firefox рассмотрим болееподробно. Для того чтобы воспользоваться отладчиком Firebug, необходимоиметь Mozilla Firefox и установленное расширение Firebug.
Чтобы открытьотладчик на требуемой странице, нажмите клавишу F12.В нижней части окна браузера появятся дополнительные окна. В Firebugдоступны следующие закладки: Console – сообщения браузера об ошибках, предупреждения иотладочный вывод Javascript-программ. HTML – структура разметки страницы. Позволяет найти поотображенному элементу его соответствие в разметке и наоборот.Возможно изменение стилей любых элементов. CSS – позволяет редактировать таблицы стилей загруженной страницы. Script – Javascript код страниц. Позволяет просматривать код,устанавливать точки останова, выполнять пошаговую отладку итрассировку значений переменных. По-умолчанию выключено. DOM – просмотр и изменение значение документа по модели DOM. Net – просмотр данных, передаваемых между браузером и сервером.Предоставляется возможность просмотра заголовков HTTP, переданныхданных, а также порядка передачи данных. По-умолчанию выключено.23Рисунок 5 Просмотр структуры и стилей в Firebug.Рисунок 6 Отладчик Javascript в Firebug.24Литература1.
Флэнаган Д. JavaScript. Подробное руководство. – Пер. с англ. – СПб:СимволПлюс, 2008. – 992 с., ил.2. Бер Бибо, Иегуда Кац. jQuery. Подробное руководство по продвинутомуJavaScript. - Пер. с англ. - СПб.:Символ-Плюс, 2009. - 384 с., ил.3. jQuery in Action. Серия: High Tech. Издательство: Символ-Плюс, 2009 г.Мягкая обложка, 384 стр.4. Расселл М. Dojo. Подробное руководство – Пер.
с англ. – СПб.:Символ-Плюс, 2009. – 560 с., ил.5. Rawld Gill, Craig Riecke, Alex Russell. Mastering Dojo. JavaScript and AjaxTools for Great Web Experiences. The Pragmatic Bookshelf, Raleigh, NorthCarolina Dallas, Texas, 2008.- 545 p.6. Расселл М. Dojo. Подробное руководство – Пер. с англ. – СПб.: СимволПлюс, 2009.
– 560 с., ил.25Контрольные вопросыПриведите основные характеристики языка Javasctipt.Каким образом Javascript связан с HTML?Что такое DOM?Как обработать событие нажатия мыши на HTML-элемент?Приведите способы позиционирования по узлам DOM средствамиJavaScript.6. Приведите способы отладки Javascript-приложений.1.2.3.4.5.26Задание для практикума №2Написать Javascript-код для вывода дерева элементов страницы, с которой этоткод запущен. Отступы для отображения формировать как символ В процессе выполнения работы реализовать следующие пункты: Сформировать страницу с произвольным кодом разметки, но обеспечитьуровень вложенности внутри элемента <body> не менее 3. добавить внутри элемента <body> секцию <div>, предназначенную длявывода результата обхода дерева элементов страницы. Выбрать способ активации рекурсивной программы обхода дереваэлементов, реализовать и подключить эту программу. При проходе по узлам разметки обеспечить отладочный вывод в консоль.Привести в отчете содержимое консоли. Реализовать вывод на странице.В отчете привести код страницы с программой обхода, отладочный выводв консоль и примеры обхода дерева элементов страницы.27Задание для лабораторной работы №2Разработать страницу для оформления заказа товаров. Реализовать форму для ввода наименования и стоимости.
При нажатии накнопку «Добавить», добавить введенные значения в таблицу. Сделать кнопку расчёта стоимости заказа. Поставить обработчик на изменение фона ячеек таблицы со стоимостью втот момент, когда над ними находится указатель мыши. Подготовить страницу, содержащую таблицу товаров и их стоимости. Набазе этой страницы обеспечить возможность выбора строк и добавления ихв таблицу формирования заказа.Примечание: в качестве усложненного варианта задания допустимоиспользовать библиотеки jQuery и Dojo.В отчете привести код страницы с программой формирования таблицы,формы, отображаемые на экране и пример работы программы.28Приложение. Библиотеки jQuery. DojoБиблиотека jQueryjQuery – библиотека для упрощения манипулирования объектами.
Позволяетсущественно сократить объем кода за счет специальных объектом и методов.Основная документация доступна по адресу http://docs.jquery.com, а также вкниге [2].Библиотека не претендует на покрытие всех возможных функций, которыемогут потребоваться программисту. В комплекте jQuery содержится лишьминимально необходимый набор для манипулирования с объектами иобеспечения AJAX-взаимодействия. Расширения, такие как дополнительныеграфические управляющие элементы, могут быть реализованы как плагины.Основная идея в jQuery заключается в том, что выборка элементовосуществляется с помощью селекторов, аналогичных CSS с похожим, норасширенным синтаксисом.
Отбор при помощи селектора осуществляется спомощью функций $() или jQuery().Помимо доступа при помощи селекторов, предоставляется большое количествосервисных функций.Пример. Необходимо выделить все четные строки таблицы:<!DOCTYPE html><html><head><style>table {background:#f3f7f5;}</style><script src="http://code.jquery.com/jquery-latest.js"></script></head><body><table border="1"><tr><td>Row with Index #0</td></tr><tr><td>Row with Index #1</td></tr><tr><td>Row with Index #2</td></tr><tr><td>Row with Index #3</td></tr></table><script>$("tr:odd").css("background-color", "#bbbbff");</script></body></html>Обратите внимание, что подключается версия jQuery непосредственно с сайтаавторов библиотеки.Результат представлен на рисунке 5.Рисунок 7 Пример таблицы с программно изменённым стилем строк.29В виду того, что концепция jQuery заключается в простоте замены свойствэлементов существующей разметки, разработано большое количествографических плагинов.
С некоторыми примерами можно ознакомиться поссылке http://jqueryui.com/demos/ .Следующий пример (http://jqueryui.com/demos/sortable/ ) демонстрируетвозможности переопределения стандартного списка, обеспечивая возможностьперемещения элементов мышью.<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>jQuery UI Sortable - Default functionality</title><script src="js/jquery.js"></script><script src="js/ui/jquery-ui.js"></script><link rel="stylesheet" href="js/demos.css"><style>#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }#sortable li {margin: 0 5px 5px 5px; padding: 0.4em; padding-left: 1.5em;font-size: 1.4em; height: 18px; background-color:cyan }#sortable li span { position: absolute; margin-left: -1.3em; }</style><script>$(function() {$( "#sortable" ).sortable();$( "#sortable" ).disableSelection();});</script></head><body><div class="demo"><ul id="sortable"><li class="ui-state-default">Item<li class="ui-state-default">Item<li class="ui-state-default">Item<li class="ui-state-default">Item<li class="ui-state-default">Item<li class="ui-state-default">Item<li class="ui-state-default">Item</ul>1</li>2</li>3</li>4</li>5</li>6</li>7</li></div><!-- End demo --></body></html>Обратите внимание на то, что для того, чтобы список ul стал управляемым,необходимо лишь присвоить ему идентификатор (id="sortable"), который будетиспользован для переопределения элемента в специальной функции $().$(function() {$( "#sortable" ).sortable();$( "#sortable" ).disableSelection();});Отметим, что в данном случае, функция $() получает в качестве аргументафункциональный литерал, а её назначение – гарантировать, что выполнениеэтого кода произойдёт после полной загрузки кода библиотеки jQuery.30Рассмотрим внедрение обработчиков.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
