Szyfrator na żywo: zdarzenie input

Praktyka: teksty i szyfry - JavaScript od podstaw: konsola (HTML/CSS/JS)

Druga wersja nie potrzebuje przycisku: zdarzenie `input` zachodzi po każdej zmianie pola, więc wynik i licznik znaków aktualizują się przy każdym naciśnięciu klawisza. Jedna funkcja `update` obsługuje oba pola. Przycisk "Odszyfruj" zamienia wynik z powrotem na tekst jawny (to samo przesunięcie ze znakiem minus), a puste albo błędne przesunięcie (`Number.isInteger`) daje komunikat w akapicie `#error` zamiast dziwnego wyniku.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Szyfr Cezara na żywo</title>
  <style>
    body { font-family: sans-serif; max-width: 32em; }
    label { display: block; margin-top: 0.6em; }
    textarea, input { font: inherit; padding: 0.3em; }
    textarea { width: 100%; height: 4em; }
    button { font: inherit; margin-top: 0.6em; padding: 0.3em 0.8em; }
    #result { font-family: monospace; font-size: 1.2em; background: #eef2ff; padding: 0.5em; min-height: 1.2em; }
    .error { color: #b91c1c; }
  </style>
</head>
<body>
  <h1>Szyfr Cezara na żywo</h1>
  <label>Tekst: <textarea id="text"></textarea></label>
  <label>Przesunięcie: <input id="shift" type="number" value="3"></label>
  <p id="count">Znaków: 0</p>
  <p id="error" class="error"></p>
  <p id="result"></p>
  <button id="decode">Odszyfruj wynik</button>
  <p id="plain"></p>
  <script>
    function shiftChar(ch, k) {
      const code = ch.charCodeAt(0);
      if (code >= 65 && code <= 90) {
        return String.fromCharCode(((code - 65 + k) % 26 + 26) % 26 + 65);
      }
      if (code >= 97 && code <= 122) {
        return String.fromCharCode(((code - 97 + k) % 26 + 26) % 26 + 97);
      }
      return ch;
    }

    function caesar(text, k) {
      let result = '';
      for (const ch of text) {
        result += shiftChar(ch, k);
      }
      return result;
    }
    const textField = document.getElementById('text');
    const shiftField = document.getElementById('shift');
    const result = document.getElementById('result');
    const error = document.getElementById('error');

    function readShift() {
      const k = Number(shiftField.value);
      if (shiftField.value === '' || !Number.isInteger(k)) return null;
      return k;
    }

    function update() {
      document.getElementById('count').textContent = 'Znaków: ' + textField.value.length;
      const k = readShift();
      if (k === null) {
        error.textContent = 'Przesunięcie musi być liczbą całkowitą.';
        result.textContent = '';
        return;
      }
      error.textContent = '';
      result.textContent = caesar(textField.value, k);
    }

    textField.addEventListener('input', update);
    shiftField.addEventListener('input', update);

    document.getElementById('decode').addEventListener('click', () => {
      const k = readShift();
      if (k !== null) {
        document.getElementById('plain').textContent = caesar(result.textContent, -k);
      }
    });

    textField.value = 'Witaj, Cezarze!';
    update();
  </script>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu JavaScript od podstaw: konsola·Zaloguj się, aby zapisać postęp na koncie.