JavaScript (JS)

JavaScript (JS) — это высокоуровневый, динамически типизированный язык программирования, используемый для создания интерактивных и динамичных элементов веб-страниц. Он работает на стороне клиента (в браузере), хотя может также использоваться на сервере с помощью технологий вроде Node.js. JavaScript поддерживает объектно-ориентированное, функциональное и императивное программирование.

JavaScript — ключевая технология фронтенд-разработки, наряду с HTML и CSS. JS позволяет изменять содержимое веб-страницы без её перезагрузки. Например, обновление корзины покупок или отображение новых комментариев в реальном времени.

JavaScript используется для создания интерактивных элементов, таких как:

• Всплывающие окна (модальные окна, алерты).
• Анимации, переходы и эффекты.
• Реакция на действия пользователя (клики, наведение мыши, ввод текста).

JavaScript стал неотъемлемой частью веб-разработки и основой многих современных цифровых решений.

История и развитие языка

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

Создание JavaScript

JavaScript был создан в 1995 году Бренданом Эйхом, разработчиком компании Netscape. Эйху было поручено создать язык программирования, который бы стал простым и понятным средством для добавления интерактивности на веб-страницы.

На реализацию первой версии языка у него ушло всего 10 дней. Этот язык получил название Mocha, затем был переименован в LiveScript, а вскоре после этого стал JavaScript. Выбор имени был связан с популярностью языка Java в тот момент, хотя JavaScript не имеет с ним прямой связи.

Стандартизация

В 1996 году Microsoft представила свою реализацию JavaScript под названием JScript, встроенную в Internet Explorer 3. Возникла необходимость стандартизации языка, чтобы избежать фрагментации.

В 1997 году компания Netscape передала спецификацию языка в организацию ECMA (European Computer Manufacturers Association). Так появилась спецификация ECMAScript. Первой версией стандарта стала ECMAScript 1, которая была выпущена в 1997 году.

Эволюция ECMAScript

С развитием веб-технологий язык активно улучшался:

ECMAScript 3 (1999): введение регулярных выражений, улучшения в обработке ошибок и базовые возможности работы с массивами.

ECMAScript 5 (2009): появление строгого режима (strict mode), методов работы с объектами (Object.keys, Object.create) и улучшение совместимости.

ECMAScript 6 / ES2015: один из самых значимых релизов языка. В него вошли:

• Лет и константы (let, const).
• Классы и модули.
• Стрелочные функции.
• Шаблонные строки.
• Асинхронность через Promise.

С тех пор новые версии ECMAScript выходят ежегодно, добавляя полезные возможности, такие как async/await, поддержка глобального объекта globalThis, динамические импорты и многое другое.

Расширение экосистемы

• Браузеры и фронтенд: JavaScript стал основным языком фронтенд-разработки благодаря стандарту DOM и появлению библиотек, таких как jQuery, React, Angular и Vue.js.
• Серверная разработка: В 2009 году Райан Даль создал среду выполнения Node.js, позволив использовать JavaScript на сервере. Это стало революцией, открывшей путь для единого стека технологий (например, MERN или MEAN).
• Инструменты разработки: Современные разработчики используют JavaScript для сборки, тестирования и развертывания проектов, благодаря инструментам вроде Webpack, Babel, ESLint.
• Другие области применения: Сегодня JavaScript используется не только в веб-разработке, но и в мобильных приложениях (React Native), разработке игр (Three.js), машинном обучении (TensorFlow.js) и IoT.

Современное состояние

JavaScript продолжает активно развиваться. Современные браузеры обеспечивают поддержку новых стандартов почти сразу после их выпуска, а сообщество разработчиков вкладывается в улучшение экосистемы.

Ключевые направления развития:

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

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

Основы JavaScript

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

Подключение JS к веб-странице

Для работы JavaScript его нужно связать с HTML-документом. Это можно сделать несколькими способами:

Внутри HTML

JavaScript-код можно писать прямо в HTML-документе с помощью тега <script>.

<!DOCTYPE html>

<html>

<head>

<title>Пример JavaScript</title>

</head>

<body>

<h1>Привет, JavaScript!</h1>

<script>

alert(‘Добро пожаловать на сайт!’);

</script>

</body>

</html>

Подключение внешнего файла

Для более структурированного кода рекомендуется использовать отдельный файл с расширением .js.

