Урок 17. Функция внутри формы

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

Ваше задание

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

Возможный ответ здесь

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.

Урок 17 Функция внутри формы

Концепция

Скрипт

Эффект

Разбор скрипта

Ваше задание

Урок 17
Функция внутри формы