Einen Morsecode-Übersetzer erstellen.

Im Sommer habe ich beschlossen, einen Morsecode-Übersetzer zu erstellen, um die Verwendung von JavaScript zu üben. Ich werde zeigen, wie ich es gemacht habe, indem ich meinen Code auch anhand von Diagrammen zeige und erkläre.

Wenn Sie zur Website gehen möchten, klicken Sie hier: https://morse-code-translater.vercel.app/

Schnelle HTML- und CSS-Überprüfung

Ich entschied, dass oben ein Morsecode-Titel mit einer Tippanimation und in der Mitte der Seite ein Formular mit zwei Textbereichen sein würde, einer, in den der Benutzer etwas eingeben kann, und einer, in dem der Text eingegeben werden kann Ausgabe. Dazwischen habe ich eine Umschaltschaltfläche (um von Text zu Morse oder von Morse zu Text wieder zu wechseln) mithilfe eines Symbols von Ionicons und eine Morsecode-Referenzschaltfläche mithilfe der Details- und Zusammenfassungs-Tags hinzugefügt. Bei Fokussierung gibt es im Eingabetextbereich (oben) eine Schaltfläche zum Übersetzen. Unten ist schließlich der Text zu sehen, der angibt, wie viele geheime Themen Sie gefunden haben. Ich habe CSS-Variablen verwendet, um das Thema der Websites schnell zu ändern, je nachdem, ob sich der Computer des Benutzers im dunklen oder hellen Modus befindet oder ob er eine spezielle Morsecode-Nachricht gefunden hat, die ihm ein geheimes Thema gibt.

---

JS-Algorithmus

1. Benutzereingaben sammeln und prüfen, ob sie gut sind.

Um die Benutzereingaben zu erhalten, müssen wir zunächst die benötigten Elemente speichern, nämlich die Textbereiche und die Benutzereingaben. Wir können die Benutzereingabe mit der Value-Eigenschaft erfassen, sobald auf die Schaltfläche „Übersetzen“ geklickt wird, und dann nur mit der Funktion checkIfValid() prüfen, ob Punkte und Striche verwendet werden.

//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 zu Text oder Text zu Morse?

Um dem Computer mitzuteilen, ob wir Morse in Text oder Text in Morse übersetzen, habe ich eine boolesche Variable namens isInputMorse erstellt (wie im obigen Beispiel verwendet), die mit „true“ beginnt. Wenn jedoch auf die Schaltfläche „Umschalten“ geklickt wird, ändert sich der Wert in den entgegengesetzten Wert (z. B. „wahr“ zu „falsch“). In der Funktion checkIfVaild() darf die Benutzereingabe nur Punkte und Bindestriche verwenden und die Variable isInputMorse muss auf „true“ gesetzt sein, um von Morse in Text zu übersetzen. Wenn diese Variable jedoch auf „false“ gesetzt ist, wird Text in Morse übersetzt. Auch die Platzhalter der Textbereiche ändern sich je nachdem, ob die Variable wahr oder falsch ist.

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. Übersetzen

Ich habe zwei Funktionen zum Übersetzen erstellt, morseToText() und textToMorse(), deren Funktion offensichtlich sein sollte. Die Morse-zu-Text-Funktion teilt die Benutzereingabe in ein zeichenweises Array auf, das dann mit morseRef.
zugeordnet wird

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

}

Als nächstes wird das neue Textarray zusammengefügt und im Ausgabetextbereich wird eine Ausgabe angezeigt, die der Benutzer sehen kann.

Die Text-zu-Morse-Funktion verwendet eine ähnliche Methode, jedoch ein umgekehrtes MorseRef-Objekt. Die Benutzereingabe wird in Großbuchstaben geschrieben und mit der umgekehrten morseRef zu Morse zugeordnet und dann wieder zusammengefügt, um als Morsecode-Ausgabe ausgegeben zu werden.

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

Hier ist ein Diagramm, das ich auf Figma erstellt habe, um die Funktionen visueller zu erklären.

Hinweise zu Geheimnissen

Ich habe meiner Website auch geheime Themen hinzugefügt. Sie können sie erhalten, indem Sie spezielle Morsecode-Nachrichten eingeben.

Hinweise:

1. Die am häufigsten in Notfällen verwendete Morsecode-Nachricht
2. Eine berühmte blinkende Morsecode-Nachricht während des Vietnamkrieges
3. Die erste Morsecode-Nachricht aller Zeiten

Das ist alles fürs Erste, danke fürs Lesen!

Das obige ist der detaillierte Inhalt vonEinen Morsecode-Übersetzer erstellen.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!