JavaScript使用手册
一、JavaScript 简介
JavaScript 是网景(Netscape)公司开发的一种基于客户端浏览器、面向(基于)对象、事件驱动式的网页脚本语言。JavaScript语言的前身叫作Livescript。
JavaScript的特点:简单、易学、易用;支持IE、Navigator,符合ECMA(欧洲计算机制造协会)标准;事件驱动式的脚本程序设计思想;动态、交互式的操作方式。
JavaScript的作用:交互式操作;表单验证;网页特效;Web游戏;服务器脚本开发等。
JavaScript的编写环境:文本编辑器。执行平台:Web浏览器。执行方式:解释执行(由上而下)。JavaScript的版本:JavaScript1.0——JavaScript1.4
浏览器对JavaScript的支持:JavaScript/IE3.0、JavaScript1.2/IE4.0;微软允许用户自行设置对JavaScript处理模式。
JavaScript与Java、VBScript、JScript的关系:
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的对象引用在运行时进行检查。
二、JavaScript的格式:
JavaScript区分大小写;
JavaScript脚本程序须嵌入在HTML文件中;
JavaScript脚本程序中不能包含HTML标记代码;(双引号)每行写一条脚本语句;
语句末尾可以加分号;
JavaScript脚本程序可以独立保存为一个外部文件,但其中不能包含<script></script>标签。
JavaScript脚本程序的几种基本格式:
1 <script>
document.write("Hello World!!!");
</script>
2 <script language="JavaScript">
document.write("Hello World!!!");
</script>
3 <script language="JavaScript" type="text/JavaScript">
document.write("Hello World!!!");
</script>
4 <script language="JavaScript1.2">
document.write("Hello World!!!");
</script>
5 <script src="hello.js"></script>
注意:document.write("Hello World!!!"); 必须保存为一个外部文件:hello.js
6 <script language="JavaScript">
<!--
document.write("Hello World!!!");
-->
</script>
使用JavaScript的协议:
<a href="JavaScript:alert('Hello World!!!')">请单击</a>
<a href="#" οnclick="alert('Hello World!!!')">请单击</a>
<a href="/JavaScript://" οnclick="alert('Hello World!!!')">请单击</a>
三、JavaScript的数据类型:
数值:整数(由正负号、数字构成,八进制、十进制、十六进制)、浮点数(由正负号、数字和小数点构成,常规记数法、科学记数法);
逻辑值:布尔值(true、false);
字符串值:单引号、双引号;
空值:null
未定义值:根本不存在的对象、已定义但没有赋值的量;
四、JavaScript常量:
布尔常量:true false
整数常量:3721 0007 0xaff(0Xaff)
浮点数常量:3.14 .001 3.721e+3 -3.721E-3
字符串常量:"你的E-mail地址有误!"
含转义字符的字符串常量:
/b 退格(Backspace)
/f 换页(Form feed)
/n 换行(New line)
/r 返回(Carriage return)
/t 制表符(Tab)
/' 单引号(')
/" 双引号(")
// 反斜线(/)
示例:
document.write("我爱/'JavaScript/'")
document.write("文件在c://windows//下")
document.write("<pre>未满十八岁/n不得进入!</pre>")
document.write("未满十八岁<br>不得进入!")
document.alert("密码不对/n请重新输入!")
数组常量:
hobby=["听音乐","看电影"]
hobby[0]、hobby[1]
hobby=["听音乐",,"看电影",]
hobby[0]、hobby[1]、hobby[2]、hobby[3]
五、JavaScript变量:
1、变量命名规则:
首字符必须是大写或小写的字母或下划线(_)或美元符($); 后续的字符可以是字母、数字、下划线或美元符; 变量名称不能是保留字;长度是任意;区分大小写;
约定:集中置顶;尽可能使用局部变量;易于理解:避免混乱。
2、声明变量:
var stdId;
var name,sex;
var total=3721;
var notNull=true;
var name="李小龙",sex="先生";
var i=j=0;
3、变量赋值:
stdId = 2004007;
3、变量作用域:(方式、位置)
全局变量:省略var,或在函数外声明
局部变量:在函数内声明
全局变量可在整个脚本中被使用,可在不同的窗口中相互引用(指定窗口名)
例:
<Script>
var langJS = "JavaScript"; //langJS是全局变量
test();
function test() {
var langVBS = "VBScript"; //langVBS是局部变量
document.write("<LI>" + langJS);
document.write("<LI>" + langVBS);
}
document.write("<LI>" + langJS);
document.write("<LI>" + langVBS);
</Script>
六、JavaScript表达式:
算术表达式;
字符串表达式;
关系(比较)表达式;
逻辑表达式。
七、JavaScript运算符:
1、根据处理对象的数目,有单元运算符;二元运算符;三元运算符。
2、赋值运算符:= += -= *= /= %=(取余)
3、算术运算符:+ - * / %(取余) ++(递增) --(递减) -
例1:
<Script>
var x = 11;
var y = 5;
with (document) {
write("x = 11, y = 5");
write("<LI>x + y 是 ", x + y);
write("<LI>x - y 是 ", x - y);
write("<LI>x * y 是 ", x * y);
write("<LI>x / y 是 ", x / y);
write("<LI>x % y 是 ", x % y);
write("<LI>++ x 是 ", ++ x);
write("<LI>-- y 是 ", -- y);
}
</Script>
例2:
<Script>
var x = y = 3;
with (document) {
write("x = 3, y = 3 <br>");
write("若x = y++ 运算之后:");
x = y++;//y→x,y+1→y
write("x 是 ", x, "; y 是 ", y, "<br>");
write("再作x = ++y 运算:");
x = ++y;//y+1→x,y+1→y
write("x 是 ", x, "; y 是 ", y);
}
</Script>
4、字符串运算符:+ +=
5、比较运算符:==、!=、===(值及类型)、!==(值及类型)、<、<=、>、>=。
例:
<Script>
var x = 5; //x 是数值5
var y = '5'; //y 是字符串5
var z = 6; //x 是数值6
with (document) {
write("x = 5, y = '5', z = 6");
write("<LI>x == y 吗?", x == y);
write("<LI>x === y 吗?", x === y);
write("<LI>x != y 吗?", x != y);
write("<LI>x !== y 吗?", x !== y);
write("<LI>x <= z 吗?", x <= z);
write("<LI>y <= z 吗?", y <= z);
//类型自动转换
}
</Script>
6、逻辑运算符:&&,||,!
例1:
<Script>
var t = true;
var f = false;
with(document) {
write("<OL><LI>true && true 的结果是 ", t && t);
write("<LI>true && false 的结果是 ", t && f);
write("<LI>false && true 的结果是 ", f && t);
write("<LI>false && false 的结果是 ", f && f);
write("<LI>true && (1==1) 的结果是 ", t && (1==1));
write("<LI>false && 'A' 的结果是 ", f && 'A');
write("<LI>'A' && false 的结果是 ", 'A' && f);
write("<LI>true && 'A' 的结果是 ", t && 'A');
write("<LI>'A' && true 的结果是 ", 'A' && t);
write("<LI>'A' && 'B' 的结果是 ", 'A' && 'B');
//&&:有一个不是逻辑值,只要第一个操作数的值为flase,则返回第一个操作数的值flase,否则,返回第二个操作数的值
}
</Script>
例2:
<Script>
var t = true;
var f = false;
with(document) {
write("<OL><LI>true || true 的结果是 ", t || t);
write("<LI>true || false 的结果是 ", t || f);
write("<LI>false || true 的结果是 ", f || t);
write("<LI>false || false 的结果是 ", f || f);
write("<LI>true || (1==1) 的结果是 ", t || (1==1));
write("<LI>false || 'A' 的结果是 ", f || 'A');
write("<LI>'A' || false 的结果是 ", 'A' || f);
write("<LI>true || 'A' 的结果是 ", t || 'A');
write("<LI>'A' || true 的结果是 ", 'A' || t);
write("<LI>'A' || 'B' 的结果是 ", 'A' || 'B');
//||:有一个不是逻辑值,只要第一个操作数为的值true、字符或非零的数字,则返回第一个操作数的值,否则,返回第二个操作数的值
}
</Script>
例3:
<Script>
with(document) {
write("<LI>!true 的结果是 ", !true);
write("<LI>!false 的结果是 ", !false);
write("<LI>!'A' 的结果是 ", !'A');
write("<LI>!0 的结果是 ", !0);}
</Script>
7、逐位运算符;
特殊运算符:
①、new运算符:创建对象(实例)
格式:对象名称=new 对象类型(参数)
②、this运算符:表示当前对象
格式:this[.属性]
例:
<Script>
function validate(obj) {
alert("你输入的值是:"+ obj.value);
} </Script>
请输入任意字符:<BR>
<INPUT TYPE="text" onKeyup="validate(this)">
③、条件运算符:三元运算符
格式:<条件表达式> ? 第一个值:第二个值
例:
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
window.screen.width>800 ? imgheight=100:imgheight=100
window.screen.width>800 ? imgleft=15:imgleft=122
<Script>
function showSex() {
onOroff = document.forms[0].sex[0].checked
status = (onOroff)? "帅哥" : "美女"
alert("Hello! " + status)
}
</Script>
请输入你的性别:
<FORM onClick=showSex()>
<INPUT TYPE=radio NAME=sex>男生
<INPUT TYPE=radio NAME=sex>女生
</FORM>
运算符执行的优先顺序:
括号 ()
一元 ! ~ - ++ -- typeof void delete
算术 * / + -
位位移 << >> >>>
比较 < <= > >= == !=
位逻辑 & ^(xor) |
逻辑 && ||
三元条件 ?
赋值 = += -= *= /= %= <<= >>= >>>= &= ^= |=
八、JavaScript语句:
1、注释语句:
单行注释://注释文字
多行注释:/*
注释文字
*/
例:
/***************************************
* 源 码 之 家 *
* http://www.mycodes.net *
* 下载:http://www.mycodes.net *
* 论坛http://www.mycodes.net/bbs *
*****************************************/
2、with语句: (对象操作语句)
功能:为一段程序建立默认对象。
格式:
with (<对象>){
<语句组>
}
例1:
with (document) {
write ("限时抢购物品:");
write ("<Li>ViewSonic 17/" 显示器。");
write ("<Li>EPSON 打印机。");
}
例2:
document.write ("限时抢购物品:");
document.write ("<Li>ViewSonic 17/" 显示器。");
document.write ("<Li>EPSON 打印机。");
例1与例2等效
2、if...else语句:
格式1:
if (<表达式>)
<语句1>;
else
<语句2>;
或
if (<表达式>) <语句1>;
else <语句2>;
例:
<Script>
var now = new Date();
var hour = now.getHours();
if (6 < hour && hour < 18)
document.write ("辛勤工作才能快乐收割!");
else
document.write ("休息一下,充电后再出发。");
</Script>
格式2:
if (<表达式>){
<语句组1>
}else{
<语句组2>
}
格式3:
if (<表达式1>){
<语句组1>
}else if (<表达式2>){
<语句组2>
}else{
<语句组3>
}
例1:
<Script>
var now = new Date();
var day = now.getDay();
var dayName;
if (day == 0) dayName = "星期日";
else if (day == 1) dayName = "星期一";
else if (day == 2) dayName = "星期二";
else if (day == 3) dayName = "星期三";
else if (day == 4) dayName = "星期四";
else if (day == 5) dayName = "星期五";
else dayName = "星期六";
document.write ("今天是快乐的", dayName);
</Script>
例2:
<Script>
var now = new Date();
var day = now.getDay();
var dayName;
if (day = 0) dayName = "星期日";
else if (day = 1) dayName = "星期一";
else if (day = 2) dayName = "星期二";
else if (day = 3) dayName = "星期三";
else if (day = 4) dayName = "星期四";
else if (day = 5) dayName = "星期五";
else dayName = "星期六";
document.write ("今天是快乐的", dayName);
</Script>
while语句:
格式1:
while (<表达式>)
语句;
格式2:
while (<表达式>){
<语句组>
}
例:
<Script>
var i = 5;
while ( i > 0 ) {
document.write("i = " ,i ,"<BR>");
i--;
}
</Script>
do...while语句:
格式:
do {
<语句组>
} while (<表达式>)
例:
<Script>
var i = 5;
do {
document.write("i = " ,i ,"<BR>");
i--;
} while ( i > 0 )
</Script>
for语句:
格式:
for (<初始表达式>;<条件表达式>;<变动量表达式>){
<语句组>
}
例:
<Script>
for ( var i = 5; i > 0; i-- ) {
document.write("i = " ,i ,"<BR>");
}
</Script>
for...in语句:重复执行指定对象的所有属性
格式:
for ( 变量 in 对象 ){
<语句组>
}
例:
<Script>
function member(name, sex) {//构造函数member
this.name = name;
this.sex = sex;
}
function showProperty(obj, objString) {
var str = "";
for (var i in obj)
str += objString + "." + i + " = " + obj[i] + "<BR>";
return str;
}
papa = new member("杨宏文", "男生");//建立对象实例papa
document.write(showProperty(papa, "papa"))
</Script>
break语句:
格式:break
例:
<Script>
var i = 5;
while ( i > 0 ) {
if ( i == 3 ) break;
document.write("i = " ,i ,"<BR>");
i--;
}
</Script>
continue语句:
格式:continue
例:
<Script>
var i = 5;
while ( i > 0 ) {
i--;
if ( i == 3 ) continue;
document.write("i = " ,i ,"<BR>");
}
</Script>
switch语句:
格式:
switch (<表达式>) {
case <数值1>:<语句组1>
break;
case <数值2>:<语句组2>
break;
...
default <语句组>
}
例:
<Script>
function greet(givenSex) {
switch(givenSex) {
case "帅哥" : alert("你好啊!");
break;
case "美女" : alert("你好啊!");
break;
}
}
</Script>
请输入性别:
<FORM>
<INPUT TYPE="radio" NAME="sex" onClick="greet('帅哥')">
帅哥
<INPUT TYPE="radio" NAME="sex" onClick="greet('美女')">
美女
</FORM>