모스 부호 번역기 만들기.-JS 튜토리얼-php.cn

모스 부호 번역기 만들기.

WBOY

풀어 주다： 2024-08-21 06:12:32

원래의

1030명이 탐색했습니다.

여름 동안 저는 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. 모스에서 문자로, 아니면 문자로 모스로 보내나요?

모르스를 텍스트로 변환하는지, 아니면 텍스트를 모스로 변환하는지 컴퓨터에 알리기 위해 true로 시작하는 isInputMorse(위 예에서 사용됨)라는 부울 변수를 만들었습니다. 그러나 스위치 버튼을 클릭하면 반대 값으로 변경됩니다(예: true에서 false로). checkIfVaild() 함수에서 사용자 입력은 점과 대시만 사용해야 하며 모스에서 텍스트로 변환하려면 isInputMorse 변수를 true로 설정해야 합니다. 그러나 해당 변수가 false로 설정되면 텍스트를 모스로 변환합니다. 텍스트 영역의 자리 표시자도 변수가 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에서 만든 다이어그램입니다.
Making a Morse Code Translator.