Структура кода
Начнём изучение языка с рассмотрения основных «строительных блоков» кода.
Инструкции
Инструкции – это синтаксические конструкции и команды, которые выполняют действия.
Мы уже видели инструкцию alert(‘Привет, мир!’) , которая отображает сообщение «Привет, мир!».
В нашем коде может быть столько инструкций, сколько мы захотим. Инструкции могут отделяться точкой с запятой.
Например, здесь мы разделили сообщение «Привет Мир» на два вызова alert:
alert('Привет'); alert('Мир');Обычно каждую инструкцию пишут на новой строке, чтобы код было легче читать:
alert('Привет'); alert('Мир');Точка с запятой
В большинстве случаев точку с запятой можно не ставить, если есть переход на новую строку.
Так тоже будет работать:
alert('Привет') alert('Мир')В этом случае JavaScript интерпретирует перенос строки как «неявную» точку с запятой. Это называется автоматическая вставка точки с запятой.
В большинстве случаев новая строка подразумевает точку с запятой. Но «в большинстве случаев» не значит «всегда»!
В некоторых ситуациях новая строка всё же не означает точку с запятой. Например:
alert(3 + 1 + 2);Код выведет 6 , потому что JavaScript не вставляет здесь точку с запятой. Интуитивно очевидно, что, если строка заканчивается знаком «+» , значит, это «незавершённое выражение», поэтому точка с запятой не требуется. И в этом случае всё работает, как задумано.
Но есть ситуации, где JavaScript «забывает» вставить точку с запятой там, где она нужна.
Ошибки, которые при этом появляются, достаточно сложно обнаруживать и исправлять.
Пример ошибки
Если вы хотите увидеть конкретный пример такой ошибки, обратите внимание на этот код:
alert('Hello'); [1, 2].forEach(alert);Пока нет необходимости знать значение скобок [] и forEach . Мы изучим их позже. Пока что просто запомните результат выполнения этого кода: выводится Hello , затем 1 , затем 2 .
А теперь давайте уберем точку с запятой после alert :
alert('Hello') [1, 2].forEach(alert);Этот код отличается от кода, приведенного выше, только в одном: пропала точка с запятой в конце первой строки.
Если мы запустим этот код, выведется только первый alert , а затем мы получим ошибку (вам может потребоваться открыть консоль, чтобы увидеть её)!
Это потому что JavaScript не вставляет точку с запятой перед квадратными скобками [. ] . И поэтому код в последнем примере выполняется, как одна инструкция.
Вот как движок видит его:
alert('Hello')[1, 2].forEach(alert);Выглядит странно, правда? Такое слияние в данном случае неправильное. Мы должны поставить точку с запятой после alert , чтобы код работал правильно.
Это может произойти и в некоторых других ситуациях.
Мы рекомендуем ставить точку с запятой между инструкциями, даже если они отделены переносами строк. Это правило широко используется в сообществе разработчиков. Стоит отметить ещё раз – в большинстве случаев можно не ставить точку с запятой. Но безопаснее, особенно для новичка, ставить её.
Комментарии
Со временем программы становятся всё сложнее и сложнее. Возникает необходимость добавлять комментарии, которые бы описывали, что делает код и почему.
Комментарии могут находиться в любом месте скрипта. Они не влияют на его выполнение, поскольку движок просто игнорирует их.
Однострочные комментарии начинаются с двойной косой черты // .
Часть строки после // считается комментарием. Такой комментарий может как занимать строку целиком, так и находиться после инструкции.
// Этот комментарий занимает всю строку alert('Привет'); alert('Мир'); // Этот комментарий следует за инструкциейМногострочные комментарии начинаются косой чертой со звёздочкой /* и заканчиваются звёздочкой с косой чертой */ .
/* Пример с двумя сообщениями. Это - многострочный комментарий. */ alert('Привет'); alert('Мир');Содержимое комментария игнорируется, поэтому, если мы поместим код внутри /* … */ , он не будет исполняться.
Это бывает удобно для временного отключения участка кода:
/* Закомментировали код alert('Привет'); */ alert('Мир');Используйте горячие клавиши!
В большинстве редакторов строку кода можно закомментировать, нажав комбинацию клавиш Ctrl + / для однострочного комментария и что-то вроде Ctrl + Shift + / – для многострочных комментариев (выделите кусок кода и нажмите комбинацию клавиш). В системе Mac попробуйте Cmd вместо Ctrl и Option вместо Shift .
Вложенные комментарии не поддерживаются!
Не может быть /*. */ внутри /*. */ .
Такой код «умрёт» с ошибкой:
/* /* вложенный комментарий . */ */ alert( 'Мир' );Не стесняйтесь использовать комментарии в своём коде.
Комментарии увеличивают размер кода, но это не проблема. Есть множество инструментов, которые минифицируют код перед публикацией на рабочий сервер. Они убирают комментарии, так что они не содержатся в рабочих скриптах. Таким образом, комментарии никоим образом не вредят рабочему коду.
Позже в учебнике будет глава Качество кода, которая объяснит, как лучше писать комментарии.
Советы по стилю кода
Это и есть искусство программирования – взять сложную задачу и написать такой код для её решения, который и правильно работает, и легко читается, понятен для людей. Для этого нужен хороший стиль написания кода. В этой главе мы рассмотрим составляющие такого стиля.
Синтаксис
Шпаргалка с правилами синтаксиса (подробнее смотрите ниже по тексту):
Не всё здесь однозначно, так что разберём эти правила подробнее.
Ни одно правило не является жёстко обязательным
Здесь нет железных правил. Это стилевые предпочтения, а не религиозные догмы.
Фигурные скобки
В большинстве JavaScript проектов фигурные скобки пишутся в так называемом «египетском» стиле с открывающей скобкой на той же строке, что и соответствующее ключевое слово – не на новой строке. Перед открывающей скобкой должен быть пробел, как здесь:
if (condition) < // делай это // . и это // . и потом это >А что если у нас однострочная запись, типа if (condition) doSomething() , должны ли мы использовать фигурные скобки?
Вот различные варианты расстановки скобок с комментариями, посмотрите сами, какой вам кажется самым читаемым:
-
�� Такое иногда бывает в коде начинающих. Плохо, фигурные скобки не нужны:
if (n < 0) не поддерживается`);> if (n < 0) alert(`Степень $не поддерживается`);if (n < 0) alert(`Степень $не поддерживается`);if (n < 0) < alert(`Степень $не поддерживается`); >Для очень короткого кода допустима одна строка. Например: if (cond) return null . Но блок кода (последний вариант) обычно всё равно читается лучше.
Длина строки
Никто не любит читать длинные горизонтальные строки кода. Лучше всего разбивать их, например:
// обратные кавычки ` позволяют разделять строку на части let str = ` Рабочая группа TC39 организации Ecma International - это группа JavaScript-разработчиков, теоретиков и авторов движков JavaScript, которые вместе с сообществом занимаются поддержкой и развитием языка JavaScript. `;if ( 123 && moonPhase === 'Waning Gibbous' && zodiacSign === 'Libra' )
Максимальную длину строки согласовывают в команде. Обычно это 80 или 120 символов.
Отступы
Существует два типа отступов:
-
Горизонтальные отступы: 2 или 4 пробела. Горизонтальный отступ выполняется с помощью 2 или 4 пробелов, или символа табуляции (клавиша Tab ). Какой из них выбрать – это уже на ваше усмотрение. Пробелы больше распространены. Одно из преимуществ пробелов над табуляцией заключается в том, что пробелы допускают более гибкие конфигурации отступов, чем символ табуляции. Например, мы можем выровнять аргументы относительно открывающей скобки:
show(parameters, aligned, // 5 пробелов слева one, after, another ) < // . >function pow(x, n) < let result = 1; // //
Точка с запятой
Точки с запятой должны присутствовать после каждого выражения, даже если их, казалось бы, можно пропустить.
Есть языки, в которых точка с запятой необязательна и редко используется. Однако в JavaScript бывают случаи, когда перенос строки не интерпретируется, как точка с запятой, что может привести к ошибкам. Подробнее об этом – в главе о структуре кода.
Если вы – опытный разработчик на JavaScript, то можно выбрать стиль кода без точек с запятой, например StandardJS. В ином случае, лучше будет использовать точки с запятой, чтобы избежать подводных камней. Большинство разработчиков их ставят.
Уровни вложенности
Уровней вложенности должно быть немного.
Например, в цикле бывает полезно использовать директиву continue , чтобы избежать лишней вложенности.
Например, вместо добавления вложенного условия if , как здесь:
for (let i = 0; i < 10; i++) < if (cond) < . // >Мы можем написать:
for (let i = 0; i < 10; i++) < if (!cond) continue; . //
Аналогичная ситуация – с if/else и return .
Например, две нижеследующие конструкции идентичны.
function pow(x, n) < if (n < 0) < alert("Отрицательные значения 'n' не поддерживаются"); >else < let result = 1; for (let i = 0; i < n; i++) < result *= x; >return result; > >function pow(x, n) < if (n < 0) < alert("Отрицательные значения 'n' не поддерживаются"); return; >let result = 1; for (let i = 0; i < n; i++) < result *= x; >return result; >Размещение функций
Если вы пишете несколько вспомогательных функций, а затем используемый ими код, то существует три способа организации функций.
-
Объявить функции перед кодом, который их вызовет:
// объявление функций function createElement() < . >function setHandler(elem) < . >function walkAround() < . >// код, который использует их let elem = createElement(); setHandler(elem); walkAround();// код, использующий функции let elem = createElement(); setHandler(elem); walkAround(); // --- вспомогательные функции --- function createElement() < . >function setHandler(elem) < . >function walkAround()
В большинстве случаев второй вариант является предпочтительным.
Это потому, что при чтении кода мы сначала хотим знать, что он делает. Если сначала идёт код, то это тут же становится понятно. И тогда, может быть, нам вообще не нужно будет читать функции, особенно если их имена хорошо подобраны.
Руководства по стилю кода
Руководство по стилю содержит общие правила о том, как писать код, например: какие кавычки использовать, сколько пробелов отступать, максимальную длину строки и так далее – в общем, множество мелочей.
Когда все участники команды используют одно и то же руководство по стилю, код выглядит одинаково, независимо от того, кто из команды его написал.
Конечно, команда всегда может написать собственное руководство по стилю, но обычно в этом нет необходимости. Существует множество уже готовых.
Некоторые популярные руководства:
- Google JavaScript Style Guide
- Airbnb JavaScript Style Guide (есть перевод)
- Idiomatic.JS (есть перевод)
- StandardJS
- (и ещё множество других)
Если вы – начинающий разработчик, то начните со шпаргалки в начале этой главы. Как только вы освоитесь, просмотрите другие руководства, чтобы выбрать общие принципы и решить, какое вам больше подходит.
Автоматизированные средства проверки (линтеры)
Автоматизированные средства проверки, так называемые «линтеры» – это инструменты, которые могут автоматически проверять стиль вашего кода и вносить предложения по его улучшению.
Самое замечательное в них то, что проверка стиля может также найти программные ошибки, такие как опечатки в именах переменных или функций. Из-за этой особенности использовать линтер рекомендуется, даже если вы не хотите придерживаться какого-то конкретного «стиля кода».
Вот некоторые известные инструменты для проверки:
- JSLint – проверяет код на соответствие стилю JSLint, в онлайн-интерфейсе вверху можно ввести код, а внизу – различные настройки проверки, чтобы попробовать её в действии.
- JSHint – больше проверок, чем в JSLint.
- ESLint – пожалуй, самый современный линтер.
Все они, в общем-то, работают. Автор пользуется ESLint.
Большинство линтеров интегрированы со многими популярными редакторами: просто включите плагин в редакторе и настройте стиль.
Например, для ESLint вы должны выполнить следующее:
- Установите Node.JS.
- Установите ESLint с помощью команды npm install -g eslint (npm – установщик пакетов JavaScript).
- Создайте файл конфигурации с именем .eslintrc в корне вашего JavaScript-проекта (в папке, содержащей все ваши файлы).
- Установите/включите плагин для вашего редактора, который интегрируется с ESLint. У большинства редакторов он есть.
Вот пример файла .eslintrc :
< "extends": "eslint:recommended", "env": < "browser": true, "node": true, "es6": true >, "rules": < "no-console": 0, "indent": ["warning", 2] >>Здесь директива "extends" означает, что конфигурация основана на наборе настроек «eslint:recommended». После этого мы уточняем наши собственные.
Кроме того, возможно загрузить наборы правил стиля из сети и расширить их. Смотрите https://eslint.org/docs/user-guide/getting-started для получения более подробной информации об установке.
Также некоторые среды разработки имеют встроенные линтеры, возможно, удобные, но не такие гибкие в настройке, как ESLint.
Итого
Все правила синтаксиса, описанные в этой главе (и в ссылках на руководства по стилю), направлены на повышение читаемости вашего кода. О любых можно поспорить.
Когда мы думаем о написании «лучшего» кода, мы должны задать себе вопросы: «Что сделает код более читаемым и лёгким для понимания?» и «Что может помочь избегать ошибок?». Это – основные моменты, о которых следует помнить при выборе и обсуждении стилей кода.
Чтение популярных руководств по стилю позволит вам быть в курсе лучших практик и последних идей и тенденций в стилях написания кода.
Как писать код в javascript
Создадим первую программу на javascript. Для написания и тестирования программ на JavaScript нам потребуются две вещи: текстовый редактор и веб-браузер.
В качестве текстового редактора можно взять любой, который нравится - Atom, Sublime Text, Visual Studio Code, Notepad++ и другие. В данном руководстве я буду ориентироваться на бесплатный и многофункциональный текстовый редактор Visual Studio Code, поскольку он является наиболее популярным.
В качестве браузера также можно взять последние версии любого предпочтительного веб-браузера. В настоящем руководстве я буду преимущественно ориентироваться на Google Chrome.
Для начала определим для нашего приложения какой-нибудь каталог. Например, создадим на диске C папку app . В этой папке создадим файл под названием index.html . То есть данный файл будет представлять веб-страницу с кодом HTML.
Откроем этот файл в текстовом редакторе и определим в файле следующий код:
METANIT.COM
Здесь мы определяем стандартные элементы html. В элементе head определяется кодировка utf-8 и заголовок (элемент title ). В элементе body определяется тело веб-страницы, которое в данном случае состоит только из одного элемента
Подключение кода javascript на html-страницу осуществляется с помощью тега . Данный тег следует размещать либо в заголовке (между тегами
и ), либо в теле веб-странице (между тегами и ). Нередко подключение скриптов происходит перед закрывающим тегом
