В мир информатики
Games.exe

"Отгадыватель мыслей" на вашем сайте

В одном из предыдущих номеров газеты-вкладки “В мир информатики” была приведена программа, демонстрирующая фокус, в котором происходит… отгадывание мыслей :). Напомню, что в фокусе человеку, которому он демонстрируется, нужно загадать двузначное число, вычесть из него сумму его цифр и полученную разность найти в табличке, после чего следует запомнить символ рядом с этой разностью. Затем этот символ… отгадывается!

А не хотите ли разместить такой фокус на школьном сайте? Если да, то эта статья — для вас.

В разработке веб-страницы можно выделить три основных этапа:

1) разработка пользовательского интерфейса, то есть внешнего вида страницы в браузере, и “логики” действий, которые могут произойти с элементами страницы;

2) реализация интерфейса на языке HTML или XHTML;

3) написание скриптов для обработки возможных событий, инициированных посетителем страницы или браузером.

Поставим задачу получить внешний вид страницы в начальном состоянии как на рис. 1, после щелчка на кнопке с надписью “Старт” — как на рис. 2, а после того, как посетитель сайта отметил “флажок” с надписью “Я нашел число и символ”, — как на рис. 3.

Рис. 1. Вид веб-страницы после загрузки
в браузер

Рис. 2. Вид веб-страницы после щелчка на кнопке "Старт"

Рис. 3. Вид веб-страницы выбора "флажка" "Я нашел число и символ"

Размещать элементы на веб-странице можно, используя язык HTML или его модификацию — XHTML. Для простоты будем использовать HTML. Писать код HTML для веб-страницы можно в простом текстовом редакторе, например, в Блокноте. Но сохранять файл необходимо с расширением html вместо используемого по умолчанию txt. Для этого в диалоговом окне Сохранение файла указываем нужное расширение через точку, а в списке Тип файла выбираем вариант Все файлы (см. рис. 4).

Рис. 4. Диалоговое окно сохранения файлов в формате html из Блокнота

Итак, начнем писать код. Сначала обсудим содержание верхней части страницы.

Название фокуса “Отгадыватель мыслей” оформим как заголовок в теге

<title> … </title> и теге <h1> … </h1>.

Порядок демонстрации фокуса целесообразно оформить в виде нумерованного списка (тег <ol> … </ol>).

Кнопку с надписью “Старт” можно разместить так:

Для оформления веб-страницы удобно использовать так называемую “табличную разметку”, то есть таблицы. И в нашем случае мы список и кнопку поместим в ячейку таблицы, а саму таблицу разместим по центру, линии сетки таблицы останутся невидимыми:

<table align="center" …

Рядом с кнопкой Старт необходимо разместить символ “пробел”, который браузер понимает как “ ”. Эта “хитрость” нужна для того, чтобы после того как мы скроем кнопку, браузер не изменил бы высоту ячейки с кнопкой.

Фрагмент кода для рассмотренных элементов выглядит следующим образом (мелким шрифтом выделены части, которые необязательны):

<html>

<head>

<title> Отгадыватель мыслей </title>

<!--

body {font-size: 11pt;}

td,th {font-size: 11pt;}

-->

</style>

<h1 align="center" style="color: gold"> ОТГАДЫВАТЕЛЬ МЫСЛЕЙ </h1>

<tr>

<td>

<ol>

<li>Задумайте 2-значное число.</li>

<li>Вычтите из него сумму его цифр.</li>

<li>Разность запомните.</li>

<li>После щелчка на кнопке "Старт" найдите разность

в появившейся таблице <br> и запомните символ справа от нее.</li>

<li>После этого отметьте флажок "Я нашел число и символ".</li>

</ol>

</td>

</tr>

<tr>

</td>

</tr>

</table>

Определенной проблемой является размещение “флажка” с текстом “Я нашел число и символ” в нижней части страницы (см. рис. 1). Дело в том, что по умолчанию все описываемые в коде элементы в большинстве случаев следуют друг за другом без пропуска строк.

Придется “хитрить” и здесь. Разместим после кнопки с надписью “Старт” еще одну таблицу с числами и символами (см. рис. 2), но сначала сделаем ее невидимой, а потом покажем. Для этого используем скриптовый язык JavaScript¹ и каскадные таблицы стилей с технологией DOM.

Таблица состоит из 9 строк и 20 столбцов. В каждом нечетном столбце запишем числа от 5 до 94 (в порядке их возрастания, расположив эти числа по строкам), а в каждом четном — буквы латиницы и кириллицы, а также специальные знаки (все они расположены случайным образом). Для того чтобы временно скрыть таблицу, используем свойство display, определяющее ее “видимость”, — присвоим ему значение none.

В нашем случае функция таблица имеет вид:

