Задание
Необходимо создать форму, которая будет взаимодействовать с пользователем. Форма должна иметь три элемента:
поле ввода с просьбой ввести имя;
два поля для флажков с вопросом о том, что больше нравится пользователю, мороженое или шоколад;
кнопку отправки данных.
С каждым элементом должно произойти следующее:
При вводе имени в строке состояния должны появиться слова: «Впишите сюда свое имя».
Два поля с флажками должны отослать в строку состояния слова: «Вы выбрали...» и выбор пользователя.
При нажатии на кнопку должно выскочить окно предупреждения, благодарящее пользователя за участие в опросе.
Начало формы
Имя:
Что
вам больше нравится: 
Шоколад
Мороженое
Конец формы
А вот и скрипт:
<FORM> Name: <INPUT TYPE="text" SIZE="30" onFocus="window.status='Введите свое имя';"> Что вам больше нравится: <INPUT TYPE="checkbox" onClick="window.status='Вы выбрали шоколад'";> Шоколад <INPUT TYPE="checkbox" onClick="window.status='Вы выбрали мороженое'";> Мороженое <INPUT TYPE="submit" onClick="alert('Спасибо за участие в опросе')";">
</FORM>
Лабораторная работа № 3
Cоздавая переменную, вы присваиваете имя результату команды или события JavaScript. Создавая функцию, вы делаете почти то же самое, только имя присваивается целой серии команд. Множество команд JavaScript вы комбинируете в одну.
Рассмотрим скрипт.
Сам скрипт состоит из двух частей: собственно функции и команды onLoad, которая ее запускает. Вот обе части:
<SCRIPT LANGUAGE="javascript">
<!-- Скрыть от браузеров, не читающих Javascript
function dateinbar() { var d = new Date(); var y = d.getFullYear(); var da = d.getDate(); var m = d.getMonth() + 1; var t = da + '/' + m + '/' + y; defaultStatus = "Вы прибыли на страницу " + t + "."; } // не скрывать -->
</SCRIPT>
...и команда onLoad в <BODY>:
<BODY BGCOLOR="хххххх" onLoad="dateinbar()">
Разбор скрипта
Что такое <!-- --> ?
Еще одна команда. Этими знаками вы пользуетесь для комментариев в теле HTML:
<!-- Это текст комментария, не видимый на странице -->
Если пользоваться этими командами, тогда браузер успешно проигнорирует незнакомый текст и покажет страницу.
Однако соблюдайте несколько правил:
Команды комментария должны находиться между <SCRIPT> и </SCRIPT>. Если вы поставите их снаружи, то браузер посчитает комментарием весь скрипт и ничего не выйдет.
Текст после команды <!-- должен находиться на одной строке.
Перед заключительной командой --> должна стоять двойная дробь //, иначе JavaScript примет ее за часть скрипта. Ошибка.
Нет, совсем не обязательно писать текст к этим командам.
Вернемся к разбору
Сначала первая часть скрипта устанавливает функцию. Потом команда в строке <BODY> ее запускает. Давайте сначала разберем функцию.
function dateinbar() { var d = new Date(); var y = d.getFullYear(); var da = d.getDate(); var m = d.getMonth() + 1; var t = da + '/' + m + '/' + y; defaultStatus = "Вы прибыли на страницу " + t + "."; }
Схема довольно понятная. Вы пишете "function" и даете ей любое имя, какое вашей душе угодно, точно так же, как мы делали с переменными. Оно может быть какой угодно длины, если в нем нет пробелов и это слово уже не участвует в JavaScript. Но обратите внимание, что после имени функции стоят круглые скобки, как и после метода. То есть, создавая функцию, как бы создаем новый метод для выполнения задачи. На этот раз я выбрал имя "dateinbar()" (дата в строке состояния), потому что это функция и делает — помещает дату в строку состояния.
Очень важно! Команды, из которых состоит функция, должны быть заключены в фигурные скобки {}. Текст внутри фигурных скобок должен быть вам уже знаком. Тот же скрипт мы использовали пару уроков назад.
Создается переменная для года;
Еще одна для числа;
Еще одна для месяца;
Затем четвертая для даты целиком;
Последняя команда новая:
defaultStatus = "Вы прибыли на страницу " + t + ".";
"defaultStatus" (строка состояния по умолчанию) — свойство объекта window. Его цель — поместить текст в строку состояния внизу окна браузера. Почему не написать просто window.status? Этого нельзя сделать, потому что такая схема используется для события, например, с командой onClick. Раз строка состояния не находится внутри команды HTML, берем defaultStatus. Есть только одна строка состояния — она же и по умолчанию.
Команда "onLoad="
Команда onLoad (на вход, загрузку) (обратите внимание на заглавные буквы) говорит браузеру, что, загружая страницу, он должен выполнить следующее. В нашем случае следует функция dateinbar{}.
Эта команда почти всегда располагается в строке <BODY> документа HTML. И почти всегда за ней следует функция, но это необязательно. Можно с таким же успехом поместить туда и команду объект.метод.
Расположение элементов
Это имеет не последнее значение. Вы знаете, что onLoad идет в строку BODY. Скрипт с функцией должен находиться между командами <HEAD> и </HEAD>. Хотя на самом деле его можно поместить где угодно, но если вы расположите его после команды onLoad, он заработает только после того, как загрузится вся страница. Поместив скрипт перед командой onLoad, вы помещаете его в память компьютера, и когда onLoad вызовет его, он будет готов к работе.
Практически любой набор команд JavaScript можно записать в виде функции.