Основы языка JavaScript

JavaScript появился благодаря усилиям двух компаний - Netscape (Mozilla) и Sun Microsystems (Oracle).
JavaScript позволяет создавать приложения, выполняемые как на стороне клиента, т.е. эти приложения выполняются браузером на компьютере пользователя, так и на стороне сервера.

Что такое JavaScript?
Изначально JavaScript был создан, чтобы «сделать веб-страницы живыми».
Программы на этом языке называются скриптами. Они могут встраиваться в HTML и выполняться автоматически при загрузке веб-страницы.
Скрипты распространяются и выполняются, как простой текст. Им не нужна специальная подготовка или компиляция для запуска. Это отличает JavaScript от другого языка – Java.

В браузере JavaScript (оживление страницы) может:
Добавлять новый HTML-код на страницу, изменять существующее содержимое, модифицировать стили.
Реагировать на действия пользователя, щелчки мыши, перемещения указателя, нажатия клавиш.
Отправлять сетевые запросы на удалённые сервера, скачивать и загружать файлы
задавать вопросы посетителю, показывать сообщения.
Запоминать данные на стороне клиента («local storage»).

Возможности JavaScript:
создание динамических страниц, реагирующих на действия пользователя;
обработка элементов форм в режиме реального времени (проверка правильности ввода данных)
создание полноценных приложений, работающих в пределах сайта
отслеживание действий, совершаемых пользователями и др.

Что делает JavaScript особенным?
Три сильные стороны JavaScript:
Полная интеграция с HTML/CSS.
Простые вещи делаются просто.
Поддерживается всеми основными браузерами и включён по умолчанию.
JavaScript – это единственная браузерная технология, сочетающая в себе все эти три вещи.

Способы размещения JavaScript кода
включение кодов JavaScript между тэгами
и
;
подключение внешнего файла с кодами JavaScript с помощью тэга
;<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide8" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/972670/slide-7.jpg" target="_blank" rel="noopener">Слайд 8</a><h3 class="slides-content text-center font-bold"><div><p>Тег «script»<br></div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Тег «script»" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/972670/slide-7.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/972670/slide-7.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/972670/slide-7.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/972670/slide-7.jpg 1440w" class="slides-image" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/972670/slide-7.jpg"><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide9" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/972670/slide-8.jpg" target="_blank" rel="noopener">Слайд 9</a><h3 class="slides-content text-center font-bold"><div><p>Внешние скрипты<br><p>Если у вас много JavaScript-кода, вы можете поместить его в отдельный</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Внешние скрипты Если у вас много JavaScript-кода, вы можете поместить его в" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/972670/slide-8.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/972670/slide-8.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/972670/slide-8.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/972670/slide-8.jpg 1440w" class="slides-image" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/972670/slide-8.jpg"><!----><div class="slides-content">файл.<br><p>Для подключения нескольких скриптов используйте несколько тегов:<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide10" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/972670/slide-9.jpg" target="_blank" rel="noopener">Слайд 10</a><h3 class="slides-content text-center font-bold"><div><p>1. Включение JavaScript между тэгами <SCRIPT> и
Для включения фрагментов программы

СТРУКТУРА КОДА
Инструкции
Инструкции – это синтаксические конструкции и команды, которые выполняют действия.
Точка с запятой
В большинстве случаев точку с запятой можно не ставить, если есть переход на новую строку.
Так тоже будет работать:
перенос строки как «неявную» точку с запятой. Это называется автоматическая вставка точки с запятой.
alert('Привет, мир!'), которая отображает сообщение «Привет, мир!».

JavaScript «забывает» вставить точку с запятой там, где она нужна.
Пример ошибки
Теперь, если запустить код, выведется только первый alert, а затем мы получим ошибку!
Всё исправится, если мы поставим точку с запятой после alert

2. Использование точки с запятой для указания конца инструкции не является обязательным условием. В JavaScript между инструкциями можно не ставить точку с запятой, если они находятся на разных строках.
первая инструкция
вторая инструкция
3. При размещении инструкций на одной строке, их надо обязательно разделять с помощью точки с запятой, тем самым сообщая интерпретатору, где заканчивается первая инструкция и начинается следующая.
первая инструкция; вторая инструкция;

4. Хорошей практикой в программировании является использование точки с запятой всегда, даже если инструкции расположены на разных строках.
Это поможет сделать ваш код более читабельным и возможно избежать в дальнейшем непредвиденных ошибок во время исполнения программы.

