JavaScript教程及实例讲解模板

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

JavaScript教程及实例讲解
㈠.JS简介及特点
JavaScript语言的前身叫作Livescript。

自从Sun公司推出著名的Java语言之后，Netscape公司引进了Sun公司有关Java的程序概念，将自己原有的Livescript 重新进行设计，并改名为JavaScript。

JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动。

使用它的目的是与HTML超文本标识语言、Java 脚本语言一起实现在一个网页中链接多个对象，与网络客户交互作用，从而可以开发客户端的应用程序。

它是通过嵌入或调入在标准的HTML语言中实现的。

JavaScript具有很多优点：
1.简单性:-JavaScript是一种脚本编写语言，它采用小程序段的方式实现编程，像其它脚本语言一样，JavaScript同样已是一种解释性语言，它提供了一个简易的开发过程。

它的基本结构形式与C、C++、VB、Delphi十分类似。

但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。

它与HTML 标识结合在一起，从而方便用户的使用操作。

2.动态性:-JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。

它对用户的反映响应，是采用以事件驱动的方式进行的。

所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，就称为“事件”。

比如按下鼠标、移动窗口、选择菜单等都可以视为事件。

当事件发生后，可能会引起相应的事件响应。

3.跨平台性:-JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。

4.节省CGI的交互时间:-随着WWW的迅速发展有许WWW服务器提供的服务要与浏览者进行交流，确浏览的身份、需服务的内等等，这项工作通常由CGI/PERL编写相应的接口程序与用户进行交互来完成。

很显然，通过网络与用户的交互过程一方面增大了网络的通信量，另一方面影响了服务器的服务性能。

服务器为一个用户运行一个CGI时，需要一个进程为它服务，它要占用服务器的资源(如CPU服务、内存耗费等)，如果用户填表出现错误，交互服务占用的时间就会相应增加。

被访问的热点主机与用户交互越多，服务器的性能影响就越大。

JavaScript是一种基于客户端浏览器的语言，用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的，即使是必须调用CGI的部分，浏览器只将用户输入验证后的信息提交给远程的服务器，大大减少了服务器的开销。

㈡.JS与Java的区别
JavaScript语言和Java语言是相关的，但它们之间的联系并不像想象中的那样紧密。

二者的区别体现在：
首先，它们是两个公司开发的不同的两个产品，Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；而JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。

其次，JavaScript是基于对象的，而Java是面向对象的，即Java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。

JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。

它是一种基于对象和事件驱动的编程语言。

因而它本身提供了非常丰富的内部对象供设计人员使用。

第三，两种语言在其浏览器中所执行的方式不一样。

Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。

JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户，由浏览器解释执行。

第四，两种语言所采取的变量是不一样的。

Java采用强类型变量检查，即所有变量在编译之前必须作声明。

JavaScript中变量声明，采用其弱类型。

即变量在使用前不需作声明，而是解释器在运行时检查其数据类型。

第五，代码格式不一样。

Java是一种与HTML无关的格式，必须通过像HTML中引用外媒体那么进行装载，其代码以字节代码的形式保存在独立的文档中。

JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。

编写HTML文档就像编辑文本文件一样方便。

第六，嵌入方式不一样。

在HTML文档中，两种编程语言的标识不同，JavaScript使用
<script>...</script> 来标识，而Java使用<applet> ... </applet>来标识。

第七，静态绑定和动态绑定。

Java采用静态联编，即Java的对象引用必须在编译时的进行，以使编译器能够实现强类型检查。

JavaScript采用动态联编，即JavaScript的对象引用在运行时进行检查，如不经编译则就无法实现对象引用的检查。

㈢.JS的运行环境
在目前流行的浏览器中，Netscape公司的Navigator 2.0以上版本的浏览器具都有处理JavaScript 源代码的能力。

JavaScript在其中实现了它的1.0版本，并在后来的Navigator 3.0实现了它的1.1版本，在现在推出的Navigator 4.0（Communicator）中,JavaScript在其中实现了它的1.2版本。

微软公司从它的Internet Explorer 3.0版开始支持JavaScript。

Microsoft把自己实现的JavaScript 规范叫做JScript。

这个规范与Netscape Navigator浏览器中的JavaScript规范在基本功能上和语法上是一致的，但是在个别的对象实现方面还有一定的差别，这里特别需要予以注意。

