🗊Презентация Программирование гипертекстовых переходов

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Программирование гипертекстовых переходов, слайд №1Программирование гипертекстовых переходов, слайд №2Программирование гипертекстовых переходов, слайд №3Программирование гипертекстовых переходов, слайд №4Программирование гипертекстовых переходов, слайд №5Программирование гипертекстовых переходов, слайд №6Программирование гипертекстовых переходов, слайд №7Программирование гипертекстовых переходов, слайд №8Программирование гипертекстовых переходов, слайд №9Программирование гипертекстовых переходов, слайд №10Программирование гипертекстовых переходов, слайд №11Программирование гипертекстовых переходов, слайд №12Программирование гипертекстовых переходов, слайд №13Программирование гипертекстовых переходов, слайд №14Программирование гипертекстовых переходов, слайд №15Программирование гипертекстовых переходов, слайд №16Программирование гипертекстовых переходов, слайд №17Программирование гипертекстовых переходов, слайд №18Программирование гипертекстовых переходов, слайд №19Программирование гипертекстовых переходов, слайд №20Программирование гипертекстовых переходов, слайд №21Программирование гипертекстовых переходов, слайд №22Программирование гипертекстовых переходов, слайд №23
Скачать
Вы можете ознакомиться и скачать презентацию на тему Программирование гипертекстовых переходов. Доклад-сообщение содержит 23 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Программирование гипертекстовых переходов Ст. преподаватель Еремеев А.А. YeremeevAA@mpei.ru
Описание слайда:
Программирование гипертекстовых переходов Ст. преподаватель Еремеев А.А. YeremeevAA@mpei.ru

Слайд 2


Использование адресов URL ссылки (URL в атрибуте HREF контейнера <A> ); активные области (URL в атрибуте HREF контейнера <AREA> ); картинки (URL в атрибуте SRC контейнера <IMG> ); формы (URL в атрибуте ACTION контейнера <FORM> ); внешние скрипты (URL в атрибуте SRC контейнера <SCRIPT> ); связанные документы (URL в атрибуте HREF контейнера <LINK> ).
Описание слайда:
Использование адресов URL ссылки (URL в атрибуте HREF контейнера <A> ); активные области (URL в атрибуте HREF контейнера <AREA> ); картинки (URL в атрибуте SRC контейнера <IMG> ); формы (URL в атрибуте ACTION контейнера <FORM> ); внешние скрипты (URL в атрибуте SRC контейнера <SCRIPT> ); связанные документы (URL в атрибуте HREF контейнера <LINK> ).

Слайд 3


Тег <area> HTML тег <area> определяет активные области на изображении, которые являются ссылками, эти области могут отличаться формой и размером. Картинка (изображение) с активными областями, называется картой-изображением. Такая картинка ничем не отличается от обычной, за исключением того, что содержит активные области (ссылки).
Описание слайда:
Тег <area> HTML тег <area> определяет активные области на изображении, которые являются ссылками, эти области могут отличаться формой и размером. Картинка (изображение) с активными областями, называется картой-изображением. Такая картинка ничем не отличается от обычной, за исключением того, что содержит активные области (ссылки).

Слайд 4


shape=“rect” x1,y1,x2,y2 - указывает координаты верхнего левого и правого нижнего угла прямоугольника.
Описание слайда:
shape=“rect” x1,y1,x2,y2 - указывает координаты верхнего левого и правого нижнего угла прямоугольника.

Слайд 5


shape="circle" x,y,радиус - определяет координаты центра окружности и радиус.
Описание слайда:
shape="circle" x,y,радиус - определяет координаты центра окружности и радиус.

Слайд 6


shape="poly" x1,y1,x2,y2,...,xn,yn - определяет координаты вершин полигона (многоугольника).
Описание слайда:
shape="poly" x1,y1,x2,y2,...,xn,yn - определяет координаты вершин полигона (многоугольника).

Слайд 7


