📘 Техническое руководство

Криптографический движок: создание шифра с нуля

💡 О чём этот туториал
Криптографический движок — программный компонент, объединяющий 8 алгоритмов шифрования. В этом руководстве мы покажем, как создать один из модулей движка — шифр Цезаря — с нуля на чистом JavaScript.

📌 Введение

В рамках вариативной части (вариант 2.2) реализован программный компонент «Криптографический движок», поддерживающий 8 классических шифров. Приложение написано на чистом JavaScript, HTML и CSS без использования внешних библиотек.

Ссылка на демо: https://msfelzhel.github.io/decoder-app/

🏗️ Архитектура компонента

Криптографический движок построен по принципу единого фасада, который управляет 8 изолированными модулями шифров.

┌─────────────────────────────────────────┐
│         Веб-интерфейс (демо-слой)       │
└─────────────────┬───────────────────────┘
                  │
┌─────────────────▼───────────────────────┐
│    Криптографический движок (ядро)      │
│  ┌─────────────────────────────────┐    │
│  │ 8 изолированных модулей шифров  │    │
│  └─────────────────────────────────┘    │
└─────────────────────────────────────────┘

    📁 Структура проекта:
    decoder-app/
    └── index.html          # Основной интерфейс (CSS + JavaScript внутри)

Компоненты приложения

🔐 Реализованные алгоритмы (8 шт.)

Рисунок 1 — Главный экран криптографического движка

Главный экран

Интерфейс с 8 алгоритмами шифрования

Рисунок 2 — Пример работы шифра Цезаря

Шифр Цезаря

Шифрование текста со сдвигом 3

📝 Пошаговая инструкция: создание модуля «Шифр Цезаря»

1 HTML-разметка

Создаём карточку шифра с полями ввода, сдвигом и кнопками:

<div class="cipher-card">
    <h3>🔐 Шифр Цезаря</h3>
    <input type="text" id="caesar-input" placeholder="Введите текст">
    <input type="number" id="caesar-shift" placeholder="Сдвиг (1–25)">
    <button onclick="caesarCipher()">🔒 Зашифровать</button>
    <button onclick="caesarDecipher()">🔓 Расшифровать</button>
    <p>📋 Результат: <span id="caesar-result"></span></p>
</div>

2 Функция шифрования (ядро движка)

Реализуем логику сдвига букв с поддержкой кириллицы:

function caesarCipher() {
    let text = document.getElementById('caesar-input').value;
    let shift = parseInt(document.getElementById('caesar-shift').value);
    let result = '';
    
    for (let i = 0; i < text.length; i++) {
        let char = text[i];
        let code = char.charCodeAt(0);
        
        // Английский алфавит (A-Z, a-z)
        if (code >= 65 && code <= 90) {
            result += String.fromCharCode(((code - 65 + shift) % 26) + 65);
        }
        else if (code >= 97 && code <= 122) {
            result += String.fromCharCode(((code - 97 + shift) % 26) + 97);
        }
        // Русский алфавит (А-Я, а-я)
        else if (code >= 1040 && code <= 1071) {
            result += String.fromCharCode(((code - 1040 + shift) % 32) + 1040);
        }
        else if (code >= 1072 && code <= 1103) {
            result += String.fromCharCode(((code - 1072 + shift) % 32) + 1072);
        }
        else {
            result += char;
        }
    }
    
    document.getElementById('caesar-result').innerText = result;
}
💡 Почему это движок? Функция caesarCipher() — это модуль ядра. Она не зависит от интерфейса: её можно вызвать из консоли, из другого скрипта или через API.

3 Функция расшифровки

Расшифровка — это шифрование с отрицательным сдвигом:

function caesarDecipher() {
    let text = document.getElementById('caesar-input').value;
    let shift = parseInt(document.getElementById('caesar-shift').value);
    let result = '';
    
    for (let i = 0; i < text.length; i++) {
        let char = text[i];
        let code = char.charCodeAt(0);
        
        if (code >= 65 && code <= 90) {
            result += String.fromCharCode(((code - 65 - shift + 26) % 26) + 65);
        }
        else if (code >= 97 && code <= 122) {
            result += String.fromCharCode(((code - 97 - shift + 26) % 26) + 97);
        }
        else if (code >= 1040 && code <= 1071) {
            result += String.fromCharCode(((code - 1040 - shift + 32) % 32) + 1040);
        }
        else if (code >= 1072 && code <= 1103) {
            result += String.fromCharCode(((code - 1072 - shift + 32) % 32) + 1072);
        }
        else {
            result += char;
        }
    }
    
    document.getElementById('caesar-result').innerText = result;
}

4 Блок-схема алгоритма

┌─────────────────┐
│  Ввод текста    │
│  и сдвига       │
└────────┬────────┘
         ▼
┌─────────────────┐
│ Цикл по каждому │
│ символу         │
└────────┬────────┘
         ▼
   ┌─────┴─────┐
   │ Символ —  │
   │ буква?    │
   └─────┬─────┘
     Да  │  Нет
┌────────┴────────┐
│ Определяем      │
│ алфавит (A-Z,   │   ┌──────────┐
│ a-z, А-Я, а-я) │   │ Оставляем│
└────────┬───────┘   │ без измен.│
         │           └─────┬────┘
         ▼                 │
┌─────────────────┐        │
│ Вычисляем новый │        │
│ код со сдвигом  │        │
└────────┬────────┘        │
         │                 │
         └────────┬────────┘
                  ▼
         ┌─────────────────┐
         │ Вывод результата │
         └─────────────────┘

✨ Модификации (творческая часть)

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

📌 Заключение

Мы создали один модуль криптографического движка — шифр Цезаря. Аналогично реализованы остальные 7 алгоритмов. Получившийся программный компонент может:

💡 Почему это технология / программный компонент?
Криптографический движок имеет чёткую архитектуру (ядро + фасад + модули), единый интерфейс, расширяемую структуру и может встраиваться в другие проекты — всё это соответствует определению «программный компонент» из технического задания.
← Вернуться к вариативной части