㈣.JS的数据类型和变量
JavaScript 有六种数据类型。

主要的类型有 number、string、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。

String 字符串类型:字符串是用单引号或双引号来说明的。

（使用单引号来输入包含引号的字符串。

）如：“The cow jumped over the moon.”
数值数据类型：JavaScript 支持整数和浮点数。

整数可以为正数、0 或者负数；浮点数可以包含小数点、也可以包含一个“e”（大小写均可，在科学记数法中表示“10的幂”）、或者同时包含这两项。

Boolean 类型：可能的 Boolean 值有 true 和 false。

这是两个特殊值，不能用作 1 和 0。

Undefined 数据类型：一个为 undefined 的值就是指在变量被创建后，但未给该变量赋值以前所具有的值。

Null 数据类型：null 值就是没有任何值，什么也不表示。

object类型：除了上面提到的各种常用类型外，对象也是JavaScript中的重要组成部分，这部分将在后面章节详细介绍。

在 JavaScript 中变量用来存放脚本中的值，这样在需要用这个值的地方就可以用变量来代表，一个变量可以是一个数字，文本或其它一些东西。

JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，变量声明尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯。

可以使用 var 语句来进行变量声明。

如：var men = true; // men 中存储的值为 Boolean 类型。

变量命名:JavaScript 是一种区分大小写的语言，因此将一个变量命名为 computer 和将其命名为Computer是不一样的。

另外，变量名称的长度是任意的，但必须遵循以下规则：
①.第一个字符必须是一个字母（大小写均可）、或一个下划线(_)或一个美元符 ($)。

②.后续的字符可以是字母、数字、下划线或美元符。

③.变量名称不能是保留字。

㈤.JS的语句及语法
JavaScript所提供的语句分为以下几大类：
1.变量声明，赋值语句：var。

语法如下： var 变量名称 [=初始值]
例：var computer = 32 //定义computer是一个变量，且有初值为32。

2.函数定义语句：function，return。

语法如下： function 函数名称（函数所带的参数）
｛
函数执行部分
｝
return 表达式 //return语句指明将返回的值。

例：function square ( x )
{
return x*x
}
3.条件和分支语句：if...else，switch。

if...else语句完成了程序流程块中分支功能：如果其中的条件成立，则程序执行紧接着条件的语句或语句块；否则程序执行else中的语句或语句块。

语法如下： if (条件)
｛
执行语句1
｝else{
执行语句2
｝
例：if (result == true)
｛
response = “你答对了！”
｝else{
response = “你错了！”
｝
分支语句switch可以根据一个变量的不同取值采取不同的处理方法。

语法如下： switch (expression)
{
case label1: 语句串1；
case label2: 语句串2；
case label3: 语句串3；
...
default: 语句串3；
}
如果表达式取的值同程序中提供的任何一条语句都不匹配，将执行default 中的语句。

4. 循环语句：for， for...in，while,break,continue。

for语句的语法如下： for (初始化部分；条件部分；更新部分)
｛
执行部分...
｝
只要循环的条件成立，循环体就被反复的执行。

for...in语句与for语句有一点不同，它循环的范围是一个对象所有的属性或是一个数组的所有元素。

for...in语句的语法如下： for (变量 in 对象或数组)
｛
语句...
}
while语句所控制的循环不断的测试条件，如果条件始终成立，则一直循环，直到条件不再成立。

语法如下： while (条件)
｛
执行语句...
}
break语句结束当前的各种循环，并执行循环的下一条语句。

continue语句结束当前的循环，并马上开始下一个循环。

5.对象操作语句：with，this，new。

with语句的语法如下：
with (对象名称){
执行语句
}
作用是这样的：如果你想使用某个对象的许多属性或方法时，只要在with语句的（）中写出这个对象的名称，然后在下面的执行语句中直接写这个对象的属性名或方法名就可以了。

ew语句是一种对象构造器，可以用new语句来定义一个新对象。

语法是这样的：新对象名称＝ new 真正的对象名
譬如说，我们可以这样定义一个新的日期对象： var curr＝ new Date()，然后，变量curr就具有了Date对象的属性。

this运算符总是指向当前的对象。

6.注释语句：//，/*...*/。

//这是单行注释
/*这可以多行注释.... */
㈥.JS的对象及其属性和方法
在JavaScript中是基于对象的编程，而不是完全的面向对象的编程。

