JavaScript语言基本知识
一、JavaScript脚本语言的特性
JavaScript脚本语言是一种面向浏览器的网页脚本编程语言。脚本语言有以下几个特性：
1、在客户端执行。完全在用户的计算机上运行，无须经过服务器。
2、面向对象。具有内置对象，也可以直接操作浏览器对象。
3、动态变化。可以对用户的输入作出反应，也可以直接对用户输出。
4、简单易用。JavaScript脚本语言虽然简单，但初学者也能快速掌握。
5、只能与HTML语言一起使用。要通过浏览器解释执行。
二、如何在HTML中加入JavaScript脚本
JavaScript采用的格式如下：
<Script Language="JavaScript">
JavaScript 语句
</Script>
把上述语句放在HTML的<head>与</head>之间，也可放在<body>与</body>之间。
例子：在网页上显示“你好！”。
<html>
<body>
<Script Language="JavaScript">
alert("你好！")
</script>
</body>
</html>
三、在浏览器地址栏直接执行JavaScript脚本
也可以在浏览器的地址栏中输入JavaScript语句，由浏览器直接执行。
如输入：javascript:alert(200*75)
四、调用JavaScript文件
可以将纯JavaScript的语句另外保存在一个"*.js"的文件中，需要时再调用。
例子：调用test.js文件，显示提示。
<html>
<body>
调用test.js文件
<script language="JavaScript" src="test.js">
</script>
</body>
</html>
test.js的文件内容如下：
alert("这是被调用的语句。")
五、注释语句
用<!- ... ->表示注解部分，用作说明解释，浏览器不显示出来。不要也可以。
另外，双斜线 "//" ，是JavaScript 的注释语句，它后面的语句不被执行。
六、变量的使用
变量的声明：Var usename
变量的赋值：usename="李国强"
例子：在网页上显示“李国强你好！”。
<html>
<body>
<Script Language="JavaScript">
Var usename
usename="李国强"
alert(usename + "你好！")
</script>
</body>
</html>
七、数组
数组的定义：var name=new Array(5) 用 new 来生成数组。
数组的赋值：name[1]="Marry"
数组的初始化：var name=new Array("Marry","Petty","Mike","Jphn")
数组的引用：name[1]
注：数组的第一个素由1开始。
八、运算符与表达式
1、代数运算符：加（+）、减（-）、乘（*）、除（/）、取余（%）。
2、比较运算符：等于（==）、不等于（!=）、大于（>）、小于（<）、大于等于（>=）、小于等于（<=）。
3、逻辑运算符：逻辑与（&&）、逻辑或（||）、逻辑非（!）。
表达式：由变量和运算符组成的式子。如：usename + "你好！"
JavaScript控制结构和函数
一、if 条件语句
if - else 条件语句，当条件为真时执行语句1，当条件为假时执行语句2。其格式如下：
if (条件) 语句1
else 语句2
例子：根据时间显示“早上好”。
<html>
<body>
<script language="JavaScript">
var NowTime=new Date()
NowTime=NowTime.getHours()
if (NowTime > 11 && NowTime <= 13) alert("中午好！")
else if (NowTime > 13 && NowTime <= 18) alert("下午好！")
else if (NowTime >= 0 && NowTime <= 9) alert("早上好！")
else if (NowTime > 9 && NowTime <= 11) alert("上午好！")
else alert("晚上好！")
</script>
</body>
</html>
二、switch 选择判断语句
switch 选择判断语句，当表达式的值与 case 的值相同时，执行相应的语句。其格式如下：
switch(表达式)
{
case 标号1
语句1
break
case 标号2
语句2
break
......
default
语句3
}
三、switch例子：显示今天是星期几。
<html>
<body>
<Script Language="JavaScript">
today=new Date()
switch(today.getDay())
{
case 0:
alert("今天是星期日。")
break
case 1:
alert("今天是星期一。")
break
case 2:
alert("今天是星期二。")
break
case 3:
alert("今天是星期三。")
break
case 4:
alert("今天是星期四。")
break
case 5:
alert("今天是星期五。")
break
case 6:
alert("今天是星期六。")
break
}
</script>
</body>
</html>
四、for 循环语句
for 语句，根据循环条件，反复执行循环语句操作。其格式如下：
for(初始化;循环条件;循环操作){操作}
例子：显示八种不同大小和颜色的字。
<html>
<body>
<script language="JavaScript">
document.write("<center>")
for (i=1; i<8; i++){
document.write("<font color="+i*1000+" size="+i+">I Love You!</font><br>")
}
document.write("</center>")
</script>
</body>
</html>
五、do ... while 循环语句
do ... While 语句，内部的语句被反复执行，直到条件不符合。其格式如下：
do
{
语句
}
while(条件)
例子：求1+2+3+...加至100的和。
<html>
<body>
<script language="JavaScript">
var n=0,i=1
do
{ n=n+i
i=i+1}
while(i<=100)
alert("总和："+n)
</script>
</body>
</html>
六、While 循环语句
while 语句，当符合条件时，执行循环体内的语句。其格式如下：
while(条件)
{
语句
}
例子：求1+2+3+...加至100的和。
<html>
<body>
<script language="JavaScript">
var n=0,i=1
while(i<=100)
{ n=n+i
i=i+1}
alert("总和："+n)
</script>
</body>
</html>
七、函数的使用
函数：是用户定义的一组语句，它能完成一定的功能，有一个名字。
函数的定义：Function Name(参数){语句}
函数的调用：Name(参数) 或 Varname=Name(参数)
例子，功能：单击按钮时，onclick事件调用函数pushbutton，显示"Hello! 你好"。
<html>
<head>
<script language="JavaScript">
function pushbutton() {
alert("Hello! 你好") }
</script>
</head>
<body>
<form>
<input type="button" value="打招呼" οnclick="pushbutton()">
</form>
</body>
</html>
JavaScript表单元素和事件编程
一、HTML表单元素和它们的事件
表单元素：窗体、按钮、复选钮、单选钮、文本框、密码框、文本区、发送按钮、清除按钮、选择列表。
onLoad事件：浏览器装入Web网页时，产生onLoad事件。
onClick事件：用户用鼠标单击“按钮”等元素时，产生onClick事件。
onChange事件：当文本框等元素的内容改变时，产生onChange事件
onFocus事件：当文本框等元素的得到焦点时，产生onFocus事件
onBlur事件：当文本框等元素的失去焦点时，产生onBlur事件
onMouseOver事件：当鼠标移动到对象上面时，产生onMouseOver事件。
onMouseOut事件：当鼠标离开对象时，产生onMouseOut事件。
常常将表单与事件结合起来使用，利用表单取得用户的输入，然后通过事件触发，来调用JavaScript函数来进行处理。
二、onclick事件例子，单击按钮时，onclick事件跳转到另一网页。
<html>
<body>
<form>
<input type="button" value="网上教室"
οnclick="javascript:top.location='http://liaohk.126.com'">
</form>
</body>
</html>
三、onBlur事件例子：将文本输入框中的输入内容显示出来
<html>
<head>
<script language="JavaScript">
function getname(str) { alert("你好! "+ str+"!"); }
</script>
</head>
<body>
请输入你的姓名：
<form>
<input type="text" onBlur="getname(this.value)" value="">
</form>
</body>
</html>
这个例子用 <input>输入框的"onBlur" 事件函数以取得输入字串，并将它显示在对话窗上。函数 Getname(this.value) 中的
"this.value" 是你在文字输入格式中所输入的值。
四、例子： 利用 onMouseOver 事件调用函数 hello() ，显示当天日期。
<html>
<head>
<script language="JavaScript">
function hello() {
today=new Date()
alert("今天是："+today.toString()) }
</script>
</head>
<body>
<a href="" onMouseOver="hello()">显示日期</a>
</body>
</html>
JavaScript内置对象及其方法
一、JavaScript内置对象
JavaScript语言内置了一些对象，利用它可以方便地实现某些复杂的功能。内置对象有以下几种：
● Date：日期对象。
● Math：数学对象。
● String：字符串对象。
二、日期对象 Date
日期对象代表的是有关日期与时间的信息，以及处理这些信息的方法。使用语法如下：
dataname=new date（参数）
其中参数为：“Month，Day，Year，Hours:Minutes:Seconfs“格式的字符串。
Date对象的几种常用方法：
● GetDay：星期几。
● GetHours：当前小时。
● GetMinutes：当前分钟。
● GetSeconds：当前秒数。
● ToString：以字符串表示的当地日期。
三、例子：显示访问者浏网页时的年份。
<html>
<body>
<Script Language="JavaScript">
today=new Date()
alert("今年是："+today.getYear()+"年。")
</script>
</body>
</html>
四、数学对象 Math
数学对象Math主要完成某些计算功能。Math对象常用的方法有：
● abs()：取绝对值。
● min()：两者中取小值。
● max()：两者中取大值。
● random()：取1到51之间的随机数。
● round()：取最接近该数字的整数。
● sqrt()：取平方根。
例子：求三个数A、B、C中的最大值。
var A,B,C,d,MAX
d=Math.max(A,B)
MAX=Math.max(d,C)
五、字符串对象 String
字符串对象最常使用，不需要用"new"语句去创建它。下面的语句创建了三个字符串对象：
● E_mail="liaohk@21cn.com"
● name="liaohk"
● title="网上教室"
字符串对象的属性length，将返回字符串的长度。
字符串对象常用的方法：
● ToLowerCase()：将字符串所有的字符转为小写形式。
● ToUpperCase()：将字符串所有的字符转为大写形式。
● SubString(start,end)：返回人start到end的子串。
● Bold()：相当于在字符串前后加上<b>与</b>标记。
● Link(URL)：将字符串转换成这种格式：<a href="/blog/URL>";string</a>
六、字符串例子：显示文字
<html>
<body>
<script language="javascript">
function writes(names){
document.write(names+"<p>")
document.write(names.bold().fontsize(25))
}
writes("这是JavaScript脚本")
</script>
</body>
</html>
七、字符串例子：将用户输入的内容转换为大写形式。
<html>
<head>
<script language="JavaScript">
function texttoUp(str)
{ var result=str.toUpperCase();
document.form1.text2.value=result;}
</script>
</head>
<body>
<form name="form1">
<input type="text" name="text1" onChange="texttoUp(this.value);">
<input type="text" name="text2">
</form>
</body>
</html>
JavaScript浏览器内置对象及其方法
一、浏览器的内置对象
浏览器的内置对象主要集中在文档和窗口对象上，它包括以下几种：
● Window：代表客户机上浏览器的窗口。
● Location：代表当前URL的信息。
● History：代表用户浏览器的历史记录。
● Document：代表HTML中在<body>与</body>标记中间的部分。
二、Window对象的属性和方法
Window对象共有七个属性：
● defauleStatus：指定窗口状态栏中的信息。
● status：指定当前窗口状态栏中的信息。
● frames：是一个数组，其中内容是窗口中所有的框架。
● parent：指当前窗口的父窗口。
● self：指当前窗口。
● top：代表当前所有窗口的最顶层窗口。
● window：代表当前窗口。
Window对象有五个方法：
● alert：显示带有一个“确定”按钮的对话框。
● confirm：显示带有“确定”与“取消”两个按钮的对话框。
● prompt：显示带有输入区的对话框。
● open：打开一个新窗口。
● close：关闭用户打开的窗口。
三、status属性例子，在窗口状态栏显示和清除文字
单击"写入文字"按钮，在状态栏显示'这是状态栏'。按"清除文字"按钮，清除状态栏的文字。
<html>
<head>
<script language="JavaScript">
function statbar(txt) {
window.status = txt; }
</script>
</head>
<body>
<form>
<input type="button" name="look" value="写入文字" οnclick="statbar('这是状态栏');">
<input type="button" name="erase" value="清除文字" οnclick="statbar('');">
</form>
</body>
</html>
四、alert方法例子：显示“大家来学习JavaScript脚本语言。”的对话框。
<html>
<body>
<script language="JavaScript">
alert("大家来学习JavaScript脚本语言。")
</script>
</body>
</html>
五、 Confirm方法例子：让用户选择是否进入下一页。
用confirm显示选择对话框，按“确定”进入next.htm，按“取消”不进入。
<html>
<body>
<script language="JavaScript">
if(confirm("你想进入下一页吗？"))
location="next.htm"
</script>
</body>
</html>
六、Prompt方法例子：让用户输入姓名，并将它显示出来。
用prompt显示输入对话框，让用户输入姓名，再用alert对话框显示出来。
<html>
<body>
<script language="JavaScript">
var name
name=prompt("请输入姓名","张国强")
alert("你好，"+name)
</script>
</body>
</html>
七、Window对象方法例子
当打开网页时，立即打开另一窗口，显示test.htm。
<html>
<body οnlοad="javascript:window.open('test.htm')">
</body>
</html>
八、History对象的属性和方法
History对象只有一个length属性，它表示历史对象中的链接的数目。
History对象有以下方法：
● back：在浏览器中显示上一页。
● forward：在浏览器中显示上下页。
● go(int)：在浏览器中载入从当前算起的第int个页面。
九、History例子：具有“上一页”、“下一页”按钮的页面。
<html>
<body>
<form>
<input type="button" value="上一页" onClick="history.back()">
<input type="button" value="下一页" onClick="history.forward()">
</body>
</html>
十、Document对象的属性和方法
Document对象有以下属性：
● alinkColor：活动链接颜色。
● linkColor：链接颜色。
● vlinkColor：已访问过的链接颜色。
● anchors：页内链接。
● bgColor：背景颜色。
● fgColor：前景颜色。
● cookie：“小甜饼“。
● forms：表单元素。
● lastModified：文档最后修改的时间。
● links：超链接。
● location：当前文档的URL。
● referer：在用户跟随链接移动时，包含主文档的URL字符串值。
● title：文档标题。
Document对象有四个方法：
● write：向文档输出。
● open：打开文档。
● close：关闭文档。
● clear：清除打开文档的内容。
十一、Document例子：将当前窗口的背景色设为绿色。
使用document.bgColor属性设定背景色。
<html>
<body>
<script language="JavaScript">
top.document.bgColor="green"
</script>
</body>
</html>
十二、Document例子：在当前窗口中以白前景色和绿背景色显示文字。
使用document.bgColor属性设定背景色。使用document.fgColor属性设定前景色。使用document.write方法显示文字。
<html>
<body>
<script language="JavaScript">
top.document.bgColor="green"
top.document.fgColor="white"
top.document.write("<h1>绿底白字</h1>")
</script>
</body>
</html>
十三、Document 例子：在窗口标题中显示文字
<html>
<body>
<script language="JavaScript">
top.document.title="这上标题"
</script>
</body>
</html>
十四、Document例子：显示文件最后修改日期
当鼠标移动到表格上时，表格背景色改变！
<html>
<body>
网页内容的最后修改日期：
<script language="JavaScript">
document.write(document.lastModified);
</script>
</body>
</html>
注意：JavaScript 本身是会区分大小写的，lastmodified 与 lastModified 在它看来是不同的结果。
JavaScript应用实例
一、 Window对象例子1：打开一个新窗口
当打开这个网页时，利用 onload 事件，将首先自动打开一个窗口，并显示另一个文件box.hml。
<html>
<head>
<script language="JavaScript">
function openWindow(theURL,features)
{ window.open(theURL,"winName",features);}
</script>
</head>
<body οnlοad="openWindow('box.htm','width=550,height=100')">
</body>
</html>
二、 Window对象例子2：打开一个新窗口
当单击超链接时，利用链接指向的函数，将首先自动打开一个窗口，并显示另一个文件box.hml。
<html>
<head>
<script language="JavaScript">
function openWindow2(theURL,widths,heights)
{ window.open(theURL,"winName","width=" & widths & "," & "height=" &
heights);}
</script>
</head>
<body>
<a href="javascript:openWindow2('box.htm','550','300')">单击这打开新窗口</a>
</body>
</html>
三、 Window对象例子3：在一个新窗口中显示内容
打开一个新窗口，该窗口无工具栏，无地址栏，无导航条，无状态栏，无菜单、有滚动条，不能改变大小。窗口宽660，高480。
<html>
<script language="javascript">
function callpage(htmlurl){
var newwin=window.open
(htmlurl,"newWin","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,
resizable=no,top=2,left=2,width=660,height=480");return false;}
</script>
<body>
<a href="新闻.htm" onClick="return callpage(this.href);">新闻简报</a>
</body>
</html>
四、产生一个新窗口并显示信息
<html>
<head>
<script language="JavaScript">
function WinOpen() {
msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
msg.document.write("<HEAD><TITLE>你好!</TITLE></HEAD>");
msg.document.write("<CENTER><h2>这是JavaScript产生的新窗口!</h2></CENTER>");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="单击" οnclick="WinOpen()">
</form>
</body>
</html>
五、产生随机数
<html>
<head>
<script language="JavaScript">
function RandomNumber() {
today = new Date();
num = Math.abs(Math.sin(today.getTime()));
return num;
}
</script>
</head>
<body>
<script language="JavaScript">
document.write("这是一个随机数:", RandomNumber());
</script>
</body>
</html>
做法是以上一个例中的时间函数，它会产生一个很大的数，利用这个数再做正弦函数（sin） 的运算， 得到的数再做绝对值的运算，结果可以得到一个介于 0 与 1
间的数。（时间的变化单位是毫秒。）
六．onMouseOver、onMouseOut事件例子，当鼠标移动到表格上时，表格背景色改变！
<html>
<body>
<script language="javascript">
function mOvr(obj,clrOver) {
if (!obj.contains(event.fromElement)) {
obj.bgColor = clrOver; }}
function mOut(obj,clrIn) {
if (!obj.contains(event.toElement)) {
obj.bgColor = clrIn; }}
</script>
<p align="center">当鼠标移动到表格上时，表格背景色改变！ </p>
<table border="1">
<tr>
<td οnmοuseοut="mOut(this,'#00ffff');"
οnmοuseοver="mOvr(this,'#ff0000');">这是一个表格</td>
</tr>
</table>
</body>
</html>
this是Javascript的一个关键字，代表当前的对象，可以在对象方法中来引用。
一、JavaScript脚本语言的特性
JavaScript脚本语言是一种面向浏览器的网页脚本编程语言。脚本语言有以下几个特性：
1、在客户端执行。完全在用户的计算机上运行，无须经过服务器。
2、面向对象。具有内置对象，也可以直接操作浏览器对象。
3、动态变化。可以对用户的输入作出反应，也可以直接对用户输出。
4、简单易用。JavaScript脚本语言虽然简单，但初学者也能快速掌握。
5、只能与HTML语言一起使用。要通过浏览器解释执行。
二、如何在HTML中加入JavaScript脚本
JavaScript采用的格式如下：
<Script Language="JavaScript">
JavaScript 语句
</Script>
把上述语句放在HTML的<head>与</head>之间，也可放在<body>与</body>之间。
例子：在网页上显示“你好！”。
<html>
<body>
<Script Language="JavaScript">
alert("你好！")
</script>
</body>
</html>
三、在浏览器地址栏直接执行JavaScript脚本
也可以在浏览器的地址栏中输入JavaScript语句，由浏览器直接执行。
如输入：javascript:alert(200*75)
四、调用JavaScript文件
可以将纯JavaScript的语句另外保存在一个"*.js"的文件中，需要时再调用。
例子：调用test.js文件，显示提示。
<html>
<body>
调用test.js文件
<script language="JavaScript" src="test.js">
</script>
</body>
</html>
test.js的文件内容如下：
alert("这是被调用的语句。")
五、注释语句
用<!- ... ->表示注解部分，用作说明解释，浏览器不显示出来。不要也可以。
另外，双斜线 "//" ，是JavaScript 的注释语句，它后面的语句不被执行。
六、变量的使用
变量的声明：Var usename
变量的赋值：usename="李国强"
例子：在网页上显示“李国强你好！”。
<html>
<body>
<Script Language="JavaScript">
Var usename
usename="李国强"
alert(usename + "你好！")
</script>
</body>
</html>
七、数组
数组的定义：var name=new Array(5) 用 new 来生成数组。
数组的赋值：name[1]="Marry"
数组的初始化：var name=new Array("Marry","Petty","Mike","Jphn")
数组的引用：name[1]
注：数组的第一个素由1开始。
八、运算符与表达式
1、代数运算符：加（+）、减（-）、乘（*）、除（/）、取余（%）。
2、比较运算符：等于（==）、不等于（!=）、大于（>）、小于（<）、大于等于（>=）、小于等于（<=）。
3、逻辑运算符：逻辑与（&&）、逻辑或（||）、逻辑非（!）。
表达式：由变量和运算符组成的式子。如：usename + "你好！"
JavaScript控制结构和函数
一、if 条件语句
if - else 条件语句，当条件为真时执行语句1，当条件为假时执行语句2。其格式如下：
if (条件) 语句1
else 语句2
例子：根据时间显示“早上好”。
<html>
<body>
<script language="JavaScript">
var NowTime=new Date()
NowTime=NowTime.getHours()
if (NowTime > 11 && NowTime <= 13) alert("中午好！")
else if (NowTime > 13 && NowTime <= 18) alert("下午好！")
else if (NowTime >= 0 && NowTime <= 9) alert("早上好！")
else if (NowTime > 9 && NowTime <= 11) alert("上午好！")
else alert("晚上好！")
</script>
</body>
</html>
二、switch 选择判断语句
switch 选择判断语句，当表达式的值与 case 的值相同时，执行相应的语句。其格式如下：
switch(表达式)
{
case 标号1
语句1
break
case 标号2
语句2
break
......
default
语句3
}
三、switch例子：显示今天是星期几。
<html>
<body>
<Script Language="JavaScript">
today=new Date()
switch(today.getDay())
{
case 0:
alert("今天是星期日。")
break
case 1:
alert("今天是星期一。")
break
case 2:
alert("今天是星期二。")
break
case 3:
alert("今天是星期三。")
break
case 4:
alert("今天是星期四。")
break
case 5:
alert("今天是星期五。")
break
case 6:
alert("今天是星期六。")
break
}
</script>
</body>
</html>
四、for 循环语句
for 语句，根据循环条件，反复执行循环语句操作。其格式如下：
for(初始化;循环条件;循环操作){操作}
例子：显示八种不同大小和颜色的字。
<html>
<body>
<script language="JavaScript">
document.write("<center>")
for (i=1; i<8; i++){
document.write("<font color="+i*1000+" size="+i+">I Love You!</font><br>")
}
document.write("</center>")
</script>
</body>
</html>
五、do ... while 循环语句
do ... While 语句，内部的语句被反复执行，直到条件不符合。其格式如下：
do
{
语句
}
while(条件)
例子：求1+2+3+...加至100的和。
<html>
<body>
<script language="JavaScript">
var n=0,i=1
do
{ n=n+i
i=i+1}
while(i<=100)
alert("总和："+n)
</script>
</body>
</html>
六、While 循环语句
while 语句，当符合条件时，执行循环体内的语句。其格式如下：
while(条件)
{
语句
}
例子：求1+2+3+...加至100的和。
<html>
<body>
<script language="JavaScript">
var n=0,i=1
while(i<=100)
{ n=n+i
i=i+1}
alert("总和："+n)
</script>
</body>
</html>
七、函数的使用
函数：是用户定义的一组语句，它能完成一定的功能，有一个名字。
函数的定义：Function Name(参数){语句}
函数的调用：Name(参数) 或 Varname=Name(参数)
例子，功能：单击按钮时，onclick事件调用函数pushbutton，显示"Hello! 你好"。
<html>
<head>
<script language="JavaScript">
function pushbutton() {
alert("Hello! 你好") }
</script>
</head>
<body>
<form>
<input type="button" value="打招呼" οnclick="pushbutton()">
</form>
</body>
</html>
JavaScript表单元素和事件编程
一、HTML表单元素和它们的事件
表单元素：窗体、按钮、复选钮、单选钮、文本框、密码框、文本区、发送按钮、清除按钮、选择列表。
onLoad事件：浏览器装入Web网页时，产生onLoad事件。
onClick事件：用户用鼠标单击“按钮”等元素时，产生onClick事件。
onChange事件：当文本框等元素的内容改变时，产生onChange事件
onFocus事件：当文本框等元素的得到焦点时，产生onFocus事件
onBlur事件：当文本框等元素的失去焦点时，产生onBlur事件
onMouseOver事件：当鼠标移动到对象上面时，产生onMouseOver事件。
onMouseOut事件：当鼠标离开对象时，产生onMouseOut事件。
常常将表单与事件结合起来使用，利用表单取得用户的输入，然后通过事件触发，来调用JavaScript函数来进行处理。
二、onclick事件例子，单击按钮时，onclick事件跳转到另一网页。
<html>
<body>
<form>
<input type="button" value="网上教室"
οnclick="javascript:top.location='http://liaohk.126.com'">
</form>
</body>
</html>
三、onBlur事件例子：将文本输入框中的输入内容显示出来
<html>
<head>
<script language="JavaScript">
function getname(str) { alert("你好! "+ str+"!"); }
</script>
</head>
<body>
请输入你的姓名：
<form>
<input type="text" onBlur="getname(this.value)" value="">
</form>
</body>
</html>
这个例子用 <input>输入框的"onBlur" 事件函数以取得输入字串，并将它显示在对话窗上。函数 Getname(this.value) 中的
"this.value" 是你在文字输入格式中所输入的值。
四、例子： 利用 onMouseOver 事件调用函数 hello() ，显示当天日期。
<html>
<head>
<script language="JavaScript">
function hello() {
today=new Date()
alert("今天是："+today.toString()) }
</script>
</head>
<body>
<a href="" onMouseOver="hello()">显示日期</a>
</body>
</html>
JavaScript内置对象及其方法
一、JavaScript内置对象
JavaScript语言内置了一些对象，利用它可以方便地实现某些复杂的功能。内置对象有以下几种：
● Date：日期对象。
● Math：数学对象。
● String：字符串对象。
二、日期对象 Date
日期对象代表的是有关日期与时间的信息，以及处理这些信息的方法。使用语法如下：
dataname=new date（参数）
其中参数为：“Month，Day，Year，Hours:Minutes:Seconfs“格式的字符串。
Date对象的几种常用方法：
● GetDay：星期几。
● GetHours：当前小时。
● GetMinutes：当前分钟。
● GetSeconds：当前秒数。
● ToString：以字符串表示的当地日期。
三、例子：显示访问者浏网页时的年份。
<html>
<body>
<Script Language="JavaScript">
today=new Date()
alert("今年是："+today.getYear()+"年。")
</script>
</body>
</html>
四、数学对象 Math
数学对象Math主要完成某些计算功能。Math对象常用的方法有：
● abs()：取绝对值。
● min()：两者中取小值。
● max()：两者中取大值。
● random()：取1到51之间的随机数。
● round()：取最接近该数字的整数。
● sqrt()：取平方根。
例子：求三个数A、B、C中的最大值。
var A,B,C,d,MAX
d=Math.max(A,B)
MAX=Math.max(d,C)
五、字符串对象 String
字符串对象最常使用，不需要用"new"语句去创建它。下面的语句创建了三个字符串对象：
● E_mail="liaohk@21cn.com"
● name="liaohk"
● title="网上教室"
字符串对象的属性length，将返回字符串的长度。
字符串对象常用的方法：
● ToLowerCase()：将字符串所有的字符转为小写形式。
● ToUpperCase()：将字符串所有的字符转为大写形式。
● SubString(start,end)：返回人start到end的子串。
● Bold()：相当于在字符串前后加上<b>与</b>标记。
● Link(URL)：将字符串转换成这种格式：<a href="/blog/URL>";string</a>
六、字符串例子：显示文字
<html>
<body>
<script language="javascript">
function writes(names){
document.write(names+"<p>")
document.write(names.bold().fontsize(25))
}
writes("这是JavaScript脚本")
</script>
</body>
</html>
七、字符串例子：将用户输入的内容转换为大写形式。
<html>
<head>
<script language="JavaScript">
function texttoUp(str)
{ var result=str.toUpperCase();
document.form1.text2.value=result;}
</script>
</head>
<body>
<form name="form1">
<input type="text" name="text1" onChange="texttoUp(this.value);">
<input type="text" name="text2">
</form>
</body>
</html>
JavaScript浏览器内置对象及其方法
一、浏览器的内置对象
浏览器的内置对象主要集中在文档和窗口对象上，它包括以下几种：
● Window：代表客户机上浏览器的窗口。
● Location：代表当前URL的信息。
● History：代表用户浏览器的历史记录。
● Document：代表HTML中在<body>与</body>标记中间的部分。
二、Window对象的属性和方法
Window对象共有七个属性：
● defauleStatus：指定窗口状态栏中的信息。
● status：指定当前窗口状态栏中的信息。
● frames：是一个数组，其中内容是窗口中所有的框架。
● parent：指当前窗口的父窗口。
● self：指当前窗口。
● top：代表当前所有窗口的最顶层窗口。
● window：代表当前窗口。
Window对象有五个方法：
● alert：显示带有一个“确定”按钮的对话框。
● confirm：显示带有“确定”与“取消”两个按钮的对话框。
● prompt：显示带有输入区的对话框。
● open：打开一个新窗口。
● close：关闭用户打开的窗口。
三、status属性例子，在窗口状态栏显示和清除文字
单击"写入文字"按钮，在状态栏显示'这是状态栏'。按"清除文字"按钮，清除状态栏的文字。
<html>
<head>
<script language="JavaScript">
function statbar(txt) {
window.status = txt; }
</script>
</head>
<body>
<form>
<input type="button" name="look" value="写入文字" οnclick="statbar('这是状态栏');">
<input type="button" name="erase" value="清除文字" οnclick="statbar('');">
</form>
</body>
</html>
四、alert方法例子：显示“大家来学习JavaScript脚本语言。”的对话框。
<html>
<body>
<script language="JavaScript">
alert("大家来学习JavaScript脚本语言。")
</script>
</body>
</html>
五、 Confirm方法例子：让用户选择是否进入下一页。
用confirm显示选择对话框，按“确定”进入next.htm，按“取消”不进入。
<html>
<body>
<script language="JavaScript">
if(confirm("你想进入下一页吗？"))
location="next.htm"
</script>
</body>
</html>
六、Prompt方法例子：让用户输入姓名，并将它显示出来。
用prompt显示输入对话框，让用户输入姓名，再用alert对话框显示出来。
<html>
<body>
<script language="JavaScript">
var name
name=prompt("请输入姓名","张国强")
alert("你好，"+name)
</script>
</body>
</html>
七、Window对象方法例子
当打开网页时，立即打开另一窗口，显示test.htm。
<html>
<body οnlοad="javascript:window.open('test.htm')">
</body>
</html>
八、History对象的属性和方法
History对象只有一个length属性，它表示历史对象中的链接的数目。
History对象有以下方法：
● back：在浏览器中显示上一页。
● forward：在浏览器中显示上下页。
● go(int)：在浏览器中载入从当前算起的第int个页面。
九、History例子：具有“上一页”、“下一页”按钮的页面。
<html>
<body>
<form>
<input type="button" value="上一页" onClick="history.back()">
<input type="button" value="下一页" onClick="history.forward()">
</body>
</html>
十、Document对象的属性和方法
Document对象有以下属性：
● alinkColor：活动链接颜色。
● linkColor：链接颜色。
● vlinkColor：已访问过的链接颜色。
● anchors：页内链接。
● bgColor：背景颜色。
● fgColor：前景颜色。
● cookie：“小甜饼“。
● forms：表单元素。
● lastModified：文档最后修改的时间。
● links：超链接。
● location：当前文档的URL。
● referer：在用户跟随链接移动时，包含主文档的URL字符串值。
● title：文档标题。
Document对象有四个方法：
● write：向文档输出。
● open：打开文档。
● close：关闭文档。
● clear：清除打开文档的内容。
十一、Document例子：将当前窗口的背景色设为绿色。
使用document.bgColor属性设定背景色。
<html>
<body>
<script language="JavaScript">
top.document.bgColor="green"
</script>
</body>
</html>
十二、Document例子：在当前窗口中以白前景色和绿背景色显示文字。
使用document.bgColor属性设定背景色。使用document.fgColor属性设定前景色。使用document.write方法显示文字。
<html>
<body>
<script language="JavaScript">
top.document.bgColor="green"
top.document.fgColor="white"
top.document.write("<h1>绿底白字</h1>")
</script>
</body>
</html>
十三、Document 例子：在窗口标题中显示文字
<html>
<body>
<script language="JavaScript">
top.document.title="这上标题"
</script>
</body>
</html>
十四、Document例子：显示文件最后修改日期
当鼠标移动到表格上时，表格背景色改变！
<html>
<body>
网页内容的最后修改日期：
<script language="JavaScript">
document.write(document.lastModified);
</script>
</body>
</html>
注意：JavaScript 本身是会区分大小写的，lastmodified 与 lastModified 在它看来是不同的结果。
JavaScript应用实例
一、 Window对象例子1：打开一个新窗口
当打开这个网页时，利用 onload 事件，将首先自动打开一个窗口，并显示另一个文件box.hml。
<html>
<head>
<script language="JavaScript">
function openWindow(theURL,features)
{ window.open(theURL,"winName",features);}
</script>
</head>
<body οnlοad="openWindow('box.htm','width=550,height=100')">
</body>
</html>
二、 Window对象例子2：打开一个新窗口
当单击超链接时，利用链接指向的函数，将首先自动打开一个窗口，并显示另一个文件box.hml。
<html>
<head>
<script language="JavaScript">
function openWindow2(theURL,widths,heights)
{ window.open(theURL,"winName","width=" & widths & "," & "height=" &
heights);}
</script>
</head>
<body>
<a href="javascript:openWindow2('box.htm','550','300')">单击这打开新窗口</a>
</body>
</html>
三、 Window对象例子3：在一个新窗口中显示内容
打开一个新窗口，该窗口无工具栏，无地址栏，无导航条，无状态栏，无菜单、有滚动条，不能改变大小。窗口宽660，高480。
<html>
<script language="javascript">
function callpage(htmlurl){
var newwin=window.open
(htmlurl,"newWin","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,
resizable=no,top=2,left=2,width=660,height=480");return false;}
</script>
<body>
<a href="新闻.htm" onClick="return callpage(this.href);">新闻简报</a>
</body>
</html>
四、产生一个新窗口并显示信息
<html>
<head>
<script language="JavaScript">
function WinOpen() {
msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
msg.document.write("<HEAD><TITLE>你好!</TITLE></HEAD>");
msg.document.write("<CENTER><h2>这是JavaScript产生的新窗口!</h2></CENTER>");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="单击" οnclick="WinOpen()">
</form>
</body>
</html>
五、产生随机数
<html>
<head>
<script language="JavaScript">
function RandomNumber() {
today = new Date();
num = Math.abs(Math.sin(today.getTime()));
return num;
}
</script>
</head>
<body>
<script language="JavaScript">
document.write("这是一个随机数:", RandomNumber());
</script>
</body>
</html>
做法是以上一个例中的时间函数，它会产生一个很大的数，利用这个数再做正弦函数（sin） 的运算， 得到的数再做绝对值的运算，结果可以得到一个介于 0 与 1
间的数。（时间的变化单位是毫秒。）
六．onMouseOver、onMouseOut事件例子，当鼠标移动到表格上时，表格背景色改变！
<html>
<body>
<script language="javascript">
function mOvr(obj,clrOver) {
if (!obj.contains(event.fromElement)) {
obj.bgColor = clrOver; }}
function mOut(obj,clrIn) {
if (!obj.contains(event.toElement)) {
obj.bgColor = clrIn; }}
</script>
<p align="center">当鼠标移动到表格上时，表格背景色改变！ </p>
<table border="1">
<tr>
<td οnmοuseοut="mOut(this,'#00ffff');"
οnmοuseοver="mOvr(this,'#ff0000');">这是一个表格</td>
</tr>
</table>
</body>
</html>
this是Javascript的一个关键字，代表当前的对象，可以在对象方法中来引用。
959
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
