Что такое JavaScript: полное руководство для начинающих

Введение

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

В этом руководстве мы разберём всё, что нужно знать новичку: от базовых концепций до практических примеров. После прочтения вы сможете писать собственные скрипты и понимать, как работают современные веб-приложения.

Что такое JavaScript и зачем он нужен

JavaScript (сокращённо JS) — это динамический язык программирования, который выполняется прямо в браузере. Его создал Брендан Эйх в 1995 году всего за 10 дней, но за эти годы JS превратился в один из самых популярных языков в мире.

Где используется JavaScript

Веб-сайты — интерактивные формы, анимации, динамический контент
Веб-приложения — Gmail, Google Docs, Trello работают на JS
Мобильные приложения — React Native, Ionic
Серверная разработка — Node.js позволяет писать бэкенд на JS
Десктопные приложения — Electron (VS Code, Slack, Discord)
Игры — браузерные игры и даже полноценные 3D-проекты

Подключение JavaScript к странице

Есть три способа добавить JS на страницу:

1. Встроенный скрипт

<!DOCTYPE html>
<html>
<head>
  <title>Мой сайт</title>
</head>
<body>
  <h1>Привет!</h1>
  
  <script>
    console.log('JavaScript работает!');
  </script>
</body>
</html>

2. Внешний файл (рекомендуется)

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

// script.js
console.log('Привет из внешнего файла!');

3. Атрибут события (не рекомендуется)

<button onclick="alert('Клик!')">Нажми меня</button>

💡 Совет: Размещайте <script> перед закрывающим тегом </body>, чтобы страница загружалась быстрее.

Переменные: let, const и var

Переменные — это контейнеры для хранения данных.

let — изменяемая переменная

let name = 'Андрей';
name = 'Иван'; // можно изменить
console.log(name); // Иван

const — константа

const PI = 3.14159;
PI = 3; // Ошибка! Константу нельзя изменить

var — устаревший способ (не используйте)

var oldWay = 'Так делали раньше';
// var имеет проблемы с областью видимости
// Используйте let или const вместо var

🎯 Правило: Используйте const по умолчанию. Переходите на let только если значение нужно менять.

Типы данных

JavaScript имеет несколько базовых типов данных:

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

// Строки
const greeting = 'Привет, мир!';
const name = "Андрей";
const template = `Привет, ${name}!`; // Шаблонные строки

// Числа
const age = 25;
const price = 99.99;
const infinity = Infinity;

// Булевы значения
const isActive = true;
const isDeleted = false;

// null и undefined
let empty = null;        // явное "ничего"
let notDefined;          // undefined (не задано)

// Symbol (уникальный идентификатор)
const id = Symbol('id');

// BigInt (большие числа)
const bigNumber = 9007199254740991n;

Объекты и массивы

// Объект
const user = {
  name: 'Андрей',
  age: 25,
  isAdmin: true
};

console.log(user.name);    // Андрей
console.log(user['age']);  // 25

// Массив
const colors = ['красный', 'зелёный', 'синий'];
console.log(colors[0]);    // красный
console.log(colors.length); // 3

Операторы

Арифметические операторы

const a = 10;
const b = 3;

console.log(a + b);  // 13 (сложение)
console.log(a - b);  // 7  (вычитание)
console.log(a * b);  // 30 (умножение)
console.log(a / b);  // 3.333... (деление)
console.log(a % b);  // 1  (остаток от деления)
console.log(a ** b); // 1000 (возведение в степень)

Операторы сравнения

console.log(5 == '5');   // true  (нестрогое сравнение)
console.log(5 === '5');  // false (строгое сравнение)
console.log(5 !== '5');  // true  (строгое неравенство)
console.log(5 > 3);      // true
console.log(5 <= 5);     // true

⚠️ Важно: Всегда используйте === и !== вместо == и !=.

Логические операторы

const isAdult = true;
const hasTicket = false;

console.log(isAdult && hasTicket);  // false (И)
console.log(isAdult || hasTicket);  // true  (ИЛИ)
console.log(!isAdult);              // false (НЕ)

