как написать код на javascript

Руководство по JavaScript, часть 1: первая программа, особенности языка, стандарты

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

Это руководство, по замыслу автора, рассчитано на тех, кто уже немного знаком JavaScript и хочет привести свои знания в порядок а также узнать о языке что-то новое. Мы решили немного расширить аудиторию этого материала, включить в неё тех, кто совершенно ничего не знает о JS, и начать его с написания нескольких вариантов «Hello, world!».

Hello, world!

Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.

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

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

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

Ещё один вариант браузерного «Hello, world!» заключается в выводе окна с сообщением. Делается это так:

Вот результат выполнения этой программы.

Вывод сообщения в окне

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

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

Источник

HTML JavaScript

В современном мире верстальщику, который не знает хотя бы основ JavaScript, будет очень сложно. Совершенно не обязательно быть гуру JavaScript, но основами данного языка владеть необходимо.
JavaScript — клиентский язык программирования (выполняется не на сервере, а непосредственно в браузере пользователя на его локальном компьютере).
JavaScript используется для создания веб-приложений и динамических сайтов способных взаимодействовать с пользователем. В этом уроке вы получите лишь общее представление об этом мощном инструменте веб-дизайна, т.к. изучение JavaScript не входит в начальный курс обучения HTML.
Прежде всего нужно запомнить, что JavaScript является регистрозависимым языком. По этой причине следует запоминать не только названия свойств, методов или ключевых слов JavaScript, но и заглавными или строчными буквами они пишутся.

Код JavaScript может быть написан либо непосредственно в самом HTML-документе, либо в отдельном файле.

Для записи JavaScript-кода в HTML-документе используется тег

В следующем примере код JavaScript написан непосредственно в самом HTML-документе. При загрузке страницы данный код сработает и вызовет всплывающее сообщение:

Запуск скрипта

В предыдущем примере скрипт запустился во время загрузки HTML-документа. Но что делать если вы не хотите, чтобы скрипт запускался автоматически? Вы легко можете сделать так, чтобы запуск скрипта осуществлялся только в том случае, если пользователь делает что-то на странице (например, перемещает курсор мыши или кликае ссылку).
Эти действия называются внутренними событиями (события, для краткости). Есть множество предопределенных внутренних событий, которые осуществляют запуск скрипта. Вы можете использовать обработчики событий, чтобы сообщить браузеру, какое событие должно вызвать тот или иной сценарий. События определяются как атрибуты внутри HTML-тега.
Допустим, вы хотите, чтобы появлялось сообщение после того, когда пользователь нажимает кнопку. Вы можете использовать обработчик событий onclick() для выполнения действий. В следующем примере будет отображено окно предупреждения JavaScript, содержащее сообщение:

Подключение внешнего скрипта

Для подключения JS-файлов также используется тег

Источник

Как писать чистый код: обзор лучших практик JavaScript

Хочешь проверить свои знания по JS?

Подпишись на наш канал с тестами по JS в Telegram!

Перевод статьи «How to Write Clean Code: an Overview of JavaScript Best Practices and Coding Conventions».

Соглашения о написании кода (англ. Coding conventions) это руководства по стилю в программировании. Обычно они затрагивают следующие темы:

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

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

«Чистый код читается, как хорошо написанная проза. Чистый код никогда не затемняет намерения проектировщика; он полон четких абстракций и простых линий передачи управления», – Грэди Буч.

Соглашения о написании кода

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

Магические числа

Это жестко прописанные числа, значение которых не ясно. Впервые взглянув на этот код, вы даже не представляете, что это за число такое — 86400.

Будет гораздо лучше, если вы отредактируете такой код, прописав константу:

Таким образом любой читатель будет знать, что речь идет о количестве секунд в сутках.

Глубокая вложенность

Если в вашем коде много вложенных циклов или условий, возможно, что-то следует вынести в отдельную функцию.

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

Прекращайте писать комментарии

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

«Несмотря на то что комментарии по сути не являются ни чем-то плохим, ни чем-то хорошим, они часто используются в качестве «костылей». Код надо писать так, будто комментарии вообще не существуют. Это будет заставлять вас писать как можно более простым и самодокументирующим способом», – Джефф Атвуд.

Код должен говорить сам за себя!

Избегайте крупных функций

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

Будет лучше создать несколько разных функций, чтобы разделить логику:

Повторы кода

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

Хорошей иллюстрацией может послужить наш пример с глубокой вложенностью:

Здесь у нас много повторяющегося кода. Будет гораздо лучше выделить его в отдельную функцию и управлять логикой иначе, с меньшим количеством повторов:

Другим хорошим примером повтора кода может послужить извлечение данных из параметров:

Используя деструктуризацию объекта (ES6), мы можем просто сделать следующее:

Имена переменных

Camel case («верблюжий регистр») в JavaScript используется практически всегда. Это стандарт для написания имен переменных и функций.

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

В общем, вы уловили.

Использование осмысленных имен

getUserData и getUserInfo — довольно нечеткие имена. О каких данных и какой информации идет речь?

