Программа на JavaScript состоит из переменных, операторов, функций, объектов и других конструкций языка. Все они будут подробно рассмотрены в данном учебнике. А в этой теме я расскажу, как они пишутся в коде программы. Синтаксис JavaScript обыкновенный и во многом совпадает с другими языками прораммирования.

Пробелы и перевод строки

JavaScript не требует присутсвия пробелов между переменными и различными орераторами. Но позволяет ставить пробелы там, где Вам нужно:

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

Можно написать так:

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

При написании своих названий, например, при создании переменных, тоже учитывается регистр символов. company и Company - это две разные переменные.

Синтаксис JavaScript – это набор правил, как создаются программы JavaScript. В этом уроке мы рассмотрим базовые лексические структуры языка.

Набор символов

При написании программ на JavaScript используется набор символов Unicode. В отличие от 7-разрядной кодировки , подходящей только для английского языка, и 8-разрядной кодировки , подходящей только для английского и основных западноевропейских языков, 16-разрядная кодировка Unicode поддерживает практически все письменные языки, имеющиеся на планете. Стандарт ECMAScript v3 требует, чтобы реализации JavaScript обеспечивали поддержку стандарта Unicode версии 2.1 или выше, а стандарт ECMAScript v5 требует, чтобы реализации обеспечивали поддержку стандарта Unicode версии 3 или выше.

Var str = "hello, world!"; // Используется латиница var стр = "Привет, мир!"; // Используется кириллица

Пробельные символы

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

Пробельные символы Код символа Название Сокращение Описание Escape последовательность

U + 0009	Горизонтальная табуляция	Перемещает позицию печати к следующей позиции горизонтальной табуляции	\t
U + 000B	Вертикальная табуляция	Перемещает позицию печати к следующей позиции вертикальной табуляции	\v
U + 000C	Прогон страницы, смена страницы	Выбрасывает текущую страницу и начинает печать со следующей	\f
U + 0020	Пробел	Интервал между буквами
U + 00A0	Неразрывный пробел	Символ, отображающийся внутри строки подобно обычному пробелу, но не позволяющий разорвать в этом месте строку

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

Следующие символы распознаются интерпретаторами JavaScript как символы конца строки:

Точка с запятой

Программа (сценарий) на языке JavaScript представляет собой перечень «инструкций», которые выполняются веб-браузером.
В JavaScript инструкции, как правило, разделяются точкой с запятой (;).

Если несколько инструкций располагаются на одной строке, то между ними следует поставить знак "точка с запятой" (;).

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

Одна инструкция может располагаться на нескольких строчках:

В этом случае JavaScript ждёт завершение выражения и поэтому автоматически не вставляет «виртуальную» точку с запятой между строчками.

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

Это правило предотвращает некоторые ошибки, например незавершенный ввод, а также позволяет сжимать кoд за счет удаления пустых мест. Сжатие кода без точек с запятой приводит к синтаксическим ошибкам. Кроме того, наличие точек с запятой препятствует снижению быстродействия, потому что синтаксические анализаторы пытаются исправлять предполагаемые ошибки, добавляя недостающие точки с запятой.

Чувствительность к регистру

Для написания JavaScript-пpoгpaмм используется набор символов Unicode, который включает в себя наборы ASCII и Latin-1 и поддерживается практически всеми языками и платформами.
В JavaScript все элементы, включая имена переменных, функций и операторов, чувствительны к регистру и должны всегда содержать одинаковые наборы прописных и строчных букв. Например, ключевое слово while должно набираться как «while», а не «While» или «WHILE».

Аналогично num, NUM и Num – это три разные переменные:

Комментарии

Комментарии позволяют выделить фрагмент программы, который не выполняется интерпретатором JavaScript, а служит лишь для пояснений содержания программы.
Комментарии в JS могут быть однострочными и многострочными.

Однострочные комментарии начинаются с двойного слэша // . Текст считается комментарием до конца строки:

Многострочный комментарий начинается с слэша и звездочки (/*) , а заканчивается ими же в обратном порядке (*/) . Так можно закомментировать одну и более строк:

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

Идентификаторы

Идентификатор - это последовательность букв, цифр, символов подчёркивания (_) и знаков доллара ($) . Цифра не может быть первым символом идентификатора, т. к. тогда интерпретатору JavaScript труднее отличать идентификаторы от чисел. Идентификаторы выступают в качестве имён переменных, функций, свойств объекта и т. д.
Для совместимости и простоты редактирования для составления идентификаторов обычно используются только символы ASCII и цифры. Однако в ECMAScript v3 идентификаторы могут содержать буквы и цифры из полного набора символов Unicode. Это позволяет программистам давать переменным имена на своих родных языках и использовать в них математические символы:

Var имя = "Макс"; var Π = 3.14;

Исторически, программисты использовали разные способы объединения нескольких слов для записи идентификаторов. Сегодня есть два устоявшихся негласных стиля: camelCase и snake_case.
В JavaScript наиболее популярным стилем именования идентификаторов, состоящих из нескольких слов, является camelCase – "верблюжья" нотация. Это означает, что первая буква является строчной, а первые буквы всех последующих слов – прописными, например:

Var firstSecond; var myCar = "audi"; var doSomethingImportant;

Внимание: В JavaScript объединение нескольких слов для записи идентификаторов с применением дефисов запрещено. Они зарезервированы для математических вычитаний.

На заметку: В JavaScript ключевые слова, зарезервированные слова и значения true , false и null не могут быть идентификаторами.

Ключевые и зарезервированные слова

Стандарт ЕСМА-262 определяет набор ключевых слов (keywords), которые не могут использоваться в качестве идентификаторов. Зарезервированные слова имеют определенное значение в языке JavaScript, так как они являются частью синтаксиса языка. Использование зарезервированных слов приведет к ошибке компиляции при загрузке скрипта.

Зарезервированные ключевые слова по версии ECMAScript® 2015

break
catch
class
const
continue
debugger
default
delete
export
extends
finally
function
import
instanceof
return
super
switch
throw
typeof
while
yield

Ключевые слова, зарезервированные на будущее

Кроме того, ЕСМА-262 содержит набор зарезервированных слов (reserved words), которые также нельзя использовать как идентификаторы или имена свойств. За ними сейчас не стоит никакой функциональности, но она может появиться в будущих версиях:

await

В строгом (strict) режиме в этот список добавляются следующие слова:

implements
package
protected
static
interface
private
public

Зарезервированные ключевые слова в версиях ECMAScript® от 1 по 3

abstract
boolean
double
final
float
native
short
synchronized
transient
volatile

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

Итоги

Интерпретатор JavaScript игнорирует все пробельные символы которые могут присутствовать между языковыми конструкциями и воспринимает текст программы как сплошной поток кода.
Кроме того, JavaScript также, по большей части, игнорирует символы перевода строки. Поэтому пробелы и символы перевода строки могут без ограничений использоваться в исходных текстах программ для форматирования и придания им удобочитаемого внешнего вида.
Пропуск точек с запятой нельзя признать правильной практикой программирования, и поэтому желательно выработать привычку их использовать.
В JavaScript все элементы, включая имена переменных, функций и операторов, чувствительны к регистру и должны всегда содержать одинаковые наборы прописных и строчных букв.
Не пренебрегайте комментариями в своих кодах. Они пригодятся вам при отладке и сопровождении программ. Не переживайте насчет увеличения размера кода, т.к. существуют инструменты сжатия JavaScript, которые, при публикации, легко удалят комментарии.
Идентификаторы выступают в качестве имён переменных, функций, свойств объекта и состоят из последовательности букв, цифр, символов подчёркивания (_) и знаков доллара ($) .
Ключевые слова JavaScript, применяемые для обозначения элементов синтаксиса языка, а также другие слова, зарезервированные на будущее, нельзя использовать в качестве имен переменных, функций и объектов.

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

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

