Основы Javascript

JavaScript

Что такое Javascript

Это современный язык программирования, который работает в браузере. Один из трёх основных технологий применяемых при разработке сайтов и веб-приложений. На ряду с HTML — языком гипертекстовой разметки и CSS — каскадными таблицами стилей, язык JS позволяет разрабатывать сайты и приложения как начального, так и профессионального уровня. Проще говоря, позволяет создавать как простые, так и сложные решения.

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

Где писать Javascript-код

Так как для работы с программами, написанными на языке JS тебе достаточно веб-браузера. Заходишь в браузер, открываешь инструменты разработчика и переходишь во вкладку «Консоль»

Основы Javascript
Инструменты веб-разработчика и вкладка консоль — вполне достаточно, что бы начать программировать на Javascript.

Но если ты планируешь изучать программирование на JS, то однозначно тебе понадобиться удобный текстовый редактор, для написания кода. Однако запуск и тестирование программ будешь производить в браузере. Проще говоря, для изучения Javascript тебе нужны текстовый редактор и веб браузер.

Сами программы пишутся в текстовых файлах с разрешением .js а затем подключаются к html-страницам при помощи специальных конструкций, либо пишутся в соответствующем html-теге внутри html-страницы. Второй вариант не очень предпочтителен и подойдёт разве что для тестирования отдельно взятой программы, простого сайта, или в качестве временного решения.

Согласно современным стандартам веб-разработки js-программы принято хранить в отдельных файлах. Привыкай хранить запчасти своих сайтов по полочкам.

Основы Javascript
Пример вставки программы написанной на JS в структуру html-страницы. Используется специальный тег <script>
Основы Javascript
Пример подключения отдельного js-файла к html-стрнанице. Используется тот же тег <script>, но в нем добавлен атрибут src с указанием адреса подключаемого js-файла.

При вставке программы написанной на JS в структуру html-страницы. Используется специальный парный тег <script>. Сама программа пишется Между закрывающим и открывающим тегами. Для лучшей читабельности используются переносы и отступы, согласно стандарта языка Javascript.

А если ты подключаешь отдельный js-файл к html-стрнанице — используется тот же парный тег <script>, но в нем добавляется атрибут src с указанием адреса подключаемого js-файла.

Сам файл с программой по традиции называют main.js тем самым разработчик говорит, что это основной js-файл. Ты можешь называть как угодно, но рекомендую придерживаться стандартов веб-разработки, что бы никого не путать.

Вывод уведомлений и сообщений на языке Javascript

По традиции в начале пути программиста пишут фразу Hello, world! Если ты хочешь поддержать традицию и начать свой путь программиста на языке Js — то вот две простые программы.

Выводим сообщение в консоль — для этого достаточно записать конструкцию, в которой мы обращаемся к объекту console и используем его метод вывода информации log. В качестве аргумента мы передаем текст, который согласно стандарту синтаксиса языка JS оборачиваем в кавычки. У тебя должно получиться вот такое выражение:

console.log(" Hello, world!");

Результатом работы такой программы будет вывод нашего сообщения в консоли. Если тебе этого не достаточно, предлагаю попробовать написать программу, которая будет показывать наше приветствие во всплывающем окне. Это совсем не сложно сделать. Достаточно в js-файле записать выражение в котором мы запишем функцию alert(). А в качестве аргумента укажем наш текст с приветствием. У тебя должна получиться конструкция типа такой:

alert("Приветики! Это JavaScript!");

ты можешь писать любой текст и видеть результат выполнения программы в консоли или во всплывающем окне. К слову, функция alert() на ряду с prompt и confirm чаще всего используются для взаимодействия с пользователем — т е с посетителем на сайте, когда стоит задача предупредить или задать вопрос. Обязательно почитай дополнительную информацию о них в документации по JS.

  • alert выводит сообщение.
  • prompt выводит сообщение и ждёт, пока пользователь введёт текст, а затем возвращает введённое значение или null, если ввод отменён (CANCEL/Esc).
  • confirm выводит сообщение и ждёт, пока пользователь нажмёт «OK» или «CANCEL» и возвращает true/false.

Переменные в Javascript

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

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

