如何使用JavaScript构建密码机-js教程-PHP中文网

如何使用JavaScript构建密码机

Joseph Gordon-Levitt

发布： 2025-02-14 09:34:11

原创

510 人浏览过

本教程向您展示了如何使用JavaScript构建Caesar Cipher机器。凯撒密码在消息中将每个字母移动一定数量的位置。>

How to Build a Cipher Machine with JavaScript

>我们将创建一个带有表单的HTML页面，以输入消息和移位值，并为显示加密结果的DIV。

JavaScript代码包括：

一个字母阵列。

> DOM操纵以访问表单元素。
提交按钮的事件处理程序。
函数应用凯撒密码，处理非字符的字符和案例灵敏度。
encrypt

首先，创建

：

caesar.html

>此HTML创建一个简单的表单。偏移输入默认为5，但您可以调整它。

<!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>

登录后复制

接下来，在同一文件夹中创建

：

main.js

此JavaScript代码定义了字母，获取表单元素，添加了事件侦听器以处理表单提交，并包含执行Caesar Cipher的函数。

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;
  }
}

登录后复制

函数处理大写字母；小写字母由

>和encrypt方法隐式处理。encrypt> includesindexOf

这完成了凯撒密码机。请记住，这是一个简单的密码，不适合安全通信。 How to Build a Cipher Machine with JavaScript >