2015-10-22
240
На странице выводятся две кнопки с надписями "Голубой" и "Розовый". При нажатии на любую кнопку цвет фона меняется в соответствии с указанным на кнопке цветом.
Разбор сценария
Пришло время для нового термина! Литерал является значением (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>18. Урок: Поля формы и свойство value
|
|
|
Динамическое изменение содержимого форм.
Концепция
Сегодня мы продолжим начатое в Уроке 17. Будем передавать в функцию данные, которые пользователь введет в поле формы. Затем эти данные будут использованы для поиска в Yahoo.
Сценарий
<SCRIPT type="text/javascript"> function Gofindit(){ var searchfor = document.formsearch.findthis.value; { var FullSearchUrl = "http://av.yahoo.com/bin/query?p=" + searchfor;location.href = FullSearchUrl;}} </SCRIPT> <FORM NAME="formsearch" action="">Найдите в Yahoo:<INPUT NAME="findthis" SIZE="40" TYPE="text"><INPUT TYPE="button" VALUE="Искать"onClick="Gofindit()"></FORM>