Помимо содержимого у переменных в JS есть имена. Они нужны для того что бы тебе было удобней обращаться к нужной переменной и различать их между собой — находить в коде программы. Имена конечно же должны быть адекватными. По стандартам веб разработки имена переменным задаются описательные. Это как подписывать маркером коробки при переезде в новую квартиру.

  • Дата рождения — birthday
  • Сумма наличных денег — cashAmount
  • Любимый фильм — favoriteMovie

Я надеюсь что ты уловил логическую связь. Отдельного упоминания заслуживает и формат записи имён переменных. В них нет пробелов. Слова, из которых состоит имя пишутся с большой буквы, что бы было легче читать. такой стиль написания называется CamelCase — верблюжья нотация. Большие буквы — будто верблюжий горб, выделяются на фоне остальных букв.

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

  • var — старый формат объявления переменных. Сейчас почти не используется, но не потерял свою актуальность и поддерживается новыми форматами до сих пор, ради обратной совместимости программ. Его сильная сторона — глобальная область видимости. Проще говоря, где бы ты не объявил переменную по средствам var — её будут видеть все функции, условия и прочие программные блоки. Проще говоря, директива var объявляет переменную глобально или локально во всей функции, независимо от области блока.
  • let — современный и самый часто используемый метод объявления переменной в современном стандарте Javascript. Они хороши в любом случае. Если не знаешь какой метод лучше использовать — пиши let. В отличии от var, у директивы let есть область видимости, которая ограничена текущим блоком кода, в котором её объявлена переменная.
  • const — используется для объявления переменных, которые постоянны. Если данные в переменной не изменяются, или являются постоянной величиной, то их можно смело сохранять в константу по средствам const.
Основы Javascript
Примеры объявления переменных в Javascript.

Широко распространена практика использования констант в качестве псевдонимов для трудно запоминаемых значений, которые известны до начала исполнения скрипта.

Названия таких констант пишутся с использованием заглавных букв и подчёркивания.

Не могу не сказать и про ограничения при именовании переменных:

  1. Имя переменной должно содержать только буквы, цифры или символы $ и _.
  2. Первый символ не должен быть цифрой.
  3. Нельзя использовать зарезервированные слова

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

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

Для начала что такое операнд — это то же самое что и аргумент. По своей сути это то, к чему применяется оператор. В нашем случае мы говорим про арифметические операторы, значит в качестве операндов у нас числа.

Передать аргумент — э то значит передать параметр или значение. К примеру мы передаем начальные значения для переменных в нашу программу — это и есть передача значения в качестве аргумента.

Более того, в математике под аргументом подразумевается независимая переменная величина. Так что логика в этом есть. Запомни и не путайся в терминах.

Операторы бывают унарными и бинарными. Унарные — операторы, применяемые к одному операнду, а бинарные — к двум.

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

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

Математические операторы в JS

  • Сложение +,
  • Вычитание -,
  • Умножение *,
  • Деление /,
  • Взятие остатка от деления %,
  • Возведение в степень **.

Первые четыре оператора очевидны, а про % и ** стоит сказать несколько слов.

Взятие остатка %

Оператор взятия остатка %, несмотря на обозначение, никакого отношения к процентам не имеет.

Результат a % b – это остаток от целочисленного деления a на b.

Например:

alert( 5 % 2 ); // 1, остаток от деления 5 на 2
alert( 8 % 3 ); // 2, остаток от деления 8 на 3

Возведение в степень **

В выражении a ** b оператор возведения в степень умножает a на само себя b раз.

Например:

alert( 2 ** 2 ); // 4  (2 умножено на себя 2 раза)
alert( 2 ** 3 ); // 8  (2 * 2 * 2, 3 раза)
alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2, 4 раза)

Математически, оператор работает и для нецелых чисел. Например, квадратный корень является возведением в степень 1/2:

alert( 4 ** (1/2) ); // 2 (степень 1/2 эквивалентна взятию квадратного корня)
alert( 8 ** (1/3) ); // 2 (степень 1/3 эквивалентна взятию кубического корня)

Сложение строк при помощи бинарного +

Давайте рассмотрим специальные возможности операторов JavaScript, которые выходят за рамки школьной арифметики.

Обычно при помощи плюса '+' складывают числа.

Но если бинарный оператор '+' применить к строкам, то он их объединяет в одну:

let s = "моя" + "строка";
alert(s); // моястрока

