Перейти к содержанию

Лабораторная работа №2 - Основы синтаксиса JavaScript. Операторы языка.

1. Теория

1.0. Цель работы

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

1.1. Место лабораторной работы №2 в проекте семестра

Лабораторная работа №1 создала основу:

  • репозиторий GitHub;
  • структура проекта (index.html, style.css, script.js, README.md, passport.md);
  • простая верстка под предметную область;
  • проверка подключения JavaScript.

Лабораторная работа №2 развивает проект:

  • добавляет алгоритмическое ядро;
  • вводит набор данных предметной области;
  • добавляет механизм демонстрации (консоль + блок вывода на странице);
  • закладывает основу для дальнейших работ (DOM, формы, fetch).

1.2. Исполнение JavaScript: как работает код

JavaScript в браузере выполняется движком (JS Engine). Код выполняется:

  • последовательно сверху вниз;
  • управляется конструкциями ветвления и повторения;
  • взаимодействует с окружением браузера через document, console, события.

В лабораторной №2 мы работаем с базовой логикой:

  • переменные, типы, операторы;
  • условия (if/else, switch);
  • циклы (for, while);
  • обработка данных.

1.3. Переменные и константы: let, const

1.3.1. Основные правила (подробно)

В JavaScript переменные объявляются тремя ключевыми словами: const, let, var. В рамках курса используются только const и let, потому что они дают предсказуемое поведение и корректную область видимости.

1) const — константа (ссылку переназначать нельзя)

const используется, когда переменная должна всегда ссылаться на одно и то же значение (или один и тот же объект).

Ключевое правило:

  • нельзя переназначить значение переменной (нельзя сделать = на другое значение);
  • но если это объект — можно изменять содержимое (поля), потому что меняется не ссылка, а содержимое по ссылке.

Пример с примитивом (строка):

const appName = "Учебное web-приложение";

// appName = "Другое имя"; 
// Ошибка: Assignment to constant variable

Пример с объектом (изменение полей разрешено):

const ticket = { id: 1, status: "new" };

ticket.status = "done";     // допустимо
ticket.priority = 2;        // допустимо (добавление поля)

// ticket = { id: 2, status: "new" };
// Ошибка: нельзя переназначить ссылку на новый объект

Практический вывод для лабораторных:

  • const используем для “стабильных” сущностей: настройки, ссылки на DOM-элементы, название приложения;
  • если значение должно меняться в процессе выполнения — тогда нужен let.
2) let — переменная (значение можно изменять)

let используется, когда значение должно изменяться в ходе работы алгоритма.

Типичные случаи:

  • счётчик цикла (i, j);
  • аккумулятор суммы (sum);
  • переменная максимума/минимума (max, min);
  • флаг (isValid);
  • промежуточный результат.

Пример:

let counter = 0;

counter = counter + 1;  // допустимо
counter += 1;           // допустимо (короче)
counter++;              // допустимо (инкремент)

Практический вывод:

  • всё, что “накапливается”, “считается”, “изменяется по шагам” — это let.
3) Почему var не используется (и чем он опасен)

var — устаревший способ объявления переменных. Главная проблема — неблоковая область видимости (var “виден” не только внутри {}, а во всей функции), из-за чего возникают ошибки при циклах и условиях.

Пример проблемы с var (для понимания, не использовать):

for (var i = 0; i < 3; i++) {
  // ...
}
console.log(i); // 3 — i доступна снаружи цикла (неожиданно)

С let:

for (let i = 0; i < 3; i++) {
  // ...
}
// console.log(i); // Ошибка: i is not defined (что правильно)
4) Правило выбора (простая памятка)

Используй:

  • const — по умолчанию, если переменная не должна переназначаться;
  • let — только когда точно нужно изменять значение.
5) Пример из проекта (логика ЛР1 → ЛР2)
const appName = "Учебное web-приложение";             // не меняется
const output = document.getElementById("output");     // ссылка на элемент не меняется

const values = [1200, 500, 800];                      // данные — ссылка не меняется

let sum = 0;                                          // сумма будет меняться
for (let i = 0; i < values.length; i++) {             // i меняется на каждой итерации
  sum += values[i];
}

output.textContent = `${appName}\nСумма: ${sum}`;
6) Типичные ошибки студентов (и как исправить)

Ошибка A: объявили аккумулятор через const

const sum = 0;
sum += 10; // ошибка

Исправление:

let sum = 0;
sum += 10;

1.3.2. Типичная ошибка (и как исправить)

