事半功倍系列之javascript
1![]()
2
第一章javascript简介
3![]()
4
1.在地址栏输入javascript语句
5![]()
6
Javascript:Document.write("显示文字")
7![]()
8
2.将javascript嵌入 HTML文档
9![]()
10
<script language=javascript>
11
document.bgColor="blue"
12
</script>
13![]()
14
第二章 使用变量和数组
15![]()
16
1.声明变量
17![]()
18
<script language=javascripe>
19
Var answer1,answer2,answer3,answer4;
20
answer1=9;
21
answer2=2.5
22
answer3="Milkey May"
23
answer4=true
24
</script>
25![]()
26
2.使用整数
27![]()
28
<script language=javascript>
29
var decimalNum,hexadecimalNum,octalNum
30
decimalNum=24
31
hexadecimalNum=0x24
32
octalNum=024
33
document.write("显示十进制数:"+ decimalNum+"<br>")
34
document.write("显示十六进制数:"+ hexadecimalNum +"<br>")
35
document.write("显示八进制数:"+ octalNum +"<br>")
36
</script>
37![]()
38
3.使用浮点数
39![]()
40
<script language=javascript>
41
var num1,num2,num3,num4
42
num1=1234567890000.0
43
num2=5.14e23
44
num3=0.0000123456
45
num4=6.0254e3-4
46
document.write("浮点数1:"+num1+"<br>")
47
document.write("浮点数2:"+num2+"<br>")
48
document.write("浮点数3:"+num3+"<br>")
49
document.write("浮点数4:"+num4+"<br>")
50
</script>
51![]()
52
4.使用布尔值
53![]()
54
<script language=javascript>
55
var answer1,answer2
56
answer1=true
57
answer2=false
58
document.write("显示布尔1:"+answer1+"<br>")
59
document.write("显示布尔2:"+answer2+"<br>")
60
</script>
61![]()
62
5.使用字符串
63![]()
64
<script language=javascript>
65
var str1,str2
66
str1="fdsgdg dsfdsf china"
67
str2="武汉市广播电视大学"
68
document.write("显示字符串1:"+str1+"<br>")
69
document.write("显示字符串2:"+str2+"<br>")
70
</script>
71![]()
72
6.确定变量类型
73![]()
74
<script>
75
var answer1,answer2,answer3,answer4
76
answer1=9
77
answer2=2.5
78
answer3="milky may"
79
answer4=true
80
document.write("变量1的类型是:"+typeof answer1 +"<br>")
81
document.write("变量2的类型是:"+typeof answer2 +"<br>")
82
document.write("变量3的类型是:"+typeof answer3 +"<br>")
83
document.write("变量4的类型是:"+typeof answer4 +"<br>")
84
</script>
85![]()
86
7.将字符串转换成数字
87![]()
88
<script>
89
var str1="31 days in january"
90
var int1=parseInt(str1)
91
document.write("str1的数据类型是 :"+typeof str1+"<br>")
92
document.write("int1的数据类型是 :"+typeof int1+"<br>")
93
</script>
94![]()
95
8.将数字转换成字符串
96![]()
97
<script>
98
var int1=256
99
var str1=""+int1
100
document.write("str1的数据类型是 :"+typeof str1+"<br>")
101
document.write("int1的数据类型是 :"+typeof int1+"<br>")
102
</script>
103![]()
104
9.声明数组
105![]()
106
<script>
107
array=new Array(5)
108
array[0]=1
109
array[1]=3
110
array[2]=5
111
array[3]=7
112
array[4]=11
113
document.write("数组是:"+array[0]+" "+array[1]+" "+array[2]+" "+array[3]+" "+array[4])
114
</script>
115![]()
116
10.确定数组元素的个数
117![]()
118
<script>
119
array=new Array(5)
120
array[0]=1
121
array[1]=3
122
array[2]=5
123
array[3]=7
124
array[4]=11
125
document.write("数组是:"+array[0]+" "+array[1]+" "+array[2]+" "+array[3]+" "+array[4]+"<br>")
126
document.write("数组的元素个数是"+array.length)
127
</script>
128![]()
129
11.将数组转换为字符串
130![]()
131
<script>
132
array=new Array()
133
array[0]="dark"
134
array[1]="apple"
135
array[2]="nebula"
136
array[3]="water"
137
str1=array.join()
138
str2=array.join(" ")
139
document.write(str1+"<br>")
140
document.write(str2)
141
</script>
142![]()
143
12.对数组排序
144![]()
145
<script>
146
array=new Array()
147
array[0]="dark"
148
array[1]="apple"
149
array[2]="nebula"
150
array[3]="water"
151
str1=array.sort()
152
document.write(str1+"<br>")
153
</script>
154![]()
155
第三章 创建表达式
156![]()
157
1.使用算术运算符
158![]()
159
<script>
160
var1=12
161
var2=10
162
varadd=var1+var2
163
varsub=var1-var2
164
varmult=var1*var2
165
vardiv=var1/var2
166
varmod=var1%var2
167
document.write("数据1是:"+var1+"<br>")
168
document.write("数据2是:"+var2+"<br>")
169
document.write("数据相加是:"+varadd+"<br>")
170
document.write("数据相减是:"+varsub+"<br>")
171
document.write("数据相乘是:"+varmult+"<br>")
172
document.write("数据相除是:"+vardiv+"<br>")
173
document.write("数据相除取余数是:"+varmod+"<br>")
174
</script>
175![]()
176
2.递增变量和递减变量
177![]()
178
<script>
179
days=1
180
document.write("输出变量"+days+"<br>")
181
days++
182
document.write("递增后变量变为:"+days)
183
</script>
184![]()
185
3.创建比较表达式
186![]()
187
<script>
188
daysofmonth=28
189
if(daysofmonth==28)
190
month="february"
191
document.write("days of month:"+daysofmonth+"<br>")
192
document.write("month:"+month)
193
</script>
194![]()
195
4.创建逻辑表达式
196![]()
197
<script>
198
dayofmonth=28
199
if(dayofmonth==28 || dayofmonth==29)
200
month="february"
201
document.write("days of month:"+dayofmonth+"<br>")
202
document.write("month:"+month)
203
</script>
204![]()
205
5.使用条件运算符
206![]()
207
<script language="javascript">
208
stomach="hungry";
209
time="5:00";
210
(stomach=="hungry"&&time=="5:00") ? eat = "dinner":eat="a snack";
211
document.write("输出结果"+eat);
212
</script>
213![]()
214
6.识别数字
215![]()
216
<script>
217
var1=24;
218
(isNaN(var1))?document.write("变量var1"+var1+"不是数字"):Document.write("变量var1"+var1+"是数字")
219
</script>
220![]()
221
第四章 控制程序流程
222![]()
223
1.使用IF –Else语句
224![]()
225
<script>
226
month="december"
227
date=25
228
if(month=="december" && date==25)
229
document.write("今天是圣诞节,商店关门")
230
else
231
document.write("欢迎,您来商店购物")
232
</script>
233![]()
234
2.使用for 循环
235![]()
236
<script>
237
for (count=1;count<=10;count++)
238
document.write("输出第"+count+"句"+"<br>")
239
</script>
240![]()
241
3.使用while循环
242![]()
243
<script>
244
count=1
245
while(count<=15){
246
document.write("输出第"+count+"句" +"<br>")
247
count++}
248
</script>
249![]()
250
4.中断循环
251![]()
252
<script>
253
count=1
254
while(count<=15){
255
count++
256
if(count==8)
257
break;
258
document.write("输出第"+count+"句"+"<br>")}
259
</script>
260![]()
261
5.继续循环
262![]()
263
<script>
264
count=1
265
while(count<=15){
266
count++
267
if(count==8)
268
continue;
269
document.write("输出第"+count+"句"+"<br>")}
270
</script>
271![]()
272
6.使用javascript定时器
273![]()
274
<script>
275
function rabbit()
276
{document.write("输出语句")
277
}
278
</script>
279
<body onload=window.setTimeout(rabbit(),5000)>
280![]()
281
7.设置定期间隔
282![]()
283
<script>
284
window.setInterval("document.form1.text2.value=document.form1.text1.value",3000)
285
</script>
286
<form name=form1>
287
<input type=text name=text1><br>
288
<input type=text name=text2><br>
289
</form>
290![]()
291
8.清除超时和间隔
292![]()
293
<script>
294
stop=window.setInterval("document.form1.text2.value=document.form1.text1.value",300)
295
</script>
296
<form name=form1>
297
<input type=text name=text1><br>
298
<input type=text name=text2><br>
299
<input type=button name=button1 value=" 清除超时和间隔" onclick=clearInterval(stop)>
300
</form>
301![]()
302
第五章 使用函数
303![]()
304
1.声明函数
305![]()
306
<script>
307
function quote()
308
{ document.write("输出语句")
309
}
310
</script>
311![]()
312
2.调用函数
313![]()
314
<script>
315
function quote()
316
{ document.write("输出语句")
317
}
318
quote()
319
</script>
320![]()
321
3.了解全局变量和局部变量
322![]()
323
任何不用 var关键字声明的变量都是全局变量,任何在函数外声明的变量都是全局变量
324![]()
325
4.将参数传送给函数
326![]()
327
<script>
328
function f(item)
329
{document.write("输出参数"+item+"<br>")
330
}
331
f("fgdfgd")
332
f("参数二")
333
</script>
334![]()
335
5.从函数返回值
336![]()
337
<script>
338
function average(var1,var2,var3)
339
{ave=(var1+var2+var3)/3;
340
document.write("输出结果");
341
return ave;
342
}
343
document.write(average(34,56,78))
344
</script>
345![]()
346
6.通过HTML链接调用函数
347![]()
348
<script>
349
function quote(){
350
document.write(" 输出字符串")
351
}
352
</script>
353
<a href=javascript:quote()>通过HTML链接调用函数</a>
354
<a href=javascript:Document.write("输出字符")> 通过HTML链接调用函数,直接写javascript语句</a>
355![]()
356
第六章 处理事件
357![]()
358
1.检查鼠标单击
359![]()
360
<form name=form1>
361
<input type=button name=button1 value=hello onclick=document.form1.button1.value='there'>
362
</form>
363![]()
364
2.检测双击
365![]()
366
<form name=form1>
367
<input type=button name=button1 value=hello onclick=document.form1.button1.value='你单击了按钮' ondblclick=document.form1.button1.value='你双击了该按钮'>
368
</form>
369![]()
370
3.创建悬停按钮
371![]()
372
<img src=go.gif onmouseover=document.images[0].src='go2.gif' onmouseout= document.images[0].src='go.gif'>
373![]()
374
4.检测按键
375![]()
376
<form name=form1>
377
<input type=text name=text1 value=hello onkeypress="if(window.event.keyCode=='100') document.form1.text1.value='你按了d键'">
378
</form>
379![]()
380
5.设置焦点
381![]()
382
<form name=form1>
383
<input type=text name=text1 value=hello
384
onfous=document.form1.text1.value='该文本框获得焦点'
385
onblur=document.form1.text1.value='该文本框失去焦点'>
386
</form>
387![]()
388
6.检测下拉菜单选择
389![]()
390
<form name=form1>
391
<select name=select1 size=4
392
onChange=document.form1.text1.value=document.form1.select1.value>
393
<option value="北京">北京</option>
394
<option value="上海">上海</option>
395
<option value="武汉">武汉</option>
396
<option value="天津">天津</option>
397
<option value="大连">大连</option>
398
</select>
399
<input tppe=text name=text1 value=hello>
400
</form>
401![]()
402
7.创建网页加载和卸载信息
403![]()
404
<body onload=document.form1.text1.value='页面加载完毕' onunload=alert('再见,欢迎再来')>
405
<form name=form1>
406
<input type=text name=text1 value="页面正在加载 ……">
407
</form>
408![]()
409
第七章 使用对象
410![]()
411
1.理解对象\属性和方法
412![]()
413
<body bgcolor="green">
414
<script>
415
document.write("页面背景颜色是:"+document.bgColor)
416
document.write("页面前景颜色是:"+document.fgColor)
417
</script>
418![]()
419
2.使用网页元素对象
420![]()
421
<script>
422
</script>
423
<form name=form1>
424
<textarea name=ta1>dfgfdgfdhfdhdfdfgdf</textarea>
425
<input type=button value="选择文本" onclick=document.form1.ta1.select()>
426
<input type=button value="显示文本" onclick=document.write(document.form1.ta1.value)>
427
</form>
428![]()
429
3.使用子对象
430![]()
431![]()
432
<form name=form1>
433
<input type=text name=text1 value=hello>
434
</form>
435
<script>
436
document.form1.text1.value="gdfgfd"
437
</script>
438![]()
439
<form name=form1>
440
<input type=radio name=radio1>男
441
<input type=radio name=radio2>女
442
</script>
443
<script>
444
document.form1.radio1.checked=true
445
</script>
446![]()
447
4.使用预定义对象
448![]()
449
<script>
450
str1="dgdfgdfgdfhf固定法固定法功夫攻打法"
451
document.write(str1+"<br>")
452
str2=str1.substr(5)
453
document.write(str2+"<br>")
454
document.write("输出圆的面积:"+Math.PI*Math.pow(5.0,2))
455
</script>
456![]()
457
5.创建新对象
458![]()
459
<script>
460
today=new Date()
461
document.write("今天是"+(today.getMonth()+1)+"月"+today.getDate()+"日"+"<br>")
462
document.write("现在是:"+today.toLocaleString())
463
</script>
464![]()
465
6.引用当前对象
466![]()
467
<form name=form1>
468
<input type=text name=text1 value="dgdgdfgfd" onclick=this.select()>
469
</script>
470![]()
471
7.查看对象属性
472![]()
473
<script>
474
for(prop in window)
475
{document.write("window."+prop+"="+window[prop]+"<br>");}
476
for(prop2 in location)
477
{document.write("location."+prop2+"="+location[prop]+"<br>");}
478
</script>
479![]()
480
8.使用Array对象
481![]()
482
<script>
483
array=new Array(10)
484
array[0]="bark"
485
array[1]="apple"
486
array[2]="nebula"
487
array[3]="cookie"
488
array[4]="technology"
489
document.write("数组元素个数是"+array.Length+"<br>")
490
document.write("用 join将数组合并"+array.join(" ")+"<br>")
491
document.write(" 数组排序"+array.sort())
492
</script>
493![]()
494
9.使用 image 对象
495![]()
496
<img src=**.gif alt="图片提示…." border=10>
497
<script>
498
document.write("图片提示是:"+document.images[0].alt+"<br>")
499
document.write("图片边框大小是:"+document.images[0].broder)
500
</script>
501![]()
502
10.预加载图像
503![]()
504
<script>
505
freddy=new Image()
506
freddy.src=freddy.gif
507
</script>
508
<body onload=document.images[0].src=freddy.src>
509
,<img src="blank.gif">
510
</body>
511![]()
512
11.改变图像
513![]()
514
<img src=freddy.gif><br>
515
<form name=form1>
516
<input type=button name=button1 value="改变图像" onclickd=document.images[0].src=dudjp.gif>
517
</form>
518![]()
519
12.使用link和anchor对象
520![]()
521
<a name=anchor1>锚点1<br>
522
<a href=http://www.microsoft.com>Microsoft</a><br>
523
<a href=http://www.sohu.com>sohu</a><br>
524
<a href=http://www.sina.com.cn>sina</a><br>
525
<script>
526
document.write("本页面共有"+document.links.length+"链接"+"<br>")
527
document.write("本页面共有"+document.anchors.length+"锚点"+"<br>")
528
document.write("第一个链接协议是"+document.links[0].protocol+"<br>")
529
document.write("第一个链接路径是"+document.links[0].pathnamel+"<br>")
530
document.write("第一个链接href是"+document.links[0].hrefl+"<br>")
531
</script>
532![]()
533
13.改变链接
534![]()
535
<a href =http://www.microsoft.com>link</a>
536
<form name=form1>
537
<input type=button name=button1 value="改变链接" onclick=document.links[0].href='http://www.sohu.com'>
538
</form>
539![]()
540
14.使用history对象
541![]()
542
<form name=form1>
543
<input type=button name=button1 value="向后返回2页" onclick=window.history.go(-2)>
544
</form>
545![]()
546
第八章 使用窗口
547![]()
548
1.在浏览器的状态栏上显示文本
549![]()
550
<body onload=window.status="欢迎光临我的站点">
551
<a href=http://www.sohu.com>sohu</a>
552
</body>
553![]()
554
2.改变背景色
555![]()
556
<script>
557
document.bgColor="orange"
558
</script>
559![]()
560
3.列举背景颜色
561![]()
562
<body bgColor =green>
563
<script>
564
document.write("当前背景色是:"+document.bgColor)
565
</script>
566
</body>
567![]()
568
4.改变文本和链接颜色
569![]()
570
<script>
571
document.bgColor="orange"
572
document.fgColor="blue"
573
document.linkColor="red"
574
</script>
575
<h2>看看这段文本颜色</h2>
576
<a href=http://www.sohu.com>sohu</a>
577
</body>
578![]()
579
5.改变文档标题
580![]()
581
<script>
582
name="Mouse"
583
document.title="welcome to "+name+"'s House"
584
document.write(document.title)
585
</script>
586![]()
587
6.显示修改日期
588![]()
589
<script>
590
document.write("本页面最后修改时间是"+document.lastModified)
591
</script>
592![]()
593
7.查看当前文档的URL
594![]()
595
<script>
596
document.write("本页面的URL:"+document.URL)
597
</script>
598![]()
599
8.查看引用页
600![]()
601
<script>
602
document.write("本页面的引用页是"+document.referrer)
603
</script>
604![]()
605
9.打开新的浏览器窗口
606![]()
607
<script>
608
window.open("*.htm","title","width=200,height=400,resizable=yes")
609
</script>
610![]()
611
10.关闭远程窗口
612![]()
613![]()
614
close.html:
615
<script>
616
document.write("正文")
617
</script>
618
<form name=form1>
619
<input type=button name=button1value="关闭" onclick=window.close()>
620
</form>
621![]()
622
open.html
623
<script>
624
window.open("close.html","romote","width=200,height=400,resizable=yes")
625
</script>
626![]()
627
11.打印窗口
628![]()
629
<script>
630
document.write("正文")
631
</script>
632
<form name=form1>
633
<input type=button value=打印 onclick=window.print()>
634
</form>
635![]()
636
12.移动窗口
637![]()
638![]()
639
<form name=form1>
640
水平方向<input type=text name=x value=20>
641
垂直方向<input type=text name=y value=50>
642
<input type=button value="移动窗口到…"onclick=window.moveTo(document.form1.x.value,document.form1.y.value)>
643
</form>
644![]()
645
<form name=form1>
646
水平方向<input type=text name=x value=20>
647
垂直方向<input type=text name=y value=50>
648
<input type=button value="移动窗口"onclick=window.moveBy(document.form1.x.value,document.form1.y.value)>
649
</form>
650![]()
651![]()
652
13.改变窗口大小
653![]()
654![]()
655
<form name=form1>
656
水平方向<input type=text name=x value=200>
657
垂直方向<input type=text name=y value=500>
658
<input type=button value="改变窗口大小到….."onclick=window.resizeTo(document.form1.x.value,document.form1.y.value)>
659
</form>
660![]()
661
<form name=form1>
662
水平方向<input type=text name=x value=200>
663
垂直方向<input type=text name=y value=500>
664
<input type=button value="改变窗口大小"onclick=window.resizeBy(document.form1.x.value,document.form1.y.value)>
665
</form>
666![]()
667
14.用警告对话框通知用户
668![]()
669
<script>
670
window.alert("welcome")
671
</script>
672![]()
673
15.用提示对话框接受输入
674![]()
675
<script>
676
name=window.prompt("输入姓名","姓名")
677
document.write(" 欢迎您:"+name+"来到这里")
678
</script>
679![]()
680
16.用确认对话框使用户做出决定
681![]()
682
<script>
683
like=window.confirm("你觉得好吗?")
684
if(like==true)
685
document.write("谢谢你的夸奖")
686
else
687
document.write("希望得到你的夸奖")
688
</script>
689![]()
690
第九章 使用字符串
691![]()
692
1.使用字符串对象
693![]()
694
<script>
695
mystring="gdgdfgfddddaaaaaaaaaaaabbbbbbbbbbbbbbbbbvbhg.<br>"
696
document.write(mystring)
697
document.write(mystring.bold())
698
document.write(mystring.toUpperCase())
699
</script>
700![]()
701
2.使用子字符串
702![]()
703
<script>
704
str1="fdsf 1111 gfdgfd dfdsf cccc dddd.<br>"
705
document.write(str1)
706
document.write(str1.substring(0,13)+"<br>")
707
document.write(str1.substr (20,11)+"<br>")
708
</script>
709![]()
710
3.连接字符串
711![]()
712
<script>
713
str1="may you find"
714
str2="peace,happiness and prosperity.<br>"
715
document.write(str1+"<br>")
716
document.write(str2)
717
document.write(str1.concat(str2))
718
document.write(str1+=str2)
719
</script>
720![]()
721
4.格式化字符串变量
722![]()
723
<script>
724
str1="peace,happiness and prosperity.<br>"
725
document.write(str1)
726
document.write(str1.big())
727
document.write(str1.small())
728
document.write(str1.bold())
729
document.write(str1.italics())
730
document.write(str1.strike())
731
document.write(str1.fontsize(6))
732
document.write(str1.fontcolor(green))
733
</script>
734![]()
735
5.创建锚和链接
736![]()
737
<script>
738
str1="this is the bigginning of the page.<br>"
739
str2="….<br>"
740
str3="this is the end of the page .<br>"
741
str4="link to the start<br>"
742
str5="link to the end<br>"
743
document.write(str1.anchor("start"))
744
for(i=0;i<10;i++)
745
document.write(str2);
746
document.write(str3.anchor("end"))
747
document.write(str4.link("#start"))
748
document.write(str5.link("#end"))
749
</script>
750![]()
751
6.确定字符串长度
752![]()
753
<script>
754
str1="this is the bigginning of the page."
755
document.write(str1+"<br>")
756
document.write( "字符串的长度是:"+str1.length)
757
document.write("字符串全部大写是;"+str1.toUpperCase())
758
document.write("字符串全部小写是;"+str1.toLowerCase())
759
</script>
760![]()
761
7.在字符串内搜索
762![]()
763
<script>
764
str1="this is the end of the line.<br>"
765
document.write(str1)
766
document.write("字符end在字符串的位置是"+str1.search("end"))
767
document.write("字符dog在字符串的位置是"+str1.search("dog"))
768
</script>
769![]()
770
8.定位字符串中的字符
771![]()
772
<script>
773
str1="spring is a time for flowers and trees and baby bunnles<br>"
774
document.write(str1)
775
document.write("the index for the second word ‘and' is"+str1.indexOf("and",30))
776
documednt.write("the last index of the word ‘and' is "+str1.lastIndexOf("and"))
777
</script>
778![]()
779
9.替换字符串中的文本
780![]()
781
<script>
782
str1="spring is a time for flowers and trees and baby bunnles<br>"
783
document.write(str1)
784
document .write(str1.replace("and",","))
785
</script>
786![]()
787
10.字符串分离
788![]()
789
<script>
790
str1="spring is a time for flowers and trees and baby bunnles<br>"
791
document.write(str1)
792
str1array=str1.split(" ")
793
document.write(str1array[0]+"<br>")
794
document.write(str1array[1]+"<br>")
795
document.write(str1array[2]+"<br>")
796
document.write(str1array[3]+"<br>")
797
</script>
798![]()
799
第十章 使用日期和时间
800![]()
801
1.使用Date对象
802![]()
803
<script>
804
cdate=new Date("august 2,1989 12:30:00")
805
document.write(cdate)
806
</script>
807![]()
808
2.显示当地时间和日期
809![]()
810
<script>
811
cdate=new Date()
812
document.write("当前时间是:"+cdate.toGMTString()+"<br>")
813
document.write("日期和时间是:"+cdate.toLocaleString())
814
</script>
815![]()
816
3.获得时间和日期值
817![]()
818
<script>
819
cdate=new Date()
820
document.write("显示当前的星期"+cdate.getDay()+"<br>")
821
document.write("显示当前的月份"+cdate.getMonth()+"<br>")
822
document.write("显示当前的日期"+cdate.getDay()+"<br>")
823
document.write("显示当前的年份"+cdate.getYear()+"<br>")
824
document.write("显示当前的小时"+cdate.getHours()+"<br>")
825
document.write("显示当前的分钟"+cdate.getMinutes()+"<br>")
826
document.write("显示当前的秒"+cdate.getSeconds()+"<br>")
827
</script>
828![]()
829
4.设置时间和日期值
830![]()
831
<script language=javascript>
832
cdate=new Date("December 25,1984")
833
document.write("显示日期"+cdate+"<br>")
834
document.write("设置月份"+cdate.setMonth(10)+"<br>")
835
document.write("设置日期"+cdate.setDate(23)+"<br>")
836
document.write("设置年份"+cdate.setYear(2000)+"<br>")
837
document.write("设置小时"+cdate.setHours(13)+"<br>");
838
document.write("设置分钟"+cdate.setMinutes(47)+"<br>");
839
document.write("设置秒"+cdate.setSeconds(23)+"<br>");
840
document.write("显示设置后的日期和时间"+cdate);
841
</script>
842![]()
843
第十一章 使用Math对象
844![]()
845
1. 使用Math对象
846![]()
847
<script language=javascript>
848
</script>
849
<form name=form1>
850
圆的半径:<input type=text name=rad><br>
851
圆的面积:<input type=text name=area><br>
852
<input type=button name=button1 value=计算圆的面积 onclick=document.form1.area.value=document.form1.rad.value*document.
853
form1.rad.value*Math.PI>
854
</form>
855![]()
856
2.生成随机数
857![]()
858
<script>
859
array1=new Array(
860
"这是第1句",
861
"这是第2句",
862
"这是第3句",
863
"这是第4句",
864
"这是第5句",
865
"这是第6句")
866
RandomNo=Math.floor(array1.length*Math.random())
867
document.write("随机输出某一句"+"<br>"+array1[RandomNo])
868
</script>
869![]()
870
3.使用平方根
871![]()
872
<form name=form1>
873
value:<input type=text name=va1><br>
874
平方根<input type=text name=sqrt><br>
875
<input type=button name=button1 value=计算平方根
876
onclick="document.form1.sqrt.value=Math.sqrt(document.form1.va1.value)">
877
</form>
878![]()
879
4.数字的舍入
880![]()
881
<form name=form1>
882
输入<input type=text name=val><br>
883
舍入的结果<input type=text name=round><br>
884
<input type=button name=button1 value=计算结果 onclick=document.form1.round.value=Math.round(document.form1.val.value)>
885
</form>
886![]()
887
5.乘方运算
888![]()
889
<form name=form1>
890
底数<input type=text name=val><br>
891
指数<input type=text name=power><br>
892
幂<input type=text name=result><br>
893
<input type=button name=button1 value=计算结果 onclick="document.form1.result.value=Math.pow (document.form1.val.value,document.form1.power.value)">
894
</form>
895![]()
896
6.发现最小值和最大值
897![]()
898
<form name=form1>
899
数字1<input type=text name=val1><br>
900
数字2<input type=text name=val2><br>
901
最小值<input type=text name=min><br>
902
最大值<input type=text name=max><br>
903
数字1<input type=button value=计算 onclick="document.form1.min.value=Math.min (document.form1.val1.value,document.form1.val2.value);document.form1.
904
max.value= Math.max(document.form1.val1.value,document.form1.val2.value)">
905
</form>
906![]()
907
第十二章 使用表单
908![]()
909
1.使用文本框
910![]()
911![]()
912
<form name=form1>
913
<input type=text value="information ,please"name=text1>
914
</form>
915
<script>
916
document.write("表单text1类型是: "+document.form1.text1.type+"<br>")
917
document.write("表单text1名称是: "+document.form1.text1.name+"<br>")
918
document.write("表单text1值是: "+document.form1.text1.value+"<br>")
919
document.write("表单text1大小是: "+document.form1.text1.size+"<br>")
920
</script>
921![]()
922
<form name=form1>
923
<input type=text name=text1 value=click here
924
onfocus=document.form1.text1.select()>
925
</form>
926![]()
927
2.使用密码框
928![]()
929
<form name=form1>
930
<input type=password name=pw1 value=daylight>
931
</form>
932
<script>
933
document.write("表单pw1的类型:"+document.form1.pw1.type+"<br>")
934
document.write("表单pw1的名称:"+document.form1.pw1.name+"<br>")
935
document.write("表单pw1的值:"+document.form1.pw1.value+"<br>")
936
document.write("表单pw1的大小:"+document.form1.pw1.size+"<br>")
937
</script>
938![]()
939
3.使用隐藏字段
940![]()
941
<form name=form1>
942
<input type=hidden name=hid1 value=piece of eight>
943
</form>
944
<script>
945
document.write("表单hid1的类型:"+document.form1.hid1.type+"<br>")
946
document.write("表单hid1的名称:"+document.form1.hid1.name+"<br>")
947
document.write("表单hid1的值:"+document.form1.hid1.value+"<br>")
948
</script>
949![]()
950
4.使用文本区域框
951![]()
952![]()
953
<form name=form1>
954
<textarea name=ta1>how many grains of sand are there in the sahara desert?</textarea>
955
</form>
956
<script>
957
document.write("表单ta1的类型:"+document.form1.ta1.type+"<br>")
958
document.write("表单ta1的名称:"+document.form1.ta1.name+"<br>")
959
document.write("表单ta1的值:"+document.form1.ta1.value+"<br>")
960
document.write("表单ta1的横向宽度:"+document.form1.ta1.cols+"<br>")
961
document.write("表单ta1的纵向宽度:"+document.form1.rows.value+"<br>")
962
</script>
963![]()
964
6.使用重置按钮
965![]()
966
<form name=form1>
967
<input type=reset name=reset1 value="rest form">
968
</form>
969
<script>
970
document.write("表单reset1的类型:"+document.form1.reset1.type+"<br>")
971
document.write("表单reset1的名称:"+document.form1.reset1.name+"<br>")
972
document.write("表单reset1的值:"+document.form1.reset1.value+"<br>")
973
</script>
974![]()
975
7.使用提交按钮
976![]()
977
<form name=form1>
978
<input type=submit name=submit1 value="submit form">
979
</form>
980
<script>
981
document.write("表单submit1的类型:"+document.form1.submit1.type+"<br>")
982
document.write("表单submit1的名称:"+document.form1.submit1.name+"<br>")
983
document.write("表单submit1的值:"+document.form1.submit1.value+"<br>")
984
</script>
985![]()
986
8.使用复选按钮
987![]()
988
<form name=form1>
989
<input type=checkbox name=cb1 >computer savvy?
990
</form>
991
<script>
992
document.write("表单cb1的类型:"+document.form1.cb1.type+"<br>")
993
document.write("表单cb1是否被选择?:"+document.form1.cb1.checked+"<br>")
994
document.write("表单cb1的名称:"+document.form1.cb1.name+"<br>")
995
</script>
996![]()
997
9.使用单选按钮
998![]()
999
<form name=form1>
1000
<input type=radio name=radio1>male
1001
<input type=radio name=radio1>female
1002
</form>
1003
<script>
1004
document.write("第一个按钮被选择"+document.form1.radio1[0].checked+"<br>")
1005
document.write("第二个按钮被选择"+document.form1.radio1[1].checked+"<br>")
1006
document.write("按钮的名称"+ document.form1.radio1[0].name+"<br>")
1007
document.write("按钮的个数"+document.form1.radio1.length)
1008
</script>
1009![]()
1010
10.使用选择列表
1011![]()
1012
<form name=form1>
1013
<select name=select1 size=4>
1014
<option name=option1 value=lon>london,England</option>
1015
<option name=option2 value=dub>Dublin,Ireland</option>
1016
</select>
1017
</form>
1018
<script>
1019
document.write("这个选择列表的名称"+document.form1.select1.name+"<br>")
1020
document.write("这个选择列表的长度"+document.form1.select1.length+"<br>")
1021
document.write("这个选择列表当前被选择的索引号"+document.form1.select1.selectedIndex+"<br>")
1022
document.write("这个选择列表的尺寸"+document.form1.select1.size+"<br>")
1023
</script>
1024![]()
1025
11.验证表单的有效性
1026![]()
1027
<script>
1028
function validate(){
1029
if(document.form1.text1.value!='1'||'2'||'3'||'4'){
1030
alert("请输入1~4的整数")
1031
}
1032
}
1033
</script>
1034
<form name=form1>
1035
请输入1~4的整数:
1036
<input type=text name=text1 size=4 onchange=validate()>
1037
</form>
1038![]()
1039
12.控制表单焦点
1040![]()
1041
<form name=form1>
1042
<input type=text name=text1 value=where is you focus?><br>
1043
<input type=text name=text2 value=is there?><br>
1044
<input type=text name=text3 value=or maybe here?><br>
1045
<input type=button name=button1 value="text box #1" onclick=document.form1.text1.focus()><br>
1046
<input type=button name=button2 value="text box #2" onclick=document.form1.text2.focus()><br>
1047
<input type=button name=button3 value="text box #3" onclick=document.form1.text3.focus()><br>
1048
</form>
1049![]()
1050
第十三章 使用分栏
1051![]()
1052
第十四章 使用navigator
1053![]()
1054
1.使用navigator对象
1055![]()
1056
<script>
1057
document.write("navigator对象的属性"+"<br>")
1058
document.write("appcodename:"+navigator.appCodeName+"<br>")
1059
document.write("appname::"+navigator.appName+"<br>")
1060
document.write("appversion:"+navigator.appVersion+"<br>")
1061
document.write("platform:"+navigator.platform+"<br>")
1062
document.write("userAgent:"+navigator.userAgent+"<br>")
1063
</script>
1064
<script>
1065
document.write("navigator对象的方法"+"<br>")
1066
document.write("javaEnabled():"+navigator.javaEnabled())
1067
</script>
1068![]()
1069
2.检查用户的浏览器
1070![]()
1071
<script>
1072
if(navigator.appName.indexOf("Microsoft")!=-1){
1073
document.write("用户浏览器是微软的IE浏览器"+"<br>")}
1074
else if(navigator.appName.indexOf("Netscape")!=-1){
1075
document.write("用户浏览器是netscape的netscape浏览器"+"<br>")}
1076
if(navigator.appVersion.indexOf("4.0")!=-1){
1077
document.write("you are using a version 4.0compatible browser")
1078
}
1079
else{
1080
document.write("this browser is not 4.0 compliant")}
1081
</script>
1082![]()
1083
3.检测用户的操作系统
1084![]()
1085
<script>
1086
if (navigator.platform.indexOf("win32")!=-1){
1087
document.write("you are using a computer running windows 95 or highter")}
1088
else{
1089
document.write("this computer is not running windows 95 or higher")}
1090
</script>
1091![]()
1092
4.使用location对象
1093![]()
1094![]()
1095
<script>
1096
document.write("location对象的属性"+"<br>")
1097
document.write("hash"+location.hash+"<br>")
1098
document.write("hostname"+location.hostname+"<br>")
1099
document.write("host"+location.host+"<br>")
1100
document.write("href"+location.href+"<br>")
1101
document.write("port"+location.port+"<br>")
1102
document.write("search"+location.search+"<br>")
1103
</script>
1104![]()
1105
重新加载网页
1106
<form name=form1>
1107
<input type=button name=button1 value=重新加载本页 onclick=location.reload>
1108
</form>
1109![]()
1110![]()
1111
5.使用cookie
1112![]()
1113![]()
1114
<script>
1115
finction makecookie(){
1116
if(!document.cookie){
1117
name=prompt("请输入你的姓名");
1118
document.cookie="name="+name+";";}
1119
}
1120
</script>
1121![]()
1122
<body onload=makecookie()>
1123
<script>
1124
function makecookie(){
1125
if(!document.cookie){
1126
name=prompt("请输入你的姓名")
1127
document.cookie="name="+name+";";
1128
namestart=document.cookie.indexOf("=");
1129
nameend=document.cookieindexOf(";");
1130
document.writeln("your name is:"+document.cookie.substring(namestart+1,nameend)+",br>")
1131
}
1132
}
1133
</script>
1134![]()

