数字之和，以逗号分隔

我对HTML非常陌生，因此我决定尝试将我所知道的内容放入HTML页面，该页面允许您输入任意数量的数字，并用逗号分隔，并显示以下所有数字的总和。

 <!DOCTYPE html>

<html>

<head>
  <title>Sum of two numbers</title>
</head>

<body>
  <h1>Enter any amount of numbers separated by a comma:</h1>
  <input id="nums" type="text" required="required" />
  <button onclick="sum()">Get sum</button>
  <h3 id="sum"></h3>

  <script lang="javascript">
    function sum() {
      sumofnums = 0;
      nums = document.getElementById("nums").value.split(",");
      for (i = 0; i < nums.length; i++) {
        sumofnums += parseInt(nums[i]);
      }
      document.getElementById("sum").innerHTML = sumofnums;
    }
  </script>
</body>

</html>

我的代码中有不良做法吗？

#1 楼

HTML或XHTML？哪个版本？要清楚。

您的文件不明确。使用空元素标记语法<input ... */>*表示（不是强制性要求）它是XHTML，而缺少名称空间声明则表示它不是XHTML。

我建议始终清楚文档是否为HTML。或XHTML。我推荐XHTML，因为解析XHTML比解析HTML更简单，并且HTML5的定义方式是XHTML5文档（或多或少）是HTML5文档的子集。关键字是polyglot语法。

在您的上下文中也许很清楚，但是对于审阅者来说，没有足够的信息对我们来说，您的服务器将其用作text/html还是application/xhtml+xml。

请注意，<!DOCTYPE html>并未充分声明HTML5。 HTML5规范规定HTML5文档应具有<!DOCTYPE html>形式的doctype声明。但是，它并未声明具有此类doctype声明的所有内容均为HTML5。它还不会（也不能）阻止任何其他规范也将<!DOCTYPE html>声明用于HTML5以外的其他HTML变体。此外，它允许XHTML5也使用完全相同的<!DOCTYPE html>声明。请参见此内容。

我建议将XHTML5与多语言语法一起使用，该语法是HTML5和XHTML5的“公共子集”。基本上，可以使用XML解析器对HTML5进行解析。我出于多种原因推荐这样做。

XML的解析规则更简单，因此使用XML语法的XSLT之类的工具自动处理文档更简单/可能。
您可以创建DTD或XML模式来进一步验证语法。具有XML名称空间的XML Schema允许您在单个文档中验证不同的基于XML的语言（例如XHTML和SVG）的混合。

（这很遗憾，WhatWG的人员对XML及其功能如此无知。这很可惜，WhatWG的人员不得不重新发明轮子，并宣布HTML5是除SGML和XML之外的一种自身的标记语言。正如我们在对<!DOCTYPE>的讨论中所看到的那样，这只会使人们感到困惑。）

声明编码

建议始终声明编码。并且应该在前1024个字节内声明编码。

服务器可以通过4种方式向客户端声明（X）HTML文档的编码：

HTTP Content-Type标头：服务器将向客户端发送类似Content-Type: text/html; charset=UTF-8或Content-Type: application/xhtml+xml; charset=UTF-8的内容。
XML声明（仅适用于XHTML，不适用于HTML），作为文档的第一行：<?xml version="1.0" encoding="UTF-8"?>。
声明Content-Type的元元素，例如：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> resp.。 <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />

声明Charset的元元素，例如：<meta charset="UTF-8" />

有关更多信息，请参见此。

文档大纲

文档的轮廓如下所示：

输入任意数量的数字，并用逗号分隔：

（跳过级别）

（空标题）

我怀疑此轮廓是否合理。

请记住，<h1/>，<h2/>等用于标题。如果您只需要一个带有大文本但没有标题语义的段落，请改用普通段落并用CSS设置样式。

，也不建议跳过级别。对于<h*N*/>元素，下一个标题的级别应不大于N+1。

如何声明脚本语言

在<script/>上声明脚本语言的正确方法元素是这样的：

<script type="text/javascript">
    // ...
</script>

如果您知道用户代理支持HTML5或按预期运行，则实际上可以省略脚本语言的声明：

如果缺少该属性，则使用默认值： “文本/ javascript”。

lang属性实际上是用于描述内容语言的，例如：

<h1 lang="en">Hi, <span lang="es">Hola</span>, <span lang="de">Hallo und <span lang="de-BY">Servus</span></span>!</h1>

您所做的实际上是将<script/>元素的内容声明为不存在的名为JavaScript的自然语言。

命名约定

因为JavaScript和Java以某种方式共同诞生了，它们遵循相同的命名约定。也就是说，我们还将camelCase用于JavaScript中的变量和函数。

您的变量sumofnums应该命名为sumOfNums。

局部变量与全局变量

在JavaScript中，每当您分配一个没有声明的变量时，它都是隐式全局的。需要使用var关键字显式声明局部变量。

应声明变量，如下所示：

var sumOfNums = 0;
var nums = document.getElementById("nums").value.split(",");

对于i是true。
可以在for -loop中声明它，就像在Java中一样：

for (var i = 0; i < nums.length; i++) {
  sumOfNums += parseInt(nums[i]);
}

但是请注意，JavaScript中的作用域只是全局或局部函数。块未定义变量的新作用域。

用户输入验证

如果用户输入废话，您可能想告诉用户而不是默默地失败。 JavaScript支持正则表达式，以备不时之需。但是无论如何，您想处理parseInt()失败。

JavaScript支持与try-catch-finally非常相似的Java异常处理，您可能想要这样做并告诉用户虚假输入。

required的<input/>属性

required的<input/>属性用于表单提交。因为您在表单外部使用<input/>元素，所以没有表单提交，因此required属性没有意义。

Indentation

一致的缩进是最重要的，您
在JavaScript中没有正式的缩进标准或约定。

尽管社区已经从Java中获取了很多规则，包括4位缩进，但是一些软件工匠（例如Robert） C. Martin建议，当今的缩进实际上应该是2个空格，而不是4个空格。

严格模式

JavaScript是其核心ECMA-262（又名ECMAScript）。严格来说，JavaScript是Netscape实施ECMAScript的名称。

ECMA-262定义了一种严格模式（10.1.1），可以使用use strict指令启用该模式。最明显的区别是：在严格模式下，将来保留字implements，interface，let，package，private，protected，public，static和yield的使用是错误的。（7.6.1.2）
不支持八进制文字。（7.8.3）
不支持八进制转义序列。（7.8.4）
声明为eval()代码的函数和变量必须在只能由eval代码访问的新变量环境中声明。（10.4.2.1）
delete运算符受到限制。（11.4.1）
分配更加严格。（11.13.1）

eval和arguments不允许作为变量名称（12.2.1），包括异常变量（12.14.1）。

with不允许。（12.10）
完整列表可以在附件C中找到。

您可能想养成始终以严格模式编程的习惯。这样可以确保您的源代码与将来的语言说明具有更大的兼容性。

\ $ \ begingroup \ $
我一点都不觉得模棱两可。它是HTML5，如标头所示。自闭合输入元素有效。我真的希望您能纠正您的答案，因为否则它会很好。
\ $ \ endgroup \ $
– ANeves认为SE是邪恶的
2014年12月30日20:50在

\ $ \ begingroup \ $
我没有提到W3Schools。从没干过。而且永远不会。标头并没有说它是HTML5。标头说的是HTML，HTML5规范说这是HTML5允许的。 HTML5规范没有说此标头将其与其他所有版本的HTML和XHTML区别为HTML5。
\ $ \ endgroup \ $
–克里斯蒂安·胡杰（Christian Hujer）
2014年12月30日20:59