Комментарии
Комментарии – пояснения к исходному коду программы, оформленные по правилам, определённым языком программирования.
Функции комментариев:
помогают правильно понять текст программы;
временное исключение части кода программы.
Виды комментариев:
однострочный;
// это однострочный комментарий
многострочный.
/* Это многострочный комментарий. Он расположен на нескольких строках */

КОММЕНТАРИИ
Однострочные комментарии начинаются с двойной косой черты //.
Многострочные комментарии начинаются косой чертой со звёздочкой /* и заканчиваются звёздочкой с косой чертой */.

Правила объявления переменных
Переменная – это именованная область в оперативной памяти компьютера, предназначенная для хранения различной информации.
Для того, чтобы использовать переменную, ее сначала необходимо объявить: написать перед ее именем ключевое слово let. Давайте объявим, например, переменную с именем a:

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

Var вместо let
В старых скриптах вы также можете найти другое ключевое слово: var вместо let:
Ключевое слово var – почти то же самое, что и let. Оно объявляет переменную, но немного по-другому, «устаревшим» способом.

переменную message можно представить как коробку с названием "message" и значением "Hello!" внутри:
Мы также можем изменить его столько раз, сколько захотим:

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

Имена переменных.
Имя переменной должно содержать только буквы, цифры или символы $ и _.
Первый символ не должен быть цифрой.
Если имя содержит несколько слов, ( слова следуют одно за другим), то каждое следующее слово начинается с заглавной буквы: myVeryLongName.
Существует список зарезервированных слов, которые нельзя использовать в качестве имён.

Примеры допустимых идентификаторов

Зарезервированные слова
JavaScript резервирует ряд идентификаторов, которые играют роль ключевых слов самого языка.

КОНСТАНТА
константа – запись в исходном коде программы, представляющая собой обычное фиксированное значение.
Переменные, объявленные с помощью const, называются «константами». Их нельзя изменить. Попытка сделать это приведёт к ошибке:
Константы в верхнем регистре

Типы данных JavaScript
Типы данных в JavaScript делятся на две категории:
простые (примитивные) типы;
составные (объекты).
К категории простых типов относятся:
String - текстовые строки (строки)
Number - числа
Boolean - логические (булевы) значения
null
undefined

К составным типам данных относятся:
Function - функции
Array - массивы
Object - объекты

Числа
Существует множество операций для чисел, например, умножение *, деление /, сложение +, вычитание - и так далее.
Числовой тип данных (number)
Тип BigInt был добавлен в JavaScript, чтобы дать возможность работать с целыми числами произвольной длины.

Специальные числовые значения
В JavaScript имеются предопределённые глобальные переменные Infinity и NaN.
Переменная Infinity хранит специальное значение обозначающее бесконечность.
Переменная NaN также хранит специальное значение NaN (- не число).

Строки
Строка (string) в JavaScript должна быть заключена в кавычки.
В JavaScript существует три типа кавычек.
Двойные кавычки: "Привет".
Одинарные кавычки: 'Привет'.
Обратные кавычки: `Привет`.
Обратные кавычки имеют расширенную функциональность. Они позволяют нам встраивать выражения в строку, заключая их в ${…}.

Булевый тип
Булевый тип (boolean) может принимать только два значения:
true (истина) и false (ложь).

Значение «Значение «null»
Это просто специальное значение, которое представляет собой «ничего», «пусто» или «значение неизвестно».
В приведённом выше коде указано, что значение переменной age неизвестно.
Значение «Значение «undefined»
Оно означает, что «значение не было присвоено».

Объекты и символы
Тип object (объект) – особенный.
Все остальные типы называются «примитивными», потому что их значениями могут быть только простые значения (будь то строка, или число, или что-то ещё). В объектах же хранят коллекции данных или более сложные структуры.
Тип symbol (символ) используется для создания уникальных идентификаторов в объектах.

Оператор Оператор typeof
Вызов typeof x возвращает строку с именем типа:

Взаимодействие: alert, prompt, confirm
alert
Она показывает сообщение и ждёт, пока пользователь нажмёт кнопку «ОК».

prompt
Функция prompt принимает два аргумента:
Этот код отобразит модальное окно с текстом, полем для ввода текста и кнопками OK/Отмена.
title
Текст для отображения в окне.
default
Необязательный второй параметр, который устанавливает начальное значение в поле для текста в окне.