2
第一章javascript简介3

4
1.在地址栏输入javascript语句5

6
Javascript:Document.write("显示文字")7

8
2.将javascript嵌入 HTML文档9

10
<script language=javascript>11
document.bgColor="blue"12
</script>13

14
第二章 使用变量和数组15

16
1.声明变量17

18
<script language=javascripe>19
Var answer1,answer2,answer3,answer4;20
answer1=9;21
answer2=2.522
answer3="Milkey May" 23
answer4=true24
</script>25

26
2.使用整数27

28
<script language=javascript>29
var decimalNum,hexadecimalNum,octalNum30
decimalNum=2431
hexadecimalNum=0x2432
octalNum=02433
document.write("显示十进制数:"+ decimalNum+"<br>")34
document.write("显示十六进制数:"+ hexadecimalNum +"<br>")35
document.write("显示八进制数:"+ octalNum +"<br>")36
</script>37

38
3.使用浮点数39

40
<script language=javascript>41
var num1,num2,num3,num442
num1=1234567890000.043
num2=5.14e2344
num3=0.000012345645
num4=6.0254e3-446
document.write("浮点数1:"+num1+"<br>")47
document.write("浮点数2:"+num2+"<br>")48
document.write("浮点数3:"+num3+"<br>")49
document.write("浮点数4:"+num4+"<br>")50
</script>51

