Шифр Цезаря — один из древнейших шифров: каждая буква текста заменяется на букву, отстоящую от неё на фиксированное число позиций в алфавите. В этом проекте создадим веб-интерфейс для шифрования и расшифровки текста — аналог проекта из курса Python.
Проект объединяет: события, обработку форм, работу с DOM и строки в JavaScript.
Создать веб-страницу, которая:
textarea).textarea и input (type="number") для ввода данных.button или input type="submit" для кнопок действий.charCodeAt() и String.fromCharCode() для работы с кодами символов.addEventListener для обработки кликов.for для перебора символов строки.if для проверки: буква это или нет.Создай index.html с разметкой:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Шифр Цезаря</title>
</head>
<body>
<h1>Шифр Цезаря</h1>
Создай файл script.js. В JavaScript коды букв латинского алфавита идут подряд: A=65, B=66, ..., Z=90; a=97, ..., z=122. Используем charCodeAt() и String.fromCharCode():
function shiftChar(char, shift) {
const code = char.charCodeAt(0);
if (code >= 65 && code <= 90) {
return String.fromCharCode(((code - 65 + shift) % 26 + 26) % 26 + 65);
Подключи кнопки к функциям:
document.getElementById("encryptBtn").addEventListener("click", () => {
const text = document.getElementById("text").value;
const shift = parseInt(document.getElementById("shift").value) || 3;
const result = encrypt(text
Проверь: введи «Hello» и сдвиг 3 — зашифрованный текст должен быть «Khoor».
Для русского алфавита можно использовать строку с буквами и сдвигать по индексу:
const ru = "абвгдеёжзийклмнопрстуфхцчшщъыьэюя";
function shiftCharRu(char, shift, alphabet) {
const idx = alphabet.indexOf(char.toLowerCase());
if (idx === -1) return char;
const newIdx = (idx + shift + alphabet.length)
Подробнее — в домашнем задании.
textarea, input, кнопки, блок результатаМы создали веб-версию шифра Цезаря. Ты научился:
charCodeAt, String.fromCharCode).addEventListener.На следующем уроке — генератор историй в веб-версии.
1-25 — текст не изменится или преобразуется непредсказуемо.preventDefault у кнопок в форме — страница перезагрузится.Добавь поддержку русского алфавита. Используй строку с буквами для поиска индекса (см. подсказку в уроке).
Добавь кнопку «Взлом»: выводи все 33 варианта расшифровки (для русского) или 26 (для английского) в список на странице.
Реализуй копирование результата в буфер обмена: navigator.clipboard.writeText().
ROT13 — популярный вариант шифра Цезаря со сдвигом 13. Его особенность: шифрование и расшифровка — одна и та же операция. Добавь кнопку или режим «ROT13», который работает с фиксированным сдвигом 13.
Объедини шифрование и расшифровку в одну функцию caesar(text, shift, mode), где mode — "encrypt" или "decrypt".
Добавь кнопку «Определить сдвиг»: реализуй частотный анализ для русского текста. Самая частая буква в русском языке — «о». Найди самую частую букву в зашифрованном тексте, вычисли сдвиг до «о», примени расшифровку и выведи вариант.