confirm
Функция confirm отображает модальное окно с текстом вопроса question и двумя кнопками: OK и Отмена.
Результат – true, если нажата кнопка OK. В других случаях – false.

Преобразование типов
Чаще всего операторы и функции автоматически приводят переданные им значения к нужному типу.
Например, alert автоматически преобразует любое значение к строке. Математические операторы преобразуют значения к числам.
Есть также случаи, когда нам нужно явно преобразовать значение в ожидаемый тип.

Строковое преобразование
Численное преобразование

Логическое преобразование
Происходит в логических операциях (позже мы познакомимся с условными проверками и подобными конструкциями), но также может быть выполнено явно с помощью функции Boolean(value).
Правило преобразования:
Значения, которые интуитивно «пустые», вроде 0, пустой строки, null, undefined и NaN, становятся false.
Все остальные значения становятся true.

Выражения
Любая комбинация переменных и операций, которая может быть вычислена интерпретатором для получения значения, называется выражением. Примеры
alpha + 19
(alpha - 37)*beta/2
Результатом выполнения всех операций, входящих в состав выражения, является значение.

Выражения и операторы - это не одно и то же. Операторы являются указанием совершить какое-либо действие и завершаются точкой с запятой. Выражения же определяют некоторую совокупность вычислений.
В одном операторе могут присутствовать несколько выражений.
Операнд – то, к чему применяется оператор. Например, в умножении 5 * 2 есть два операнда: левый операнд равен 5, а правый операнд равен 2. Иногда их называют «аргументами» вместо «операндов».

Термины: «унарный», «бинарный», «операнд»
Унарным называется оператор, который применяется к одному операнду. Например, оператор унарный минус "-" меняет знак числа на противоположный:
Бинарным называется оператор, который применяется к двум операндам. Тот же минус существует и в бинарной форме:

Операции
Операция представляет собой символ, благодаря которому производятся некоторые виды вычислений, сравнений или присваиваний с участием одного или нескольких значений.
Типы операций:
арифметические,
присваивания,
сравнения,
логические,
поразрядные (побитовые).
Значения, расположенные по сторонам операции, называются операндами.

Присваивание
Операция присваивания выглядит как знак равенства =, она присваивает значение, стоящее с правой стороны от нее, переменной, стоящей с левой стороны.
Пример:
let x = 20;
let y = x + 32;

Арифметические операции

Приведение к числу, унарный +
На самом деле это то же самое, что и Number(...), только короче.

Инкремент и декремент
Инкремент ++ увеличивает переменную на 1:
Декремент -- уменьшает переменную на 1:

Знак операции инкремента бывает:
в префиксной форме, когда он расположен перед своим операндом, ++counter.
в постфиксной форме, когда операнд записан перед знаком ++. counter++.
Префиксная форма возвращает новое значение, в то время как постфиксная форма возвращает старое (до увеличения/уменьшения числа).
В строке (*) префиксная форма ++counter увеличивает counter и возвращает новое значение 2. Так что alert покажет 2.

Операции сравнения

Логические операции
Логические операции позволяют сравнивать результаты работы двух условных операндов с целью определения факта возвращения одним из них или обоими значения true и выбора соответствующего продолжения выполнения сценария.

Оператор if (Условное ветвление)
Оператор if позволяет интерпретатору JavaScript выполнять те или иные действия в зависимости от условия.

В операторе if сначала вычисляется выражение. Если полученный результат условия равен true или может быть преобразован в true, то оператор, расположенный в теле if, выполняется.
Если результат условия равен false или преобразуется в false, то оператор не выполнится. Круглые скобки вокруг выражения являются обязательной частью синтаксиса оператора if.
let year = prompt('В каком году была опубликована спецификация ECMAScript-2015?', ‘’);
if (year == 2015) alert( 'Вы правы!' );
Если мы хотим выполнить более одной инструкции, то нужно заключить блок кода в фигурные скобки:

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

Конструкция if-else-if
Используется при необходимости проверки несколько условий и выборе правильного.
if(условие){
оператор;
} else if(условие){
оператор;
} else if(условие){
оператор;
}
else
оператор;