52
4.使用布尔值53

54
<script language=javascript>55
var answer1,answer256
answer1=true57
answer2=false58
document.write("显示布尔1:"+answer1+"<br>")59
document.write("显示布尔2:"+answer2+"<br>")60
</script>61

62
5.使用字符串63

64
<script language=javascript>65
var str1,str266
str1="fdsgdg dsfdsf china"67
str2="武汉市广播电视大学"68
document.write("显示字符串1:"+str1+"<br>")69
document.write("显示字符串2:"+str2+"<br>")70
</script>71

72
6.确定变量类型73

74
<script>75
var answer1,answer2,answer3,answer476
answer1=977
answer2=2.578
answer3="milky may"79
answer4=true80
document.write("变量1的类型是:"+typeof answer1 +"<br>")81
document.write("变量2的类型是:"+typeof answer2 +"<br>")82
document.write("变量3的类型是:"+typeof answer3 +"<br>")83
document.write("变量4的类型是:"+typeof answer4 +"<br>")84
</script>85

86
7.将字符串转换成数字87

88
<script>89
var str1="31 days in january"90
var int1=parseInt(str1)91
document.write("str1的数据类型是 :"+typeof str1+"<br>")92
document.write("int1的数据类型是 :"+typeof int1+"<br>")93
</script>94

