在前面的学习中了解到HTML语言是一种标记性的解释语言，一般只能定义内容的表现形式，不具有逻辑性，更不能与用户进行交互。例如，当用户向感兴趣的网站注册时，必须从表单中填入自己的个人信息，如身份证号码、用户名、密码等，如果有一项不满足就会弹出一个对话框，提示用户重新输入。JS正是这样一种嵌入在HTML中专用于开发交互式的Web页面的脚本语言，它不仅可以直接应用于HTML文档以获得交互式效果或其他动态效果，而且可以运行于服务器端，从而代替传统的CGI(CGI是服务器端与用户沟通的程序)。
JavaScript的工作过程：
1.服务器端
(1)浏览器输入URL请求。
(2)服务器调用脚本，生成从浏览器传递数据的对象，并向脚本提供这些对象。
(3)脚本进行处理(对于数据库应用则需要进行特定的数据库操作)，并将数据以HTML文件的方式通过服务器返回发出请求的浏览器。
2.客户端
JavaScript最典型的应用就是开发客户端脚本。
(1)JavaScript脚本程序被嵌入到HTML文件中，随着HTML文件一同下载到浏览器端。
(2)浏览器读HTML文件，然后解释执行并显示其中的元素。
(3)如果在语法分析或解析到JavaScript脚本，浏览器就去执行其脚本语句做相应的处理。
Javascript在网页中的用法
JS加入网页有两种方法
(1)直接加入HTML文档。这是最常用的方法，大部分含有JS的网页都采用这种方法，如：
<script language="Javascript"> <!-- 用来告诉浏览器这是用Javascript编写的程序，需要调动相应的解释程序进行解释 -->
<!-- document.writeln("这是Javascript!采用直接插入的方法!"); //-JavaScript结束-->
</script>
(2)引用方式。如果已经存在一个JavaScript源文件(以.js为扩展名)，则可以采用这种引用的方式，以提高程序代码的利用率。其基本格式如下：
<script src=url language="Javascript"> </script>
其中的url就是程序文件的地址。同样的，这样的语句可以放在HTML文档头部或主体的任何部分。如果要实现“直接插入方式”中所举例子的效果，可以首先创建一个JavaScript源代码文件“Script.js”，其内容如下：
document.writeln("这是JavaScript!采用直接插入的方法");
在网页中可以这样调用程序：<script src="Script.js" language="Javascript"></script>
注：用户与网页交互时产生的操作，称为事件。
讲述函数部分
函数由关键字function定义。
定义函数：
function 函数名（参数1，参数2，……）
{
语句；
}
函数调用一般和表单元素的事件一起使用，调用格式为：事件名=“函数名”；
1.下面讲述通过函数的调用来处理表单元素的例子。例子实现的功能是，在表单中填入第一个数和第二个数，然后通过单击不同的运算符按钮产生相应的事件，并调用相应的函数进行处理。
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"
" http://www.w3.org/TR/HTML4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/HTML;charset=gb2312">
<title>计算器</title>
<script language="JavaScript">
function compute(op) //定义函数
{
var num1,num2;
num1=parseFloat(document.myform.num1.value);
num2=parseFloat(document.myform.num2.value);
if(op=="+")
document.myform.result.value=num1+num2;
if(op=="-")
document.myform.result.value=num1-num2;
if(op=="*")
document.myform.result.value=num1-num2;
if(op=="/" && num2!=0)
document.myform.result.value=num1-num2;
}
function closewindow()
{
if(window.confirm("你确定要退出系统"))
window.close();
}
</script>
</head>
<body bgcolor="#FF0000" align="center">
<form action="" method="post" name="myform" id="myform">
<p>第一个数
<input name="num1" type="text" id="num1" size="25"><br>
第二个数
<input name="num2" type="text" id="num2" size="25">
</p>
<p>
<input name="addButton" type="button" id="addButton" value="+" onClick="compute('+')"> <!--调用函数 -->
<input name="subButton" type="button" id="subButton" value="-" onClick="compute('-')"> <!--调用函数 -->
<input name="mulButton" type="button" id="mulButton" value="×" onClick="compute('*')"> <!--调用函数 -->
<input name="divButton" type="button" id="divButton" value="÷" onClick="compute('/')"> <!--调用函数 -->
</p>
<p>计算结果
<input name="result" type="text" id="result" size="25">
<input type="button" value="退出" onClick="closewindow()">
</p>
</form>
<p> </p>
</body>
</html>
2.用JS实现网页刷新的实例。
下面是Math对象网页刷新图片的应用代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<meta http-equiv="refresh" content="2">
<title>自动刷新</title>
<script language="JavaScript">
document.write("<center><H3>2秒自动刷新，随机显示图片<br>");
var i=0;
i=Math.round(Math.random()*8+1);
document.write("<img width=640 height=433 src="+i+".jpg>");
</script>
</head>
<body>
</body>
</html>
注意：找9张图片并将其放在上面代码以.html为网页文件的同一文件夹下，取名为1.jpg、2.jpg、3.jpg等，双击网页运行就能看到每隔2S自动刷新一次网页。Math.random():产生0~1的随机小数。Math.round：四舍五入取整。
549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