Условные конструкции

if...else

const age = 18;

if (age >= 18) {
  console.log('Доступ разрешён');
} else if (age >= 16) {
  console.log('Требуется сопровождение');
} else {
  console.log('Доступ запрещён');
}

Тернарный оператор

const status = age >= 18 ? 'взрослый' : 'несовершеннолетний';

switch

const day = 'понедельник';

switch (day) {
  case 'понедельник':
    console.log('Начало недели');
    break;
  case 'пятница':
    console.log('Почти выходные!');
    break;
  default:
    console.log('Обычный день');
}

Циклы

for

for (let i = 0; i < 5; i++) {
  console.log(`Итерация ${i}`);
}

while

let count = 0;
while (count < 3) {
  console.log(count);
  count++;
}

for...of (для массивов)

const fruits = ['яблоко', 'банан', 'апельсин'];

for (const fruit of fruits) {
  console.log(fruit);
}

for...in (для объектов)

const user = { name: 'Андрей', age: 25 };

for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

Функции

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

function greet(name) {
  return `Привет, ${name}!`;
}

console.log(greet('Андрей')); // Привет, Андрей!

Стрелочные функции (ES6+)

const greet = (name) => `Привет, ${name}!`;

// Для одного параметра скобки можно опустить
const double = n => n * 2;

// Для нескольких строк нужен return
const calculate = (a, b) => {
  const sum = a + b;
  return sum * 2;
};

Параметры по умолчанию

function greet(name = 'Гость') {
  return `Привет, ${name}!`;
}

console.log(greet());        // Привет, Гость!
console.log(greet('Мария')); // Привет, Мария!

Работа с массивами

Современный JavaScript предлагает мощные методы для работы с массивами:

map — преобразование элементов

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

filter — фильтрация

const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(n => n % 2 === 0);
console.log(even); // [2, 4]

reduce — сведение к одному значению

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 15

find и findIndex

const users = [
  { id: 1, name: 'Андрей' },
  { id: 2, name: 'Мария' }
];

const user = users.find(u => u.id === 2);
console.log(user); // { id: 2, name: 'Мария' }

Асинхронный JavaScript

Промисы (Promises)

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Данные получены!');
    }, 1000);
  });
};

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

async/await (рекомендуется)

const getData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Ошибка:', error);
  }
};

getData();

Работа с DOM

DOM (Document Object Model) — это представление HTML-документа в виде дерева объектов.

Получение элементов

// По id
const header = document.getElementById('header');

// По классу
const buttons = document.getElementsByClassName('btn');

// По селектору (рекомендуется)
const element = document.querySelector('.my-class');
const elements = document.querySelectorAll('.items');

Изменение элементов

const title = document.querySelector('h1');

// Изменение текста
title.textContent = 'Новый заголовок';

// Изменение HTML
title.innerHTML = '<span>Новый</span> заголовок';

// Изменение стилей
title.style.color = 'red';
title.style.fontSize = '24px';

// Работа с классами
title.classList.add('active');
title.classList.remove('hidden');
title.classList.toggle('visible');

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

const button = document.querySelector('button');

button.addEventListener('click', (event) => {
  console.log('Кнопка нажата!');
  console.log(event.target); // элемент, на котором произошло событие
});

Что нового в JavaScript 2026

ECMAScript 2026 принёс несколько важных улучшений:

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

Заключение

JavaScript — это мощный и гибкий язык, который открывает двери в мир веб-разработки. Мы рассмотрели основы:

Переменные и типы данных
Операторы и условия
Циклы и функции
Работу с массивами и объектами
Асинхронное программирование
Взаимодействие с DOM

Следующие шаги:

Практикуйтесь — пишите код каждый день
Создайте свой первый проект — например, todo-приложение
Изучите фреймворки — React, Vue или Angular
Попробуйте Node.js для серверной разработки

Помните: программирование — это навык, который развивается с практикой. Не бойтесь ошибок, они — часть обучения. Удачи! 🚀