95
8.将数字转换成字符串96

97
<script>98
var int1=25699
var str1=""+int1100
document.write("str1的数据类型是 :"+typeof str1+"<br>")101
document.write("int1的数据类型是 :"+typeof int1+"<br>")102
</script>103

104
9.声明数组105

106
<script>107
array=new Array(5)108
array[0]=1109
array[1]=3110
array[2]=5111
array[3]=7112
array[4]=11113
document.write("数组是:"+array[0]+" "+array[1]+" "+array[2]+" "+array[3]+" "+array[4])114
</script>115

116
10.确定数组元素的个数117

118
<script>119
array=new Array(5)120
array[0]=1121
array[1]=3122
array[2]=5123
array[3]=7124
array[4]=11125
document.write("数组是:"+array[0]+" "+array[1]+" "+array[2]+" "+array[3]+" "+array[4]+"<br>")126
document.write("数组的元素个数是"+array.length)127
</script>128

129
11.将数组转换为字符串130

131
<script>132
array=new Array()133
array[0]="dark"134
array[1]="apple"135
array[2]="nebula"136
array[3]="water"137
str1=array.join()138
str2=array.join(" ")139
document.write(str1+"<br>")140
document.write(str2)141
</script>142

143
12.对数组排序144

145
<script>146
array=new Array()147
array[0]="dark"148
array[1]="apple"149
array[2]="nebula"150
array[3]="water"151
str1=array.sort()152
document.write(str1+"<br>")153
</script>154