<!DOCTYPE html>

<html>

<head>

<title>Пример JavaScript</title>

<script src=»script.js»></script>

</head>

<body>

<h1>Привет, JavaScript!</h1>

</body>

</html>

Файл script.js может содержать, например:

alert(‘Привет из внешнего файла!’);

Расположение кода

Тег <script> можно размещать в <head> или перед закрывающим тегом <body>. Для лучшей производительности подключайте скрипты перед </body> или используйте атрибут defer, чтобы загрузка скриптов не блокировала отображение страницы.

<script src=»script.js» defer></script>

Переменные, типы данных и операторы

Переменные

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

• let — переменная, значение которой можно изменять.
• const — переменная с постоянным значением.
• var — устаревший способ объявления (использовать не рекомендуется).

Пример:

let имя = ‘Алексей’;

const возраст = 30;

console.log(имя, возраст);

Типы данных

JavaScript поддерживает несколько типов данных:

Примитивные типы:

• string (строка): ‘Привет’
• number (число): 42
• boolean (логический): true или false
• null: пустое значение
• undefined: значение не присвоено
• symbol

Объекты: массивы, функции и объекты.

Операторы

JavaScript предоставляет широкий набор операторов:

• Арифметические: +, -, *, /, %.
• Сравнения: ==, ===, !=, <, >.
• Логические: && (И), || (ИЛИ), ! (НЕ).

Пример:

let a = 5;

let b = 10;

console.log(a + b); // 15

console.log(a > b); // false

Функции и их использование

Что такое функции

Функции — это блоки кода, которые выполняют определенную задачу. Они могут принимать входные данные (аргументы) и возвращать результат.

Объявление функций

Функции можно создавать несколькими способами:

Функциональное выражение:

const приветствие = function(имя) {

return `Привет, ${имя}!`;

};

console.log(приветствие(‘John’));

Функция-стрелка:

const сумма = (a, b) => a + b;

console.log(сумма(5, 3)); // 8

Объявление через function:

function умножение(a, b) {

return a * b;

}

console.log(умножение(4, 5)); // 20

Пример использования функции

function показатьПриветствие(имя) {

console.log(`Добро пожаловать, ${имя}!`);

}

показатьПриветствие(‘John’);

Функции позволяют сократить повторение кода и сделать программы более читаемыми.

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

Работа с DOM

Document Object Model (DOM) — это программный интерфейс для HTML и XML-документов, позволяющий взаимодействовать с элементами страницы как с объектами. DOM играет ключевую роль в добавлении динамичности на веб-страницы. Рассмотрим его основы и основные операции.

Что такое DOM

DOM — это представление HTML-документа в виде иерархической структуры объектов, где каждый элемент (тег, текст, атрибут) становится узлом (node).

Пример HTML:

<!DOCTYPE html>

<html>

<head>

<title>Пример DOM</title>

</head>

<body>

<h1>Заголовок</h1>

<p>Параграф текста.</p>

</body>

</html>

В DOM это представляется как дерево:

• html
  • head
    • title
  • body
    • h1
    • p

JavaScript позволяет получать доступ к этим узлам, изменять их, удалять или добавлять новые.

Методы доступа к элементам страницы

DOM предоставляет множество методов для поиска элементов. Вот основные:

По ID элемента

Метод getElementById() позволяет получить элемент по его уникальному идентификатору.

const заголовок = document.getElementById(‘мой-заголовок’);

console.log(заголовок.textContent);

По имени тега

Метод getElementsByTagName() возвращает коллекцию элементов с указанным тегом.

const параграфы = document.getElementsByTagName(‘p’);

console.log(параграфы[0].textContent);

По классу

Метод getElementsByClassName() ищет элементы с определенным классом.

const элементы = document.getElementsByClassName(‘класс-элемента’);

console.log(элементы.length);

Использование CSS-селекторов

Методы querySelector() и querySelectorAll() позволяют использовать селекторы как в CSS.

const элемент = document.querySelector(‘.класс-элемента’); // Первый элемент

const всеЭлементы = document.querySelectorAll(‘.класс-элемента’); // Все элементы

Управление элементами

Изменение содержимого

Содержимое элемента можно изменить с помощью свойств textContent и innerHTML.

const заголовок = document.querySelector(‘h1’);

