Вы только что написали очень простую инструкцию JavaScript. Инструкция состоит из логического набора действий, которые должен выполнить браузер. В обычном приложении содержится великое множество инструкций. В нашем же случае есть только одна:
alert("hello, world!");
Понять, что перед вами инструкция, можно, обратив внимание на ее последний знак. Обычно это точка с запятой (;).
Внутри инструкции вы увидите всевозможный незатейливый жаргон на JavaScript. И наш код длиной в одну строку — не исключение. Мы также видим странный элемент alert, который задает отображение. Это пример привычного английского слова, имеющего схожее значение в мире языка JavaScript. Оно призвано привлечь ваше внимание путем отображения некоего текста.
Если быть более точным, слово alert — это то, что часто называют функцией. Вы будете использовать функции повсеместно. По своей сути они являются фрагментами переиспользуемого кода, который что-то делает. Это «что-то» может определяться вами, сторонней библиотекой или же самим фреймворком JavaScript. В нашем случае код, который дает функции alert магическую способность отображать диалоговое окно с переданным в нее сообщением, существует в глубинах браузера. Все, что вам на самом деле нужно знать, так это то, что для использования функции alert ее нужно просто вызвать и передать ей сообщение для отображения. Все остальное будет сделано за вас.
Вернемся к нашему примеру. Обратите внимание на то, как я определяю отображение текста hello, world!. Я заключаю эти слова в кавычки:
При работе с текстом (наиболее часто используемый термин — строка) он всегда заключается в одинарные или двойные кавычки. И как бы странно это ни прозвучало, но у каждого языка программирования свои особенности. И эта — одна из многих, с которыми вы столкнетесь при дальнейшем знакомстве с JavaScript. Очень скоро мы рассмотрим строки более подробно, а пока просто наслаждайтесь их видом.
Сделаем еще шаг. Вместо hello, world! укажите свои имя и фамилию. Вот пример кода, в котором использовано мое имя:
Запустите приложение, и тогда вы увидите свое имя в диалоговом окне (рис. 1.6).
Рис. 1.6. Теперь в диалоговом окне отображается ваше имя
Проще простого, не так ли? Вы можете вписать в строку что угодно: имя питомца, название любимого сериала и т. д. — а JavaScript все это отобразит.
КОРОТКО О ГЛАВНОМ
В этой главе вы познакомились с написанием кода на JavaScript. В процессе этого знакомства я дал некоторые принципы и термины. Разумеется, я не жду, что вы все это сразу запомните. В следующих уроках мы возьмем наиболее интересные части пройденного материала и проработаем их более детально. В конце концов, я уверен, что с помощью JS вам хочется создавать штуки, выходящие далеко за рамки примитивного отображения текста с помощью диалогового окна.
Забегая вперед, скажу, что в конце каждой главы есть набор ссылок, ведущих на ресурсы, созданные мной или другими разработчиками. Вы сможете почерпнуть больше информации, взглянуть на пройденный материал под другим углом, а также опробовать свои силы на практике, решая более сложные примеры. Рассматривайте материал из этой книги как трамплин, позволяющий допрыгнуть до более крутых штук.
Если у вас есть какие-либо вопросы относительно этой главы, оставляйте свои сообщения на форуме https://forum.kirupa.com, где вам оперативно ответит кто-то из крутых разработчиков или я.
ЧАСТЬ I. Элементарно, Ватсон
Глава 2. Значения и переменные
Принято считать, что каждый фрагмент данных на JavaScript, предоставляемый или используемый нами, содержит значение. Из уже рассмотренного примера мы узнали, что вместо слов hello, world! могут быть любые слова, с помощью которых мы задаем функцию alert:
alert("hello, world!");
В JavaScript эти слова несут в себе определенную информацию и считаются значениями. Мы могли об этом особенно не задумываться, набирая их на клавиатуре, но во вселенной JavaScript каждый элемент данных, с которым мы имеем дело, считается значением.
Итак, почему это так важно понимать? А все потому, что нам предстоит много работать со значениями. И важно, чтобы эта работа не свела вас с ума. Чтобы облегчить себе жизнь, вам пригодятся умения:
• легко идентифицировать эти значения;
• повторно их использовать в ходе разработки приложения, не прибегая к лишнему дублированию самого значения.
Две вещи, на которые предстоит потратить все наше оставшееся время, — это переменные. Давайте рассмотрим их поподробнее.
Использование переменных
Переменная — это идентификатор значения. Чтобы не набирать hello, world! каждый раз, когда вы хотите использовать этот фрагмент для написания кода приложения, можно присвоить эту фразу переменной и использовать ее тогда, когда нужно. Еще чуть-чуть, и вам станет гораздо понятнее — я обещаю!
Есть несколько способов, как использовать переменные. В большинстве случаев лучше всего полагаться на ключевое слово let, после которого вы можете задать имя своей переменной:
let myText
В этой строке кода мы объявляем переменную myText. На данный момент наша переменная просто объявлена и не содержит никакого значения, то есть является пустой оболочкой.
Давайте исправим это через инициализацию переменной значением. К примеру, hello, world!.
let myText = "hello, world!";
С этого момента при выполнении кода значение hello, world! будет ассоциироваться с нашей переменной myText. Теперь соберем все части в единое выражение. Если у вас все еще открыт файл hello_world.htm, замените содержимое тега script следующим (или создайте новый файл, добавив в него следующий код):
Обратите внимание, что мы больше не передаем текст hello, world! в функцию alert напрямую. Вместо этого мы передаем в нее имя переменной myText. Конечный результат такой же, то есть при выполнении этой строчки отобразится функция alert с надписью hello, world!. Благодаря этому изменению нам достаточно определить hello, world! в одном месте кода. И если мы в дальнейшем захотим изменить hello, world! к примеру, на The dog ate my homework! (Собака съела мою домашку!), то все, что нам понадобится, — это просто изменить фразу, определенную в переменной myText:
let myText = "The dog ate my homework!";
alert(myText);
Теперь во всех секциях кода при обращении к переменной myText мы будем видеть новый текст. Невозможно придумать ничего более удобного и значительно экономящего время, особенно при работе со сложными приложениями, что позволяет вносить изменение в одном месте, и при этом это действие отразится в остальных частях кода. Вы увидите другие, менее тривиальные примеры со значимыми переменными далее.
Еще кое-что о переменных
Материал из предыдущей главы позволяет нам сильно продвинуться вперед. По меньшей мере, в той части, которая касается знакомства с JavaScript. Сейчас мы не станем слишком углубляться в переменные, так как займемся ими в следующих главах, когда рассмотрим код с важными переменными посложнее. И прежде чем закругляться, затронем еще несколько моментов.
Именование переменных
Мы вольны именовать переменные так, как нам подходит. Игнорируя то, какие имена нам следует выбрать с точки зрения философских, культурных или стилистических предпочтений, с технической точки зрения язык JavaScript очень гибок и позволяет включать в них символы.
Однако эта гибкость не безгранична, поэтому при именовании следует помнить о следующем:
• Имя переменной может содержать один символ или столько, сколько вы хотите, — только представьте, тысячи тысяч символов!
• Переменные могут начинаться с буквы, нижнего подчеркивания или символа $, но не могут начинаться с числа.
• Следом за первым символом переменные могут состоять из любого сочетания букв, подчеркиваний, чисел и $. Мы также можем смешивать и комбинировать нижний и верхний регистры, пока не надоест.
• Пробелы не допускаются.
Ниже приведены некоторые примеры имен переменных:
let myText;
let $;
let r8;
let _counter;
let $field;
let thisIsALongVariableName_butItCouldBeLonger;
let $abc;
let OldSchoolNamingScheme;
Чтобы определить, является ли имя переменной допустимым, воспользуйтесь прекрасным сервисом по проверке имен переменных JavaScript https://mothereff.in/js-variables.
Помимо допустимых имен есть еще другие важные моменты, такие как соглашения о присвоении имен и то, сколько людей обычно именуют переменные и другие компоненты, которые вы идентифицируете с именем. Мы затронем эти темы в следующих главах.
Что еще нужно знать об объявлении и инициализации переменных
Одна из особенностей JavaScript, о которой вы скоро узнаете, состоит в том, что это всепрощающий язык, который может дать вам множество поблажек.
Объявление переменной не обязательно
Например, нам не обязательно использовать ключевое слово let, чтобы объявить переменную. Можно просто написать так:
myText = "hello, world!";
alert(myText);
Обратите внимание, что переменная myText использована, не будучи формально объявленной с помощью ключевого слова let. И хотя так делать и не рекомендуется, это считается вполне допустимым. В конечном счете мы получаем переменную с именем myText. Единственный нюанс состоит в том, что при объявлении переменной подобным образом мы делаем это глобально. Не беспокойтесь, если последнее предложение вам не понятно. Мы поговорим о значении слова «глобально» позже, когда рассмотрим область видимость переменных.
Объявлять и инициализировать переменные в отдельных строках — это круто!
Стоит упомянуть, что объявление и инициализация переменной не обязательно должны быть частью одной инструкции. Можно разделить эти действия на разные строки:
let myText;
myText = "hello, world!";
alert(myText);
На практике мы будем разделять их постоянно.
Изменение значений переменных и ключевое слово const
И наконец, отмечу, что мы можем менять значение переменной, объявленной с let, на что угодно и когда угодно:
let myText;
myText = "hello, world!";
myText = 99;
myText = 4 * 10;
myText = true;
myText = undefined;
alert(myText);
Если вы работали с более требовательными языками, которые не позволяют переменным хранить разные типы данных, то знайте, что эту гибкость JavaScript одни восхваляют, а другие ненавидят. Тем не менее в JavaScript есть способ запретить изменять значения переменной после инициализации. Это можно сделать с помощью ключевого слова const, с которым мы можем объявлять и инициализировать переменные:
const siteURL = "https://www.google.com";
alert(siteURL);
Используя const, мы не можем изменить значение siteURL на что-то иное, чем https://www.google.com. При такой попытке JavaScript начнет ругаться. Несмотря на то что в использовании этого ключевого слова есть свои подводные камни, в целом оно может оказаться очень полезным для предотвращения случайного изменения переменной. Когда придет время, мы рассмотрим подобные подводные камни более подробно.
Почитайте «Область видимости переменных»
Теперь, когда вы знаете, как объявлять и инициализировать переменные, очень важно разобраться с их видимостью. Нужно понимать, при каких условиях можно использовать объявленную переменную. Иначе это зовется областью видимости переменной. Интересно? Тогда прочитайте главу 8 «Область видимости переменных».
КОРОТКО О ГЛАВНОМ
Значения — хранилища для данных, а переменные — легкий способ обратиться к этим данным. В значениях сокрыто много интересных деталей, но на данный момент они вам ни к чему. Просто знайте, что JavaScript позволяет представлять различные значения вроде текста и чисел без шума и пыли.
Вы объявляете переменные, чтобы значения стали более запоминающимися и годными для многократного использования. Это делается с помощью ключевого слова let и имени переменной. Если вы хотите инициализировать переменную со значением по умолчанию, поставьте после имени переменной знак равенства (=) и укажите значение, с которым хотите инициализировать эту переменную.