155
第三章 创建表达式156

157
1.使用算术运算符158

159
<script>160
var1=12161
var2=10162
varadd=var1+var2163
varsub=var1-var2164
varmult=var1*var2165
vardiv=var1/var2166
varmod=var1%var2167
document.write("数据1是:"+var1+"<br>")168
document.write("数据2是:"+var2+"<br>")169
document.write("数据相加是:"+varadd+"<br>")170
document.write("数据相减是:"+varsub+"<br>")171
document.write("数据相乘是:"+varmult+"<br>")172
document.write("数据相除是:"+vardiv+"<br>")173
document.write("数据相除取余数是:"+varmod+"<br>")174
</script>175

176
2.递增变量和递减变量177

178
<script>179
days=1180
document.write("输出变量"+days+"<br>")181
days++182
document.write("递增后变量变为:"+days)183
</script>184

185
3.创建比较表达式186

187
<script>188
daysofmonth=28189
if(daysofmonth==28)190
month="february"191
document.write("days of month:"+daysofmonth+"<br>")192
document.write("month:"+month)193
</script>194

195
4.创建逻辑表达式196

197
<script>198
dayofmonth=28199
if(dayofmonth==28 || dayofmonth==29)200
month="february"201
document.write("days of month:"+dayofmonth+"<br>")202
document.write("month:"+month)203
</script>204

205
5.使用条件运算符206

207
<script language="javascript">208
stomach="hungry";209
time="5:00";210
(stomach=="hungry"&&time=="5:00") ? eat = "dinner":eat="a snack";211
document.write("输出结果"+eat);212
</script>213

214
6.识别数字215

216
<script>217
var1=24;218
(isNaN(var1))?document.write("变量var1"+var1+"不是数字"):Document.write("变量var1"+var1+"是数字")219
</script>220

221
第四章 控制程序流程222

223
1.使用IF –Else语句224

225
<script>226
month="december"227
date=25228
if(month=="december" && date==25)229
document.write("今天是圣诞节,商店关门")230
else231
document.write("欢迎,您来商店购物")232
</script>233

234
2.使用for 循环235

236
<script>237
for (count=1;count<=10;count++)238
document.write("输出第"+count+"句"+"<br>")239
</script>240

241
3.使用while循环242

243
<script>244
count=1245
while(count<=15){246
document.write("输出第"+count+"句" +"<br>")247
count++}248
</script>249

250
4.中断循环251

252
<script>253
count=1254
while(count<=15){255
count++256
if(count==8)257
break;258
document.write("输出第"+count+"句"+"<br>")}259
</script>260

261
5.继续循环262

263
<script>264
count=1265
while(count<=15){266
count++267
if(count==8)268
continue;269
document.write("输出第"+count+"句"+"<br>")}270
</script>271

