JavaScript 转换用户输入

Question

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

我已经部分工作了 - 请参阅 fiddle

对于 javaScript，我是一个相对初学者(因此这个项目需要尝试和改进)。我在翻译后试图删除输入的单词时陷入困境。例如“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

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

我会在某些时候以不同的方式编写您的代码:

1. 我会将莫尔斯电码存储在 JS 对象或数组中，并从中创建 map 。 map 在演示中。它创建一个与下面相同样式的 JS 对象。如果您更喜欢 JS 对象，您也可以这样编写(您使用了 JS 对象，但以不寻常的方式定义了它):

   var letterCodes = {
       A: '. -',   
       B: '- . . .',
       ... };
   

2. 使用更多变量，因为这样更容易阅读。

3. 使用闭包/匿名函数(function () { ... } )(); 避免在全局范围内存储内容。要了解有关闭包的更多信息，请在 SO 中搜索。

4. 了解面向对象编程，但这可能是您学习基础知识后的下一步。

您也可以在 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>