~🎯📖pr. «030_Text.Highlighted.ForAudio» — работа над проектом. (шпаргалка)

🎯pr. «030_Text.Highlighted.ForAudio» — требование к стеку. — https://1.cbm.ua/?p=7806

🎯_pr. «030_Text.Highlighted.ForAudio» — тестировать программы на JS. — https://1.cbm.ua/?p=7821

npm test

npx serve

npx serve run

Live Server расширение для VS Code

https://tabulator.info — Tabulator | JavaScript Tables & Data Grids. — это популярная библиотека на языке JavaScript с открытым исходным кодом, предназначенная для создания интерактивных таблиц и дата-гридов (data grids) на веб-страницах.

Когда ты пишешь <script type="module" src="./src/main.js"></script>, ты говоришь браузеру:

«Эй, браузер! Сходи по адресу ./src/main.js, скачай этот файл как современный модуль и начни выполнять инструкции, которые там написаны. Если увидишь там команду import, сходи и за другими файлами тоже».

Так как мы используем модули (type="module"), просто открыть файл двойным кликом не получится (будет ошибка CORS). Тебе нужен локальный сервер.

«npx vitest run» что делает эта команда в отличии от «npx serve» ?

Эти две команды служат совершенно разным целям. Если коротко: одна проверяет логику (черновик), а другая показывает результат (чистовик).

1. `npx vitest run` — Это «Проверка знаний»

Эта команда запускает тесты. Она не открывает браузер и не показывает твой сайт.

Что делает: Ищет файлы с расширением .test.js, запускает их внутри Node.js, сравнивает результаты в expect и выдает отчет в терминале.
Для чего: Чтобы убедиться, что твои функции работают правильно и ты ничего не сломал после правок кода.
Результат: Сообщение в консоли: PASS (пройдено) или FAIL (ошибка).

2. `npx serve` — Это «Выставка работ»

Эта команда запускает локальный веб-сервер.

Что делает: Берет твою папку с файлами и «превращает» её в настоящий сайт, доступный по адресу вроде http://localhost:3000.
Для чего: Чтобы ты мог открыть index.html в браузере и увидеть, как сайт выглядит, работают ли кнопки и отображаются ли данные. Без сервера (просто кликом по файлу) модули import/export в браузере работать не будут.
Результат: Работающая ссылка, которую можно вставить в Chrome.

Главные отличия (Таблица)

Характеристика	`npx vitest run`	`npx serve`
Цель	Найти баги в коде	Увидеть результат в браузере
Где смотреть	В терминале (черное окно)	В браузере (Chrome, Safari)
Что запускает	Тестовые скрипты	HTML-страницу
Нужен ли HTML?	Нет, тестирует только чистый JS	Да, без HTML нечего показывать
Отношение к `import`	Работает само по себе	Работает только через HTTP-протокол

Как это выглядит в рабочем процессе:

Ты написал функцию filterAdults.
Запустил npx vitest run, чтобы убедиться, что математика фильтрации работает верно (18 лет — ок, 17 лет — не ок).
Когда тесты стали «зелеными», ты запускаешь npx serve, открываешь браузер и смотришь, красиво ли этот список отображается на странице.

А что такое `npx`?

Это маленькая утилита, которая идет в комплекте с Node.js. Она позволяет запустить программу (vitest или serve) без её предварительной установки в систему. Она как бы говорит: «Найди эту программу в интернете, запусти один раз и забудь».

«npx vitest run» чем «npm test» отличаються ?

На практике это часто одно и то же, но между ними есть важная техническая разница: npm test — это «ярлык», а npx vitest run — это прямой вызов инструмента.

Вот подробный разбор:

1. `npm test` (Ярлык в файле package.json)

Это встроенная команда менеджера пакетов NPM. Когда вы её запускаете, она заглядывает в ваш файл package.json в раздел "scripts" и смотрит, что вы там написали под словом test.

Как это выглядит в package.json:JSON"scripts": { "test": "vitest run" }
Плюс: Вам не нужно помнить, какой именно тестовый фреймворк вы используете (Vitest, Jest или Mocha). Вы просто всегда пишете npm test, и проект сам знает, что запустить.

2. `npx vitest run` (Прямой запуск)

Эта команда обращается напрямую к пакету vitest, минуя настройки вашего проекта.

npx — это инструмент, который находит исполняемый файл vitest внутри папки node_modules и запускает его.
run — это флаг для Vitest, который говорит: «Запусти тесты один раз и закройся» (без него Vitest перейдет в режим слежения и будет ждать изменений в файлах).

Главные отличия

Признак	`npm test`	`npx vitest run`
Что это?	Стандартная команда NPM (алиас)	Прямой вызов утилиты
Где настроено?	В файле `package.json`	Не требует настройки (если пакет установлен)
Гибкость	Можно спрятать за ней сложную команду	Нужно прописывать все флаги вручную
Универсальность	Работает в любом проекте (стандарт)	Работает только если установлен Vitest

