Введение в JavaScript

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

Что такое JavaScript?

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

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

1. Код написанный на этом языке, преобразовывается в машинные инструкции и выполняется построчно, для этого используется специальная программа — интерпретатор. Это позволяет, при наличии соответствующего интерпретатора, запускать данный код на любой платформе (компьютере, телефоне, SmartTV и т.д.). Более подробно об интерпретации Вы можете прочитать тут.
2. Язык является высокоуровневым, это означает что язык располагает более простыми и удобным для программиста инструкциями. Хотя такие языки немного уступают по гибкости и производельности низкоуровневым, они позволяет писать более понятный для человека код, соответственно, увеличивая скорость написания кода
   Более подробно о языках разного уровня тут.

Зачем нужен JavaScript?

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

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

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

Помимо этого на JavaScript пишутся приложения для Android и iOS, window, unix-подобных операционных систем, например популярное приложение Instagram написано на JavaScript фреймворке под названием React Native.

Стандарт ECMAScript

В 1996 году было принято решение стандартизировать язык. К тому времени скрипты, написанные на JavaScript, использовались на очень большом количестве сайтов. Стандартизацией занималась ассоциация ECMA.

ECMA — ассоциация, созданная в 1961 году с целью стандартизации информационных и коммуникационных систем

Для разработки стандарта была сформирована рабочая группа TC-39. Эта группа действует и по сей день, продолжая улучшать язык.

В 1997 году работа над стандартом была закончена, он получил имя ECMA-262. Язык был назван ECMAScript, так как название JavaScript не могло быть использовано из-за проблем с торговой маркой Java (раньше надо было думать -_-).

Современные стандарты

Последняя версия стандарта ECMAScript 8, но самыми популярным на данный момент являются ES5 и ES6.

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

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

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

Браузерная поддержка классов введенных в ES6. Информация получена на http://caniuse.com/, ресурсе позволяющем узнать какой процент браузеров поддерживает ту или иную функциональность.

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

После ES6 новые версии стандарта выходят каждый год. В 2016 и 2017 годах, ожидаемо, вышли седьмая и восьмая версии. С полный списком версий можно ознакомиться на англоязычной странице стандарта в wikipedia: https://en.wikipedia.org/wiki/ECMAScript.

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

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

Браузер

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

Современные браузеры

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

Самые популярные браузеры на данный момент:

1. Google Chrome
2. Mozilla Firefox
3. Safari (созданный компанией Apple)
4. Opera (созданный компанией Opera Software)
5. Microsoft Edge (IE)

Существую множество других браузеров, но у вас, наверняка, сейчас установлен один из этих.

Node.js

Node.js это среда которая позволяет нам писать и выполнять JavaScript код на нашем компьютере. Это открывает новые широкие возможности использование JavaScript как языка общего назначения. Например, написать на нем полноценное приложение для Windows. Кстати, редактор VS Code, который мы будем рассматривать далее, как раз написан с использованием Node.js.

Более подробно можно почитать тут: http://thinking.bohdanvorona.name/to-learn-node-js/

Или на официальном сайте (англ.):
https://nodejs.org/en/about/

“Hello World” на JavaScript

В этом разделе мы установим редактор кода, напишем свой первый скрипт на JavaScript, и познакомимся с инструментами разработчика в браузере Chrome.

Редактор кода

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

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

Несколько популярных редакторов:
https://atom.io/
https://www.sublimetext.com/
https://code.visualstudio.com/

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

VS Code

Если вы не определились с редактором, то я советую для начала попробовать Visual Studio Code, простой и быстрый редактор созданный компанией Microsoft.

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

Его можно скачать и установить, перейдя по ссылке ниже
https://code.visualstudio.com/Download

IDE

Некоторые предпочитают использовать IDE вместо редакторов кода. IDE это Integrated development environment или Интегрированная среда разработки.

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

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

Одной из самых популярных IDE для написания кода на JavaScript является WebStorm.

Онлайн редакторы

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

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

В последнее время появилось множество таких редакторов, одним из примеров может быть https://codepen.io/.

Создаем и подключаем первый скрипт

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

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

• Для начала, создадим папку в которой будут содержаться наши файлы.
• Далее откроем нашу папку в редакторе.
• Создадим два файла index.html и test.js.
• Помещаем в index.html следующий код:

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

Если вы совсем не знакомы с HTML, рекомендую пройти несколько первых бесплатных уроков на https://htmlacademy.ru/. Это займет пару часов, но после этого вы сможете понять что обозначает это разметка.

• Далее добавляем наше приветствие в test.js:

• Теперь переходим в нашу папку и открываем index.html с помощью браузера.

Инструменты разработчика

Открыв наш index.html мы удивили лишь пустую страницу, где же тогда наше приветствие?

Developer Tools

Инструменты разработчика (или dev tools) — набор инструментов встроенных в браузер позволяющих нам анализировать веб-страницу, изучать ее код, искать ошибки, эмулировать различные устройства, проверять состояние сетевых запросов и многое другое. Инструменты разработчика реализованы во всех современных браузерах.

Перед использованием рекомендую вам обновить свою версию браузера до последней. Чтобы открыть инструменты разработчика нажмите клавишу f12 на windows или alt + cmd + i на MacOS. Затем вы должны увидеть подобную панель:

Инструменты разработчика в Google Chrome (справа)

Если вкладка консоли не открыта по умолчанию перейдите на нее, после того как консоль будет открыта мы сможем увидеть наше приветствие!

JavaScript console

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

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

Так же есть еще некоторые другие способы вывода информации в консоль, например, console.info или console.debug, но они используются реже.

Они очень похожи, отличается лишь формат вывода, и в дальнейшем их можно отфильтровать (например вывести только ошибки).

Вывод сообщений в консоль

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

Инструменты разработчика очень объемная тема изучение которой можно было бы вынести в отдельный курс. Так что мы обойдемся ссылками на две статьи
https://learn.javascript.ru/debugging-chrome
https://developer.mozilla.org/ru/docs/Learn/Discover_browser_developer_tools

Дополнительные ресурсы

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

Параллельно для изучения JavaScript и программирования советую такие ресурсы:

1. Курс “Введение в программирование” на Hexlet. Очень понятный и интересный курс, особенно полезный для новичков.
2. https://learn.javascript.ru/ — Лучший бесплатный учебник по JavaScript на русском языке.
3. https://www.freecodecamp.org/ — Очень хороший ресурс, помогающий изучать JavaScript и алгоритмы, требуются небольшие знания английского языка.

Что дальше?

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

Автор — Yevhen Diachenko. Front End Engineer at Vimeo.
Мой сайт: https://yevhen-diachenko.com/
Редакторы— Artur Parkhisenko, Kate Mikulyanec.

Создано для Zengineers Community.