Руководства по javascript

Время на прочтение
8 мин

Количество просмотров 260K

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

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

→ Часть 1: первая программа, особенности языка, стандарты
→ Часть 2: стиль кода и структура программ
→ Часть 3: переменные, типы данных, выражения, объекты
→ Часть 4: функции
→ Часть 5: массивы и циклы
→ Часть 6: исключения, точка с запятой, шаблонные литералы
→ Часть 7: строгий режим, ключевое слово this, события, модули, математические вычисления
→ Часть 8: обзор возможностей стандарта ES6
→ Часть 9: обзор возможностей стандартов ES7, ES8 и ES9

Hello, world!

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

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

Для того чтобы её написать, если вы пользуетесь Google Chrome, откройте меню браузера и выберите в нём команду Дополнительные инструменты > Инструменты разработчика. Окно браузера окажется разделённым на две части. В одной из них будет видна страница, в другой откроется панель с инструментами разработчика, содержащая несколько закладок. Нас интересует закладка Console (Консоль). Щёлкните по ней. Не обращайте внимания на то, что уже может в консоли присутствовать (для её очистки можете воспользоваться комбинацией клавиш Ctrl + L). Нас сейчас интересует приглашение консоли. Именно сюда можно вводить JavaScript-код, который выполняется по нажатию клавиши Enter. Введём в консоль следующее:

console.log("Hello, world!")

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

После того, как текст программы оказался в консоли, нажмём клавишу Enter.

Если всё сделано правильно — под этой строчкой появится текст Hello, world!. На всё остальное пока не обращайте внимания.

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

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

alert("Hello, world!")

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

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

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

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

Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега <script>. Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге script можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например — в VS Code или в Notepad++) новый файл, который назовём hello.html, и добавим в него следующий код:

<!DOCTYPE html>
<html>
  <body>
    <p id="hello"></p>

    <script>
      document.getElementById("hello").innerHTML = "Hello, world!";
    </script>
  </body>
</html>

Здесь нас больше всего интересует строчка document.getElementById("hello").innerHTML = "Hello, world!";, представляющая собой JS-код. Этот код заключён в открывающий и закрывающий теги <script>. Он находит в документе HTML-элемент с идентификатором hello и меняет его свойство innerHTML (то есть — тот HTML код, который содержится внутри этого элемента) на Hello, world!. Если открыть файл hello.html в браузере, на ней будет выведен заданный текст.

Сообщение, выведенное средствами JavaScript в HTML-элемент

Как уже говорилось, примеры, приводимые на сайте w3school.com, можно тут же и попробовать. Существуют и специализированные онлайн-среды для веб-разработки, и, в частности, для выполнения JS-кода. Среди них, например codepen.io, jsfiddle.net, jsbin.com.

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

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

Выше мы говорили о том, что JavaScript-программы можно выполнять на различных платформах, одной из которых является серверная среда Node.js. Если вы собираетесь изучать JavaScript, ориентируясь именно на серверную разработку, вероятно, вам стоит запускать примеры именно средствами Node.js. Учтите, что, говоря упрощённо, и не учитывая особенности поддержки конкретных возможностей языка используемыми версиями Node.js и браузера, в Node.js и в браузере будет работать один и тот же код, в котором используются базовые механизмы языка. То есть, например, команда console.log("Hello, world!") будет работать и там и там. Программы, использующие механизмы, специфичные для браузеров, в Node.js работать не будут (то же самое касается и попыток запуска программ, рассчитанных на Node.js, в браузере).

Для того чтобы запустить наш «Hello, world!» в среде Node.js, установим Node.js, скачав отсюда подходящий дистрибутив. Теперь создадим файл hello.js и поместим в него следующий код:

console.log('Hello, World!');

Средствами командной строки перейдём в папку, в которой хранится этот файл, и выполним такую команду:

node hello.js

Вот каким будет результат её выполнения:

Сообщение, выведенное средствами Node.js

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

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

Общие сведения о JavaScript

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

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

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

Основные характеристики JavaScript

JavaScript — это язык, который отличается следующими особенностями:

• Высокоуровневый. Он даёт программисту абстракции, которые позволяют не обращать внимание на особенности аппаратного обеспечения, на котором выполняются JavaScript-программы. Язык автоматически управляет памятью, используя сборщик мусора. Разработчик, в результате, может сосредоточиться на решении стоящих перед ним задач, не отвлекаясь на низкоуровневые механизмы (хотя, надо отметить, это не отменяет необходимости в рациональном использовании памяти). Язык предлагает мощные и удобные средства для работы с данными различных типов.
• Динамический. В отличие от статических языков программирования, динамические языки способны, во время выполнения программы, выполнять действия, которые статические языки выполняют во время компиляции программ. У такого подхода есть свои плюсы и минусы, но он даёт в распоряжение разработчика такие мощные возможности, как динамическая типизация, позднее связывание, рефлексия, функциональное программирование, изменение объектов во время выполнения программы, замыкания и многое другое.
• Динамически типизированный. Типы переменных при JS-разработке задавать необязательно. В одну и ту же переменную можно, например, сначала записать строку, а потом — целое число.
• Слабо типизированный. В отличие от языков с сильной типизацией, языки со слабой типизацией не принуждают программиста, например, использовать в неких ситуациях объекты определённых типов, выполняя, при необходимости, неявные преобразования типов. Это даёт больше гибкости, но JS-программы не являются типобезопасными, из-за этого усложняются задачи проверки типов (на решение этой проблемы направлены TypeScript и Flow).
• Интерпретируемый. Широко распространено мнение, в соответствии с которым JavaScript является интерпретируемым языком программирования, что означает, что программы, написанные на нём, не нуждаются в компиляции перед выполнением. JS в этом плане противопоставляют таким языкам, как C, Java, Go. На практике же браузеры, для повышения производительности программ, выполняют компиляцию JS-кода перед его выполнением. Этот шаг, однако, прозрачен для программиста, он не требует от него дополнительных усилий.
• Мультипарадигменный. JavaScript не навязывает разработчику использование какой-то конкретной парадигмы программирования, в отличие, например, от Java (объектно-ориентированное программирование) или C (императивное программирование). Писать JS-программы можно, используя объектно-ориентированную парадигму, в частности — применяя прототипы и появившиеся в стандарте ES6 классы. Программы на JS можно писать и в функциональном стиле, благодаря тому, что функции здесь являются объектами первого класса. JavaScript допускает и работу в императивном стиле, используемом в C.

Да, кстати, надо отметить, что у JavaScript и Java нет ничего общего. Это — совершенно разные языки.

JavaScript и стандарты

ECMAScript, или ES, это название стандарта, которым руководствуются разработчики JavaScript-движков, то есть — тех сред, где выполняются JS-программы. Различные стандарты вводят в язык новые возможности, говоря о которых нередко упоминают наименование стандартов в сокращённой форме, например — ES6. ES6 — это то же самое, что и ES2015, только в первом случае число означает номер версии стандарта (6), а во втором — год принятия стандарта (2015).

Сложилось так, что в мире веб-программирования очень долго был актуален стандарт ES3, принятый в 1999 году. Четвёртой версии стандарта не существует (в неё попытались добавить слишком много новых возможностей и так и не приняли). В 2009 году был принят стандарт ES5, который представлял собой прямо-таки огромное обновление языка, первое за 10 лет. После него, в 2011 году, был принят стандарт ES5.1, в нём тоже было немало нового. Весьма значительным, в плане новшеств, стал и стандарт ES6, принятый в 2015 году. Начиная с 2015 года, новые версии стандарта принимают каждый год.

Самой свежей версией стандарта на момент публикации этого материала является ES9, принятая в июне 2018 года.

Итоги

Сегодня мы написали «Hello, World!» на JavaScript, рассмотрели основные особенности языка и поговорили о его стандартизации. В следующий раз поговорим о стиле JavaScript-текстов и о лексической структуре программ.

Уважаемые читатели! Если вы, до чтения этого материала, не были знакомы с JavaScript, просим рассказать о том, получилось ли у вас запустить «Hello, world!».

Популярное

1. Bootstrap 3 — Navbar (горизонтальное меню) 366K

2. Модальное окно Bootstrap для сайта 364K

3. Маска ввода для HTML элемента input 348K

4. Слайдер для сайта на чистом CSS и JavaScript 343K

5. Форма обратной связи для сайта с отправкой на почту 314K

6. CSS медиа-запросы (media queries) 308K

7. Bootstrap — Carousel (карусель) 293K

Последние комментарии

sobolev

24.04.2023, 15:49

Здравствуйте, а как сделать так чтобы после закрытия уведомления оно больше не показывалось для пользователя?

Всплывающие сообщения для сайта на чистом JavaScript

27

Александр Мальцев

24.04.2023, 13:32

Добрый! А что значит выключить? Если нужно отключить, то можно воспользоваться методом dispose().

Слайдер для сайта на чистом CSS и JavaScript

516

Александр Мальцев

22.04.2023, 15:45

Так вам после разархивирования архива в проект нужно установить зависимости. Для этого нужно перейти в папку, где расположен composer.json и в термина…

Пример использования Google Indexing API на PHP

12

Александр Мальцев

21.04.2023, 07:58

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

Модальное окно для сайта на чистом CSS и JavaScript

10

Александр Мальцев

19.04.2023, 11:55

Привет! Поправил ошибки в JavaScript-коде:
let tablinks = document.getElementsByClassName(‘tab_links’);
let tabcontents = d…

Табы (вкладки) для сайта на CSS и JavaScript – 3 способа

67

Александр Мальцев

19.04.2023, 11:34

Добрый день! Что-то конкретно сложно подсказать, тут нужно смотреть, какая-та путаница с путями.

Форма обратной связи для сайта с отправкой на почту

845

Сергей Fortoo

04.04.2023, 23:37

Подумал, зачем ловить клик по ссылке, а почему-бы не ловить событие перезагрузки страницы?
вместо клика по ссылке
$(document).on(‘…

Как сделать прелоадер для сайта и спиннер для кнопки?

59

Александр Мальцев

04.04.2023, 04:00

Добрый день! Если правильно понял задание, то так: https://codepen.io/itchief/pen/abaeXRq

Добавление и удаление DOM-свойств на jQuery

15

Александр Мальцев

03.04.2023, 08:49

Посмотрите что сервер отдаёт. А также какие ошибки имеются в консоли браузера.

Всплывающая форма обратной связи

288

Александр Мальцев

28.03.2023, 15:03

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

Как создать горизонтальное меню с прокруткой для сайта?

23

Опрос

Используете ли Вы при написании фронтенд части сайта или веб-приложения JavaScript фреймворки или библиотеки? Если да, то что именно?

Да, в основном React

Да, в большей степени Vue.js

Да, главным образом jQuery

Да, другой

Пишу код без использования библиотек

Email-рассылка

Не пропустите свежие статьи и уроки, подпишитесь на информационную
рассылку «itchief.ru». Отправка писем на почту раз в неделю!

Подписаться

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

Основы JS

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

Как запустить JavaScript

Если вы решили изучать JavaScript, то вам сначала нужно научиться запускать консоль, где вы будете кодировать. Открыть её можно с помощью сочетания клавиш ctrl+shfit+K или ctrl+shift+L.

Также можете в поисковой строке браузера ввести код, нажать enter, и консоль запустится. Можете воспользоваться блокнотом, сохранённом в HTML-формате. Нужно открыть блокнот, вставить туда код, нажать «Сохранить как», выбрать формат «Все файлы (*.*)» и назвать файл «мойкод.html».

Строки и числа

В основы программирования на JS входят типы данных. Среди самых простых – строки и числа. Числа могут быть любыми и обозначают сами себя: 2, 36, 789 и т.п. Но строки всегда обрамляются в одинарные или двойные кавычки: 

'строка', "строка"

Переменные

Переменными называют контейнеры, внутри которых разработчики могут хранить значения, например, числа и строки. Сначала специалист объявляет переменную, используя ключевое слово var или let, а потом вписывает любое имя, которым хотел бы назвать переменную. Например, let myVariable;. Затем переменной присваивается значение, например var myVariable = ‘Tom’;. 

В написания кода важно не забывать в конце ставить «;». Этот символ покажет, где заканчивается оператор. Его используют, если в одной строке несколько операторов. 

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

При написании сценария JavaScript используются следующие типы переменных:

• string – последовательность текста в виде строки;
• number – числа;
• Boolean – значение правда/ложь;
• array – массив, хранящий значения в одной ссылке;
• object – любой объект, который может хранить переменная.

Операции присваивания

Операция присваивания нужна для того, чтобы переменной присвоить значение. В коде var a = 7; мы присвоили переменной а значение 7. Операций много. Это может быть деление, умножение и другие математические формулы. 

Сложности с операцией присваивания

Зачастую во время обучения начинающие программисты путают присваивание с обычным равенством. Возьмём пример:

var a = 1; a = a + 2;

Если смотреть на вторую строку с точки зрения математики, то это абсурд. Но с точки зрения программирования всё будет верно. В первой строке мы указали, что у переменной а значение 1. Потом мы присвоили ей новое значение, которое равно сумме её старого значения и 2. 

Комментарии

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

/*
Всё, что находится тут - комментарий.
*/

Если в комментарии нет переноса строк, то он выделяется двумя косыми чертами: // Это комментарий. 

Функция alert

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

alert(‘hello!’);

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

Также функция может выводить на экран математические операции. Например, alert(5 — 1); покажет нам в блоке 4.

Математические операции

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

• Сложение, при котором суммируются два числа или склеиваются две строки. Для операции используют символ «+».
• Вычитание, деление и умножение. Эти операции выполняют те же функции, что и в математике. Символы стандартные: «-», «/», «*». 

Например,

alert(2 + 1); //выведет 3
alert(5 — 4); //выведет 1
alert(8 * 3); //выведет 24
alert(6 / 3); //выведет 2

Операции инкремента и декремента

Чтобы овладеть языком java script, нужно разбираться в операциях инкремента и декремента. Первая увеличивает переменную на единицу и записывается следующим образом: a++ или ++а.

Вторая уменьшает переменную на единицу. Её записывают в виде а— или —а. 

var a = 1;
a++; //увеличит a на 1, что соответствует коду a = a + 1;
alert(a); //выведет 2
или
var a = 1;
a—; //уменьшит a на 1, что соответствует коду a = a — 1;
alert(a); //выведет 0

Между ++а и а++ есть разница. Возьмём код alert(++a) и код alert(a++). В первом варианте переменная увеличится на единицу, а потом выведется. Во втором варианте наоборот. 

Операции +=, -=, *=, /=

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

var a = 1;
a = a + 2;

Мы присваиваем переменной а старое значение, которое увеличиваем на 2. Но js позволяет укоротить этот код с помощью оператора +-:

var a = 1; a += 3; //этот код равен коду a = a + 3.

Аналогично работают другие операторы -=, *=, /=, которые записываются следующим образом:

var a = 2;

a -= 3; //этот код равен коду a = a — 3;

var a = 2;

a *= 3; //этот код равен коду a = a * 3;

var a = 2;

a /= 3; //этот код равен коду a = a / 3

Другое

Также во время выполнения кода используются операция Равенства и Неравенства. Первая делает проверку, если видит, что два значения равнозначны, вторая превращает true в false и наоборот. 

Начинающим программистам следует изучить условное ветвление, когда мы выполняем различные действия, которые зависят от условий. Используются символы if, ?. Например

let year = prompt('В каком году была опубликована спецификация ECMAScript-2015?', '');

if (year == 2015) alert( 'Вы правы!' );

В примере ниже используется 2 инструкции – добавляется строка «Вы такой умный»

if (year == 2015) {

alert( «Правильно!» );

alert( «Вы такой умный!» );

}

Чтобы указать, что действие ложно, можно использовать блок else.

let year = prompt(‘В каком году была опубликована спецификация ECMAScript-2015?’, »);

if (year == 2015) {

alert( ‘Да вы знаток!’ );

} else {

alert( ‘А вот и неправильно!’ ); // любое значение, кроме 2015

}

Чтобы проверить несколько вариантов, можно использовать блок else if.

let year = prompt(‘В каком году была опубликована спецификация ECMAScript-2015?’, »);

if (year < 2015) {

alert( ‘Это слишком рано…’ );

} else if (year > 2015) {

alert( ‘Это поздновато’ );

} else {

alert( ‘Верно!’ );

}

Осваиваем JQuery

Для того, чтобы легче и быстрее создавать сайты, программисты используют фреймворки. JQuery – один из популярных для JavaScript. Он отличается от остальных простотой и удобством использования. Библиотека нужна для того, чтобы манипулировать деревом HTML DOM, обрабатывать события, CSS-анимации и Ajax. Для работы с фреймворком понадобятся базовые знания CSS, поскольку именно от них отталкивается его селектор. 

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

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

Чтобы научиться использовать этот инструмент, нужно сначала его скачать с официального сайта. Он бесплатный, и на нём работают более 70% сайтов. Послу установки фреймворк нужно подключить с помощью команды:

<script type="text/JavaScript" src="jquery.min.js"></script>;

Если пользоваться хостингом Google или Яндекс, то подключение будет иное:

<script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»></script> или <script src=»https://yastatic.net/jquery/2.2.0/jquery.min.js»></script>

Покажем, как можно использовать библиотеку jquery для создания сайтов. Для этого её нужно подключить к любому CDN – технологии, ускоряющая доставки контента конечному пользователю. Рассмотрим пример с Google CDN.

1. <script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js»></script> — с помощью этого кода подключаемся к Google CDN версии 3.5.1. Можно выбарть любую другую, и тогда придётся прописать её в коде. 
2. Теперь поменяем цвет фона, пропишем h1 по центру и добавим в конце страницы элемент div с надписью: «Всем привет!». Синтаксис jQuery начинается со знака $.

<!doctype html>

<html lang=»ru»>

<head>

<meta charset=»UTF-8″>

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

<title>Страница, к которой подключен jQuery</title>

<script defer src=»https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js»></script>

</head>

<body>

<h1>Моя страница, к которой подключён jQuery</h1>

<script>

document.addEventListener(‘DOMContentLoaded’, function () {

/* код на jQuery */

// установим body фон #eee

$(‘body’).css(‘background-color’, ‘#eee’);

// выровняем h1 по центру

$(‘h1’).css(‘text-align’, ‘center’);

// добавим в конец страницы элемент div с контентом «Всем привет!»

$(‘body’).append(‘<div style=»text-align: center; font-size: 20px;»>Всем привет!</div>’);

});

</script>

</body>

</html>

Node.js

Node.js – кроссплатформенная среда выполнения для JS, которая используется в серверном программировании. Платформа имеет базу JS, движок V8. Её зачастую используют для создания сайтов.

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

Скачать платформу можно на сайте. Первым приложением для Node.js, которое может создать начинающий программист, будет веб-сервер с кодом:

const http = require(‘http’)

const hostname = ‘127.0.0.1’

const port = 3000

const server = http.createServer((req, res) => {

res.statusCode = 200

res.setHeader(‘Content-Type’, ‘text/plain’)

res.end(‘Hello Sunn’)

})

server.listen(port, hostname, () => {

console.log(`Server running at http://${hostname}:${port}/`)

})

Для запуска этого кода нужно сохранить его в файле server.js, а потом запустить команду: node server.js. Проверить результат работы можно, введя в адресной строке адрес сервера http://127.0.0.1:3000, который мы указали в коде. Если ошибок нет, то на странице появится надпись «Hello Sun».

Для платформы существует множество библиотек. Среди них:

• Express, которая наделена простым, но мощным инструментов для создания сайтов.
• Meteor, позволяющая использовать код на клиенте и сервере. Также библиотека используется в мобильной разработке. 

Angular, React или Vue.js

Для создания интерактивных сайтов используются также три популярных фреймворка – Angular, React или Vue.js. 

Преимущества Angular:

• односторонняя привязка данных, исключающая ошибки;
• автозаполнение шаблона HTML-компонента;
• может работать с Typescript;
• структура подходит для большой масштабируемости проекта;
• подробная документация, которая позволяет программистам самостоятельно разбираться с фреймворком.

Преимущества React:

• реализована концепция функционального программирования;
• односторонняя привязка данных, исключающая побочные эффекты;
• поддерживает Progressive Web App;
• быстро реализует React Virtual DOM;
• подходит для контент-ориентированных приложений благодаря поддержки рендеринга;
• прост в изучении благодаря подробной документации, лёгкому синтаксису. 

Преимущества Vue.js:

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

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

Существуют разные инструменты разработчика, которые упрощают и ускоряют процесс создания сайта:

• Webpack – модульный упаковщик, создающий граф зависимости с модулями; 
• Browserify – помогает программистам пользоваться модулями стиля NodeJS;
• Yeoman – система кодогенерации с более 6 000 плагинов;
• Atom – бесплатный редактор кода;
• Brackets – лёгкий редактор кода, ориентированный на визуальный инструмент;
• JSDoc – инструменты для создания многостраничной текстовой документации;
• Jasmine – фреймворк для тестирования кода JS;
• Protractor – фреймворк для тестирования приложений;
• JavaScript Debugger – инструмент для отладки кода;
• ng-inspector – поможет отладить код на AngularJS;
• Snyk – ищет уязвимости в приложениях;
• RetireJS – проверяет зависимости;
• JSLint – проверяет качество кода на JS.

Ещё важное

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

Поиск ошибок в коде

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

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

Руководства по JavaScript – полезные ссылки

Основы JavaScript покажет самоучитель «Изучаем программирование на JavaScript» от Элизабет Робсон и Эрика Фримена. Авторы познакомят с JS, научат его основам. Читатели смогут написать несколько простых приложений и подготовятся к более серьёзным книгам.

«Типы и грамматические конструкции JS» от Кайла Симпсона. В книге рассматриваются все нюансы работы языка, включая замыкания, прототипы и т.п. Почитать будет полезно новичкам и разработчикам уровня Миддл.

«Как устроен JavaScript» от Дугласа Крокфорда. Книга расскажет об устройстве объектов, принципах ООП, работе генераторах, числах в JS. Автор расскажет о тонкостях языка программирования. 

«Руководство JavaScript» — просто подробный гайд о языке. 

«Учебник по JavaScript» – современный джава скрипт учебник, который научит человека без опыта тонкостям JS. 

Проверка полученных знаний – полезные ссылки

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

• Проверка умения работать с React – придётся создать приложение с несколькими страницами;
• Задачи для новичков в JS;
• Ещё один сборник задач для новичков;
• Кейсы для разработчиков уровня Миддл;
• Тесты, необходимые изучения языков.

Что ещё почитать по теме – полезные ссылки

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

Полезные телеграм-каналы:

• Frontend Info с ссылками на статьи о JS;
• Frontender’s notes – канал с сылками на статьи, вебинары и т.п.;
• Front End World – англоязычный канал о фронтенд-разработке;
• JavaScript Noobs – сообщество начинающих разработчиков JS;
• TheFrontEnd – новости фронтенда, полезные статьи и гайды. 

Список полезных видеоуроков:

• freeCodeCamp расскажет о конструкторах и прототипах;
• Блог Дмитрия Лаврика;
• You-Tube канал об основах JS;
• Плейлист для новичков в разработке;
• 20 видеоуроков, которые расскажут об основах JS.

Список статей, из которых вы подчерпнёте много нового:

• основные концепции JavaScript;
• статья о Webpack;
• канал в ЯД с актуальной информацией о JS;
• справочные материалы для новичков. 

FAQ 

Какие плюсы и минусы работы JavaScript-разработчиком?

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

Где используется язык?

JS используют в разработке веб-приложений, операционных систем, мобильных программ.

Подведём итоги

Если вы хотите изучить JS, то вам нужно:

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

'строка', "строка"

var a = 1;

a = a + 2;

var a = 1;

a = a + 2;

 /*
Всё, что находится тут - комментарий.
*/

alert('hello!');

alert ('hello!');

alert ('hello!');

alert( 'hello!' );

<script>
alert('hello!');
</script>

<script src="/path/to/script.js"></script>

<script src="/path/to/script.js"></script>

let year = prompt('В каком году была опубликована спецификация ECMAScript-2015?', '');

if (year == 2015) alert( 'Вы правы!' );

if (year == 2015) {

alert( "Правильно!" );

alert( "Вы такой умный!" );

}

let year = prompt('В каком году была опубликована спецификация ECMAScript-2015?', '');

if (year == 2015) {

alert( 'Да вы знаток!' );

} else {

alert( 'А вот и неправильно!' ); // любое значение, кроме 2015

}

<script type="text/JavaScript" src="jquery.min.js"></script>;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> или <script src="https://yastatic.net/jquery/2.2.0/jquery.min.js"></script>