JS
JS-Level · WAIproger · 10 уроков

JavaScript: Живая логика веба — от переменных до AI

От DOM-манипуляций до асинхронного кода. Без JS не обходится ни один современный сайт. В финале курса ты подключишь настоящий ИИ к своему проекту.

Скролл вниз
10
Уроков
3
Модуля
100%
Практика
1
AI в финале

Как JS работает в браузере

your code.js исходник Parser code → AST дерево кода Ignition AST → Bytecode интерпретатор TurboFan JIT Bytecode → Machine code оптимизация EVENT LOOP non-blocking ты пишешь разбирает выполняет ускоряет не блокирует V8 ENGINE (Chrome)

Оживление веба —
Фундамент JavaScript

Переменные, типы данных, операторы и логика. Поймёшь как браузер читает твой код и как JS принимает решения.

let / const / var Primitive Types Операторы if / else / switch
01
JavaScript — от «скрипта для кнопок» до доминирования в мире
Переменные · Типы данных · Шаблонные строки
let / const Types
Теория

JavaScript сегодня — это не тот язык, который был в 1995 году. Сегодня на нём пишут всё: от фронтенда и бэкенда (Node.js) до мобильных приложений и нейросетей.

Как это работает внутри? JS — высокоуровневый, интерпретируемый язык. Браузер Chrome использует движок V8 — читает твой код на лету.

JIT-компиляция (Just-In-Time): браузер оптимизирует код прямо во время выполнения — твой сайт не тормозит.

Однопоточность: JS выполняет одну задачу в один момент, но благодаря Event Loop — кажется многозадачным.

Три способа создать переменную — WAIproger учит писать современно:

const
Константа. Значение не изменится. Золотое правило — используй по умолчанию. API-ключ, ссылка на элемент.
let
Переменная, которую можно изменить. Например, счётчик кликов или текущий уровень студента.
var
«Дедушка» из прошлого. Создаёт баги из-за области видимости. Забудь — не используй.

Типы данных (Primitive Types):

Number
Целые и дробные. В JS нет int/float — просто Number.
String
Текст в кавычках. Обратные ` для шаблонных строк.
Boolean
true или false — основа любой логики.
null / undefined
null — осознанная пустота. undefined — значение не назначено.
Практика Урока 1
«Визитка разработчика WAIproger»

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

lesson-01.js
const companyName = "WAIproger";
let   studentName = "Арман";
let   progress    = 15;

// Шаблонная строка — магия с обратными кавычками `
console.log(`Привет! Я ${studentName}, учусь в ${companyName}. Прогресс: ${progress}%`);

// typeof — узнать тип переменной
console.log(typeof progress);    // "number"
console.log(typeof studentName);  // "string"
console.log(typeof true);         // "boolean"
02
🧮
Математика и Магия преобразований
Операторы · Type Coercion · Логические операторы
Operators === Coercion
Теория

Программирование — это манипуляция данными. Математика в JS проста: +, -, *, /, % (остаток) и ** (степень). Но есть ловушки, в которые падают все новички:

Конкатенация: 5 + "5" даст "55". Строка «побеждает» число — JS склеивает их.

Вычитание: 5 - "2" даст 3. Минус не работает со строками — JS сам конвертирует.

false == 0 даст true. Вот почему нужно ===.
💡
Совет от WAIproger: Всегда используй строгое сравнение === вместо ==. Это спасёт от 90% глупых ошибок — === проверяет и значение, и тип.

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

&& (И)
Истинно, если все условия истинны. Оба должны быть true.
|| (ИЛИ)
Истинно, если хотя бы одно условие верно.
! (НЕ)
Переворачивает значение. !truefalse.
Практика Урока 2
«Калькулятор налогов для бизнеса»

У тебя есть доход и ставка налога. Посчитай чистую прибыль и проверь, является ли она «высокой».

lesson-02.js
let   income    = 600000;
const taxRate   = 3;

let taxAmount  = (income / 100) * taxRate;
let netProfit  = income - taxAmount;
let isSuccess  = netProfit > 500000;

console.log("Чистая прибыль:", netProfit);   // 582000
console.log("Цель достигнута?", isSuccess); // true