Обратите внимание, если хотя бы один операнд является строкой, то второй будет также преобразован в строку.

Например:

alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21"

Как видите, не важно, первый или второй операнд является строкой.

Вот пример посложнее:

alert(2 + 2 + '1' ); // будет "41", а не "221"

Здесь операторы работают один за другим. Первый + складывает два числа и возвращает 4, затем следующий + объединяет результат со строкой, производя действие 4 + '1' = 41.

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

Например, вычитание и деление:

alert( 6 - '2' ); // 4, '2' приводится к числу
alert( '6' / '2' ); // 3, оба операнда приводятся к числам

Приведение к числу, унарный +

Плюс + существует в двух формах: бинарной, которую мы использовали выше, и унарной.

Унарный, то есть применённый к одному значению, плюс + ничего не делает с числами. Но если операнд не число, унарный плюс преобразует его в число.

Например:

// Не влияет на числа
let x = 1;
alert( +x ); // 1

let y = -2;
alert( +y ); // -2

// Преобразует не числа в числа
alert( +true ); // 1
alert( +"" );   // 0

На самом деле это то же самое, что и Number(...), только короче.

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

Бинарный плюс сложит их как строки:

let apples = "2";
let oranges = "3";

alert( apples + oranges ); // "23", так как бинарный плюс объединяет строки

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

let apples = "2";
let oranges = "3";

// оба операнда предварительно преобразованы в числа
alert( +apples + +oranges ); // 5

// более длинный вариант
// alert( Number(apples) + Number(oranges) ); // 5

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

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

Приоритет операторов

В том случае, если в выражении есть несколько операторов – порядок их выполнения определяется приоритетом, или, другими словами, существует определённый порядок выполнения операторов.

Из школы мы знаем, что умножение в выражении 1 + 2 * 2 выполнится раньше сложения. Это как раз и есть «приоритет». Говорят, что умножение имеет более высокий приоритет, чем сложение.

Скобки важнее, чем приоритет, так что, если мы не удовлетворены порядком по умолчанию, мы можем использовать их, чтобы изменить приоритет. Например, написать (1 + 2) * 2.

В JavaScript много операторов. Каждый оператор имеет соответствующий номер приоритета. Тот, у кого это число больше, – выполнится раньше. Если приоритет одинаковый, то порядок выполнения – слева направо.

Отрывок из таблицы приоритетов (нет необходимости всё запоминать, обратите внимание, что приоритет унарных операторов выше, чем соответствующих бинарных):

ПриоритетНазваниеОбозначение
17унарный плюс+
17унарный минус-
16возведение в степень**
15умножение*
15деление/
13сложение+
13вычитание-
3присваивание=

Так как «унарный плюс» имеет приоритет 17, который выше, чем 13 у «сложения» (бинарный плюс), то в выражении "+apples + +oranges" сначала выполнятся унарные плюсы, а затем сложение.

Присваивание

Давайте отметим, что в таблице приоритетов также есть оператор присваивания =. У него один из самых низких приоритетов: 3.

Именно поэтому, когда переменной что-либо присваивают, например, x = 2 * 2 + 1, то сначала выполнится арифметика, а уже затем произойдёт присваивание = с сохранением результата в x.

let x = 2 * 2 + 1;

alert( x ); // 5

Присваивание = возвращает значение

Тот факт, что = является оператором, а не «магической» конструкцией языка, имеет интересные последствия.

Большинство операторов в JavaScript возвращают значение. Для некоторых это очевидно, например сложение + или умножение *. Но и оператор присваивания не является исключением.

Вызов x = value записывает value в x и возвращает его.

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

let a = 1;
let b = 2;

let c = 3 - (a = b + 1);

alert( a ); // 3
alert( c ); // 0

В примере выше результатом (a = b + 1) будет значение, которое присваивается переменной a (то есть 3). Потом оно используется для дальнейших вычислений.

Забавное применение присваивания, не так ли? Нам нужно понимать, как это работает, потому что иногда это можно увидеть в JavaScript-библиотеках.

Однако писать самим в таком стиле не рекомендуется. Такие трюки не сделают ваш код более понятным или читабельным.

Присваивание по цепочке

Рассмотрим ещё одну интересную возможность: цепочку присваиваний.

let a, b, c;