Одна из самых распространённых ошибок при изучении JavaScript — использование const для переменных, значение которых должно изменяться в ходе выполнения алгоритма.

Описание ошибки

Студент объявляет переменную как const, а затем пытается изменить её значение:

const sum = 0;
sum += 10; // ошибка

В момент выполнения второй строки JavaScript выдаёт ошибку:

TypeError: Assignment to constant variable

Причина ошибки:

  • const запрещает переназначение значения переменной;
  • операция sum += 10 эквивалентна sum = sum + 10;
  • происходит попытка присвоить переменной новое значение, что недопустимо для const.
Почему это логическая ошибка проектирования

Переменная sum по смыслу является:

  • аккумулятором;
  • промежуточным результатом;
  • величиной, изменяющейся на каждом шаге алгоритма.

Следовательно, такая переменная по определению не может быть константой.

Корректное решение

Для переменных, значение которых изменяется, необходимо использовать let:

let sum = 0;
sum += 10; // корректно
Краткое правило для самопроверки

Перед объявлением переменной задай вопрос:

Будет ли это значение изменяться в процессе работы программы?

  • если нет → const
  • если да → let

Это правило применимо ко всем последующим лабораторным работам курса.

1.4. Типы данных (примитивы и объекты)

1.4.1. Примитивы (основные)

В JavaScript примитивные типы данных — это значения, которые:

  • не являются объектами;
  • хранятся и передаются по значению, а не по ссылке.

Понимание примитивов критично для алгоритмической логики, условий и сравнений.

1) number — числовой тип

В JavaScript нет разделения на целые и вещественные числа (int, float) — все числа относятся к типу number.

const price = 1500;     // number
const tax = 0.2;        // number
const total = price * (1 + tax);

Особенности:

  • поддерживаются отрицательные и дробные значения;
  • используется формат IEEE 754;
  • возможны специальные значения: NaN, Infinity, -Infinity.

Пример типичной проблемы:

const x = 0.1 + 0.2;
console.log(x); // 0.30000000000000004

Вывод: числа с плавающей точкой требуют осторожности при сравнениях.

2) string — строковый тип

string используется для хранения текстовых данных.

const title = "Заявка #12";
const message = "Ошибка обработки данных";

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

  • заголовки;
  • сообщения пользователю;
  • идентификаторы, коды, статусы.
3) boolean — логический тип

boolean принимает только два значения:

  • true
  • false

Используется в условиях, проверках и флагах состояния.

const isDone = false;

if (isDone) {
  console.log("Задача завершена");
} else {
  console.log("Задача в процессе");
}
4) null — осознанное отсутствие значения

null означает, что значение задано явно, но в данный момент ничего не содержит.

let user = null;

Важно:

typeof null === "object"; // историческая особенность JS
5) undefined — значение не задано

undefined означает:

  • переменная объявлена;
  • но значение ей ещё не присвоено.
let comment;
console.log(comment); // undefined
6) bigint и symbol (обзорно)
  • bigint — для очень больших целых чисел;
  • symbol — уникальные идентификаторы.

Для лабораторной работы №2 использование не требуется, но важно знать о существовании.

7) Ключевые различия null и undefined
Характеристика null undefined
Значение задано явно да нет
Переменная существует да да
Используется осознанно да нет
Тип (typeof) "object" "undefined"

1.4.2. Объекты (обзорно)

В JavaScript объекты относятся к ссылочным типам данных. Они:

  • хранятся по ссылке;
  • могут изменяться по содержимому даже при объявлении через const;
  • используются для моделирования сущностей предметной области.

Пример:

const ticket = {
  id: 1,
  title: "Не работает принтер",
  priority: 2
};

ticket.priority = 1;   // допустимо

1.5. Приведение типов и ввод данных: почему возникают ошибки

Одной из ключевых особенностей JavaScript является автоматическое (неявное) приведение типов. Это означает, что язык в ряде случаев сам пытается преобразовать значения к нужному типу, чтобы выполнить операцию.

С одной стороны, это делает язык гибким. С другой стороны — именно из-за этого возникает большое количество логических ошибок у начинающих разработчиков.

1.5.1. Пример типичной проблемы

const a = "10";
const b = "5";

console.log(a + b); // "105"

Причина:

  • переменные a и b имеют тип string;
  • оператор + для строк означает объединение.

1.5.2. Правильное решение: явное приведение типов

const a = Number("10");
const b = Number("5");

console.log(a + b); // 15

1.5.3. Проверка корректности числа (NaN)

const x = Number("abc"); // NaN
console.log(Number.isNaN(x)); // true

