在 Javascript 中使用 While 循环的 Pig 拉丁语翻译器答案

【问题标题】：Pig Latin translator using a While Loop in Javascipt在 Javascript 中使用 While 循环的 Pig 拉丁语翻译器
【发布时间】：2020-05-11 00:37:27
【问题描述】：

我儿子正在自学 JavaScript。（他太年轻了，不能在这里注册帐户。）他正在尝试使用“while 循环”编写一个 Pig 拉丁语翻译器。他现在的基本问题是如何对代码进行排序 - 所以用户输入单词，然后程序翻译它，然后结果出现在警告框中。他是新手，所以如果有人有任何友好的反馈，将不胜感激。

这是他得到的：

<HTML>

<HEAD>

  <SCRIPT LANGUAGE="Javascript">
    <!-- Beginning of JavaScript -
  </SCRIPT>

</HEAD>

<BODY bgcolor="Blue">

  <h3> Type some text then click TRANSLATE. </h3>

  <FORM>
    <INPUT NAME="wordToTranslate" TYPE=Text>
    <INPUT NAME="submit" TYPE=Button VALUE="TRANSLATE" onClick="alert(form.wordToTranslate.value)" style="font-size:1em;background:lime">
  </FORM>
  <script>
    while (wordToTranslate.substring(0, 1) = bcdfghjklmnpqrstvwxyz) {
      console.log(var wordWithoutFirstLetter = wordToTranslate.slice(0, 1);
          var wordWithoutLastLetters = wordToTranslate.slice(1) var wordToTranslate = wordWithoutFirstLetter + wordWithoutLastLetters;
          ++

          wordToTranslate + ay
  </script>

【问题讨论】：

首先要做的是打开浏览器的开发者工具（通常是 F12 会打开它）并学会喜欢控制台选项卡。它将显示错误。在 Stack Overflow 上，单击 Run code sn-p 也会显示它们。学习使用调试器是学习的另一个关键工具；它允许您逐行浏览代码并在每一步之后检查变量的状态——这是了解代码如何工作的好方法。最后，有大量的教程网站（Stack Overflow 不是其中之一）；先用那些。祝你好运。

标签： javascript string while-loop

【解决方案1】：

由于您正在寻求一般帮助，我会温和地建议如果他正在学习 JavaScript 和 HTML，他可以学习较新的版本，即 HTML5、ES6+ 和 CSS3。

以下基本上是他迄今为止所拥有的——不包括猪拉丁语翻译代码——但已移至更新的标准。

'use strict';

const btnTrans = document.getElementById('btnTrans');
const txtWord = document.getElementById('txtWord');

btnTrans.addEventListener('click', translate);

function translate() {
  console.log(txtWord.value);
}

body {
  background-color: blue;
}

button {
  font-size: 1em;
  background:lime
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <form>
      <input name="wordToTranslate" id="txtWord" type="text">
      <button type="button" id="btnTrans">Translate</button>
    </form>
  </body>
  <script src="script.js"></script>
</html>

请注意 html 上的 DOCTYPE。此外，所有 HTML 元素都是小写的，并且属性值被引用。 JavaScript 方面，按钮单击事件的事件侦听器连接在 JavaScript 代码中，而不是在 HTML 中。使用const 设置变量，其范围与var 不同。我还将内联样式移到了 CSS 文件中，并摆脱了旧的、已弃用的样式，例如 bgcolor。

像这样将代码分离到单独的文件中为整个应用程序的每个部分创建了明确的责任：HTML 是视图；可以查看的 CSS 样式，将来可以覆盖或更改； JavaScript 充当控制器。

我真的不希望它被选为这个问题的答案；相反，它是针对一般问题和网络世界新手的一般建议。欢迎登机！ =)

【讨论】：

【解决方案2】：

天哪，这段代码有很多错误。我真的建议先尝试一些更简单的例子。但是为了节省您将来的一些时间，这里是我在您的 JavaScript 中看到的（一些）问题。每一个都会导致错误并停止代码运行。

原始字符串不在引号或撇号内（例如，bcdfghjklmnpqrstvwxyz 应该是 "bcdfghjklmnpqrstvwxyz"）
尝试记录语法而不是字符串（或可以转换为字符串的对象）：console.log(var ...) 将导致错误
对字符串变量使用增量 (++) 运算符...
部分括号缺少右括号，大括号没有右大括号
您实际上永远不会从 HTML 元素中获取要使用的字符串（即，<INPUT> 的“值”）。

在首先使用一些更简单的示例并建立起来之后，我建议在谷歌上搜索一个 JavaScript pig latin 示例并将其用作学习更复杂概念的参考（例如将第一个字母与辅音匹配）。祝你好运！

【讨论】：