Как мы уже говорили выше в разделе "Элементы управления страницей" тома I, в HTML документе мы можем создавать кнопки. Делается это с помощью зеркального тега 'button'. Соответственно, чтобы при нажатии добавленной нами кнопки выполнялся какой-то код, тегу 'button' необходимо присвоить атрибут 'onclick'. В этом атрибуте можно указать код JavaScript inline-способом, то есть, без создания дополнительного документа с кодом. К примеру, по нажатию кнопки вывести сообщение. Выглядеть это будет следубщим образом (как обычно, вместо опострафов при написании кода нужно будет указать открывающие и закрывающие символы): 'button onclick="alert('Hello world!')"'. Точно таким же inline-способом (и всеми остальными, разумеется, тоже), с помощью JavaScript можно отправлять, к примеру, и сообщения в консоль браузера. Делается это с помощью кода 'button onclick ="console.log('Hello Console!')"'.

Кнопка

      Как и в любом другом языке программирования в языке JavaScript есть переменные и типы данных.

• Переменные являются неким логическим контейнером для хранения в них неких данных, к которым в дальнейшем можно обращаться. Переменные в языке JavaScript декларируются значением'var''let'?!?!?!?! – variable (от англ. переменная). Далее ей присваивается значение (имя). Выглядеть это будет так: 'var firstName = "Vasya"'. То есть, грубо говоря, вы объявляем: пусть значение 'firstName' (то есть, имя) будет равняться (будет приравниваться) к значению 'Vasya', то есть, теперь мы ввели переменную 'firstName', которая равна 'Vasya'. Далее, после объявления переменной, мы можем на нее, соответственно, сослаться. Например, как и раньше, вывести в консоль. Выглядеть это будет следующим образом: 'console.log(firstName)', после чего мы получим выведенное в консоль ранее установленное значение переменной – 'Vasya'. Значения переменных после присваивания им одних значений могут быть переписаны на другие значения. Для этого уже не нужно заново создавать "коробку" с переменной, а достаточно просто написать её ранее объявленное название и через знак приравнивания прописать ее новое значение, например: 'firstName = Petya;'. После объявления необходимых переменных их можно использовать в каких-то выражениях. Для этого объявим еще одну переменную – 'var lastName = "Ivanov";'. Теперь, после того, как у нас есть некоторый набор переменных, их можно, к примеру, сложить. Для этого объявим еще одну переменную – 'var fullName = firstName + lastName;'. Переменные в этом случае уже пишуться без кавычек! Как видно из кода, взаимодействие этих переменных осуществялется через операцию сложения. То есть, таким образом, мы получаем сумму двух переменных, в данном случае переменной 'firstName' и 'lastName', то есть имя и фамилию вместе, что в сумме представляет собой ранее объявленную переменную 'fullName'.
• Следующий тип данных это 'boolean'. 'Boolean' являет собой логический тип данных, который принимает только два значения: 'true' или 'false' – ложь или правда.
  

  *для справки: логический тип данных 'boolean' точно так же объявляется уже описанным "контейнером" 'var', но после его объявялния ему придается значение 'true' или 'false'. Кроме того, логический тип данных 'boolean', в отличие от многих остальных языков программирования, можно так же как и любую другую переменную переписать в другое значение. То есть, если раньше это была логическая переменная со значениями 'true' и 'false', то после переписывания она легко может стать переменной 'string' типа.

• Следующий тип переменной – 'undefined' (от англ. неопределенный). Это переменная с неопределенным (не заданным) значением. То есть, если в обычных видах переменных мы указывали 'var *название_переменной* = *значение переменной*';, то в случае с 'undefined' у нас будет задаваться только имя переменной, без её значения – 'var *имя_переменной*';. В этом случае, результат обращения к этой переменной по имени будет рождать результат со значением 'undefined', что наглядно видно, например, в консоли браузера.
• И последняя переменная в списке – это 'null'. Это так же переменная с несуществующим значением, наподобие предыдущей. Сценарий использования этой переменной можно рассмотреть на примере игры. Предположим, что у нас есть некая компьютерная игра, где есть персонаж за которого играет некий человек по имени Петя. Объявим его: 'let player1234 = "Petya"'. После смерти игрового персонажа этого человека по одной из причин, его персонаж необходимо обнулить (удалить) из игрового процесса. В этом случае полезно применить переменную с нулевым значением – 'null', что делается как и прежде – 'player1234 = null;'.

      Что такое метод в языке программирования? Метод – это некий объем кода, состоящий из одной, нескольких или многих строк кода, помеченный каким-то именем, который в последствии можно вызывать (обращатсья к нему). Это практически то же самое, что и переменная. Так же у метода существует такое понятие как "параметры". Параметр метода – это то значение, которое мы передаем внутрь метода для того, чтобы код в последствии мог к нему обращаться. Параметр метода пишется в круглых скобках.

Далее рассмотрим некоторые методы в JavaScript.

• Такие методы как 'console.log()' и 'alert()' мы уже рассматривали, но всё равно поместим их в список;
• Еще один метод – 'prompt("")' (от англ. – подсказка). Таким образом, к примеру, при загрузке веб-страницы можно вывести сообщение с полем ввода, с вопросом "Как Вас зовут?" – 'prompt("Как Вас зовут?");'. Точно так же, как и другие переменные в JavaScript, переменную 'prompt' можно перезаписать, присвоив ей другое значение. К примеру, это может выглядеть так: 'let firstName = "Vasya"; firstName = prompt("Как Вас зовут"); console.log(firstName);'. В этом случае мы обхявили переменную 'firstName', присвоили ей значение 'Vasya', а затем, когда в браузере появится окно с полем ввода и мы введем туда другое значение (своё имя, при условии, что нас зовут не Вася), переменная перепишется на новое значение, о чем будет выведено сообщение в консоль.