Важно, чтобы имена наших функций, методов и переменных выражали их точное значение.

GetUserPost — куда лучшее имя, поскольку здесь мы точно понимаем, что извлекаем.

В случае сомнений выбирайте описательность, а не краткость

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

Если есть более короткий вариант, используйте его

Хотя getUserFromDatabase это очень описательное имя, можно придумать и другое, покороче. Спросите себя, имеет ли смысл добавлять к имени «fromDatabase». Скорее всего, нет, поскольку мы и так предполагаем, что пользователь извлекается из базы данных.

Используйте подходящие по смыслу глаголы

Функции обычно создают, читают, обновляют или удаляют (create, read, update or delete) что-либо. Можно подойти к делу даже более тщательно, чтобы ваши функции создавали, извлекали, устанавливали, добавляли, убирали, сбрасывали и удаляли (create, get, set, add, remove, reset, delete) разные вещи.

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

При этом следует быть последовательным. Т.е., для извлечения данных всегда использовать get, а не get, retrieve, return и десять тысяч других слов.

В общем, должно быть

Конечно, все это вариации одних и тех же слов, но вам нужно выбрать для себя какой-то один вариант и придерживаться его постоянно. Например, когда удаляете что-нибудь, используйте или delete, или remove (но не оба слова) во всей вашей программе.

Имена булевых переменных должны хорошо читаться в if-then предложениях

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

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

Если мы проверяем эти характеристики, мы можем сделать что-то вроде

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

Такие имена переменных звучат более естественно и облегчают чтение программы.

Используйте существительные для имен классов

Классы не принимают вещи, они и есть вещи. Более конкретно, они являются шаблонами чего-либо. Поэтому следует использовать

Если бы вы собирались создать машину, вы бы не говорили «создать новую СоздатьМашину», вы бы сказали «создать новую Машину».

Используйте PascalCase для имен классов

Благодаря Pascal case вы сможете с легкостью отличать, что в вашем коде является классом, а что нет.

Константы пишите в верхнем регистре

Помните, мы создавали константу с количеством секунд в сутках?

Значение константы это нечто неизменное. Это соглашение уходит корнями в С и не всегда соблюдается в JavaScript.

Имейте в виду, что const и constant (константа) это не одно и то же. Объявление const просто означает, что значение не изменяется путем повторного присваивания. В то время как значение истинной константы это примитивное значение, которое позже не будет меняться.

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

это примитивные значения, которые не будут меняться.

Избегайте однобуквенных имен переменных

В долгосрочной перспективе от слишком коротких имен больше хлопот, чем экономии на нажатиях клавиш.

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

тоже гораздо лучше, чем

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

Заключение

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

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

Характеристики чистого кода:

Источник

Что такое JavaScript?

Добро пожаловать на курс MDN JavaScript для начинающих! В первой статье курса мы дадим базовое определение JavaScript, ответим на вопросы «Что такое JavaScript?» и «Что он делает?», узнаем как работает JavaScript и как добавить его на веб-страницу.

Определение высокого уровня

JavaScript это язык, который позволяет вам применять сложные вещи на web странице — каждый раз, когда на web странице происходит что-то большее, чем просто её статичное отображение — отображение периодически обновляемого контента, или интерактивных карт, или анимация 2D/3D графики, или прокрутка видео в проигрывателе, и т.д. — можете быть уверены, что скорее всего, не обошлось без JavaScript. Это третий слой слоёного пирога стандартных web технологий, два из которых (HTML и CSS) мы детально раскрыли в других частях учебного пособия.

Три слоя прекрасно выстраиваются друг над другом. Возьмём простой текст для примера. Для придания структуры и смыслового назначения тексту, разметим его с помощью HTML:

Затем мы добавим немного CSS, что бы это выглядело симпатичнее:

И наконец, добавим немного JavaScript для придания динамического поведения:

Попробуйте кликнуть по тексту чтобы увидеть, что произойдёт (Вы так же можете найти это демо на GitHub — смотрите исходный код, или запустите вживую)!

JavaScript может делать намного больше — давайте выясним это более детально.

Так что же он действительно может делать?

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

Ещё более увлекательным является функциональность, созданная поверх основного языка JavaScript. Так называемые интерфейсы прикладного программирования (API) предоставляют вам дополнительные сверхспособности для использования в вашем коде JavaScript.

Они обычно делятся на две категории.

API-интерфейсы браузера встроены в ваш веб-браузер и могут отображать данные из окружающего компьютерного окружения или делать полезные сложные вещи. Например:

По умолчанию сторонние API-интерфейсы не встроены в браузер, и вам придётся захватывать их код и информацию из какого-либо места в Сети. Для примера:

Доступно ещё больше! Но пока не заостряйте на этом внимание. Вы не сможете создать следующий Facebook, Google Maps или Instagram после 24 часов изучения JavaScript — сначала нужно изучить основы. И именно для этого вы здесь — давайте двигаться дальше!

Что JavaScript делает на вашей странице?

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

Давайте составим краткий бриф, что же происходит когда мы загружаем страничку в браузере (первое упоминание в статье Как работает CSS). Когда вы загружаете страничку в браузере, вы запускаете ваш код (HTML, CSS и JavaScript) внутри исполняемой среды (внутри вкладки браузера). Это как будто фабрика берёт сырьё (некий код) и выдаёт продукцию (веб-страничку).

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

Это хорошо, так как часто использование JavaScript заключается в динамическом изменении HTML и CSS в целях обновления пользовательского интерфейса посредством Document Object Model API (как упоминалось выше). Если бы запуск JavaScript осуществлялся прежде загрузки HTML и CSS, то это привело бы к возникновению ошибок.

Безопасность браузера

Каждая вкладка браузера представляет собой отдельную коробку для запуска кода (в техническом языке, эти коробки называются «средами исполнения») — это значит, что в большинстве случаев код на каждой вкладке запускается полностью отдельно, а код одной вкладки не может напрямую влиять на код другой вкладки или на другом веб-сайте. Это хорошая мера безопасности — если бы это было иначе, пираты могли написать код, который крал информацию с других сайтов или делал другие плохие вещи.

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

Последовательность выполнения JavaScript

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

Здесь мы выбираем абзац текста (строка 1), а затем добавляем к нему обнаружение событий (строка 3), чтобы при нажатии на этот абзац выполнялся блок кода updateName() (строки 5–8). Блок кода updateName() (эти типы многократно используемых блоков кода называются «функции») запрашивает у пользователя новое имя, а затем вставляет это имя в абзац для обновления отображения.

Примечание: Это очень частая ошибка — вы должны быть осторожны, чтобы объекты, на которые ссылается ваш код, существовали до того, как вы попытаетесь что-то с ними сделать.

Интерпретируемый против компилируемого кода

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

С другой стороны, к компилируемые языки преобразуются (компилируются) в другую форму, прежде чем они будут запущены компьютером. Например, C / C ++ компилируются в язык ассемблера, который затем запускается компьютером.

Оба подхода имеют разные преимущества, которые на данном этапе мы обсуждать не будем.

Серверный против клиентского кода

Вы так же можете услышать термины серверный и клиентский код, особенно в контексте веб-разработки. Клиентский код — это код, который запускается на компьютере пользователя. При просмотре веб-страницы, клиентский код загружается, а затем запускается и отображается браузером. В этом модуле JavaScript мы явно говорим о клиентском JavaScript.

С другой стороны, серверный код запускается на сервере, затем его результаты загружаются и отображаются в браузере. Примеры популярных серверных веб-языков включают PHP, Python, Ruby и ASP.NET. И JavaScript! JavaScript так же может использоваться, как серверный язык, например в популярной среде Node.js — вы можете больше узнать о серверном JavaScript в нашем разделе Dynamic Websites – Server-side programming.

Слово динамический используется для описания и клиентского JavaScript, и серверного языка — это относится к возможности обновления отображения веб-страницы/приложения, чтобы показывать разные вещи в разных обстоятельствах, генерируя новый контент по мере необходимости. Серверный код динамически генерирует новый контент на сервере, например достаёт данные из базы данных, тогда как клиентский JavaScript динамически генерирует новое содержание внутри браузера на клиенте, например создаёт новую HTML таблицу, вставляя в неё данные полученные с сервера, затем отображает таблицу на веб-странице, которую видит пользователь. В этих двух контекстах значение немного отличается, но связано, и обычно оба подхода (серверный и клиентский) работают вместе.

Веб-страница без динамического обновления контента называется статической — она просто показывает один и тот же контент все время.

Как добавить JavaScript на вашу страницу?

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

Источник

Руководство по JavaScript, часть 2: стиль кода и структура программ

Сегодня мы публикуем перевод следующей части руководства по JavaScript. Здесь мы поговорим о стиле кода и о лексической структуре программ.

Стиль программирования

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

Существует немало руководств по стилю. Вот 2 из них, которыми в мире JavaScript пользуются чаще всего:

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

Стиль, используемый в этом руководстве

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

Вот список правил, о которых идёт речь.

while. Вот схематичный пример цикла while :

do. Вот структура цикла do :

switch. Ниже показана схема условного оператора switch :

Лексическая структура JavaScript-кода

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

▍Unicode

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

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

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

Если вы, при написании кода, не используете странных конструкций, или не начинаете строку с круглой или квадратной скобки, то вы, в 99.9% случаев, не допустите ошибку (если что — вас о возможной ошибке может предупредить линтер). К «странным конструкциям», например, можно отнести такую:

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

▍Пробелы

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

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

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

▍Комментарии

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

Второй тип — многострочные комментарии:

▍Литералы и идентификаторы

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

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

Знак доллара обычно используется при создании идентификаторов, хранящих ссылки на элементы DOM.

▍Зарезервированные слова

Ниже приведён список слов, которые зарезервированы языком. Использовать их в качестве идентификаторов нельзя.

Итоги

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

Уважаемые читатели! Каким руководством по стилю JavaScript вы пользуетесь?

Источник