WEB-технологии

Автор работы: Пользователь скрыл имя, 28 Января 2013 в 17:03, лекция

Описание

В 1962 г. Дж. Ликлайдером, руководителем исследовательского компьютерного проекта экспериментальной сети передачи пакетов в Управлении перспективных исследований и разработок Министерства обороны США (Defense Advanced Research Project Agency, DARPA), была опубликована серия заметок, в которых обсуждалась концепция "Галактической сети" ("Galactic Network"). "Галактическая сеть" представлялась как глобальная сеть взаимосвязанных компьютеров, позволяющая любому пользователю получить доступ к данным и программам на компьютерах, объединенных данной сетью. Можно сказать, что эта идея положила начало развитию сети Интернет.

Скачать (845.04 Кб) Сколько стоит заказать работу?
Работа состоит из  1 файл

Лекции_Web-тех.doc

— 1.76 Мб (Скачать документ)

Пример

<html><head>

<meta http-equiv=Content-Type

content="text/html; charset=windows-1251">

</head>

<body lang=RU>

<script language="JavaScript">

<!--

var yourName=prompt("Как Вас зовут?", "Маша"))

if(yourName=="Маша")    {document.write("Угадал!");}

else    {document.write("Не угадал. Вас зовут " + yourName);}

//-->

</script> </body></html>

 

  • open. Открытие окна. Метод имеет три параметра. Первый задает URL HTML-документа, предназначенного для загрузки в новое окно. Второй определяет имя окна для использования в атрибуте TARGET тега <A> или в атрибуте NAME тега <FORM>. Третий (необязательный) задает в виде текстовой строки параметры, определяющие внешний вид открываемого окна.

toolbar

Отображение стандартной  инструментальной линейки  [=yes|no] | [=1|0]

location

Отображение поля ввода адреса документа  [=yes|no] | [=1|0]

status

Отображение строки состояния   [=yes|no] | [=1|0]

menubar

Отображение линейки  меню  [=yes|no] | [=1|0]

scrollbars

Отображение полос  прокрутки  [=yes|no] | [=1|0]

resizable

Изменение размеров нового окна  [=yes|no] | [=1|0]

width

Ширина окна в пикселах

height

Высота окна в пикселах

fullscreen

Полноэкранный режим

copyhistory

Сохранение  истории загрузки документов в данное окно  [=yes|no] | [=1|0]

directories

Наличие в данном окне кнопок групп новостей  [=yes|no] | [=1|0]


 

Пример

<html><head> <meta http-equiv=Content-Type content="text/html; charset=windows-1251">

</head>

<body lang=RU>

<script language="JavaScript">

<!--

Var newWindow=open("ann.htm","","toolbar=no,menubar=no,width=300,height=200")

//-->

</script> </body> </html>

 

  • close. Закрытие созданного или основного окна:  
    newWindow.close(); 
    Текущее окно брaузера можно закрыть одним из следующих способов: 
    window.close(); self.close();
  • setTimeout. Установка таймера. Применяется для ограничения времени ввода пароля, создания бегущих строк и всевозможных анимационных эффектов. Метод имеет два параметра. Первый задает выражение JavaScript, которое запускается по прошествии времени, указанного вторым параметром в миллисекундах. Заданное выражение запускается один раз.

Пример

<html> <head><meta

http-equiv=Content-Type content="text/html; charset=windows-1251"></head>

<body lang=RU>

<H3>Через 2 секунды Иоганн Себастьян Бах сменит Людвига ван Бетховена.</H3>

<img id=B_B src="be.gif">

<script language="JavaScript">

<!--

function change()

{document.getElementById("B_B").src="ba.gif";}

setTimeout("change()", 2000);

//-->

</script> </body> </html>

  • clearTimeout. Сброс таймера. Для останова таймера метод setTimeout нужно вызвать с возвратом идентификатора, т.е.  
    idTimer=setTimeout("change()", 2000); а затем этот идентификатор передать методу clearTimeout в качестве параметра:  
    clearTimeout(idTimer);
  • blur( ). При вызове метода окно теряет фокус.
  • focus( ). При вызове метода окно получает фокус.
  • MoveTo(x,y). Перемещает окно в точку с координатами.
  • MoveBy(x,y). Перемещает окно на x пикселей по горизонтали вправо и на y пикселей вниз.
  • ResizeTo(x,y). Изменяет размер окна на указанные.
  • ResizeBy(x,y). Увеличивает или уменьшает размер окна на заданное количество пикселей.
  • print( ). Печать документа.(не работает в IE 4)
  • scroll(x,y), ScrollTo(x,y). Прокручивает окно так, что точка с кординатами x,y становится левой верхней точкой окна.
  • ScrollBy(x,y). Прокручивает окно на x,y пикселей.
  • stop( ). Прекращает загрузку документа в окно браузера.