Если вы по невнимательности пропускаете точку с запятой, пробелы, ну или по другой причине ваш код не имеет стиль (а это важно!), то советую ESLint .

Предложения состоят из:

Значений
Операторов
Выражений
Ключевых слов
Комментариев

В JavaScript существует два типа значений: переменные и литералы.

Переменные

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

С помощью ключевого слова var. Например, var y = 56;
Просто присвоив значение. Например, y = 56;
Но этот вариант нежелателен, так как в таком случае переменная становится глобальной.
Почему глобальная переменная – это плохо? Хотя бы потому, что становясь глобальной она выходит из-под контроля области действия функции. Она может быть как изменена другим кодом, так и сама переписать значение в чужом коде
С помощью ключевого слова let.
Т.к. в JavaScript (до ECMAScript 6) не существует область видимость в пределах блока, то ввели let, позволяющее объявить переменные с областью видимости – блок.
Например, if (true) {let y = 4;} console.log(y); // ReferenceError: y is not defined
Посмотреть текущую поддержку ES6 можно .

Литералы

Литералы — фиксированные значения. К ним относятся такие типы данных как null, Boolean, Number, Object, String.
Например, когда мы объявляем массив, то часть, которая идет после знака равно является литералом массива.

Var food = [‘cheese’,’potates’,’cucumber’];

А food — это переменная.

Числа

Числа записываются как с десятичными знаками, так и без них.

10.50 1001

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

1..toString() 1 .toString() // пробел перед точкой (1).toString() 1.0.toString()

Строка (String)

String — текст, написанный с помощью двойных или одинарных кавычек.

"I am string“ "And I am string‘

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

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

Идентификаторы

Название, которое мы дает переменным, функциями, свойствам называется идентификатором.
Он может содержать только буквенно-цифровые символы, «$» и «_».
Чем идентификатор отличается от String?

String – данные, а идентификатор часть кода.

Var surname = “Smit”;

“Smit” однозначно данные — литерал строки, тогда как surname – хранилище для этого значения.
Обратите внимание, что дефис в идентификаторе не допускается, так как он используется для вычитания.

Выражения

Выражение — комбинация значений, переменных, операторов, которая вычисляет значение.
Например выражение, 3 * 5 вычисляет 15.
Выражение может содержать и переменную
x * 4
Конечно, значения могут быть и строкой.
Например выражение:

"The day" + " is " + "sunny" //вычисляется в строку "The day is sunny".

Выражения можно разделить на те, что присваивают значение переменной и на те которые просто вычисляют значения.
Первый случай:

а второй:

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

Var x = 56;

Запятая для выражений

Запятая вычисляет оба операнда и возвращает правое значение.

Var x = 0; var y = (x++, 4); console.log(x); //1 console.log(y); //4

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

Каждая из следующих строк содержит выражение:

X x + 6 changeArray("a","b")

Везде где js ожидает предложение, вы можете также писать и выражения.
Подобное предложение называется инструкция-выражение.

Но вы не можете писать предложение, где js предполагает выражение. Например IF предложение не может стать аргументом функции.

Сравнение предложения и выражения

Взглянем на IF предложение и на условный оператор, который является выражением.

Var result; if (x > 0) { result = "Положительное число"; } else { result = "Отрицательное число"; }

Эквивалентно:

Var result = (x > 0 ? "Положительное число" : "Отрицательное число");

Между знаком = и ; выражение.
Для того, чтобы предотвратить двусмысленность при синтаксическом разборе, JS не позволяет использовать литералы объекта и выражения функций как предложения.

Из этого следует, что предложения-выражения не должны начинаться с:

фигурных скобок
с ключевого слова function

Если выражение начинается с того либо с другого, то следует его писать в контексте выражения.
Для этого выражение помещается скобки.

Функция-объявление и функция-выражение