let year = prompt('В каком году была опубликована спецификация ECMAScript-2015?', ‘’);
if (year < 2015) {
alert( 'Это слишком рано...' );}
else if (year > 2015){
alert( 'Это поздновато' ); }
else {
alert( 'Верно!' );
Иногда, нужно проверить несколько вариантов условия. Для этого используется блок else if.

Условный оператор «?»
if (a < b)
x = a;
else
x = b;
Тернарный оператор
Тернарный оператор – это оператор, использующий более двух операндов.
С помощью условного оператора предыдущий код можно записать следующим образом:
x = (a < b) ? a : b;
Сначала вычисляется условие: если оно истинно, тогда возвращается значение1, в противном случае – значение2.

Пример

Несколько операторов „?“
Последовательность операторов вопросительного знака ? позволяет вернуть значение, которое зависит от более чем одного условия.

Оператор switch
Конструкция switch заменяет собой сразу несколько if.
Она представляет собой более наглядный способ сравнить выражение сразу с несколькими вариантами.
Конструкция switch имеет один или более блок case и необязательный блок default.

Пример

Программа выводит одно из трех сообщений в зависимости от того, какое из чисел находится в переменной x.
Оператор break
Завершает выполнение ветвления switch. Управление в этом случае передается первому оператору, следующему за конструкцией switch.
Если значение переменной в операторе switch не совпадает ни с одним из значений констант, указанных внутри ветвления, то управление будет передано в конец switch без выполнения каких-либо других действий.

Пример (без использования оператора break)

Циклы
Действие циклов заключается в последовательном повторении определенной части вашей программы некоторое количество раз.
Повторение продолжается до тех пор, пока выполняется соответствующее условие.
Когда значение выражения, задающего условие, становится ложным, выполнение цикла прекращается, а управление передается оператору, следующему непосредственно за циклом.

Виды циклов:
for,
while;
do while.

Цикл for
Цикл for организует выполнение фрагмента программы фиксированное число раз. Как правило (хотя и не всегда), этот тип цикла используется, когда известно заранее, сколько раз должно повториться исполнение кода.

Инициализирующее выражение - представляет из себя оператор присваивания, задающий первоначальное значение переменной, которая выполняет роль счетчика и управляет циклом. Условие выполнения - это логическое выражение, определяющее необходимость повторения цикла.
Итерация - выражение, определяющее величину, на которую должно изменяться значение переменной, управляющей циклом, при каждом повторе цикла.
Выполнение цикла for будет продолжаться до тех пор, пока проверка условия дает истинный результат. Как только эта проверка даст ложный результат, цикл завершится, а выполнение программы будет продолжено с оператора, расположенного за циклом.

Цикл while
Содержит условие выполнения цикла, но не содержит ни инициализирующих, ни инкрементирующих выражений.
В случае невыполнения условия при первой проверке тело цикла вообще не исполнялось.

Пример
let n = 0;
while(n != 5){
alert(n + " ");
n++; //если из кода убрать эту строку, то цикл будет бесконечным
}

Цикл do while
Цикл сначала выполнит тело, а затем проверит условие condition, и пока его значение равно true, он будет выполняться снова и снова.

Операторы break и continue
Оператор break производит выход из цикла.
Следующим оператором, исполняемым после break, будет являться первый оператор, находящийся вне данного цикла.
Пример
for(var i = -10; i <= 10; i++){
if (i > 0) break;
alert(i + " ");
}
alert("Готово!");

С помощью оператора continue можно организовать преждевременное завершение шага итерации цикла. Оператор continue осуществляет принудительный переход к следующему шагу цикла, пропуская любой код, оставшийся невыполненым.
Пример
Переход к следующей итерации: continue

Домашнее задание 1:
1. Возьмите две переменные с числовыми значениями, например: a = 2 и b = 10 (числа могут быть любые). Напишите код, который выводит на экран одну из строк: если истинно условие (a > b) строку "a больше b", если (a < b) тогда строку "a меньше b", если (a == b) тогда строку "а равно b". Для вывода на экран можете использовать document.write() или alert().

Домашнее задание 2:
1. Что делает следующий цикл for? Каково финальное значение переменной sum?
var sum = 0;
for(var i = -100; i <= 100; i++){
sum += i;
}
2. Напишите программу, которая использует цикл for для суммирования чисел от 50 до 100. Затем перепишите программу с использованием цикла while.
3. Напишите программу, которая используя цикл while отображает на экране числа от 10 до 0. Затем перепишите программу с использованием цикла for.