JavaScript: Живая логика веба — от переменных до AI
От DOM-манипуляций до асинхронного кода. Без JS не обходится ни один современный сайт. В финале курса ты подключишь настоящий ИИ к своему проекту.
Как JS работает в браузере
Оживление веба —
Фундамент JavaScript
Переменные, типы данных, операторы и логика. Поймёшь как браузер читает твой код и как JS принимает решения.
JavaScript сегодня — это не тот язык, который был в 1995 году. Сегодня на нём пишут всё: от фронтенда и бэкенда (Node.js) до мобильных приложений и нейросетей.
Как это работает внутри? JS — высокоуровневый, интерпретируемый язык. Браузер Chrome использует движок V8 — читает твой код на лету.
Однопоточность: JS выполняет одну задачу в один момент, но благодаря Event Loop — кажется многозадачным.
Три способа создать переменную — WAIproger учит писать современно:
Типы данных (Primitive Types):
` для шаблонных строк.
true или false — основа любой логики.
null — осознанная пустота. undefined —
значение не назначено.
Создай переменные для своего профиля и выведи в консоль фразу через шаблонные строки.
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"
Программирование — это манипуляция данными. Математика в JS проста: +, -, *, /, % (остаток) и ** (степень). Но есть ловушки, в которые падают все новички:
5 + "5" даст "55".
Строка «побеждает» число — JS склеивает их.Вычитание:
5 - "2" даст 3.
Минус не работает со строками — JS сам конвертирует.false == 0 даст
true. Вот почему нужно ===.
=== вместо ==. Это спасёт от 90% глупых ошибок —
=== проверяет и значение, и тип.
Логические операторы:
!true → false.У тебя есть доход и ставка налога. Посчитай чистую прибыль и проверь, является ли она «высокой».
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 ← ПРАВИЛЬНО
Если сайт не умеет принимать решения — это просто картинка. Урок 3 научит твой проект реагировать на действия пользователя.
age >= 18 ? "Доступ" : "Рано"
0, "", null, undefined, NaN.Всё остальное —
true. Можно писать коротко:
if (userName) { ... } — проверяет «имя не пустое».
Создай логику проверки оплаты. Три роли: admin, student, guest — у каждого своя реакция системы.
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");
}