那麽什麽是对象呢？如果你学过一些VB的编程，对这个名词一定不会陌生。

通俗的说，对象是变量的集合体，对象提供对于数据的一致的组织手段，描述了一类事物的共同属性。

在JavaScript中，可以使用以下几种对象：
①.由浏览器根据web页面的内容自动提供的对象。

②.JavaScript的内置对象，如Date,Math等。

③.服务器上的固有对象。

④.用户自定义的对象。

JavaScript中的对象是由属性和方法两个基本的元素的构成的。

对象的属性是指对象的背景色，长度，名称等。

对象的方法是指对属性所进行的操作，就是一个对象自己所属的函数，如对对象取整，使对象获得焦点，使对象获得个随机数等等一系列操作。

举个例子来说，将汽车看成是一个对象，汽车的颜色，大小，品牌等叫做属性，而发动，刹车，拐弯等就叫做方法。

可以采用这样的方法来访问对象的属性：对象名称.属性名称，例：mycomputer.year=1996，mycomputer.owner = “me”。

可以采用这样的方法，将对象的方法同函数联系起来：对象.方法名字=函数名字或对象.属性.方法名，例：this.display=display，document.writeln（“this is method”）。

多看或多写一些程序，就会理解对象的方法和属性的含义了！各个对象的各种属性和方法，可点击参考！
㈦.JS的事件处理
事件是浏览器响应用户交互操作的一种机制，JavaScript的事件处理机制可以改变浏览器响应用户操作的方式，这样就开发出具有交互性，并易于使用的网页。

浏览器为了响应某个事件而进行的处理过程，叫做事件处理。

事件定义了用户与页面交互时产生的各种操作，例如单击超级连接或按钮时，就产生一个单击（click）操作事件。

浏览器在程序运行的大部分时间都等待交互事件的发生，并在事件发生时，自动调用事件处理函数，完成事件处理过程。

事件不仅可以在用户交互过程中产生，而且浏览器自己的一些动作也可以产生事件，例：当载入一个页面时，就会发生load事件，卸载一个页面时，就会发生unload事件等。

归纳起来，必需使用的事件有三大类：
1.引起页面之间跳转的事件，主要是超连接事件。

2.事件浏览器自己引起的事件。

3.事件在表单内部同界面对象的交互。

各种JavaScript的事件可点这里参考。

㈧.实例讲解
1. 日期星期的显示
①源代码如下：
(这段程序放在<body>与</body>之间)

②源程序讲解：
document.write("") ；
2. 分时问候
①源代码如下：
(这段程序放在<body>与</body>之间)
<script language="JavaScript">

</script>
②源程序讲解：
3. 停留时间显示2
①源代码如下：
(这段程序放在<body>与</body>之间)
<form name=forms>
<p><font class=p2 color=red> 您在本站停留了</font> </p> <p>
<input type=text name=input size=10>
<script language=javascript>
var second=0;
var minute=0;
var hour=0;
idt=window.setTimeout("interval();",1000);
function interval(){
second++;
if(second==60){second=0;minute+=1;}
if(minute==60){minute=0;hour+=1;}
document.forms.input.value=hour+"时"+minute+"分"+second+"秒";
idt=window.setTimeout("interval();",1000);}
</script>
</p>
</form>
②源程序讲解：
4. 动态数字时钟1
①源代码如下：
(建议使用1024*768的分辨率)
(这段程序放在<body>与</body>之间)
<script language="JavaScript">

</script>
<span id="position" style="position:absolute;left:441px;top:190px; width: 128px; height: 30px">
</span>
②源程序讲解：
myclock="<font color=blue>"
5. 离开时显示停留时间1
①源代码如下：
(这段程序放在<body>与</body>之间)
<script language="Javascript">

