javascript学习:计算器

简单的网页计算器

实现功能：

1.基础加减乘除

2.清空数据

3.计算机结果显示

知识点：

1.网页的表格布局

2.input标签

3.javascript关键字 this

4.javascript 函数eval()

5.onclick事件

网页表格布局

这是一种比较传统的网页布局方式。与现在的div+css布局相比结果更加固化，不够灵活，代码较多。但是并不是不在需要这种类型的布局方式，在页面中，出现表格，或者排布较为规整的小控件时，我们还是需要使用表格布局。

结构：

这货是标题

这货是表格 input标签

当type属性为"text"时显示输入框。

当type属性为"button"时显示为按钮。

javascript关键字 this

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。

如果单独使用，this 表示全局对象。

在函数中，this 表示全局对象。

在函数中，在严格模式下，this 是未定义的(undefined)。

在事件中，this 表示接收事件的元素。

类似 call() 和 apply() 方法可以将 this 引用到任何对象。

javascript函数eval()

和其他语言相同，eval()可以执行字符串中的代码。

var x="1+2="
eval(x)
>>>3

onclick事件

点击事件，点击后触发相应的函数。

<input type="button" value="0" onclick="alert(1)" />

上源码：

<table border="1">
    <tr>
        <td colspan="4">
            <input type="text" name="expr" action="compute(this.form)"/>
        </td>
    </tr>
    <tr>
        <td><input type="button" value="7" onclick="enter(this.form,'7')"/></td>
        <td><input type="button" value="8" onclick="enter(this.form,'8')" /></td>
        <td><input type="button" value="9" onclick="enter(this.form,'9')" /></td>
        <td><input type="button" value="/" onclick="enter(this.form,'/')" /></td>
    </tr>
    <tr>
        <td><input type="button" value="4" onclick="enter(this.form,'4')" /></td>
        <td><input type="button" value="5" onclick="enter(this.form,'5')" /></td>
        <td><input type="button" value="6" onclick="enter(this.form,'6')" /></td>
        <td><input type="button" value="*" onclick="enter(this.form,'*')" /></td>
    </tr>
    <tr>
        <td><input type="button" value="1" onclick="enter(this.form,'1')" /></td>
        <td><input type="button" value="2" onclick="enter(this.form,'2')" /></td>
        <td><input type="button" value="3" onclick="enter(this.form,'3')" /></td>
        <td><input type="button" value="-" onclick="enter(this.form,'-')" /></td>
    </tr>
    <tr>
        <td colspan="2"><input type="button" value="0" onclick="enter(this.form,'0')" /></td>
        <td><input type="button" value="." onclick="enter(this.form,'.')" /></td>
        <td><input type="button" value="+" onclick="enter(this.form,'+')" /></td>
    </tr>
    <tr>
        <td colspan="2"><input type="button" value="=" onclick="compute(this.form)"/></td>
        <td colspan="2"><input type="button" value="AC" onclick="A_clear(this.form)" /></td>
    </tr>
</table>

效果图：