\ $ \ begingroup \ $
<！DOCTYPE html>不会明确声明HTML5。 <！DOCTYPE html>的组合用作Content-Type：text / html如今暗示它是HTML5。 <！DOCTYPE html>也可以用于XHTML，并且<！DOCTYPE html>用作Content-Type：application / xhtml + xml为XHTML5。从SGML和XML的角度来看，<！DOCTYPE html>不够精确，无法声称它仅是HTML5和HTML5。实际上，<！DOCTYPE html>的确切含义是：“某种形式的HTML，无需进一步的正式声明”。
\ $ \ endgroup \ $
–克里斯蒂安·胡杰（Christian Hujer）
2014-12-30 22:43

\ $ \ begingroup \ $
“空元素标记语法的使用（不是强制性的）表明它是XHTML” <-一遍又一遍地重复它不会使它变得比您当初更真实第一次说。通过W3C验证器发送源并查看其内容。 “在将本文档检查为HTML5时发现错误！” （提示：这不是因为自闭标签）。尽管您确实提出了一些要点，但其他人已经指出，您的其余评论是有争议的BS。目前尚不清楚“严格模式”部分为何与之相关。
\ $ \ endgroup \ $
–cimmanon
2015年1月1日17:08

\ $ \ begingroup \ $
我认为这种讨论HTML5和XHTML5之间的区别以及不必要的讨论是没有必要的。自HTML 4.0以来，我从未听说过XHTML。您甚至可以说当前的代码可能是带有正确的Content-Type标头的XHTML5，因此该代码并不正确。为什么要对初学者来说这些晦涩难懂的，几乎无关紧要的问题之以鼻？
\ $ \ endgroup \ $
–gengkev
2015年1月2日在6:37

#2 楼

您的JS有一些问题。首先，您应该始终使用var关键字定义变量，否则可能会在调试程序时遇到重大问题（使用var声明变量）：

sumofnums = 0;

应该变成：

var sumofnums = 0;

您正确地支撑了括号，但是sumofnums会更容易读为sumOfNums。另外，JSLint认为我们应该合并前两个var声明。此外，每个缩进级别应该使用四个空格，而不是两个：

function sum() {
    var sumOfNums = 0, nums = document.getElementById("nums").value.split(",");

    for (var i = 0; i < nums.length; i++) {
        sumOfNums += parseInt(nums[i]);
    }

    document.getElementById("sum").innerHTML = sumOfNums;
}

\ $ \ begingroup \ $
我要说缩进是4个空格还是2个空格，这只是一个问题，因为关于（X）HTML和JavaScript，AFAIK没有正式的约定。
\ $ \ endgroup \ $
–克里斯蒂安·胡杰（Christian Hujer）
2014年12月30日19:46

\ $ \ begingroup \ $
4在大多数开发环境中都是相当标准的：在没有其他标准的情况下，这是安全的默认设置
\ $ \ endgroup \ $
–乔恩的故事
2014年12月30日20:53

\ $ \ begingroup \ $
更重要的是将i本地化。
\ $ \ endgroup \ $
– 200_success
2014年12月30日23:22

#3 楼

根据W3C的官方验证器，您的HTML中有问题：

这无效：

<script lang="javascript">

应该是这个：

<script type="text/javascript">

由于W43C验证程序，假设lang属性用于指定网页的语言，所以长度不能超过8个字符。元素脚本上属性lang的javascript：子标签的长度不得超过8个字符。

此属性的正确用法是将其用作西班牙语网页：

lang="es"

美式英语：

lang="en-us"

\ $ \ begingroup \ $
准确地说，lang属性指定元素内容的语言。如果lang属性出现在根元素上（通常是），那么这恰好是整个页面。但是它也可以用于在单个文档中混合语言。
\ $ \ endgroup \ $
–克里斯蒂安·胡杰（Christian Hujer）
2014年12月30日在22:34

\ $ \ begingroup \ $
我认为这是使用HTML 3.2弃用的

编程黑洞网

数字之和，以逗号分隔

#1 楼

评论

#2 楼

评论

#3 楼

评论