Допустим, мы хотим объявить анонимную функцию-выражение, тогда пишем так:

(function(){return "ready!")());

Давайте рассмотрим, чем эта функция будет отличаться от функции-объявления вида

Function getReady() { return "ready!" }

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

А если мы запишем так?

GetReady(); var getReady = function(){ return "ready!"; } getReady();

В первой строчке получим ошибку: TypeError: getReady is not a function
Пятая же выведет нам «ready», так как функция была уже объявлена.
Это явление называется всплытием (hoisting), почему оно происходит описано в посте про .

JavaScript может быть реализован с помощью операторов JavaScript , которые помещаются в теги HTML script ... /script на веб-странице.

Вы можете разместить теги script , содержащие ваш JavaScript , в любом месте вашей веб-страницы, но обычно рекомендуется хранить его в тегах head .

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

JavaScript code

Тег скрипта содержит два важных атрибута -

Язык - этот атрибут указывает, какой язык сценариев вы используете. Как правило, его значение будет javascript. Хотя недавние версии HTML (и XHTML, его преемник) прекратили использование этого атрибута.
Тип. Этот атрибут теперь рекомендуется для указания используемого языка сценариев, и его значение должно быть установлено на «text / javascript».

Таким образом, ваш сегмент JavaScript будет выглядеть следующим образом:

JavaScript code

Ваш первый скрипт JavaScript

Возьмем пример для распечатки «Hello World». Мы добавили дополнительный комментарий HTML, который окружает наш код JavaScript. Это чтобы сохранить наш код из браузера, который не поддерживает JavaScript. Комментарий заканчивается «// ->». Здесь «//» означает комментарий в JavaScript, поэтому мы добавляем это, чтобы браузер не читал конец комментария HTML как часть кода JavaScript. Затем мы вызываем функцию document.write , которая записывает строку в наш HTML-документ.

Эта функция может использоваться для записи текста, HTML или обоих. Взгляните на следующий код.

Этот код даст следующий результат:

Hello World!

Пробелы и разрывы строк

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

Точки с запятой в JavaScript

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

Но при форматировании в одной строке следующим образом, вы должны использовать точки с запятой -

Примечание. Хорошая практика программирования заключается в использовании точек с запятой.

Чувствительность корпуса

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

Таким образом, идентификаторы Time и TIME будут передавать различные значения в JavaScript.

ПРИМЕЧАНИЕ. Следует соблюдать осторожность при написании имен переменных и функций в JavaScript.

Программа на JavaScript – это последовательность инструкций (statements) . Иногда инструкции ещё называют командами JavaScript.

Чтобы программа выполнилась её необходимо запустить. В случае если программа является клиентским сценарием, то её запуск осуществляется автоматически браузером, но только в том случае если она, конечно, присутствует в коде страницы. Осуществляет браузер выполнение программы обычно в процессе загрузки веб-страницы.

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

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

Инструкции JavaScript состоят из: значений , операторов , выражений , ключевых слов и комментариев .

Например, эта инструкция говорит браузеру написать «Привет, мир!» внутри HTML элемента с id="main":

Document.getElementById("main").textContent = "Привет, мир!";

JavaScript значения

Синтаксис JavaScript определяет следующие типы значений (values): фиксированные значения (литералы) , значения констант и значения переменных .

Примеры литералов для представления различных значений в JavaScript:

17 // литерал целого числа 23.8 // литерал дробного числа "HTML" // литерал строки "HTML" // литерал строки true // логический литерал // литерал массива // литерал массива {} // литерал объекта { name: "Деннис", language: "ru" } // литерал объекта (ab|bc) // литерал регулярного выражения

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

Для объявления констант используется ключевое слово const , переменных – var и let .

Const MAX_LENGTH = 17; // константа var section = "HTML"; // переменная let arr = ["HTML","CSS"]; // переменная

let – это новый способ объявление переменных, который появился начиная с версии ES-2015 (ES6). Отличается let от var тем, что переменная, объявленная с помощью let , имеет другую область видимости (блочную), а также ещё тем, что к ней можно обратиться только после её создания.