272
6.使用javascript定时器273

274
<script>275
function rabbit()276
{document.write("输出语句")277
}278
</script>279
<body onload=window.setTimeout(rabbit(),5000)>280

281
7.设置定期间隔282

283
<script>284
window.setInterval("document.form1.text2.value=document.form1.text1.value",3000)285
</script>286
<form name=form1>287
<input type=text name=text1><br>288
<input type=text name=text2><br>289
</form>290

291
8.清除超时和间隔292

293
<script>294
stop=window.setInterval("document.form1.text2.value=document.form1.text1.value",300)295
</script>296
<form name=form1>297
<input type=text name=text1><br>298
<input type=text name=text2><br>299
<input type=button name=button1 value=" 清除超时和间隔" onclick=clearInterval(stop)>300
</form>301

302
第五章 使用函数303

304
1.声明函数305

306
<script>307
function quote()308
{ document.write("输出语句")309
}310
</script>311

312
2.调用函数313

314
<script>315
function quote()316
{ document.write("输出语句")317
}318
quote()319
</script>320

321
3.了解全局变量和局部变量322

323
任何不用 var关键字声明的变量都是全局变量,任何在函数外声明的变量都是全局变量324

325
4.将参数传送给函数326

327
<script>328
function f(item)329
{document.write("输出参数"+item+"<br>")330
}331
f("fgdfgd")332
f("参数二")333
</script>334

335
5.从函数返回值336

337
<script>338
function average(var1,var2,var3)339
{ave=(var1+var2+var3)/3;340
document.write("输出结果");341
return ave;342
}343
document.write(average(34,56,78))344
</script>345

346
6.通过HTML链接调用函数347

348
<script>349
function quote(){350
document.write(" 输出字符串")351
}352
</script>353
<a href=javascript:quote()>通过HTML链接调用函数</a>354
<a href=javascript:Document.write("输出字符")> 通过HTML链接调用函数,直接写javascript语句</a>355

356
第六章 处理事件357

358
1.检查鼠标单击359

360
<form name=form1>361
<input type=button name=button1 value=hello onclick=document.form1.button1.value='there'>362
</form>363

364
2.检测双击365

366
<form name=form1>367
<input type=button name=button1 value=hello onclick=document.form1.button1.value='你单击了按钮' ondblclick=document.form1.button1.value='你双击了该按钮'>368
</form>369

370
3.创建悬停按钮371

372
<img src=go.gif onmouseover=document.images[0].src='go2.gif' onmouseout= document.images[0].src='go.gif'>373

374
4.检测按键375

376
<form name=form1>377
<input type=text name=text1 value=hello onkeypress="if(window.event.keyCode=='100') document.form1.text1.value='你按了d键'">378
</form>379

380
5.设置焦点381

382
<form name=form1>383
<input type=text name=text1 value=hello384
onfous=document.form1.text1.value='该文本框获得焦点'385
onblur=document.form1.text1.value='该文本框失去焦点'>386
</form>387

388
6.检测下拉菜单选择389

390
<form name=form1>391
<select name=select1 size=4392
onChange=document.form1.text1.value=document.form1.select1.value>393
<option value="北京">北京</option>394
<option value="上海">上海</option>395
<option value="武汉">武汉</option>396
<option value="天津">天津</option>397
<option value="大连">大连</option>398
</select>399
<input tppe=text name=text1 value=hello>400
</form>401

402
7.创建网页加载和卸载信息403

404
<body onload=document.form1.text1.value='页面加载完毕' onunload=alert('再见,欢迎再来')>405
<form name=form1>406
<input type=text name=text1 value="页面正在加载 ……">407
</form>408

409
第七章 使用对象410

411
1.理解对象\属性和方法412

413
<body bgcolor="green">414
<script>415
document.write("页面背景颜色是:"+document.bgColor)416
document.write("页面前景颜色是:"+document.fgColor)417
</script>418

419
2.使用网页元素对象420

421
<script>422
</script>423
<form name=form1>424
<textarea name=ta1>dfgfdgfdhfdhdfdfgdf</textarea>425
<input type=button value="选择文本" onclick=document.form1.ta1.select()>426
<input type=button value="显示文本" onclick=document.write(document.form1.ta1.value)>427
</form>428

429
3.使用子对象430

431

432
<form name=form1>433
<input type=text name=text1 value=hello>434
</form>435
<script>436
document.form1.text1.value="gdfgfd"437
</script>438

439
<form name=form1>440
<input type=radio name=radio1>男441
<input type=radio name=radio2>女442
</script>443
<script>444
document.form1.radio1.checked=true445
</script>446

447
4.使用预定义对象448

449
<script>450
str1="dgdfgdfgdfhf固定法固定法功夫攻打法"451
document.write(str1+"<br>")452
str2=str1.substr(5)453
document.write(str2+"<br>")454
document.write("输出圆的面积:"+Math.PI*Math.pow(5.0,2))455
</script>456

457
5.创建新对象458

459
<script>460
today=new Date()461
document.write("今天是"+(today.getMonth()+1)+"月"+today.getDate()+"日"+"<br>")462
document.write("现在是:"+today.toLocaleString())463
</script>464

465
6.引用当前对象466

467
<form name=form1>468
<input type=text name=text1 value="dgdgdfgfd" onclick=this.select()>469
</script>470

471
7.查看对象属性472

473
<script>474
for(prop in window)475
{document.write("window."+prop+"="+window[prop]+"<br>");}476
for(prop2 in location)477
{document.write("location."+prop2+"="+location[prop]+"<br>");}478
</script>479

480
8.使用Array对象481

482
<script>483
array=new Array(10)484
array[0]="bark"485
array[1]="apple"486
array[2]="nebula"487
array[3]="cookie"488
array[4]="technology"489
document.write("数组元素个数是"+array.Length+"<br>")490
document.write("用 join将数组合并"+array.join(" ")+"<br>")491
document.write(" 数组排序"+array.sort())492
</script>493

494
9.使用 image 对象495

496
<img src=**.gif alt="图片提示…." border=10>497
<script>498
document.write("图片提示是:"+document.images[0].alt+"<br>")499
document.write("图片边框大小是:"+document.images[0].broder)500
</script>501

502
10.预加载图像503

504
<script>505
freddy=new Image()506
freddy.src=freddy.gif507
</script>508
<body onload=document.images[0].src=freddy.src>509
,<img src="blank.gif">510
</body>511

512
11.改变图像513

514
<img src=freddy.gif><br>515
<form name=form1>516
<input type=button name=button1 value="改变图像" onclickd=document.images[0].src=dudjp.gif>517
</form>518

519
12.使用link和anchor对象520

521
<a name=anchor1>锚点1<br>522
<a href=http://www.microsoft.com>Microsoft</a><br>523
<a href=http://www.sohu.com>sohu</a><br>524
<a href=http://www.sina.com.cn>sina</a><br>525
<script>526
document.write("本页面共有"+document.links.length+"链接"+"<br>")527
document.write("本页面共有"+document.anchors.length+"锚点"+"<br>")528
document.write("第一个链接协议是"+document.links[0].protocol+"<br>")529
document.write("第一个链接路径是"+document.links[0].pathnamel+"<br>")530
document.write("第一个链接href是"+document.links[0].hrefl+"<br>")531
</script>532

533
13.改变链接534

535
<a href =http://www.microsoft.com>link</a>536
<form name=form1>537
<input type=button name=button1 value="改变链接" onclick=document.links[0].href='http://www.sohu.com'>538
</form>539

540
14.使用history对象541

542
<form name=form1>543
<input type=button name=button1 value="向后返回2页" onclick=window.history.go(-2)>544
</form>545

546
第八章 使用窗口547

548
1.在浏览器的状态栏上显示文本549

550
<body onload=window.status="欢迎光临我的站点">551
<a href=http://www.sohu.com>sohu</a>552
</body>553

554
2.改变背景色555

556
<script>557
document.bgColor="orange"558
</script>559

560
3.列举背景颜色561

562
<body bgColor =green>563
<script>564
document.write("当前背景色是:"+document.bgColor)565
</script>566
</body>567

568
4.改变文本和链接颜色569

570
<script>571
document.bgColor="orange"572
document.fgColor="blue"573
document.linkColor="red"574
</script>575
<h2>看看这段文本颜色</h2>576
<a href=http://www.sohu.com>sohu</a>577
</body>578

579
5.改变文档标题580

581
<script>582
name="Mouse"583
document.title="welcome to "+name+"'s House"584
document.write(document.title)585
</script>586

587
6.显示修改日期588

589
<script>590
document.write("本页面最后修改时间是"+document.lastModified)591
</script>592

593
7.查看当前文档的URL594

