Разминка по прошлому занятию

Шесть коротких заданий помогут повторить структуру HTML-документа и основные конструкции JavaScript, рассмотренные на прошлом занятии.

У трёх языков разные роли

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

Такое разделение упрощает разработку: содержание, оформление и программная логика изменяются независимо друг от друга. В небольшом примере код можно поместить в один HTML-файл, но проект из нескольких частей удобнее хранить в отдельных файлах.

<button>Старт</button>

button {
  color: white;
  background-color: #123d32;
  border-radius: 10px;
}

Как устроено правило CSS

CSS — язык, основанный на правилах. В каждом правиле указываются элементы, к которым оно относится, и набор свойств, определяющих их оформление. Одно правило может содержать несколько объявлений.

.card {
    background-color: white;
    padding: 16px;
    border: 2px solid orange;
}

Запись property: value; называется объявлением CSS. После имени свойства ставится двоеточие, после значения — точка с запятой. Все объявления одного правила заключаются в фигурные скобки.

h1 {
  color: darkblue;
}

p {
  font-size: 18px;
  text-align: center;
}

Селекторы и отдельный файл

Селектор определяет, к каким элементам HTML будет применено правило CSS. Имя тега выбирает все элементы этого типа, класс — элементы одной группы, а идентификатор — элемент с указанным уникальным именем.

<head>
  <link rel="stylesheet"
        href="style.css">
</head>

body {
  background-color: #edf4ef;
  font-family: Arial;
}

Атрибут rel="stylesheet" обозначает тип связи между документами, а href="style.css" содержит относительный путь к файлу. Если оба файла находятся в одной папке, достаточно указать имя файла.

Оформите интерфейс будущей программы

Подготовьте третий файл

<script src="script.js" defer></script>

Атрибут src содержит относительный путь к файлу JavaScript. Атрибут defer указывает, что выполнение сценария следует отложить до завершения разбора HTML-документа.

HTML задаёт структуру.
CSS создаёт внешний вид.
После перерыва добавим поведение.

Значения и переменные

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

Данные программы представлены значениями разных типов: числами, строками, логическими значениями и объектами. Переменная — это имя, связанное со значением. Обращаясь к имени, программа может прочитать сохранённое значение или, если это разрешено способом объявления, заменить его новым.

const step = 20;
const color = "orange";

let x = 50;
let y = 120;
x = x + step;

Выражения и функции

Выражение вычисляет значение. Например, выражение x + step складывает два числа. Оператор присваивания = сохраняет результат вычисления в переменной, расположенной слева.

x = x + step;
x += step;
y -= step;

function moveRight() {
    x += step;
    draw();
}

Код внутри фигурных скобок называется телом функции. Он не выполняется при описании функции, а запускается только после вызова. Такое разделение позволяет использовать одно действие многократно.

Элемент, событие, обработчик

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

const button = document.querySelector("#rightButton");

button.addEventListener("click", moveRight);

Событием называют сообщение браузера о произошедшем действии: щелчке мышью, нажатии клавиши, перемещении указателя или завершении загрузки. Обработчик события — функция, которую браузер вызывает в ответ на это сообщение.

щелчок → функция → изменение состояния → новый результат

Canvas — область программного рисования

Элемент <canvas> создаёт на странице область фиксированного размера, предназначенную для программного рисования. В отличие от элементов HTML, нарисованные линии и фигуры не образуют самостоятельных узлов документа: они становятся частью общего изображения.

<canvas id="scene"
        width="600"
        height="300">
</canvas>

const canvas =
    document.querySelector("#scene");
const ctx = canvas.getContext("2d");

Метод getContext("2d") возвращает объект с методами и свойствами для двумерной графики. Этот объект часто сохраняют в переменной ctx, название которой образовано от слова context.

Состояние и функция отрисовки

Ранее нарисованная фигура не перемещается автоматически. Чтобы показать объект в новом месте, программа изменяет его координаты, очищает область рисования и заново выводит сцену. Поэтому данные о состоянии объекта хранят отдельно от функции отрисовки.

let x = 50;
let y = 120;

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "orange";
    ctx.fillRect(x, y, 60, 40);
}

После изменения x или y необходимо снова вызвать draw(). Последовательность «изменить состояние — очистить Canvas — нарисовать сцену» станет основой будущей анимации.

Соберите управляемый объект

<canvas id="scene" width="600" height="300"></canvas>
<button id="upButton">↑</button>
<button id="leftButton">←</button>
<button id="rightButton">→</button>
<button id="downButton">↓</button>
<p>Координата: <span id="coordinates"></span></p>
<script src="script.js" defer></script>

От страницы к графической программе