- •Методические указания по выполнению лабораторных работ
- •Задание
- •Часть вторая
- •Задание
- •Часть третья
- •Задание
- •Часть четвертая
- •Рассморим скрипт
- •Задание
- •Лабораторная работа № 2
- •Разбор скрипта
- •Задание
- •Команды и эффекты
- •Задание
- •Лабораторная работа № 3
- •Рассмотрим скрипт.
- •Разбор скрипта
- •События onMouseOut и onUnload
- •Разбор скрипта
- •Задание
- •Лабораторная работа № 4
- •Разбор скрипта
- •Продолжаем рассматривать работу с окнами. Скрипт
- •Разбор скрипта
- •Задание
- •Лабораторная работа № 5
- •Часть 1
- •Разбор скрипта
- •Часть 2
- •Разбор скрипта
- •Разбор скрипта
- •Задания Задание № 1
- •Задание № 2
- •Задание № 3
- •Лабораторная работа № 6
- •Скрипт:
- •Разбор скрипта
- •Разбор скрипта
- •Разбор скрипта
- •Задания Задание по первой части
- •Задание по второй части
- •Задание по третьей части
- •Начало формы
- •Конец формы
- •Часть вторая
- •Разбор скрипта
- •Часть третья
- •Разбор скрипта
- •Часть четвертая
- •Разбор скрипта
- •Случайное число
- •Лабораторная работа № 8
- •Разбор скрипта
- •Часть вторая
- •Разбор скрипта
- •Задания Задание к первой части
- •Задание ко второй части
Лабораторная работа № 6
Первая часть
Цель — познакомиться с использованием JavaScript в формах.
Рассмотрим скрипт, который через форму позволяет выбрать цвет фона.
Формы всегда начинаются командой <FORM> и заканчиваются командой </FORM>.
Скрипт:
<html> <head> <SCRIPT LANGUAGE="JavaScript"> function newcolor(color) { alert("Вы выбрали " + color) document.bgColor=color } </SCRIPT> </HEAD> <BODY> <p>Выбрать цвет фона</p> <FORM> <INPUT TYPE="button" VALUE="Голубой" onClick="newcolor('lightblue')"> <INPUT TYPE="button" VALUE="Розовый" onClick="newcolor('pink')"> <INPUT TYPE="button" VALUE="Вернуть" onClick="newcolor('white')"> </FORM> </BODY> </HTML>
Разбор скрипта
function newcolor(color) { alert("Вы выбрали " + color) document.bgColor=color } <FORM> <INPUT TYPE="button" VALUE="Голубой" onClick="newcolor('lightblue')"> <INPUT TYPE="button" VALUE="Розовый" onClick="newcolor('pink')"> <INPUT TYPE="button" VALUE="Вернуть" onClick="newcolor('white')"> </FORM>
передаем в функцию newcolor() (новый цвет) неизменяемую строку текста, стоящую в скобках ('lightblue'). Она находится в одинарных кавычках, потому что имя функции стоит в двойных.
Когда вы нажимаете кнопку, строка в скобках передается в функцию newcolor().
Функция ждет, пока поступит необходимая ей информация. Ранее в функциях скобки были пустые. Потому что у них были все необходимые данные. В данном случае дополнительная информация поступает в функцию, когда пользователь нажимает на кнопку. Кнопка содержит ту же функцию, только теперь у нее есть необходимые данные, то есть цвет. Форма передает цвет двум элементам в разделе <SCRIPT>: методу alert и строке document.bgColor. Получив все данные, функция вступает в действие: всплывает окно и меняется цвет фона.
Не запутайтесь: VALUE (значение) в команде INPUT не является свойством JavaScript, она помещает текст на кнопку.
Вторая часть
Теперь попробуем передавать в функцию данные, которые пользователь введет в поле формы. Затем эти данные будут использованы для поиска в Yahoo.
Скрипт
<SCRIPT LANGUAGE="JavaScript"> function Gofindit() { var search = document.formsearch.find.value; { var searchUrl = "http://av.yahoo.com/bin/query?p=" + search; location.href = searchUrl;}} </SCRIPT> <FORM NAME="formsearch">Найдите в Yahoo: <INPUT NAME="find" SIZE="40" TYPE="text"> <INPUT TYPE="button" VALUE="Искать" onClick="Gofindit()"> </FORM>
Разбор скрипта
Необходимо четкое понимание иерархии объектов.
Во-первых, создаем функцию с переменной search(искать), которая будет результатом чего-то, происходящего в объекте document, под названием formsearch, внутри элемента find (найти), который обладает свойством value(значение).
Вторую функцию помещаем внутри первой.
Для второй функции создаем еще одну переменную searchUrl, представляющую собой адрес поисковой машины Yahoo плюс значение переменной search, полученное через команду document.formsearch.find.value.
Наконец, location.href приравнивается к переменной searchUrl. После выполнения функции пользователь попадет на итоговую страницу.
Теперь переходим к командам формы. Их две: текстовое поле, куда пользователь вводит свой запрос, и кнопка, запускающая функцию.
Обратите внимание, что форма в целом получила имя formsearch.
Затем называем текстовое поле find. Опять иерархия.
Дальше соединяем кнопку с командой onClick, которая запускает функцию.
Наконец заканчиваем командой </FORM>. Готово.
Третья часть
Продолжаем рассматривать взаимодействие форм и JavaScript.
Обычно JavaScript в соединении с формами используется для проверки ввода данных..
Скрипт
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function doit() { alert("document.myform.fname.value — это " + document.myform.fname.value) var greeting="Привет, " alert(greeting + document.myform.fname.value + " " + document.myform.lname.value) alert("Количество букв в имени " + document.myform.fname.value.length) } </SCRIPT> </HEAD> <BODY> <FORM NAME="myform"> Ваше имя: <INPUT TYPE="text" NAME="fname"><p> Ваша фамилия: <INPUT TYPE="text" NAME="lname"><p> <INPUT TYPE="button" VALUE="Отправить" onClick="doit()"> </FORM> </BODY> </HTML>