<table border=«2» width=«80%" height=«80%">
    table>
  body>
html>

В итоге получается такая табличка:

Начнём анализ с содержимого тэга «body». В самом открывающем тэге появился новый атрибут «onload». Как можно предположить из названия, этот атрибут отвечает за то, какое действие выполнится после загрузки страницы. В нашем примере мы указали, что после загрузки страницы должна выполниться некая функция, которая называется «initTable». Более подробно об этом поговорим несколько ниже.

Что ещё поменялось в тэге «body»? Мы убрали всё содержимое тэга «table». Это вполне логично, так как заполнять его мы решили при помощи скрипта.

Раз уж упомянули слово скрипт, придётся отдуваться. «script» — это самый большой тэг в примере к этой главе, но, как вы видете, он всё–таки значительно меньше 210 строк. Внутри него нет ничего, кроме скрипта на JavaScript. А теперь внимание, требуется перестроиться, внутри этого тэга больше не будет привычных для HTML конструкций. И если в HTML разбиение кода на смысловые блоки происходило с помощью тэгов, то теперь это будет происходить с помощью фигурных скобок.

Первое, что мы встречаем в нашем скрипте — строчку «function initTable()». Таким синтаксисом в JavaScript объявляется функция. Что же такое функция в данном контексте — по сути — это фактически самостоятельный скрипт (на самом деле часть скрипта), которая может выполнять какие–то действия. Более подробную информацию я приведу позже, для понимания данного примера достаточно знать того, что я уже написал.

Кстати, обратили внимание, название функции совпадает с тем, что мы задали в атрибуте «onload» тэга «body». Это означает, что именно эта функция выполнится после того, как страница загрузится.

Название функции, разумеется, может быть отличным от того, что привёл я, на поведение функции оно никак не влияет, однако, для улучшения читабельности кода, следует давать функциям названия перекликающиеся с тем, что функция делает.

Далее мы переходим к следующей строчке, в ней всего один символ, открывающая фигурная скобка. Как я уже упоминал, она служит обозначением начала нового блока. Это значит, что с этого момента и до достижения парной ей фигурной скобки, весь код будет относиться к функции «initTable()».

Как узнать какая скобка парная данной? Есть нехитрый алгоритм. Представьте, что до неё у вас ноль скобок, вот вы дошли до открывающей скобки и уже одна скобка, дошли до следующей открывающей — их две. Потом, допустим, закрывающая, после неё снова осталась одна. И так следует прибавлять единицу для открывающих и вычитать для закрывающих до тех пор, пока вы не получите ноль. Та закрывающая скобка, после которой ваш «счётчик» обнулился и будет парной к первой открывающей.

Применив алгоритм, получим, что весь код внутри тэга «script» относится к нашей функции.

Длинная глава получается, надо было отдельно поговорить про функции, отдельно потом про переменные, но, я в этой работе решил идти не от понятий, не от терминов, а от функционала, чего и пытаюсь придерживаться.

Так вот, мы переходим непосредственно к телу функции (её содержимому). Первая её строка выглядит так: «var rowCount = 10;". Давайте по порядку. Ключевое слово «var» говорит о том, что в этой строке мы будем объявлять новую переменную. После этого слова идёт название переменной, а затем (не обязательно), ей присваивается значение. Равнозначно было бы написать:

var rowCount;
rowCount = 10;

но это, как вы понимаете длиннее.

Так что же такое переменная? Попробую объяснить на пальцах. Переменная — это нечто, имеющее имя и соответствующее ему значение. Например, вы родились 29 ноября. Тогда имя соответствующей переменной «число вашего рождения», я её значение — 29 ноября (только не пробуйте именовать переменные кириллицей или используя пробелы, так делать нельзя, я так назвал для удобства, а вот «dateOfYouBirth», если я не ошибся в правописании, которое у меня, как и у Винни Пуха хромает, хотя оно есть, вполне нормальное название для этой переменной).

Другой не плохой пример из реальной жизни — счёт в банке, у него есть номер и на нем есть какое–то количество средств. Номер тут — имя переменной, а количество средств — значение. Мы можем изменить значение этой переменной, например, всё потратив.

Так вот, в первой строке я объявил переменную rowCount и присвоил ей значение 10. Во второй строке я проделал то же самое с переменной colCount. Эти переменные будут нам задавать количество строк и колонок в нашей таблице, можете поменять их значения и увидите, что будет.

В следующей строке опять много нового, но потерпите, зато в этой главе мы сможем разобраться с куда большим количеством понятий, чем в остальных. По–моему, оно того стоит. Итак: " var tbl = document.getElementById(«tbl»);". Тут мы объявляем переменную «tbl», она в последствии позволит нам управлять нашей табличкой и присваиваем ей выражение «document.getElementById(«tbl»)».

Тут мы впервые вскользь коснемся такого понятия как ООП (объектно ориентированное программирование). Собственно мы попробуем упрощённо определить, что такое объект в контексте ООП.

Объект — это по сути переменная, которая содержит в себе другие переменные и функции. Они также называются полями и методами соответственно. Так вот, слово «document» в нашем выражении — это название переменной, уже до выполнения скрипта объявленной самой JavaScript, которая соответствует объекту, который предоставляет доступ к нашему документу. По сути, он позволяет JavaScript коду работать с  HTML кодом в рамках одного документа.

Немного запутанно? Надеюсь станет понятнее, когда мы перейдём к примерам, не пытайтесь понять всё сразу, это на самом деле довольно сложные вещи, которым посвящено большое количество весьма увесистых книг. Для понимания этого примера важно понять, что есть некая переменная «document» и что с помощью неё мы можем как–то взаимодействовать с элементами нашей странички, в нашем примере это будет таблица.

Ещё пару слов про объекты, как я уже говорил, у них есть поля и методы. Но как к ним обращаться? В JavaScript, как и во многих других языках программирования, к ним принято обращаться через точку. То есть, например, наше выражение «document.getElementById» можно прочитать как «метод getElementById объекта document». Следует понимать, что у разных документов этот метод вернёт скорее всего разный результат, так как он возвращает элемент именно этого того документа, переменная которого находится перед точкой.

Так что же в результате делает метод «getElementById»? Как и следует из названия, он возвращает контрол, «id» которого (элемент, соответствующий тэгу, в котором атрибут id которого) передается в скобках.

Кстати то, что передаётся в скобках после названия функции (метода), тоже имеет своё название. В прошлый раз, когда я говорил о функциях, я это пропустил, так как скобки у нас были пустые, а теперь, придётся упомянуть. В круглых скобках после названия функции передаются её параметры. У функции может быть один или несколько параметров, может совсем не быть параметров. В случае нескольких параметров, в JavaScript они разделяются запятыми. В случае отсутствия параметров, скобки остаются пустыми.

В данном случае, функция требует передачи одного строкового параметра, соответствующего идентификатору (id) элемента.

В результате выполнения строчки, мы получили в переменной «tbl» объект, с помощью которого мы сможем управлять нашей таблицей (получим доступ к нашей таблице).

Следующая строка — снова не простое, но фундаментальное понятие — цикл. Циклы бывают нескольких видов и предназначены для выполнения части кода несколько раз. Основное отличие циклов в том, как формулируется условие прекращения цикла (выхода из цикла).

В нашем случае мы используем цикл «for» в котором заранее знаем сколько раз нужно будет выполнить его тело (содержимое блока его принадлежащего). В этом цикле есть понятие переменной цикла, значение которой увеличивается на единицу каждую итерацию (после каждого выполнения тела цикла). Переменная цикла доступна на чтение из тела цикла, то есть мы можем посмотреть, что в ней лежит, но, в большинстве языков программирования, изменить её нам не удастся.

Давайте попробуем прочитать нашу строчку по–русски: «for (var i = 0; i < rowCount; i++)». Я бы её перевёл как «выполнять следующий блок кода и каждый раз увеличивать переменную «i» на единицу до тех пор, пока её значение остаётся меньше значения переменной «rowCount» (количества строк в нашей таблице). Блок, принадлежащий этому циклу также заканчивается в самом конце функции.

Далее идёт строка «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 кода, который вы программным образом присваиваете тэгу контрола. Так как в этой главе и так было не мало информации, думаю будет достаточно указать на то, что с помощью этого тэга мы изменяем надпись, которая будет отображаться в нашей ячейке.

Глава оказалась длиннее, чем я рассчитывал. Сильно длиннее, но в ней было затронуто много основополагающих аспектов программирования и, по правде сказать, затронуты весьма поверхностно. Так или иначе, в будущем постараюсь, чтобы новых элементов в главе встречалось меньше.

Оглавление книги