Порядок операторов в JavaScript

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

Условные операторы в JavaScript. If/Else.

       Важнейшая концепция любого языка программирования – это условия. При помощи условий в языках программирования принимаются решения. Условный оператор записывается при помощи двух слов: 'if' (от англ. если) и 'else' (от англ. еще, иначе, в ином случае). Рассмотрим наглядно. К примеру, обявим две переменные: let userName = "Ivan"; и 'let userAge = 15;'. Код дальнейшего условия записывается таким образом: 'if(userAge >= 18) { console.log(userName + " is adult."); }'. Если после этого начать выполнять код и открыть консоль, то мы не получим никакого результата. Не получим мы его потому что в этом случае утверждение ложно, так как Ивану меньше 18ти лет. Код выполняться не будет. Этот код можно продолжить (ранее объявленные переменные прописывать не будем): let userName = "Ivan"; и 'let userAge = 15;'. 'if(userAge >= 18) { console.log(userName + " is adult.";) }'.
'else if(userAge < 10) { console.log(userName + " is a child"); }'. Веток 'else if' может быть сколько угодно. То есть, каждый раз, после того, как мы прописали какие-то условия 'else' после 'if', мы всегда после этого можем добавить неограниченное количество 'else if', включающих в себя новые условия. Мы можем добавить еще одно условие (учитывая ранее написанный код): 'else if(userAge > 10 && userAge < 18)' { console.log(userName + " is a teenager"); }. В этом случае, мы добавили 'else if', где с помощью оператора 'и' добавляются сразу два условия.

Тернарный оператор

      Тернарный оператор действует точно так же, как и оператор 'if else', но формат записи у него однострочный. То есть, мы можем записать оба условия и 'if' и 'else' в одной строке. Итак, вот как это работало с уже известными нам операторами 'else if'. Давайте объявим две переменных:

      Однако в случае использования тернарного оператора это будет выглядеть так (оставим ранее объявленные переменные):

      Эта структура расшифровывается следующим образом. Тернарный потому что состоит из трех частей: из изначального условия, из части, когда условие принимает значение 'true' и части (после двоеточия), когда условие принимает значение 'false'. Удобство этого оператора в том, что мы можем его использовать сразу при присваивании какой-либо значения переменной. Причем можно еще больше упростить написание кода, введя еще одну переменную и далее, прямо на месте, снова использовать тернарный оператор, без дополнительных строк вывода в консоль:

Оператор Switch

      Оператор 'switch' действует как механизм перехода к какой-либо ветке кода (switch от англ. переключатель).
      Для работы как обычно объявляется переменная(е). Объявим переменную 'JavaScript'. Далее, записывается сам оператор 'switch', после которого в скобках указывается объявленная переменная. После (внутри) оператора 'switch' словом 'case' (от англ. случай) указываются ветки. После 'case' в кавычках записывается значение. После чего ставится двоеточие и далее мы можем записать то, что будет выполняться, если переменная 'section' будет равна указанному в кавычках значению. К примеру для первого случая выведем в консоль сообщение "Вы изучаете раздел HTML". Для второго случая выведем в консоль сообщение "Вы изучаете раздел CSS". Для третьего "Вы изучаете раздел JavaScript". Важно после каждого случая 'case' ставить ключевое слово 'break' (от англ. прервать). Нужно это для того, чтобы в тех случаях, когда в значении 'case' находится такое же значение, как и установленное в переменной, то выполнение кода завершается и программа выходит из оператора, не выполняя последующие ветки. Так же может быть и такой момент, что в переменной может быть указано значение, не совпадающее ни с одним из случаев внутри оператора 'switch'. В этом случае необходимо исполнить какой-то код по умолчанию Для этого после последнего блока 'case' создается 'default', после чего, так же, как и после 'case', ставится двоеточие и указывается то действие, которое будет выполняться. В нашем случае, тоже выведем сообщение в консоль. В этом случае 'break' не требуется, так как 'default' ставится последним.
      Вот так будет выглядеть код:

      Теперь провернем всё то же самое, только уже с числами. Для примера обратимся к части уже ранее пройденного калькулятора лишнего веса. Снова объявим две переменные 'age' и 'groupNumber'. Но если мы в 'switch' поставим переменную 'age', то в 'case' мы будем проверять равенство какому-то числу, а не сравнивать число с интервалом чисел. Чтобы сделать это с оператором 'switch', нужно провернуть небольшой трюк. Для этого в качестве переменной (в скобках после оператора 'switch') напишем 'true'. После чего пишем 'case', а в 'case' уже прописываем условия. В этом случае будет сравниваться значение 'true' (истина) с приведенным внутри 'case' выражением. То есть, если 'age >= 18 && age <=25' – это 'true', то в этом случае по значениею переменной 'switch(true)', то 'true' = 'true' и переменной 'groupNumber' присваивается значение '1'. Вот так будет выглядеть этот код:

Цикл While

      Циклы в языках программирования нужны для многократного повторения одного и того же действия.
      Для начала посмотрим на цикл 'while' (от англ. пока, до тех пор). Цикл 'while' чем-то похож на оператор 'if', в котором так же в скобках указывается условие: 'while(условие)'. После чего открываются фигурные скобки и туда вписывается код, который должен выполнится несколько раз. Этот код будет выполняться до тех пор, пока условие прописанное в скобках истинно. Оператор 'while' работает таким образом: сначала проверяется на истинность условие, прописанное в скобках после оператора. Затем, если условие не верно, выполняется тело цикла, прописанное между фигурными скобками. Далее, после выполнения кода в теле цикла, оператор снова проверяет истинность условия в круглых скобках после себя и так до тех пор, пока условие не будет ложным. То есть, условия выхода из цикла – это выражение в круглых скобках равняется 'false'. К примеру, можно указать вывод изначальной переменной 'x = 1' в консоль. Однако если сделать это без прочих условий, то код впадет в бесконечный цикл, что может привести к зависанию браузера и/или компьютера. Поэтому мы можем инкрементировать нашу переменную, прописав к ней 'x++'. Код выглядит так (для начала объявим переменную):

      Есть и другой способ применения цикла. Например, мы можем вывести в консоль какое-то текстовое сообщение по символам. Давайте добавим еще две переменных:

