製作摩斯電碼翻譯器。

在夏天，我決定製作一個摩斯電碼翻譯器來幫助練習使用 JavaScript。我還將透過用圖表展示和解釋我的程式碼來展示我是如何做到這一點的。

如果您想造訪其網站，請點擊此處：https://morse-code-translater.vercel.app/

快速檢視 HTML 和 CSS

我決定頂部有一個 摩爾斯電碼 標題，帶有打字動畫，頁面中央有一個帶有兩個文字區域的表單，一個用於用戶輸入，一個用於顯示輸出。在它們之間，我添加了一個使用 Ionicons 圖標的切換按鈕（從文本到莫爾斯電碼或再次從莫爾斯電碼到文本）和使用詳細信息和摘要標籤的莫爾斯電碼參考按鈕。當聚焦時，輸入文字區域（頂部）中有一個翻譯按鈕。最後底部是顯示您找到了多少秘密主題的文字。我使用 CSS 變數來快速更改網站的主題，這取決於使用者的電腦是處於深色模式還是淺色模式，或者他們是否發現了特殊的莫爾斯電碼訊息，可以為他們提供秘密主題。

---

JS演算法

1. 收集使用者輸入並檢查其是否良好。

為了取得使用者的輸入，我們首先必須儲存所需的元素，也就是文字區域和其中的使用者輸入。點擊翻譯按鈕後，我們可以透過 value 屬性取得使用者輸入，然後只使用 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. 莫爾斯電碼轉簡訊還是簡訊轉莫爾斯電碼？

為了讓電腦知道我們是將莫爾斯電碼翻譯成文字還是將文字翻譯成莫爾斯電碼，我創建了一個名為isInputMorse 的布林變數（在上面的範例中使用），它以true 開頭。但是，如果單擊切換按鈕，則會變更為相反的值（例如：true 變為 false）。在checkIfVaild() 函數中，使用者輸入必須僅使用點和破折號，並將isInputMorse 變數設為true 才能將莫爾斯電碼轉換為文本，但如果該變數設為false，則它將把文字轉換為莫爾斯電碼。文字區域的佔位符也會根據變數的真假而改變。

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. 翻譯

我製作了兩個翻譯函數，morseToText() 和 textToMorse()，它們的功能應該很明顯。莫爾斯電碼轉文字功能將使用者輸入拆分為逐個字元的數組，然後使用 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();

}

接下來，新的文字陣列連接在一起，並在輸出文字區域中給出輸出供使用者查看。

文字轉莫爾斯電碼功能使用類似的方法，但反轉了 morseRef 物件。使用者輸入全部大寫並與反轉的 morseRef 映射為莫爾斯電碼，然後再次連接在一起作為莫爾斯電碼輸出。

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

這是我在 Figma 上製作的圖表，以便更直觀地解釋功能。

秘密提示

我還在我的網站上添加了秘密主題，您可以透過輸入特殊的摩斯電碼訊息來獲取它們。

提示：

1. 緊急情況下最常用的摩斯電碼訊息
2. 越戰期間著名的眨眼摩斯電碼資訊
3. 有史以來第一條莫爾斯電碼訊息

暫時就這些，感謝您的閱讀！

以上是製作摩斯電碼翻譯器。的詳細內容。更多資訊請關注PHP中文網其他相關文章！