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

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

Описание

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

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

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

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

else   { document.Test.Sex[0].click();   }

}

//-->

</SCRIPT></head>

<body lang=RU>

<H1>Метод click группы переключателей</H1>

<FORM NAME="Test">

<INPUT TYPE="RADIO" NAME="Sex" VALUE ="Man" CHECKED>Мужской

<INPUT TYPE="RADIO" NAME="Sex" VALUE ="Woman">Женский

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

<INPUT TYPE="button" VALUE="Смена состояния" onClick="btnClick();">

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

Метод click группы переключателей

Мужской Женский  
Состояние переключателей можно изменить и этой кнопкой


Список (SELECT)

Свойства

  • name. Имя объекта.
  • selectedIndex. Номер выбранного элемента или первого среди выбранных (если указан атрибут MULTIPLE).
  • length. Количество элементов (строк) в списке.
  • options. Массив элементов списка, заданных тегами OPTION.

Каждый элемент массива options является объектом со следующими свойствами:

  • value. Значение атрибута VALUE.
  • text. Текст, указанный после тега OPTION.
  • index. Индекс элемента списка.
  • selected. Присвоив этому свойству значение true, можно выбрать данный элемент.
  • defaultSelected. Отражает наличие атрибута SELECTED: true - есть, false - нет.

Методы

  • focus( ). Передает списку фокус ввода.
  • blur( ). Отбирает у списка фокус ввода.

Пример

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

charset=windows-1251">

<SCRIPT LANGUAGE="JavaScript">

<!--

function btnClick()

{ 

sI=Test.Item.selectedIndex;  

Txt=""; 

Txt="Предложено "+Test.Item.length+" напитков"+ "\nВыбран "+Test.Item.options[sI].text+

" (value= "+Test.Item.options[sI].value+ ", index= "+Test.Item.options[sI].index+")";

if(Test.Item.options[sI].defaultSelected)  {Txt+="\nЭтот напиток выбирается по умолчанию"}

alert(Txt);

}

//-->

</SCRIPT></head>

<body lang=RU>

<H1>Работа  с готовым списком</H1>

<FORM NAME="Test">

<SELECT NAME="Item" SIZE=5>

<OPTION VALUE="tea" SELECTED>Чай

<OPTION VALUE ="coffee">Кофе

<OPTION VALUE ="milk">Молоко

<OPTION VALUE ="cocoa">Какао

<OPTION VALUE ="juice">Сок

</SELECT>

<INPUT TYPE="button" VALUE="Пусть кофе" onClick="Test.Item.options[1].selected=true;">

<INPUT TYPE="button" VALUE="Посмотрим" onClick="btnClick();">

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

Работа с  готовым списком

Кроме работы с готовыми списками JavaScript может заполнять список динамически. Для записи нового элемента списка используется конструктор Option c четырьмя параметрами, первый из которых задает текст, отображаемый в списке, второй - значение элемента списка, соответствующее значению атрибута VALUE, третий соответствует свойству defaultSelected, четвертый - свойству selected.

Пример

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

<body lang=RU><H1>Динамическое заполнение списка</H1>

<FORM NAME="Sel">

<!-- Пустой  список ссылок-->

<SELECT NAME="ListOfLinks"></SELECT>

<!-- Кнопка активизации выбранной ссылки-->

<INPUT TYPE="button" VALUE="Переход"

onClick="window.location.href = document.links[Sel.ListOfLinks.selectedIndex];">

</FORM>

<A HREF="http://tnk-ug.ru/kdg/"></A>

<A HREF="http://www.dstu.edu.ru/"></A>

<A HREF="http://www.tnk-ug.ru/"></A>

<A HREF="http://www.dmm.ru/"></A>

<SCRIPT LANGUAGE="JavaScript">

<!--

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

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

{

// Создание i-элемента  списка и запись в него ссылки

document.Sel.ListOfLinks.options[i] = new Option(document.links[i], i, false, false);

}

// Выделение первого элемента в списке

document.Sel.ListOfLinks.selectedIndex = 0;

//-->

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

РЕЗУЛЬТАТ:

Динамическое  заполнение списка

Поле ввода (TEXT)

Свойства

  • name. Имя объекта.
  • defaultValue. Начальное содержимое поля.
  • value. Текущее содержимое поля.

Методы

  • focus( ). Передает полю фокус ввода.
  • blur( ). Отбирает у поля фокус ввода.
  • select( ). Выделяет содержимое поля.

Пример

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

<SCRIPT LANGUAGE="JavaScript">

<!--

function Complete()