Цикл For

      Цикл 'for' являет собой более удобный в записи и восприятии вариант цикла 'while'. Всё дело в том, что все данные для цикла (в том числе даже объявление переменной) записываются прямо в строке самого цикла 'for', в круглых скобках. На примере предыдущей операции рассмотрим принцип его работы:

      Для лучшего понимания, давайте и здесь, с помощью цикла 'for' устроим перебор символа строки. Теперь используем не 'count' переменную, а переменную 'i'. Переменная 'i' в реальной жизни в циклах 'for' используется практически постоянно. То есть, в цикле 'for' указывается одна буква для счетчика, так как эта переменная больше нигде не используется, ей не нужно присваивать имя, которое будет что-то описывать. Рассмотрим код:

Функции

      Функции чем-то схожи с переменными. То есть, как говорилось выше, в переменную можно поместить какое-либо значение, а затем, в последующих сценариях работы программы, при запросе этой переменной, мы можем получить это значение. В функцияхможно хранить не значение, а целый код. И потом, обратившись к функции программы по имени, в любом месте программы, мы можем запустить этот кусок кода. Код организовывается следующим образом. Сначала пишется слово 'function', после которого всегда ставятся круглые скобки. Затем, как и в предыдущих примерах, открываются фигурные скобки, в которых записывается само тело функции. То есть тот код, который будет выполняться, когда мы будем обращаться к этой функции в другом месте программы по её имени. Если записать функцию подобно циклам или операторам, то код работать не будет (функция – название функции – круглые скобки – фигурные скобки – тело функции (к примеру, вывод чего-либо в консоль)). Потому что в таком случае мы не обращаемся к функции, а просто определяем её. То есть мы создали функцию, прописали её тело, то есть, внутренний код, который эта функция должна выполнять, но мы не обращаемся к этой функции, чтобы она начала свою работу.
      Чтобы запустить функцию (обратиться к ней), нужно просто прописать её имя, сразу после написать круглые скобки и обязательно поставить круглые скобки с точкой с запятой.
      Вот так будет выглядеть код:

      После чего функция полностью готова. Далее в коде, мы можем несколько раз обращаться к этой функции и код будет выполняться ровно столько раз, сколько мы обратимся к этой функции.
      Вы подумаете, зачем всё так усложнять? Можно же просто несколько раз прописать 'console.log()' с нужными нам данными и тогда всё будет работать точно так же. Но не всё так просто. Если мы пропишем другую функцию:

      То есть, становится понятно, что чем длиннее и сложнее код, тем проще поместить его в некий "контейнер", в данном случае, в виде функции и выполнять его автоматизированно. Функция может содержать множество строк самого различного кода. То есть, принцип чем-то похож на контейнер 'div' из HTML, который мы наполняем каким-то содержимым, с которым в последствии можно работать, обратившись к нему, например, из CSS.

Параметры (аргументы) функции

      В предыдущей части мы выводили через функцию в консоль некий текст приветствия. Вызывая эту функцию, мы будем выводить в консоль один и тот же текст. Но мы можем модифицировать эту функцию так, чтобы мы могли передавать текст приветствия в качестве параметра функции и в консоль уже выводился бы тот текст, который мы туда (в консоль) передадим. Для этого мы передадим функцию параметра или аргумента. Вернемся к нашему примера с функцией 'complexHello' и в данном случае, в качестве параметра подходит 'text'. Соответственно, далее в 'console.log()' мы указываем не какую-то определенную строку текста, а, соответственно, этот параметр – 'text'. И теперь, вместо этого параметра, мы можем передавать функции 'console.log' любой текст. Код будет выглядеть следующим образом:

      В качестве параметра функции мы можем передавать не только текст. Например, мы можем создать функцию, вычисляющую квадрат какого-то числа. Для этого, как обычно, создадим функцию и присвоим ей параметр 'number'. После чего, поместим в тело этой фунции 'console.log(number);', которая будет выводить в качестве результата эту функцию. А затем, мы можем эту функцию вызвать и передавать ей значение цифры, квадрат которой требуется получить. Код будет выглядеть слуюбдующим образом:       Параметр, передаваемый в функцию, может быть не один. Например, давайте создадим другую функцию, вычисляющую площать прямоугольника. Площадь прямоугольника равна ширине умноженной на высоту. Поэтому, параметры функции мы так и назовем: 'width' и (через запятую) 'height'. После чего, в теле функции, как прописываем 'console.log(width * height)';. И далее мы можем вызывать эту функцию с различными параметрами сторон этого треугольника, например 2 и 3. Код будет выглядеть следующим образом:       Как можно заметить, полезность функции заключается не только в том, что мы сокращаем общее количество строк кода, но и в том, что мы можем передавать ей разные параметры в зависимости от которых код будет выполняться с разным результатом. Это очень важное свойство функций, которое можно использовать в своих программах.
      Параметров функции может быть любое количество, но в обычной жизни параметров как правило не бывает больше трех-четырех. На примере текста приветствия это снова можно представить таким образом:

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

