|
Профессиональный веб-дизайн: Введение в современные веб-технологии "3. Создание внешней таблицы. Теперь создайте таблицу с двумя строками. Во второй строке создайте две ячейки - в первую переместите таблицу цифр, а во вторую - таблицу знаков." Как в ячейку <td> поместить таблицу? Таблица же сама состоит из ячеек. Исходя из задания следует, что <td> может быть родителем для <td>, но это противоречит правилам HTML? |
Инспектор
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 01.09.2010 | Уровень: для всех | Доступ: платный | ВУЗ: Сибирский федеральный университет
Лекция 9:
Сценарии Javascript
Объектная модель создана, и мы можем ее использовать. Сохраним весь вышеприведенный код в файле blackjack.js. Создадим HTML-документ ( blackjack.htm ):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BlackJack</title>
<script type="text/javascript" src="blackjack.js"></script>
<link href="blackjack.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Весь пользовательский интерфейс располагается здесь -->
<div class="Hand" id="dealer">
</div>
<div id="result">
</div>
<div id="player" class="Hand">
</div>
<div>
Баланс: $<span id="balance"></span> Ставка: $<span id="bet"></span><br />
Очки: <span id="sum"></span>
</div>
<input type="button" onclick="bet()" value="увеличить ставку" id="btnBet" />
<input type="button" onclick="nextCard()" value="взять карту" id="btnRun" />
<input type="button" onclick="finish()" value="Крупье" id="btnFinish" />
</body>
</html>Стилевая информация хранится в отдельном файле blackjack.css. Вот примерное содержание:
body
{
background-color: Green;
color: White;
font-family: Comic Sans MS;
font-size: 14px;
text-align: center;
}
.Card
{
border: solid 1px #000;
margin: 6px;
}
.Hand
{
height: 120px;/* Делаем достаточно высоким, чтобы поместилась карта */
}
#result
{
height: 30px;
}Остается создать игроков, инициализировать колоду карт и обработать события нажатия на кнопки.
//задаем функцию, выполняемую при загрузке страницы
window.onload = function() {
Deck.init(); //заполняем колоду картами
player = new Hand(); //игрок объявлен глобально
dealer = new Hand(); //крупье объявлен глобально
//кнопки "Взять карту" и "крупье" изначально недоступны
document.getElementById('btnRun').disabled = true;
document.getElementById('btnFinish').disabled = true;
//вспомогательная функция Show() определена ниже
Show();
}
//обрабатываем нажатие кнопки "увеличить ставку"
function bet() {
dealer.init(); //сбросить карты у крупье
player.init(); //сбросить карты у игрока
Deck.shuffle(); //перетасовать колоду
//очищаем окно от карт и результата
document.getElementById('player').innerHTML = '';
document.getElementById('dealer').innerHTML = '';
document.getElementById('result').innerHTML = '';
document.getElementById('sum').innerHTML = '';
if (player.bet()) {
// нет необходимости писать if (player.bet() > 0)
// 0 == false, любое другое число == true
document.getElementById('btnRun').disabled = false;
}
Show();
}
//обрабатываем нажатие кнопки "взять карту"
function nextCard() {
var oTest = document.getElementById('player');
var oSum = document.getElementById('sum');
//берем карту и показываем ее в окне браузера
oTest.appendChild(player.nextCard().img);
var s = player.calc(); //подсчитываем очки
oSum.innerHTML = s; //показываем очки
//делаем доступной карту "Крупье"
document.getElementById('btnFinish').disabled = false;
if (s > 21 && player.cards.length > 2) {
//у игрока перебор. нет смысла продолжать
document.getElementById('result').innerHTML = 'Не повезло';
player.currentBet = 0;
document.getElementById('btnFinish').disabled = true;
document.getElementById('btnRun').disabled = true;
}
Show();
}
//обрабатываем нажатие кнопки "крупье"
function finish() {
document.getElementById('btnRun').disabled = true;
document.getElementById('btnFinish').disabled = true;
//находим элемент с id="dealer"
var oDealer = document.getElementById('dealer');
//таково внутреннее правило казино - рисковать до 16 очков
while (dealer.calc() < 17) {
//добавляем карты крупье и отображаем их
oDealer.appendChild(dealer.nextCard().img);
}
switch (player.compare(dealer)) {
case 1:
document.getElementById('result').innerHTML = '!!! Победа !!!';
player.balance += player.currentBet * 2;
player.currentBet = 0;
break;
case -1:
document.getElementById('result').innerHTML = 'Не повезло';
player.currentBet = 0;
break;
default: // 0 - ровно
document.getElementById('result').innerHTML = '??? Ровно ???';
break;
}
Show();
}
//вспомогательная функция
function Show() {
//находим элемент с id='balance' и показываем баланс игрока
//у крупье баланс не ограничен
document.getElementById('balance').innerHTML = player.balance;
document.getElementById('bet').innerHTML = player.currentBet;
}Этот код можно добавить в файл blackjack.js. Сохраните все файлы в одной папке. Откройте файл blackjack.htm в браузере.
Вопросы
- Какое назначение имеет язык Javascript?
- Каким образом сценарий Javascript вставляется в HTML-документ?
- Как объявляется переменная? Какие имена недопустимы?
- Какие типы данных имеются в Javascript?
- Как создаётся массив? С чего начинается нумерация элементов массива?
- Перечислите и охарактеризуйте управляющие структуры Javascript.
- Какие существуют в Javascript варианты синтаксиса создания функций?
- Как создать несколько однотипных пользовательских объектов?
- Как добавить метод к типу объекта?
- Как создаётся объект при отсутствии необходимости определения его типа?
Юрий Шах
Елена Сапегова
|
После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть? |
