在夏天，我决定制作一个摩尔斯电码翻译器来帮助练习使用 JavaScript。我还将通过用图表展示和解释我的代码来展示我是如何做到这一点的。
如果您想访问其网站，请点击此处：https://morse-code-translater.vercel.app/
我决定顶部有一个 摩尔斯电码 标题，带有打字动画，页面中央有一个带有两个文本区域的表单，一个用于用户输入，一个用于显示输出。在它们之间，我添加了一个使用 Ionicons 图标的切换按钮（从文本到莫尔斯电码或再次从莫尔斯电码到文本）和使用详细信息和摘要标签的莫尔斯电码参考按钮。当聚焦时，输入文本区域（顶部）中有一个翻译按钮。最后底部是显示您找到了多少秘密主题的文本。我使用 CSS 变量来快速更改网站的主题，具体取决于用户的计算机是处于深色模式还是浅色模式，或者他们是否发现了特殊的莫尔斯电码消息，可以为他们提供秘密主题。
为了获取用户的输入，我们首先必须存储所需的元素，即文本区域和其中的用户输入。单击翻译按钮后，我们可以通过 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);
为了让计算机知道我们是将莫尔斯电码翻译成文本还是将文本翻译成莫尔斯电码，我创建了一个名为 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)");
}
});
我制作了两个翻译函数，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 上制作的图表，以便更直观地解释功能。
我还在我的网站添加了秘密主题，您可以通过输入特殊的摩尔斯电码消息来获取它们。
提示：
暂时就这些，感谢您的阅读！
以上是制作摩尔斯电码翻译器。的详细内容。更多信息请关注PHP中文网其他相关文章！
