JavaScript с нуля до pro – наш самоучитель по первым шагам

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

Вы узнаете, как выучить 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 Sun\n')

})

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;
• справочные материалы для новичков. 

Курс «Fullstack-разработчик на Python» от Нетология

Курс «Fullstack-разработчик на PHP и JavaScript» от Skillfactory

Курс «Инженер по тестированию» от Skillbox

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>