Главная страница
qrcode

Н., хаи, 2013 11. Введение в веб-программирование. Html-разметка


Скачать 11.83 Mb.
НазваниеН., хаи, 2013 11. Введение в веб-программирование. Html-разметка
Дата10.09.2019
Размер11.83 Mb.
Формат файлаpdf
Имя файлаВведение в веб-программирование.pdf
оригинальный pdf просмотр
ТипРеферат
#64805
страница12 из 12
Каталог
1   ...   4   5   6   7   8   9   10   11   12




ХАИ

Вы видели когда-нибудь главный корпус
ХАИ?

9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
42
Рисунок 6.1 - Пример простой программы с JQuery
При нажатии на кнопку “Fade” изображение главного корпуса ХАИ плавно исчезнет. Чтобы это реализовать, мы для этой кнопки назначили обработку события onClick - функцию katya(), в которой и осуществили вызов действия fadeOut JQuery. Можно было все это написать еще короче, вызвав необходимое действие прямо в тексте кнопки:

9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
43
Рисунок 6.2 - Программа изменяет свойство стиля
На рис. 6.2 приведен пример веб-страницы, где JQuery используется для изменения свойств стилей (файл ex6_02.html).
При нажатии на кнопку все <div> с атрибутом class=”ppp” (а такой на странице только один) поменяют цвет (свойство background-color) на зеленый.
6.5. Методы для изменения содержимого элементов
HTML
Перечислим основные команды (действия, методы)
JQuery, позволяющие манипулировать с содержимым
(текстом) элементов HTML веб-страницы.
Команда
Результат html(val)
Код указанного элемента вебстраницы заменяется на val text(val)
Текст указанного элемента вебстраницы заменяется на val text()
Возвращает текст указанного элемента веб-страницы (позволяет проверить, что там сейчас находится) append(val)
Добавляет val к коду указанного элемента веб-страницы после существующего кода prepend(val)
Добавляет val к коду указанного элемента веб-страницы, вставляя его до существующего кода wrap(val)
Оборачивает указанный элемент в обертку.
Например,
$(‘#ja’).(‘span> .. span>. empty()
Удаляет из указанного элемента
HTML все элементы-потомки
(вложенные элементы HTML) remove()
Удаляет указанный элемент из текста
HTML-страницы clone()
Клонирует (повторяет) указанный элемент HTML
На рисунке 6.3 приведен простой пример с использованием команды append (файл ex6_03.html) и результатом нажатия на кнопку.




Здравствуйте, как дела?


9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
44
6.6. Обработка событий с помощью JQuery
Перечислим основные методы JQuery для обработки событий и приведем несколько примеров.
Команда
Результат ready(fn)
Функция с именем fn выполнится один раз, когда браузер полностью загрузит содержимое веб-страницы bind(tip,fn)
Функция с именем fn теперь будет всегда вызываться при возникновении события tip. Например:
$(‘#pap’).bind(‘click’,myclick)
Можно указать несколько событий через пробел. Вот лишь некоторые из возможных событий: click, dblclick, change, keydown, keyup, keypress, mousedown, mouseover, mouseout, mousemove, submit, select, focus, blur one(tip,fn)
То же, что и bind, но функция fn выполнится только один раз hover(fover, fout)
Функция fover будет выполняться, когда курсор мыши наезжает на указанный элемент HTML, а функция fout будет выполняться, когда курсор мыши покидает указанный элемент
HTML toggle(f1,f2)
Первый клик по указанному элементу вызовет функцию f1. Второй клик вызовет функцию f2. Таких функций через запятую можно указать несколько. click(fn)
При нажатии на указанный элемент всегда будет вызываться функция fn. click()
Обманывает браузер, заставляя его подумать, что пользователь кликнул по указанному элементу
Здесь перечислены не все методы для обработки событий. Например, для метода bind(‘click’,fn) аналогом является click(fn) и имеется click(), обманывающая браузер. Точно такие же аналоги имеются и для других событий. Например для bind(‘focus’, fn) аналогом является focus(fn), а для обмана браузера существует ficus().
Фактически, метод bind удобнее только, если есть несколько событий, для обработки которых нужно назначить одну и ту же функцию. Например, вместо:
$(‘#mam’).click(obrabotka)
$(‘#mam’).dblclick(obrabotka) можно написать более короткий текст:
$(‘#mam’).bind(‘click,dblclick’,obrabotka)
Не забываем, что основное назначение JQuery - облегчить нашу работу по написанию программ JavaScript, чтобы мы нажимали поменьше клавиш в процессе написания программы.
Рассмотрим простой пример использования метод hover
(рисунок 6.4, файл ex6_04.html).





Текст


9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
45
А вот в этом случае обработчик не был бы назначен:


Текст

Почему? Браузер попытался бы выполнить скрипт с назначением функции myf обработчиком события onClick для тега с id=”kk”, а такой тег ему еще неизвестен (не загружен на данный момент). В итоге при нажатии на этот div ничего происходить не будет. Корректно написать вот так:

Текст


Вроде бы тоже самое, но порядок действий здесь важен.
Все, к чему мы пытаемся получить доступ из JavaScript, должно находиться по тексту HTML-страницы раньше данного фрагмента кода JavaScript или же мы должны быть уверены, что на данный момент (когда выполняется этот фрагмент кода) страница уже полностью загрузилась.
Рассмотрим еще один пример - обработка движения мыши (рисунок 6.5, файл ex6_05.html).



height:100px; backgroundcolor:lightblue">


9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
46





9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
47
Итак, первое, что нам понадобится в JQuery, это метод serialize()
, который собирает данные формы в некое подобие GET запроса (см. рисунок 6.8, файл ex6_07.html).




Ваше имя?
Год рождения?



9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
48




Название поселка?


9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
49
же IP-адрес. И, во-вторых, человек может выходить в
Интернет с ноутбука с динамически получаемым IPадресом, который у него каждый раз будет новым.
И здесь помогает механизм, называемый cookies и позволяющий нашему сайту хранить информацию на компьютере пользователя, в браузере (браузер сохраняет эту информацию на жестком диске, поэтому она не теряется с выключением компьютера).
Механизм сookies предусматривает, что сайт может хранить в браузере сколько угодно (в разумных пределах) переменных и их значений, где для каждой переменной хранятся: имя значение время_хранения
Когда время хранения переменной заканчивается (а устанавливает его наш сайт), то браузер удаляет ее из своей памяти.
Сайт может проверять значения только тех переменных в
cookies, которые сам же ранее установил. Проверить значение чужих переменных нельзя.
Вот и все, что нужно знать о cookies, а теперь на примере
(рисунок 6.11, файл ex6_10.html) рассмотрим, как работать с
cookies на JQuery.
1   ...   4   5   6   7   8   9   10   11   12

перейти в каталог файлов


связь с админом