Загрузка...

Введение в JavaScript

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

Что такое JavaScript?

JavaScript — язык программирования. Вы пишете инструкции, браузер выполняет их одну за другой. Это не разметка (это HTML) и не таблица стилей (это CSS). В вебе его повседневная работа — поведение: менять текст, отвечать пользователю, считать значение и позже в этом курсе — загружать данные.

Язык исполнения, не документ

Теги HTML называют фрагменты содержимого. Правила CSS описывают, как они выглядят. Инструкции JavaScript говорят компьютеру сделать что-то: напечатать сообщение, изменить узел на странице или сложить два числа. HTML у вас уже достаточно, чтобы повесить скрипт на страницу. Этот курс учит язык внутри этого скрипта.

📊 Статичная страница и страница с JavaScript

Ситуация Без JavaScript С коротким скриптом
Страница только загрузилась Заголовок остаётся как в HTML Скрипт может переписать его после загрузки
Посетитель нажимает кнопку Сама кнопка не даёт полезной реакции Позже: код выполняется по клику
Нужна сумма или проверка HTML не считает; CSS не решает JavaScript считает и показывает результат

Держите три слоя раздельно. Структура — HTML. Внешний вид — CSS. Этот курс — третий слой: что страница делает.

Первый взгляд на инструкцию

Инструкция — одна команда. Пример ниже пишет строку в консоль разработчика — инструмент программиста, не видимая страница. Консолью вы будете пользоваться часто.

Первая инструкция

javascript 
console.log("Hello, JavaScript");

Что делает эта инструкция

  • console.log — встроенная функция, печатает в консоль
  • Текст в кавычках — строка, то есть текстовые данные
  • Точка с запятой завершает инструкцию (в этом курсе безопасная привычка)
  • На странице пока ничего не меняется; это только журнал
    Откройте инструменты разработчика (часто F12) и после запуска скрипта смотрите вкладку Console.

JavaScript на странице

Чтобы изменить то, что видит посетитель, скрипт обращается к странице. Ниже абзац HTML начинается с одного предложения. Встроенный <script> находит его по id и подменяет текст. Куда ставить скрипты — на следующем занятии; здесь хватит одного файла.

HTML со встроенным скриптом

html 
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Demo</title>
</head>
<body>
<h1>Welcome</h1>
<p id="msg">This line is from HTML only.</p>
<script>
document.getElementById("msg").textContent =
"JavaScript rewrote this sentence.";
</script>
</body>
</html>

Что изменилось

Без скрипта остаётся исходный абзац. Со скриптом браузер сначала читает HTML, затем выполняет инструкции и показывает новое предложение. Тот же каркас — другое поведение после загрузки.

JavaScript ещё и считает

Как язык программирования он работает с числами и именами, не только с тегами. Этот крошечный пример не про цвет и не про заголовки. Он считает итог и пишет его в журнал. Переменные и типы — позже; здесь важно увидеть, что код считает.

Небольшой расчёт

javascript 
const price = 120000;
const taxRate = 0.09;
console.log(price + price * taxRate);

Чем этот курс является (и чем нет)

Мы остаёмся в браузере: основы языка, DOM, события, формы и fetch. Не начинаем с фреймворка, Node.js или TypeScript. Без этих инструментов вы уже напишете полезные скрипты для страницы. Необязательные занятия — дополнение, не требование основного пути.

Попробуйте сами

  1. Создайте файл intro.html.
  2. Вставьте пример HTML со скриптом, сохраните и откройте в браузере.
  3. Убедитесь, что абзац показывает переписанное предложение, а не исходный текст HTML.
  4. Замените строку в textContent на свою фразу, сохраните и обновите страницу.
  5. По желанию: добавьте console.log("Hello, JavaScript"); в тот же <script>, сохраните, обновите и найдите строку на вкладке Console.

Частые ошибки

  • Считать JavaScript ещё одним способом писать заголовки и абзацы — структуру оставляйте в HTML; JS пусть меняет или дополняет её при необходимости
  • Ждать, что CSS среагирует на клик или посчитает сумму — CSS оформляет; он не выполняет программную логику
  • Хранить единственную копию важного текста только в скрипте, чтобы без JS страница была пустой
  • Путать консоль с видимой страницей: console.log не подменяет заголовок на экране

Кратко

  • JavaScript — язык программирования, который добавляет страницам поведение в браузере
  • HTML структурирует содержимое; CSS управляет оформлением; JavaScript решает, что делает страница
  • Инструкция — одна команда, например console.log("Hello, JavaScript");
  • Встроенный скрипт может найти элемент и после загрузки изменить textContent
  • JavaScript считает значения, а не только трогает разметку
  • Курс остаётся в браузере и не требует фреймворка
  • Практикуйтесь: правьте маленький скрипт и обновляйте браузер

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 3
Javascript Урок