a = b = c = 2 + 2;

alert( a ); // 4
alert( b ); // 4
alert( c ); // 4

Такое присваивание работает справа налево. Сначала вычисляется самое правое выражение 2 + 2, и затем результат присваивается переменным слева: cb и a. В конце у всех переменных будет одно значение.

Опять-таки, чтобы код читался легче, лучше разделять подобные конструкции на несколько строчек:

c = 2 + 2;
b = c;
a = c;

Польза от такого стиля особенно ощущается при быстром просмотре кода.

Сокращённая арифметика с присваиванием

Часто нужно применить оператор к переменной и сохранить результат в ней же.

Например:

let n = 2;
n = n + 5;
n = n * 2;

Эту запись можно укоротить при помощи совмещённых операторов += и *=:

let n = 2;
n += 5; // теперь n = 7 (работает как n = n + 5)
n *= 2; // теперь n = 14 (работает как n = n * 2)

alert( n ); // 14

Подобные краткие формы записи существуют для всех арифметических и побитовых операторов: /=-= и так далее.

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

let n = 2;

n *= 3 + 5;

alert( n ); // 16  (сначала выполнится правая часть, выражение идентично n *= 8)

Инкремент/декремент

Одной из наиболее частых числовых операций является увеличение или уменьшение на единицу.

Для этого существуют даже специальные операторы:

  • Инкремент ++ увеличивает переменную на 1:let counter = 2; counter++; // работает как counter = counter + 1, просто запись короче alert( counter ); // 3
  • Декремент -- уменьшает переменную на 1:let counter = 2; counter--; // работает как counter = counter - 1, просто запись короче alert( counter ); // 1

Важно:

Инкремент/декремент можно применить только к переменной. Попытка использовать его на значении, типа 5++, приведёт к ошибке.

Операторы ++ и -- могут быть расположены не только после, но и до переменной.

  • Когда оператор идёт после переменной — это «постфиксная форма»: counter++.
  • «Префиксная форма» — это когда оператор идёт перед переменной: ++counter.

Обе эти инструкции делают одно и то же: увеличивают counter на 1.

Есть ли разница между ними? Да, но увидеть её мы сможем, только если будем использовать значение, которое возвращают ++/--.

Давайте проясним этот момент. Как мы знаем, все операторы возвращают значение. Операторы инкремента/декремента не исключение. Префиксная форма возвращает новое значение, в то время как постфиксная форма возвращает старое (до увеличения/уменьшения числа).

Чтобы увидеть разницу, вот небольшой пример:

let counter = 1;
let a = ++counter; // (*)

alert(a); // 2

В строке (*) префиксная форма ++counter увеличивает counter и возвращает новое значение 2. Так что alert покажет 2.

Теперь посмотрим на постфиксную форму:

let counter = 1;
let a = counter++; // (*) меняем ++counter на counter++

alert(a); // 1

В строке (*) постфиксная форма counter++ также увеличивает counter, но возвращает старое значение (которое было до увеличения). Так что alert покажет 1.

Подведём итоги:

  • Если результат оператора не используется, а нужно только увеличить/уменьшить переменную, тогда без разницы, какую форму использовать:let counter = 0; counter++; ++counter; alert( counter ); // 2, обе строки сделали одно и то же
  • Если хочется тут же использовать результат, то нужна префиксная форма:let counter = 0; alert( ++counter ); // 1
  • Если нужно увеличить и при этом получить значение переменной до увеличения – нужна постфиксная форма:let counter = 0; alert( counter++ ); // 0

Инкремент/декремент можно использовать в любых выражениях

Операторы ++/-- могут также использоваться внутри выражений. Их приоритет выше, чем у большинства других арифметических операций.

Например:

let counter = 1;
alert( 2 * ++counter ); // 4

Сравните с:

let counter = 1;
alert( 2 * counter++ ); // 2, потому что counter++ возвращает "старое" значение

Хотя технически здесь всё в порядке, такая запись обычно делает код менее читабельным. Одна строка выполняет множество действий – нехорошо.

При беглом чтении кода можно с лёгкостью пропустить такой counter++, и будет неочевидно, что переменная увеличивается.

Лучше использовать стиль «одна строка – одно действие»:

let counter = 1;
alert( 2 * counter );
counter++;

Юрий Ронин