1.5.4. Практический пример с вводом

const inputValue = "1200";
const value = Number(inputValue);

if (Number.isNaN(value)) {
  console.log("Ошибка: введено не число");
} else {
  console.log("Значение принято:", value);
}

1.6. Операторы: арифметика, сравнение, логика

Операторы используются для вычислений, сравнений и построения логических условий.

1.6.1. Арифметические операторы

  • +, -, *, /, %

Пример:

const mod = 10 % 3;  // 1

1.6.2. Операторы сравнения: почему важно ===

  • === сравнивает значение и тип;
  • == может приводить типы автоматически.

Пример:

console.log(5 == "5");   // true
console.log(5 === "5");  // false

1.6.3. Логические операторы

  • && — И
  • || — ИЛИ
  • ! — НЕ

Пример:

const userAge = 19;
const isBlocked = false;

const hasAccess = userAge >= 18 && userAge < 65 && !isBlocked;
console.log(hasAccess);

1.7. Условия: ветвление логики

Основные конструкции ветвления:

  • if / else
  • switch

1.7.1. if / else

const score = 75;

if (score >= 90) {
  console.log("Отлично");
} else if (score >= 70) {
  console.log("Хорошо");
} else {
  console.log("Нужно улучшить");
}

1.7.2. switch

const status = "new";

switch (status) {
  case "new":
    console.log("Новая запись");
    break;
  case "done":
    console.log("Завершено");
    break;
  default:
    console.log("Неизвестный статус");
}

1.8. Циклы: повторение действий

Циклы используются для многократного выполнения действий.

1.8.1. for

for (let i = 0; i < 5; i++) {
  console.log(i);
}

1.8.2. while

let n = 3;

while (n > 0) {
  console.log(n);
  n--;
}

2. Задание

Цель: закрепить знания разделов 1.3–1.11 на материале своей предметной области.

Смысл лабораторной работы

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

Ключевой результат

Реализованный набор алгоритмов обработки данных, применимых к выбранной предметной области, с:

  • корректной реализацией на JavaScript;
  • обработкой типовых ошибок ввода;
  • демонстрацией работы через консоль/страницу;
  • фиксацией результатов в репозитории GitHub (единый проект семестра).

2.1. Задание к теме 1.3. Переменные и константы: let, const

Задание: Создайте “конфигурацию приложения” и счётчик действий пользователя.

Требования:

  1. Объявить const appConfig (объект), который содержит:

  2. appTitle — название системы по предметной области,

  3. defaultStatus — статус по умолчанию (например, "new"),
  4. minValueForFilter — порог для фильтрации (например, 800).
  5. Объявить let actionCount = 0.
  6. Увеличить actionCount 3 раза (любым способом: += 1, ++).
  7. Изменить содержимое appConfig (например, поменять minValueForFilter), но не переназначать сам объект.

Ожидаемый результат (консоль):

  • вывод actionCount (3)
  • вывод appConfig с обновлённым полем

2.2. Задание к теме 1.4. Типы данных: примитивы, объекты

Задание: Смоделируйте минимум 6 сущностей предметной области в виде объектов.

Требования к каждому объекту:

  • id (number)
  • title (string)
  • value (number)
  • status (string)
  • createdAt (string YYYY-MM-DD)

Ожидаемый результат:

  • console.log(...) выводит набор сущностей, отражающих вашу предметную область.

2.3. Задание к теме 1.5. Приведение типов и ввод данных

Задание: Смоделируйте ввод порога фильтрации как строки и корректно преобразуйте его в число.

Требования:

  1. Создать const inputMinValue = "800";
  2. Преобразовать в число: const minValue = Number(inputMinValue);
  3. Если Number.isNaN(minValue) → вывести сообщение об ошибке.
  4. Иначе → вывести в консоль minValue.

Ожидаемый результат:

  • корректный числовой minValue (800) и отсутствие NaN.

2.4. Задание к теме 1.6. Операторы: арифметика, сравнение, логика

Задание: Проверить “доступ” к операции в зависимости от параметров.

Требования:

  1. Создать:

  2. const userAge = 19;

  3. const isBlocked = false;

  4. Рассчитать:

  5. const hasAccess = userAge >= 18 && userAge < 65 && !isBlocked;

  6. Вывести hasAccess в консоль.

Ожидаемый результат:

  • true при корректных условиях.

2.5. Задание к теме 1.7. Условия: ветвление логики (if/else, switch)

Задание: Сформировать текст “описания статуса” для сущности предметной области.