Гипертекстовая ссылка Это область HTML-страницы, по которой можно "кликнуть" (или выбрать ее иным способом), чтобы перейти к просмотру другого HTML-документа. Лишь первые два являются гипертекстовыми ссылками. В объектной модели документа (DOM) они собраны в единую коллекцию гипертекстовых ссылок document.links[].
Описание слайда:
Гипертекстовая ссылка Это область HTML-страницы, по которой можно "кликнуть" (или выбрать ее иным способом), чтобы перейти к просмотру другого HTML-документа. Лишь первые два являются гипертекстовыми ссылками. В объектной модели документа (DOM) они собраны в единую коллекцию гипертекстовых ссылок document.links[].

Слайд 8


Коллекции ссылок document.links[]; document.anchors[].
Описание слайда:
Коллекции ссылок document.links[]; document.anchors[].

Слайд 9


Объекты URL Объект класса URL обладает свойствами, которые определены схемой URL. В качестве примера рассмотрим ссылку: http://www.site.ru:80/dir/page.cgi?product=phone&id=3#mark Тогда ее свойства примут следующие значения:
Описание слайда:
Объекты URL Объект класса URL обладает свойствами, которые определены схемой URL. В качестве примера рассмотрим ссылку: http://www.site.ru:80/dir/page.cgi?product=phone&id=3#mark Тогда ее свойства примут следующие значения:

Слайд 10


Свойства объекта URL
Описание слайда:
Свойства объекта URL

Слайд 11


Свойство href window.location.href = "..." window.location = "..." location.href = "..." location = "..." 
Описание слайда:
Свойство href window.location.href = "..." window.location = "..." location.href = "..." location = "..." 

Слайд 12


Коллекция ссылок links[] К встроенным гипертекстовым ссылкам относятся собственно ссылки ( <A HREF=...>...</A> ) и ссылки "чувствительных“ графических картинок. К гипертекстовой ссылке нельзя обращаться по имени!
Описание слайда:
Коллекция ссылок 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
Описание слайда:
Пример 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>
Описание слайда:
Пример Добавим к предыдущему коду <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');
Описание слайда:
Результат 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/.
Описание слайда:
Замена 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>
Описание слайда:
События 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>
Описание слайда:
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>.
Описание слайда:
Обработка события Click У гипертекстовой ссылки помимо URL, указанного в атрибуте HREF, можно указать действия, которые браузер должен выполнить, когда пользователь кликнет по данной ссылке, перед тем, как перейти по указанному URL. Соответствующая программа JavaScript называется обработчиком события Click и помещается в атрибут onClick контейнера <A>.

Слайд 20


Пример <A onClick="return confirm('Хотите посетить портал МЭИ?')" HREF="http://mpei.ru/"> Перейти на портал МЭИ</A>
Описание слайда:
Пример <A onClick="return confirm('Хотите посетить портал МЭИ?')" HREF="http://mpei.ru/"> Перейти на портал МЭИ</A>

Слайд 21


Запись Javascript-кода в атрибуте ссылки Если в атрибуте ссылки (например, HREF, onClick и т.п.) пишется JavaScript-код, в котором надо сослаться на свойство или метод этой ссылки, то, как и в случае форм, можно пользоваться сокращенной записью - не указывать объект данной ссылки, либо (для большей ясности кода) вместо него писать this.
Описание слайда:
Запись Javascript-кода в атрибуте ссылки Если в атрибуте ссылки (например, HREF, onClick и т.п.) пишется JavaScript-код, в котором надо сослаться на свойство или метод этой ссылки, то, как и в случае форм, можно пользоваться сокращенной записью - не указывать объект данной ссылки, либо (для большей ясности кода) вместо него писать this.

Слайд 22


Пример Пусть у нас имеется 5-я ссылка в документе, и мы хотим в ее обработчике onMouseOver сослаться на свойство href данной ссылки, или вызвать метод click() данной ссылки. Тогда в этом контексте вместо document.links[4].href можно писать this.href или просто href, а вместо document.links[4].click() писать this.click() или просто click().
Описание слайда:
Пример Пусть у нас имеется 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>
Описание слайда:
Замечание <A HREF="#" onClick="программа JavaScript; return false;”>...</A> <A HREF="javascript:void(0)" onClick="программа JavaScript">...</A> <A HREF="javascript: программа JavaScript">...</A>

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию