JavaScript. Учебник начального уровня - [5]
Далее идёт строка «var row = tbl.insertRow(i);". Там мы переменной «row» присваивает результат метода объекта нашей таблицы «insertRow» с нашей переменной цикла «i» в качестве. параметра. По аналогии с тем, что мы видели ранее, данный метод делает то, что следует из его названия, а именно, добавляет новую строку в таблицу. Причём, когда i = 5, строка добавляется так, что становится пятой (после четвёртой), ну и так далее.
Не забываем, что мы в цикле, поэтому строка будет добавляться rowCount раз и каждый раз, проходя эту строчку, интерпретатор будет изменять значение row на новое.
Далее идёт новый цикл с переменной цикла «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 штук и тот кто будет играть в нашу игру не должен будет знать где они. Но в этой главе мы для простоты всё же раскроем карты. Сделаю я это намеренно, чтобы результат можно было увидеть.
Вот что у меня получилось.
>
>
> head>
>
> 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>
>
>