Возвращаемые значения функции

      В качестве примера давайте рассмотрим уже изученную выше функцию по рассчету площади прямоугольника. Эта функция, в качестве входного параметра, получает 'number', а затем умножает этот 'number' на себя же и выводит в консоль. То есть, функцию можно рассмотреть как некий черный язик: мы передаем что-то в этот ящик, а затем функция внутри себя как-то эту переданную информацию обрабатывает. Но что если мы хотим использовать далее в программе результат того, что выполнила функция? В рассматриваемом примере – это, например, квадрат значения 'number' – то есть, вычисление площади прямоугольника. Если мы пойдем по известному нам пути, попытаемся объявить переменную 'let x = square(2)' (square() от ранее расмотренной функции – квадрат числа), и пропишем отображение в консоли. В этом случае, первая строка с переменной работать будет, то есть, будет вычисляться квадрат от числа 2, так как работает функция. Но вот 'console.log(x)' будет выводить значение 'undefined'. То есть, мы присвоили значение переменной 'x', но эта функция в данном случае не возвращает никакого значения – она просто проделывает какую-то работу. Но можно сделать и так, чтобы данные после работы функции выдавались как выходные. Делается это очень просто:

      После прописывания 'return' нам становится доступно присвоение рузультата работы функции какой-то другой переменной.
      Есть еще один сценарий использования функции внутри другой функции. В данном случае функции 'square'. Создадим новую функцию, которая посредствам вычислений будет сообщать нам, большой ли квадрат. В качестве параметра бы будем использовать сторону квадрата 'side'. Внутри функции объявим переменную 'squareArea', которая посредствам функции будет заниматься вычислением площади квадрата – возведением стороны квадрата в квадрат. Поэтому эту переменную мы можем приравнять к уже объявленной функции, которая этим занимается – 'square' со значением 'side'. Ниже мы можем использовать оператор 'if', который будет выяснять: если площадь квадрата больше установленного нами значения, то квадрат большой. И если да, то эта функция будет возвращать 'true'. А в другом случае, соответственно, 'false'. А после выведем в консоль функцию, с параметром, к примеру "2": 'console.log(isSquareBig(2))'; Код будет выглядеть следующим образом:

Statements vs. Expressions

      Есть два способа создания функции. Первый способ мы уже рассмотрели, он называется Statement или объявление функции. То есть, запись в форме 'function название_функции() {}'. Но есть второй способ – способ создания функции в выражении – Expression. Для наглядности давайте создадим реальную функцию и посмотрим, как её можно реализовать двумя способами. В функции мы будем передавать два параметра: название и вид животного и в зависимости от того, какое это животное, мы будем выводить в консоль имя этого животного и звук, который оно издает. То есть, если мы введем параметры "Имя 'Ричард'" и "Вид 'собака'", то в консоль должно выводиться "Ричард гавкает". Код в первом случае будет выглядеть следующим образом:

      А вот второй способ – Expression:

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

Различные примеры реализации функций

      В первом примере мы рассмотрим, как создать функцию, вычисляющую, является ли число нечетным или нет. Если число нечетное, то в консоль выводится 'true', а если четное, то 'false'. Код будет выглядеть следующим образом:

      А еще, в программировании существует такое понятие как 'рефакторинг'. Сразу написать идеальный код бывает довольно сложно, поэтому написанный код часто можно многократно улучшить, оптимизировав его. На примере ранее описанной функции 'isNumberOdd', можно показать, насколько сильно можно укоротить код:

      То есть, сначала будет вычисляться значение логического выражения после 'return' и если остаток от деления % 2 НЕ равен нулю (неравенство обозначается оператором '!=='), то будет возвращаться 'true'.

      Во втором примере мы посмотрим на функцию, вычисляющую факториал числа:

      Смотря на код выше, давайте разберемся, как работает эта функция.
      В начале проверяется, ввел ли пользователь корректное значение. То есть, ввел ли пользователь натуральное число, чтобы факториал сработал. Например, мы можем договориться, что если пользователь ввел отрицательное значение, то мы возвращаем из функции значение 0. Так как сам фактировал не может возвращать 0, следовательно, возвращенный 0 будет сигнализировать о том, что пользователь ввел некорректное значение.
      Далее к самому факториалу. Сначала 'i = 1', точно так же, как и объявленная переменная 'result = 1'. То есть, исходя из логики работы цикла, переменной 'result' будет присвоено значение 1 * 1, что будет равняться единице.
      Если передать в параметр функции значение 3, то 'i < 3', следовательно, запускается цикл. Так как из-за 'i++' цикл продолжается, следовательно, i = 2. В 'result' находится 1, 1 * 2 = 2, после чего 'result' присваивается 2. Далее снова идет проверка в цикле. i всё еще меньше заданного значения функции 3, поэтому снова срабатывает 'i++' и теперь i = 3. В 'result' всё еще находится 2 – 2 * 3 = 6. Число 6 присваивается 'result', после чего снова срабатывает i++ и i теперь равна 4 и в этом случае мы выходим из цикла, так как 4 > 3, где 3 – установленное значение функции. И в самом конце мы возвращаем 'result'.

      В третьем примере рассмотрим, как с помощью функции JavaScript можно автоматически менять текстовые символы. Для примера возьмем функцию, которая будет заменять все пробелы на символы нижнего подчеркивания – _.

      Здесь всё довольно просто. Мы создаем функцию с параметром 'text'. Затем, внутри этой функции, мы объявляем переменную 'resultText', которая равна параметру объявленной функции 'text', но с методом 'replace()', который в JavaScript и занимается заменой символов. После метода 'replace' в скобках между двумя слешами указывается то, что мы хотим заменить, после чего обязательно ставится символ 'g' и после запятой в кавычках указывается то, НА ЧТО мы хотим заменить.

Область видимости переменных

      В JavaScript есть два типа областей видимости переменных:

• Local Scope
• Global Scope

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