Операторы JavaScript

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

В зависимости от количества операндов , с которыми оперирует оператор , они делятся на бинарные и унарные . Но в JavaScript также имеется ещё условный оператор, который состоит из 3 операндов . Данный оператор называется тернарным .

Например, оператор присваивания (знак =):

// operand1 = operand2; coorX = 100; // например присвоить переменной coordX число 100

Данный оператор используется для присвоения (установки) operand1 такого значения, которое имеет operand2 .

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

Например, оператор инкремента (знак ++) используется для увеличения числового значения операнда на 1:

Var num = 5; ++num; // 6

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

JavaScript выражения

Выражение (expression) - это комбинация значений, переменных и операторов, которые либо присваивают переменной значение, либо возвращают какое-то значение без его присваивания.

Например, выражение num = 955.47 использует оператор = для присваивания переменной num значения 7.

Например, выражение "Привет, " + "Тимофей" использует оператор + для сложения строк "Привет, " и "Тимофей" без присваивания.

Ключевые слова JavaScript

Инструкции JavaScript часто начинаются с ключевого слова (keyword). Оно (ключевое слово) предназначено для того чтобы определить какое действие JavaScript необходимо выполнить.

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

Var coordX = 5, coordY = 130;

Список некоторых ключевых слов: break , continue , do ... while , for , function , if ... else , return , switch , try ... catch , var .

Комментарии в JavaScript

Не все инструкции JavaScript являются выполняемыми.

Код после двойных косых черт // или между /* и */ рассматривается как комментарий .

Комментарии игнорируются и не выполняются:

Var direction = "top"; // однострочный комментарий // var speed = 10; эта инструкция не будет выполнена /* Функция, добавляющая к элементу с id="myBtn" класс show */ function showBtn() { document.getElementById("myBtn").classList.add("show"); }

// - является однострочным комментарием, т.е. любой текст между // и концом строки будет игнорироваться JavaScript (не будет выполняться).

/* */ - является многострочным комментарием, любой текст, находящийся между /* и */ будет игнорироваться JavaScript.

Блок инструкций JavaScript

JavaScript инструкции можно сгруппировать с помощью блока (фигурных скобок {...}).

Как правило, используется в функциях, управляющих структурах (for, while) и др.

Function myFunction() { document.getElementById("id__1").textContent = "Текст 1..."; document.getElementById("id__2").textContent = "Текст 2..."; }

Чувствительность к регистру

JavaScript является регистрозависимым языком . Это значит, что ключевые слова, переменные, имена функций и другие идентификаторы языка должны содержать одинаковые наборы прописных и строчных букв. Например, метод alert должно набираться только как alert , а не Alert , ALERT и т.п.

Пробелы в JavaScript

JavaScript игнорирует несколько пробелов . Можно добавить пробелы в сценарий, чтобы сделать его более читаемым.

Следующие строки эквивалентны:

Var str = "Текст"; var str="Текст";

Длина строки кода

Если JavaScript инструкция имеет большую длину, то её желательно разорвать. В большинстве случае разрыв инструкции лучше осуществить после какого-нибудь оператора.

Например:

Document.getElementById("aside__nav_header").innerHTML = "Дополнительная навигация (по разделу)";

имя, состоящее из одного слова, следует писать строчными буквами (например: article);
имя, состоящее из нескольких слов, следует писать слитно строчными буквами, кроме букв на стыке слов, их необходимо писать прописными (например: articleTitle);
количество слов в имени не должно превышать 3 (например: articleDatePublishedon)
переменные (не для хранения функций) и свойства объектов должны быть существительными (например: textComment);
массивы и коллекции значений следует задавать существительными во множественном числе (например: lastComments);
именовать функции и методы объектов необходимо глаголами (например: getLastArticles);
именование классов необходимо начинать с прописной буквы (например: Comments).