5 Labweb

Кисіль О.
, КІ-172
Лабораторная работа №5
Введение в DOM
5.1 Цель работы

Изучить модель документа и работа с ней при помощи JavaScript.
5.2 Ход работы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" href="style.css">
</head>
<body>
<script>
function startScript() {
var pasteResult = document.getElementById('pasteResult'),
pasteTd,
// фигуры - белые
figuresWhite = [
// пешки
['♙', '♙', '♙', '♙', '♙',
'♙', '♙', '♙'],
// основные фигуры
['♖', '♘', '♗', '♕', '♔',
'♗', '♘', '♖']
],
// фигуры - черные
figuresBlack = [
// основные фигуры
['♜', '♞', '♝', '♛', '♚',
'♝', '♞', '♜'],
// пешки
['♟', '♟', '♟', '♟', '♟',
'♟', '♟', '♟']
];
// создаем <table>
var boardTable = document.createElement('table');
pasteResult.appendChild(boardTable);
for (var row = 1; row <= 10; row++) {

// создаем <tr>
var boardTr = document.createElement('tr');
boardTable.appendChild(boardTr);
for (var col = 1; col <= 10; col++) {
// создаем <td>
var boardTd = document.createElement('td');
pasteTd = '';
// цифры по вертикали
if (row > 1 && row < 10 && (col == 1 || col == 10)) {
boardTd.className = 'boardNumbers';
pasteTd+= 8 - row + 2;
}
// столбцы в таблице со второго по девятый

if (col > 1 && col < 10) {
// раскраска доски, либо сделать через CSS

if (((row%2 != 0 && col%2 == 0) || (row%2 == 0 &&
col%2 != 0)) && (row > 1 && row < 10)) {
boardTd.style.background = 'gray';
}
// буквы по горизонтали
if (row == 1 || row == 10) {
boardTd.className = 'boardLetters';
pasteTd+= '&#' + (65 + col - 2); // HTML - A-H
}
// фигуры - белые
if (row == 8 || row == 9) {
boardTd.className = 'boardFigures';
pasteTd+= figuresWhite[row-8][col-2];
}
// фигуры - черные
if (row == 2 || row == 3) {
boardTd.className = 'boardFigures';
pasteTd+= figuresBlack[row-2][col-2];
}
boardTd.innerHTML = pasteTd;
boardTr.appendChild(boardTd);
}
}
</script>
<div id="textTask">
<h2>Домашнее задание №5</h2>
<hr>
<h3>Задача 1</h3>
<p>
Создать функцию, генерирующую шахматную доску. При этом можно
использовать любые html-теги по своему желанию. Доска должна быть
разлинована соответствующим образом, т.е. чередовать черные и белые ячейки.
Строки должны нумероваться числами от 1 до 8, столбцы – латинскими буквами
A, B, C, D, E, F, G, H.
</p>
<hr>
<h3>Задача 2</h3>
<p>
Заполнить созданную таблицу буквами, отвечающими за шахматную
фигуру, например К-
король, Ф – ферзь и тп., причем все фигуры должны стоять на
своих местах и быть
соответственно черными и белыми.
</p>
<hr>
<h3>Задача 3<sup>*</sup></h3>
<p>
Заменить буквы, обозначающие фигуры картинками.
</p>
<hr>
<p>
<a href="javascript:void(0);"
onclick="startScript();">Сгенерировать шахматную доску</a>
</p>
</div>
<div id="pasteResult">
</div>
</body>
</html>
5.3 Выводы
В ходе выполнения этой лабораторной работы мы изучили изучили модель
документа и работу с ней при помощи JavaScript.

Язык

5 Labweb

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

5 Labweb

Загружено:

Авторское право:

Доступные форматы

Кисіль О.

5.1 Цель работы

for (var row = 1; row <= 10; row++) {

for (var col = 1; col <= 10; col++) {

// столбцы в таблице со второго по девятый

// раскраска доски, либо сделать через CSS

Вам также может понравиться