UTF-8" /> Работы с формами, иерархия в Javascript | Уроки математики

Работы с формами, иерархия в Javascript

Методические рекомендации к выполнению задания 1
В языке JavaScript все элементы на web-странице выстраиваются в иерархическую структуру. Каждый элемент предстает в виде объекта. И каждый такой объект может иметь определенные свойства и методы. В свою очередь, язык JavaScript позволяет легко управлять объектами web-страницы, хотя для этого очень важно понимать иерархию объектов, на которые опирается разметка HTML.
С точки зрения языка JavaScript окно браузера - это некий объект window. Этот объект также содержит в свою очередь некоторые элементы оформления, такие как строка состояния. Внутри окна можно разместить документ HTML или файл какого-либо другого типа. Такая страница является объектом document. Это означает, что объект document представляет в языке JavaScript загруженный на настоящий момент документ HTML. Объект document является очень важным объектом в языке JavaScript. К свойствам объекта document относятся, например, цвет фона для web-страницы. Все без исключения объекты HTML являются свойствами объекта document. Примерами объекта HTML являются, к примеру, ссылка или заполняемая форма.
Чтобы  иметь возможность получать информацию о различных объектах в этой иерархии и управлять ею мы должны знать, как в языке JavaScript организован доступ к различным объектам. Каждый объект иерархической структуры имеет свое имя. Следовательно, если нужно узнать, как можно обратиться к первому рисунку на HTML-странице, то обязаны сориентироваться в иерархии объектов. И начать нужно с самой вершины. Первый объект такой структуры называется document. Первый рисунок на странице представлен как объект images[0]. Это означает, что отныне мы можем получать доступ к этому объекту, записав в JavaScript document.images[0]. Если же, например, нужноузнать, какой текст ввел читатель в первый элемент формы, то нужно выяснить, как получить доступ к этому объекту. И снова начинаем с вершины нашей иерархии объектов. Затем нужно проследить путь к объекту с именем elements[0] и последовательно записать названия всех объектов, которые минуем. В итоге выясняется, что доступ к первому полю для ввода текста можно получить, записав: document.forms[0].elements[0]
Чтобы  узнать текст, введенный читателем нужно написать на языке JavaScript строку:
name= document.forms[0].elements[0].value;
Полученная строка заносится в переменную name. Следовательно, теперь мы можем работать с этой переменной, как нам необходимо. Например, мы можем создать выпадающее окно, воспользовавшись командой alert("Hi " + name). В результате, если читатель введет в это поле слово 'Stefan', то по команде alert("Hi " + name) будет открыто выпадающее окно с приветствием 'Hi Stefan'.
Если Вы имеете дело с большими страницами, то процедура адресации к различным объектам по номеру может стать весьма запутанной. Например, придется решать, как следует обратиться к объекту document.forms[3].elements[17]document.forms[2].elements[18]? Во избежание подобной проблемы, можно самим присваивать уникальные имена различным объектам. Посмотрим на примере, как это делается:
<formname="myForm">
Name:
<input type="text" name="name" value=""><br>...
Эта запись означает, что объект forms[0] получает теперь еще и второе имя - myForm. Точно так же вместо elements[0]можно писать name (последнее было указано в атрибуте name тэга <input>). Таким образом, вместо
name= document.forms[0].elements[0].value;
Вы можете записать
name= document.myForm.name.value;
Это значительно упрощает программирование на JavaScript, особенно в случае с большими web-страницами, содержащими множество объектов. При написании имен нужно следить и за положением регистра - то есть нельзя написать myform вместо myForm. В JavaScript многие свойства объектов доступны не только для чтения. Имеетсявозможность записывать в них новые значения. Например, посредством JavaScript можно записать в упоминавшееся поле новую строку.

Пример кода на JavaScript, иллюстрирующего такую возможность - интересующий нас фрагмент записан каксвойство onClick второго тэга <input>:
<form name="myForm">
<input type="text" name="input" value="Привет!!!">
<input type="button" value="Write"
onClick="document.myForm.input.value= 'Yo!'; ">
Кроме объектов window и document в JavaScript имеется еще один важный объект - location. В этом объекте представлен адрес загруженного HTML-документа. Например, если Вы загрузили страницу http://www.xyz.com/page.html, то значение location.href как раз и будет соответствовать этому адресу.
В location.hrefможно записывать свои новые значения. Например, в данном примере кнопка загружает в текущее окно новую страницу:
<form>
<input type=button value="Yahoo"
onClick="location.href='http://www.yahoo.com'; ">
</form>

Методические рекомендации к выполнению задания 2
1.    Создайте два произвольных рисунка формата gif. Сохраните их в отдельной папке на рабочем столе под названиями home.gif и ruler.gif.
2.    Создайте HTML-страницу:
<html>
<head>
</head>
<body bgcolor=#925142>
<center>
<img src="home.gif" name="pic1" width=600 height=100>
</center>
<p>
<form name="myForm">
Name:
<input type="text" name="name" value=""><br>
e-Mail:
<input type="text" name="email" value=""><br><br>
<input type="button" value="Нажми" name="myButton" onClick="alert('Спасибо!')">
</form>
<p>
<center>
<img src="ruler.gif" name="pic4" width=300 height=15>
<p>
<a href="http://rummelplatz.uni-mannheim.de/~skoch/">Моястраничка</a>
</center>
</body>
</html>
3. Проверьте результат.

Итак, мы имеем два рисунка, одну ссылку и некую форму с двумя полями для ввода текста и одной кнопкой. На следующем рисунке иллюстрируется иерархия объектов, создаваемая HTML-страницей из нашего примера:

Методические рекомендации к выполнению задания 3
1. Создайте исходный код скрипта:
<html>
<head>
<title>Objects</title>
<script language="JavaScript">
<!-- hide
function first() {
// создает выпадающее окно, где размещается
// текст, введенный в поле формы
alert("Текст: " +  document.myForm.myText.value); }
function second() {
// данная функция проверяет состояние переключателей
varmyString= "Переключатель ";
// переключатель включен, или нет?
if (document.myForm.myCheckbox.checked) myString+= "включен"
elsemyString+= "отключен";
// вывод строки на экран
alert(myString); }
// -->
</script>
</head>
<body bgcolor=lightblue>
<form name="myForm">
<input type="text" name="myText" value="Привет!!!">
<input type="button" name="button1" value="Кнопка 1"
onClick="first()">
<br>
<input type="checkbox" name="myCheckbox" CHECKED>
<input type="button" name="button2" value="Кнопка 2"
onClick="second()">
</form>
<p><br><br>
<script language="JavaScript">
<!-- hide
document.write("Цветфона: ");
document.write(document.bgColor + "<br>");
document.write("Текст второй кнопки: ");
document.write(document.myForm.button2.value);
// -->
</script>
</body>
</html>
3.    Сравните результат