本文介绍了JavaScript作为HTML文档中的脚本语言，及其在表单验证、页面动态效果及局部刷新方面的应用。通过三个具体例子，展示了如何使用JavaScript实现简易计算器功能，并与HTML交互。文章还对比了JavaScript与Java的不同，突出了JavaScript的简洁性和易学性。
JavaScript是一门嵌套在HTML文档中的脚本语言，当然，他也是一门面向对象的编程语言。他的所有代码都写在<script></script>这对标签中，可以写在HTML文档的<head>中，也可写在<body>中。虽然JavaScript名字看起来好像与Java有关，但事实是，他俩没有一点联系。Javascript的主要作用是实现表单的验证和页面的动态效果，实现网页的局部刷新。
相比较java而言，Javascript是一门比较简单的编程语言。他没有了Java中的各种数据类型，所有变量的定义都用var关键字，同样，所有自定义的函数都是用function来定义。Javascript用document.write()进行数据的输出。没有了复杂的数据类型，javascript比Java更加容易学习。
简单的理论上的东西多说无益，下面看一个具体的例子。
例1：简易计算器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>简易计算器.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript"> //在<script>标签对中写Javascript代码，其中type="text/javascript"是说明所写文档的类型，为text类型的，用Javascript语言编写的，在<script>标签中还有一个language属性，说明所用的编程语言，一般情况为language="javascript"
，这是为javascript以后的发展所考虑的，可以省略不写
function add()//定义了一个函数 add();
{
var num1=parseFloat(document.getElementById("num1").value) ;
//document指的是当前这篇文档；getElementById("num1")意为通过id号得到名为"num1"的对象；value是指对象那个的值，是一个字符串类型的；parseFloat(“字符串”),此函数意为将参数值转换为Float型。用var定义了一个变量num1，不管num1是什么类型，包括数组，都用var来定义，变量num1的值为后面语句的返回值
//这句代码的作用是：在这篇文档中找到id号为"num1"对象的值，并把它转换成Float型，赋值给变量num1
var num2=parseFloat(document.getElementById("num2").value) ;//同上var result=0;//定义了一个result的变量并赋值为0；
result=num1+num2;//两数相加赋值给result
document.getElementById("result").value=result.toString();//toString()的作用是将result的值转换成String型
//得到id号为"result"的对象的值，将其赋为result的值
}
function del()
{
var num1=parseFloat(document.getElementById("num1").value) ;
var num2=parseFloat(document.getElementById("num2").value) ;
var result=0;
result=num1-num2;
document.getElementById("result").value=result.toString();
}
function cheng()
{
var num1=parseFloat(document.getElementById("num1").value) ;
var num2=parseFloat(document.getElementById("num2").value) ;
var result=0;
result=num1*num2;
document.getElementById("result").value=result.toString();
}
function chu()
{
var num1=parseFloat(document.getElementById("num1").value) ;
var num2=parseFloat(document.getElementById("num2").value) ;
var result=0;
if(num2==0)
{
alert("输入除数不能为零");//
}
result=num1/num2;
document.getElementById("result").value=result.toString();
}
</script>
</head>
<body>
<center>
<h1>简易计算器</h1>
<form name="myform" action="" method="get">
<!-- 在HTML中，使用Javascript必须要有<form>标签，它是用来实现用户与计算机之间的交互，换而言之，Javascript通过<form>标签实现对HTML标签的操作，即Javascript所操作的标签都要出现在<form>标签对中。-->
<table width="453" height="190">
<tr>
<td>第一个数</td>
<td><input type="text" id="num1"></td>
</tr>
<tr>
<td>第二个数</td>
<td><input type="text" id="num2" onchange="val()"></td>
</tr>
<tr colspan="2">
<td><input type="button" value=" + " onclick="add()">
<!--onclick是button标签的一个单击事件，通过鼠标单击此按钮就可触发此事件，onclick后面的值表示触发此事件是要执行的操作， onclick="add()"为单击按钮后执行add()函数，注：事件的值是一个字符串，必须要用引号引起来。-->
<input type="button" value=" - " onclick="del()">
<input type="button" value=" * " onclick="cheng()">
<input type="button" value=" / " onclick="chu()">
</td>
</tr>
<tr>
<td>计算结果</td>
<td><input type="text" id="result"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
例2：简易计算器1
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>简易计算器1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function calculate(op)//定义了一个带参的函数
{
var num1=parseFloat(document.getElementById("num1").value);
var num2=parseFloat(document.getElementById("num2").value);
var result=0;
if(op=="+")//下面的代码语法编写形式与Java一样
{
result=num1+num2;
}
if(op=="-")
{
result=num1-num2;
}
if(op=="*")
{
result=num1*num2;
}
if(op=="/")
{
if(num2==0)
{
alert("除数不能为零！！！");
}
result=num1/num2;
}
document.getElementById("result").value=result.toString();
}
</script>
</head>
<body>
<center>
<h1>简易计算器</h1>
<form name="myform" action="" method="get">
<table width="453" height="190">
<tr>
<td>第一个数</td>
<td><input type="text" id="num1"></td>
</tr>
<tr>
<td>第二个数</td>
<td><input type="text" id="num2"></td>
</tr>
<tr colspan="2">
<td><input type="button" value=" + " onclick="calculate('+')">
<!--
向函数中传递参数“+” -->
<input type="button" value=" - " onclick="calculate('-')">
<input type="button" value=" * " onclick="calculate('*')">
<input type="button" value=" / " onclick="calculate('/')">
</td>
</tr>
<tr>
<td>计算结果</td>
<td><input type="text" id="result"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
例3：简易计算器2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>简易计算器2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
var one = '1';//定义常量
var two = '2';
var three = '3';
var four = '4';
var five = '5';
var six = '6';
var seven = '7';
var eight = '8';
var nine = '9';
var zero = '0';
var plus = '+';
var minus = '-';
var multiply = '*';
var divide = '/';
var decimal = '.';
function enter(obj, string) {//定义一个带参的函数，参数为obj和string，因为所有的变量都用var来定义，因此在定义函数的参数类型时可以不写var
obj.expr.value += string;//在文本框中添加按钮的值
}
function compute(obj) {//计算文本框中的值
obj.expr.value = eval(obj.expr.value);
//eval是Javascript有用的内部函数，该函数可以对以字符串形式表示的任意有效的Jscript代码求值。
//了解这个后，去掉eval，是不是和等号左边一样了呢。所以这个片段的意思就是求obj.expr.value值后再赋值给obj.expr.value
}
function clear(obj)//清空函数,清空文本框中的数据
{
obj.expr.value = "";
}
</script>
</head>
<body>
<center>
<h1>
简易计算器2
</h1>
<form name="calc">
<table border="1" align="center">
<tr>
<td colspan="4">
<input type="text" name="expr" size="30"
action="compute(this.form)" />
<!-- action是扩展出来的一个事件，相当于onclick，this.form为传递的参数，this是指当前对象，form是表单，即意为当前对象所在的表单 -->
</td>
</tr>
<tr>
<td>
<input type="button" value=" 7 "
onclick="enter(this.form, seven)" />
<!-- 向函数enter()中传递两个参数 -->
</td>
<td>
<input type="button" value=" 8 "
onclick="enter(this.form, eight)" />
</td>
<td>
<input type="button" value=" 9 "
onclick="enter(this.form, nine)" />
</td>
<td>
<input type="button" value=" / "
onclick="enter(this.form, divide)" />
</td>
</tr>
<tr>
<td>
<input type="button" value=" 4 "
onclick="enter(this.form, four)" />
</td>
<td>
<input type="button" value=" 5 "
onclick="enter(this.form, five)" />
</td>
<td>
<input type="button" value=" 6 "
onclick="enter(this.form, six)" />
</td>
<td>
<input type="button" value=" * "
onclick="enter(this.form, multiply)" />
</td>
</tr>
<tr>
<td>
<input type="button" value=" 1 "
onclick="enter(this.form, one)" />
</td>
<td>
<input type="button" value=" 2 "
onclick="enter(this.form, two)" />
</td>
<td>
<input type="button" value=" 3 "
onclick="enter(this.form, three)" />
</td>
<td>
<input type="button" value=" - "
onclick="enter(this.form, minus)" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value=" 0 "
onclick="enter(this.form, zero)" />
</td>
<td>
<input type="button" value=" . "
onclick="enter(this.form, decimal)" />
</td>
<td>
<input type="button" value=" + "
onclick="enter(this.form, plus)" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value=" = "
onclick="compute(this.form)" />
</td>
<td colspan="2">
<input type="button" value=" AC " size="3" onclick="clear1(this.form)" />
</td>
</tr>
</table>
</form>
</body>
</html>
看完这是那段代码后相信你一定对Javascript有了一些认识，将代码运行起来再返回来看代码，你会发现，Javascript和Java在相当大的一些程度上没有任何区别，只要记住了一些略微差别之处，相信你很快就会学会的。
扫一扫
975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