// Ловушка: == vs ===
console.log(5 ==  "5"); // true  ← ОПАСНО
console.log(5 === "5"); // false ← ПРАВИЛЬНО
03
🌿
Логические ветвления — Учим сайт «думать»
if / else · switch · Тернарный оператор · Truthy / Falsy
if/else switch ternary
Теория

Если сайт не умеет принимать решения — это просто картинка. Урок 3 научит твой проект реагировать на действия пользователя.

if / else if / else
Основной способ сделать выбор. «Если пользователь нажал — покажи форму, иначе — выдай ошибку».
? : (тернарный)
Сокращённая запись if. Удобно для мелких проверок: age >= 18 ? "Доступ" : "Рано"
switch
Когда много вариантов (язык сайта: KZ, RU, EN) — switch выглядит чище десяти if.
Truthy и Falsy значения — В JS «ложными» считаются: 0, "", null, undefined, NaN.
Всё остальное — true. Можно писать коротко: if (userName) { ... } — проверяет «имя не пустое».
Практика Урока 3
«Система доступа к курсам WAIproger»

Создай логику проверки оплаты. Три роли: admin, student, guest — у каждого своя реакция системы.

lesson-03.js
let isPaid    = true;
let userRole  = "student";

if (userRole === "admin") {
    console.log("Добро пожаловать, Босс! 👑");

} else if (userRole === "student" && isPaid) {
    console.log("Урок 4 доступен. Поехали! ⚡");

} else {
    console.log("Пожалуйста, оплатите курс. 💎");
}

// Тернарный оператор — кратко и красиво
let status = isPaid ? "Премиум ✓" : "Базовый";
console.log(`Статус: ${status}`);

// switch — выбор языка интерфейса
let lang = "kz";
switch (lang) {
    case "ru": console.log("Добро пожаловать"); break;
    case "kz": console.log("Қош келдіңіз");     break;
    default:  console.log("Welcome");
}

Как работают циклы

FOR LOOP START i = 0 (init) i < 10? условие true { тело } выполняем код i++ шаг назад false КОНЕЦ WHILE LOOP START условие? while(...) true код false КОНЕЦ ⚠ break

Двигатель разработки —
Циклы, Функции и Массивы

Автоматизация, переиспользование кода и управление списками данных. После этого модуля ты начнёшь писать как настоящий разработчик.

for / while / for...of function / Arrow => Arrays .filter() / .map()
04
🔄
Циклы — Сила автоматизации
for · while · for...of · break · continue
for loop while for...of
Теория

Представь: на твоём сайте 1000 студентов, и каждому нужно отправить поздравление. Ты же не будешь писать console.log тысячу раз? Циклы — сила автоматизации.

for
Классика. Когда знаешь точное количество итераций. for (i=0; i<10; i++)
while
«Пока условие верно — делай». Осторожно: бесконечный цикл повесит сайт.
for...of
Современный способ перебирать массивы. Чисто и читабельно — используй чаще всего.
break / continue
break — немедленно стоп. continue — пропустить итерацию и дальше.
Синтаксис for-цикла:
for (инициализация; условие; шаг) { тело }

Каждая часть разделена точкой с запятой. Условие проверяется перед каждой итерацией.
Практика Урока 4
«Генератор учебного плана WAIproger»

Выведи список уроков от 1 до 10. Урок 5 — промежуточный экзамен, выдели его особо через continue.

lesson-04.js
console.log("--- Учебный план WAIproger ---");

for (let i = 1; i <= 10; i++) {
    if (i === 5) {
        console.log(`Урок ${i}: ПРОМЕЖУТОЧНЫЙ ЭКЗАМЕН 📝`);
        continue; // пропускаем стандартный вывод
    }
    console.log(`Урок ${i}: Изучаем теорию и практику`);
}

// for...of — современный перебор массива
const skills = ["HTML", "CSS", "JavaScript", "AI"];
for (const skill of skills) {
    console.log(`✓ ${skill}`);
}

// while — пока есть попытки
let attempts = 3;
while (attempts > 0) {
    console.log(`Попыток осталось: ${attempts}`);
    attempts--;
}
Анатомия функции
const calculatePrice = (price, discount) => price - (price * (discount / 100)) ключевое слово имя функции параметры (входные данные) arrow => тело — автоматический return
05
🎯
Функции — Сердце твоего приложения
Declaration · Arrow Functions · Параметры · Return · DRY
function () => {} DRY
Теория

