Джо Бернс/Функция внутри формы

Джо Бернс
Урок 17. Функция внутри формы.
Концепция

Цель этого урока — познакомить вас с использованием JavaScript в формах. Сегодняшний скрипт через форму позволяет выбрать цвет фона.

Формы всегда начинаются командой <FORM> и заканчиваются командой </FORM>. Здесь ничего нового, простой HTML.

Скрипт
<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, она помещает текст на кнопку.

Ваше задание

Посмотрим, хорошо ли вы помните материал предыдущих уроков. Перепишите скрипт так, чтобы, открываясь, страница просила пользователя ввести имя. При выборе цвета должно всплывать окно со словами "Эй, (имя)! Вы выбрали (цвет)." Желаю успеха.

Назад | Содержание | Вперед