Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь FAQ Написать работу КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Кнопки (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 Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.119.163.95 (0.008 с.) |