JavaScriptを使用して暗号マシンを構築する方法-jsチュートリアル-php.cn

JavaScriptを使用して暗号マシンを構築する方法

Joseph Gordon-Levitt

リリース： 2025-02-14 09:34:11

オリジナル

522 人が閲覧しました

このチュートリアルでは、JavaScriptを使用してCaesar暗号マシンを構築する方法を示しています。シーザー暗号は、メッセージに各文字を特定の数の場所にシフトします。

How to Build a Cipher Machine with JavaScript

メッセージとシフト値を入力するフォームを備えたHTMLページと、暗号化された結果を表示するDIVを作成します。

JavaScriptコードには以下が含まれます

アルファベット配列。

フォーム要素にアクセスするためのDOM操作。

送信ボタンのイベントハンドラー。
an
>
完成したコードの例を次に示します。秘密のメッセージの作成を試してみましょう！encrypt

：

を作成します

このHTMLは、シンプルなフォームを作成します。 Shift入力はデフォルトですが、調整できます。次に、同じフォルダーでcaesar.htmlを作成します：

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>Caesar Cipher</title>
</head>
<body>
  <h1>Caesar Cipher</h1>
  <form>
    <label>Plaintext:</label>
    <textarea name='plaintext'>Top Secret</textarea><br>
    <label>Shift:</label>
    <input type='number' name='shift' value='5' min='1' max='26'>
    <input type='submit' value='encrypt'>
  </form>
  <h2>Output</h2>
  <div id='output'></div>
  <🎜>
</body>
</html>

ログイン後にコピー

このJavaScriptコードは、アルファベットを定義し、フォーム要素を取得し、イベントリスナーを追加してフォームの提出を処理し、CAESAR暗号を実行する

関数を含みます。

関数は大文字を処理します。小文字は、main.jsおよび

メソッドによって暗黙的に処理されます。

const alphabet = [
  'A','B','C','D','E','F',
  'G','H','I','J','K','L',
  'M','N','O','P','Q','R',
  'S','T','U','V','W','X',
  'Y','Z'
];

const form = document.forms[0];
const output = document.getElementById('output');

form.addEventListener ('submit',event => {
  event.preventDefault();
  output.innerHTML = [...form.plaintext.value].map(char => encrypt(char)).join('');
});

function encrypt(char) {
  const shift = Number(form.shift.value);
  if (alphabet.includes(char.toUpperCase())) {
    const position = alphabet.indexOf(char.toUpperCase());
    const newPosition = (position + shift)%26;
    return alphabet[newPosition];
  } else {
    return char;
  }
}

ログイン後にコピー

encryptencrypt includesこれにより、シーザー暗号マシンが完成します。これはシンプルな暗号であり、安全な通信には適していないことを忘れないでください。 indexOf

よくある質問（FAQ）

（簡潔にするために要約） How to Build a Cipher Machine with JavaScript