Презентация Программирование гипертекстовых переходов онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему Программирование гипертекстовых переходов абсолютно бесплатно. Урок-презентация на эту тему содержит всего 23 слайда. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:23 слайда
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:270.06 kB
- Просмотров:59
- Скачиваний:0
- Автор:неизвестен
Слайды и текст к этой презентации:
№1 слайд
Содержание слайда: Программирование гипертекстовых переходов
Ст. преподаватель Еремеев А.А.
YeremeevAA@mpei.ru
№2 слайд
Содержание слайда: Использование адресов URL
ссылки (URL в атрибуте HREF контейнера <A> );
активные области (URL в атрибуте HREF контейнера <AREA> );
картинки (URL в атрибуте SRC контейнера <IMG> );
формы (URL в атрибуте ACTION контейнера <FORM> );
внешние скрипты (URL в атрибуте SRC контейнера <SCRIPT> );
связанные документы (URL в атрибуте HREF контейнера <LINK> ).
№3 слайд
Содержание слайда: Тег <area>
HTML тег <area> определяет активные области на изображении, которые являются ссылками, эти области могут отличаться формой и размером. Картинка (изображение) с активными областями, называется картой-изображением. Такая картинка ничем не отличается от обычной, за исключением того, что содержит активные области (ссылки).
№4 слайд
Содержание слайда: shape=“rect”
x1,y1,x2,y2 - указывает координаты верхнего левого и правого нижнего угла прямоугольника.
№5 слайд
Содержание слайда: shape="circle"
x,y,радиус - определяет координаты центра окружности и радиус.
№6 слайд
Содержание слайда: shape="poly"
x1,y1,x2,y2,...,xn,yn - определяет координаты вершин полигона (многоугольника).
№7 слайд
Содержание слайда: Гипертекстовая ссылка
Это область HTML-страницы, по которой можно "кликнуть" (или выбрать ее иным способом), чтобы перейти к просмотру другого HTML-документа.
Лишь первые два являются гипертекстовыми ссылками. В объектной модели документа (DOM) они собраны в единую коллекцию гипертекстовых ссылок document.links[].
№8 слайд
Содержание слайда: Коллекции ссылок
document.links[];
document.anchors[].
№9 слайд
Содержание слайда: Объекты URL
Объект класса URL обладает свойствами, которые определены схемой URL. В качестве примера рассмотрим ссылку:
http://www.site.ru:80/dir/page.cgi?product=phone&id=3#mark
Тогда ее свойства примут следующие значения:
№10 слайд
Содержание слайда: Свойства объекта URL
№11 слайд
Содержание слайда: Свойство href
window.location.href = "..."
window.location = "..."
location.href = "..."
location = "..."
№12 слайд
Содержание слайда: Коллекция ссылок links[]
К встроенным гипертекстовым ссылкам относятся собственно ссылки ( <A HREF=...>...</A> ) и ссылки "чувствительных“ графических картинок.
К гипертекстовой ссылке нельзя обращаться по имени!
№13 слайд
Содержание слайда: Пример
for(i=0;i<document.links.length;i++)
document.write(document.links[i].href+"<BR>");
Получим:
http://www.site.ru/index.html
http://www.site.ru/terms.html
http://www.site.ru/shop.html
№14 слайд
Содержание слайда: Пример
Добавим к предыдущему коду
<MAP NAME=test>
<AREA SHAPE=rect COORDS="0,0,0,0" HREF="javascript:alert('Область 1')">
<AREA SHAPE=rect COORDS="0,0,0,0" HREF="javascript:alert('Область 2')">
</MAP>
№15 слайд
Содержание слайда: Результат
http://www.intuit.ru/help/index.html
http://www.intuit.ru/help/terms.html
http://www.intuit.ru/help/shop.html
javascript:alert('Область 1');
javascript:alert('Область 2');
№16 слайд
Содержание слайда: Замена URL
полностью или частично
document.links[1].href = ...
document.links[i+3].href = ...
<A HREF=" http://mpei.ru/Education/timetable/">расписание</A>
document.links[0].pathname сейчас равно "Education/timetable/". Применим оператор:
document.links[0].pathname="news/"
Теперь эта ссылка указывает на адрес http://mpei.ru/news/.
№17 слайд
Содержание слайда: События MouseOver и MouseOut
<A HREF="javascript:void(0);"
onMouseOver="document.pic1.src='pic1.gif';"
onMouseOut="document.pic1.src='pic2.gif';">
<IMG NAME=pic1 src=pic2.gif BORDER=0>
</A>
№18 слайд
Содержание слайда: URL-схема "JavaScript:"
Схема URL javascript: используется следующим образом:
<A HREF = "JavaScript:код_программы">...</A>
<FORM ACTION="JavaScript:код_программы" ...> ... </FORM>
Пример.
<A HREF= "javascript:alert('Спасибо!');"> Кликните</A>
№19 слайд
Содержание слайда: Обработка события Click
У гипертекстовой ссылки помимо URL, указанного в атрибуте HREF, можно указать действия, которые браузер должен выполнить, когда пользователь кликнет по данной ссылке, перед тем, как перейти по указанному URL. Соответствующая программа JavaScript называется обработчиком события Click и помещается в атрибут onClick контейнера <A>.
№20 слайд
Содержание слайда: Пример
<A onClick="return confirm('Хотите посетить портал МЭИ?')" HREF="http://mpei.ru/"> Перейти на портал МЭИ</A>
№21 слайд
Содержание слайда: Запись Javascript-кода в
атрибуте ссылки
Если в атрибуте ссылки (например, HREF, onClick и т.п.) пишется JavaScript-код, в котором надо сослаться на свойство или метод этой ссылки, то, как и в случае форм, можно пользоваться сокращенной записью - не указывать объект данной ссылки, либо (для большей ясности кода) вместо него писать this.
№22 слайд
Содержание слайда: Пример
Пусть у нас имеется 5-я ссылка в документе, и мы хотим в ее обработчике onMouseOver сослаться на свойство href данной ссылки, или вызвать метод click() данной ссылки. Тогда в этом контексте вместо document.links[4].href можно писать this.href или просто href, а вместо document.links[4].click() писать this.click() или просто click().
№23 слайд
Содержание слайда: Замечание
<A HREF="#" onClick="программа JavaScript; return false;”>...</A>
<A HREF="javascript:void(0)" onClick="программа JavaScript">...</A>
<A HREF="javascript: программа JavaScript">...</A>
Скачать все slide презентации Программирование гипертекстовых переходов одним архивом:
