Как выглядит javascript код

Структура кода

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

Инструкции

Инструкции – это синтаксические конструкции и команды, которые выполняют действия.

Мы уже видели инструкцию 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 , чтобы код работал правильно.

Это может произойти и в некоторых других ситуациях.

Мы рекомендуем ставить точку с запятой между инструкциями, даже если они отделены переносами строк. Это правило широко используется в сообществе разработчиков. Стоит отметить ещё раз – в большинстве случаев можно не ставить точку с запятой. Но безопаснее, особенно для новичка, ставить её.

В большинстве редакторов строку кода можно закомментировать, нажав комбинацию клавиш Ctrl + / для однострочного комментария и что-то вроде Ctrl + Shift + / – для многострочных комментариев (выделите кусок кода и нажмите комбинацию клавиш). В системе Mac попробуйте Cmd вместо Ctrl и Option вместо Shift .

Вложенные комментарии не поддерживаются!

Не может быть /*. */ внутри /*. */ .

Такой код «умрёт» с ошибкой:

/* /* вложенный комментарий . */ */ alert( 'Мир' );

Не стесняйтесь использовать комментарии в своём коде.

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

Позже в учебнике будет глава Качество кода, которая объяснит, как лучше писать комментарии.

Код JavaScript: примеры. JavaScript-гайд

Предлагаем вашему вниманию основные концепции языка программирования JavaScript, сопровождаемые примерами кода.

Немного истории

Язык программирования JavaScript появился более 20 лет назад и прошёл за этот период времени довольно большой путь. Когда-то он был скромным инструментом для создания простых анимаций. Сегодня он регулярно попадает в топ-10 рейтинга Tiobe.

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

JavaScript реализует стандарт ECMAScript, в результате чего название версий начинается ES: ES6, ES2018 и т. п. Версии нумеруются по году релиза и имеют порядковый номер. За развитие JavaScript отвечает комитет TC39, причём каждая новая функциональность должна пройти несколько этапов перед её принятием.

Стайлгайды для JavaScript-кода

Существуют соответствующие стайлгайды (от английского словосочетания Style Guide). Они необходимы для того, чтобы код на JavaScript был аккуратным и чистым. По сути, речь идёт о выработанной системе соглашений, которой придерживаются программисты в процессе разработки кода. Среди готовых стайлгайдов можно упомянуть системы соглашений от Google либо AirBnb.

Примеры переменных в JavaScript-коде

Имена функций и переменных в JS должны начинаться с буквы, символа подчёркивания либо $. Кроме того, могут содержаться даже иероглифы либо эмодзи! Что касается идентификаторов, то они регистрозависимы: otus и OTUS – это разные переменные.

Также нельзя применять в качестве имен зарезервированные слова:

Чтобы создать переменную, следует использовать одно из 3-х ключевых слов: let, var либо const.

Какие тут нюансы: • var-переменные обладают свойством хойстинга (поднятия) и имеют контекстную область видимости; • let и const имеют блочную видимость и не поднимаются; • неизменяемость const-переменных повсеместно применяются для обеспечения иммутабельности.

Примеры выражений в JavaScript-коде

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

Примитивные типы данных в коде JavaScript

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

Если нужно выполнить конкатенацию строк, подойдёт оператор + :

"Otus " + "courses"

Мы можем заполнить строку символами до определенной длины, сделав это как с начала, так и с конца:

Уже начиная с версии ES6, для создания строк появился новый синтаксис, который допускает многострочность и интерполяцию выражений:

Примеры логических значений в коде JavaScript

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

Кроме того: — null значит, что у переменной нет значения. Собственно говоря, такая концепция есть не только в JavaScript, но и в других языках программирования (nil, None); — undefined значит, что у переменной нет значения, то есть она не инициализирована.

Кстати, функции без директивы return вернут именно undefined. Являются undefined и неинициализированные параметры функций.

Примеры функций в коде на JavaScript

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

Согласно концепции языка программирования JavaScript, функции — это объекты, а значит, могут иметь свои методы и свойства. Кроме того, функция может как быть аргументом либо возвращаемым значением другой функции, так и быть помещённой в переменную.

Начиная с версии ES6, функции в JavaScript поддерживают дефолтные параметры:

Причём в списке параметров мы можем оставлять замыкающую запятую:

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

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

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

Кстати, this мы можем установить искусственно посредством методов apply, call, bind:

Когда функцию вызывают не в контексте объекта, то её this равняется undefined.

Стрелочные функции

Они появились в ES6, полностью изменив вид JavaScript-кода. Давайте рассмотрим это на примере, ведь на первый взгляд они довольно просты:

Но тут существуют нюансы. К примеру, у стрелочных функций нет своего this, а получают они его из контекста создания.

IIFE и генераторы

Immediately Invoked Function Expressions – это функции, выполняемые сразу после объявления.

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