Функции — фрагменты кода, которые можно использовать многократно. Принцип DRY (Don't Repeat Yourself) — написал один раз, используй везде.

Function Declaration

Классический синтаксис. Можно вызвать до объявления (hoisting).

classic.js
function sayHi(name) {
    return `Привет, ${name}!`;
}
console.log(sayHi("Арман"));
VS
Arrow Function ✓

Трендовый короткий синтаксис. Используется в современной разработке чаще всего.

arrow.js
// Многострочная
const sayHi = (name) => {
    return `Привет, ${name}!`;
};

// Однострочная (без return)
const greet = name => `Привет, ${name}!`;
Параметры — входные данные функции (цена, имя, массив).
return — то, что функция «возвращает» обратно. Без return функция выполнит код, но вернёт undefined.
💡
WAIproger-правило: Если функция умещается в одну строку — пиши стрелочную без фигурных скобок. Код станет чище и читабельнее. const double = n => n * 2;
Практика Урока 5
«Калькулятор скидок WAIproger»

Создай функцию, которая принимает цену и процент скидки, возвращает итоговую стоимость.

lesson-05.js
// Arrow function — современный синтаксис
const calculatePrice = (price, discount) => {
    let finalPrice = price - (price * (discount / 100));
    return finalPrice;
};

let myCoursePrice = 50000;
let myDiscount    = 15;

let total = calculatePrice(myCoursePrice, myDiscount);
console.log(`Цена со скидкой: ${total} тенге`); // 42500

// Однострочная — ещё короче
const double = n => n * 2;
const isAdult = age => age >= 18;

console.log(double(21));    // 42
console.log(isAdult(17));  // false
Массив — как это выглядит в памяти
MEMORY (RAM) "HTML/CSS" index 0 "JavaScript" index 1 "Python AI" index 2 .push() новый элемент 3 courses.length = 3 количество элементов courses[0] → "HTML/CSS" ⚠ Счёт индексов начинается с НУЛЯ — это важно! .push() .pop() .filter() .map() .forEach() .indexOf() .find() .reduce() .sort() .join()
06
📦
Массивы (Arrays) — Твоя база данных на минималках
.push() · .filter() · .map() · .forEach() · Деструктуризация
Arrays .filter() .map()
Теория

Массив — упорядоченный список чего угодно. Имена студентов, курсы, цены — всё в массивах. Счёт индексов начинается с НУЛЯ! arr[0] — первый элемент.

.push()
Добавить элемент в конец массива.
.pop()
Удалить и вернуть последний элемент.
.filter()
Создаёт новый массив из элементов, прошедших проверку. Оригинал не меняет.
.map()
Преобразует каждый элемент и возвращает новый массив. Мощь функционального программирования.
.forEach()
Перебирает элементы, ничего не возвращает. Для side-эффектов (console.log, DOM-обновление).
.length
Количество элементов в массиве. Не метод — свойство.
Интерактив: выбери метод — увидь результат
Исходный массив:
.filter(n > 2)
Результат:
Деструктуризация массива — быстро вытащить нужные элементы:
const [first, second, ...rest] = courses;
first → первый элемент, rest → оставшиеся.
Практика Урока 6
«Фильтр курсов WAIproger»

Добавь новый курс и отфильтруй только те, в названии которых есть слово "Web" или "HTML".

lesson-06.js
let courses = ["HTML/CSS Basic", "JavaScript Pro", "Python AI"];

// 1. push — добавить новый курс
courses.push("Web Design for Beginners");
console.log(`Всего курсов: ${courses.length}`); // 4

// 2. filter — ищем Web-курсы
let webCourses = courses.filter(
    course => course.includes("Web") || course.includes("HTML")
);
console.log("Web-курсы:", webCourses);
// ["HTML/CSS Basic", "Web Design for Beginners"]

// 3. map — трансформируем каждый элемент
let upper = courses.map(c => c.toUpperCase());
console.log(upper);

// 4. Деструктуризация
const [first, second, ...rest] = courses;
console.log(first);  // "HTML/CSS Basic"
console.log(rest);   // ["Python AI", "Web Design..."]

Мастерство интерфейсов —
DOM, События и AI-запросы

Объекты, работа с браузером через DOM, события и асинхронность. В финале — настоящий API-запрос к ИИ.

Objects DOM Events async/await Fetch API AI
Объект — как это выглядит в памяти
const student = { name: "Иван", age: 20, courses: ["HTML","CSS"], isPremium: false, upgrade: function() {...} } student.name → "Иван" student["courses"][0] student.upgrade() → вызов метода ДЕСТРУКТУРА const { name, age } = student; name → "Иван" age → 20
07
🗂️
Объекты — Твоя база данных «под капотом»
Objects · Методы · this · Деструктуризация · Spread
{ key: val } this Destruct
Теория

В реальных проектах данные редко ходят по одному. У студента есть имя, ID, список курсов и статус оплаты. Чтобы не плодить 100 переменных — используем Объекты.

Объект — коллекция свойств. Шкаф, где на каждом ящике этикетка (ключ), а внутри лежит вещь (значение). Синтаксис: { key: value }

Метод — если значением свойства является функция. Это то, что объект умеет делать.

this — внутри метода указывает на сам объект. this.name = «моё имя».
Точечная запись
student.name — читаем или пишем свойство. Самый частый способ доступа.
Через скобки
student["name"] — нужно когда ключ в переменной или содержит пробел.
Деструктуризация
const { name, age } = student; — быстро вытащить нужные поля одной строкой.
Spread ...
const newStudent = { ...student, isPremium: true }; — скопировать объект с изменением.
💡
WAIproger-правило: Объекты — это 80% работы с данными в реальных проектах. JSON (ответы от API, базы данных) — это тоже объекты. Освой деструктуризацию — код станет в 2 раза чище.
Практика Урока 7
«Личный кабинет WAIproger»

Создай объект студента с методом, который обновляет его статус до Premium.

lesson-07.js
const student = {
    name:      "Иван",
    age:       20,
    courses:   ["HTML", "CSS"],
    isPremium: false,

    // Метод объекта — this указывает на сам объект
    upgrade() {
        this.isPremium = true;
        console.log(`${this.name} теперь Premium-пользователь WAIproger! 💎`);
    }
};

console.log(student.name);    // "Иван"
student.upgrade();         // Иван теперь Premium...
console.log(student.isPremium); // true

// Деструктуризация — вытащить нужное одной строкой
const { name, courses } = student;
console.log(`${name} учится: ${courses.join(', ')}`);

// Spread — скопировать с изменением (immutable-подход)
const updatedStudent = { ...student, age: 21 };
console.log(updatedStudent.age); // 21
DOM-дерево — как JS видит твой HTML
document <html> <head> <body> <title> <link> <header> <main> <footer> <h1> <p> <button> querySelector('button') → находит <button> в дереве
08
🌲
DOM-дерево — Как JS управляет браузером
querySelector · textContent · innerHTML · style · classList
DOM querySelector .style
Теория

DOM (Document Object Model) — представление твоего HTML в виде дерева объектов, доступного для JS. Благодаря DOM ты можешь менять текст, цвета и удалять элементы без перезагрузки страницы.

querySelector()
Твой главный инструмент. Находит первый элемент по CSS-селектору. document.querySelector('.btn')
querySelectorAll()
Возвращает все элементы по селектору. Получаем NodeList — перебираем как массив.
.textContent
Читаем или меняем текст элемента. Безопасно — не интерпретирует HTML.
.style
Меняем CSS прямо из JS. el.style.backgroundColor = '#000' — дизайн на лету.
.classList
.add('active'), .remove('hidden'), .toggle('dark') — управляем CSS-классами.
.innerHTML
Вставляем HTML внутрь элемента. Мощно, но осторожно — может создать XSS уязвимость.
Золотое правило WAIproger: Используй classList.toggle() вместо прямого изменения стилей. Так код чище, а анимации через CSS работают автоматически.
Практика Урока 8
«Ночной режим WAIproger»

Напиши скрипт, который при запуске меняет фон сайта на чёрный, а текст на фирменный зелёный — режим кодинга активирован!

lesson-08.js
const body  = document.querySelector('body');
const title = document.querySelector('h1');

// Магия смены стиля через .style
body.style.backgroundColor = '#000';
body.style.color           = '#a8ff3e'; // фирменный WAIproger
title.textContent          = "WAIproger: Режим Кодинга Активирован ⚡";

// Лучший способ — через classList.toggle
const toggleDark = () => {
    body.classList.toggle('dark-mode');
};

// querySelectorAll — найти все кнопки
const buttons = document.querySelectorAll('button');
buttons.forEach((btn, i) => {
    btn.style.animationDelay = `${i * 0.1}s`;
    btn.classList.add('animated');
});

// Создать новый элемент и добавить в DOM
const badge = document.createElement('div');
badge.textContent = '🟢 WAIproger — Online';
badge.className   = 'status-badge';
document.body.appendChild(badge);
Интерактив: события браузера в реальном времени
// Нажимай кнопки — события появятся здесь
09
События (Events) — Сайт начинает тебя слышать
addEventListener · click · input · Объект события (e) · Callback
Events click e.target
Теория

События — сигналы от браузера: клик мышкой, нажатие клавиши, прокрутка страницы. Без событий сайт — это просто газета. Мы «вешаем» слушатель на элемент, и как только событие происходит — запускается функция (callback).

click
Клик мышкой. Самое частое событие — кнопки, ссылки, карточки.
input
Пользователь вводит текст в поле. Живая проверка форм — e.target.value.
keydown / keyup
Нажатие клавиши. e.key === 'Enter' — отправить форму по Enter.
mouseover / scroll
Hover-эффекты и lazy-loading картинок при прокрутке страницы.
Объект события (e) — содержит всю информацию о том, что произошло.
e.target — элемент, на котором произошло событие.
e.preventDefault() — отменить стандартное поведение браузера (например, отправку формы).
💡
WAIproger-паттерн: Event Delegation — вешай один слушатель на родителя, а не на каждый дочерний элемент. Это ускоряет страницу в 10 раз при большом количестве карточек.
Практика Урока 9
«Интерактивная покупка курса»

Кнопка при клике меняет текст на «Курс куплен» и блокируется. Один клик — навсегда.

lesson-09.js
const buyBtn = document.querySelector('#buy-button');

// addEventListener — «вешаем» слушатель
buyBtn.addEventListener('click', (event) => {
    event.target.textContent = "Курс куплен! 💎";
    event.target.style.opacity  = "0.5";
    event.target.disabled       = true;
    alert("Поздравляем! Доступ к WAIproger открыт. 🚀");
});

// input — живая проверка поля
const searchInput = document.querySelector('#search');
searchInput.addEventListener('input', (e) => {
    console.log(`Ищем: ${e.target.value}`);
});

// keydown — Enter для отправки
searchInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        console.log(`Поиск запущен: ${e.target.value}`);
    }
});