Требования:

  1. Взять одну сущность предметной области (любой объект).

  2. Через switch (item.status) вывести:

  3. "Новая запись" для "new"

  4. "Завершено" для "done"
  5. "Неизвестный статус" для других

  6. Дополнительно через if/else вывести категорию по value:

  7. >= 1000 → "Высокое значение"

  8. >= 700 → "Среднее значение"
  9. иначе → "Низкое значение"

2.6. Задание к теме 1.8. Циклы: for, while

Задание: Реализовать повторяющееся действие и подсчитать количество сущностей со статусом "new".

Требования:

  1. Выполнить повторение действий с использованием цикла.
  2. Если status === "new" → увеличить счётчик.
  3. Вывести результат в консоль.

3. Итоговая задача: “Интерактивный вывод на экран по кнопкам” (ЛР1 → ЛР2)

Цель: продолжить логику простой верстки из ЛР1, добавив интерактивные кнопки и вывод результатов на страницу.

3.1. Модификация верстки index.html (кнопки + зона вывода)

В ваш index.html (в рамках уже созданной структуры ЛР1) добавить:

  1. В блок “Список …” (вторая секция) добавить кнопки:

  2. “Показать все записи”

  3. “Показать только NEW”

  4. “Показать статистику”

  5. Добавить область вывода (например, <pre>), куда будут выводиться данные.

Шаблон (адаптировать текст под предметную область):

<h1>Название вашей системы</h1>

<section>
  <h2>Создание записи</h2>
  <p>Форма будет реализована в следующих лабораторных работах</p>
</section>

<section>
  <h2>Список записей</h2>
  <p>Отображение данных будет добавлено позже</p>

  <div>
    <button id="btnAll">Показать все записи</button>
    <button id="btnNew">Показать только NEW</button>
    <button id="btnStats">Показать статистику</button>
  </div>

  <pre id="output"></pre>
</section>

3.2. Требования к логике

  • все данные берутся из набора данных вашей предметной области;
  • использовать const/let, циклы, условия, строгие сравнения ===;
  • результаты выводятся в output.textContent;

  • в “статистике” обязательно использовать:

  • сумму value;

  • максимум value;
  • количество status === "new";
  • фильтрацию по порогу minValue (ввод как строка → Number()).

3.3. Что считается “сложной задачей” в рамках ЛР2

В “Показать статистику” студент должен вывести структурированный отчёт, например:

  • Данные корректны
  • Всего записей: 6
  • Сумма value: 5200
  • Максимум value: 1500
  • Количество status="new": 4
  • Фильтр value >= 800: (список записей)

3.4. Требования к сдаче

В одном репозитории должны быть:

  • обновлённый index.html (кнопки + <pre id="output">);
  • обновлённый script.js (данные + логика + обработчики + вывод);
  • при необходимости — уточнение в README.md (что добавлено в ЛР2);
  • passport.md остаётся и используется дальше.

3.4. Для выполнения требуется

  1. Шаблон отчёта, указанный в описании лабораторной работы.
  2. Вариант задания, закреплённый за студентом на семестр и опубликованный в ЛМС.
  3. Требования к оформлению — согласно методическим указаниям в ЛМС или соответствующему разделу документации.
  4. Ссылка на репозиторий,прикрепляется студентом к отчету.

3.6. Запрет

❗ Запрещается использование систем искусственного интеллекта для выполнения лабораторной работы.

Работы, выполненные с использованием ИИ, полностью или частично скопированные, а также не сданные, оцениваются в 0 баллов без возможности доработки.

4. Контрольные вопросы

  1. Чем let отличается от const?
  2. Какие типы данных являются примитивами в JavaScript?
  3. Почему === предпочтительнее ==?
  4. Что такое NaN и как его проверить?
  5. Когда удобнее использовать switch, а когда if/else?
  6. В чём отличие for и while?
  7. Как console.log помогает при отладке?
  8. Почему важно приводить вводимые данные к нужному типу?
  9. Почему порядок условий критичен для корректной логики?
  10. Как эта лабораторная связана с последующими работами?

5. Чек-лист для самопроверки

Баллы Критерии оценки
10 Реализована логика обработки данных, предусмотрены проверки ввода, результаты выводятся в консоль и на страницу, изменения зафиксированы в GitHub
8 Логика реализована, но проверки частичные или вывод только в консоль/только на страницу
6 Реализована часть логики, слабая привязка к предметной области
4 Код формальный, без проверок
2 Есть только шаблон без работающей логики
0 Работа не сдана или выполнена с использованием ИИ

6. Шаблон отчёта

👉 Скачать шаблон отчёта