- •Язык сценариев JavaScript Диалоговое окно (prompt)
- •Окно с сообщением (alert)
- •Условный оператор
- •Оператор switch и его свойства
- •День недели
- •Оператор цикла арифметического типа
- •Массивы
- •Функция определения выходного/рабочего дня
- •События
- •Обработка значений из формы
- •Передача параметров по ссылке
- •Использование имени формы в качестве параметра функции
- •Иерархия объектов в JavaScript
- •Объект location
- •Определение выделенного элемента
- •Расположение текста и изображения в ячейке таблицы
- •Текстовая область
- •Свойства переключателя
- •Расписание занятий
- •Выбор характеристик издания
- •Использование флажков в анкете переводчика
- •Использование атрибута id
- •Раскрывающиеся списки
- •Использование списка в задаче оформления заказа на витражи
- •Использование списка в анкете переводчика
- •Обработка анкеты переводчика
- •Задание № 1
- •Задание № 2
- •Задание № 3
- •Число k должно вводится через диалоговое окно JavaScript и отображаться на экране перед таблицей.
- •Задание № 4
- •Задание № 5
Объект location
Кроме объектов window и document в JavaScript имеется еще один важный объект — location. В этом объекте представлен адрес загруженного HTML-документа. Например, если вы загрузили страницу index.htm, то значение location.href как раз и будет соответствовать этому адресу.
Впрочем, гораздо более важно, что есть возможность записывать в location.href свои новые значения. Например, в данном примере кнопка загружает в текущее окно новую страницу:
<form> <input type=button value="К оглавлению" onClick="location.href='index.htm'"> </form>
Определение выделенного элемента
Состояние переключателя (выбран или нет) хранится в свойстве checked, которе возвращает логическое значение true, если тот выбран, и false — в противном случае. Выяснить, выбран ли переключатель, являющийся первым элементом формы с именем form1, можно по значению следующего выражения:
(document.form1.elements[0]).checked
Приведем сценарий, в котором определяется выбранный переключатель при щелчке мышью по кнопке в форме (листинг 10).
Листинг 10. Определение выделенного элемента в переключателе
<HTML> <HEAD> <TITLE>Данные из формы типа "переключатель". Выделенный элемент</TITLE> <script language="JavaScript"> function vid() { var d=document var k; if (d.form1.fv[0].checked) k=d.form1.fv[0].value else if (d.form1.fv[1].checked) k=d.form1.fv[1].value else if (d.form1.fv[2].checked) k=d.form1.fv[2].value else if (d.form1.fv[3].checked) k=d.form1.fv[3].value d.form1.res.value=k } </script> </HEAD> <BODY> <FORM name="form1"> Выберите форму витража<br> <input type="radio" name="fv" value="прямоугольник">прямоугольник<br> <input type="radio" name="fv" value="квадрат">квадрат<br> <input type="radio" name="fv" value="тpeyгoльник">тpeyгoльник<br> <input type="radio" name="fv" value="кpyг">кpyг<br> <input type="button" value="Bыпoлнить" onClick="vid()"> <input type="reset" value="Отменить"> <p>Форма витража: <input type="text" name="res"> </FORM> </BODY> </HTML>
К элементам формы помимо атрибута name еще можно обращаться и с помощью атрибута id (это второй вариант использования того же самого атрибута id, помимо селектора по идентификатору в CSS).
В этом случае вид обращения к значению элемента формы form1 с атрибутом id="res2" будет следующим:
document.all("res2").value
Напишем сценарий, в котором определяется выбранный переключатель при щелчке мышью по определяемой в форме кнопке. Доступ к элементу требуется осуществить, используя уникальные имена (листинг 11).
Листинг 11. Идентификаторы
<HTML> <HEAD> <TITLE>Данные, представленные переключателем. Идентификаторы</TITLE> <script language="JavaScript"> function vid() { var d=document; var k; if (d.all("i1").checked) k=d.form1.fv[0].value else if (d.all("i2").checked) k=d.form1.fv[1].value else if (d.all("i3").checked) k=d.form1.fv[2].value else if (d.all("i4").checked) k=d.form1.fv[3].value d.all("res2").value=k } </script> </HEAD> <BODY> <FORM name="form1"> Выберите форму витража<br> <input type="radio" id="i1" name="fv" value="пpямoyгoльник">пpямoyгoльник<br> <input type="radio" id="i2" name="fv" value="квадрат">квадрат<br> <input type="radio" id="i3" name="fv" value="треугольник">треугольник<br> <input type="radio" id="i4" name="fv" value="кpyг">кpyг<br> <br> <input type="button" value="Выполнить" onClick="vid()"> <input type="reset" value="Отменить"> <p><input type="text" id="res2"> </FORM> </BODY> </HTML>