💡 Что такое JavaScript?

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

Сегодня JavaScript используется не только в браузерах, но и для:

• Серверной разработки (Node.js)
• Мобильных приложений (React Native)
• Десктопных приложений (Electron)
• Игр и 3D-визуализаций

🧱 Синтаксис JavaScript

JavaScript имеет свой синтаксис, который определяет, как писать код.

• Инструкции - это команды, которые выполняются браузером.
• Переменные - это контейнеры для хранения данных.
• Типы данных - это различные виды данных, которые можно хранить в переменных (числа, строки, логические значения и т.д.).
• Операторы - это символы, которые выполняют операции над данными (сложение, вычитание, умножение и т.д.).
• Управляющие конструкции - это конструкции, которые позволяют управлять потоком выполнения программы (условные операторы, циклы и т.д.).

Пример:

1
2
3
4
5

// Это комментарий
let x = 10; // Объявление переменной x и присваивание ей значения 10
let y = 20; // Объявление переменной y и присваивание ей значения 20
let sum = x + y; // Объявление переменной sum и присваивание ей значения суммы x и y
console.log("Сумма: " + sum); // Вывод суммы в консоль

📦 Переменные в JavaScript

Объявление переменных

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

• let - используется для объявления переменных, которые могут изменять свое значение.
• const - используется для объявления констант, которые не могут изменять свое значение после присваивания.
• var - устаревшее ключевое слово для объявления переменных (не рекомендуется использовать в современном JavaScript).

1
2
3

let age = 30;        // Можно изменить позже
const PI = 3.14159;  // Нельзя изменить
var name = "John";   // Устаревший способ, лучше не использовать

Область видимости (Scope)

let и const имеют блочную область видимости, а var - функциональную:

1
2
3
4
5
6
7

{
    let x = 10;
    const y = 20;
    var z = 30;
}
// x и y здесь недоступны
// z доступна (это может привести к ошибкам)

Типы данных

JavaScript поддерживает различные типы данных:

• Number - числа (целые и дробные)
• String - строки (текст)
• Boolean - логические значения (true или false)
• Null - отсутствие значения
• Undefined - переменная не имеет значения
• Symbol - уникальный идентификатор
• BigInt - целые числа произвольной длины
• Object - объекты (включая массивы, функции, даты)

1
2
3
4
5
6
7
8
9

let age = 30;               // Number
let price = 99.99;          // Number
let name = "John";          // String
let isActive = true;        // Boolean
let empty = null;           // Null
let undef;                  // Undefined
let id = Symbol("id");      // Symbol
let bigNumber = 9007199254740991n; // BigInt
let user = { name: "John", age: 30 }; // Object

🔄 Современный JavaScript (ES6+)

Современный JavaScript (ES6 и новее) добавил множество полезных возможностей:

Стрелочные функции

1
2
3
4
5
6
7

// Обычная функция
function add(a, b) {
    return a + b;
}

// Стрелочная функция
const add = (a, b) => a + b;

Шаблонные строки

1
2
3
4
5

const name = "Мир";
// Старый способ
console.log("Привет, " + name + "!");
// Новый способ с шаблонными строками
console.log(`Привет, ${name}!`);

Деструктуризация

1
2
3
4
5
6
7

// Деструктуризация объектов
const user = { name: "John", age: 30 };
const { name, age } = user;

// Деструктуризация массивов
const colors = ["красный", "зеленый", "синий"];
const [first, second] = colors;

Оператор spread/rest

1
2
3
4
5
6
7
8

// Spread - "разворачивает" массив или объект
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5]; // [1, 2, 3, 4, 5]

// Rest - собирает оставшиеся элементы
function sum(first, ...others) {
    return others.reduce((sum, num) => sum + num, first);
}

Классы

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    greet() {
        return `Привет, меня зовут ${this.name}!`;
    }
}

const john = new Person("John", 30);

Promise и async/await

Для асинхронных операций:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// Promise
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

// Async/await (более современный способ)
async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

Модули

1
2
3
4
5
6
7

// Экспорт из файла math.js
export function sum(a, b) {
    return a + b;
}

// Импорт в другом файле
import { sum } from './math.js';

🌐 Взаимодействие с DOM

JavaScript позволяет взаимодействовать с HTML-страницей через DOM (Document Object Model):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// Выбор элементов
const heading = document.querySelector('h1');
const paragraphs = document.querySelectorAll('p');

// Изменение содержимого
heading.textContent = 'Новый заголовок';

// Изменение стилей
heading.style.color = 'blue';

// Добавление обработчиков событий
heading.addEventListener('click', () => {
    alert('Вы кликнули на заголовок!');
});

🛠️ Инструменты разработчика

Современная разработка на JavaScript включает различные инструменты:

• Webpack/Vite - для сборки проектов
• Babel - для обратной совместимости
• ESLint - для проверки кода
• Jest/Mocha - для тестирования
• npm/yarn - менеджеры пакетов

📚 Популярные фреймворки и библиотеки

Для более сложных проектов используются фреймворки:

• React - библиотека для создания пользовательских интерфейсов
• Vue.js - прогрессивный фреймворк
• Angular - полнофункциональный фреймворк
• Svelte - компилирующий фреймворк

🚀 Практическое задание

1. Создайте HTML-страницу с базовой структурой.
2. Подключите JavaScript с помощью тега <script>.
3. Объявите переменные с использованием let и const.
4. Создайте и вызовите стрелочную функцию.
5. Используйте шаблонные строки для вывода сообщений.
6. Добавьте интерактивность: изменение страницы при клике на кнопку.

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

В следующих статьях мы рассмотрим более сложные темы, такие как:

• Продвинутая работа с DOM
• AJAX и Fetch API
• Современные паттерны JavaScript
• Разработка одностраничных приложений (SPA)

Следите за обновлениями!