Сценарий на Web-странице
До сих пор мы вставляли в HTML-документ только описания внешнего вида Web-страницы. Нигде мы не писали программы, которая заставила бы Web-страничку что-нибудь сделать. Например, ответить на вопрос или что-нибудь перемножить. Или поиграть с нами. Этим мы сейчас и займемся.
Пусть мы хотим развлечь читателя нашей Web-страницы. Мы предложим ему поиграть на нашей странице в игру "Угадайте число". Задание на создание такой игры в VB вы уже получали раньше (Задание 138). Напомню условие. Компьютер загадывает число из диапазона от 1 до миллиарда. Человек должен его отгадать. Причем за наименьшее число попыток. При каждой попытке компьютер выводит номер попытки и подсказку – "мало" или "много". Сохраняться, как того требовало Задание 138, мы для простоты не будем.
Программа на VB. Сначала запрограммируем игру не на Web-странице, а как мы привыкли – в VB. Разместим на форме:
- Кнопку cmdTry с надписью "Попытка"
- Текстовое поле txtNumber – для того, чтобы человек вводил туда очередное число
- Текстовое поле txtMessage – для слов "Много", "Мало" и "Вы угадали"
- Текстовое поле txtNumberTry – для отображения количества попыток
- Кнопку cmdTry с надписью "Попытка"
- Текстовое поле txtNumber – для того, чтобы человек вводил туда очередное число
- Текстовое поле txtMessage – для слов "Много", "Мало" и "Вы угадали"
- Текстовое поле txtNumberTry – для отображения количества попыток
Вот программа:
Dim A As Long 'Число - попытка человека
Dim SecretNumber As Long 'Загаданное компьютером число
'НАЧАЛЬНЫЕ УСТАНОВКИ:
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Randomize()
SecretNumber = Math.Round(1000000000 * Rnd()) 'Компьютер загадывает число
txtNumber.Text
= 0 'Текстовое поле для ввода человеком числа
txtMessage.Text = "Попыток не было" 'Текстовое поле для вывода компьютером сообщений
txtNumberTry.Text = 0 'Текстовое поле для вывода количества попыток
End Sub
' ЧТО ДЕЛАТЬ ПРИ ОЧЕРЕДНОЙ ПОПЫТКЕ ОТГАДАТЬ ЧИСЛО:
Private Sub cmdTry_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cmdTry.Click
A = Val(txtNumber.Text) 'Преобразуем содержимое текстового поля в число
If A > SecretNumber Then 'В этом операторе If вся несложная логика игры
txtMessage.Text
= "Много"
ElseIf A < SecretNumber Then
txtMessage.Text = "Мало"
Else
txtMessage.Text = "Вы угадали"
End If
txtNumberTry.Text = Val(txtNumberTry.Text) + 1
End Sub
Программа проста и не требует пояснений. Полужирным шрифтом я выделил фрагменты текста, которые подвергнутся изменениям при программировании для Web-страницы.
Теперь приступим к программированию нашей игры на Web-странице. Внешний вид страницы, который мы хотим получить, показан на Рис. 23.4.
Рис. 23.4
Сценарий на VBScript. Программа для этой игры должна быть включена в HTML-документ страницы. Там она будет называться сценарием. Я напишу программу не совсем на VB, а на так называемом языке VBScript. Это сильно упрощенный и немного измененный VB. Поэтому простой перенос в HTML-документ программы из VB не принесет успеха. Самое интересное то, что для программирования на VBScript вам совершенно не нужно иметь на компьютере VS. На том компьютере, где будет читаться ваша страница, VS тоже не нужна. Необходимое условие одно – тот, кто будет читать вашу страницу, должен делать это при помощи браузера Internet Explorer. Не думаю, чтобы это было сильным ограничением, поскольку Internet Explorer входит в состав Windows. Во всяком случае, в России подавляющее большинство пользователей Windows используют именно этот браузер.
Internet Explorer в процессе рисования вашей страницы на экране читает ее HTML-документ и наткнувшись в его тексте на сценарий, выполняет его точно так же, как VB выполняет программу при нажатии на Start. Вот такой замечательный продукт этот Internet Explorer. Мастер на все руки.
Сценарий выполняется заново каждый раз, когда вы загружаете страницу в Internet Explorer.
Вот HTML-документ нашей страницы со включенным в него сценарием:
<html>
<body bgcolor="#FFDFFF">
<h1>Игра "Угадайте число"</h1>
<img src="Шестеренки.jpg"><p>
Введите в текстовое поле <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>
Сравните текст сценария с текстом программы на VB. Они очень похожи. Полужирным шрифтом я выделил фрагменты сценария, которые отличают его от соответствующих фрагментов программы на VB. Так, новостью является запрет указания типа в операторах Dim. В этом случае переменные имеют тип Object. Вместо свойства Text используется свойство Value. Вместо Click – OnClick. вместо Val – Int.
Начнем с того, что для работы сценария необходимо разместить на странице следующие элементы:
Но откуда взять эти элементы, если мы VB даже не запускали? Оказывается, размещаются они на странице средствами языка 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".
Аналогично изложенному, следующая строка HTML-документа
<input type="button" name="cmdTry" value="Попытка"><p>
размещает в следующей строке Web-страницы кнопку (благодаря выражению input type="button"). Надпись на кнопке задается выражением value="Попытка".
Следующие три строки поясняются аналогично.