заголовок.textContent = ‘Новый заголовок’; // Изменяет текст

заголовок.innerHTML = ‘<span>Вложенный текст</span>’; // Изменяет HTML

Добавление элементов

Элементы можно добавлять с помощью методов createElement() и append().

const новыйЭлемент = document.createElement(‘div’);

новыйЭлемент.textContent = ‘Добавленный элемент’;

document.body.append(новыйЭлемент);

Удаление элементов

Для удаления используется метод remove().

const элемент = document.querySelector(‘p’);

элемент.remove();

Изменение атрибутов

Атрибуты можно добавлять, изменять или удалять с помощью методов setAttribute(), getAttribute() и removeAttribute().

const элемент = document.querySelector(‘img’);

элемент.setAttribute(‘src’, ‘новый-адрес-картинки.jpg’); // Устанавливает атрибут

console.log(элемент.getAttribute(‘src’)); // Получает атрибут

элемент.removeAttribute(‘alt’); // Удаляет атрибут

Пример комплексной работы с DOM

<!DOCTYPE html>

<html>

<body>

<h1 id=»заголовок»>Привет, мир!</h1>

<button id=»кнопка»>Нажми меня</button>

<div id=»контейнер»></div>

<script>

const кнопка = document.getElementById(‘кнопка’);
const контейнер = document.getElementById(‘контейнер’);

кнопка.addEventListener(‘click’, () => {

const новыйЭлемент = document.createElement(‘p’);

новыйЭлемент.textContent = ‘Новый элемент добавлен!’;

контейнер.append(новыйЭлемент);

});

</script>

</body>

</html>

При нажатии на кнопку в контейнер будет добавляться новый параграф.

Работа с DOM — это фундамент JavaScript-разработки. Освоив методы доступа и управления элементами, можно создавать интерактивные и динамичные веб-приложения.

События в JavaScript

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

Что такое события

Событие — это любое действие, которое происходит в браузере или на веб-странице.

Например:

• Пользователь нажал кнопку.
• Указатель мыши переместился по элементу.
• Страница полностью загрузилась.

Каждое событие связано с объектом события (event object), содержащим информацию о произошедшем.

Обработчики событий

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

Использование атрибута HTML

В этом случае обработчик прописывается прямо в HTML.

<button onclick=»alert(‘Кнопка нажата!’)»>Нажми меня</button>

Прямое назначение

Можно задать обработчик через свойство элемента.

const кнопка = document.querySelector(‘button’);

кнопка.onclick = function() {

alert(‘Кнопка нажата!’);

};

Метод addEventListener()

Этот способ более универсальный и позволяет добавлять несколько обработчиков к одному событию.

const кнопка = document.querySelector(‘button’);

кнопка.addEventListener(‘click’, () => {

alert(‘Кнопка нажата!’);

});

С помощью addEventListener можно также удалить обработчик:

const функция = () => alert(‘Кнопка нажата!’);

кнопка.addEventListener(‘click’, функция);

кнопка.removeEventListener(‘click’, функция);

Распространенные типы событий

Клики

Событие click возникает, когда пользователь нажимает на элемент.

Пример:

document.querySelector(‘button’).addEventListener(‘click’, () => {

console.log(‘Кнопка нажата!’);

});

Другие события мыши:

• dblclick — двойной клик.
• mouseover — указатель мыши наведен на элемент.
• mouseout — указатель мыши покидает элемент.

Ввод

События ввода срабатывают при взаимодействии с полями ввода.

Пример:

const поле = document.querySelector(‘input’);

поле.addEventListener(‘input’, () => {

console.log(`Введено: ${поле.value}`);

});

Часто используемые события ввода:

• input — любое изменение в поле ввода.
• change — изменение поля ввода после потери фокуса.
• focus — поле ввода получило фокус.
• blur — поле ввода потеряло фокус.

Прокрутка

Событие scroll срабатывает при прокрутке элемента или страницы.

Пример:

window.addEventListener(‘scroll’, () => {

console.log(`Прокрутка: ${window.scrollY}px`);

});

Пример работы с несколькими событиями

<!DOCTYPE html>

<html>

<body>

<button id=»кнопка»>Нажми меня</button>

<input type=»text» id=»поле» placeholder=»Введите текст»>