// Event Delegation — один слушатель на список
const courseList = document.querySelector('.course-list');
courseList.addEventListener('click', (e) => {
    if (e.target.matches('.course-card')) {
        console.log(`Открываем курс: ${e.target.dataset.course}`);
    }
});
Синхронный vs Асинхронный — разница «на пальцах»
СИНХРОННО АСИНХРОННО Задача 1 ⏳ САЙТ ЗАМОРОЖЕН Задача 3 ← плохо ❌ Задача 1 fetch() → фоновый запрос Задача 2 await data Задача 3 ← хорошо ✅ время → PROMISE STATES ● pending ● fulfilled ● rejected ← ждём данные ← данные пришли ← ошибка сети
10
🤖
Асинхронность и API — Связь с Искусственным Интеллектом
Promise · async/await · fetch() · try/catch · JSON · AI API
async await fetch() AI
Теория

Это «вышка», бро. Хочешь, чтобы твой сайт общался с ChatGPT или получал данные о курсах валют? Для этого нужно уметь ждать данные из сети. JS однопоточен — если он начнёт качать файл весом 1 Гб, сайт «замрёт». Асинхронность решает эту проблему.

Promise
«Обещаю принести данные позже». Три состояния: pending, fulfilled, rejected.
async / await
Пишешь асинхронный код как обычный. await — «подожди пока придут данные, потом продолжай».
fetch(url)
Встроенная функция браузера для HTTP-запросов. Возвращает Promise. Основа работы с любым API.
try / catch
Обрабатываем ошибки. Нет интернета? Сервер упал? catch поймает ошибку — сайт не сломается.
Порядок работы с API:
1. const response = await fetch(url) — делаем запрос
2. const data = await response.json() — парсим JSON-ответ
3. Используем data — обновляем DOM, выводим результат

