Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Кнопки (button, reset, submit)

Поиск

Свойства

name. Имя объекта.

value. Надпись на кнопке.

Метод

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

Пример

<html>

<head>

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

charset=windows-1251">

<script type="text/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 type="text/javascript">

<!--

function btnClick()

{

if(document.Test.Sex[0].checked)

{

document.Test.Sex[1].click();

}

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 type="text/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 type="text/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>

 

РЕЗУЛЬТАТ:

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

 

Начало формы

 

 

https://adminvps.ru/ http://htmlweb.ru/links/top_line.php file:///C:/Users/%D0%B0%D0%BD%D0%B4%D1%80%D0%B5%D0%B9/Documents/%D0%9F%D1%80%D0%B5%D0%BF%D0%BE%D0%B4%D0%B0%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%202013/Web%20%D1%82%D0%B5%D1%85%D0%BD%D0%BE%D0%BB%D0%BE%D0%B3%D0%B8%D0%B8/JavaScript%20-%20%D0%9E%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5%20%D1%8F%D0%B7%D1%8B%D0%BA%D0%B0.htm file:///C:/Users/%D0%B0%D0%BD%D0%B4%D1%80%D0%B5%D0%B9/Documents/%D0%9F%D1%80%D0%B5%D0%BF%D0%BE%D0%B4%D0%B0%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%202013/Web%20%D1%82%D0%B5%D1%85%D0%BD%D0%BE%D0%BB%D0%BE%D0%B3%D0%B8%D0%B8/JavaScript%20-%20%D0%9E%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5%20%D1%8F%D0%B7%D1%8B%D0%BA%D0%B0.htm file:///C:/Users/%D0%B0%D0%BD%D0%B4%D1%80%D0%B5%D0%B9/Documents/%D0%9F%D1%80%D0%B5%D0%BF%D0%BE%D0%B4%D0%B0%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%202013/Web%20%D1%82%D0%B5%D1%85%D0%BD%D0%BE%D0%BB%D0%BE%D0%B3%D0%B8%D0%B8/JavaScript%20-%20%D0%9E%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5%20%D1%8F%D0%B7%D1%8B%D0%BA%D0%B0.htm http://htmlweb.ru/ http://htmlweb.ru/ http://htmlweb.ru/html/ http://htmlweb.ru/css/ http://htmlweb.ru/java/ http://htmlweb.ru/php/ http://htmlweb.ru/xml/ http://htmlweb.ru/ajax/ http://htmlweb.ru/service/ http://htmlweb.ru/download/ http://htmlweb.ru/other/ http://htmlweb.ru/java/js.php# http://htmlweb.ru/sitemap/ http://htmlweb.ru/user/signup.php http://htmlweb.ru/user/remember.php http://www.pixelplus.ru/ http://igrovoi-klub.org/ http://www.solaris-sc.com.ua/ http://htmlweb.ru/java/js.php#Array http://htmlweb.ru/java/js.php#Date http://htmlweb.ru/java/js.php#Window http://htmlweb.ru/java/js.php#Document http://htmlweb.ru/java/js.php#Form http://htmlweb.ru/java/js.php#Cookie http://htmlweb.ru/java/js1.php http://htmlweb.ru/java/js1.php http://htmlweb.ru/java/js2.php http://htmlweb.ru/java/js2.php http://htmlweb.ru/java/js3.php http://htmlweb.ru/java/js3.php http://htmlweb.ru/java/js4.php http://htmlweb.ru/java/js4.php http://htmlweb.ru/java/js5.php http://htmlweb.ru/java/js5.php http://htmlweb.ru/java/js6.php http://htmlweb.ru/java/js6.php http://htmlweb.ru/java/js7.php http://htmlweb.ru/java/js7.php http://kdg.htmlweb.ru/ http://www.dstu.edu.ru/ http://www.moidomovenok.ru/ http://www.vsetaksi.ru/

 

 

Конец формы

 

 

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

Свойства

name. Имя объекта.

defaultValue. Начальное содержимое поля.

value. Текущее содержимое поля.

Методы

focus(). Передает полю фокус ввода.

blur(). Отбирает у поля фокус ввода.

select(). Выделяет содержимое поля.

Пример

<html>

<head>

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

charset=windows-1251">

<script type="text/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 type="text/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 type="text/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.

Создание cookie

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

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

Удаление cookie

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



Поделиться:


Последнее изменение этой страницы: 2016-12-28; просмотров: 338; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.15.29.248 (0.006 с.)