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

JavaScript — начало.

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

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

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

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

Завершая вводную часть отмечу, что пишу я под Android Scripting, и JavaScript там может иметь свои особенности. Надеюсь, что не имеет.

Сделаем, чтобы хоть что–то работало.

Первое, что смущает при изучении новых языков программирования — как тут сделать хоть что–то. Именно поэтому в мировой практике часто в качестве первого примера программы для языка приводят так называемый «Hello world». По сути пример представляет собой код минимальной программы, которая при запуске выводит на экран фразу «Hello world» соответственно. Почему именно эта фраза? Видимо это такой программистский юмор, так как самая простая программа едва–ли сможет сделать что–то полезное, то пусть хотя бы поздоровается.

Мой первый пример чем–то похож на тот, просто употребляются другие слова и не используется программирования как такового. Пример будет на чистом HTML без JavaScript.

Забавно писать на html + java script не зная ни того, ни другого. 

Но попробуем.

В результате, при запуске странички в браузере мы получим такую картину:

Понимая, что тем, кто знаком с HTML читать будет не интересно, я всё же сдержу обещание и буду давать максимально подробные объяснения.

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

Ключевое понятие языка HTML разметки — так называемый «тэг». Есть понятие открывающего тэга и закрывающего. Для части тэгов предусмотрено обязательное наличие закрывающего тэга, для части — нет. Тэги — это по сути любые слова, заключённые в треугольные скобки. Само это слово — название тэга. Закрывающий тэг должен начинаться с символа "/". Всё, что находится между закрывающим и открывающим тэгом, относится к этому тэгу.

Первое, что мы видим в нашем примере — тэг html. Соответствующий ему закрывающий тэг находится в самом конце. Этот тэг указывает, что внутри него (между открывающим и закрывающим тэгом) используется html разметка. Логично, что весь наш документ внутри этого тэга.

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

Наконец мы добрались до тэга body. Именно там находится то, что мы видим на экране. Например, текст, написанный напрямую в этом тэге (не находящийся во вложенных тэгах и не содержащий служебных символов) сразу выводится на экран в том же виде, в котором введён в исходном коде страницы.

Внутри тэга body мы просто написали текст, который при запуске будет выведен на экран. Всё просто, кроме одного маленького нюанса. Между двумя предложениями мы натыкаемся на новый тэг
. Этот тэг отвечает за начало новой строки.

Сделай ещё что–нибудь.

В предыдущем примере мы добились того, что на экран вывелся текст. После этого, чтобы ни делал пользователь, ничего не произойдёт. Независимо от того как, когда и зачем пользователь откроет ваш документ, он увидит тот же самый текст. Исходя из этого делаем вывод, что программой это называть ещё рано.

Как я уже упоминал, HTML вообще говоря к программированию отношения не имеет. Но он, если можно так выразиться, поддерживает скриптовые расширения. Самый распространённый язык программирования, используемый для этих целей - JavaScript. Слегка расширим наш предыдущий пример, чтобы проиллюстрировать его возможности:

 Забавно писать на html + java script не зная ни того, ни другого. 

Но попробуем.

Запускаем в браузере и видим:

Основная часть кода осталась без изменений, после текста добавились две пустые строки для более гармоничного внешнего вида странички. Больше всего в этом примере нас интересует новая строчка

рассмотрим её внимательно.

Первое, что бросается в глаза — непривычно большой тэг input. Да, название тэга именно input, от остальных элементов оно отделено пробелом. Что это за элементы? Мы о них раньше не говорили…

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

<Поле ввода, типа кнопка, со значением «нажми меня», в случае клика должен выполниться скрипт «this.value = «Спасибо»;">

Ничего сложного. Поле ввода или элемент управления или просто контрол может быть разных типов, мы в нашем примере используем кнопку. Атрибут value в данном случае задает текст, который будет написан на нашей кнопке. Для того, чтобы «подчеркнуть», что заданное нами значение именно текст (строка), его следует заключить в кавычки или апострофы.

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

Вот, наконец, мы и подошли непосредственно к программированию, а строчка «this.value = «Спасибо»;" по сути наша первая программа. Разберём и её тоже.

Ключевое слово this в данном случае — это наша кнопка. Этим словом (в Delphi похожую функцию выполняет Self) кодируется объект, которому принадлежит вызываемая функция (в JS есть свои нюансы, но в первом приближении это верно). То есть в нашем случае мы написали, что в случае, если наша конкретная кнопка будет нажата будет выполнен некий код. Так вот, в этом коде this — это и будет наша кнопка.

Точка после this означает, что далее мы будем обращаться к тому, что есть у this. В данном случае мы обращаемся к атрибуту value тэга. Да, да, к тому самому, значение которого чуть раньше мы задавали в тэге input. Теперь мы по сути делаем то же самое, только чуть иначе.

Ну и последнее тут — точка с запятой в конце. Это, как и во многих других языках является разделителем для аналога предложений в языках программирования. Как и в обычных человеческих языках там есть свои нюансы использования, но об этом позже.

Начнём первый проект.

Как пример, иллюстрирующий написание программ на JavaScript, я выбрал известную игру сапёр. Сделал я это не осмысленно, просто я попытался нарисовать таблицу и поменять в ней что–то при нажатие на ячейку. Сделал и подумал, да это же почти сапёр!

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

Ладно, перейдём к делу. Давайте пока просто попробуем нарисовать таблицу:

    

    

    
cell11

    

    
cell12

    

    

    
cell21

    

    
cell22