<option value="red">Красный </option> <option value="yellow">Жёлтый</option> <optionvalue="maroon">Каштановый</option> <option value="green">Зеленый</option> <option value="blue">Cиний
</select><P>
<BUTTON onclick="select_()">Выполнить</button> <P><B ID="alfa"></b><br>
<B ID="beta"></b> </body></html>
В примере 3.2 нет необходимости использовать контейнер <FORM> …</form>, так как на веб-сервер ничего не передаётся.
Задача 3.1. Создайте сайт из двух страниц. Первая страница имеет заголовок Заказ мебели. На ней расположены два поля со списками (теги <SELECT>), поле (<INPUT>) и кнопка (<SUBMIT>). Из первого поля со списком пользователь выбирает изделие (шкаф, стол, сервант и т.д.), из второго − материал (дуб, орех, бук), в третье поле нужно ввести количество заказываемых изделий.
После ввода данных необходимо проверить, все ли данные введены. Если обнаружена ошибка, то нужно вывести сообщение и предложить её исправить. Правильно введённые данные нужно отправить на веб-сервер.
Вторая страница содержит написанный на PHP скрипт, с по- мощью которого формируется следующее сообщение:
Ваш заказ принят.
Заказано изделие – название заказанного изделия Материал – заказанный материал Количество – заказанное количество.
Проверка данных сразу после ввода
Если в форме нужно заполнить много полей, то пользователю
удобно получать сообщения об ошибках сразу после окончания ввода данных в очередное поле, т.е. после нажатия клавиши Tab или клавиши со стрелкой. Для немедленной проверки введённых
34
данных служит событие onchange, которое используется так же, как и другие события:
<INPUT TYPE="text" SIZE=6 onchange="arg(this)">
Функция, вызываемая событием onchange, имеет примерно та- кую структуру:
function arg(fld)
{x=fld.value //введённое значение
if(x. . .) |
//условия проверки |
{alert("Сообщение об ошибке"); |
|
fld.focus(); |
fld.select() } |
}
Методы focus() и select() служат для возвращения курсора мышки в поле и выделения ошибочных данных. Эти методы без
использования специальных приёмов правильно работают только в браузере Mozilla.
Задача 3.2. Создайте страницу для вычисления тригонометри- ческих функций (рис. 1). Вводимые пользователем данные должны проверяться немедленно после ввода и нажатия кнопки Вычис-
лить.
Рис. 1. Вычисление тригонометрических функций
35
Не забудьте перевести градусы в радианы. Название тригоно- метрической функции можно передавать как параметр тега :
<option value="sin" . . . >
Сформируйте текстовую строку вида
"Math." + имя_ф + "(" + знач_аргумета + ")" // имя_ф – sin,cos или tan
Затем воспользуйтесь функцией eval(строка), которая выпол- няет выражение, хранящееся в строке.
Л а б о р а т о р н а я р а бо т а №4
Изображения и рисование
Цель работы – исследовать методы динамического размеще- ния изображений на странице и научиться создавать рисунки с по- мощь сценария.
Предварительная загрузка изображений
Изображения, размещаемые на сайтах, должны удовлетворять двум противоречащим друг другу требованиям: иметь высокое качество и быстро загружаться. Но чем выше качество изображе- ния, тем больше занимаемый изображением объём памяти и тем медленнее оно загружается. Задача построения изображения, имеющего приемлемые объём и качество, решается с помощь гра- фических пакетов прикладных программ, например Photoshop с подключённым к нему пакетом ImageReady.
Средствами JavaScript можно сначала загрузить несколько изображений в кэш, а затем выводить их по одному на экран по команде пользователя. Такой приём основан на психологии поль- зователя Интернета. Опытным путём доказано, что человек не за-
мечает паузы между моментами посылки запроса и получением ответа, если эта пауза не больше четырёх секунд. Пользователь привык ждать несколько десятков секунд, пока загрузится вы- бранная им страница, а при работе с уже загруженной страницей болезненно реагирует на возникающие паузы.
36
|
Для |
загрузки |
изображения в память без отображения его |
на |
экране служит |
объект Image, которому не соответствует |
|
ни |
один |
элемент |
HTML-документа. Создаётся и используется |
Image так:
//создание объекта
var risunok = new Image(ширина, высота) //загрузка pict.jpg в память risunok.src = "pict.jpg"
//отображение на экране document.images[0].src = risunok.src
Задача 4.1. Создайте страницу (рис. 2), на которой пользова- тель может просматривать фотографии, выбирая их названия из поля со списком (тег <SELECT>).
Рис. 2. Просмотр фотографий, выбираемых из списка
37