モールス信号変換器を作る。

夏の間、私は JavaScript の使い方を練習するためにモールス信号変換器を作ることにしました。実際にどのように作ったかを、図も交えてコードを示して説明します。

Web サイトにアクセスしたい場合は、ここをクリックしてください: https://morse-code-translater.vercel.app/

HTML と CSS の簡単なレビュー

私は、上部に入力アニメーション付きの モールス信号 タイトルを配置し、ページの中央に 2 つのテキスト領域 (ユーザーが入力できる領域とユーザーが入力できる領域) を持つフォームを配置することにしました。出力。それらの間に、Ionicons のアイコンを使用した切り替えボタン (テキストからモールス信号、またはモールス信号から再びテキストへ) と、詳細タグと概要タグを使用したモールス信号参照ボタンを追加しました。フォーカスすると、入力テキスト領域 (上部) に翻訳ボタンが表示されます。最後に、一番下には、見つけた秘密のテーマの数を示すテキストがあります。 CSS 変数を使用して、ユーザーのコンピューターがダーク モードかライト モードか、または秘密のテーマを与える特別なモールス信号メッセージを見つけたかどうかに基づいて、Web サイトのテーマをすばやく変更しました。

---

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() という 2 つの関数を作成しましたが、それらが何をするかは明らかです。モールス信号からテキストへの関数は、ユーザー入力を文字ごとの配列に分割し、モールス信号でマッピングします。

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();

}

次に、新しいテキスト配列が結合され、ユーザーが確認できる出力テキスト領域に出力が表示されます。

テキストからモールス信号への関数は同様の方法を使用しますが、モールス参照オブジェクトを反転させます。ユーザー入力はすべて大文字で入力され、反転されたモールス信号にマッピングされてモールス信号になり、再び結合されてモールス信号出力として提供されます。

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 中国語 Web サイトの他の関連記事を参照してください。