Question

所以我现在正在学习JavaScript而且我正在制作这个计算器。像任何其他JavaScript一样启动它。制作html文件，输入所有html标签等，制作特殊的<script></script>标签，我将编写代码。现在我的解决方案涉及很多变量和if语句等等。

但后来我想知道别人是怎么做到的，我偶然发现了这个：

<FORM NAME="Calc">
<TABLE BORDER=4>
<TR>
<TD>
<INPUT TYPE="text"   NAME="Input" Size="16">
<br>
</TD>
</TR>
<TR>
<TD>
    <INPUT TYPE="button" NAME="one"   VALUE="  1  " OnClick="Calc.Input.value += '1'">
    <INPUT TYPE="button" NAME="two"   VALUE="  2  " OnCLick="Calc.Input.value += '2'">
    <INPUT TYPE="button" NAME="three" VALUE="  3  " OnClick="Calc.Input.value += '3'">
    <INPUT TYPE="button" NAME="plus"  VALUE="  +  " OnClick="Calc.Input.value += ' + '">
<br>
    <INPUT TYPE="button" NAME="four"  VALUE="  4  " OnClick="Calc.Input.value += '4'">
    <INPUT TYPE="button" NAME="five"  VALUE="  5  " OnCLick="Calc.Input.value += '5'">
    <INPUT TYPE="button" NAME="six"   VALUE="  6  " OnClick="Calc.Input.value += '6'">
    <INPUT TYPE="button" NAME="minus" VALUE="  -  " OnClick="Calc.Input.value += ' - '">
<br>
    <INPUT TYPE="button" NAME="seven" VALUE="  7  " OnClick="Calc.Input.value += '7'">
    <INPUT TYPE="button" NAME="eight" VALUE="  8  " OnCLick="Calc.Input.value += '8'">
    <INPUT TYPE="button" NAME="nine"  VALUE="  9  " OnClick="Calc.Input.value += '9'">
    <INPUT TYPE="button" NAME="times" VALUE="  x  " OnClick="Calc.Input.value += ' * '">
<br>
    <INPUT TYPE="button" NAME="clear" VALUE="  c  " OnClick="Calc.Input.value = ''">
    <INPUT TYPE="button" NAME="zero"  VALUE="  0  " OnClick="Calc.Input.value += '0'">
    <INPUT TYPE="button" NAME="DoIt"  VALUE="  =  " OnClick="Calc.Input.value = eval(Calc.Input.value)">
    <INPUT TYPE="button" NAME="div"   VALUE="  /  " OnClick="Calc.Input.value += ' / '">
<br>
</TD>
</TR>
</TABLE>
</FORM>

它没有缩进得很好但重点是，它是javascript，因为我理解是的？这个人甚至没有使用脚本标签。只需将代码随机放入html文件中即可。怎么会这样？

Answer 1

在INPUT HTML的OnClick属性中使用javascript是可以接受的，除非你有独立的代码调用，代码块或导入另一个JS文件，否则你不需要脚本块

Answer 2

主要是HTML。它具有onclick个属性，这些属性包含绑定到元素上click事件的JavaScript函数的主体。

Answer 3

这就是javascript的嵌入方式。根据O'Reilly的Java指南：

客户端JavaScript代码嵌入在HTML文档中   方式：

在一对和标签之间

从标记的src属性指定的外部文件

在事件处理程序中，指定为HTML属性的值   如onclick或onmouseover

作为使用特殊javascript：协议的URL的正文

Answer 4

单击按钮时，会调用onClick功能。当单击按钮时，您可以在该参数中放置一个简单的Javascript。

Javascript eval函数将字符串计算为Javascript代码。这就是名为“DoIt”的按钮。其余按钮只是将数字和运算符附加到Calc.Input.value字符串。单击“=”将评估Calc.Input.value字符串。

Calc.Input.value指的是名为Input的表单中名为Calc的元素的值。

Answer 5

正如我所说，这是可怕的代码。如果你正在学习Javascript，这是不的一个很好的例子。

它的工作原理是因为他们将Javascript代码放在事件处理程序中，即使没有指定大多数（所有）浏览器也会将其解释为Javascript。他们可以通过利用大多数浏览器自动为任何命名控件创建变量来访问各种输入。

然后对于奖励积分他们使用eval这是邪恶的。

说真的，这是非常糟糕的代码。在90年代早期你会看到很多像这样的代码。继续前进并正确学习Javascript。从这里开始：JavaScript: The Good Parts

Answer 6

onclick属性（和其他类似的事件处理程序属性）是特殊的，它的值实际上是JavaScript - 类似于实际为CSS的style属性的值。

例如，onclick="Calc.Input.value = ''"会执行JavaScript Calc.Input.value = ''。由于浏览器的自动化，Calc引用了Form元素，然后Input引用了Input标记，而.value只是Input的属性。

你发现的那个例子看起来非常非常老，编码风格也很差。我会远离它。

JavaScript - 想知道这是怎么回事

6 个答案: