Лабораторные работы МИРЭА JavaScript (1017114), страница 7
Текст из файла (страница 7)
11. С документа из задания 10 сделайте ссылку на новый документ (например mytest.htm).
12. В документе mytest.html добавьте ссылку «Назад», при клике на которой вы будите возвращаться к предыдущей страничке. Для этого используйте у объекта history метод go() указав.
13. Для работы с переменными типа Date создайте новый документ. В этом документе создайте две переменные для работы с датами и выведите эти переменные на экран (в первом случае создается переменная равная текущей дате, во втором с указанными годом, месяцем и днем):
14. Добавьте третью переменную даты, в которой год, месяц и день будут вводиться с клавиатуры и выводиться на экран в формате даты. Для введенной даты, используя метод getDay() получить номер дня недели и вывести его в документ. Проверьте работу для даты вашего рождения и для 1 сентября текущего года.
15. Используя для первой переменной типа Date методы getDate(), getMonth(), getYear() получите соответственно день, месяц и год. Выведите на экран дату, которая будет через неделю после текущей. Проверьте что ваш скрипт работает и для 29 мая (у вас не должно получиться 36 мая :))
16. Написать скрипт, реализующий сложение двух чисел по щелчку на кнопке. Оба числа вводятся пользователем через диалоговые окна, а затем выводятся на экран в формате 56+4=60.
17. Напишите табулирование функций y=x2 и y=sin(x) с шагом 1 для начальных значений Х вводимых с клавиатуры. Для вычисления синуса следует использовать функцию sin() класса Math. Например y=Math.sin(90).
Лабораторная работа №3
Работа с формами
Цель работы:
Изучение программирования форм
Длительность 4 часа
Свойства форм
Если в 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 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">
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