Как это работает в жизни (Пример)

Представьте, что вы пришли в новый проект. Вы не знаете, на чем там написаны тесты.

Вы пишете npm test.
NPM смотрит в настройки и видит: «Ага, здесь тесты запускаются через Vitest» (или через Jest).
Он запускает нужную программу за вас.

npx vitest run чаще используют, когда хотят быстро запустить тесты с каким-то специфическим флагом, которого нет в package.json, или если проект совсем простой и вы еще не настраивали скрипты.

Итог

Если в package.json в разделе "scripts" написано "test": "vitest run", то команды абсолютно идентичны.
Разработчики предпочитают использовать npm test, потому что это короче и является общепринятым стандартом.

как писать функию которая получает аргумен и возращает результа в случае если в качестве аргумента будет передана переменная с пустым значением. Нужно ли в функии обрабатывать такие моменты? Как правельно посать функии?

Написание функций — это фундамент программирования. Обработка «пустых» значений (Null, None, undefined) — одна из самых важных частей написания надежного кода.

Ниже разберем, как это делать правильно, на примере языка Python (он наиболее нагляден), но эти принципы применимы к JS, PHP и другим языкам.

Нужно ли обрабатывать пустые значения?

Да, обязательно. Если ваша функция ожидает строку, а получает «ничего», программа может «упасть» с ошибкой (например, TypeError).

Существует два основных подхода:

LBYL (Look Before You Leap): Сначала проверяем, не пусто ли в переменной, а потом выполняем действие.
EAFP (Easier to Ask for Forgiveness than Permission): Пробуем выполнить действие, и если возникла ошибка — ловим её.

Пример на Python (LBYL):

Python

def greet_user(name):
    # Проверяем, не является ли имя пустым (None или пустая строка)
    if not name:
        return "Привет, гость!"
    
    return f"Привет, {name}!"

print(greet_user("Алексей")) # Результат: Привет, Алексей!
print(greet_user(None))      # Результат: Привет, гость!

Как правильно писать функции: чек-лист

Хорошая функция должна следовать принципу Single Responsibility (одна функция — одна задача).

1. Понятное название

Название должно быть глаголом и четко описывать, что делает функция: get_user_balance, calculate_total, send_email.

2. Типизация и значения по умолчанию

В современных языках лучше явно указывать, какой тип данных вы ждете. Это помогает избежать ошибок еще на этапе написания кода.

Python

def calculate_area(width: float, height: float = 1.0) -> float:
    """Считает площадь прямоугольника."""
    return width * height

3. Обработка исключений (Ошибок)

Если функция может сломаться (например, деление на ноль или работа с базой данных), используйте блоки try-except.

4. Документирование

Всегда добавляйте короткое описание (docstring), чтобы через месяц вы сами понимали, что делает этот код.

Сравнение: «Плохая» vs «Хорошая» функция

Признак	Плохая функция	Хорошая функция
Логика	Делает 5 дел одновременно	Решает одну конкретную задачу
Аргументы	Принимает 10 аргументов без описания	Принимает минимум данных, есть типы
Пустые данные	Игнорирует (приводит к крашу)	Проверяет и возвращает понятный ответ
Результат	Иногда возвращает число, иногда текст	Всегда возвращает предсказуемый тип данных

Пример «идеальной» функции

Давайте напишем функцию, которая обрабатывает список чисел:

Python

def double_numbers(numbers: list) -> list:
    # 1. Проверка на пустоту
    if numbers is None:
        return []
    
    # 2. Основная логика (используем list comprehension)
    try:
        return [n * 2 for n in numbers]
    except TypeError:
        # 3. Обработка ошибки, если в списке не числа
        print("Ошибка: в списке должны быть только числа!")
        return []

# Тесты:
print(double_numbers([1, 2, 3])) # [2, 4, 6]
print(double_numbers(None))      # []

~🎯📖pr. «030_Text.Highlighted.ForAudio» — работа над проектом. (шпаргалка)

1. npx vitest run — Это «Проверка знаний»

2. npx serve — Это «Выставка работ»

Главные отличия (Таблица)

Как это выглядит в рабочем процессе:

А что такое npx?

1. npm test (Ярлык в файле package.json)

2. npx vitest run (Прямой запуск)

Главные отличия

Как это работает в жизни (Пример)

Итог

Нужно ли обрабатывать пустые значения?

Пример на Python (LBYL):

Как правильно писать функции: чек-лист

1. Понятное название

2. Типизация и значения по умолчанию

3. Обработка исключений (Ошибок)

4. Документирование

Сравнение: «Плохая» vs «Хорошая» функция

Пример «идеальной» функции

1. `npx vitest run` — Это «Проверка знаний»

2. `npx serve` — Это «Выставка работ»

А что такое `npx`?

1. `npm test` (Ярлык в файле package.json)

2. `npx vitest run` (Прямой запуск)