简介
JavaScript是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言。JavaScript语言的前身叫作Livescript。
- JavaScript的特点：
- 简单、易学、易用；
- 跨平台；IE、Navigator
- 符合ECMA（欧洲计算机制造协会）标准，可移植；
- 事件驱动式的脚本程序设计思想；
- 动态、交互式的操作方式。
- JavaScript的作用：
- 交互式操作；
- 表单验证；
- 网页特效；
- Web游戏
- 服务器脚本开发等。
- JavaScript的编写环境：文本编辑器
- JavaScript的执行平台：Web浏览器
- JavaScript的执行方式：解释执行（由上而下）
- 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的对象引用在运行时进行检查。
JS格式
- JavaScript的格式：
- JavaScript区分大小写；
- JavaScript脚本程序须嵌入在HTML文件中；
- JavaScript脚本程序中不能包含HTML标记代码；（双引号）
- 每行写一条脚本语句；
- 语句末尾可以加分号；
- JavaScript脚本程序可以独立保存为一个外部文件，但其中不能包含<script></script>标签。
- JavaScript脚本程序的几种基本格式：
- <script>
document.write("Hello World!!!");
</script>
- <script language="JavaScript">
document.write("Hello World!!!");
</script>
- <script language="JavaScript" type="text/JavaScript">
document.write("Hello World!!!");
</script>
- <script language="JavaScript1.2">
document.write("Hello World!!!");
</script>
- <script src="hello.js"></script>
注意：document.write("Hello World!!!"); 必须保存为一个外部文件：hello.js
- <script language="JavaScript">
<!--
document.write("Hello World!!!");
-->
</script>
- 使用JavaScript协议：
<a href="JavaScript:alert('Hello World!!!')">请单击</a>
<a href="#" onclick="alert('Hello World!!!')">请单击</a>
<a href="JavaScript://" onclick="alert('Hello
World!!!')">请单击</a>
JS数据、量
- JavaScript的数据类型：
- 数值：整数、浮点数；
- 逻辑值：布尔值；
- 字符串值：
- 空值：
- 未定义值：
- 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变量：
- 变量命名规则：
- 首字符必须是大写或小写的字母或下划线（_）或美元符（$）;
- 后续的字符可以是字母、数字、下划线或美元符;
- 变量名称不能是保留字；
- 长度是任意；
- 区分大小写；
- 约定：集中置顶；
使用局部变量；
易于理解； stdId
避免混乱。 usrname usrName
- 声明变量：
- var stdId;
- var name,sex;
- var total=3721;
- var notNull=true;
- var name="李小龙"，sex="先生";
- var i=j=0;
- 变量赋值：
stdId = 2004007;
- 变量作用域：（方式、位置）
- 全局变量：省略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>
JS表达式
- JavaScript表达式：
- 算术表达式；
- 字符串表达式；
- 关系（比较）表达式；
- 逻辑表达式。
- JavaScript运算符：
- 根据处理对象的数目：
- 根据功能：
运算符执行的优先顺序：
| 类型 |
运算符 |
| 括号 |
() |
| 一元 |
! ~ - ++ -- typeof void delete |
| 算术 |
* / + - |
| 位位移 |
<< >> >>> |
| 比较 |
< <= > >= == != |
| 位逻辑 |
& ^（xor） | |
| 逻辑 |
&& || |
| 三元条件 |
? |
| 赋值 |
= += -= *= /= %= <<= >>= >>>=
&= ^= |= |
JS语句
- 注释语句：
- 单行注释：//注释文字
- 多行注释：/*
注释文字
*/
- 例：
/***************************************
* 源
码 之 家
*
* http://www.mycodes.net
*
* 下载:http://www.mycodes.net
*
* 论坛http://www.mycodes.net/bbs *
*****************************************/
- with语句： （对象操作语句）
- 功能：为一段程序建立默认对象。
- 格式：
with (<对象>){
<语句组>
｝
- 例１：
with (document) {
write ("限时抢购物品：");
write ("<Li>ViewSonic
17\" 显示器。");
write ("<Li>EPSON 打印机。");
}
- 例２：
document.write ("限时抢购物品：");
document.write ("<Li>ViewSonic 17\" 显示器。");
document.write ("<Li>EPSON 打印机。");
- 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语句：
默认对象
- 对象：
对象是一组具有属性和方法的经过组织的数据。
- 默认对象：
- 日期对象；（日期基线：1970年1月1日00：00：00）
建立日期对象(实例)：
格式：日期对象名称=new Date([日期参数])
日期参数：1.省略；
2.英文-数值格式：月 日，公元年 [时：分：秒]
如：today=new Date("October
1,2008 12:00:00")
3.数值格式：公元年，月，日，[时，分，秒]
如：today=new Date(2008,10,1)
日期对象的方法：
格式：日期对象名称.方法（[参数]）
获取当地时间：
| getYear() |
返回年份数 |
| getFullYear() |
返回年份数 |
| getMonth() |
返回月份数（0--11） |
| getDate() |
返回日期数（1--31） |
| getDay() |
返回星期数（0--6） |
| getHours() |
返回时数（0--23） |
| getMinutes() |
返回分数（0--59） |
| getSeconds() |
返回秒数（0--59） |
| getMilliseconds() |
返回毫秒数（0--999） |
| getTime() |
返回对应日期基线的毫秒 |
| Date.parse(日期字串) |
返回对应日期基线的毫秒 |
| setTime(时间值) |
指定一日期对象的值 |
| toGMTString() |
以GMT格式表示日期对象 |
| toUTCString() |
以GMT格式表示日期对象 |
- 数组对象；
建立数组对象：
格式1：数组对象名称=new Array([元素个数])
格式2：数组对象名称=new Array([[元素1][，元素2，...]])
格式3：数组对象名称=[元素1[，元素2，...]]
例：
fruit=new Array(3);// fruit=new Array();
fruit[0]="苹果";
fruit[1]="梨子";
fruit[2]="橘子";
fruit=new Array("苹果"，"梨子"，"橘子");
fruit=["苹果"，"梨子"，"橘子"];
数组对象的属性：
格式：数组对象名称.属性
属性：length 数组长度
例：
<Script>
var fruit = new Array("苹果", "梨子",
"橘子");
var i;
for (i=0; i < fruit.length; i++) {
document.write("fruit [",
i, "] = ", fruit[i], "<br>")
}
</Script>
数组对象的方法：
格式：数组对象名称.方法([参数])
方法：
| join([分隔符]) |
数组元素组合为字符串 |
| toString() |
以字符串表示数组 |
| reverse() |
数组反转 |
| valueOf() |
返回数组值 |
例：
<Script>
var fruit = new Array("苹果", "梨子",
"橘子");
document.write("<LI>", fruit.join());
document.write("<LI>", fruit.join("、"));
document.write("<LI>", fruit.toString());
document.write("<LI>", fruit.reverse().join());
document.write("<LI>", fruit.valueOf());
</Script>
二维数组：
例：
<Script>
var fruit = new Array(3);
fruit[0] = new Array("苹果", 2);
fruit[1] = new Array("梨子", 4);
fruit[2] = new Array("橘子", 2);
for (i=0; i < fruit.length; i++) {
for (j=0; j < fruit[0].length; j++) {
document.write("fruit [",
i, "][", j, "] = ", fruit[i][j],"<br>");
}
document.write("<br>");
}
</Script>
- 字符串对象；
建立字符串对象：
格式：字符串对象名称=new String(字符串常量)
格式：字符串变量名称="字符串常量"
字符串对象的属性：
格式：字符串对象名称.属性
属性：length 字符串长度
字符串对象的方法：
格式：字符串对象名称.方法
方法：
| bold() |
粗体 |
| italtics() |
斜体 |
| strike() |
删除线 |
| fontsize(字级大小) |
文字大小 |
| fontcolor(#rrggbb) |
文字颜色 |
| sup() |
上标 |
| sub() |
下标 |
| toUpperCase() |
大写 |
| toLowerCase() |
小写 |
| charAt(索引) |
返回索引位置的字符 |
| charCodeAt(索引) |
返回索引位置的ASCII字符码，十进制表示 |
| indexOf("字串"[,索引]) |
返回字串在对象中的索引位置 |
| lastIndexOf("字串"[,索引]) |
返回字串在对象中的索引位置（反向搜索） |
| search("字串") |
返回字串在对象中的索引位置 |
| replace("字串1","字串2") |
字串2替换字串1 |
| slice(索引i[,索引j]) |
返回索引i倒索引j-1的子串 |
| split(["字串"][,限制]) |
将字串从对象中删除 |
| substr(start[,length]) |
返回特定长度的字串 |
| substring(索引i[,索引j]) |
返回索引i倒索引j-1的子串 |
| link("url") |
设置链接 |
| match(/匹配字符/) |
| \d
|
匹配一个数字字符。
|
| \D
|
匹配一个非数字字符。 |
| \n
|
匹配一个换行符。
|
| \r
|
匹配一个回车符。
|
| \s
|
匹配一个空格符。
|
| \S
|
匹配任意非空格符。
|
| \t
|
匹配一个table符。 |
| \W
|
匹配任何非单词符。
|
| \num
|
匹配正整数num。
|
| /n/
|
匹配八进制，十六进制，十进制的escape值。 |
|
| toString() |
返回字符串 |
| valueOf() |
返回字符串值 |
例1：
<Script>
var str = "JavaScript";
document.write(str.bold(),"<BR>");
document.write(str.fixed(),"<BR>");
document.write(str.fontcolor("red"),"<BR>");
document.write(str.fontsize(5),"<BR>");
</Script>
例2：
<Script>
var str = "JavaScript";
var num = 1234;
document.write(str.toUpperCase(), "<BR>");
document.write(num.toString().charAt(2),"<BR>");
document.write(str.substring(0,4), "<BR>");
</Script>
例3：
<Script>
var str = "JavaScript";
document.write(str, " 有 ", str.length,
" 个字<BR>");
document.write(str.fontcolor("green"), "
不是 ");
document.write(str.substr(0,4).fontcolor("red"));
document.write(" 也不是 ", str.replace("Java",
"VB"));
</Script>
例4：
<Script>
var str = "hubert@abc.com.cn";
var idx = str.search("@");
var usr = str.substr(0,idx);
document.write(usr.toUpperCase().fontsize(7),
"<BR>");
document.write("你的电子信箱是", str);
</Script>
例5：
<Script>
function isEmail(){
var str = document.form1.add.value;
if (str.indexOf("@") == -1)
alert("请填写正确的EMail地址");
else
alert("OK!");
}
</Script>
<FORM name="form1">
请输入你的 EMail 地址：
<INPUT TYPE="text" name="add">
<INPUT TYPE="button" value="开始检查"
onClick="isEmail()">
</FORM>
- 布尔对象；
建立布尔对象：
格式：布尔对象名称=new Boolean(转换值)
转换值：null、未定义、0、或false均转换成false
布尔对象的方法：
格式：布尔对象名称.方法
方法：toString()
valueOf()
例：
<Script>
x = new Boolean();
y = new Boolean(true);
z = new Boolean(0);
document.write(x, "<br>");
document.write(y, "<br>");
document.write(z, "<br>");
</Script>
- 数学对象；（静态对象）
数学对象的属性：
格式：Math.属性
属性：
| E |
自然对数的底数 |
| LN2 |
2的自然对数 |
| LN10 |
10的自然对数 |
| LOG2E |
以2为底e的对数 |
| LOG10E |
以10为底e的对数 |
| PI |
圆周率 |
| SQRT1_2 |
1/2的平方根 |
| SQRT2 |
2的平方根 |
数学对象的方法：
格式：Math.方法（参数）
方法：
| ceil(数值) |
大于等于该数值的最小整数 |
| floor(数值) |
小于等于该数值的最大整数 |
| min(数值1,数值2) |
最小值 |
| max(数值1,数值2) |
最大值 |
| pow(数值1,数值2) |
数值1的数值2次方 |
| random() |
0倒1的随机数 |
| round(数值) |
最接近该数值的整数 |
| sqrt(数值) |
开平方根 |
| abs、sin(弧度)、cos、tan、asin、acos、atan、exp、log |
例1：
<Script>
with (document) {
write("<LI>2 的平方根值是 ",
Math.sqrt(2));
write("<LI>2 <sup>3</sup>
= ", Math.pow(2,3));
write("<LI>最接近 3.14 的整数是
", Math.round(3.14));
}
</Script>
例2：
<Script>
var now = new Date();
var firstDay = new Date("Nov 10, 1999");
var duration = now - firstDay;
var msPerDay = 24 * 60 * 60 * 1000; //换算成毫秒
days = Math.round(duration/msPerDay);
document.write("本网站已经开幕" +
days + "天了");
</Script>
例3：
<Script>
var promote = new Array(3);
promote[0] = "拍卖区又有新货到了，赶快来捡便宜啊......"
promote[1] = "成为会员，马上享受八折优惠，还可以参加抽奖！";
promote[2] = "庆祝访问人数突破十万人次，填问卷就送大奖，快来啊！";
index = Math.floor(Math.random() * promote.length);
document.write(promote[index]);
</Script>
- 数值对象；
- 函数对象；
- 自定义对象。
- 自定义对象；
- 例：
<Script>
function member(name, sex) {
this.name = name;
this.sex = sex;
}
var papa = new member("杨宏文", "男生");
var mama = new member("黄雅玲", "女生");
var doggy = new member("奇 奇", "宠物狗");
document.write(papa.name);
document.write("是", papa.sex);
</Script>
- 动态的定义对象属性；
- 例：
为指定的对象实例定义属性：papa.hobby="看电视";
为对象定义属性：member.prototype.hobby=null;
papa.hobby="上网";
mama.hobby="逛街";
doggy.hobby="啃骨头";
- 定义对象的方法；
- 例：
<Script>
function member(name, sex) {
this.name = name;
this.sex = sex;
this.display = display;
}
function display() {
var str = this.name + "是" + this.sex;
document.write("<LI>" +
str);
}
var papa = new member("杨宏文", "男生");
var mama = new member("黄雅玲", "女生");
var doggy = new member("奇 奇", "宠物狗");
papa.display();
mama.display();
doggy.display();
</Script>
- 利用对象原型（prototype）为默认对象定义属性：
<Script>
String.prototype.replaceAll = strReplace;
function strReplace(findText, replaceText) {
var str = new String(this);
while (str.indexOf(findText)!=-1) {
str = str.replace(findText, replaceText);
}
return str;
}
myStr = "告诉你 － 如果你正在寻找一本能帮助你彻底研究" +
"JavaScript的书籍，请你一定要认明碁峰的" +
"JavaScript教学范本，让你事半功倍，功力大增。";
document.write("<LI>原稿是：<BLOCKQUOTE>"
+ myStr +"</BLOCKQUOTE>");
document.write("<LI>利用Replace()将「你」改成「您」："
+"<BLOCKQUOTE>" + myStr.replace('你','您')
+"</BLOCKQUOTE>");
document.write("<LI>利用自定义的字符串方法 - 全部取代"
+"<BLOCKQUOTE>" + myStr.replaceAll('你','您')
+"</BLOCKQUOTE>");
</Script>
默认函数
- 编码函数 escape()：将非字母、数字字符转换成ASCII码
例：sample/unescape
- 译码函数 unescape()：将ASCII码转换成字母、数字字符
例：sample/unescape
- 求值函数 eval()：
格式：eval(<表达式>)
例1：字符串运算
<Script>
x = 1 + 2;
y = "1 + 2";
z = eval("1 + 2");
document.write("<LI>1 + 2 = ", x);
document.write("<LI>\"1 + 2\" = ",
y);
document.write("<LI>eval(\"1 + 2\")
= ", z);
</Script>
例2：对象操作
<Script>
function show(obj){
var str=eval("document.form."+obj+".value");
alert(str);
}
</Script>
<form name="form" id="form">
姓名：
<input name="name" type="text"
id="name">
<input type="button" name="Button"
value="Button" onclick=show("name")>
</form>
- 数值判断函数 isNaN()：是否为数值
格式：isNaN(<量>)
例：
<Script>
var x = 15;
var y = "黄雅玲";
document.write("<LI>x 不是数值吗？",isNaN(x));
document.write("<LI>y 不是数值吗？",isNaN(y));
</Script>
- 整数转换函数 parseInt()：将不同进制（二、八、十六）的数值转换成十进制整数
格式：parseInt(数值字串[，底数])
底数省略，则按内容转换：
0x 0X 十六进制
0 八进制
其它 十进制
例：
<Script>
// 二进位转成十进位
document.write("1101<sub>2</sub> = "
,parseInt("1101", 2),"<sub>10</sub><br>");
// 十六进位转成十进位
document.write("BFFF<sub>16</sub>
= " ,parseInt("BFFF", 16),"<sub>10</sub><br>");
</Script>
- 浮点数转换函数 parseFloat()：将数值字串转换成浮点数
格式：parseFloat (数值字串)
例：
<Script>
document.write(parseInt("3.1234A56"), "<br>");
document.write(parseFloat("3.1234A56"), "<br>");
</Script>
函数、事件
独立于主程序的、具有特定功能的一段程序代码块。
格式：
function 函数名([参数[,参数...]]){
<语句组>
[return <表达式>；]
}
约定：
1、函数名：易于识别；（同变量命名规则）
2、程序代码：模块化设计；
3、函数位置：按逻辑顺序，集中置顶。（<head>...</head>）
格式：
return <表达式>；
功能：返回表达式的值。
格式：
函数名([参数[,参数...]])
例1：
<Script>
function showName(name){
document.write ( "我是" + name
);
}
showName("黄雅玲");
</Script>
例2：
<Script>
function showName(name){
str="我是" + name;
return str;
}
document.write(showName("黄雅玲"));
</Script>
| 事件名称 |
适用对象 |
意义 |
说明 |
| Abort |
image |
终止 |
当图形尚未完全加载前 |
| Blur |
|
失去焦点 |
|
| Change |
t/pw/ta/select |
改变 |
|
| DragDrop |
window |
拖曳 |
|
| Error |
|
img/win |
错误加载文件或图形时发生错误 |
| Focus |
|
取得焦点 |
|
| Move |
window |
移动 |
|
| Reset |
form |
重置 |
|
| Submit |
form |
|
|
| Click/DblClick、KeyDown/KeyPress/KeyUp、Load/Unload、MouseDown/MouseUp/MouseOver/MouseOut/MouseMove |
浏览器响应某个事件，实现用户的交互操作而进行的处理（过程）。
- 事件处理程序的调用：
浏览器等待用户的交互操作，并在事件发生时，自动调用事件处理程序（函数），完成事件处理过程。
HTML标签属性：
格式：
<tag on事件=“<语句组>|<函数名>”>
例1：
<body onload="alert('建议浏览器的分辨率：800x600');">
<body onload="var str='建议浏览器的分辨率：800x600';alert(str);">
例2：
<script>
function show(){
var str="建议浏览器的分辨率：800x600";
alert(str);
}
</script>
<body onload="show();">
对象属性：
格式：
对象名.on事件=<语句>|<函数名>
例1：
document.onload=alert("建议浏览器的分辨率：800x600");
var str="建议浏览器的分辨率：800x600";
document.onload=alert(str);
例2：
<script>
function show(){
var str="建议浏览器的分辨率：800x600";
alert(str);
}
document.onload=show();
</script>
例1：
<Body>
<FORM>
请输入基本资料：<BR>
姓名：
<INPUT TYPE="text" NAME="usr" SIZE="8">
<INPUT TYPE="button" VALUE=" 请单击" onClick="alert('谢谢你的填写...')">
</Body>
例2：
<Script>
function handelError(img){
msg = "有一图文件，名为： \'" + img.name
+ "\'\n无法顺利显示，请通知系统管理人员" + "，敬备薄礼相送。";
alert(msg);
}
</Script>
<IMG SRC="abc.gif" NAME="中国电信的广告"
onError="handelError(this)">
例3：
<Body>
<A HREF="http://www.hubert.idv.tw/" onMouseOver="status='最棒的学习网站';return
true;" onMouseOut="status='完毕'">文哥网络技术学习网</A>
</Body>
例4：
<Body>
<FONT STYLE="cursor:hand" onClick="location='http://www.hubert.idv.tw/'"
onMouseOver="status='最棒的在线学习网站'; this.color='red';return true;"
onMouseOut="status='完毕'; this.color='blue';">文哥网络技术学习网</FONT>
</Body>
例5：
<Script>
function mOver(object,msg){
status = msg;
object.color = "red";
object.face = "华文楷体";
}
function mOut(object){
status = '完毕';
object.color = "blue";
object.face = "幼圆";
}
</Script>
<Body>
<FONT STYLE="cursor:hand" onClick="location='http://www.hubert.idv.tw/'"
onMouseOver="mOver(this,'最棒的线上学习网站'); return true;" onMouseOut="mOut(this)">文哥网络技术学习网</FONT>
</Body>
例6：
<STYLE> A {text-decoration:none} </STYLE>
<BODY>
搜寻引擎：<BR>
<IMG SRC="images\snow1.gif"
NAME=gif_1>
<A HREF="http://www.yam.com/" onMouseOver="document.gif_1.src='images\\snow.gif'"
onMouseOut="document.gif_1.src='images\\snow1.gif'">蕃薯藤</A><BR>
<IMG SRC="images\snow1.gif"
NAME=gif_2>
<A HREF="http://www.kimo.com.tw/" onMouseOver="document.gif_2.src='images\\snow.gif'"
onMouseOut="document.gif_2.src='images\\snow1.gif'">奇摩站</A>
</BODY>
例7：
<Script>
var url = new Array(3);
url[0] = "http://www.yam.org.tw/";
url[1] = "http://www.kimo.com/";
url[2] = "http://chinese.yahoo.com/";
function goto(i) {
location = url[i];
}
</Script>
<table width=250><tr><td>
<form><fieldset>
<legend>搜寻引擎</legend>
<input name="go" type="radio" onClick="goto(0)">蕃薯藤
<input name="go" type="radio" onClick="goto(1)">奇摩
<input name="go" type="radio" onClick="goto(2)">中文雅虎
</fieldset></form>
</table>
定时器
用以指定在一段特定的时间后执行某段程序。
格式：
[定时器对象名=] setTimeout(“<表达式>”，毫秒)
功能：执行<表达式>一次。
例1：
<Script>
function count() {
setTimeout("alert('三秒到了')",3000)
}
</Script>
<INPUT TYPE="button" VALUE="
计时开始" onClick="count()">
例2：
<Script>
function show() {
document.all['news'].style.display = "";
setTimeout("hide()",500);
}
function hide() {
document.all['news'].style.display = "none";
setTimeout("show()",500);
}
</Script>
<Body onload="show()">
最新消息：<FONT ID="news" STYLE="display:none">十面埋伏...</FONT>
</Body>
格式：
clearTimeout(定时器对象名)
格式：
[定时器对象名=] setInterval(“<表达式>”，毫秒)
功能：重复执行<表达式>，直至窗口、框架被关闭或执行clearInterval。
格式：
clearInterval(定时器对象名)
例1：
<Script>
var sec = 0;
timerID = setInterval("count()",1000);
function count() {
num.innerHTML = sec++;
}
</Script>
停留时间：
<FONT ID="num" FACE="impact">0</FONT>秒钟
<INPUT TYPE="button" VALUE="停止" onClick="clearInterval(timerID)">
例2：
<Script>
var str = "这是一个在线拍卖的网站，请尽情血拼吧！";
var seq = 0;
function scroll() {
msg = str.substring(0, seq+1);
banner.innerHTML = msg;
seq++;
if (seq >= str.length) seq = 0;
}
</Script>
<Body onLoad="setInterval('scroll()',500)">
<FONT ID="banner"></FONT>
</Body>
图像对象
网页中的图像均会被自动看作图像对象，并依顺序，分别表示为document.images[0]，document.images[1]...
格式：
图像对象名称=new Image([宽度],[高度]) //px
border complete height hspace lowsrc name src vspace width
onAbort onError onKeyDown onKeyPress onKeyUop onLoad
例1：（预载）
<Script>
img0 = new Image();
img0.src = "images/snow0.gif";
img1 = new Image();
img1.src = "images/snow1.gif";
document.write ("已经读取两个图文件，但此时不显示。");
</Script>
例2：
<Script>
function img-preload(idx){
eval("img"+idx+" = new
Image()");
eval("img"+idx+".src =
'images/snow"+idx+".gif'");
}
img-preload(0);
img-preload(1);
document.write ("已经读取两个图文件，但此时不显示。");
</Script>
例3：
<Script>
function img-preload(imgname,idx){
eval("img"+idx+" = new
Image()");
eval("img"+idx+".src =
'images/"+imgname+".gif'");
}
img-preload("snow0",0);
img-preload("snow1",1);
document.write ("已经读取两个图文件，但此时不显示。");
</Script>
Navigator对象
检测浏览器的版本、所支持的MIME类型、已安装的外挂程序（plug-in）。该对象包含两个子对象：外挂对象、MIME类型对象。
- Navigator对象的属性：
格式： navigator.属性
| appCodeName |
代码 |
| appName |
名称 |
| appVersion |
版本 |
| language |
语言 |
| mimeType |
以数组表示所支持的MIME类型 |
| platform |
编译浏览器的机器类型 |
| plugins |
以数组表示已安装的外挂程序 |
| userAgent |
用户代理程序的表头 |
例1：
<Script>
with (document) {
write ("你的浏览器信息：<OL>");
write ("<LI>代码："+navigator.appCodeName);
write ("<LI>名称："+navigator.appName);
write ("<LI>版本："+navigator.appVersion);
write ("<LI>语言："+navigator.language);
write ("<LI>编译平台："+navigator.platform);
write ("<LI>用户表头："+navigator.userAgent);
}
</Script>
例2：
<Script>
if (document.all) {
document.write("你的浏览器是：MSIE");
} else {
document.write("你的浏览器是：Navigator");
}
</Script>
- plugin对象的属性：
格式： navigator.plugins.属性
| description |
外挂程序模块的描述 |
| filename |
外挂程序模块的文件名 |
| length |
外挂程序模块的个数 |
| name |
外挂程序模块的名称 |
例：
<Script>
var len = navigator.plugins.length;
with (document) {
write ("你的浏览器共支持" + len + "种plug-in：<BR>");
write ("<TABLE BORDER>")
write ("<CAPTION>PLUG-IN 清单</CAPTION>")
write ("<TR><TH> <TH>名称<TH>描述<TH>文件名")
for (var i=0; i<len; i++)
write("<TR><TD>"
+ i +
"<TD>"
+ navigator.plugins[i].name +
"<TD>"
+ navigator.plugins[i].description +
"<TD>"
+ navigator.plugins[i].filename);
}
</Script>
- mimeType对象的属性：
格式：navigator.mimeTypes.属性
| description |
MIME类型的描述 |
| enablePlugin |
对应到哪个外挂模块 |
| length |
MIME类型的数目 |
| suffixes |
MIME类型的扩展名 |
| type |
MIME类型的名称 |
例：
<Script>
var len = navigator.mimeTypes.length;
with (document) {
write ("你的浏览器共支持" + len + "种MIME类型：");
write ("<TABLE BORDER>")
write ("<CAPTION>MIME type
清单</CAPTION>")
write ("<TR><TH> <TH>名称<TH>描述<TH>扩展名<TH>附注")
for (var i=0; i<len; i++) {
write("<TR><TD>"
+ i +
"<TD>"
+ navigator.mimeTypes[i].type +
"<TD>"
+ navigator.mimeTypes[i].description +
"<TD>"
+ navigator.mimeTypes[i].suffixes +
"<TD>"
+
navigator.mimeTypes[i].enabledPlugin.name);
}
}
</Script>
窗口对象
格式：
[window.]属性
[window.]方法（参数）
opener.属性
opener.方法（参数）
self.属性
self.方法（参数）
parent.属性
parent.方法（参数）
top.属性
top.方法（参数）
窗口名称.属性
窗口名称.方法（参数）
| document |
当前文件的信息 |
| location |
当前URL的信息 |
| name |
窗口名称 |
| status |
状态栏的临时信息 |
| defaultStatus |
状态栏默认信息 |
| history |
该窗口最近查阅过的网页 |
| closed |
判断窗口是否关闭，返回布尔值 |
| opner |
open方法打开的窗口的源窗口 |
| outerHeight |
窗口边界的垂直尺寸，px |
| outerWidth |
窗口边界的水平尺寸，px |
| pageXOffset |
网页x-position的位置 |
| pageYOffset |
网页y-position的位置 |
| innerHeight |
窗口内容区的垂直尺寸，px |
| innerWidth |
窗口内容区的水平尺寸，px |
| screenX |
窗口左边界的X坐标 |
| screenY |
窗口上边界的Y坐标 |
| self |
当前窗口 |
| top |
最上方的窗口 |
| parent |
当前窗口或框架的框架组 |
| frames |
对应到窗口中的框架 |
| length |
框架的个数 |
| locationbar |
浏览器地址栏 |
| menubar |
浏览器菜单栏 |
| scrollbars |
浏览器滚动条 |
| statusbar |
浏览器状态栏 |
| toolbar |
浏览器工具栏 |
| offscreenBuffering |
是否更新窗口外的区域 |
| personalbars |
浏览器的个人工具栏，仅Navigator |
| alert(信息字串) |
弹出警告信息 |
| confirm(信息字串) |
显示确认信息对话框 |
| prompt(提示字串[，默认值]) |
显示提示信息，并提供可输入的字段 |
| atob(译码字串) |
对base-64编码字串进行译码 |
| btoa(字串) |
将进行base-64编码 |
| back() |
回到历史记录的上一网页 |
| forward() |
加载历史记录中的下一网页 |
| open(URL，窗口名称[，窗口规格]) |
|
| focus() |
焦点移到该窗口 |
| blur() |
窗口转成背景 |
| stop() |
停止加载网页 |
| close() |
|
| enableExternalCapture() |
允许有框架的窗口获取事件 |
| disableExternalCapture() |
关闭enableExternalCapture() |
| captureEvents(事件类型) |
捕捉窗口的特定事件 |
| routeEvent(事件) |
传送已捕捉的事件 |
| handleEvent(事件) |
使特定事件的处理生效 |
| releaseEvents(事件类型) |
释放已获取的事件 |
| moveBy(水平点数，垂直点数) |
相对定位 |
| moveTo(x坐标，y坐标) |
绝对定位 |
| setResizable(true|false) |
是否允许调整窗口大小 |
| resizeBy(水平点数，垂直点数) |
相对调整窗口大小 |
| resizeTo(宽度，高度) |
绝对调整窗口大小 |
| scroll(x坐标，y坐标) |
绝对滚动窗口 |
| scrollBy(水平点数，垂直点数) |
相对滚动窗口 |
| scrollTo(x坐标，y坐标) |
绝对滚动窗口 |
| setInterval(表达式，毫秒) |
|
| setTimeout(表达式，毫秒) |
|
| clearInterval(定时器对象) |
|
| clearTimeout(定时器对象) |
|
| home() |
进入浏览器设置的主页 |
| find([字串[,caseSensitivr,backward]]) |
查找窗口中特定的字串 |
| print() |
|
| setHotKeys(true|false) |
激活或关闭组合键 |
| setZOptions() |
设置窗口重叠时的堆栈顺序 |
onBlur onDragDrop onError onFocus onLoad onMove onResize onUnload
例1：
<Script>
function checkPassword(testObject) {
if (testObject.value.length < 4) {
alert("密码长度不得小于四");
testObject.focus();
testObject.select();
}
}
</Script>
请输入密码：
<INPUT TYPE="text" onBlur="checkPassword(this)">
例2：
<Script>
if (confirm("你满十八岁了吗?"))
location = "adult.htm";
else
alert("等你成年以後再来吧!");
</Script>
例3：
<Script>
var bgColor =
prompt("你喜欢哪一种底色：\n浅蓝色请按1，粉红色请按2",1)
if (bgColor == 1) document.bgColor = "#CCFFFF";
else if (bgColor == 2) document.bgColor = "#FFCCFF";
else document.bgColor = "#FFFFFF";
</Script>
例4：
<Script>
function grow() {
resizeBy(0, 50);
}
function shrink() {
resizeBy(0, -50);
}
</Script>
<Body onMouseOver="grow()" onMouseOut="shrink()">
将视窗放大与缩小
</Body>
例5：
<Script>
function scrollIt() {
for (y=1; y<=2000; y++) {
scrollTo(1,y);
}
}
</Script>
<Body onDblClick=scrollIt()>
双击鼠标，画面会自动卷动...
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br> |
