НОУ ИНТУИТ | Практикум по программированию на JavaScript. Лекция 18: Вызов функции в формы

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 19.10.2006 | Доступ: платный | Студентов: 285 / 0 | Оценка: 3.95 / 3.68 | Длительность: 09:40:00

Темы: Интернет-технологии, Программирование

Специальности: Разработчик интернет-проектов

|

Вам нравится? Нравится 87 студентам

| Поделиться |

Поддержать курс

| Скачать электронную книгу

Аннотация: Создание функций для обработки данных пользователя в формах.

Ключевые слова: сценарий, HTML, цвет фона, литерал, имя функции, функция, информация, пользователь, атрибут, значение, скрипт, запрос, prompt

Концепция

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

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

Сценарий

Пример ниже снова показывает весь документ HTML:

<html>
<head>
<SCRIPT type="text/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')">
</FORM>
</BODY>
</HTML>

Результат работы сценария

На странице выводятся две кнопки с надписями "Голубой" и "Розовый". При нажатии на любую кнопку цвет фона меняется в соответствии с указанным на кнопке цветом.

Разбор сценария

Пришло время для нового термина! Литерал является значением (VALUE), которое не изменяется. Литерал может быть числом, именем или любой случайной последовательностью чисел и имен. Помните только о том, что литерал невозможно изменить.

Еще один новый термин! Строка является любой последовательностью букв или цифр в одиночных или двойных кавычках. Таким образом следующий фрагмент сценария:

onClick="newcolor('lightblue')"

... определяет строку литерал "lightblue". Все понятно? Отлично.

Вот снова сценарий и элементы ввода:

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

<FORM>
 <INPUT TYPE="button" VALUE="Голубой" 
      onClick="newcolor('lightblue')">
 <INPUT TYPE="button" VALUE="Розовый" 
      onClick="newcolor('pink')">
</FORM>

Обратите внимание, мы передаем в функцию newcolor() (новый цвет) строку литерал, 'lightblue' или 'pink'. Она находится в одинарных кавычках, потому что имя функции стоит в двойных.

Когда вы нажимаете кнопку, строка в скобках ( 'pink' или 'lightblue' ) передается в функцию newcolor().

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

Форма передает цвет двум элементам в разделе <SCRIPT>: методу alert и свойству document.bgColor. Получив все данные, функция вступает в действие: всплывает окно и меняется цвет фона.

Не запутайтесь: атрибут VALUE (значение) в команде INPUT не является свойством JavaScript, он выводит текст на кнопку. Он не влияет на свойства JavaScript.

Задание

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

Возможное решение

Чтобы добиться нужного результата, вставьте запрос prompt перед функцией, а потом результат запроса — в команду alert. Весь документ выглядит следующим образом :

<html>
<head>
<SCRIPT type="text/javascript">
var user_name = prompt ("Можно узнать, как Вас зовут?","Ваше имя");
function newcolor(color)
{
alert("Эй, " + user_name + "! Вы выбрали " + color)
document.bgColor=color
}
</SCRIPT>
</head>
<body bgcolor="white">
<center><h1>Задайте фон страницы</h1>
</center>
<form>
  <input type="button" value="Оранжевый" onClick="newcolor('orange')">
  <input type="button" value="Салатовый" onClick="newcolor('lightgreen')">
</form>
</body>
</html>

Дальше >>

Авторизоваться

Практикум по программированию на JavaScript