Массивы

      Массивы – это одна из структур данных, которые существуют в языке JavaScript. Итак, что же это такое?
      Есть такой способ. К примеру, у нас есть несколько цветов. Чтобы хранить значения этих цветов, как уже делали прежде, мы можем использовать переменные:

      Итак, у нас есть семь цветов радуги – семь переменных. Но проблема в том, что эти переменные никак не связаны друг с другом. То есть, мы никак не отображаем, что все эти семь цветов относятся к цветам радуги. И именно в таком случае, когда нам нужно собрать какие-то данные в единую структуру, как в случае с цветами радуги, нам и приходят на помощь массивы. Массивы данных создаются следующим образом:

      И теперь все цвета собраны воедино и мы можем обращаться к этим значениям по одному имени – по имени rainbowColors.
      Обращаться затем к этому массиву данных можно следующим образом(для примера возьмем консоль): consol.log(rainbowColors[2, 3]);. В квадратных скобках указывается индекс эелемента в массиве, то есть, его порядковый номер. Индексируются массивы начиная с нуля.
      Для примера этот вывод в консоль можно скомбинировать еще и со строкой: 'console.log("Небо " + [4] + " цвета");'.
      Можно не только считывать данные из элемента массива, но и менять значения этих элементов. То есть, к примеру, если мы хотим изменить цвет "красный" на "оранжевый", то мы можем сделать следующее: 'rainbowColors[0] = "оранжевый";'.
      Ровно так же можно вывести в консоль (или куда-либо еще) все элементы массива при помощи указания его имени: 'console.log(rainbowColors);'.
      Так же можно не только изменять какие-то эелементы в массиве, но и добавлять в него новые. Но что делать, если мы не знаем, что у нас только семь эелементов в массиве, а высчитать из них последний было бы затруднительно? Сделать это можно указать свойство массива '.length'. Это свойство равно количеству элементов, а именно: 'rainbowColors[rainbowColors.length] = "темно-синий";'. Есть и другие способы создания массивов.
      Второй споосб создать массив выглядит следующим образом: 'let emptyArray = [];'. При такой записи создается пустой массив, в которые затем можно поместить значения.
      Еще одна, не слишком распространенная форма создания массива – это: 'let emptyArray = new Array();' – осуществляется, как можно видеть, с помощью обращения к функции 'array'. Повторюсь, такой способ не распространен.
      Конечно же, массивы могут хранить не только строки, они могут хранить в себе любые значения. Можно так же создать массив с числами: 'let numbers = [1, 5, 3, 2];'. Более того, JavaScript позволяет добавлять в массив значения разных типов: 'let anyItems = [32, "Hello!", null]';.

Методы массивов

      Есть спаренные методы, такие как 'push/pop', 'shift/unshift', и есть одиночные indexOf, 'slice'. Это основные методы для работы с массивами. По этой ссылке можно перейти на сайт W3Schools и подробнее прочесть о самых разных методах для работы с массивами данных – их очень много. Но в основном используются те методы, речь о которых пойдет далее.
      Начнем с метода Push. Создадим массив: 'let names = ["Вася", "Саша", "Игорь", "Олег"];'. Далее, если мы хотим изменить массив, а именно, добавить в него какой-то элемент, мы можем воспользоваться либо технологией, описанной выше, либо прибегнуть к методу Push. Выглядит это следубщим образом (всопроизведем это как полноценный код):

      После чего, с помощью такого метода записи, в массив (в конец) будет добавлен новый эелемент.
      Так же метот push может возвращать значения. Вообще, метот – это, своего рода, функция. И мы можем извлечь это значение. Это можно реализовать следующим образом:

      При этом console.log();' в виде переменной 'x' будет выводить число, означающее длину массива.       Противоположностью метода push является метод pop. Метод pop удаляет последний элемент в массиве. Он так же способен возвращать значения, но он возвращает не количество элементов, а значение того элемента, который он удалил, то есть последнего. Код для удаления из массива последнего элемента выглядит так: 'names.pop();'.       Следующая пара методов – shift и unshift. По той же самой логике, что и предыдущие два массива, они используются для работы с элементами в начале массива. Метод unshift добавляет элемент, метод shift удаляет.       Следующий метод – indexOF. Он нужен для определения индекса элемента массива. Записывается следующим образом: 'names.indexOf("Игорь");'. Как можно заметить, в качестве параметра этот метод принимает в себя конкретный элемент массива, а после чего возвращает его индекс. Если мы укажем какой-то элемент, которого нет в массиве, то будет возвращено значение -1. То есть, если нужно определить, существует ли введенный элемент в массиве, то это можно легко сделать при помощи этого метода. Есть еще один момент. Если в массиве присутствует два одинаковых элемента, то дудет возвращено значение 0. Мы можем использовать метод indexOf, к примеру, в следующий логике:

      В этом случае метод indexOf проверяет в массиве, есть ли там характеристика автомобиля – седан. Если же такого элемента массива нет, то возвращается значение -1, что исходя из работы тернарного оператора, интерпретируется как false и срабатывает описанный вывод в консоль, что машина не является седаном.       Последний метод, который мы рассмотрим – это метод slice. Метод slice позволяет скопировать часть какого-то массива и присвоить её другой переменной, то есть создать другой массив из уже существующего. Например, let cars = ["Honda", "Toyota", "Peugeot", "Opel", "Mersedes", "BMW"];. И к примеру, мы хотим выбрать из этого массива только немецкие марки автомобилей, то есть, Opel, Mersedes и BMW. Для этого мы можем создать новый массив: 'let germanCars = cars.slice(3, 5)';. В параметре метода в круглых скобках указываются индексы эелементов, с которого мы начинаем "резать" массив, чтобы забрать его кусок и второй индекс, которым мы заканчиваем.

