JavaScript - язык программирования, уже несколько десятилетий активно применяемый веб-разработчиками для создания сайтов и веб-приложений. JS позволяет сделать статичный сайт на html интерактивным. С его помощью на веб-странице “оживают” иконки, всплывают диалоговые окна, обрабатываются пользовательские данные и происходят другие динамические действия.
Сейчас применение JavaScript не ограничено созданием браузерных приложений. Мультиплатформенная среда Node.js и фреймворк React Native превращают JS в полноценный инструмент для разработки десктопного и мобильного ПО.
Почему Java и JavaScript - не одно и то же
Изначально рассматриваемый нами язык программирования назвался LiveScript. Когда у разработчиков появились планы по объединению LS и самостоятельного языка Java, у проекта появилось новое название - JavaScript. Но объединения так и не случилось, а имя уже прижилось. Фактически же Java и JavaScript разные по структуре и по предназначению языки, хоть оба и являются объектно-ориентированными.
Принцип работы и сферы применения языка
-
Через JavaScript программист сообщает браузеру, как нужно реагировать на то или иное действие пользователя. Например, клик мышкой по стрелке навигации или перевод курсора на кнопку “Купить”. Но это далеко не единственный сценарий использования джава скриптов. JS также может:
-
проверять данные, вводимые пользователем, до отправки на сервер;
-
обрабатывать cookies;
-
оперировать переменными;
-
выводить всплывающие окна;
-
обеспечивать непрерывную связь с сервером посредством технологии AJAX;
-
быстро изменять атрибуты html тегов.
Широкий функционал делает JavaScript универсальным инструментом для фронтенд-разработки. При этом знание JS будет полезно не только программистам. На базовом уровне этот язык стоит освоить интернет-маркетологам, бизнес-аналитикам и владельцем собственных сайтов.
Основные команды
Скрипты JS встраиваются в HTML основу сайта. Для добавления небольшого скрипта прямо внутрь страницы используется парный тег <script>. Объемные модули подключаются из внешних файлов с помощью атрибута src. Пример:
<script src="/path/to/script.js"> </script>.
Если скрипт находится в той же папке, путь можно не указывать.
<script src="script.js"> </script>.
Теперь добавим в скрипты несколько команд.
Alert
Оператор alert() выводит в окне браузера сообщение с заданным текстом и кнопкой ОК.
Запишем в Блокноте следующие строки и сохраним файл в формате html.
<!DOCTYPE HTML>
<html>
<body>
<script>
alert( 'Hello, World!');
</script>
<p> Здесь будет основной текст на странице</p>
</body>
</html>
При открытии файла получим следующий результат.
Обратите внимание на точку с запятой - это стандартный синтаксис разделения строки в JS.
Confirm
Команда Confirm используется для подтверждения действия на странице. В отличие от метода alert, к прописанному сообщению добавляется не только кнопка ОК, но и Отмена. Исходя из выбранной пользователем опции, на сервер уходит сообщение true или false. После этого выполняются дальнейшие инструкции. Пример простого вывода:
<!DOCTYPE HTML>
<html>
<body>
<script>
confirm( 'Разрешите нам присылать вам уведомления');
</script>
</body>
</html>
Так сообщение отобразится в браузере.
Prompt
Базовый оператор ввода данных. При запуске команды prompt() пользователю показывается окно с полем для написания текста, а также две кнопки - “ОК” и “Отмена”. Поле может быть предварительно заполнено примером, но не обязательно.
Переданные пользователем данные отправляются на сервер и используются при обработке других скриптов.
Пример:
<!DOCTYPE HTML>
<html>
<script>
prompt("Как вас зовут?", "Введите имя");
</script>
</html>
Результат в браузере:
Объявление переменных
Переменные - основа любого языка программирования. В JavaScript работа с ними идет достаточно запутанным для новичка способом, поэтому поясним базовую логику кратко.
Раньше в JS переменные всегда объявлялись через оператор var. Например, мы можем ввести в оборот переменную икс и задать ей значение 1 через команду var x = 1. В рамках конкретной области (функции, блока) x будет считываться как единица. Но в таком подходе кроется проблема. В объемных программах разработчик может не заметить, что несколько переменных называются одинаково в объединенном участке кода. Либо переменным намеренно нужно присвоить одинаковое имя. При смене значения x в одном месте, p оно сменится и в других.
В 2016 году, для исключения потенциальных ошибок, в спецификацию новой версии JavaScript был добавлен оператор let. При его применении переменную нельзя переобъявить в рамках одного блока или функции.
Разберемся на примерах.
var greeter = "Hello new user";
var times = 2;
if (times > 1) {
var greeter = "Hi Friend";
}
console.log(greeter);
Здесь значение приветственной переменной greater меняется исходя из значений переменной times. При time равном единице оператор console.log(greeter) выведет на экран надпись Hello new user, а в любом другом случае - Hi Friend.
Но если бы мы не хотели, чтобы функция if влияла на ранее заданную переменную, мы бы использовали команду let, как здесь:
let greeting = "Hi Friend";
if (true) {
let greeting = "Welcome back";
console.log(greeting);
}
console.log(greeting);
В этом случае первая фраза будет выводиться всегда, а вторая - при выполнении условия проверки.
Это самый простой случай, который, в теории, можно решить и без использования оператора let. Но представьте, что на сайт добавляются десятки различных скриптов на JS. Одна ошибка в преемственности переменных может нарушить всю логику работы.
Инструменты для разработки
Чаще всего код на JS пишется не с нуля, а с использованием готовых фреймворков. Разберем самые распространенные в 2022 году варианты.
Vue.js
В первую очередь этот фреймворк используется во фронтенде. Пожалуй, главные его “фишки” - настраиваемые переходы и прогрессивная анимация интерфейсов. На Vue можно сделать действительно красивые и запоминающиеся сайты и приложения. Еще один плюс платформы - простота интеграции с уже готовыми решениями. Важное преимущество Vue.js непосредственно для разработчиков - это удобная командная строка (CLI).
React.js
Фреймворк, основанный на компонентном принципе. Каждая часть страницы на React представляет собой определенный блок - то есть компонент, пригодный для многократного использования. За счет такого подхода React.js незаменим при верстке обширных, детализированных UI интерфейсов на многостраничных сайтах и приложениях. Вторая особенность рассматриваемого фреймворка - использование технологии JSX, или JavaScript XML. Если говорить упрощенно, JSX позволяет быстро объединять HTML и Java скрипты, встраивая их друг в друга.
Angular
Фреймворк от компании Google. Основан на TypeScript - усовершенствованном JavaScript, поддерживающим статическую типизацию. Как и React, работает с компонентами. В Angular хорошо реализован механизм взаимозависимости для модулей, компонентов и функций, что помогает поддерживать согласованность кода и избегать логических ошибок. Фреймворк хорошо подходит для создания масштабных корпоративных приложений.
Svelte
За счет особенностей компиляции кода разработка на Svelte происходит заметно быстрее, чем на других фреймворках. Разработчики также ценят Svelte за компактный синтаксис. Код на этой платформе требует меньше строк в сравнении с другими средствами разработки.
Aurelia
Фреймворк полностью соответствует действующим стандартам ECMAScript, поэтому легко интегрируется с большинством JS библиотек. Еще одна особенность Aurelia - оптимизированная работа с памятью.
Ember.js
Этот инструмент полезен в первую очередь своей функциональной командной строкой. С ее помощью можно проводить тестирование кода, быстро перестраивать компоненты, работать с внутренними данными. Кроме того, фреймворк позволяет настраивать безопасную аутентификацию приложений.
Backbone.js
Обширная JS библиотека, содержащая большое количество рабочих инструментов с максимально оптимизированным кодом. Приложения на Backbone получаются производительными и полностью кроссплатформенными.
Преимущества языка
-
Универсальность.
JavaScript поддерживается всеми современными браузерами. В связке с html, CSS и SQL этот язык представляет полный спектр возможностей для frontend и backend разработки.
-
Логичность и рациональность.
На JS большинство задач решается быстро и всего за несколько строчек кода, без бесконечного мусора и “костылей”.
-
Скорость работы.
Код на JavaScript частично обрабатывается на стороне клиента, а не сервера. Это значительно ускоряет скорость загрузки страниц.
-
Доступные готовые решения.
Сейчас для JS разработаны сотни фреймворков и модулей для решения типовых задач. Это удешевляет и ускоряет разработку сайтов и веб-платформ.
-
Функциональность.
JavaScript подходит для решения самых разных задач - от мелких внешних “украшательств” до оптимизации связи клиента с сервером.
Но есть у языка и ряд ограничений.
-
Работа с вкладками.
JS действует только в рамках текущей страницы. Взаимодействие с другими вкладками ограничено для обеспечения безопасности.
-
Загрузка файлов.
Работать с файлами в браузере напрямую через JavaScript не получится. Правда, в платформе Node.js есть “обходные пути” для чтения и записи сторонних объектов, что сглаживает недостаток.
Заключение
С помощью JavaScript статичные сайты становятся интерактивными. Но это не единственная функция JS. По факту JavaScript обладает всеми возможностями объектно-ориентированного языка. Он применяется не только во фронтенд, но и в бэкенд разработке. Специальные платформы, такие как Node.js, позволяют создавать на JavaScript как браузерные, так и мобильные и десктоп приложения.
