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

• Название: JavaScript. Учебник начального уровня
• Автор: DarkGoodWIN
• Жанр: Науки: разное
• Год: 2011

Несколько слов об особенностях JavaScript, другими словами - что я знал об этом языке до начала его изучения. Первое и главное: JS код легко интегрируется в HTML разметку и является де факто стандартом для интернет браузеров. Из этого следует, что если вы совершенно не знаете HTML - JS, вероятнее всего, будет для вас бесполезна. В данном опусе я постараюсь разжевать всё максимально детально, но надо иметь в виду, что HTML и JS идут бок о бок, дополняя, а не заменяя друг друга. Для тех, кто сталкивался раньше с Delphi программированием или чем-то подобным можно, в первом приближении, привести такую аналогию: HTML - это форма, а JS - сам код программы.

Другая важная особенность языка - высокая интерактивность. Процитирую фразу, которую мне многократно доводилось слышать: "JavaScript - это событийно ориентированный язык программирования". Что это значит? Это означает, что вы можете написать кусок кода, который выполнится когда пользователь нажмёт на кнопку, можете написать кусок кода, который выполнится когда вы только подведёте к ней курсор мышки. Для Java Script и то и другое - события и она умеет на них реагировать.

Отличительная особенность языка и кода на нём - то, что результат можно увидеть имея лишь один из современных браузеров. То есть вам не нужно ставить и настраивать какие-то компиляторы, среды программирования и так далее. Для запуска любого из приведённых ниже примеров - достаточно набрать текст в любом редакторе (блокноте, например), изменить расширение на html и открыть при помощи браузера. Всё.

---

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

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

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

Расставим бомбы.

Раз уж так получилось, что мы решили написать аналог игры сапёр, расставим на нашей табличке бомбы. Предположим их будет 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%">