Объекты

      В JavaScript есть еще одна структура для хранения данных – это объекты. Пример массивов из предыдущей главы может хранить как данные одинакового типа (строки), так и данные разных типов (строки, числа, boolean, undefined, null). Этот способ храннеия данных, по большому счету, валиден (корректен), однако не слишком удобен: чтобы получить доступ к какому-либо элементу из массива, нам нужно точно знать, на какой позиции расположено то или иное свойство. Поэтому для множетсва типов даннных, которые принадлежат к какому-то объекту, в JavaScript и существует тип хранения данных объекты. В коде объекты записываются следующим образом 'let carToyota = {}';. В фигурных скобках перечисляются свойства объекта. Но они будут сохраняться не по их индексу, а по так называемому ключу (строке). Соответсвенно, в объекте есть ключ и его значение, по которому считывается информация. Более развернуто посмотрим на код:

      Далее мы можем обращаться к элементу объекта при помощи похожей записи, что мы рассматривали выше, только в этот раз используется не индекс, а название свойства обекта. На примере консоли: 'console.log(carToyota["year"]);'. Но для обращения к свойству объекта не обязательно используется метод обращения, как к массиву – для этого есть специальная запись: 'carToyota.year';. Это обращение к объекту по его ключу. То есть теперь нам не важно знать, на каком месте расположено то или иное свойство. Мы даже можем менять их местами – на результат это никак не повлияет. Есть небольшое отличие между двумя типами записей. В первом случае, когда элемент указывается в квадратных скобках, мы можем использовать переменную. Например, если мы создадим переменную с каким-либо свойством из массива, а затем обратимся к ней, то всё сработает корректно:

      Но если мы обратимся к 'x' в формате записи 'console.log(carToyota.x)', то в результате мы получим значение 'undefined'. В этом случае будет разыскиваться свойство с названием 'x', а не назначенная переменная.       В объектах точно так же можно менять одни свойства на другие. Например, цвет: 'carToyota.color = "red";.       Как и массив, объект точно так же можно вызвать. Например, в консоль: 'console.log(carToyota);'.
      Для объектов так же существует не один способ их создания. В первом способе, который мы рассмотрели выше, мы сразу прописываем все поля. Но есть второй cпособ:

      И еще один способ, как и при создании массивов – при помощи функции. Код выглядит следующим образом:

Массивы или объекты?

      Так что же выбрать? Какие данные лучше отображать в массивах, а какие в объектах?
      В массивах лучше хранить данные одного вида (типа), то есть однообразные данные. Конечно, не воспрещается хранить в массивах и разнообразные данные, однако сопосб массивов для этих целей не представляется удобным. К примеру, массив с различными "цветами", где, конечно же, будут только цвета и ничего больше: let colors = ["red", "orange", "yellow", "white", "blue"];. Если же мы хотим сохранять данные разных типов (как в выше описанном примере с автомобилем), то лучше использовать способ объектов. Как например, информация о человеке:

      Но кроме того, и массивы и объекты могут хранить в себе другие массивы и/или объекты. Например, массив 'numbers' (числа), может хранить в себе какие-то массивы с какими-то числами: 'let numbers = [[1,2,3], [4,5,6], [7,8,9,10]];'. А далее, чтобы обратиться к этому массиву, к примеру, через консоль, нужно сначала указать индекс массива в массиве, а затем индекс самого элемента в выбранном массиве: 'condole.log(numbers[1][2]);'.
      Обекты с массивами можно конфигурировать по-разному. К примеру, объекты могут содеражть в себе массивы. Вернемся к нашему примеру с 'personIvan':

      А чтобы обратиться к одному из элементов массива, нужно: 'console.log(personIvan.pets[1]);'.
      Обекты могут хранить массивы, а массивы могут хранить объекты. К примеру, мы хотим сделать базу данных о продавцах автомобилей:

      То есть, как можно заметить, у нас есть массив и внутри этого массива есть два объекта (можно создавать сколько угодно объектов). Как же нам обратиться к полям этих объектов? Есть два споосба. Мы можем обраться ко всему объекту, к примеру, в консоли: 'console.log(sellers[1]);'. Или мы можем обратиться только к какой-то конкретной строке: 'console.log(sellers[1].hasDiscount);'.       В реальной жизни мы можем создавать базы данных, а затем обращаться к конкретным элементам в них. Например, создать базу данных об автомобилях в автосалоне, а затем вывести только те автомобили, которые были проданы. Для этого, собственно, создадим базу данных. А затем создадим цикл, где будет высчитываться длина выводимой информации. Выглядеть это будет следуюющим образом:

      Для работы с массивами можно использовать не только цикл for. Так же можно использовать цикл forEach (от англ. для каждого), код выглядит следующим образом:

Методы объектов

      Внутри объектов можно прописывать функции, выполняющие те или иные действия. Например, вычисление скидки в зависимости от длительности регистрации пользователя. Рассмотрим это используя вышеприведенный пример с продавцами автомобилей. Если пользователь зарегистрирован на сайте меньше двух лет, то он не имеет никакой скидки. Если от двух до пяти лет, то у него есть скидка 20%, а если больше пяти, то 30%. И далее вызвать метод этого объекта в консоль. Код будет выглядеть следующим образом:

'this' в методе объекта

       Как можно заметить, в выше рассмотренном методе функции мы используем значение, которое можно получить из самого объекта. В данном примере внутриобъектной функции, мы используем параметр 'year', то есть год регистрации пользователя. Но так как в самом объекте уже есть свойство с годом регистрации, то нам необязательно использовать для функции параметр 'year'. Мы можем обратиться к обратиться непосредственно к свойству 'regYear' внутри объекта через функцию. К этому свойству объекта внутри функции мы можем обратиться используя ключевое слово 'this'. Выглядеть в этом случае и объект, и функция будут почти полностью идентично, поэтому не будем переписывать рассмотренный выше. Отметим только, что теперь параметр функции указываться не будет – скобки после слова 'function' будут оставаться пустыми, а объявленная нами переменная 'numberOfYears' будет теперь выглядеть так:
      'let numberOfYears = this.regYear';.
      Теперь, чтобы получить результат выполнения функции, не нужно искусственно прописывать в коде вызова консоли параметр функции – функция будет брать данные для своей работы непосредственно из свойства объекта, то есть, из года регистрации пользователя.
      Но мы можем пойти и еще дальше. Например, если выше описанный объект имеет свойство discount, в котором эта скидка указывается, например, по умолчанию скидка будет равна 0. А далее в коде мы можем объявить переменную 'discount' и присвоить ей значение выше описанной функции с методом 'this' и далее мы можем переменной 'carSeller1.discount' присвоить значение переменной 'discount'. То есть, мы присваиваем полю discount в объекте, значение, которое мы вычисляем с помощью выше описанной функции:

      Но можно записать еще короче и сделать так, чтобы код обращался к объекту (carSeller1), затем к его свойству (discount) и отождествлял его с объектом (carSeller1), затем функцией (discountCalculation();). А затем вывести в консоль весь объект. В этом случае, будет выведен весь объект, а в нём автоматически прописываться вычисленный функцией процент скидки, в зависимости от года регистрации на сайте:

      Но можно пойти еще дальше по пути оптимизации. Для этого мы можем больше не использовать 'return' в функции, а обратиться к полю объекта discount. Сделать это можно с помощью 'this.discount = discount;'. То есть, мы присваиваем свойству значения discount присваиваем значение внутренней переменной 'discount'. Теперь мы можем не присваивать полю ничего дополнительного – весь функционал будет осуществляться внутри объекта. Присвоение свойству discount нового значения при помощи свойства regYear. Итак, весь код для справки будет выглядеть так, для лучшего понимания, снова запишем:

DOM

       Как можно понять, JavaScript нужен, конечно, совсем не для того, чтобы выполнять какие-то игрушечные абстрактные задачи вроде выведения в консоль вычисления площади прямоугольника или содержимого массивов. JavaScript нужен для взаимодействия, а главное – управления HTML и CSS содержимым на веб-странице. Делается это с помощью понятия DOM, что означает Document Object Model (от англ. Объектная Модель Документа).

DOM. Селекторы

       Для доступа к различным HTML-элементам с помощью стандарта DOM точно так же, как и в случае с CSS используются селекторы. Существует несколько видов селекторов:

• document.getElementById();
• document.getElementsByClassName();
• document.getElementsByTagName();
• document.querySelector();
• document.querySelectorAll();

      Начнем с первого селектора – 'document.getElementById();'. С помощью этого селектора, к примеру, можно заполнить любой тег на странице, которых до этого был пустым, допустим, параграф, где написано - "Привет, Мир!". Поскольку, как можно заметить, если попытаться развернуть и перевести название селектора (это будет "Получить элемент по ID"), то этому параграфу нужно своевременно (до выполнения кода), присвоить ID, по которому этот код будет выполняться. Выглядеть код будет так:
      'document.getElementById("paragraph").innerHTML = "Привет, Мир!";'.



      Следующий селектор 'ducument.getElementByClassName();' – находит все элементы по имени указанного класса. То есть, мы можем присвоить HTML-элементам какие-то классы, а затем этот селектор способен возвращать их для дальнейшей с ними работы, например, изменения/добалвения контента. Проще говоря, этот селектор занимается примерно тем же, что и классы в HTML – собирает в себя другие элементы, объединяя в группу. Принцип его работы состоит только в том, чтобы собрать по HTML-коду все эелементы с прописанным (указанным) в селекторе классом, а затем возвратить (передать) эту информацию для дальнейшей работы кому-нибудь другому. Схема применения может выглядеть следующим образом:

      Принцип работы этого кода довольно прост. В HTML мы создаем два параграфа заполненные текстом с классом 'intro' и один пустой параграф с id 'demo'. Далее мы объявляем переменную 'x' и присваиваем ей значение в виде 'document.getElementByClassName("intro");', то есть переменная 'x' теперь представляет тот контент, который входит в класс 'intro'. Как и все прочие перечисления индексов элементов в JS, селекторы при работе с DOM не стали исключением и тоже отсчитываются от ноля. Далее мы вставляем в пустой параграф с id 'demo' текст 'Первый параграф (индекс 0) с классом="intro": ' с помощью 'document.getElementById("demo")' и приплюсовываем ко всему этому переменную 'x[0]' с индексом 0, так как у нас два параграфа с классом 'intro', а исчисляются индексы, как говорилось выше, начиная от ноля, а затем вставляем всё это в тот же пустой параграф.
      Выглядит запутано, но глядя на код выше и вчитываясь в это запутанную инструкцию (пусть даже придется прочесть не один раз), всё непременно будет ясно.



      Следюущий селектор в нашем списке – это document.getElementByTagName();. Этот селектор по принципу своего действия очень похож на предыдущий, но с одним, как можно догадаться по названию, отличием: он находит в документе HTML-теги. Можно сказать, что у этого и предыдущего селектора буквально один и тот же принцип действия, только в этот раз мы бы подставляли не класс, а название тега: параграф, заголовок и/или другие.



      Следующий селектор выбора элементов – 'document.querySelector();'. Этот селектор работает уже не с HTML-тегами, а с селекторами CSS. Как говорилось выше, JS позволяет работать (манипулировать/взаимодействовать) не только с HTML, но и CSS. К примеру, если у нас есть заголовок в HTML с id 'header', то с помощью этого селектора мы можем обратиться к нему точно так же, как в CSS, то есть: 'ducument.querySelector("#header");'. Это актуально и в случае обращения к классу. Важно отметить, что при выборе селектором 'querySelector' класса будут выбираться не все элементы с соответсвующими классами, а только первое совпадение.
      Чтобы выбрать все элементы с одинаковыми нужными нам классами или тегами, существует вариация селектора 'querySelector' – 'querySelectorAll'.

