🔰 Введение

⚡ JavaScript
первое знакомство

Язык, который оживляет веб-страницы

🌐 Работает в любом браузере
💡 Динамический, интерпретируемый
🚀 Один из самых популярных языков
📌 45-минутная сессия: теория, примеры, практический код. Никакой скуки!

📖 Что такое JavaScript?

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

  • Не путать с Java — это совершенно разные языки.
  • Изначально создан для браузеров, теперь работает везде (Node.js, мобильные приложения).
  • Вместе с HTML и CSS образует троицу веб-технологий.
// Первая программа на JavaScript
console.log("Привет, мир!");
alert("Добро пожаловать в JS!");
✨ Вы уже пишете JS, если открыли консоль браузера (F12 → Console).

⚙️ Возможности JavaScript

🖱️ Реакция на клики, движения мыши
🎨 Изменение CSS и HTML на лету
📡 Загрузка данных с сервера (AJAX, Fetch)
📱 Создание игр, анимаций, PWA

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

document.getElementById("demo").innerHTML = "Новый текст!";

JavaScript — полноценный язык: переменные, функции, циклы, условия, объекты.

🔌 Как добавить JS на страницу

  • Внутренний (inline): внутри тега <script> в HTML.
  • Внешний (best practice): отдельный файл script.js.
  • Атрибут async / defer для оптимизации загрузки.
<script src="app.js" defer></script>

🔹 Код выполняется последовательно. Рекомендуют подключать в конце <body> или использовать defer.

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

let age = 25; // можно изменять
const NAME = "Анна"; // неизменяемая
var oldWay = "устарело"; // лучше не использовать

🔢 Основные типы данных

  • Числа (number): 42, 3.14
  • Строки (string): "Привет"
  • Булевые (boolean): true / false
  • null, undefined, объекты, массивы
⭐ Тип динамический: переменная может хранить число, а позже — строку.

➕ Операторы и базовый ввод

Арифметические: + - * / % **
Присваивание: = += -=
Сравнение: == === != > <

let x = 10;
let y = 3;
console.log(x + y); // 13
console.log(x % y); // 1 (остаток)

let userName = prompt("Как тебя зовут?");
alert(`Привет, ${userName}!`);

`${}` — интерполяция строк (шаблоны) используется для вставки переменных.

🔄 Условия: выбор пути

let score = 85;
if (score >= 90) {
console.log("Отлично!");
} else if (score >= 60) {
console.log("Хорошо");
} else {
console.log("Попробуй еще");
}

Тернарный оператор: let status = age >= 18 ? "взрослый" : "ребенок";

Switch — удобно для множества вариантов.

♻️ Циклы: повторяем действия

for (let i = 1; i <= 5; i++) {
console.log(`Шаг номер ${i}`);
}

let count = 0;
while (count < 3) {
console.log("Повторяем");
count++;
}

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

Удобный метод массива: forEach или for...of.

⚙️ Функции — кирпичики программы

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

// Arrow function (стрелочная)
const multiply = (a, b) => a * b;

console.log(greet("Ник"));
console.log(multiply(4, 5));
  • Избегаем дублирования кода
  • Можно передавать как аргументы другим функциям
  • Стрелочные функции короче и не имеют своего this

🗂️ Массивы и объекты: структуры данных

const fruits = ["яблоко", "банан", "апельсин"];
fruits.push("киви");
console.log(fruits[0]); // "яблоко"

const person = {
firstName: "Елена",
age: 29,
isStudent: false
};
console.log(person.firstName);

Объекты — {ключ: значение} — идеальны для описания сущностей.
Массивы хранят упорядоченные списки данных.

🌳 DOM: взаимодействие со страницей

DOM — это древовидное представление HTML-документа. JS может его менять.

// Найти элемент
const heading = document.querySelector("h1");
heading.textContent = "Новый заголовок!";

// Добавить класс
heading.classList.add("highlight");

// Обработчик события
const button = document.getElementById("btn");
button.addEventListener("click", () => {
alert("Клик!");
});
💡 События: click, mouseover, keydown — реакция на действия пользователя.

🧪 Попробуем прямо сейчас!

Открой консоль браузера (F12). Напиши:

let myName = "JS Explorer";
console.log(`Привет, ${myName}! Добро пожаловать в разработку.`);
document.body.style.backgroundColor = "#2c2f48";

📌 JavaScript — только начало

  • Современные возможности: async/await, модули, API
  • Фреймворки: React, Vue, Angular — следующий уровень
  • Node.js позволяет писать серверную часть на JS
📚 Практикуйтесь на CodePen / JSFiddle
📖 Изучите MDN Web Docs
// Главное: не бойтесь ошибок!
try {
console.log("Учимся вместе!");
} catch(e) {
console.error("Ошибка — это опыт");
}

❓ Вопросы и обсуждение

Вы теперь знаете основы языка, который меняет Интернет ✨

  • Как объявить переменную?
  • Как обработать клик на кнопке?
  • Где искать документацию?
🎯 Следующий шаг: написать свой мини-проект (калькулятор, список дел, викторина).

Спасибо за внимание! 🚀

1 / 14