cari

Rumah >hujung hadapan web >tutorial js >Cara Membina Mesin Cipher Dengan JavaScript

Cara Membina Mesin Cipher Dengan JavaScript

Joseph Gordon-Levitt
Joseph Gordon-Levittasal
2025-02-14 09:34:11501semak imbas

Tutorial ini menunjukkan kepada anda bagaimana untuk membina mesin cipher Caesar menggunakan JavaScript. Cipher Caesar beralih setiap huruf dalam mesej sebilangan tempat.

How to Build a Cipher Machine with JavaScript

kami akan membuat halaman HTML dengan borang untuk memasukkan mesej dan nilai peralihan, dan div untuk memaparkan hasil yang disulitkan.

kod JavaScript termasuk:

    array abjad.
    • manipulasi dom untuk mengakses elemen bentuk.
    • pengendali acara untuk butang hantar.
    • fungsi
  • menggunakan cipher Caesar, mengendalikan aksara bukan alphabet dan sensitiviti kes. encrypt
Berikut adalah contoh kod siap. Eksperimen dengan membuat mesej rahsia!

Pertama, buat

: caesar.html 

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <title>Caesar Cipher</title>


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

</code>
HTML ini mencipta bentuk yang mudah. Input shift mungkir kepada 5, tetapi anda boleh menyesuaikannya.

Seterusnya, buat

dalam folder yang sama: main.js 

<code class="language-javascript">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;
  }
}</code>
Kod JavaScript ini mentakrifkan abjad, mendapat elemen bentuk, menambah pendengar acara untuk mengendalikan penyerahan borang, dan termasuk fungsi

yang melakukan cipher Caesar. Fungsi encrypt mengendalikan huruf besar; huruf kecil dikendalikan secara tersirat oleh kaedah encrypt dan includes. indexOf

How to Build a Cipher Machine with JavaScript Ini melengkapkan mesin cipher Caesar. Ingat bahawa ini adalah cipher yang mudah dan tidak sesuai untuk komunikasi yang selamat.

Soalan Lazim (Soalan Lazim)

(diringkaskan untuk keringkasan)

  • caesar cipher: penggantian cipher peralihan huruf bilangan tempat tetap.
    • Pelaksanaan JavaScript JavaScript:
  • Buat fungsi yang meleleh melalui rentetan, kedudukan surat peralihan, dan mengendalikan aksara dan kes bukan alphabetik.
    • aksara non-alphabet:
  • periksa jika watak adalah huruf sebelum beralih; Jika tidak, pastikan ia tidak berubah.
    • sensitiviti kes:
  • Tukar input ke huruf besar atau huruf kecil sebelum memproses, atau mengendalikan kes secara individu.
    • Decryption:
  • Peralihan aksara ke arah yang bertentangan dengan menggunakan nilai shift yang diketahui. Sekiranya tidak diketahui, cuba semua peralihan yang mungkin.
    • Pengoptimuman:
  • Nilai-nilai beralih pra-berkalkulasi atau gunakan untuk manipulasi rentetan yang lebih cepat. StringBuilder
    • Keselamatan:
  • tidak selamat; Gunakan algoritma moden seperti AES untuk penyulitan selamat.
    • Memperluas ke ciphers lain:
  • Abstrak logik peralihan ke dalam fungsi yang berasingan, boleh diganti dengan pelaksanaan cipher lain.
    • Ujian:
  • menyulitkan plaintext yang diketahui dengan nilai shift yang diketahui dan periksa output. Gunakan rangka kerja ujian untuk ujian automatik.
    • watak khas:
  • Buat abjad tersuai termasuk semua aksara yang dikehendaki.

Atas ialah kandungan terperinci Cara Membina Mesin Cipher Dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html String Array if for try using Event JS number function dom this display input Access Other
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：XMLHTTPREQUEST VS API FETCH UNTUK AJAXArtikel seterusnya：XMLHTTPREQUEST VS API FETCH UNTUK AJAX

Artikel berkaitan

Lihat lagi