Методические рекомендации к выполнению задания 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. Сравните результат