<div id=»лог» style=»height: 200px; overflow-y: scroll; border: 1px solid black;»>

Прокрутите меня!

</div>

<script>

const кнопка = document.getElementById(‘кнопка’);

const поле = document.getElementById(‘поле’);

const лог = document.getElementById(‘лог’);

// Обработчик клика

кнопка.addEventListener(‘click’, () => {

alert(‘Кнопка нажата!’);

});

// Обработчик ввода

поле.addEventListener(‘input’, () => {

console.log(`Текст: ${поле.value}`);

});

// Обработчик прокрутки

лог.addEventListener(‘scroll’, () => {

console.log(‘Прокрутка контейнера!’);

});

</script>

</body>

</html>

События и их обработка — это основа динамического взаимодействия на веб-страницах. Они позволяют сделать интерфейсы интерактивными и реагирующими на действия пользователя.

Продвинутые возможности JavaScript

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

Работа с асинхронным кодом

Асинхронность в JavaScript

Асинхронный код позволяет выполнять задачи, которые требуют времени (например, загрузка данных с сервера), не блокируя выполнение других операций.

Promise (Обещание)

Promise — это объект, представляющий результат асинхронной операции. Он может находиться в одном из трех состояний:

1. Pending (ожидание) — операция выполняется.
2. Fulfilled (выполнено) — операция завершилась успешно.
3. Rejected (отклонено) — произошла ошибка.

Пример использования:

const обещание = new Promise((resolve, reject) => {

setTimeout(() => {

const успех = true;

if (успех) resolve(‘Операция выполнена успешно!’);

else reject(‘Произошла ошибка.’);

}, 1000);

});

обещание

.then(result => console.log(result)) // Выполняется при успешном выполнении

.catch(error => console.error(error)) // Выполняется при ошибке

.finally(() => console.log(‘Операция завершена.’));

async/await

async/await — это синтаксический сахар над Promise, который делает асинхронный код более читаемым.

Пример:

const загрузитьДанные = async () => {

try {

const результат = await обещание; // Ожидаем выполнения Promise

console.log(результат);

} catch (error) {

console.error(error);

}

};

загрузитьДанные();

AJAX и Fetch API

AJAX

AJAX (Asynchronous JavaScript and XML) позволяет отправлять запросы на сервер и получать данные без перезагрузки страницы.

С использованием XMLHttpRequest:

const xhr = new XMLHttpRequest();

xhr.open(‘GET’, ‘https://api.example.com/data’);

xhr.onload = () => {

if (xhr.status === 200) {

console.log(JSON.parse(xhr.responseText));

}

};

xhr.send();

Fetch API

Fetch API — это современный способ работы с запросами. Он основан на Promise и более удобен в использовании.

Пример:

fetch(‘https://api.example.com/data’)

.then(response => {

if (!response.ok) throw new Error(‘Ошибка сети’);

return response.json();

})

.then(data => console.log(data))

.catch(error => console.error(error));

С использованием async/await:

const получитьДанные = async () => {

try {

const response = await fetch(‘https://api.example.com/data’);

if (!response.ok) throw new Error(‘Ошибка сети’);

const data = await response.json();

console.log(data);

} catch (error) {

console.error(error);

}

};

получитьДанные();

Хранение данных в браузере

localStorage

localStorage позволяет хранить данные в браузере на постоянной основе. Даже после закрытия вкладки или браузера данные сохраняются.

Пример работы:

// Сохранение данных

localStorage.setItem(‘ключ’, ‘значение’);

// Получение данных

const значение = localStorage.getItem(‘ключ’);

console.log(значение); // ‘значение’

// Удаление данных

localStorage.removeItem(‘ключ’);

// Очистка хранилища

localStorage.clear();

sessionStorage

sessionStorage работает аналогично localStorage, но хранит данные только в рамках одной сессии (пока открыта вкладка).

Пример:

sessionStorage.setItem(‘ключ’, ‘временное значение’);

console.log(sessionStorage.getItem(‘ключ’)); // ‘временное значение’

sessionStorage.clear();

Пример использования хранения данных

// Проверяем, заходил ли пользователь ранее

if (!localStorage.getItem(‘посещение’)) {

alert(‘Добро пожаловать на сайт!’);

localStorage.setItem(‘посещение’, ‘да’);

} else {

alert(‘С возвращением!’);

}

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