DOM. Изменение контента

      Рассмотрим, как можно манипулировать полученными с помощью селекторов объектами.
      Как уже говорилось выше, есть способ обратиться к содержимому HTML-элемента. Это делается с помощью свойства '.innerHTML'. Но есть и второй способ – это свойство '.textContent'. В чем же разница? Разница в том, что свойство '.innerHTML' занимается не только отображением "сухого" текста, то есть, буквально содержимого тега, а вообще всего, что касается этого тега. То есть, если рассмотреть принцип его работы на примере, допустим, тега 'ul' – неупорядоченного списка – то как результат работы свойства '.innerHTML' (его возвращения), мы получим всю структуру тега 'ul' с его дочерними элементами, текстом и всем прочим (к примеру, тегом strong). Свойство '.textContent' же занимается буквальным отображением тектсового содержимого, где не будет ничего, кроме текста, который содержит тег, к которому совершено обращение. По этой причине, при изменении текста с помощью свойства '.innerHTML' нужно указывать не только текст, но и сам тег, текст внутри которого требуется изменить.

DOM. Изменение стилей

       Изменение стилей с помощью DOM и JS провернуть довольно просто. Допустим, в HTML документе у нас есть заголовок, у этого заголовка есть id="header". Чтобы изменить его стиль с помощью JS, код будет выглядеть следующим образом (для удобства запишем функцию с методом (селектором) как переменную):

      Этим кодом мы через JS обратились по id к заголовку и стилизовали его, сделав его цвет красным.
      Кроме того, исходя из концепции DOM, JS позволяет добавлять не сущестовавшие ранее классы. Для этого существует метод '.classList.add("навзание_нового_класса");'. У добавления/создания чего-либо, конечно, есть и обратное действие, для этого есть метод'.classList.remove("название_удаляемого_класса");'.       Еще один метод, который часто используют для добавления/удаления классов – это '.classList.toggle("название_класса");'. Этот метод работает как некий переключатель – при первом срабатывании он "включает" новый класс, создавая его, при втором, соответственно, "выключает", удаляя.

DOM. Изменение атрибутов

       Концепцию манипуляции с атрибутами было бы удобно рассмотреть с точки зрения такого явления в веб-разработке, как "Image Gallery" – галереи изображений. То есть, некой структуры (блока) на сайте, который включает в себя серию (набор) неких изображений, относящихся к тематике сайта. Эти изображения по нажатию, например, на некую кнопку перелистывания, требуется каким-то образом менять. Для этого и применяется методика, описываемая далее.
      Итак, для начала, как можно вспомнить из начала этой "инструкции" тома по HTML, нам нужно добавить на страницу некую фотографию, а лучше – набор фотографий. Пусть это будет пять фотографий котов.

      ПОДЦЕПИТЬ КОГДА-НИБУДЬ КАКУЮ-НИБУДЬ ГАЛЕРЕЮ ИЗОБРАЖЕНИЙ ДЛЯ КОТОВ!!! И теперь, с помощью JS, мы можем воздействовать на эти изображения. Для начала нам нужно с помощью одного из уже известных селекторов обратиться к этим изображениям:

      Как видно из кода, с помощью объявленной переменной 'cats' и индекса (порядкового номера) "0" мы обращаемся к атрибуту 'src' первого изображения и получаем его. Затем мы меняем значение этого атрибута с помощью метода '.setAttribute', у которого используется не только значение 'src', но и то значение, которое требуется заменить. В данном случае, это путь к новому изображению – 'img/cat2.jpeg'.
      Точно так же, мы можем менять и любой другой атрибут, к примеру атрибут ссылки – тега 'a':

      В этом случае, если у нас есть некая ссылка с ID "link", у которой уже будет прописын некий URL, то он будет заменен на тот, что мы прописали, то есть на ya.ru.

DOM. Events

       Что такое "events"? Events в переводе с англиского – события. То есть, мы можем изменять объекты DOM структуры с помощью JS по ккаким-то событиям. Схема орагнизации реакции на какие-либо события выглядит следующим образом. Для начала нам, конечно, нужно выбрать какой-то элемент, с которым мы и будем работать. Затем, нужно добавить так называемого Event Listener – прослушивателя события. Он через точку записывается после обращения к элементу, а после него в круглых скобках и кавычках пишется, непосредственно событие. Самое распространенное, к примеру 'click'. Вторым елементом указывается функция, в которой мы пишем код, который будет запускаться, когда будет кликнут выбранный нами элемент. Ну а дальше всё как обычно из принципа работы функции. К примеру, изменим цвет заголовка на красный. Рассмотрим это на практике. Допустим, у нас есть эелемент заголовка – h1 с id "test". Код JS будет выглядеть следующим образом:

Тестовый заголовок меняющий цвет по нажатию!

      Для одного элемента мы можем устанавливать несколько Event Listener.
      Точно такой же функционал, как и со сменой цвета заголовка из примера выше, мы можем цеплять и, к примеру, к кнопкам. Для наглядности и простоты, кнопка тоже будет менять цвет. По нажатию она будет менять цвет фона всей страницы! А код будет выглядеть следующим образом (HTML-код мы поместим в синюю рамку, а JS-код в красную):

Сменить цвет!

Финал JS. Игра на реакцию на web-странице

       Внимательно смотрите за кодом, как обычно HTML-код мы разместим внутри синей рамки, JS-код в красной, а CSS будет в зеленой: