JavaScript 转换用户输入

Question

我目前正在创建一个 javascript 转换器以将用户输入更改为摩尔斯电码。

我有这个部分工作 - 请参阅 fiddle

在 javaScript 方面，我是一个相对初学者（因此这个项目试图改进）。我在翻译后试图删除输入的单词时陷入困境。例如"hello" 的结果将是： "HELLO. . . . . . - . . . - . . - - - "

我也把我的函数放在下面（我省略了字母数组）。

function encode() {


document.morsecode.letters.value = document.morsecode.letters.value.replace(/ /g," / ").toUpperCase();

var letters = document.morsecode.letters.value.split("");

for (i = 0; i < letters.length; i++) {

    if (letters[i] != " ") {

        if (window.letterCodes[letters[i]]) {

            document.morsecode.letters.value += letterCodes[letters[i]] + "  ";

        } 
    }
}
document.morsecode.letters.value

}

如果有人对我如何改进它有任何建议，将不胜感激！

Answer 1

您可以在新变量中生成编码字符串，完成后替换文本区域值：

function encode() {

    var letters = document.morsecode.letters.value.replace(/ /g," / ").toUpperCase();
    var converted_text = '';

    for (var i = 0; i < letters.length; i++) {
        if (window.letterCodes[letters[i]]) {
            converted_text += letterCodes[letters[i]] + "  ";
        }
    }
    document.morsecode.letters.value = converted_text;

}

Answer 2

这是一个很好的学习应用 Javascript。

我会在某些地方以不同的方式编写您的代码：

我会将摩尔斯电码存储在 JS 对象或数组中，然后从中创建地图。地图在演示中。它创建了一个 JS 对象，与下面的样式相同。如果你更喜欢 JS 对象，你也可以这样写（你使用了 JS 对象，但你以一种不寻常的方式定义了它）：
```
var letterCodes = {
    A: '. -',   
    B: '- . . .',
    ... };
```
使用更多的变量，因为它更容易阅读。
使用闭包/匿名函数(function () { ... } )(); 避免在全局范围内存储内容。要了解有关闭包的更多信息，请在 SO 中搜索它。
查看面向对象编程，但这可能是下一步，在你学习了基础知识之后。

您也可以在 jsFiddle 找到我的代码。

(function () {

    var letterCodes = [
        ". -", // code for A
        "- . . .",
        "- . - .",
        "- . .",
        ".", // E
        ". . - .",
        "- - .",
        ". . . .",
        ". .",
        ". - - -",
        "- . -",
        ". - . .",
        "- -",
        "- .",
        "- - -",
        ". - - .",
        "- - . -",
        ". - .",
        ". . .", // S
        "-", // T
        ". . -",
        ". . . -",
        ". - -",
        "- . . -",
        "- . - -",
        "- - . .", // letter Z
        " / "]; // code for /

    function createMap() {
        var obj = {};
        for (var i = 0; i < letterCodes.length; i++) {
            //console.log(i);
            if (i >= 26) {
                // special char at the end 
                // if you have more chars you should do it differently.
                //console.log(letterCodes[i]);
                obj['/'] = letterCodes[i];
            } else {
                obj[String.fromCharCode(97 + i).toUpperCase()] = letterCodes[i];
            }
        }
        //console.log(obj);
        return obj;
    };

    function encode() {

        var letterMap = createMap(),
            morseCode = '',
            inputText = '',
            letter = '',
            code = '';

        inputText = document.morsecode.letters.value.replace(/ /g, " / ");

        var letters = inputText.split("");
        console.log(letters);
        for (i = 0; i < letters.length; i++) {

            //if (letters[i] != " ") { // not needed
            letter = letters[i].toUpperCase();

            if (code = letterMap[letter]) {

                morseCode += code + "  ";

            }
            //}
        }
        console.log(inputText, morseCode);
        document.morsecode.letters.value = inputText + ': ' + morseCode;

    }
    
    window.encode = encode;
})();

<div class="input-area">

   <form name="morsecode">

    <textarea name="letters" class="textarea" columns="10" rows="10">Test</textarea>

   </form>

  </div>

  <div class="container">

   <a href="#" class="btn" onClick="encode()">Translate my message to morse code</a>

  </div>

JavaScript 转换用户输入

JavaScript convert a users input

javascript

input

converter