Membuat Penterjemah Kod Morse.

Semasa musim panas, saya memutuskan untuk membuat Penterjemah Kod Morse untuk membantu berlatih menggunakan JavaScript. Saya akan menunjukkan cara saya membuatnya dengan menunjukkan dan menerangkan kod saya dengan gambar rajah juga.

Jika anda ingin pergi ke tapak webnya, klik di sini: https://morse-code-translater.vercel.app/

Semakan HTML dan CSS pantas

Saya memutuskan bahagian atas akan mempunyai tajuk Kod Morse dengan animasi menaip dan di tengah halaman borang dengan dua kawasan teks, satu di mana pengguna boleh memasukkan dan satu yang akan keluaran. Di antara mereka saya menambah butang suis (untuk pergi dari teks ke morse atau morse ke teks sekali lagi) menggunakan ikon daripada Ionicons dan butang rujukan kod Morse menggunakan butiran dan teg ringkasan. Apabila difokuskan, terdapat butang terjemah dalam kawasan teks input (bahagian atas). Akhir sekali di bahagian bawah ialah teks yang menunjukkan berapa banyak tema rahsia yang anda temui. Saya menggunakan pembolehubah CSS untuk menukar tema tapak web dengan cepat berdasarkan sama ada komputer pengguna berada dalam mod gelap atau terang atau jika mereka menemui mesej kod Morse khas yang akan memberi mereka tema rahsia.

---

Algoritma JS

1. Mengumpul Input Pengguna dan menyemak sama ada ia bagus.

Untuk mendapatkan input pengguna kita perlu menyimpan elemen yang diperlukan, iaitu kawasan teks dan input pengguna di dalamnya. Kami boleh mengambil input pengguna dengan sifat nilai sebaik sahaja butang terjemah diklik, kemudian semak sama ada ia menggunakan titik dan sempang hanya dengan fungsi checkIfValid().

//storing the elements
var InputTextArea = document.getElementById("morseTextArea");
var OutputTextArea = document.getElementById("textArea");
var translateButton = document.querySelector(".translateBtn");
//storing the user input from the text area element
var input = InputTextArea.value.toString("");


function checkIfValid() {
  input = InputTextArea.value.toString("");
  if (isInputMorse && input.match(/[a-zA-Z0-9_@#$%^&*()]/g) === null) {
    morseToText();
    return console.log(input.split(" "));
  }
  if (!isInputMorse) {
    textToMorse();
    return console.log(input.split(" "));
  } else {
    InputTextArea.value = "";
  }


translateButton.addEventListener("click", checkIfValid);

---

2. Morse ke teks atau teks kepada Morse?

Untuk memberitahu komputer sama ada kita menterjemah morse kepada teks atau teks kepada morse, saya mencipta pembolehubah boolean dipanggil isInputMorse (dilihat digunakan dalam contoh di atas) yang bermula sebagai benar. Walau bagaimanapun, jika butang suis diklik maka ia berubah kepada nilai yang bertentangan (cth: benar kepada palsu). Dalam fungsi checkIfVaild() input pengguna mesti menggunakan hanya titik dan sengkang dan menetapkan pembolehubah isInputMorse kepada benar untuk menterjemah daripada morse kepada teks, tetapi jika pembolehubah itu ditetapkan kepada palsu maka ia akan menterjemahkan teks kepada morse. Pemegang tempat bagi kawasan teks juga berubah berdasarkan sama ada pembolehubah itu benar atau salah.

var isInputMorse = true;
var swapBtn = document.getElementById("swapBtn");

swapBtn.addEventListener("click", () => {
  isInputMorse = !isInputMorse;
  OutputTextArea.value = "";
  InputTextArea.value = "";
  if (!isInputMorse) {
    InputTextArea.setAttribute("placeholder", "Text(Input)");
    OutputTextArea.setAttribute("placeholder", "Morse(Output)");
  } else {
    InputTextArea.setAttribute("placeholder", "Morse(Input)");
    OutputTextArea.setAttribute("placeholder", "Text(Output)");
  }
});

---

3. Menterjemah

Saya membuat dua fungsi untuk menterjemah, morseToText() dan textToMorse() yang sepatutnya jelas tentang apa yang mereka lakukan. Fungsi morse kepada teks membahagikan input pengguna kepada tatasusunan aksara demi aksara yang kemudiannya dipetakan dengan morseRef.

var morseRef = {
  ".-": "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",
  ".----": "1",
  "..---": "2",
  "...--": "3",
  "....-": "4",
  ".....": "5",
  "-....": "6",
  "--...": "7",
  "---..": "8",
  "----.": "9",
  "-----": "0",
  "/": " ",
  "--..--": ",",
  "..--..": "?",
  "-.-.-.": ";",
  "---...": ":",
  "-....-": "-",
  "-..-.": "/",
  ".----.": "'",
  "-.-.--": "!",
};

function morseToText() {
    let str = input
    .split(" ")
    .map((code) => morseRef[code])
    .join("");
    OutputTextArea.value = str;
    lookForSecrets();

}

Seterusnya tatasusunan teks baharu dicantumkan dan output diberikan dalam kawasan teks output untuk dilihat oleh pengguna.

Teks kepada fungsi morse menggunakan kaedah yang serupa, tetapi objek morseRef terbalik. Input pengguna dimasukkan ke dalam semua huruf besar dan dipetakan dengan morseRef terbalik untuk menjadi Morse, dan kemudian digabungkan sekali lagi untuk diberikan sebagai output kod Morse.

var reversedMorseRef = {};

for (var key in morseRef) {
  if (morseRef.hasOwnProperty(key)) {
    reversedMorseRef[String(morseRef[key])] = key;
  }

function textToMorse() {
  let textStr = input
    .toUpperCase()
    .split("")
    .map((text) => reversedMorseRef[text])
    .join(" ");
  OutputTextArea.value = textStr;
}

Berikut ialah gambar rajah yang saya buat pada Figma untuk penjelasan yang lebih visual tentang fungsi.

Petua kepada Rahsia

Saya juga menambahkan tema rahsia pada tapak web saya, anda boleh mendapatkannya dengan memasukkan mesej kod Morse khas.

Petua:

1. Mesej kod Morse yang paling biasa digunakan dalam kecemasan
2. Mesej kod morse berkelip yang terkenal semasa perang Vietnam
3. Mesej kod morse pertama yang pernah dibuat

Itu sahaja buat masa ini, terima kasih kerana membaca!

Atas ialah kandungan terperinci Membuat Penterjemah Kod Morse.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!