Свойства объекта document

  • URL. Полный URL документа.
  • location. Полный URL документа.
  • referrer. URL вызывающего документа.
  • title. Заголовок документа, определенный тегом <TITLE>.
  • bgColor. Цвет фона документа.
  • fgColor. Цвет текста.
  • linkColor. Цвет cсылок.
  • alinkColor. Цвет выбранных cсылок.
  • vlinkColor. Цвет посещенных cсылок.
  • links. Массив всех cсылок в документе.
  • anchors. Массив локальных меток. Применяется для организации ссылок внутри документа.
  • applets. Массив аплетов Java.
  • forms. Массив форм в виде объектов.
  • images. Массив растровых изображений.
  • embeds. Массив объектов plug-in.
  • lastModified. Дата последнего изменения документа.
  • cookie. Значение cookie для текущего документа.

Пример

<html><head>

<meta http-equiv=Content-Type content="text/html; charset=windows-1251">

<SCRIPT LANGUAGE="JavaScript">

<!--

document.bgColor="FFFF00";

document.fgColor="800080";

document.linkColor="000000";

document.alinkColor="FF0000";

document.vlinkColor="0000FF";

//-->

</SCRIPT></head>

<body lang=RU>

<H2>Изменение  цвета фона, текста и ссылок</H2>

<a href="be.htm"><img src="be.gif" align="bottom">Кто это?</a><br>

<a href="ba.htm"><img src="ba.gif" align="bottom">Кто это?</a>

</body></html>

 

Объект document может содержать в  себе другие объекты, доступные как  свойства:

  • anchor. Локальная метка, определенная тегом <A>.
  • form. Форма, определенная тегом <FORM>.
  • history. Список посещенных URL.
  • link. Текст или изображение, играющие роль гипертекстовой ссылки, созданной тегом <A>, в котором дополнительно заданы обработчики событий onClick и onMouseOver.

Методы объекта document

  • сlear. Удаление содержимого документа из окна просмотра.
  • write. Запись в документ произвольной HTML-конструкции.
  • writeln. Аналогичен write, но с добавлением символа перевода строки в конец строки.
  • open. Открытие выходного потока для записи в HTML-документ данных типа MIME при помощи методов write и writeln.
  • close. Закрытие потока данных, открытого методом open. В окне будут отображены все изменения содержимого документа, сделанные сценарием после открытия потока.

Ссылки в  документе

Для каждой ссылки, размещенной в HTML-документе, создается отдельный объект. Все  такие объекты находятся в  объекте document как элементы массива links. Анализируя эти элементы, сценарий JavaScript может определить свойства каждой ссылки в HTML-документе:

  • length. Количество ссылок в HTML-документе, т.е. количество элементов в массиве links.
  • hash. Имя локальной ссылки, если она определена в URL.
  • host. Имя узла и порт, указанные в URL.
  • hostname. Имя узла и доменное имя узла сети. Если доменное имя недоступно, вместо него указывается адрес IP.
  • href. Полный URL.
  • pathname. Путь к объекту, указанный в URL.
  • port. Номер порта, использумого для передачи данных с сервером, указанным в ссылке.
  • protocol. Строка названия протокола передачи данных (включающая символ "двоеточие"), указанного в ссылке.
  • search. Строка запроса, указанная в URL после символа "?".
  • target. Имя окна, куда будет загружен документ при выполнении ссылки. Это может быть имя существующего окна фрейма, определенного тегом <FRAMESET>, или одно из зарезервированных имен - _top, _parent, _self, _blank.

Пример

<html><head>

<meta http-equiv=Content-Type content="text/html; charset=windows-1251"> </head>

<body lang=RU>

<P><A HREF=http://kdg.HtmlWeb.ru/ TARGET="_top">Моя страница</A>

<P><A HREF="http://www.dstu.edu.ru/">Здесь учился</A>

<P><A HREF="http://www.tnk-ug.ru/">Здесь работаю</A>

<HR>

<H1>Свойства  ссылок</H1>

<SCRIPT LANGUAGE="JavaScript">

<!--

// Цикл по всем ссылкам

for(i=0; i<document.links.length; i++)

{

// Разделительная  линия

document.write("<HR>");

// Текст ссылки, выделенный жирным шрифтом

var Txt=document.links[i] + "<br>";

document.write(Txt.bold());

// Все свойства  ссылки

document.write("host: ".italics() + document.links[i].host + "<br>");

document.write("hostname: ".italics() + document.links[i].hostname + "<br>");

document.write("href: ".italics() + document.links[i].href + "<br>");

document.write("pathname: ".italics() + document.links[i].pathname + "<br>");

document.write("port: ".italics() + document.links[i].port + "<br>");

document.write("search: ".italics() + document.links[i].search + "<br>");

document.write("target: ".italics() + document.links[i].target + "<br>");

}

//-->

</SCRIPT></body></html>

Работа с формами

Сейчас мы поговорим о различных  приемах работы сценариев JavaScript с HTML-формами.

Если в HTML-документе определена форма, то она доступна сценарию JavaScript как объект, входящий в объект document с именем, заданным атрибутом NAME тега FORM.

Свойства  форм

Форма имеет два набора свойств, состав одного из которых фиксированный, а состав другого зависит от того, какие элементы определены в форме.

Свойства первого  набора

  • action. Значение атрибута ACTION тега FORM.
  • encoding. Значение атрибута ENCTYPE тега FORM.
  • method. Значение атрибута METHOD тега FORM.
  • target. Значение атрибута TARGET тега FORM.
  • elements. Массив всех элементов формы.
  • length. Размер массива elements.

Большинство свойств первого набора просто отражает значение соответствующих атрибутов тега FORM. Что же касается массива elements, то в нем находятся объекты, соответствующие элементам, определенным в форме. Эти объекты образуют второй набор свойств формы. Адресоваться к этим объектам можно как к элементам массива elements, причем первому элементу формы будет соответствовать элемент с индексом 0, второму - с индексом 1 и т.д. Однако удобнее обращаться к элементам формы по их именам, заданным атрибутом NAME.

Элементы форм

Кнопки (BUTTON, RESET, SUBMIT)

Свойства

  • name. Имя объекта.
  • value. Надпись на кнопке.

Метод

  • click( ). Вызов этого метода тождественен щелчку мышкой по кнопке.

Пример

<html><head>

<meta http-equiv=Content-Type content="text/html; charset=windows-1251">

<SCRIPT LANGUAGE="JavaScript">

<!--

function btnClick()

{ 

var Txt1 = ""; 

var Txt2 = ""; 

Txt1 = document.Test.bt.value;  

Txt2 = document.Test.bt.name;

document.write("<HR>");  

document.write("Вы нажали кнопку: " + Txt1.bold() +   " с именем: " + Txt2.bold());

document.write("<HR>");

}

//-->

</SCRIPT></head>

<body lang=RU>

<H1>Нажатие кнопки</H1>

<FORM NAME="Test">  

<INPUT TYPE="button" NAME="bt" VALUE="Щелкни здесь!"  onClick="btnClick();">

</FORM></body></html>

Нажатие кнопки


Флажок (CHECKBOX)

Свойства

  • name. Имя объекта.
  • value. Надпись на кнопке.
  • checked. Состояние флажка: true - флажок установлен, false - флажок не установлен.
  • defaultChecked. Отражает наличие атрибута CHECKED: true - есть, false - нет.

Метод

  • click( ). Вызов этого метода меняет состояние флажка.

Пример

<html><head><meta http-equiv=Content-Type content="text/html;

charset=windows-1251"></head>

<body lang=RU>

<H1>Метод click флажка</H1>

<FORM NAME="Test"> Флажок <INPUT TYPE="checkbox" NAME="ch">

<BR>Состояние  флажка можно изменить и этой  кнопкой 

<INPUT TYPE="button" VALUE="Смена состояния" onClick="document.Test.ch.click();">

</FORM></body></html>

Метод click флажка

Флажок  Состояние флажка можно изменить и этой кнопкой


Переключатель (RADIO)

Свойства

  • name. Имя объекта.
  • value. Надпись на кнопке.
  • length. Количество переключателей в группе.
  • checked. Состояние переключателя: true - переключатель включен, false - выключен.
  • defaultChecked. Отражает наличие атрибута CHECKED: true - есть, false - нет.

Метод

  • click( ). Вызов этого метода включает переключатель.

Так как группа переключателей имеет  одно имя NAME, то к переключателям надо адресоваться как к элементам массива.

Пример

<html><head><meta http-equiv=Content-Type content="text/html; charset=windows-1251">

<SCRIPT LANGUAGE="JavaScript">

<!--

function btnClick()

{

if(document.Test.Sex[0].checked)  {  document.Test.Sex[1].click();   } 

Информация о работе WEB-технологии