Массивы и объекты в JavaScript

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

Что касается объектов, то в ES2015 объектные литералы получили ряд новых возможностей: — упрощение синтаксиса включения переменных:

— прототипы и ключевое слово super:

— динамические имена свойств:

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

Примеры циклов в коде на JavaScript

Начнём с for:

Теперь посмотрим на пример кода с for-each:

Далее do-while:

Естественно, не забудем и про while:

Теперь for-in:

Что касается for-of, то этот цикл успешно сочетает в себе лаконичность метода массивов forEach и возможность прерывания цикла:

Что же, на этом всё. Если же вас интересуют продвинутые курсы по JavaScript, милости просим!

JavaScript по-русски — pycckuu.js

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

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

Это основные доводы, которыми руководствовались мы, решив написать свой, русский язык программирования.
С другой стороны, давайте посмотрим правде в глаза: зачем изобретать очередной велосипед? Навряд ли язык, созданный небольшой группой энтузиастов, когда-нибудь сможет составить конкуренцию таким монстрам, как JavaScript или Python. После недолгих обсуждений, утихомирив наш пыл, мы решили начать с малого и написать транспиллер в JavaScript.
Так и родился наш проект — PycckuuJS.
Первое, с чего мы решили начать, — это loader для Webpack, с которым вы можете ознакомиться в репозитории на GitHub.
Процесс его установки и использования максимально прост и удобен. Достаточно установить npm-пакет и добавить pycckuu-loader в ваш webpack.config.js для файлов с расширением.яс.

Вот пример минимального конфигурационного файла:

module.exports = < entry: "./тест.яс", output: < path: __dirname, filename: "result.js" >, module: < loaders: [ < test: /\.яс$/, loader: "pycckuu" >] > >;

Это позволит использовать русские ключевые слова в JavaScript.

Например, такой код:

пер сотрудники = ['Владимир', 'Дмитрий', 'Николай'] пер приветствовать = функция(имя) < консоль.логировать('Привет ' + имя + '!') >цикл(пер и=0; и

Будет транслирован в:

var сотрудники = ['Владимир', 'Дмитрий', 'Николай'] var приветствовать = function(имя) < console.log('Привет ' + имя + '!') >for(var и=0; и

С полным списком соответствий можете ознакомится в репозитории на GitHub.
На данный момент loader находится в состоянии MVP (Minimum viable product), так что будем рады вашим pull-реквестам, советам и критике.
На ближайшее будущее запланировано доведение pycckuu-loader до стабильного состояния и создание плагинов для подсветки кода в популярных средах разработки.

UPD Товарищи ставящие минусы, ну имейте хоть капельку чувства юмора.

javascript
импортозамещение

Ненормальное программирование
JavaScript

JavaScript в браузере — JS: DOM API

В этом уроке мы изучим . Это тег, с помощью которого мы связываем JavaScript с веб-страницами одним из двух способов:

Инлайн-скриптинг
Внешний скриптинг

Инлайн-скрипты

Слово inline означает, что мы размещаем JavaScript прямо внутри HTML. Этот метод подходит для базовых сценариев с небольшим количеством кода:

    const greeting = 'hello, world!'; // Он выводит приветствие на экран в модальном окне браузера alert(greeting);  // На странице может быть любое количество этих тегов

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

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

// Код минифицирован, чтобы занимать как можно меньше места // Это ускоряет загрузку (function(i,s,o,g,r,a,m)i['GoogleAnalyticsObject']=r;i[r]=i[r]||function() (i[r].q=i[r].q||[]).push(arguments)>,i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) >)(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview');

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

Внешние скрипты

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

   src="/assets/application.js">  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js">

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

Порядок выполнения

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

Порядок загрузки можно контролировать с помощью атрибутов defer и async . Об этом можно прочитать здесь .

REPL

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

В браузере существует аналог REPL — Node.js. Чтобы воспользоваться им, найдите DevTools в меню браузера и запустите его. В нижней части экрана появится раздел с вкладкой Console. На этой вкладке вы можете выполнять любой код JavaScript, как и в серверном REPL.

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

Особенности браузерного JavaScript

Браузерный и серверный JavaScript — это один и тот же язык. То есть Node.js по сути не относится к отдельным языкам программирования. Но у каждой среды есть свои особенности, о которых необходимо знать.

Модули

Большинство встроенных модулей в Node.js недоступны в браузере. Поэтому их приходится заменять библиотеками. Некоторые модули доступны как глобальные объекты. Например, URL доступен в браузере по умолчанию.

Версии

Версию JavaScript на сервере определяет программист, который ставит конкретную версию Node.js.

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

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

Браузер и контент

Открыть доступ

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

130 курсов, 2000+ часов теории
1000 практических заданий в браузере
360 000 студентов

Наши выпускники работают в компаниях: