Что такое JavaScript

Содержание:

• Обо всем понемногу
• Почему популярен 
• Синтаксис и примеры кода
• Среда выполнения и инструменты разработки
• Как используют JavaScript в современной разработке
• Будущее JavaScript 
• С чего начать изучение. Полезные ресурсы от редакции Skillbox.kz

Обо всем понемногу 

Что за он

JavaScript — это язык программирования, на котором написаны PayPal, Yahoo!, Netflix, Google Maps. Этот список можно продолжать бесконечно.

Как появился 

JavaScript используется для создания сайтов и веб-приложений. Его разработал Брендан Айк в 1996 году. 

Компаниям нужно было продавать через интернет. Поэтому нужны были интерактивные сайты. С их превращением из информационных страниц в веб-приложения справился ДжаваСкрипт. 

На JavaScript держится весь онлайн-банкинг, социальные сети и e-commerce. Из-за того, что без него вряд ли получится создать сайт сложнее лендинга, на hh.kz открыто около 350 вакансий по специальности JS-разработчик. А по индексу TOIBE язык занимает 6 место.

Индекс TIOBE — индекс, который оценивает популярность языков программирования через подсчет результатов поисковых запросов. Для формирования индекса используются запросы на самых популярных порталах: Google, Blogger, Wikipedia, YouTube, Baidu, Yahoo!, Bing, Amazon.

Почему популярен

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

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

Плюсы языка

• Гибкость. JavaScript поддерживает разные стили: объектно-ориентированный, где используются объекты и весь код рассматривается как их набор. Функциональный, в котором используют функции как основа кода. 
• Динамическая типизация. В JavaScript она помогает переменным изменять свой тип данных в процессе выполнения программы, что делает код более гибким и динамичным. Например, вы можете принять от пользователя число в строковом типе данных, а затем преобразовать его в численный для того, чтобы использовать в расчетах. С другой стороны, это повышает ответственность разработчика за контроль типов, поскольку возможны баги. 
• Поддержка обработки событий. Делает JavaScript инструментом для создания интерактивных веб-страниц. Реакция на действия пользователя, например на клики или нажатия клавиш, реализуется через прослушивание и обработку соответствующих событий. 
• Оптимизация. Страницы, которые используют JavaScript, могут выполнять сложную обработку данных непосредственно в браузере пользователя. Так, сокращается нагрузка на сервер и ускоряется отклик приложения. 
• Работа с Backend. В основном JavaScript используют для Frontend-разработки — визуальной части сайта, но он также находит применение и на стороне сервера.
• Многофункциональность. JavaScript подкрепляется обширной библиотекой фреймворков, среди которых React, Angular, Vue.js и другие. Они упрощают разработку сложных приложений и пользовательских интерфейсов.

Синтаксис и примеры кода

В программировании практически все завязано на переменных. Это ячейки памяти компьютера, в которые можно записать информацию. Название переменной дает программист.

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

Таким образом можно объявить переменную с именем «x»:

let x;

Переменным можно присваивать значения сразу при их объявлении:

let y = 10;

JavaScript поддерживает разные типы данных, включая числа, строки, логические значения и другие. Например:

let name = «Ivan»;

let age = 20;

let ITshnik = true;

Чтобы вывести строку, значение переменной или число используется console.log();

Условные операторы позволяют управлять ходом выполнения программы. Например, если пользователь ввел «‎4»‎, то ответ на вопрос «Сколько будет 2+2?‎» будет «‎Верно!»‎. Если выводится что-то другое, то ответ получится «‎Неверно»‎. 

Часто используемыми условными операторами в языках программирования считаются операторы условия «if-else»:

let hour = new Date().getHours();

if (hour < 12) {

 console.log(«Доброе утро!»);

} else {

 console.log(«Добрый день!»);

}

Циклы помогают выполнять определенный блок кода многократно. Например, цикл «for» используется для выполнения действий нужное количество раз:

for (let  i = 0; i < 5; i++) {

 console.log(i);

}

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

function sum(a, b) {

 return a + b;

}

let result = sum(2, 3);

console.log(result); 

Свойства объекта представлены парой «ключ-значение», а методы — функциями, связанными с объектом. 

let person = {

 name: «Ivan»,

 age: 20,

 sayHello: function() {

   console.log(«Привет, меня зовут » + this.name + «!»);

 }

};

console.log(person.name); // Вывод: Ivan

person.sayHello(); // Вывод: Привет, меня зовут Ivan!

Среда выполнения и инструменты разработки

Node.js — это кроссплатформенная среда для выполнения кода на ДжаваСкрипт вне браузера. Ее используют для создания серверных приложений, доступа к файловой системе и обработки HTTP-запросов.

На серверной стороне популярен Express — фреймворк для Node.js, который упрощает процесс разработки веб-приложений и API. Он предоставляет инструменты для маршрутизации запросов, обработки ошибок и интеграции с базами данных.

Браузеры представляют собой другую среду выполнения кода. В каждом современном браузере есть движок JS. Такие возможности как динамическое изменение контента страницы, взаимодействие с API браузера и манипуляция DOM-деревом доступны там.

Для этой среды выполнения также существуют инструменты для разработки на ДжаваСкрипт. Рассмотрим на примере Google Chrome:

• Elements — обзор элементов веб-страницы. Эта функция дает возможность вносить изменения в код сайтов на ходу.
• Network — предоставляет HTTP-запросы и ответы веб-страницы. Используется для оптимизации сайтов.
• Console — обеспечивает интерактивную среду для исполнения JavaScript-кода на текущей странице. С помощью инструмента разработчики тестируют код в реальном времени, просматривают логи ошибок и сообщений.
• Sources — открывает доступ к исходному коду JavaScript. Здесь можно устанавливать точки останова — места, где код прекращает выполняться. Программист может просматривать и изменять состояние переменных. Это упрощает процесс отладки кода.
• Performance — анализирует производительность веб-приложения, отслеживая выполнение JavaScript-кода, затраты ресурсов на рендеринг и анимацию. 
• Application — предоставляет доступ к информации о хранилищах данных веб-браузера и фоновых сервисах. Этот инструмент управляет данными, которые сохранены на стороне клиента: куки, кэш и локальное хранилище.
• Sensors — имитирует различные данные сенсоров. Например, геолокацию или ориентацию устройства. Инструмент применяют для разработки приложений, которые используют данные о местоположении и движении.

VS Code — редактор исходного кода, который закрепился в арсенале многих JS-программистов. Среди преимуществ Visual Studio Code выделяют:

• Плагины помогают расширить функционал и настроить редактор под себя. 
• Интеллектуальная система IntelliSense удобно подсвечивает синтаксис и автоматически дополняет код, адаптируясь под типы переменных, вызовы функций, методы и импортированные модули.
• Встроенный в интерфейсе редактор позволяет не использовать внешние программы для отладки кода.
• Интеграция с Git и другими системами контроля версий оптимизирует процесс работы с изменениями кода, упрощая версионирование и совместную работу над проектами.

Фреймворки и библиотеки улучшают разработку и сокращают время на реализацию повторяющихся задач. Самые известные из них: React, Angular и Vue. Они облегчают создание интерфейсов, реализацию сложных пользовательских взаимодействий и управление состоянием приложения.

Тестирование и отладка кода — тоже часть разработки. Для этих целей в JavaScript используются два основных инструмента: 

• Jest — для юнит-тестирования, то есть тестирования отдельных частей кода;
• Mocha — для автоматического тестирования приложений.

Как используют JavaScript в современной разработке

• Интерактивные элементы JavaScript «оживляют» сайты и приложения. С помощью языка программирования создают пользовательский интерфейс, который мгновенно реагирует на действия пользователя. Отправка форм без перезагрузки страницы, интерактивные слайды и галереи, быстрое отображение пользовательских данных — это возможно благодаря JavaScript.
• Разработка мобильных приложений с помощью React Native. Фреймворк для JavaScript помогает разработчикам строить нативные мобильные приложения для iOS и Android.
• Написание серверных приложений с Node.js. Фреймворк помогает создавать масштабируемые серверные приложения. К ним относятся веб-серверы, API, чаты и даже комплексные программные решения, которые нужны для работы современного интернета.
• Разработка игр. С помощью специализированных библиотек и фреймворков для JavaScript создают 2D-платформеры и сложные 3D-игры, которые работают в браузере. Так, игрокам не нужно их скачивать. Вот, например, платформер, который написан на JavaScript.

Платформер. Обязательно попробуйте. Редакция Skillbox.kz застряла и не поняла, как летать…

Будущее JavaScript 

По опросу Stack Overflow JavaScript до сих пор популярный язык программирования. 

Каждый день появляются новые фреймворки. Но от старых тоже никто не отказывается. Три кита JS в виде React, Angular и Vue все еще остаются популярными и востребованными. 

JavaScript соответствует стандарту ECMAScript. ECMAScript — это такой стандарт, который используется для построения скриптовых языков программирования, таких как JavaScript. Значит, стандарт подтверждает, что JS постоянно обновляется и совершенствуется. Например, в 2023 году ECMAScript добавил в JavaScript новые методы для работы с массивами. 

Также из-за популярности языку посвящены форумы, сообщества в соцсетях и чаты. Там новичок может спросить совет у опытного разработчика.

С чего начать изучение. Полезные ресурсы от редакции Skillbox.kz

Новички быстро усваивают язык, благодаря простоте и возможности быстро находить ошибки. Для начала работы с JavaScript необходимо базово изучить HTML и CSS. Понимание языка гипертекстовой разметки и языка стилей открывает доступ к библиотекам и фреймворкам: 

• React;
• jQuery;
• Angular;
• Lodash;
• Node.js;
• Vue.js и другие.

Редакция Skillbox.kz собрала материалы, которые помогут на старте изучения.

Литература:

• «JavaScript. Подробное руководство» — Дэвид Флэнаган;
• «Разработка на JavaScript. Построение кроссплатформенных приложений с помощью GraphQL, React, React Native и Electron» — Скотт Адам
• «JavaScript с нуля» — Чиннатхамби Кирупа. 

Telegram-каналы и чаты:

• Задачи по Frontend — канал с задачками для frontend-разработчиков;
• FrontEnd Books — канал с книгами по JavaScript и Frontend.