{  Elem="Фамилия: " + Sel.Family.value + "\nИмя: " + Sel.Name.value + "\nВозраст: " + Sel.Age.value + "\nТелефон: " + Sel.Phone.value;

alert(Elem);

}

function CheckAge(age)

{ if(age<18)    return "18";   else return age; }

//-->

</SCRIPT></head>

<body lang=RU>

<H1>Заполните анкету</H1>

<FORM NAME="Sel">

<!-- Анкета -->

<TABLE> <TR><TD><B>Фамилия:<B></TD><TD><INPUT NAME="Family" SIZE=20 onBlur="this.value=this.value.toUpperCase()"></TD></TR>

<TR><TD><B>Имя:<B></TD><TD><INPUT NAME="Name" SIZE=20

onBlur="this.value=this.value.toUpperCase()"></TD></TR>

<TR><TD><B>Возраст:<B></TD><TD><INPUT NAME="Age" SIZE=3 VALUE="18"

onBlur="this.value=CheckAge(this.value)" onFocus="this.select()"></TD></TR>

<TR><TD><B>Телефон:<B></TD><TD><INPUT NAME="Phone" SIZE=10></TD></TR></TABLE>

<!-- Кнопки готовности и сброса -->

<INPUT TYPE="button" VALUE="Готово" onClick="Complete();">

<INPUT TYPE="reset" VALUE="Сброс">

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

РЕЗУЛЬТАТ:

Заполните анкету

Фамилия:

Имя:

Возраст:

Телефон:


Обратите внимание на то, что символы  фамилии и имени при потере фокуса соответствующими полями преобразуются  в прописные. Для этого используется метод toUpperCase, определенный во встроенном классе строк.

Текстовая область (TEXTAREA)

Свойства

  • name. Имя объекта.
  • defaultValue. Начальное содержимое области.
  • value. Текущее содержимое области.

Методы

  • focus( ). Передает области фокус ввода.
  • blur( ). Отбирает у области фокус ввода.
  • select( ). Выделяет содержимое области.

Пример

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

<SCRIPT LANGUAGE="JavaScript">

<!--

OK="Тетя Эльза чувствует себя хорошо.\n Юстас.";

Problem="Тетя  Эльза заболела.\n Юстас.";

function getDate()

{

today=new Date(); 

return  today.toLocaleString()+"\n";

}

function CheckRadio(form,value)

{

if(value=="Good")  form.Letter.value=getDate()+OK; 

else form.Letter.value=getDate()+Problem;

}

//-->

</SCRIPT></head>

<body lang=RU>

<H1>Отправьте телеграмму</H1>

<FORM NAME="Sel">

<P><INPUT TYPE="radio" NAME="Code" VALUE="Good" onClick="if(this.checked) CheckRadio(this.form,this.value);">

Явка в норме

<BR><INPUT TYPE="radio" NAME="Code" VALUE="Bad" onClick="if(this.checked) CheckRadio(this.form,this.value);">  Явка провалена  <P><TEXTAREA NAME="Letter" ROWS=3 COLS=35></TEXTAREA>

<INPUT TYPE="button" VALUE="Готово" onClick="alert(Sel.Letter.value);">

<INPUT TYPE="reset" VALUE="Сброс">

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

РЕЗУЛЬТАТ:

Отправьте телеграмму

Явка в норме  
Явка провалена


Поле ввода  пароля (PASSWORD)

Свойства

  • name. Имя объекта.
  • defaultValue. Начальное содержимое поля.
  • value. Текущее содержимое поля.

Методы

  • focus( ). Передает полю фокус ввода.
  • blur( ). Отбирает у поля фокус ввода.
  • select( ). Выделяет содержимое поля.

Пример

<html><head><meta http-equiv=Content-Type

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

<SCRIPT LANGUAGE="JavaScript">

<!--

function Complete()

{

if(Sel.Pwd.value==Sel.Pwd1.value)

alert("Вас зарегистрировали\nID="+Sel.Id.value+"\nPassword="+Sel.Pwd.value);

else  alert("Ошибка  при вводе пароля\nПопробуйте  еще раз");

}

//-->

</SCRIPT></head>

<body lang=RU>

<H1>Регистрация</H1>

<FORM NAME="Sel">

<TABLE>

<TR><TD><B>Идентификатор:<B></TD><TD><INPUT NAME="Id" SIZE=20 onBlur="this.value=this.value.toUpperCase()"></TD></TR>

<TR><TD><B>Пароль:<B></TD>

<TD><INPUT TYPE="password"  NAME="Pwd" SIZE=20 onFocus="this.select();"></TD></TR>

<TR><TD><B>Проверка  пароля:<B></TD>

<TD><INPUT TYPE="password"  NAME="Pwd1" SIZE=20 onFocus="this.select();"></TD></TR></TABLE>

<INPUT TYPE="button" VALUE="Готово" onClick="Complete();">

<INPUT TYPE="reset" VALUE="Сброс">

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

РЕЗУЛЬТАТ:

Регистрация

Идентификатор:

Пароль:

Проверка  пароля:


Cookie

Cookie - это свойство HTML-документа. Представляет собой набор строковых параметров, каждый из которых имеет имя и значение. Сценарий JavaScript может создавать cookie для HTML-документа, определяя в нем произвольное количество параметров и задавая для них произвольные значения. После создания такой набор параметров становится принадлежностью данного конкретного HTML-документа и может быть проанализирован, изменен или удален сценарием JavaScript.

Создание cookie

В сценарии JavaScript cookie создается с помощью свойства document.cookie. Пары имя-значение не могут содержать пробелов, запятых и точек с запятыми. Поэтому все эти символы должны быть заменены на соответствующие escape-последовательности. JavaScript имеет две функции, обрабатывающие escape-последовательности: escape и unescape.

Пара имя-значение является единственным необходимым параметром при создании cookie. Указание только пары имя-значение создает cookie, который сохраняется  только на протяжении текущего сеанса брaузера. При создании cookie можно задать дату его автоматического удаления. В этой паре надо указать имя expires и значение в стандартном формате времени по Гринвичу (GMT). Простейшим способом преобразования в формат GMT является использование одного из методов встроенного класса Date: toGMTString. Кроме этого, создавая cookie, можно указать также путь (path), домен (domain) и информацию безопасности. Извлечь эту информацию нельзя.

Удаление cookie

Самый простой способ удаления cookie - установить для него такое время автоматического удаления, которое уже прошло.

Практическое  применение cookie

  • Индивидуальная настройки параметров Web-страниц.
  • Хранение товара, выбранного посетителем виртуального магазина. Можно выбрать товары на разных страницах, а потом сделать общий заказ.
  • Хранение текущего состояния сетевой игры.

Пример

<html>  <head>

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

<body lang=RU>

<script language="JavaScript">

<!--

function parseCookie() {  

 // Разделение cookie.  

var cookieList = document.cookie.split("; ");  

 // Массив для каждого cookie в cookieList.   

 var cookieArray = new Array();  

for (var i = 0; i < cookieList.length; i++) {     

 // Разделение пар имя-значение.      

var name = cookieList[i].split("=");     

// Декодирование  и добавление в cookie-массив.     

 cookieArray[unescape(name[0])] = unescape(name[1]);     }  

return cookieArray;  }

function setCookie(visits) {  

 /* Счетчик числа посещений и определение срока хранения в 1 год. */  

var expireDate = new Date();   

// Установка  даты автоматического удаления.  

expireDate.setYear(expireDate.getYear() + 1);  

// Сохранение  числа посещений.  

 document.cookie = "Visits=" + visits +

   "; expires=" + expireDate.toGMTString() + ";";     }  

if ("" == document.cookie) {     

// Инициализация cookie.

      setCookie(1);     

document.write("<H3>Поздравляю Вас с первым посещением моего сайта.</H3>");  

 }  

else {     

// Анализ cookie.     

var cookies = parseCookie();      

 // Вывод приветствия, числа посещений и увеличение числа посещений на 1.     

document.write("<H3>Рад  снова видеть Вас на моем  сайте! Число Ваших посещений  - " +      

cookies.Visits++ + " !</H3>");     

 // Обновление cookie.     

setCookie(cookies.Visits);  

 }

//-->

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

 

 

 

 

 

 

 

 

 

 

 

 

Приложение

 

ТАБЛИЦА ОСНОВНЫХ ТЕГОВ ЯЗЫКА HTML

Основные  теги

<html> </html> 

Указывает программе  просмотра страниц что это HTML документ.

<head> </head>

Определяет  место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.

<body> </body>

Определяет  видимую часть документа. 


 

Теги  оглавления

<title> </title>

Помещает название документа в оглавление программы просмотра страниц


 

Атрибуты  тела документа

<body bgcolor=?>

Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный  цвет.

<body text=?>

Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.

<body link=?>

Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый  цвет.

<body vlink=?>

Устанавливает цвет гиперссылок на котох вы уже  побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет.

<body alink=?>

Устанавливает цвет гиперссылок при нажатии.

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