Основы объектов в JavaScript
В этой статье мы рассмотрим объекты в JavaScript. Мы будем разбирать основы синтаксиса объектов JavaScript и заново изучим некоторые возможности JavaScript, которые мы уже исследовали ранее на курсе, подтвердив тот факт, что большая часть функциональности, с которой мы уже столкнулись, в действительности является объектами.
| Необходимые знания: | Элементарная компьютерная грамотность, базовое понимание HTML и CSS, знакомство с основами JavaScript (см. Первые шаги и Структурные элементы). |
|---|---|
| Цель: | Понимать основу теории перед началом объектно-ориентированного программирования, как это связано с JavaScript («большинство сущностей являются объектами»), и как начать работу с объектами JavaScript. |
Основы объектов
Объект — это совокупность связанных данных и/или функциональных возможностей. Обычно состоят из нескольких переменных и функций, которые называются свойства и методы, если они находятся внутри объектов. Разберём пример, чтобы показать, как они выглядят.
Как и во многих случаях в JavaScript, создание объекта часто начинается с определения и инициализации переменной. Попробуйте ввести следующий код JavaScript в ваш файл, а затем сохраните файл и обновите страницу браузера:
const person = >;
Если вы введёте person в текстовое JS консоль и нажмёте клавишу Enter, должен получиться следующий результат:
Поздравляем, вы только что создали ваш первый объект. Но это пустой объект, поэтому мы не можем с ним ничего сделать. Давайте обновим наш объект, чтобы он выглядел так:
const person = name: ["Bob", "Smith"], age: 32, gender: "male", interests: ["music", "skiing"], bio: function () alert( this.name[0] + " " + this.name[1] + " is " + this.age + " years old. He likes " + this.interests[0] + " and " + this.interests[1] + ".", ); >, greeting: function () alert("Hi! I'm " + this.name[0] + "."); >, >;
После сохранения и обновления, попробуйте ввести что-нибудь следующее в консоль JavaScript браузера:
.name; person.name[0]; person.age; person.interests[1]; person.bio(); person.greeting();
Как видите, наш объект содержит некоторые данные, а также несколько методов. У нас же с помощью простого синтаксиса есть доступ к ним.
Примечание: Если у вас возникли проблемы с применением файла в работе, попробуйте сравнить ваш код с нашей версией — см. oojs-finished.html (также see it running live). Одна из распространённых ошибок, когда вы начинаете с объектами ставить запятую в конце последнего члена — это приводит к ошибке.
Итак что здесь происходит? Объект состоит из нескольких элементов, каждый из которых имеет своё название (пример name и age выше), и значение (пример [‘Bob’, ‘Smith’] и 32 ). Каждая пара название/значение должны быть разделены запятой, а название и значение в каждом случае разделяются двоеточием. Синтаксис всегда следует этому образцу:
const objectName = member1Name: member1Value, member2Name: member2Value, member3Name: member3Value, >;
Значение члена объекта может быть чем угодно — в нашем объекте person есть строка, число, два массива, и две функции. Первые четыре элемента это элементы данных, относящиеся к свойствам объекта. Последние два элемента являются функциями, которые позволяют объекту что-то сделать с элементами данных, и называются методами объекта.
Такие объекты называются литералами объекта (object literal) — мы буквально вписали все содержимое объекта для его создания. Этот способ сильно отличается от объектов реализованных классами, которые мы рассмотрим позже.
Очень часто для создания объекта используется литерал объекта когда вам нужно каким-то образом перенести ряд структурированных, связанных элементов данных, например, отправляя запрос на сервер, для размещения их в базе данных. Отправка одного объекта намного эффективнее, чем отправка нескольких элементов по отдельности, и с ним легче работать чем с массивом, если требуется идентифицировать отдельные элементы по имени.
Точечная запись (Dot notation)
Выше вы получили доступ к свойствам и методам используя точечную запись (dot notation). Имя объекта (person) действует как пространство имён (namespace) — оно должно быть введено первым, для того чтобы получить доступ ко всему что заключено (encapsulated) внутри объекта. Далее вы пишете точку, затем элемент, к которому хотите получить доступ — это может быть имя простого свойства, элемент массива, или вызов одного из методов объекта, например:
.age; person.interests[1]; person.bio();
Внутренние пространства имён (Sub-namespaces)
Можно даже сделать значением элемента объекта другой объект. Например, попробуйте изменить значение свойства name с такого
name: ['Bob', 'Smith'],
name : first: 'Bob', last: 'Smith' >,
Здесь мы фактически создаём внутреннее пространство имён (sub-namespace). Это звучит сложно, но на самом деле это не так — для доступа к этим элементам вам нужно сделать один дополнительный шаг с ещё одной точкой. Попробуйте в консоли браузера следующее:
.name.first; person.name.last;
Важно: На этом этапе вам также нужно будет пересмотреть код метода и изменить все экземпляры с
[0]; name[1];
.first; name.last;
Иначе ваши методы больше не будут работать.
Скобочная запись (Bracket notation)
Существует другой способ получить свойства объекта — использовать скобочную запись (bracket notation). Вместо написания этого кода:
.age; person.name.first;
Вы можете использовать следующий
["age"]; person["name"]["first"];
Это выглядит очень похоже на то, как вы получаете элементы массива, и в принципе это так и есть — вместо использования числовых индексов для выбора элемента, вы ассоциируете имя свойства для каждого значения. Ничего удивительного, что эти объекты иногда называют ассоциативными массивами — они сопоставляют строки со значениями так же, как массивы сопоставляют числовые индексы со значениями.
Запись элементов в объект
До сих пор мы рассматривали только возврат (или получение) элементов объекта — вы так же можете установить (обновить) значение элемента объекта просто объявив элемент, который вы хотите установить (используя точечную или скобочную запись), например:
.age = 45; person["name"]["last"] = "Cratchit";
Попробуйте ввести эти строки, а затем снова верните элементы, чтобы увидеть, как они изменились
.age; person["name"]["last"];
Вы можете не просто обновлять и устанавливать значения свойств и методов объекта, а так же устанавливать совершенно новые элементы. Попробуйте их в консоли JS:
["eyes"] = "hazel"; person.farewell = function () alert("Bye everybody!"); >;
Теперь вы можете проверить ваши новые элементы:
["eyes"]; person.farewell();
Одним из полезных аспектов скобочной записи является то, что с её помощью можно динамически задавать не только значения элементов, но и их имена. Предположим, что мы хотим, чтобы пользователи могли хранить пользовательские типы данных, введя имя и значение элемента в два следующих поля? Мы могли бы получить эти значения следующим образом:
let myDataName = nameInput.value; let myDataValue = nameValue.value;
Затем мы можем добавить имя и значение этого нового элемента в объект person таким образом:
[myDataName] = myDataValue;
Чтобы проверить это, попробуйте добавить следующие строки в свой код, после закрывающей скобки объекта person :
let myDataName = "height"; let myDataValue = "1.75m"; person[myDataName] = myDataValue;
Теперь попробуйте сохранить и обновить, затем введите следующее в консоль браузера:
.height;
Добавление свойства объекта с использованием вышеописанного метода невозможно с использованием точечной записи, которая может принимать только литеральное имя элемента, а не значение переменной указывающее на имя.
Что такое «this»?
Возможно, вы заметили что-то странное в наших методах. Посмотрите на этот пример:
greeting: function() alert('Hi! I\'m ' + this.name.first + '.'); >
Вы, вероятно, задаётесь вопросом, что такое «this»? Ключевое слово this , ссылается на текущий объект, внутри которого пишется код — поэтому в нашем случае this равен объекту person . Но почему просто не написать person ? Как вы увидите в статье Object-oriented JavaScript for beginners (Объектно-ориентированный JavaScript для начинающих), когда мы начинаем создавать конструкторы и т.д., this очень полезен — он всегда будет гарантировать, что используется верное значение, когда контекст элемента изменяется (например, два разных экземпляра объекта person могут иметь разные имена, но захотят использовать своё собственное имя при приветствии.
Давайте проиллюстрируем, что мы имеем в виду, с упрощённой парой объектов person :
const person1 = name: "Chris", greeting: function () alert("Hi! I'm " + this.name + "."); >, >; const person2 = name: "Brian", greeting: function () alert("Hi! I'm " + this.name + "."); >, >;
В этом случае, person1.greeting() выведет «Hi! I’m Chris.». person2.greeting() , с другой стороны, выведет «Hi! I’m Brian.», хотя код метода одинаковый в обоих случаях. Как мы сказали ранее, this равен объекту, внутри которого находится код — это не очень полезно, когда вы пишите литералы объектов вручную, но оно действительно помогает, когда вы генерируете объекты динамически (например используя конструкторы). Это станет понятнее чуть позже.
Все это время вы использовали объекты
Пока вы проходили эти примеры, вы вероятно заметили, что точечная запись, которую вы использовали, выглядит очень знакомо. Это потому, что вы использовали её на протяжении всего курса! Каждый раз, когда мы работаем над примером, использующим встроенный API браузера или объект JavaScript, мы использовали объекты, потому что такие функции построены с использованием тех же структур объектов, которые мы здесь рассматривали, хотя и более сложные, чем наши собственные пользовательские примеры.
Поэтому, когда вы использовали строковые методы, такие как:
.split(",");
Вы использовали метод доступный в экземпляре класса String . Каждый раз создавая строку в вашем коде, эта строка автоматически создаётся как экземпляр String , и поэтому имеет несколько общих методов/свойств, доступных на нем.
Когда вы обращались к объектной модели документа (DOM), используя следующие строки:
const myDiv = document.createElement("div"); const myVideo = document.querySelector("video");
Вы использовали методы доступные в экземпляре класса Document . Для каждой загруженной веб-страницы создаётся экземпляр Document , называемый document , который представляет всю структуру страницы, её содержимое и другие функции, такие как URL-адрес. Опять же, это означает, что он имеет несколько общих методов/свойств, доступных на нем.
То же самое относится и к любому другому встроенному объекту/API, который вы использовали — Array , Math , и т. д.
Обратите внимание, что встроенные объекты/API не всегда создают экземпляры объектов автоматически. Как пример, Notifications API — который позволяет новым браузерам запускать системные уведомления, требует, чтобы вы создавали новый экземпляр объекта с помощью конструктора для каждого уведомления, которое вы хотите запустить. Попробуйте ввести следующее в консоль JavaScript:
const myNotification = new Notification("Hello!");
Опять же, мы рассмотрим конструкторы в следующей статье.
Примечание: Полезно подумать о том, как объекты взаимодействуют посредством передачи сообщений — когда объекту требуется другой объект для выполнения какого-либо действия, он часто отправляет сообщение другому объекту через один из его методов и ждёт ответа, который мы знаем как возвращаемое (return) значение.
Резюме
Поздравляем, вы достигли конца нашей первой статьи о объектах JS, теперь у вас должно быть хорошее представление о том, как работать с объектами в JavaScript — в том числе создавать свои собственные простые объекты. Вы также должны понимать, что объекты очень полезны в качестве структур для хранения связанных данных и функциональности — если бы мы пытались отслеживать все свойства и методы в нашем объекте person как отдельные переменные и функции, это было неэффективно, и мы бы рисковали столкнуться с другими переменными и функциями с такими же именами. Объекты позволяют нам безопасно хранить информацию в своём собственном блоке, вне опасности.
В следующей статье мы начнём рассматривать теорию объектно-ориентированного программирования (ООП) и как эти техники могут быть использованы в JavaScript
В этом модуле
- Основы объекта
- Объектно-ориентированный JavaScript для начинающих
- Прототипы объектов
- Наследование в JavaScript
- Работа с данными JSON
- Практика построения объектов
- Добавление функций в нашу демонстрацию прыгающих шаров
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Что такое Webpack?
Webpack — это инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл. Webpack также известен как сборщик модулей.
При большом количестве файлов он создает один объемный файл (или несколько файлов) для запуска вашего приложения.
Он также способен выполнять множество иных операций:
- помогает собрать воедино ваши ресурсы
- следит за изменениями и повторно выполняет задачи
- может выполнить транспиляцию JavaScript следующего поколения до более старого стандарта JavaScript (ES5) с помощью Babel, что позволит использовать новейшие функции JavaScript, не беспокоясь о том, поддерживает их браузер или нет
- может выполнить транспиляцию CoffeeScript в JavaScript
- может конвертировать встроенные изображения в data:URI
- позволяет использовать require() для CSS файлов
- может запустить webpack-dev-server (в нём встроен локальный сервер и livereload (“живая перезагрузка браузера”))
- может работать с Hot Module Replacement (замена горячего модуля)
- может разделить выходной файл (output file) на несколько файлов, чтобы избежать медленной загрузки страницы из-за большого размера JS-файла
- может выполнить Tree Shaking
Webpack не ограничивается одним лишь фронтендом, его также успешно применяют в бэкенд разработке на Node.js.
У Webpack есть предшественники, у которых он перенял многие идеи. Основное различие заключается в том, что те инструменты известны как task runners (такс-раннеры), в то время как Webpack ничто иное, как сборщик модулей.
Webpack — это более целенаправленный инструмент. Вам достаточно указать точку входа в ваше приложение (это может быть даже HTML-файл с тегами ), а webpack проанализирует файлы и объединит их в один выходной JavaScript-файл, содержащий все необходимое для запуска приложения.
Установка Webpack
Webpack может быть установлен глобально или локально для каждого проекта.
Глобальная установка
Глобальная установка с помощью Yarn:
yarn global add webpack webpack-cli
npm i -g webpack webpack-cli
Теперь мы можем запустить webpack:
webpack-cli
Локальная установка
Это рекомендуемый способ установки, поскольку Webpack может обновляться каждый проект и у вас возникнет меньше проблем при использовании последних функций для одного небольшого проекта, нежели постоянное обновление всех проектов, в которых используется Webpack.
Установка с помощью Yarn:
yarn add webpack webpack-cli -D
npm i webpack webpack-cli --save-dev
После этого добавьте эти строчки в свой package.json файл:
<
//.
"scripts": <
"build": "webpack"
>
>
Как только все будет сделано, вы можете запустить Webpack, набрав:
yarn build
в корневом каталоге проекта.
Настройка Webpack
По умолчанию, Webpack (начиная с 4-й версии) не требует никакой настройки, если вы соблюдаете эти правила:
- точкой входа вашего приложения является ./src/index.js
- вывод (output) размещается в ./dist/main.js
- Webpack работает в production mode (режим производства)
Конечно, если понадобится, вы сможете настроить каждую мельчайшую деталь в Webpack. Конфигурационный файл Webpack — webpack.config.js хранится в корневой директории проекта.
Точка входа
По умолчанию, точкой входа является ./src/index.js . Нижеприведенный пример использует файл ./index.js в качестве входной точки.
module.exports = /*. */
entry: './index.js'
/*. */
>
Вывод (output)
По умолчанию, вывод размещается в ./dist/main.js . В нижеприведенном примере, результат работы в Webpack генерируется в файле app.js :
module.exports = /*. */
output: path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
>
/*. */
>
С помощью Webpack можно использовать оператор import или require в своем JavaScript коде для того, чтобы подключать файлы любого типа (например, CSS).
В Webpack загрузчики являются аналогами задач (tasks) в Grunt и Gulp. Они принимают содержимое файлов, а затем преобразуют его необходимым образом и включают результат преобразования в общую сборку. Например, они могут компилировать TypeScript, загружать компоненты Vue.js и многое другое.
Например, в своем коде вы можете использовать:
import 'style.css'
указав конфигурацию данного загрузчика в файле webpack.config.js :
module.exports = /*. */
module: rules: [
< test: /\.css$/, use: 'css-loader' >,
>]
>
/*. */
>
Регулярное выражение применяет данный загрузчик только к CSS файлам.
У загрузчика есть параметры:
module.exports = /*. */
module: rules: [
test: /\.css$/,
use: [
loader: 'css-loader',
options: modules: true
>
>
]
>
]
>
/*. */
>
Для одной и той же задачи может потребоваться несколько загрузчиков:
module.exports = /*. */
module: rules: [
test: /\.css$/,
use:
[
'style-loader',
'css-loader',
]
>
]
>
/*. */
>
В этом примере css-loader интерпретирует директиву import ‘style.css’ в CSS. Затем style-loader внедряет этот CSS в DOM, используя тег .
Порядок выполнения перевернут (последнее выполняется первым).
Так сколько всего существует загрузчиков? Очень много! Здесь вы сможете найти полный список.
Самым часто используемым загрузчиком является Babel — он используется для транспиляции современного JavaScript в ES5:
module.exports = /*. */
module: rules: [
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: loader: 'babel-loader',
options: presets: ['@babel/preset-env']
>
>
>
]
>
/*. */
>
Данный пример заставляет Babel предварительно обрабатывать все наши React/JSX файлы:
module.exports = /*. */
module: rules: [
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
>
]
>,
resolve: extensions: [
'.js',
'.jsx'
]
>
/*. */
>
Здесь вы можете увидеть параметры babel-loader .
Плагины
Плагины — это почти то же самое, что и загрузчики, но под стероидами. Они могут сделать то, что не могут загрузчики. Ко всему прочему, Webpack построен на системе плагинов, которые вы используете в своем файле конфигурации.
Рассмотрим следующий пример:
module.exports = /*. */
plugins: [
new HTMLWebpackPlugin()
]
/*. */
>
Плагин HTMLWebpackPlugin автоматически создает HTML-файл с уже подключенным скриптом.
Здесь доступно множество плагинов.
Еще один полезный плагин, CleanWebpackPlugin , мы можем использовать перед перегенерацией файлов, чтобы очистить нашу папку dist/ и получить аккуратный файл с конфигурацией.
module.exports = /*. */
plugins: [
new CleanWebpackPlugin(['dist']),
]
/*. */
>
Режимы Webpack
Данные режимы (появившиеся в 4-й версии Webpack) настраивают среду, в которой будет работать Webpack. Режим может быть настроен на development или production (по умолчанию стоит production ).
module.exports = entry: './index.js',
mode: 'development',
output: path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
>
>
- менее оптимизирован, чем production
- работает быстрее
- не удаляет комментарии
- предоставляет более подробные сообщения об ошибках и способы их решения
- сильно облегчает отладку
Режим production работает медленнее, чем development , так как ему нужно создать более оптимизированный бандл. Полученный JavaScript файл меньше по размеру, поскольку многое из режима development в нем отсутствует.
Я написал небольшое приложение, которое выводит содержимое console.log .
Вот бандл production :
Вот бандл development :
Запуск Webpack
Если Webpack установлен глобально, его можно вручную запустить из командной строки. Но, обычно, вы прописываете скрипт внутри файла package.json , который затем запускаете через npm или yarn .
Например, эти package.json скрипты, которые мы использовали ранее:
"scripts": "build": "webpack"
>
позволяют запускать webpack , набрав:
npm run build
yarn run build
yarn build
Просмотр изменений
Webpack может автоматически перестраивать бандл, когда в вашем приложении происходят изменения. Для этого добавьте данный скрипт:
"scripts": "watch": "webpack --watch"
>
и запустите данную функцию:
npm run watch
yarn run watch
yarn watch
Одной из приятных особенностей watch mode (режима просмотра) является то, что бандл изменяется только в том случае, если в сборке нет ошибок. Если ошибки присутствуют, watch продолжит следить за изменениями и будет пытаться перестраивать бандл, но текущий, рабочий бандл не зависит от проблемных бандлов.
Обработка изображений
С помощью Webpack можно очень удобно работать с изображениями, используя загрузчик file-loader .
Эта простая конфигурация:
module.exports = /*. */
module: rules: [
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
>
]
>
/*. */
>
Позволяет импортировать изображения в ваш JavaScript:
import Icon from './icon.png'const img = new Image()
img.src = Icon
element.appendChild(img)
Где img — это HTMLImageElement. Ознакомьтесь с документацией по Image().
file-loader может обрабатывать и другие типы ассетов, например, шрифты, CSV-файлы, XML и т.д.
Еще одним приятным инструментом для работы с изображениями является url-loader загрузчик.
В этом примере загружается любой PNG-файл размером менее 8 КБ в качестве data:URL.
module.exports = /*. */
module: rules: [
test: /\.png$/,
use: [
loader: 'url-loader',
options: limit: 8192
>
>
]
>
]
>
/*. */
>
Обработайте SASS код и преобразуйте его в CSS
Используйте sass-loader , css-loader и style-loader :
module.exports = /*. */
module: rules: [
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
>
]
>
/*. */
>
Генерация Source Maps
С транспилированным кодом, зачастую, возникают проблемы при отладке кода в браузере или анализе ошибок. Так как транспилированный и трудночитаемый JavaScript, а не оригинальный код, затрудняет поиск и исправление ошибок. Source Map — это JSON-файл, который содержит информацию о том, как транспилировать код обратно в исходный код.
Source Maps можно сгенерировать, используя свойство конфигурации devtool :
module.exports = /*. */
devtool: 'inline-source-map',
/*. */
>
devtool имеет множество возможных значений, из которых наиболее часто используемые:
- none : не добавляет Source Maps
- source-map : идеально подходит для режима production , предоставляет отдельную Source Map, которую можно свернуть и добавляет ссылку в бандл, чтобы инструменты разработки знали о том, что Source Map доступна
- inline-source-map : идеально подходит для режима development , встраивает Source Maps в качестве data:URL
Язык программирования JavaScript: где его используют и почему он популярен
Раньше интерфейс сайтов состоял из текстов, ссылок и иллюстраций, а верстали его с помощью языков HTML и CSS.
Все изменилось с созданием JavaScript. Этот язык программирования сделал сайты интерактивными — то есть удобными для пользователя. Появились кнопки, формы, поля ввода и многое другое.
JavaScript (или по-другому JS) — это многофункциональный язык программирования. JavaScript используют не только для создания сайтов, но и для написания очень разных программ.
Фронтенд-разработчик — с нуля до трудоустройства за 10 месяцев
- Постоянная поддержка от наставника и учебного центра
- Помощь с трудоустройством
- Готовое портфолио к концу обучения
- Практика с первого урока
Вы получите именно те инструменты и навыки, которые позволят вам найти работу
Где используют JavaScript
Фронтенд веб-приложений
С помощью JavaScript разработчики создают веб-приложения — это программы, которые мы запускаем в браузере. К ним относятся почтовые клиенты, редакторы текста, социальные сети, видеохостинги и многое другое.
На JavaScript создают «внешний интерфейс» веб-приложений — фронтенд. С ним взаимодействует пользователь, нажимая на кнопки, плашки, меню.
На JavaScript написан код для популярных сервисов вроде Google Maps, Google Docs, Netflix, eBay.
Бэкенд веб-приложений
Кроме интерфейса, который видят пользователи, у веб-приложений есть и внутренняя часть — бэкенд. Это серверная часть приложения, в которой обычно хранятся базы данных.
У JavaScript есть Node.js — это не отдельный язык программирования, а среда исполнения JavaScript-кода на стороне сервера. С ее помощью можно выполнять операции или обращаться к базам данным.
JavaScript в связке с Node.js используют известные компании PayPal и Walmart для взаимодействия со своими серверами.
Читайте также:
Расширения для браузера
Браузерные расширения — это мини-программы, которые состоят из кода, исполняющегося в браузере. Расширения помогают нам блокировать рекламу, включать VPN, скачивать видео или подсчитывать время, проведенное в интернете. И почти все они написаны на JavaScript.
Мобильные приложения
На JavaScript также пишут приложения для iOS и Android. Для этого есть специальные фреймворки — готовые наборы кода, «каркас» будущих приложений.
JavaScript-фреймворки вроде React Native помогают адаптировать код под мобильные платформы. Это позволяет создавать кроссплатформенные приложения — работающие и под iOS, и под Android — без необходимости нанимать разработчиков для каждой из этих систем и создавать две версии приложения.
На JavaScript написаны мобильные приложения Groupon и LinkedIn.
Игры
На JavaScript можно также писать простые игры. Обычно это браузерные бродилки, но иногда встречаются и интересные инди-проекты вроде «2048», PixelDefense, BrowserQuest.
Также существует Unity3d — среда сценариев для игры на основе JavaScript, которая работает вне браузеров.
Машинное обучение
Чаще всего в машинном обучении используют другие языки программирования, например Python. Однако иногда для этого применяют и JavaScript. Например, когда создают веб-приложения, включая те, которые визуализируют данные из моделей машинного обучения. Или когда пишут веб-страницу с формой, которая отправляет данные на сервер для обработки моделью машинного обучения.
Также для JavaScript уже написано несколько библиотек, — готовых наборов кода — на основе которых можно создать свою нейросеть. Это, например, Brain.js, Deep playground, Synaptic или FlappyLearning.
Читайте также:
Базы данных
У JavaScript есть собственный инструмент Mongoose, позволяющий работать с популярной СУБД (системой управления базами данных) MongoDB. Есть и базы данных, например, Clusterpoint, к которым можно писать запросы на JavaScript.
Также есть GraphQL — язык структурированных запросов, позволяющий обращаться к базам данных. Он работает с React и другими популярными фреймворками JavaScript.
Интернет вещей
JavaScript используют и в Интернете вещей (Internet of Things, IoT) — это способ обмена информацией между устройствами, подключенными к одной сети. Примеры таких устройств нам хорошо знакомы: умные часы, фитнес-трекеры, пожарная сигнализация. Для них пишут программы на JavaScript с использованием фреймворков Cylon.js и Johnny-Five.
Популярность JavaScript
JavaScript регулярно входит в топы самых распространенных языков программирования. Согласно индексу TIOBE (создан на основе поисковых запросов) на сентябрь 2023 JavaScript занимает шестое место.
Еще интереснее исследование GitHub — это облачная площадка для хостинга IТ-проектов, которую используют почти все разработчики. Сервис собирает репрезентативную статистику по языкам программирования от профессионалов.
По данным GitHub, JavaScript совместно с TypeScript контролирует уже треть рынка разработки. В рейтинге языков для коммерческого использования он получил почетное первое место. На нем пишут 19% респондентов.
Интересно, что доля применения JavaScript за последние два года растет не только на фронтенде, но и на бэкенде. Сейчас JavaScript занимает седьмое место по популярности для бэкенда и первое для фронтенда. Причем на фронтенде он занимает 64,6% рынка.
В сегменте фулстек-разработки (то есть и фронтенда, и бэкенда) JavaScript занимает второе место и долю рынка в 20,6%.
Перспективы JavaScript
На JavaScript написаны огромные массивы кода. Переписать их вряд ли возможно в короткие сроки, да и пока незачем. А значит, в ближайшем будущем будут востребованы и специалисты, способные работать с JavaScript и поддерживать на нем программы.
Вокруг JavaScript сформировалась огромная экосистема библиотек и фреймворков, таких как React, Angular, и Vue.js. Эти инструменты делают разработку более эффективной. Владение ими — обязательное требование, которое есть во многих вакансиях.
Сейчас активно развивается и платформа Node.js, с помощью которой, как мы уже разобрались, можно писать серверные приложения. Так что бэкенд на JavaScript также будет востребован — подробнее об этом можно прочитать в другой нашей статье.
Google сейчас активно развивает сегмент прогрессивных веб-приложений — это смесь стандартного сайта и мобильного приложения. Таким решениям — progressive web apps — предрекают широкие перспективы. Они выгодны для бизнеса, поэтому имеют шанс на часть рынка, которая пока что принадлежит приложениям, разработанным только под одну платформу.
Все это в совокупности делает JavaScript перспективным языком программирования, который будет продолжать играть важную роль в разных сферах: от веб-разработки до геймдизайна.
Сколько зарабатывают программисты на JavaScript
В сентябре 2023 на hh.ru опубликовали 7 463 вакансии разработчиков на JavaScript.
В большинстве из них уровень зарплат не указан, но мы можем ориентироваться на исследования «Хабр Карьеры». Они основаны на информации работодателей, размещавших вакансии на сайте, и данных из опросов уже работающих программистов.
Фронтендеры на JavaScript зарабатывают:
- 72 000 рублей — джуны (начинающие)
- 169 000 рублей — мидлы (специалисты среднего уровня)
- 278 000 рублей — сеньоры (высококвалифицированные разработчики)
- 308 000 рублей — тимлиды (главы команд).
Бэкендеры на JavaScript зарабатывают:
- 70 000 рублей — джуны (начинающие)
- 168 000 рублей — мидлы (специалисты среднего уровня)
- 199 000 рублей — сеньоры (высококвалифицированные разработчики).
Фулстек-разработчики на JavaScript зарабатывают:
- 114 000 рублей — джуны (начинающие)
- 170 000 рублей — мидлы (специалисты среднего уровня)
- 273 000 рублей — сеньоры (высококвалифицированные разработчики)
- 264 000 рублей — тимлиды (главы команд).
Средняя зарплата разработчика на JavaScript в 2023 году — 180 000 рублей. При этом за последний год она выросла на 20%.
Что означает скрипт в названии JavaScript
В начале 90-х годов, когда был создан JavaScript, компания Netscape разрабатывала браузер под названием Netscape Navigator. По задумке, в браузере должна была быть возможность для создания интерактивных и динамических веб-страниц.
Компания наняла программиста Брендана Айка, чтобы разработать новый язык программирования. Он должен был называться LiveScript. Но из-за популярности языка Java (разработанного компанией Sun Microsystems), компания Netscape решила изменить его имя на JavaScript, чтобы привлечь внимание и ассоциировать его с Java.
JavaScript — это язык программирования, который используется для написания скриптов. Скрипты — это небольшие программы, которые выполняются внутри веб-браузера и добавляют интерактивность на веб-страницах. Например, с помощью JavaScript можно создавать валидацию форм, анимации, обработку событий (например, кликов мыши), и многое другое, что делает веб-страницы более динамичными и удобными для пользователей.
JavaScript — язык программирования, на котором можно написать скрипт. Это такая небольшая программа, которая выполняется внутри браузера и добавляет странице интерактивность. Благодаря скрипту и программам на JavaScript мы можем ставить лайки понравившемуся контенту, писать комментарии, делиться постами в социальных сетях и многое другое.
Чем JavaScript отличается Java
JavaScript и Java — это два разных языка программирования, их путают только из-за похожего названия.
Java — гораздо сложнее и тяжелее, для исполнения скриптов в браузере он не подходит. Java применяют для разработки серверных приложений, игр, банковских систем и программ для Big Data. Так что сферы применения у JavaScript и Java абсолютно разные.
JavaScript проще Java. Для сравнения, стандартная программа «Hello, world!» на JavaScript занимает всего одну строчку:
console.log("Hello, World!"); А на Java — пять:
public class HelloWorld public static void main(String[] args) System.out.println("Hello, World!"); > > Что касается востребованности, то оба языка уверенно входят в десятку самых популярных языков программирования.
Читайте также:
В чем особенности JavaScript
Интеграция с HTML и CSS
HTML — язык разметки, а CSS — таблицы стилей. На них нельзя писать полноценный код: можно только размещать элементы на странице сайта.
А вот на JavaScript уже можно писать код, и этот язык интегрирован с языками разметки. То есть если нужно добавить в разметку скрипт, туда вписывают код на JavaScript.
Здесь может быть ваш скрипт
Но чаще на страницу просто вставляют ссылку на файл: это позволяет использовать один скрипт на многих страницах и не редактировать каждую из них.
Мультипарадигменность
В программировании есть три основные парадигмы:
- Объектная — в ней оперируют функциями и набором данных, а код строят как систему отношений между ними.
- Функциональная — используют математические функции. Из-за отсутствия переменных, меняющих значения, результат запросов в этой парадигме всегда одинаковый.
- В императивной — используют переменные, которым прописывают значения, и инструкции, выполняющиеся последовательно.
Особенность JavaScript в том, что язык позволяет использовать любую из этих парадигм, что дает разработчику больший простор решений при написании кода.
Динамическая типизация
В языках программирования используют набор правил для разделения информации по классам — это называют типизацией. В JavaScript она динамическая. Это значит, что при создании переменной не нужно обязательно задавать ее тип, то есть относить к определенной группе данных.
Преимущества JavaScript
- Не зависит от платформы. Если вы захотите запустить программу на JavaScript, не придется ставить дополнительных приложений: это сделает любой браузер. Другие языки потребуют установки компилятора, который исполнит код, или среды разработки (IDE).
- Нетребовательный. Так как JavaScript исполняет код в браузере, программа на нем не нагружает сервер, а время ответа становится минимальным. Например, когда вы придумываете новый пароль — оповещение о том, что он недостаточно сложный появляется моментально. Это заслуга JavaScript.
- Прост в изучении. JavaScript входит в топ самых легких языков программирования. При этом у него огромное комьюнити и большое количество инструментов, облегчающих жизнь разработчика.
Недостатки JavaScript
- Проблема типов данных. Переменные в JavaScript могут менять свой тип данных в процессе выполнения программы. Представьте, что у нас есть переменная, в которой написано «1000». Эта запись может быть как числом, так и просто содержимым строки — текстом. Сложить строку и число в большинстве языков программирования — нельзя. А JavaScript может просто выдать результат вычислений. За счет этого в коде возникают непредвиденные ошибки, которые бывает сложно найти.
const sum = (num1, num2) => num1 + num2 sum(1, 2) // 3 sum('hello', 2) // 'hello2' - Слишком много дополнительных библиотек и фреймворков. Чтобы пользоваться всеми возможностями JavaScript, нужны дополнительные инструменты. Их выбор — сама по себе сложная задача. Нужно, чтобы они не конфликтовали друг с другом, правильно взаимодействовали, и их поддержка не прекратилась в один неприятный момент. Главный минус для начинающего программиста на JavaScript — чтобы начать карьеру в коммерческой разработке, потребуется изучить несколько инструментов. А затем для перехода в новый проект — еще несколько.
- Проблемы с производительностью. Интерпретируемость JavaScript принято считать достоинством, но иногда она становится и недостатком. При обработке больших массивов данных операции могут выполняться менее эффективно, чем на других языках.
Пишем первую программу на JavaScript
По традиции обучение начинают с самой простой программы, которая умеет выводить на экран надпись: «Hello, world!». Чтобы создать ее на JavaScript, потребуется только браузер.
Откройте в браузере «Инструменты разработчика», нажав клавишу F12 или «Просмотр кода страницы». В браузере откроется панель, отыщите в ней вкладку «Консоль» и перейдите туда. В ней мы будем писать код.
Напишите в этой вкладке текст:
console.log("Hello, world!"); Затем нажмите Enter. В консоли появится эта надпись.
А теперь попробуйте ввести текст: alert(«Hello, world!») ;. В браузере появится всплывающее окно. Мы часто можем взаимодействовать с ними, заходя на сайты. Например, они просят нас принять сбор сookies. Поздравляем — только что вы написали скрипт для такого окна.
Насколько сложно выучить JavaScript
Синтаксис JavaScript считают одним из самых простых. Именно поэтому он завоевал такую популярность на рынке: его сравнительно легко выучить.
К сильным сторонам обучения JavaScript относят развитую экосистему: у него обширное комьюнити, всесторонняя поддержка, решение многих типовых задач можно найти в Google или получить быстрый ответ на форуме.
В качестве стартового языка JavaScript выбирают из-за простоты и хорошей документированности.
Сложность JavaScript в том, что для участия в коммерческой разработке знаний только самого языка программирования недостаточно. Потребуется выучить верстку, понимать принцип отправки и получения данных от сервера, а также выучить хотя бы пару популярных библиотек и фреймворков.
С чего начать изучать JavaScript
«Современному джуну нужно освоить большой массив данных на JavaScript. Во-первых, это фундаментальные основы языка программирования: циклы, переменные, ветвления, константы, типы, классы конструктора и так далее. Во-вторых, нужно знать верстку, хотя бы в общих чертах, и уметь применять ее принципы на практике.
Еще пригодится понимание модели событий JavaScript, объекта и модели документа DOM. Также нужно научиться применять один из популярных фреймворков. Например, React или Vue.
И еще важно научиться делать запросы AJAX и HTTP-запросы из браузера. В этом можно разбираться бесконечно. Но джуну достаточно знать хотя бы то, как загрузить и отправить данные с API, использовать авторизацию и параметры запросов. С этой базой, если вы понимаете, что делаете, уже можно найти работу».
Также всем желающим изучить JavaScript мы рекомендуем прочитать эти книги:
- Дэвид Флэнаган « JavaScript. Подробное руководство »
- Дуглас Крокфорд « Как устроен JavaScript »
- Алексей Васильев « JavaScript в примерах и задачах ».
Кроме книг для изучения JavaScript можно читать тематические статьи на Хабре и смотреть обучающие курсы на YouTube. Советуем также пройти бесплатный курс по основам JavaScript на Code Basics. А для большего погружения — найдите свое комьюнити и обменивайтесь опытом с другими учащимися. И не забывайте как можно больше практиковаться и писать код.
Профессия «Фронтенд-разработчик»
- Изучите востребованные JavaScript и TypeScript
- Научитесь создавать пользовательские интерфейсы сайтов и приложений
- Освойте самый популярный фреймворк JavaScript — React
- Познакомьтесь с языками веб-разработки HTML и CSS
Webpack: основы настройки проекта на JavaScript и Sass
Webpack — инструмент веб-разработчика, который соединяет файлы JavaScript и CSS в единые файлы.
Важно разделять JavaScript и CSS-код на маленькие по объему части. Этим мы упрощаем себе и другим понимание и поддержку проекта. Браузеры, с другой стороны, предпочитают работать с маленьким количеством файлов, пускай длинными и слабо читаемыми. Здесь на помощь приходит Webpack.
Webpack — инструмент веб-разработчика, который соединяет JavaScript- и CSS-файлы в единое целое — файл, который часто называется «bundle» (с англ. «пачка»). В этой статье представлена инструкция по настройке среды для проекта на JavaScript и Sass.
Устанавливаем Node и npm
Webpack построен на Node.js, поэтому для его работы требуется запуск как Node, так и npm (node package manager — менеджер пакетов Node). Порядок действий:
- Скачиваем и устанавливаем Node.js с официального сайта.
- Для установки npm открываем командную строку (например, Терминал MacOS) и выполняем команду:sudo npm install -gSudo и ключ -g позволяют установить модуль для всех пользователей через учётную запись администратора, но для этого потребуется ввести пароль.
- Выполняем:npm init
При создании файла package.json просто нажимайте «Enter»: настройки по умолчанию приемлемые. Кроме того, при необходимости можно их изменить.
Когда package.json создан, вы увидите небольшой документ с настройками. В нём хранится всё, что нужно знать о себе проекту.
< "name": "myproject", "version": "1.0.0", "description": "", "main": "index.js", "scripts": < "test": "echo \"Error: no test specified\" && exit 1" >, "author": "", "license": "ISC" > Добавляем Webpack
Выполняем следующий код, чтобы добавить Webpack к проекту.
npm install webpack -D После чего произойдёт 3 вещи:
- Имя «Webpack» добавится в package.json в качестве devDependency (будет использоваться при разработке, но не в рабочей версии). Для этого указывается ключ -D .
- Новый каталог node_modules добавится к проекту.
- Webpack (файлы модуля) появятся в каталоге node_modules .
Добавляем Webpack как скрипт
Добавляем следующий скрипт в package.json :
"scripts": < "build": "webpack", "start": "webpack --watch" >, Теперь запускаем Webpack-версию проекта через npm, выполнив npm run build и npm run start в командной строке.
В документации Webpack глобальную установку не рекомендуют. Она вынуждает разработчика использовать во всех проектах определенную версию Webpack и приводит к краху, если использовать другую версию.
Файловая структура
- Создаём новый каталог src в корне проекта.
- Создаём файл src/app.js , в котором укажем путь к нашим .js и .scss файлам.
- Создаём файл index.html в корне проекта.
- Делаем ссылку на JavaScript-файл перед тегом