function таблица () {

document.write("<table border= 1 align='center' id='таб_сим' style='display: none;

color: black;' width=500 height=200>")

for (i = 1; i <= 9; i++) {

document.write ("<tr>")

for (j = 1; j <= 10; j++) {

document.write ("<td align=center bgcolor=aqua>", 10*(i-1)+(j-1)+5, "</td>")

if ((10 * (i - 1) + (j - 1) + 5) % 9 == 0)

document.write ("<td align=center bgcolor=gold>" + свой + "</td>")

else

document.write ("<td align=center bgcolor=gold>",

символы [Math.floor(Math.random()*символы.length)],"</td>")

}

document.write ("</tr>")

}

document.write("</table><br>")

}

Так как таблица символов до нажатия на кнопку Старт не должна быть заметной на веб-странице, мы делаем ее скрытой за счет того, что значение свойства display равно none. Но если объект становится скрытым, то он освобождает место на странице, которое занимал, а нам это не нужно из-за флажка. Поэтому заключим таблицу символов в другую таблицу, состоящую всего из одной ячейки с фиксированной высотой.

С учетом этого раздел скриптов оформляется так:

var символы=['а', 'б', 'в', 'г', 'д', 'е', 'е', 'ж', 'з', 'и', 'й', 'к', 'л', 'м', 'н', 'о', 'п', 'р', 'с', 'т', 'у', 'ф', 'х', 'ц', 'ч', 'щ', 'ш', 'э', 'ю', 'я', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '%', '^', '@', '?', '&', '=', '*', '$', '!', '~', '+', '#']

свой² = символы [ Math.floor (Math.random() * символы.length) ]

function таблица(граница,…

…

<tr>

таблица ()

</script>

</td>

</tr>

</table>

Создав таблицу, можем оформить функцию обработки щелчка на кнопке Старт, которую включим в раздел скриптов:

…

function старт() {

document.getElementById("кнопка_старт").style.display='none'

document.getElementById("таб_сим").style.display=''

}

Первая строка функции скрывает кнопку Старт, вторая необходима для включения видимости таблицы с идентификатором таб_сим.

Обратим внимание на то, что метод getElementById объекта document взят из технологии DOM (Document Object Model — “Объектная Модель Документа”), которая позволяет разработчику веб-страниц очень многое: удалять существующие элементы и добавлять новые, изменять свойства размещенных объектов (как в нашем случае), модифицировать структуру имеющихся элементов. В нашем случае метод getElementById обращается к элементу по его идентификатору (id) и через метод style изменяет значение свойства display. Зная таблицу свойств элементов (CSS), можно подобным образом изменять любое доступное свойство любого элемента html-документа.

Идем дальше, точнее — ниже :) — к элементу управления “флажок”. Запишем в разделе <form> … </form>:

<form>

Я нашел число и символ

</div>

<p align=center><input type="text" name="отгадка" style='font-size: 12pt; display:none;

text-align: center;' size="39" readonly><br>

<input type="button" value='Начать снова' name='снова' style='font-size: 12pt;

display:none;' onclick='начать_снова ()'>

</p>

</form>

После отметки “флажка” должна появиться отгадка (см. рис. 3). Функция разгадка, реализующая это, может быть оформлена следующим образом:

function разгадка() {

document.forms[0].отгадка.style.display='block'

document.forms[0].отгадка.value=' Вы запомнили символ ' + '"' + свой + '".' +

" Невероятно!"

document.forms[0].снова.style.display='block'

document.getElementById("таб_сим").style.display='none' }

— а функция обработки события “Щелчок по кнопке Начать снова”:

function начать_снова () {

location.reload ()

document.forms[0].нашел.checked = false

}

Первая команда функции перезагружает веб-страницу, то есть обновляет ее, вторая — снимает “флажок”.

Задание для самостоятельной работы

1. Дополните раздел скриптов новыми функциями, в основном разделе напишите код, размещающий интерфейсные элементы на веб-странице, и протестируйте проект³.

2. Измените функцию разгадка таким образом, чтобы в случае, когда посетитель вашего сайта отметит “флажок” раньше, чем щелкнет по кнопке Старт, появлялось сообщение “Не обманывайте меня! Вы не задумали число или(и) не нашли символ в таблице” (рис. 5).

Рис. 5. Диалоговое окно, возникающее при несвоевременном выборе флажка

¹ Его же будем использовать для управления и другими элементами — кнопкой Старт, “флажком” и др.

² Переменная свой — отгаданный символ.

³ Весь HTML-код страницы размещен на сайте газеты “Информатика” в разделе Download. — Прим. ред.

В мир информатики Games.exe

"Отгадыватель мыслей" на вашем сайте

Задание для самостоятельной работы

А.. В.. Диков,г. Пенза

В мир информатики
Games.exe

А.. В.. Диков,
г. Пенза