8.2.Создание Web-страницы
В этой главе мы с вами для примера будем создавать Web-страницу с игрой "Угадай число". Начнем с малого. Пусть пока ваша страничка должна выглядеть так:
Для этого вам достаточно в Notepad (это "Блокнот" - простейший текстовый редактор Windows) создать документ такого содержания:
<html>
<body bgcolor="#FFDFFF">
<h1>Игра "Угадайте число"</h1>
<i>Если на угадывание числа вам удалось затратить меньше 30 попыток - вы хороший математик</i>
</html>
Пояснения:
Любой документ на языке HTML должен начинаться с тега <html> и заканчиваться тегом </html>.
Строка <body bgcolor="#FFDFFF"> приказывает броузеру задать цвет фона страницы в 16-й системе счисления (см. 5.6).
Тег <h1> обозначает "самый крупный заголовок", поэтому на нашей страничке первая строка получилась крупным шрифтом. Тег <h2> означал бы заголовок поменьше и так далее. Вообще, в большинстве случаев теги встречаются парами - открывающий и закрывающий теги, причем закрывающий отличается от открывающего косой чертой. Пара тегов рассказывает броузеру о том, что нужно делать с элементом информации, который она охватывает.
Тег <i> обозначает "курсив", поэтому на нашей страничке вторая строка получилась курсивом.
Этот HTML-документ и является описанием нашей Web-страницы. После создания HTML-документа его необходимо сохранить с расширением htm или html. Теперь, чтобы увидеть получившуюся Web-страничку живьем, вам достаточно открыть этот документ в броузере, имеющемся на вашем компьютере.
Вообще, для создания Web-страницы совсем не обязательно вручную создавать HTML-документ. Вы можете сконструировать Web-страничку в редакторе Microsoft Word или в специальной программе FrontPage Express, не написав ни одного тега, подобно тому, как в Visual Basic мы конструируем проект в режиме проектирования. HTML-документ при этом создается автоматически. Рассматривая страничку в броузере Internet Explorer, вы всегда можете увидеть и редактировать породивший его HTML-документ при помощи ViewSource.
Я предлагаю вам такой порядок доработки Web-страницы. Вы дописываете в HTML-документ очередную строку, сохраняете его, затем в броузере нажимаете кнопку обновления страницы (Refresh). Страница приобретает вид в соответствии с последними изменениями в HTML-документе. Затем вы снова изменяете HTML-документ и так далее.
8.3.Сценарий на Web-странице
Итак, мы решили развлечь читателя нашей Web-страницы. Мы предложим ему поиграть на нашей странице в игру "Угадай число". Задание на создание такой игры в Visual Basic вы уже получали раньше (3.2). Напомню условие. Компьютер загадывает число из диапазона от 1 до миллиарда. Человек должен его отгадать. Причем за наименьшее число попыток. При каждой попытке компьютер выводит номер попытки и подсказку - "мало" или "много". Сохраняться, как того требовало задание 127, мы для простоты не будем.
Сначала запрограммируем игру не на Web-странице, а как мы привыкли - в Visual Basic. Разместим на форме:
Кнопку cmdTry с надписью "Попытка"
Текстовое поле txtNumber - для того, чтобы человек вводил туда очередное число
Текстовое поле txtMessage - для слов "Много", "Мало" и "Вы угадали"
Текстовое поле txtNumberTry - для отображения количества попыток
Вот программа:
Dim A As Long 'это число - очередная попытка человека
Dim SecretNumber As Long 'это загаданное число
Private Sub Form_Load() 'Начальные установки:
Randomize
SecretNumber = Round(1000000000 * Rnd)
txtNumber.Text = 0
txtMessage.Text = "Попыток не было"
txtNumberTry.Text = 0
End Sub
'Процедура обработки нажатия на кнопку:
Sub cmdTry_Click()
A = Val(txtNumber.Text) 'превращение строки в число
If A > SecretNumber Then
txtMessage.Text = "Много"
ElseIf A < SecretNumber Then
txtMessage.Text = "Мало"
Else
txtMessage.Text = "Вы угадали"
End If
txtNumberTry.Text = txtNumberTry.Text + 1 'увеличиваем счетчик числа попыток
End Sub
Программа проста и не требует пояснений. Полужирным шрифтом я выделил фрагменты текста, которые подвергнутся изменениям при программировании для Web-страницы.
Теперь приступим к программированию нашей игры на Web-странице. Вот внешний вид страницы, который мы хотим получить:
Программа для этой игры должна быть включена в HTML-документ страницы. Там она будет называться сценарием. Пишется она не совсем на Visual Basic, а на так называемом языке VBScript. Это сильно упрощенный и немного измененный Visual Basic. Поэтому простой перенос в HTML-документ программы из Visual Basic не принесет успеха. Самое интересное то, что для программирования на VBScript вам совершенно не нужно иметь на компьютере Visual Basic. На том компьютере, где будет читаться ваша страница, он тоже не нужен. Необходимое условие одно - тот, кто будет читать вашу страницу, должен делать это при помощи броузера Internet Explorer. Не думаю, чтобы это было сильным ограничением, поскольку Windows включает в себя Internet Explorer. Во всяком случае, в России подавляющее большинство пользователей Windows используют именно этот броузер.
Internet Explorer в процессе рисования вашей страницы на экране читает ее HTML-документ и наткнувшись в его тексте на сценарий, выполняет его точно так же, как Visual Basic выполняет программу при нажатии на Start. Вот такой замечательный продукт этот Internet Explorer. Мастер на все руки.
Сценарий выполняется заново каждый раз, когда вы загружаете страницу в Internet Explorer.
Вот HTML-документ нашей страницы со включенным в него сценарием:
<html>
<body bgcolor="#FFDFFF">
<h1>Игра "Угадайте число"</h1>
Введите в текстовое поле <input type="text" size="20" name="txtNumber">
число от 1 до миллиарда и нажмите кнопку "Попытка"<p>
<input type="button" name="cmdTry" value="Попытка"><p>
Результат попытки - <input type="text" size="30" name="txtMessage"><p>
Номер попытки - <input type="text" size="10" name="txtNumberTry" ><p>
<i>Если на угадывание числа вам удалось затратить меньше 30 попыток - вы хороший математик</i>
<script language="VBScript"><!-- 'СЦЕНАРИЙ
dim A 'это число - очередная попытка человека
dim SecretNumber 'это загаданное число
Randomize
SecretNumber = Round (1000000000 * Rnd)
'Начальные значения текстовых полей:
txtNumber.Value=0
txtMessage.Value = "Попыток не было"
txtNumberTry.Value=0
'Процедура обработки нажатия на кнопку:
Sub cmdTry_OnClick()
A = int(txtNumber.Value) 'превращение строки в число
if A>SecretNumber then
txtMessage.Value = "Много"
elseif A<SecretNumber then
txtMessage.Value = "Мало"
else
txtMessage.Value = "Вы угадали"
end if
txtNumberTry.Value= txtNumberTry.Value + 1
End Sub
--></script>
</html>
Пояснения: Сценарий располагается между строками
<script language="VBScript"><!--
и
--></script>
Сравните текст сценария с текстом программы на Visual Basic. Они очень похожи. Полужирным шрифтом я выделил фрагменты сценария, которые отличают его от соответствующих фрагментов программы на Visual Basic. Так, новостью является запрет указания типа в операторах Dim. В этом случае переменные имеют тип Variant. Вместо свойства Text используется свойство Value. Вместо Click - OnClick. вместо Val - Int.
Для работы сценария необходимо было разместить на странице следующие элементы:
Кнопку cmdTry с надписью "Попытка"
Текстовое поле txtNumber - для того, чтобы человек вводил туда очередное число
Текстовое поле txtMessage - для слов "Много", "Мало" и "Вы угадали"
Текстовое поле txtNumberTry - для отображения количества попыток
Но откуда взять эти элементы, если мы Visual Basic даже не запускали? Оказывается, размещаются они на странице средствами языка HTML. Язык VBScript для этого тоже не нужен.
Давайте не спеша читать HTML-документ сверху вниз. Вот первая незнакомая строка:
Введите в текстовое поле <input type="text" size="20" name="txtNumber">
число от 1 до миллиарда и нажмите кнопку "Попытка"<p>
Посмотрите, какая строка Web-страницы ей соответствует. Выражение
<input type="text" size="20" name="txtNumber">
как раз и размещает в этой строке Web-страницы текстовое поле. То, что это должно быть именно текстовое поле, а не, скажем, кнопка, задает выражение input type="text", размер по горизонтали 20 задается выражением size="20", а имя поля задается выражением name="txtNumber".
В этой строке есть незнакомый нам тег - <p>. Это просто перевод строки на Web-странице.
Аналогично изложенному, следующая строка HTML-документа
<input type="button" name="cmdTry" value="Попытка"><p>
размещает в следующей строке Web-страницы кнопку (благодаря выражению input type="button"). Надпись на кнопке задается выражением value="Попытка".
Следующие три строки поясняются аналогично.