Чертёж десятый, половина вторая: Операторы JS

Когда дизайнер использует JavaScript, он может преследовать различные цели. Остановимся на двух, пожалуй, самых распространённых.

Во-первых, JS помогает сделать страничку красивой, неординарной, интерактивной, живой.

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

Как это делается, рассмотрим на примере шутливого теста, который приготовила для своих посетителей синичка Клава.

Прежде всего создадим формы для вопросов:

в файл klava.htm записываем строки:

<FORM name="f1">
<FIELDSET><LEGEND>Вопрос 1</LEGEND>
	<DIV>Когда хозяин вышел в сад с ружьём,
		с одной яблони упало 4 соседа, а с другой
		на 3 соседа больше. Сколько соседей упало
		со второй яблони?
	</DIV>
	<BR><INPUT type="radio" name="r" onclick="ot(1,1)">1 сосед
	<BR><INPUT type="radio" name="r" onclick="ot(1,2)">5 соседей
	<BR><INPUT type="radio" name="r" onclick="ot(1,3)">7 соседей
	<BR><INPUT type="radio" name="r" onclick="ot(1,4)">11 соседей
</FIELDSET>
</FORM>

Вопрос вместе с вариантами ответов помещаем в рамку <FIELDSET>, а эту рамку — в контейнер <FORM>, которому даём имя f1. Теперь к любому объекту этой формы можно обратиться по составному имени: f1.r[0] — к первому переключателю, f1.r[1] — ко второму.

Более того, если мы далее разместим ещё одну форму с именем f2, то объектам внутри неё можно дать точно такие же имена, как в первой форме. Что мы и сделаем, так как это значительно облегчит обработку результатов в дальнейшем.

итак, добавляем второй вопрос:

<FORM name="f2">
<FIELDSET><LEGEND>Вопрос 2</LEGEND>
	В кухне находится 39 мух. 6 мух пьют чай из лужи на
	столе, 12 летают вокруг лампочки, остальные идут
	пешком по потолку.
	Сколько мух идёт пешком по потолку?
	<IMG src="images/test1.jpg">
	<BR><INPUT type="radio" name="r" onclick="ot(2,1)">0 мух
	<BR><INPUT type="radio" name="r" onclick="ot(2,2)">18 мух
	<BR><INPUT type="radio" name="r" onclick="ot(2,3)">21 муха
	<BR><INPUT type="radio" name="r" onclick="ot(2,4)">27 мух
</FIELDSET>
</FORM>

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

самостоятельно добавь ещё три-четыре вопроса, можешь придумать свои, а можешь воспользоваться следующими картинками:

Конечно же, тест не должен появиться на страничке просто так, без всякого «вступления»:

добавь в файл klava.htm выделенные строки:

<BODY bgcolor="#ffddff" text="#880088">
	<P>Клава очень любит читать. Самая любимая её книжка
	называется «Задачник», а написал эту
	книжку замечательный писатель Григорий Остер. 
	<P>И поэтому Клава попросила поместить на её страничку
	тест, составленный по мотивам «Задачника».
	<P>Хочешь попробовать свои силы? Тогда вперёд!
	<FORM name="f1">
…

скрипты для обработки теста поместим в файл test.js, поэтому сообщи об этом браузеру:

<HEAD>
	<TITLE>Птичья логика</TITLE>
	<LINK rel="stylesheet" type="text/css" href="my_style.css">
	<SCRIPT src="test.js"></SCRIPT>
</HEAD>
…

создай файл test.js и запиши в него следующий текст:

//otv —массив номеров верных ответов
var otv="new Array(0,3,3,4,2,3);"
//rez — массив, в котором будут храниться результаты ответа на каждый вопрос
var rez="new Array(0,0,0,0,0,0);"
//kol — количество вопросов
var kol=5;

Что стоит пояснить?

В тексте файла test.js появились необычные строки. Они начинаются с двух слэшей //. Это комментарий языка JavaScript. В комментарии пишутся пояснения к текстам скриптов, и, хоть без них функции всё равно будут работать, не стоит ими пренебрегать. В достаточно больших программах комментарии — это единственное, что помогает ориентироваться в текстах скриптов. Прочитай ещё раз внимательно комментарии и попробуй понять логику работы функции.

В массиве otv хранятся номера верных ответов. Не удивляйся, что значение первого элемента массива 0. Нумерация элементов начинается с 0, поэтому, чтобы не путаться (мы-то привыкли счёт вести с 1), мы вообще не будем использовать этот нулевой элемент.

В массиве rez будут храниться результаты ответов: если пользователь выбрал верный ответ, в соответствующий элемент массива заносится 1, в случае ошибки элементу массива присваивается 0.

Создаём функцию ot(nv,no), имеющую два аргумента nv (номер вопроса) и no (номер выбранного ответа):

в файл test.js добавь строки:

function ot(nv,no){
//если номер выбранного ответа no совпадает
//со значением элемента массива otv под номером nv
		if (no==otv[nv])
//то элементу массива rez под номером nv присваивается 1
		{	rez[nv]=1}
//иначе - 0
		 else 
		{	rez[nv]=0}
}

с помощью комментариев разберись в работе этой функции;
проверь её работу в браузере. К сожалению, ты не видишь, как оцениваются твои ответы — они сохраняются в массиве. Чтобы сейчас, на стадии разработки, увидеть «внутреннюю» работу браузера, добавь команду, выводящую окно с сообщением:

function ot(nv,no){
//если номер выбранного ответа no совпадает
//со значением элемента массива otv под номером nv
		if (no==otv[nv])
//то элементу массива rez под номером nv присваивается 1
		{	rez[nv]=1}
//иначе - 0
		 else 
		{	rez[nv]=0};
	alert(rez[nv]);
}

Работает? А теперь займёмся выводом и сообщением оценки. Прежде всего поместим на страничку кнопку Посмотреть результат:

добавь в конец файла klava.htm выделенные строки:

…
</FIELDSET>
</FORM>
<CENTER>
	<INPUT type="button" id="res"
		value=" Посмотреть результат "
		onClick="ok()" >
</CENTER>
</BODY>
…

Кнопка Посмотреть результат запускает функцию ok().

в файл test.js добавь эту функцию:

function ok()
{	var cmd;
//заводим переменную oc, в которой будет подсчитываться
//количество верных ответов
	var oc=0;
//в цикле перебираем все вопросы
	for (var i=1;i<=kol;i++)
	{	

oc+=rez[i]
	}
//выводим сообщение об оценке: 

	alert("Ваша оценка: "+Math.ceil(oc*5/kol));
}

И, как обычно, несколько пояснений.

Оператор цикла

for (нач_знач i=1, услов_заверш i<=kol, прав_измен i++) {команды}

работает так: сначала переменной i присваивается начальное_значение 1 и выполняются все команды, расположенные в фигурных скобках. Затем i изменяется по правилу_изменения i++, то есть увеличивается на 1, и, если не достигнуто условие_завершения i<=kol, снова выполняются команды.

Метод Math.ceil(число) округляет аргумент число с избытком.

как всегда, проверь работу функции: попробуй все варианты и убедись, что оценка подсчитывается верно.

Вот теперь можешь перевести дух и… взяться за выполнение задания:

добавь ещё несколько вопросов и убедись, что их текст отображается, что эти вопросы «поддаются» выбору ответа и участвуют в выводе оценки.

Следующий урок