ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

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

Функция

На предыдущих уроках мы постоянно использовали функции в различных событиях и командах. Что мы знаем о функциях? То что она представляет собой подпрограмму, которую можно вызвать для выполнения, обратившись к ней по имени. Мы сами создавали эти функции и присваивали им имена. Мы знаем, что в качестве имени функции нельзя присваивать ключевые слова языка 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>

Где

  • ncolor(color) — имя функции( новый цвет);
  • alert('Вы выбрали'+color) — метод объекта window выводящий окно с заданным сообщением и кнопкой ОК;
  • document.bgColor=color — определяет свойство объекта документ, в данном случае цвет страницы.

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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>

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

  • Обратите внимание, мы передаем в функцию ncolor() (новый цвет) неизменяемую строку текста, стоящую в скобках ('gren'). Она находится в одинарных кавычках, потому что имя функции стоит в двойных.
  • Когда вы нажимаете кнопку, строка в скобках передается в функцию ncolor().

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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>

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

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

  • Во-первых, мы создали функцию с переменной search(искать), которая будет результатом чего-то, происходящего в объекте document, под названием formsearch, внутри элемента find (найти), который обладает свойством value(значение).
  • Вторую функцию помещаем внутри первой. Видите вторую пару {фигурных скобок}?
  • Для второй функции создаем еще одну переменную searchUrl, представляющую собой адрес поисковой машины Яndex плюс значение переменной search, полученное через команду document.formsearch.find.value.
  • Наконец, location.href приравнивается к переменной searchUrl. После выполнения функции пользователь попадет на итоговую страницу.
  • Теперь переходим к командам формы. Их две: текстовое поле, куда пользователь вводит свой запрос, и кнопка, запускающая функцию.
  • Обратите внимание, что форма в целом получила имя formsearch. Помните, что мы говорили об иерархии объектов?
  • Затем называем текстовое поле find. Опять иерархия. Видите, как мы идем от большого к малому?
  • Дальше соединяем кнопку с командой onClick, которая запускает функцию.
  • Наконец заканчиваем командой </FORM>. Готово.