595
<script>596
document.write("本页面的URL:"+document.URL)597
</script>598

599
8.查看引用页600

601
<script>602
document.write("本页面的引用页是"+document.referrer)603
</script>604

605
9.打开新的浏览器窗口606

607
<script>608
window.open("*.htm","title","width=200,height=400,resizable=yes")609
</script>610

611
10.关闭远程窗口612

613

614
close.html:615
<script>616
document.write("正文")617
</script>618
<form name=form1>619
<input type=button name=button1value="关闭" onclick=window.close()>620
</form>621

622
open.html623
<script>624
window.open("close.html","romote","width=200,height=400,resizable=yes")625
</script>626

627
11.打印窗口628

629
<script>630
document.write("正文")631
</script>632
<form name=form1>633
<input type=button value=打印 onclick=window.print()>634
</form>635

636
12.移动窗口637

638

639
<form name=form1>640
水平方向<input type=text name=x value=20>641
垂直方向<input type=text name=y value=50>642
<input type=button value="移动窗口到…"onclick=window.moveTo(document.form1.x.value,document.form1.y.value)>643
</form>644

645
<form name=form1>646
水平方向<input type=text name=x value=20>647
垂直方向<input type=text name=y value=50>648
<input type=button value="移动窗口"onclick=window.moveBy(document.form1.x.value,document.form1.y.value)>649
</form>650

651

652
13.改变窗口大小653

654

655
<form name=form1>656
水平方向<input type=text name=x value=200>657
垂直方向<input type=text name=y value=500>658
<input type=button value="改变窗口大小到….."onclick=window.resizeTo(document.form1.x.value,document.form1.y.value)>659
</form>660

661
<form name=form1>662
水平方向<input type=text name=x value=200>663
垂直方向<input type=text name=y value=500>664
<input type=button value="改变窗口大小"onclick=window.resizeBy(document.form1.x.value,document.form1.y.value)>665
</form>666

667
14.用警告对话框通知用户668

669
<script>670
window.alert("welcome")671
</script>672

673
15.用提示对话框接受输入674

675
<script>676
name=window.prompt("输入姓名","姓名")677
document.write(" 欢迎您:"+name+"来到这里")678
</script>679

680
16.用确认对话框使用户做出决定681

682
<script>683
like=window.confirm("你觉得好吗?")684
if(like==true)685
document.write("谢谢你的夸奖")686
else687
document.write("希望得到你的夸奖")688
</script>689

690
第九章 使用字符串691

692
1.使用字符串对象693

694
<script>695
mystring="gdgdfgfddddaaaaaaaaaaaabbbbbbbbbbbbbbbbbvbhg.<br>"696
document.write(mystring)697
document.write(mystring.bold())698
document.write(mystring.toUpperCase())699
</script>700

701
2.使用子字符串702

703
<script>704
str1="fdsf 1111 gfdgfd dfdsf cccc dddd.<br>"705
document.write(str1)706
document.write(str1.substring(0,13)+"<br>")707
document.write(str1.substr (20,11)+"<br>")708
</script>709

710
3.连接字符串711

712
<script>713
str1="may you find"714
str2="peace,happiness and prosperity.<br>"715
document.write(str1+"<br>")716
document.write(str2)717
document.write(str1.concat(str2))718
document.write(str1+=str2)719
</script>720

721
4.格式化字符串变量722

723
<script>724
str1="peace,happiness and prosperity.<br>"725
document.write(str1)726
document.write(str1.big())727
document.write(str1.small())728
document.write(str1.bold())729
document.write(str1.italics())730
document.write(str1.strike())731
document.write(str1.fontsize(6))732
document.write(str1.fontcolor(green))733
</script>734

735
5.创建锚和链接736

737
<script>738
str1="this is the bigginning of the page.<br>"739
str2="….<br>"740
str3="this is the end of the page .<br>"741
str4="link to the start<br>"742
str5="link to the end<br>"743
document.write(str1.anchor("start"))744
for(i=0;i<10;i++)745
document.write(str2);746
document.write(str3.anchor("end"))747
document.write(str4.link("#start"))748
document.write(str5.link("#end"))749
</script>750

751
6.确定字符串长度752

753
<script>754
str1="this is the bigginning of the page."755
document.write(str1+"<br>")756
document.write( "字符串的长度是:"+str1.length)757
document.write("字符串全部大写是;"+str1.toUpperCase())758
document.write("字符串全部小写是;"+str1.toLowerCase())759
</script>760

761
7.在字符串内搜索762

763
<script>764
str1="this is the end of the line.<br>"765
document.write(str1)766
document.write("字符end在字符串的位置是"+str1.search("end"))767
document.write("字符dog在字符串的位置是"+str1.search("dog"))768
</script>769

770
8.定位字符串中的字符771

772
<script>773
str1="spring is a time for flowers and trees and baby bunnles<br>"774
document.write(str1)775
document.write("the index for the second word ‘and' is"+str1.indexOf("and",30))776
documednt.write("the last index of the word ‘and' is "+str1.lastIndexOf("and"))777
</script>778

779
9.替换字符串中的文本780

781
<script>782
str1="spring is a time for flowers and trees and baby bunnles<br>"783
document.write(str1)784
document .write(str1.replace("and",","))785
</script>786

787
10.字符串分离788

789
<script>790
str1="spring is a time for flowers and trees and baby bunnles<br>"791
document.write(str1)792
str1array=str1.split(" ")793
document.write(str1array[0]+"<br>")794
document.write(str1array[1]+"<br>")795
document.write(str1array[2]+"<br>")796
document.write(str1array[3]+"<br>")797
</script>798

799
第十章 使用日期和时间800

801
1.使用Date对象802

803
<script>804
cdate=new Date("august 2,1989 12:30:00")805
document.write(cdate)806
</script>807

808
2.显示当地时间和日期809

810
<script>811
cdate=new Date()812
document.write("当前时间是:"+cdate.toGMTString()+"<br>")813
document.write("日期和时间是:"+cdate.toLocaleString())814
</script>815

816
3.获得时间和日期值817

818
<script>819
cdate=new Date()820
document.write("显示当前的星期"+cdate.getDay()+"<br>")821
document.write("显示当前的月份"+cdate.getMonth()+"<br>")822
document.write("显示当前的日期"+cdate.getDay()+"<br>")823
document.write("显示当前的年份"+cdate.getYear()+"<br>")824
document.write("显示当前的小时"+cdate.getHours()+"<br>")825
document.write("显示当前的分钟"+cdate.getMinutes()+"<br>")826
document.write("显示当前的秒"+cdate.getSeconds()+"<br>")827
</script>828

829
4.设置时间和日期值830

831
<script language=javascript>832
cdate=new Date("December 25,1984")833
document.write("显示日期"+cdate+"<br>")834
document.write("设置月份"+cdate.setMonth(10)+"<br>")835
document.write("设置日期"+cdate.setDate(23)+"<br>")836
document.write("设置年份"+cdate.setYear(2000)+"<br>")837
document.write("设置小时"+cdate.setHours(13)+"<br>");838
document.write("设置分钟"+cdate.setMinutes(47)+"<br>");839
document.write("设置秒"+cdate.setSeconds(23)+"<br>");840
document.write("显示设置后的日期和时间"+cdate);841
</script>842

843
第十一章 使用Math对象844

845
1. 使用Math对象846

847
<script language=javascript>848
</script>849
<form name=form1>850
圆的半径:<input type=text name=rad><br>851
圆的面积:<input type=text name=area><br>852
<input type=button name=button1 value=计算圆的面积 onclick=document.form1.area.value=document.form1.rad.value*document.853
form1.rad.value*Math.PI>854
</form>855

856
2.生成随机数857

858
<script>859
array1=new Array(860
"这是第1句",861
"这是第2句",862
"这是第3句",863
"这是第4句",864
"这是第5句",865
"这是第6句")866
RandomNo=Math.floor(array1.length*Math.random())867
document.write("随机输出某一句"+"<br>"+array1[RandomNo])868
</script>869

870
3.使用平方根871

872
<form name=form1>873
value:<input type=text name=va1><br>874
平方根<input type=text name=sqrt><br>875
<input type=button name=button1 value=计算平方根876
onclick="document.form1.sqrt.value=Math.sqrt(document.form1.va1.value)">877
</form>878

879
4.数字的舍入880

881
<form name=form1>882
输入<input type=text name=val><br>883
舍入的结果<input type=text name=round><br>884
<input type=button name=button1 value=计算结果 onclick=document.form1.round.value=Math.round(document.form1.val.value)>885
</form>886

887
5.乘方运算888

889
<form name=form1>890
底数<input type=text name=val><br>891
指数<input type=text name=power><br>892
幂<input type=text name=result><br>893
<input type=button name=button1 value=计算结果 onclick="document.form1.result.value=Math.pow (document.form1.val.value,document.form1.power.value)">894
</form>895

