Далее идёт новый цикл с переменной цикла «j», который выполняется colCount раз. Когда один цикл выполняется внутри другого, последний называется вложенным циклом.
Отличительной его особенностью является то, что его тело выполняется во столько раз чаще, чем если бы он не был вложенным, сколько раз выполняется внешний цикл. То есть в нашем случае тело этого цикла будет выполняться rowCount * colCount раз, или, другими словами, на каждую строку по числу колонок.
Первая строка внутри этого цикла: «var cell = row.insertCell(j);" создаёт новую ячейку в строке row нашей таблицы и присваивает её переменной cell. Вторая строка: «cell.innerHTML = 'cell' + i.toString() + j.toString();" присваивает полю innerHTML нашей ячейки строку «cell» + значение переменной «i», переведённая в строку вызовом метода «toString», плюс значение переменной «j», также в виде строки. Чтобы различать строки и названия функций, переменных и прочие куски кода, строки в JavaScript принято заключать в апострофы или двойные кавычки. Причём, если вы хотите использовать апострофы внутри строки — следует добавить перед ними символ "\". В случае с двойными кавычками можно этого не делать, если сама строка заключена в апострофы.
Что ещё может быть не понятно? Вероятно поле «innerHTML». По сути это фрагмент HTML кода, который вы программным образом присваиваете тэгу контрола. Так как в этой главе и так было не мало информации, думаю будет достаточно указать на то, что с помощью этого тэга мы изменяем надпись, которая будет отображаться в нашей ячейке.
Глава оказалась длиннее, чем я рассчитывал. Сильно длиннее, но в ней было затронуто много основополагающих аспектов программирования и, по правде сказать, затронуты весьма поверхностно. Так или иначе, в будущем постараюсь, чтобы новых элементов в главе встречалось меньше.
Расставим бомбы.
Раз уж так получилось, что мы решили написать аналог игры сапёр, расставим на нашей табличке бомбы. Предположим их будет 10 штук и тот кто будет играть в нашу игру не должен будет знать где они. Но в этой главе мы для простоты всё же раскроем карты. Сделаю я это намеренно, чтобы результат можно было увидеть.
Вот что у меня получилось.
<html>
<head>
head>
<script>
function intRand(maxVal)
{
return Math.round((maxVal + 1) * Math.random() — 0.5);
}
function fillMines(rowCount, colCount, minesCount)
{
var res = new Array(rowCount * colCount);
var mines = minesCount;
while (mines > 0)
{
var n = intRand(rowCount * colCount‑1);
if (res[n] != 1)
{
res[n] = 1;
mines--;
}
}
return res;
}
function initTable()
{
var rowCount = 10;
var colCount = 10;
var minesCount = 10;
var mines = fillMines(rowCount, colCount, minesCount);
var tbl = document.getElementById(«tbl»);
for (var i = 0; i < rowCount; i++)
{
var row = tbl.insertRow(i);
for(var j = 0; j < colCount; j++)
{
var cell = row.insertCell(j);
if (mines[i * rowCount + j] == 1)
cell.innerHTML = '*'
else
cell.innerHTML = '.';
}
}
}
script>
<body onload=«initTable();">
<table id=«tbl» border=«2» width=«80%" height=«80%">
table>
body>
html>
К сожалению в каждой новой главе, кода становится всё больше, при этом нового кода вообще говоря всего ничего. Это вечная дилема — приводить куски кода в каждой новой главе, но тогда могут быть проблемы с пониманием того, что к чему относится, либо постоянно копировать и тогда текст раздувается до каких–то нереальных размеров. Я пока решил придерживаться второго варианта. Дальше посмотрю.
Мы видим уже знакомую страничку со скриптом. Посмотрим скрипт снизу вверх. Внизу у нас уже знакомая по прошлой статье функция initTable(). В чём её отличие от предыдущей реализации. Во–первых, тут мы добавили переменную minesCount, которой сразу же присвоили значение 10. Кроме того, мы объявили переменную mines, которой присвоили результат функции fillMines с числом строк, столбцов и мин в качестве параметров. Подробнее о том, как устроена эта функция я расскажу ниже, скажу лишь что представляет собой её результат. Функция fillMines возвращает массив длины rowCount * colCount, причём для каждому элементу массива, равному единице соответствует мина, а иначе мины нет.