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

На предыдущих уроках мы постоянно использовали функции в различных событиях и командах. Что мы знаем о функциях? То что она представляет собой подпрограмму, которую можно вызвать для выполнения, обратившись к ней по имени. Мы сами создавали эти функции и присваивали им имена. Мы знаем, что в качестве имени функции нельзя присваивать ключевые слова языка JavaScript. Мы знаем, что за именем функции обязательно стоит пара круглых скобок. В этих скобки заключается програмный код(тело) функции. Но мы никогда этим не пользовались. Настало время рассмотреть пример, когда функция принимает параметры, указанные в скобках. Для этого опять воспользуемяс формой.

Создадим форму с тремя кнопками.

<form action="" method="get">
<input name="" type="button" value="Зеленый">
<input name="" type="button" value="Розовый">
<input name="" type="button" value="Вернуть">
</form>

Это будет выглядеть ТАК.

Создадим функцию внутри формы. Пишем скрипт.

<script language="JavaScript">
function ncolor(color)
{
alert('Вы выбрали'+color);
document.bgColor=color;
}

</script>

Где

Пишем полностью HTML-код страницы.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Параметры функции</title>
<script language="JavaScript">

function ncolor(color)
{
alert('Вы выбрали '+color);
document.bgColor=color;
}

</script>
</head>

<body>
<form action="" method="get">
<input type="button" value="Зеленый" onClick="ncolor(color='gren')" >
<input type="button" value="Розовый" onClick="ncolor(color='red')">
<input type="button" value="Вернуть" onClick="ncolor(color='white')">
</form>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Давайте в целях закрепления материала напишем скрипт с использование функции внутри фомы, в котором при нажатии кнопки появится диалоговое окно с просьбой ввести имя, следом второе окно ввести отчество. Третье диалоговое окно спросит о выборе цвета.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Параметры функции</title>
<script language="JavaScript">
function newcolor(color)
{
user_name = prompt ("Введите свое имя ", "");
rec_name = prompt ("Введите свое отчество ", "");
alert( user_name+rec_name+ "! Вы выбрали цвет?");
document.bgColor=color;
}
</script>
</head>

<body>
<form action="" method="get">
<input type="button" value="Зеленый" onClick="newcolor(color='gren')" >
<input type="button" value="Розовый" onClick="newcolor(color='red')">
<input type="button" value="Вернуть" onClick="newcolor(color='white')">
</form>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК .

А теперь давайте передадим в функцию данные, которые пользователь введет в поле формы. Затем эти данные будут использованы для поиска в Яndex.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Поля форм и свойство value</title>

<script language="JavaScript">
function bumiscat(){
var search = document.formsearch.find.value;
alert('Сейчас поищем!');
{
var searchUrl = "http://www.yandex.ru/" + search;
location.href = searchUrl;}}
</script>

</head>

<body>
<form action="" name="formsearch" method="get">Найдите в Яndex
<input name="find" type="text" size="40">
<input name="" type="button" value="Искать" onClick="bumiscat()">
</form>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК .

Разберем скрипт.



  • Другие |
назадвверхвперед
Rambler's Top100