</script>
(这段程序放在<body ****>正文中)
onUnload=stay()
②源程序讲解：
6. 带开关的时钟
①源代码如下：
(这段程序放在<body>与</body>之间)
<script language="JavaScript">
var enabled=0;
function TOfunc() {
TO = window.setTimeout( "TOfunc()", 1000);
var today = new Date();
document.clock.disp.value = today.toLocaleString();
}
</script>
<form name="clock">
<input type="text" name="disp" value="" size=20
onFocus="this.blur()" ><br>
<input type="radio" name="rad" value="off" onClick="if( enabled==1 ) {
document.clock.disp.value='';
clearTimeout( TO );
enabled = 0;
}
" checked>关<font color="#FFFF99"> </font>
<input type="radio" name="rad" value="on" onClick="if( enabled == 0 ) {
var TO = setTimeout( 'TOfunc()', 1000 );
enabled = 1; }" >开<font color="#FFFF99"> </font>
</form>
②源程序讲解：
7. 数字时钟2
①源代码如下：
(这段程序放在<head>与</head>之间)
<script language="javascript">

</script>
(这段程序放在<body ****>正文中)
onLoad="show()"
(这段程序放在<body>与</body>之间)
img src="cb.gif" name="a">
<img src="cb.gif" name="b">
<img src="colon.gif" name="c">
<img src="cb.gif" name="d">
<img src="cb.gif" name="e">
<img src="colon.gif" name="f"> <img src="cb.gif" name="g">
<img src="cb.gif" name="h">
<img src="cam.gif" name="j"> ②源程序讲解：
8. 显示最后修改日期
①源代码如下：
(这段程序放在<body>与</body>之间)
<script language="JavaScript">

</script>
<form name="form1" >
上次修改日期：
<input type="text" name="textfield">
</form>
(这段程序放在<body ****>正文中)
onload=modified()
②源程序讲解：
9. 有阴影的钟表
①源代码如下：
(这段程序放在<head>与</head>之间)
<style type="text/css">

</style>
<script Language="JavaScript">
var ctimer;
function init(){
if (document.all){
tim2.style.left=tim1.style.posLeft;
tim2.style.top=tim1.style.posTop+tim1.offsetHeight-6; settimes();
}
}
function settimes(){
var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
if (hours<10)
hours="0"+hours;
if(mins<10)
mins="0"+mins;
if (secs<10)
secs="0"+secs;
tim1.innerHTML=hours+":"+mins+":"+secs
tim2.innerHTML=hours+":"+mins+":"+secs
ctimer=setTimeout('settimes()',960);
}
</script>
(这段程序放在<body>与</body>之间)
<div Id="tim1" Style="position:absolute; width:10; height:10; top:10; left:50"
class="time"></div>
<div Id="tim2" Style="position:absolute; filter:flipv() alpha(opacity=40); font-style:italic" class="time"></div>
<div Id="instructions"
</div>
(这段程序放在<body ****>里)
onLoad="init()"
②源程序讲解：
10. 倒计时
①源代码如下：
(这段程序放在<body>与</body>之间)
<script language="JavaScript">

</script>
②源程序讲解：
11. 标题栏显示日期
①源代码如下：
(这段程序放在<body>与</body>之间)
<script language="JavaScript">
var isMonth = new
Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"); var isDay = new
Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");
today = new Date () ;
Year=today.getYear();
Date=today.getDate();
if (document.all)
document.title="今天是: "+Year+"年"+isMonth[today.getMonth()]+Date+"日"+isDay[today.getDay()]
</script>
②源程序讲解：
12. 淡出淡入效果
①源代码如下：
(这段程序放在<body>与</body>之间) <script language="JavaScript">
var b = 1;
var c = true;
function fade(){
if(document.all);
if(c == true) {
b++;
}
if(b==100) {
b--;
c = false
}
if(b==10) {
b++;
c = true;
}
if(c == false) {
b--;
}
child.filters.alpha.opacity=0 + b; setTimeout("fade()",100);
}
</script>
<img src="img/1.jpg" name="child" border=0
alt="Image" style="filter:alpha(opacity=0)">
②源程序讲解：
注：此例效果只能在IE中出现。

图片放在与文件同级的“img”文件夹中，名为1.jpg。

13. 闪烁文字
①源代码如下：
(这段程序放在<body>与</body>之间)
<script language=javascript>

</script>
②源程序讲解：
注：此效果只能在IE浏览器中实现。

14. 禁止图片下载
①源代码如下：
(这段程序放在<body>与</body>之间)
<a href="javascript:void(0)" onMouseDown="alert('哈哈!这张图不能下载！')"><img src="img/nodownload.jpg" border="0" ></a>
②源程序讲解：
15. 随机产生图形
①源代码如下：
(这段程序放在<body>与</body>之间)
<script language="JavaScript">
a = 3
var pp = Math.random();
var foot = Math.round(pp * (a-1))+1;
function create() {
this.src = ''
this.border = ''
this.alt = ''
}
b = new Array()
for(var i=1; i<=a; i++) { b[i] = new create() }
b[1].src = "img/4.jpg"
b[1].border = "0"
b[1].alt = ""
b[2].src = "img/2.jpg"
b[2].border = "0"
b[2].alt = ""
b[3].src = "img/3.jpg"
b[3].border = "0"
b[3].alt = ""
var pic = "";
pic += '<img src='+b[foot].src+' border="0"'+' alt='+b[foot].alt+'>'; document.write(pic)
</script>
②源程序讲解：
注:本例中所用到的三张图放在与本页面同级的"img"文件夹内,名字分别为2.jpg，3.jpg，4.jpg。

16. 文字变化效果
建议使用1024*768的分辨率。

①源代码如下：
(这段程序放在<head>与</head>之间)
<script Language="JavaScript">
var timerID = null;
var timerRunning = false;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = "" + ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " P.M." : " A.M."
window.status = timeValue;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
function startclock () { stopclock();
showtime();
}
</script>
(这段程序放在<body ****>) onLoad="glowtext()
②源程序讲解：
注：此效果只能在IE浏览器中实现。

17. 文字上下移动
①源代码如下：
(这段程序放在<body>与</body>之间)
<script language="JavaScript">
done = 0;
step = 4
function anim(yp,yk)
{
if(yers) yers["napis"].top=yp; else document.all["napis"].style.top=yp;
if(yp>yk) step = -4
if(yp<60) step = 4
setTimeout('anim('+(yp+step)+','+yk+')', 35);
}
function start()
{
if(done) return
done = 1;
if(navigator.appName=="Netscape") {
document.napis.left=innerWidth/2 - 145;
anim(60,innerHeight - 60)
}
else {
napis.style.left=10;
anim(60,document.body.offsetHeight - 60)
}
}
</script>
</p>
<div id="napis" style="position: absolute;top: -50;">
<p><a href=""> 洪恩在线求知无限</a> </p> </div>
<script language="JavaScript">

</script>
②源程序讲解：
18. 随时间变化的图形
①源代码如下：
(这段程序放在<body>与</body>之间)
<script language="JavaScript">
var dt = new Date();
var hr = dt.getSeconds();
if (hr<=20) hr=7;
else if (hr<=40) hr=8;
else hr=9;
var msg="<IMG SRC=img/"+hr+".jpg>"; document.write(msg);
</script>
②源程序讲解：
注:本例中所用到的三张图放在与本页面同级的"img"文件夹内,名字分别为7.jpg，8.jpg，9.jpg。

19. 图形随窗口移动
①源代码如下：
(这段程序放在<head>与</head>之间)
<script language=javascript>

</script>
(这段程序放在<body ****>正文中)
onload="setVariables(); checkLocation();"
②源程序讲解：
20. 文字上下移动
①源代码如下：
(这段程序放在<body>与</body>之间)
<style>

</style>
<script language="JavaScript">
var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x z.style.pixelTop=temp2+event.clientY-y return false
}}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){ dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false") </script>
<img src="img/draw.jpg" class="drag">
②源程序讲解：
21. 滚动显示图片
①源代码如下：
(这段程序放在<body>与</body>之间)
<script language="JavaScript1.2">
<!--
var scrollerwidth=64
var Scrollerheight=64
var scrollerbgcolor='white'
var pausebetweenimages=3000
var slideimages=new Array()
slideimages[0]='<a href=&quot/pc/index.htm&quot><img src=&quotimg/logo1.gif&quot border=0&quot></a>'
slideimages[1]='<a href=&quot/eng/index.htm&quot><img
src=&quotimg/logo2.gif&quot>'
slideimages[2]='<a href=&quot/shop/index.htm&quot><img src=&quotimg/logo3.gif&quot>'
slideimages[3]='<a href=&quot/album/index.htm&quot><img src=&quotimg/logo4.gif&quot>'
slideimages[4]='<a href=&quot/matrix/&quot><img src=&quotimg/logo5.gif&quot>'
if (slideimages.length>1)
i=2
else
i=0
function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",100)
}
else{
tlayer.top=scrollerheight
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)。