896
6.发现最小值和最大值897

898
<form name=form1>899
数字1<input type=text name=val1><br>900
数字2<input type=text name=val2><br>901
最小值<input type=text name=min><br>902
最大值<input type=text name=max><br>903
数字1<input type=button value=计算 onclick="document.form1.min.value=Math.min (document.form1.val1.value,document.form1.val2.value);document.form1.904
max.value= Math.max(document.form1.val1.value,document.form1.val2.value)">905
</form>906

907
第十二章 使用表单908

909
1.使用文本框910

911

912
<form name=form1>913
<input type=text value="information ,please"name=text1>914
</form>915
<script>916
document.write("表单text1类型是: "+document.form1.text1.type+"<br>")917
document.write("表单text1名称是: "+document.form1.text1.name+"<br>")918
document.write("表单text1值是: "+document.form1.text1.value+"<br>")919
document.write("表单text1大小是: "+document.form1.text1.size+"<br>")920
</script>921

922
<form name=form1>923
<input type=text name=text1 value=click here924
onfocus=document.form1.text1.select()>925
</form>926

927
2.使用密码框928

929
<form name=form1>930
<input type=password name=pw1 value=daylight>931
</form>932
<script>933
document.write("表单pw1的类型:"+document.form1.pw1.type+"<br>")934
document.write("表单pw1的名称:"+document.form1.pw1.name+"<br>")935
document.write("表单pw1的值:"+document.form1.pw1.value+"<br>")936
document.write("表单pw1的大小:"+document.form1.pw1.size+"<br>")937
</script>938

939
3.使用隐藏字段940

941
<form name=form1>942
<input type=hidden name=hid1 value=piece of eight>943
</form>944
<script>945
document.write("表单hid1的类型:"+document.form1.hid1.type+"<br>")946
document.write("表单hid1的名称:"+document.form1.hid1.name+"<br>")947
document.write("表单hid1的值:"+document.form1.hid1.value+"<br>")948
</script>949

950
4.使用文本区域框951

952

953
<form name=form1>954
<textarea name=ta1>how many grains of sand are there in the sahara desert?</textarea>955
</form>956
<script>957
document.write("表单ta1的类型:"+document.form1.ta1.type+"<br>")958
document.write("表单ta1的名称:"+document.form1.ta1.name+"<br>")959
document.write("表单ta1的值:"+document.form1.ta1.value+"<br>")960
document.write("表单ta1的横向宽度:"+document.form1.ta1.cols+"<br>")961
document.write("表单ta1的纵向宽度:"+document.form1.rows.value+"<br>")962
</script>963

964
6.使用重置按钮965

966
<form name=form1>967
<input type=reset name=reset1 value="rest form">968
</form>969
<script>970
document.write("表单reset1的类型:"+document.form1.reset1.type+"<br>")971
document.write("表单reset1的名称:"+document.form1.reset1.name+"<br>")972
document.write("表单reset1的值:"+document.form1.reset1.value+"<br>")973
</script>974

975
7.使用提交按钮976

977
<form name=form1>978
<input type=submit name=submit1 value="submit form">979
</form>980
<script>981
document.write("表单submit1的类型:"+document.form1.submit1.type+"<br>")982
document.write("表单submit1的名称:"+document.form1.submit1.name+"<br>")983
document.write("表单submit1的值:"+document.form1.submit1.value+"<br>")984
</script>985

986
8.使用复选按钮987

988
<form name=form1>989
<input type=checkbox name=cb1 >computer savvy?990
</form>991
<script>992
document.write("表单cb1的类型:"+document.form1.cb1.type+"<br>")993
document.write("表单cb1是否被选择?:"+document.form1.cb1.checked+"<br>")994
document.write("表单cb1的名称:"+document.form1.cb1.name+"<br>")995
</script>996

997
9.使用单选按钮998

999
<form name=form1>1000
<input type=radio name=radio1>male1001
<input type=radio name=radio1>female1002
</form>1003
<script>1004
document.write("第一个按钮被选择"+document.form1.radio1[0].checked+"<br>")1005
document.write("第二个按钮被选择"+document.form1.radio1[1].checked+"<br>")1006
document.write("按钮的名称"+ document.form1.radio1[0].name+"<br>")1007
document.write("按钮的个数"+document.form1.radio1.length)1008
</script>1009

1010
10.使用选择列表1011

1012
<form name=form1>1013
<select name=select1 size=4>1014
<option name=option1 value=lon>london,England</option>1015
<option name=option2 value=dub>Dublin,Ireland</option>1016
</select>1017
</form>1018
<script>1019
document.write("这个选择列表的名称"+document.form1.select1.name+"<br>")1020
document.write("这个选择列表的长度"+document.form1.select1.length+"<br>")1021
document.write("这个选择列表当前被选择的索引号"+document.form1.select1.selectedIndex+"<br>")1022
document.write("这个选择列表的尺寸"+document.form1.select1.size+"<br>")1023
</script>1024

1025
11.验证表单的有效性1026

1027
<script>1028
function validate(){1029
if(document.form1.text1.value!='1'||'2'||'3'||'4'){1030
alert("请输入1~4的整数")1031
}1032
}1033
</script>1034
<form name=form1>1035
请输入1~4的整数:1036
<input type=text name=text1 size=4 onchange=validate()>1037
</form>1038

1039
12.控制表单焦点1040

1041
<form name=form1>1042
<input type=text name=text1 value=where is you focus?><br>1043
<input type=text name=text2 value=is there?><br>1044
<input type=text name=text3 value=or maybe here?><br>1045
<input type=button name=button1 value="text box #1" onclick=document.form1.text1.focus()><br>1046
<input type=button name=button2 value="text box #2" onclick=document.form1.text2.focus()><br>1047
<input type=button name=button3 value="text box #3" onclick=document.form1.text3.focus()><br>1048
</form>1049

1050
第十三章 使用分栏1051

1052
第十四章 使用navigator1053

1054
1.使用navigator对象1055

1056
<script>1057
document.write("navigator对象的属性"+"<br>")1058
document.write("appcodename:"+navigator.appCodeName+"<br>")1059
document.write("appname::"+navigator.appName+"<br>")1060
document.write("appversion:"+navigator.appVersion+"<br>")1061
document.write("platform:"+navigator.platform+"<br>")1062
document.write("userAgent:"+navigator.userAgent+"<br>")1063
</script>1064
<script>1065
document.write("navigator对象的方法"+"<br>")1066
document.write("javaEnabled():"+navigator.javaEnabled())1067
</script>1068

1069
2.检查用户的浏览器1070

1071
<script>1072
if(navigator.appName.indexOf("Microsoft")!=-1){1073
document.write("用户浏览器是微软的IE浏览器"+"<br>")}1074
else if(navigator.appName.indexOf("Netscape")!=-1){1075
document.write("用户浏览器是netscape的netscape浏览器"+"<br>")}1076
if(navigator.appVersion.indexOf("4.0")!=-1){1077
document.write("you are using a version 4.0compatible browser")1078
}1079
else{1080
document.write("this browser is not 4.0 compliant")}1081
</script>1082

1083
3.检测用户的操作系统1084

1085
<script>1086
if (navigator.platform.indexOf("win32")!=-1){1087
document.write("you are using a computer running windows 95 or highter")}1088
else{1089
document.write("this computer is not running windows 95 or higher")}1090
</script>1091

1092
4.使用location对象1093

1094

1095
<script>1096
document.write("location对象的属性"+"<br>")1097
document.write("hash"+location.hash+"<br>")1098
document.write("hostname"+location.hostname+"<br>")1099
document.write("host"+location.host+"<br>")1100
document.write("href"+location.href+"<br>")1101
document.write("port"+location.port+"<br>")1102
document.write("search"+location.search+"<br>")1103
</script>1104

1105
重新加载网页1106
<form name=form1>1107
<input type=button name=button1 value=重新加载本页 onclick=location.reload>1108
</form>1109

1110

1111
5.使用cookie1112

1113

1114
<script>1115
finction makecookie(){1116
if(!document.cookie){1117
name=prompt("请输入你的姓名");1118
document.cookie="name="+name+";";}1119
}1120
</script>1121

1122
<body onload=makecookie()>1123
<script>1124
function makecookie(){1125
if(!document.cookie){1126
name=prompt("请输入你的姓名")1127
document.cookie="name="+name+";";1128
namestart=document.cookie.indexOf("="); 1129
nameend=document.cookieindexOf(";");1130
document.writeln("your name is:"+document.cookie.substring(namestart+1,nameend)+",br>")1131
}1132
}1133
</script>1134




浙公网安备 33010602011771号