Всегда оборачивай в try/catch — сеть ненадёжна.
🤖
WAIproger — финал: Настоящий AI-запрос к OpenAI API выглядит точно так же! fetch('https://api.openai.com/v1/chat/completions') с заголовком Authorization и телом запроса в JSON. Ты уже умеешь это делать!
🤖 Практика Урока 10 — Финал
«AI-Совет дня для студента WAIproger»

Функция делает настоящий запрос к внешнему API и выводит совет от ИИ. Это твой первый настоящий AI-запрос!

lesson-10.js
// async function — помечаем функцию как асинхронную
async function getAiTip() {
    try {
        console.log("WAIproger связывается с нейросетью... 🤖");

        // fetch — делаем запрос к API (реальный!)
        const response = await fetch('https://api.adviceslip.com/advice');

        // .json() — парсим ответ (тоже async!)
        const data     = await response.json();

        console.log(`💡 Совет от ИИ: ${data.slip.advice}`);

    } catch (error) {
        console.log("Ошибка связи с ИИ:", error.message);
    }
}

getAiTip(); // запускаем!

// ===== ВОТ КАК ВЫГЛЯДИТ ЗАПРОС К OPENAI (ChatGPT) =====
async function askChatGPT(question) {
    const res = await fetch('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: {
            'Content-Type':  'application/json',
            'Authorization': `Bearer ${YOUR_API_KEY}`
        },
        body: JSON.stringify({
            model:    "gpt-4o",
            messages: [{ role: "user", content: question }]
        })
    });
    const data = await res.json();
    return data.choices[0].message.content;
}

