网络程序设计基础教案Word下载.docx
《网络程序设计基础教案Word下载.docx》由会员分享,可在线阅读,更多相关《网络程序设计基础教案Word下载.docx(87页珍藏版)》请在冰点文库上搜索。
javascript.js"
>
”的标记把它嵌入到文档中。
注意,一定要用“<
”标记。
标记还有一个属性:
language(缩写lang),说明脚本使用的语言。
对于JavaScript,请用“language="
JavaScript"
”。
参考相对于<
标记,还有一个<
server>
标记。
标记所包含的,是服务器端(ServerSide)的脚本。
本教程只讨论客户器端(ClientSide)的JavaScript,也就是用<
标记包含的脚本。
如果想在浏览器的“地址”栏中执行JavaScript语句,用这样的格式:
javascript:
JavaScript语句>
这样的格式也可以用在连接中:
ahref="
"
...<
/a>
※ JavaScript基本语法
每一句JavaScript都有类似于以下的格式:
<
语句>
;
其中分号“;
”是JavaScript语言作为一个语句结束的标识符。
虽然现在很多浏览器都允许用回车充当结束符号,培养用分号作结束的习惯仍然是很好的。
语句块语句块是用大括号“{}”括起来的一个或n个语句。
在大括号里边是几个语句,但是在大括号外边,语句块是被当作一个语句的。
语句块是可以嵌套的,也就是说,一个语句块里边可以再包含一个或多个语句块。
※JavaScript中的变量
什么是变量从字面上看,变量是可变的量;
从编程角度讲,变量是用于存储某种/某些数值的存储器。
所储存的值,可以是数字、字符或其他的一些东西。
变量的命名有以下要求:
只包含字母、数字和/或下划线;
要以字母开头;
不能太长(其实有什么人喜欢使用又长又臭的名字呢?
);
不能与JavaScript保留字(KeyWords,ReservedWords,数量繁多,不能一一列出;
凡是可以用来做JavaScript命令的字都是保留字)重复。
而且,变量是区分大小写的,例如,variable和Variable是两个不同的变量。
不仅如此,大部分命令和“对象”(请参阅“对象化编程”章)都是区分大小写的。
提示给变量命名,最好避免用单个字母“a”“b”“c”等,而改用能清楚表达该变量在程序中的作用的词语。
这样,不仅别人能更容易的了解你的程序,而且你在以后要修改程序的时候,也很快会记得该变量的作用。
变量名一般用小写,如果是由多个单词组成的,那么第一个单词用小写,其他单词的第一个字母用大写。
例如:
myVariable和myAnotherVariable。
这样做仅仅是为了美观和易读,因为JavaScript一些命令(以后将用更具体的方法阐述“命令”一词)都是用这种方法命名的:
indexOf;
charAt等等。
变量需要声明没有声明的变量不能使用,否则会出错:
“未定义”。
声明变量可以用:
var<
变量>
[=<
值>
];
var我们接触的第一个关键字(即保留字)。
这个关键字用作声明变量。
最简单的声明方法就是“var<
”,这将为<
准备内存,给它赋初始值“null”。
如果加上“=<
”,则给<
赋予自定的初始值<
。
数据类型变量可以用的数据类型有:
整型只能储存整数。
可以是正整数、0、负整数,可以是十进制、八进制、十六进制。
八进制数的表示方法是在数字前加“0”,如“0123”表示八进制数“123”。
十六进制则是加“0x”:
“0xEF”表示十六进制数“EF”。
浮点型即“实型”,能储存小数。
有资料显示,某些平台对浮点型变量的支持不稳定。
没有需要就不要用浮点型。
字符串型是用引号“"
"
”、“'
'
”包起来的零个至多个字符。
用单引号还是双引号由你决定。
跟语文一样,用哪个引号开始就用哪个结束,而且单双引号可嵌套使用:
'
这里是"
JavaScript教程"
不过跟语文不同的是,JavaScript中引号的嵌套只能有一层。
如果想再多嵌一些,你需要转义字符:
转义字符由于一些字符在屏幕上不能显示,或者JavaScript语法上已经有了特殊用途,在要用这些字符时,就要使用“转义字符”。
转义字符用斜杠“\”开头:
\'
单引号、\"
双引号、\n换行符、\r回车(以上只列出常用的转义字符)。
于是,使用转义字符,就可以做到引号多重嵌套:
Micro说:
这里是\"
JavaScript教程\"
布尔型常用于判断,只有两个值可选:
true(表“真”)和false(表“假”)。
true和false是JavaScript的保留字。
它们属于“常数”。
对象关于对象,在“对象化编程”一章将详细讲到。
由于JavaScript对数据类型的要求不严格,一般来说,声明变量的时候不需要声明类型。
而且就算声明了类型,在过程中还可以给变量赋予其他类型的值。
声明类型可以用赋予初始值的方法做到:
varaString='
这将把aString定义为具有空值的字符串型变量。
varanInteger=0;
这将把anInteger定义为值为0的整型。
变量的赋值一个变量声明后,可以在任何时候对其赋值。
赋值的语法是:
=<
表达式>
其中“=”叫“赋值符”,它的作用是把右边的值赋给左边的变量。
下一节将讨论到表达式。
JavaScript常数有下列几个:
null一个特殊的空值。
当变量未定义,或者定义之后没有对其进行任何赋值操作,它的值就是“null”。
企图返回一个不存在的对象时也会出现null值。
NaN“NotaNumber”。
出现这个数值比较少见,以至于我们可以不理它。
当运算无法返回正确的数值时,就会返回“NaN”值。
NaN值非常特殊,因为它“不是数字”,所以任何数跟它都不相等,甚至NaN本身也不等于NaN。
true布尔值“真”。
用通俗的说法,“对”。
false布尔值“假”。
用通俗的说法,“错”。
在Math对象中还有一系列数学常数。
这将在讨论“对象化编程”时谈到。
表达式与运算符
表达式
与数学中的定义相似,表达式是指具有一定的值的、用运算符把常数和变量连接起来的代数式。
一个表达式可以只包含一个常数或一个变量。
运算符可以是四则运算符、关系运算符、位运算符、逻辑运算符、复合运算符。
下表将这些运算符从高优先级到低优先级排列:
括号
(x)[x]
中括号只用于指明数组的下标
求反、自加、自减
-x
返回x的相反数
x
返回与x(布尔值)相反的布尔值
x++
x值加1,但仍返回原来的x值
x--
x值减1,但仍返回原来的x值
++x
x值加1,返回后来的x值
--x
x值减1,返回后来的x值
乘、除
x*y
返回x乘以y的值
x/y
返回x除以y的值
x%y
返回x与y的模(x除以y的余数)
加、减
x+y
返回x加y的值
x-y
返回x减y的值
关系运算
x<
yx<
=y
x>
=yx>
y
当符合条件时返回true值,否则返回false值
等于、
不等于
x==y
当x等于y时返回true值,否则返回false值
x!
当x不等于y时返回true值,否则返回false值
位与
x&
当两个数位同时为1时,返回的数据的当前数位为1,其他情况都为0
位异或
x^y
两个数位中有且只有一个为0时,返回0,否则返回1
位或
x|y
两个数位中只要有一个为1,则返回1;
当两个数位都为零时才返回零
位运算符通常会被当作逻辑运算符来使用。
它的实际运算情况是:
把两个操作数(即x和y)化成二进制数,对每个数位执行以上所列工作,然后返回得到的新二进制数。
由于“真”值在电脑内部(通常)是全部数位都是1的二进制数,而“假”值则是全部是0的二进制数,所以位运算符也可以充当逻辑运算符。
逻辑与
&
当x和y同时为true时返回true,否则返回false
逻辑或
x||y
当x和y任意一个为true时返回true,当两者同时为false时返回false
逻辑与/或有时候被称为“快速与/或”。
这是因为当第一操作数(x)已经可以决定结果,它们将不去理会y的值。
例如,false&
y,因为x==false,不管y的值是什么,结果始终是false,于是本表达式立即返回false,而不论y是多少,甚至y可以导致出错,程序也可以照样运行下去。
条件
c?
x:
当条件c为true时返回x的值(执行x语句),否则返回y的值(执行y语句)
赋值、
复合运算
x=y
把y的值赋给x,返回所赋的值
x+=yx-=yx*=y
x/=yx%=y
x与y相加/减/乘/除/求余,所得结果赋给x,并返回x赋值后
注意所有与四则运算有关的运算符都不能作用在字符串型变量上。
字符串可以使用+、+=作为连接两个字符串之用。
提示请密切注意运算的优先级。
编程时如果不记得运算符的优先级,可以使用括号()。
(a==0)||(b==0)。
一些用来赋值的表达式,由于有返回的值,可以加以利用。
例如,用以下语句:
a=b=c=10,可以一次对三个变量赋值。
语句
下面将开始讨论JavaScript基本编程命令,或者叫“语句”。
注释
像其他所有语言一样,JavaScript的注释在运行时也是被忽略的。
注释只给程序员提供消息。
JavaScript注释有两种:
单行注释和多行注释。
单行注释用双反斜杠“//”表示。
当一行代码有“//”,那么,“//”后面的部分将被忽略。
而多行注释是用“/*”和“*/”括起来的一行到多行文字。
程序执行到“/*”处,将忽略以后的所有文字,直到出现“*/”为止。
提示如果你的程序需要草稿,或者需要让别人阅读,注释能帮上大忙。
养成写注释的习惯,能节省你和其他程序员的宝贵时间,使他们不用花费多余的时间琢磨你的程序。
在程序调试的时候,有时需要把一段代码换成另一段,或者暂时不要一段代码。
这时最忌用Delete键,如果想要回那段代码怎么办?
最好还是用注释,把暂时不要的代码“隐”去,到确定方法以后再删除也不迟。
if语句
if(<
条件>
)<
语句1>
[else<
语句2>
];
本语句有点象条件表达式“?
:
”:
当<
为真时执行<
,否则,如果else部分存在的话,就执行<
与“?
”不同的是,if只是一条语句,不会返回数值。
是布尔值,必须用小括号括起来;
和<
都只能是一个语句,欲使用多条语句,请用语句块。
注意请看下例:
if(a==1)
if(b==0)alert(a+b);
else
alert(a-b);
本代码企图用缩进的方法说明else是对应if(a==1)的,但是实际上,由于else与if(b==0)最相近,本代码不能按作者的想法运行。
正确的代码是
if(a==1){
}else{
}
提示一行代码太长,或者涉及到比较复杂的嵌套,可以考虑用多行文本,如上例,if(a==1)后面没有立即写上语句,而是换一行再继续写。
浏览器不会混淆的,当它们读完一行,发现是一句未完成语句,它们会继续往下读。
使用缩进也是很好的习惯,当一些语句与上面的一两句语句有从属关系时,使用缩进能使程序更易读,方便程序员进行编写或修改工作。
循环体
for(<
=<
初始值>
<
循环条件>
变量累加方法>
)<
本语句的作用是重复执行<
,直到<
为false为止。
它是这样运作的:
首先给<
赋<
,然后*判断<
(应该是一个关于<
的条件表达式)是否成立,如果成立就执行<
,然后按<
对<
作累加,回到“*”处重复,如果不成立就退出循环。
这叫做“for循环”。
下面看看例子。
for(i=1;
i<
10;
i++)document.write(i);
本语句先给i赋初始值1,然后执行document.write(i)语句(作用是在文档中写i的值,请参越“对象化编程”一章);
重复时i++,也就是把i加1;
循环直到i<
10不满足,也就是i>
=10时结束。
结果是在文档中输出了“123456789”。
和if语句一样,<
只能是一行语句,如果想用多条语句,你需要用语句块。
与其他语言不同,JavaScript的for循环没有规定循环变量每次循环一定要加一或减一,<
可以是任意的赋值表达式,如i+=3、i*=2、i-=j等都成立。
提示适当的使用for循环,能使HTML文档中大量的有规律重复的部分简化,也就是用for循环重复写一些HTML代码,达到提高网页下载速度的目的。
不过请在Netscape中重复进行严格测试,保证通过了才好把网页传上去。
作者曾试过多次因为用for循环向文档重复写HTML代码而导致Netscape“猝死”。
IE中绝对没有这种事情发生,如果你的网也是只给IE看的,用多多的for也没问题。
除了for循环,JavaScript还提供while循环。
while(<
比for循环简单,while循环的作用是当满足<
时执行<
while循环的累加性质没有for循环强。
也只能是一条语句,但是一般情况下都使用语句块,因为除了要重复执行某些语句之外,还需要一些能变动<
所涉及的变量的值的语句,否则一但踏入此循环,就会因为条件总是满足而一直困在循环里面,不能出来。
这种情况,我们习惯称之为“死循环”。
死循环会弄停当时正在运行的代码、正在下载的文档,和占用很大的内存,很可能造成死机,应该尽最大的努力避免。
break和continue
有时候在循环体内,需要立即跳出循环或跳过循环体内其余代码而进行下一次循环。
break和continue帮了我们大忙。
break;
本语句放在循环体内,作用是立即跳出循环。
continue;
本语句放在循环体内,作用是中止本次循环,并执行下一次循环。
如果循环的条件已经不符合,就跳出循环。
例
i++){
if(i==3||i==5||i==8)continue;
document.write(i);
输出:
124679。
switch语句
如果要把某些数据分类,例如,要把学生的成绩按优、良、中、差分类,我们可能会用if语句:
if(score>
=0&
score<
60){
result='
fail'
}elseif(score<
80){
pass'
90){
good'
=100){
excellent'
error'
看起来没有问题,但使用太多的if语句的话,程序看起来有点乱。
switch语句就是解决这种问题的最好方法。
switch(e){
caser1:
(注意:
冒号)
...
[break;
]
caser2:
[default:
...]
}
这一大段的作用是:
计算e的值(e为表达式),然后跟下边“case”后的r1、r2……比较,当找到一个相等于e的值时,就执行该“case”后的语句,直到遇到break语句或switch段落结束(“}”)。
如果没有一个值与e匹配,那么就执行“default:
”后边的语句,如果没有default块,switch语句结束。
上边的if段用switch改写就是:
switch(parseInt(score/10)){
case0:
case1:
case2:
case3:
case4:
case5:
result='
break;
case6:
case7:
case8:
case9:
default:
if(score==100)
else
其中parseInt()方法是以后会介绍的,作用是取整。
最后default段用的if语句,是为了不把100分当错误论(parseInt(100/10)==10)。
事件处理概述
事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性。
事件处理的过程可以这样表示:
发生事件-启动事件处理程序-事件处理程序作出反应。
其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行下去。
事件的处理程序可以是任意JavaScript语句,但是我们一般用特定的自定义函数(function)来处理事情。
指定事件处理程序有三种方法:
方法一直接在HTML标记中指定。
这种方法是用得最普遍的。
方法是:
标记......事件="
事件处理程序"
[事件="
...]>
让我们来看看例子:
body...onload="
alert('
网页读取完成,请慢慢欣赏!
)"
onunload="
再见!
这样的定义<
body>
标记,能使文档读取完毕的时候弹出一个对话框,写着“网页读取完成,请慢慢欣赏”;
在用户退出文档(或者关闭窗口,或者到另一个页面去)的时候弹出“再见”。
方法二编写特定对象特定事件的JavaScript。
这种方法用得比较少,但是在某些场合还是很好用的。
scriptlanguage="
for="
对象"
event="
事件"
(事件处理程序代码)
window"
onload"
);
方法三在JavaScript中说明。
方法:
事件主角-对象>
.<
事件>
事件处理程序>
用这种方法要注意的是,“事件处理程序”是真正的代码,而不是字符串形式的代码。
如果事件处理程序是一个自定义函数,如无使用参数的需要,就不要加“()”。
functionignoreError(){
returntrue;
window.onerror=ignoreError;
//没有使用“()”
这个例子将ignoreError()函数定义为window对象的onerror事件的处理程序。
它的效果是忽略该window对象下任何错误(由引用不允许访问的lo