DarkGoodWIN - JavaScript. Учебник начального уровня

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