Живой Playground

Пиши JavaScript прямо на странице. Результат — мгновенно.

WAIproger Playground — JavaScript REPL JS ES2024
// редактор — пиши код здесь
// вывод консоли
// Нажми ▶ Запустить...
Ctrl+Enter — быстрый запуск

Куда идти дальше

JavaScript — это вселенная. После курса у тебя есть фундамент для любого направления.

⚛️
React
Frontend Framework
Библиотека от Meta для создания UI. Компонентный подход, виртуальный DOM, хуки — стандарт индустрии.
Components useState JSX
🟢
Node.js
Backend Runtime
JS на сервере. Один язык — и фронт, и бэк. REST API, работа с файлами, базами данных.
Express REST API npm
🤖
AI APIs
Искусственный Интеллект
OpenAI, Anthropic Claude, Gemini — подключаешь через fetch(). Ты уже умеешь это из Урока 10!
GPT-4o Claude fetch()
📘
TypeScript
Typed JavaScript
JS с типами. Ловит ошибки до запуска кода. Используется во всех крупных компаниях.
Types Interfaces Generics
Next.js
Fullstack Framework
React + серверный рендеринг + роутинг. Используется в Vercel, Netflix, TikTok.
SSR App Router Deploy
📱
React Native
Mobile Apps
Мобильные приложения на JS. iOS и Android из одного кода. Instagram, Facebook, Airbnb.
iOS Android Expo

Твои навыки после курса

⚡ JavaScript Core 90%
🌲 DOM Manipulation 85%
🤖 Async / Fetch / API 80%
📦 Arrays & Objects 95%
Строишь Web — HTML, CSS и теперь JS. Полный стек фронтенда.
Понимаешь AI — умеешь делать запросы к нейросетям из кода.
Intelligence кода — логика, функции, объекты, асинхронность.
Готов к React — следующий шаг в WAIproger-экосистеме.
🎓 Ты прошёл курс JavaScript

Ты теперь —
WAIproger

Бро, ты прошёл путь от создания первой переменной до работы с асинхронными запросами к ИИ. Это мощный фундамент. Твой сайт теперь не просто визитка — это полноценная платформа.

10
Уроков пройдено
3
Модуля завершено
100%
Практики
1
AI-запрос сделан
▶️
YouTube · WAIproger
Смотри видео-уроки на канале
Разборы кода, живые проекты, советы по карьере в IT. Подписывайся — выходит новое каждую неделю.
▶ Перейти на канал