- 浏览: 93250 次
- 性别:
- 来自: 深圳
最新评论
javascript学习笔记
一、概述
javascript是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是和HTML以及动态的JAVA脚本语言即JAVA小程序一起实现在一个WEB页面中链接多个对象,与WEB客户交互。他是通过嵌入或者调入标准的HTML语言中实现的。它有以下几个基本的特点:
1、是一种脚本语言
它采用小程序段的方式实现编程,是一种解释型语言,它不需要编译,而是在运行过程中被逐行地解释执行。
2、基于对象的语言
javascript是一种基于对象的语言,也可以看作是面向对象,这意味着,它可以运用自己已经创建的对象,因此许多功能来自于脚本环境中对象的方法与脚本的相互作用。
3、简单性
javascript的简单性主要体现在以下:
I. 他是一种基于JAVA基本语句和控制流之上的一种简单而紧凑的设计。
II.变量类型采用的是弱类型,没有严格的数据类型。
4、安全性
他不允许访问本地硬盘,不能将数据存入到服务器,不允许对网络文档进行修改和删除,只能通过浏览器实现信息的浏览或动态交互。可以有效的防止数据丢失。
5、动态性
它可以直接对用户输入进行响应,无须通过WEB服务程序。它对用户的响应是通过事件驱动的,事件(Event)即用户在网页上执行某种操作产生的动作,如按下鼠标,移动窗口,选择菜单等。
6、跨平台性
javascript依赖浏览器来运行,所以和操作系统无关,只要能运行浏览器,且浏览器支持javascript就可以运行。
综上所述,javascript是一种新的描述语言,可以被嵌入HTML文件中。可以响应用户的操作,而不必通过网络来回的传输资料,对用户输入的资料可以不需要传回服务器处理,再传回客户端的过程,能够直接在客户端使用javascript应用程序处理。
二、javascript和JAVA的区别
javascript和JAVA很类似,而且有紧密的联系,但却两个公司的产品,Java是比javascript复杂的多的程序语言,而javascript就容易理解的多,javascript程序员,可以不那么注重技巧,许多的JAVA特性在javascript中并不被支持。
JAVA是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发,而javascript是Netscape公司的产品,其目的是扩展Netscape Navigator的功能,而开发的一种可嵌入WEB页面的基于对象和事件驱动的解释性语言,它的前身是live script 而JAVA的前身是Oak语言,两者的区别如下:
1、基于对象和面向对象
JAVA是和种真正的面向对象的语言,即使开发简单的程序,也必须设计对象。而javascript是脚本语言,可以用来制作与网络无关的,与用户交互的软件,它是基于对象和事件驱动的编程语言。它本身提供了非常丰富的内部对象供设计人员使用。
2、解释和编译
两种语言在浏览器中的执行方式不同。
Java源代码在发送到客户端执行之前,必须经过编译,客户端上需要有相应平台的仿真器或解释器,它通过编译器或解释器来实现独立于特定平台编译代码的束缚。
javascipt是一种解释性语言,其源代码发送到客户端执行之前,不需要编译,将字符格式的代码发送到客户端,直接由浏览器来解释执行。
3、强变量和弱变量
Java使用的是强类型变量检查,所有变量在编译之前必须声明。如:
Integer x;
String y;
x=1234;
y=4321;
其中x=1234是整数型而y=4321是字符串
javascript使用弱类型变量检查,使用之前不必声明。在解释器运行时检查他的数据类型。如:
x=1234;
y="4321";
说明x是数值型变量,y是字符串型变量。
4、代码格式不一样
Java是一种与HTML无关的格式,必须通过像引用外媒体那么装载,其代码以字节代码的形式保存在独立的文档中。
javascript的代码是一种文本字符格式,可以直接嵌入HTML文档,并且可以动态装载,编写javascript就是编写文本那么方便。
5、嵌入格式不一样
在HTML中两种语言的标识不同:
javascript用<script>.....</script>
Java用<applet>.....</spplet>
6、静态联编和动态联编
Java采用静态联编,即Java的对象引用必须在编译时进行,以使编译器能够实现强类型检查。
javascript采用动态联编,即javascript对象引用在运行时检查,如不经编译就无法实现对象引用的检查。
5-11日:http://www.qqread.com/javascript/w656104012_2.html
三、javascript运行环境
1、Java运行环境
软件条件:
Natscape浏览器
Natscape Navigator 2.0以上的版本支持javascript1.0
Natscape Navigator 3.0以上的版本支持javascript1.1
Natscape Navigator 4.0以上的版本支持javascript1.2
Microsoft浏览器
Internet Explorer 3.0开始支持javascript
小贴士:
Microsoft把自己实现的javascript规范叫做Jscript,这个规范和Natscape的javascript规范在基本功能和语法上是一致的,但在个别对象的实现方面还是有差异,需要特别注意。
硬件条件:
基本内存32M
CRT至少要256色,分辩率在640*480以上
CPU至少在233以上
四、第一个javascript程序
通过下面的例子,来说明如何在HTML文件中嵌入javascript
test1.html
<html>
<head>
<script language="Javascript">
alert("这是第一个javascript程序");
alert("欢迎进入javascript的世界");
alert("共同进步");
</script>
</head>
</html>
在IE中运行程序可以看到结果。
另外一种引用方式:
<SCRIPT type="text/javascript" src=脚本文件URL></SCRIPT>
http://www.ntc.com.cn/Javascript/Javascript_18636.htm
第二课
概述:
javascript提供脚本语言的编程和C++非常相似,它去掉了容易出错的指针,提供了功能强大的类库。对于具备C++或者C语言的人来说,学习javascript是非常轻松愉快的。
一、javascript代码的加入
可以直接将javascript代码加入HTML文档:
<script language="Javascript">
javascript语言代码;
javascript语言代码;
</script>
通过标识<script>...</script>指明Javascript脚本源代码放入其中。通过属性language指明使用的何种语言。
下面是一个将javascript脚本加入HTML文档的例子。
test2.html
<html>
<head>
<Script language="Javascript">
document.write("这是javascript输出的:)");
document.close();
</Script>
</head>
</html>
document.write是javascript的输出函数,必须是小写。其功能是把括号中的字符或变量输出到屏幕。
document.close是将输出关闭。
可以将<javascript>...</javascript>放在Head区或Body区,放在Head区可以在主页及其他代码前加载,从而使代码功能更强大。也可以放在Body区实现某些部分动态的创建文档。
二、基本的数据类型
JavaScript 有六种数据类型。主要的类型有:
number
string
object
Boolean
null
undefined :一个为 undefined 的值就是指在变量被创建后,但未给该变量赋值以前所具有的值。
javascript和其他语言一样有自己的基本数据类型,表达式和运算符,以及程序基本的框架结构。javascript提供了四种基本的数据类型来处理文本和数值。而变量提供存放信息的地方,表达式则完成较复杂的信息处理。
1、基本的数据类型
在javascript中提供了四种基本数据类型:
数值型:整数、实数
字符串型:用“”或‘’括起来的字符或者数值
布尔型:True或者False表示
空值:
2、常量
整型常量:
javascript的常量通常又称为字面常量,它是不能改变的数据。其整型常量可以使用十进制、十六进制、八进制表示其值。
实型常量:
通常由整数部分加小数部分表示,如:12.32 14.56 。可以使用科学或者标准方法表示:5E7 4e5等。
布尔值:
布尔常量只有两种状态False和True。它主要用来说明一种状态或标志,以说明操作流程。它与C++不一样,C++可以用1或者0来表示其状态,而Javascript只能用True和False来表示其状态。
字符型常量:
使用“”或者‘’括起来的一些字符。如:“word101” '我是字符 :)'
空值:
如果试图引用一个不存在的变量,则返回一个空值Null。
特殊字符:
同C语言一样,Javascript中同样有以反斜杠(/)开头的不可显示的特殊字符。通常称为控制字符。
3、变量
变量的主要作用是存取数据、提供存放信息的容器。对于变量必须明确变量的命名、类型、变量的声明、作用域。
变量的命名
A、变量必须是一个有效的变量。首字符必须是大写或小写的字母或下划线(_)或美元符($)开头,可以出现数字和下划线(_),不能有(+)(-)(,)等符号。
B、不能使用Javascript的关键字做变量,在Javascript中定义了40多个关键字。如Var,Int,Double,True等。
小贴士:变量命名时,最好可以把变量的意义和他代表的意思对应起来。可以防止出错。
变量的类型
在Javascript中变量可以var来声明。如
var test="这是个变量"
在Javascript中变量可以不声明,而在使用时根据数据类型来确定其类型。如
test1=12.4 //实型
test2="我是变量" //字符串型
test3=true //布尔型
test4=13 //整型
test5="13" //字符串型
变量的声明和作用域
Javascript变量在使用前可以先声明,并赋值。虽然变量使用之前不是必须声明,但对变量声明最大的好处是容易发现错误,Javascript是采用动态联编的,所以不易发现代码中的错误,特别是变量命名方面。
Javascript变量的作用域有全局变量和局部变量两种。全局变量定义在所有函数体之外,作用域是整个函数;局部函数定义在函数体内,作用域是函数体内,对于其他函数是不可见的。
5-12日:
http://www.ntc.com.cn/Javascript/Javascript_18636.htm
http://cheminfo.tongji.edu.cn/cn/docs/javascript/javascript.htm
三、表达式和运算符
1、表达式:
在定义完变量以后,可以对它们进行赋值、运算、改变等一系列操作,这一过程通常通过表达式来完成。可以说它是常量、变量、布尔、运算符的集合。因此表达式可以分为:算术表达式,字符串表达式,布尔表达式,赋值表达式等。
2、运算符:
运算符是完成操作的一系列符号,在Javascript中有赋值运算符、算术运算符、比较运算符、逻辑运算符、字符串运算符、按位运算符、特殊运算符。
1)赋值运算符:将右边的操作数赋给左边的操作对象。
x +=y 含义 x=x+y
x -=y 含义 x=x-y
x *=y 含义 x=x*y
x /=y 含义 x=x/y
x %=y 含义 x=x%y
x <<=y 含义 x=x-y
x >>=y 含义 x=x-y
x >>>=y 含义 x=x-y
x &=y 含义 x=x&y
x ^=y 含义 x=x^y
x |=y 含义 x=x|y
2)比较运算符
比较运算符的运算过程是首先对他的操作数进行比较,返回一个布尔值,True或者False,操作数可以是数字也可以是字符串。字符串的比较使用Unicode值按照字母顺序进行。
==(等于)
!=(不等于)
===(绝对等于,数值及类型都相同)
!==(绝对不等于)
<(小于)
<=(小于等于)
>(大于)
>=(大于等于)
小贴士:注意在比较中,任何等于 0 的表达式被视为 false,而任何不等于 0 的语句都被视为 true。对下面的表达式求值将得到 true: (false == 0)
3)算术运算符
%(取模):
++(递增1):
--(递减1):
-(取反):
+(加):
-(减):
*(乘):
/(除):
4)按位运算符
按位运算符对操作数进行32位整数的0和1运算。它在比较两个值之前,先将它们转换成32位整数。
&(按位与)两个操作数的每个对应位都是1时结果为1
|(按位或) 两个操作数中任一个对应位是1时结果为1
^(按位异或)两个操作数中任一个对应位是1但不全是时结果为1,即两个对应位 中必须只有一个是1结果为1,便于记忆小贴士:相异的话取或运算
~(按位非)将操作数按位反转
<<(左移)如a<<b 表示交a左移b位,右边补零
>>(右移)如a>>b 表示交a右移b位,丢弃移动位
>>>(首位0填充右移)如a>>>b 表示交a右移b位,丢弃移动位,并左边补零
按位逻辑运算符的工作方式:
操作数将转化为32位整数并由0或1表示;
第一个操作数与第二个操作数之间按对应位操作;
运算符按位运算,结果按位配对。
按位移位运算符的工作方式:
它包括两个运算对象:第一个是被移位的量,第二个指定第一个对象被移动的位的数目。移位运算符将操作数转换为32位整数,并返回同左边类型相同的结果,请看下表:
运算符 描述 实例
<<(左移)
运算符按指定的数目按位左移第一个操作数,左移多余的位被丢弃,右边补零
9<<2 结果为 36,因为 1001 左移 2 位将变为 100100,十进制为 36
>>(带符号位右移)
运算符按指定的数目按位左移第一个操作数,多余位被丢弃,最左边的位移到左边
9>> 2 结果为 2,因为 1001 右移 2 位变为 10,十进制数为 2。同样的,-9>>2 结果为 -3,因为符号位被保留了
>>>(零填充右移)
运算符按指定的数目按位左移第一个操作数,多余位被丢弃,从左边补入 0
19>>>2 结果为 4,因为 10011 右移 2 位为 100,十进制数为 4
5)逻辑运算符
一般来说逻辑运算符返回一个布尔值,但是,&&和||会返回一个指定操作数的值,如果非布尔值使用逻辑运算符,将返回一个非布尔值。&&:如果有一个不是逻辑值,只要第一个操作数的值为flase,则返回第一个操作数的值flase,否则,返回第二个操作数的值。
&&(逻辑与)如果它可以转化成False,则返回1,否则返回表达式2。如果两个表达式都为真,则返回True,否则返回False。
||(逻辑或)如果它可以转化成True,则返回1,否则返回表达式2。如果两个表达式中有一个为真,则返回True,否则返回False。
!(逻辑非)如果表达式能转化成True,则返回False,否则返回True。
能够转化成False的表达式包括那些结果为Null,0,空字符,Undefined。如
a1=true && true // t && t 返回 true
a2=true && false // t && f 返回 false
a3=false && true // f && t 返回 false
a4=false && (3 == 4) // f && f 返回 false
a5="Cat" && "Dog" // t && t 返回 Dog
a6=false && "Cat" // f && t 返回 false
a7="Cat" && false // t && f 返回 false
o1=true || true // t || t 返回 true
o2=false || true // f || t 返回 true
o3=true || false // t || f 返回 true
o4=false || (3 == 4) // f || f 返回 false
o5="Cat" || "Dog" // t || t 返回 Cat
o6=false || "Cat" // f || t 返回 Cat
o7="Cat" || false // t || f 返回 Cat
n1=!true // !t 返回 false
n2=!false // !f 返回 true
n3=!"Cat" // !t 返回 false
6)字符串运算符
+(加号)除了比较运算符,可以用于字符串的还有连接符号+将两个字符串连结在一起,还可以使用+=这种简写方式。
数值型数据和字符串型数据相加会自动转换为字符串型如:2+“1”=“3”
7)特殊运算符
a、条件运算符
用于有三个操作数的Javascript运算符。其语法为:
条件?值1:值2
如果条件为真,则结果为值1,否则为值2。您可以在任何标准的运算符场合使用条件运算符。
b、(,)逗号运算符
求两个表达式的值并返回第二个表达式的值。其语法为:
变量=表达式1,表达式2
如:a=(5+6),(2*20)结果为a=40
c、Delete运算符
删除一个对象的属性或一个数组索引处的元素。
例如:delete myarray[5]语句删除myarray数组的第六个元素。
d、New运算符
生成一个新对象的实例。
e、Typeof运算符
返回表示操作数类型的字符串值。
f、Void运算符
不返回数值,通常用于javascript:协议中返回不带参数的URL。
g、this
该关键字用于引用当前对象,通常情况下,方法中的 this 指调用它的对象。
实现版本 Navigator 2.0
5-15日:http://www.ntc.com.cn/Javascript/Javascript_18636.htm
四、范例
下面是一个跑马灯效果的Javascript文档
test1.html
<html>
<head>
<script language="Javascript">
var msg="这是一个Javascript的跑马灯效果文档";
var interval=100;
var spacelen=120;
var space10=" ";
var seq=0;
function scroll() {
len=msg.length;
window.status=msg.substring(0,seq+1);
seq++;
if (seq>=len) {
seq=spacelen;
window.setTimeout("scroll2();",interval);
}
else
window.setTimeout("scroll();",interval);
}
function scroll2() {
var out="";
for (i=1;i<=spacelen/space10.length;i++) out +=
space10;
out=out+msg;
len=out.length;
window.status=out.substring(seq,len);
seq++;
if (seq>=len){seq=0;};
window.setTimeout("scroll2();",interval);
}
scroll();
</script>
</head>
<body>
</body>
</html>
5-16日:http://www.ntc.com.cn/Javascript/Javascript_18637.htm
第三课
Javascript的程序构成
Javascript脚本语言的基本构成是由控制语句、函数、对象、方法、属性等来实现编程。
一、程序控制流
在任何一种语言中,程序控制流是必须的,它可以使程序减小混乱,使之顺利按一定的方式执行。下面是Javascript常用的程序控制流结构及语句。
1、If条件语句
基本格式:
if (表达式)
代码段1;
...
else
代码段2;
...
功能:
若表达式为真执行代码段1,否则执行代码段2。
说明:
If else语句是Javascript中最基本的控制语句,通过它可以改变语句的执行顺序。表达式中必须使用关系语句,来实现判断,它作为一个布尔值来估算。它将0和非0的数分别转化化False和True。若在If后面的语句有多行,则必须使用花括号括起来。
If语句的嵌套,
if (布尔值) {
语句1
};
else {
if (布尔值) {语句3};
}
}
在这种情况下,每一级的布尔值都会被计算,若为真,则执行相应的语句,否则执行else后面的语句。
2、For语句
基本格式:
for (初始化;条件;增量)
代码段;
功能:
实现条件循环,当条件成立时,执行代码段,否则跳出循环。
说明:
初始化参数:告诉循环的开始位置,必须赋予变量的初值;
条件:用于判断循环停止时的条件,若条件满足,则执行循环体,否则跳出。
增量:主要定义循环控制变量在每次循环时按什么方式变化。
三个主要语句之间,必须使用逗号分离。
3、While语句
基本格式:
While (条件)
代码段;
该语句和For语句一样,当条件为真时,执行代码段,否则退出循环。
两个语句都是循环语句,使用For语句在处理相关数字时更易看懂,而While在处理循环时对复杂的语句效果更特别。
4、break和continue
与C++语言一样,使用Break使循环从For或者While中跳出来,continue则跳过循环的剩余代码段,直接进入下一次循环。
二、函数
函数为程序人员提供了一个非常方便的功能,通常在设计一个复杂的程序时,总是根据所要完成的功能,把程序划分成一些相对独立的部分,每部分编写一个函数。从而使每个部分充分独立,任务单一,程序清晰,易懂,易读,易维护。Javscript可以封装那些在程序中可能要多次用到的模块。并可以作为事件驱动的结果而调用的程序。从而实现一个函数和一个事件驱动相关联,这是与其他语言不一样的地方。
1、Javascript函数定义
Function 函数名 (参数,变元) {
函数体;
Return 表达式;
}
说明:
当调用函数时,所有变量或字面量均可做为变元传递。
函数由关键字Function定义。
函数名:自己定义的函数的名字。
参数表:是传递给函数使用操作的数,可以是常量,变量或者表达式。
可以通过函数名来调用一个函数。
必须使用Return将值返回。
函数名对大小写是敏感的。
2、函数中的形式参数
在函数的定义中,我们看到函数名后有参数表。这些参数可以是一个或者几个。在Javascript中可以使用arguments.length来检查参数的个数。
例如:
function function_Name (exp1,exp2,exp3,exp4) {
Number=function_Name.arguments.length;
if (Number>1)
document.write(exp2);
if (Number>2)
document.write(exp3);
if(Number>3)
document.write(exp4);
}
function_Name ("exp1","exp2","exp3","exp4")
三、事件驱动及事件处理
1、基本概念
Javascript是基于对象(object-based)的语言,这与Java不同Java是面向对象的语言。而基于对象的基本特征,就是采用事件驱动(event-driven)。通常鼠标或热键的动作,我们称为事件(event),而由鼠标或热键引发的一连串程序的动作,我们称为事件驱动(event-driver)。而对事件进行处理的程序或函数,我们称之为事件处理程序(event handler)。
2、事件处理程序
在Javascript中对象事件的处理通常由函数来完成。其基本格式和函数全部一样。可以将前面介绍的函数作为事件处理程序。
function 事件处理名 (参数表) {
事件处理代码段;
...
}
3、事件驱动
Javascript中的事件驱动是由鼠标或热键的动作引发的。主要有以下几种事件
(1) onClick (单击事件)
当用户单击鼠标按钮的时,产生onClick事件,同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生:
button (按钮事件)
checkbox (复选框)
radio (单选框)
reset buttons (复位按钮)
submit buttons (提交按钮)
例如可以通过以下的按钮,激活change()文件。
<form>
<input type="button" value="" onclick="change()">
</form>
在onclick等号后面可以使用自己编写的函数作为事件处理程序,也可以使用Javascript中内部的函数,还可以直接使用Javascript代码。如
<form>
<input type="button" value="" onclick="alert(这是个onclick的例子)">
</form>
(2) onChange (改变事件)
a、当使用text或textarea元素输入字符值改变时引发该事件。
b、在Select表格项中的一个选项状态发生改变后引发该事件。
如
<form>
<input type="text" name="test" value="test" onchange="alert(this.test)">
</form>
(3) onSelect (选中事件)
当text或Textarea中的文字被选择加亮时引发该事件。
(4) onFocus (获得焦点事件)
当用户单击text或textarea以及select对象时,产生该事件,此时该对象成为前台对象。
(5) onBlur (失去焦点事件)
当text、textarea、select失去焦点,而退到后台时,引发该事件,它与onFocus是一个对应的关系。
(6) onLoad(载入事件)
当文档载入时引发该事件,onload的一个作用就是在首次载入一个文档的时候检测cookie的值,并用一个变量为其赋值。使它可以被源代码使用。
(7) onUnload(卸载事件)
当WEB页面退出时引发onunload并可更新cookie的值。
例子一:
此例当载入HTML文档的时候调用loadform函数,退出此文档的时候调用unloadform,确认后方可退出。
test.html
<html>
<head>
<script language="Javascript">
<!--
function loadform() {
alert("这是个加载的例子")
}
function unloadform() {
alert("这是个卸载的例子")
}
-->
</script>
</head>
<body onload="loadform()" onunload="unloadform()">
</body>
</html>
例子二:
这是个获取浏览器版本号的程序。
<html>
<head>
<script language="JavaScript"><!--
// -->
function makeArray(n){
this.length=n
return this
}
function hexfromdec(num) {
hex=new makeArray(1);
var hexstring="";
var shifthex=16;
var temp1=num;
for(x=1; x>=0; x--) {
hex[x]=Math.round(temp1/shifthex - .5);
hex[x-1]=temp1 - hex[x] * shifthex;
temp1=hex[x-1];
shifthex /= 16;
}
for (x=1; x>=0; x--) { hexstring+=getletter(hex[x]); }
return (hexstring);
}
function getletter(num) {
if (num < 10) { return num; }
else {
if (num == 10) { return "A" }
if (num == 11) { return "B" }
if (num == 12) { return "C" }
if (num == 13) { return "D" }
if (num == 14) { return "E" }
if (num == 15) { return "F" }
}
}
function rainbow(text){
var color_d1;
var allstring="";
for(i=0;i<text.length;i=i+2){
color_d1=255*Math.sin(i/(text.length/3));
color_h1=hexfromdec(color_d1);
allstring+="<FONT COLOR="+color_h1+"ff"+color_h1+">"+text.substring(i,i+2)+"</FONT>";
}
return allstring;
}
function sizefont(text){
var color_d1;
var allstring="";
var flag=0;
for(i=0,j=0;i<text.length;i=i+1) {
if (flag==0) {
j++;
if (j>=7) {
flag=1;}}
if (flag==1) {
j=j-1;
if (j<=0) {
flag=0; } }
allstring+="<FONT SIZE="+ j + ">" + text.substring(i,i+1) + "</FONT>";
}
return allstring;
}
document.write("<font size=8><CENTER>")
document.write("<BR><BR>")
document.write( sizefont("这是一个获取WEB浏览器的程序"))
document.write("</CENTER></font>")
document.write("浏览器名称: "+navigator.appName+"<br>");
document.write("版本号: "+navigator.appVersion+"<br>");
document.write("代码名字: "+navigator.appCodeName+"<br>");
document.write("用户代理标识: "+navigator.userAgent);
</script>
<body>
</body>
</html>
5-17日、5-18日
http://www.ntc.com.cn/Javascript/Javascript_18638.htm
http://science.nyist.net/frees/js/t_5.php
第四课
概述:
Javascript是基于对象的语言,而不是面向对象。因为它没有提供抽象、继承、重载等许多面向对象语言的功能。而是把其他语言创建的复杂的对象统一起来,从而形成一个非常强大的对象系统。
虽然Javascript语言是一门基于对象的语言,它还是具有一些面向对象的基本特征。它可以根据需要,建立自己的对象,从而扩大了Javascript的应用范围,增强编写功能强大的WEB文档。
一、对象的基本知识
Javacript中的对象是由属性(properties)和方法(methods)两个基本的元素组成。
属性是一个值或者一组值,(以数组或对象的形式),是对象的成员。
方法是就是一个函数,是对象的成员。
对象有三种:
a、Javascript内部对象
b、由浏览器环境提供
c、创建的新对象
当把某个元素作为对象时,可以看他的属性和方法。例如,把一个人作为对象时,他的身高、体重、年龄就是他的属性,而跑、跳、走则属于方法。如果把一本书作为一个对象,他的页数、当前页就是属性,而向后翻页、向前翻页就是方法。
Javascript处理的每一个对象都属于一个类,类里边定义了组成对象的数据,属性,方法(类里的函数)。可以把字符串,整数等数据类型看作是一个对象。当你定义一个变量的时候就建立了一个对象的实例。使用New来创建对象的实例。New运算符用来调出对象的数据结构(对象的属性,方法)。这是一种创建对象实例的方法,同时还对对象实例初始化。有一些对象(如Date)拥有多种数据结构,当创建的时候使用何种数据结构,就取决于你传的数据参数。如Date创建实例的时候,如果你传了Year,就会根据Year建立对象实例。
Javascript包含很多预定义对象,一些是可以用来表示不同的数据类型(如数字和字符串对象),而另一些是在网页中定义的与HTML标记密切相关的对象(如超链接和图像对象)
核心对象(core):在Javascript中可供使用的最基本的数据类型,被称为核心对象。这些对象有:
Array:数组对象
Boolen:布尔对象
Date:日期对象
Number:数字对象,可以是整数或浮点数
String:字符串对象,可以是单引号‘’或双引号“”括起来的任意字符串
对于这些对象,都可以使用New操作符来建立相应的对象实例,也可以隐含地声明/创建Boolean、Number、String这几个对象。如:
var found=false;
var max=5.9;
var name="emma";//等价于 var name=new String("emma")
当页面被下载到客户端时,浏览器会建立几个对象来存储页面信息和页面内容的对象。这些对象构成了一个树状的结构,在这棵树的顶层对象是window对象。window对象有以下属性:
location:页面的地址(URL)信息。
history:包括了当前打开的这个浏览器,所访问过的URL列表。
frames:如果页面使用了框架(frame)的话,这个属性包含了框架的版面布局信息。以及每一个框架对应的窗口(window)对象。
docment:包含了页面的内容信息。
screen:描述屏幕的尺寸和颜色(仅限于Netscap4.0)
同时还会建立一个对象:navigator,这个对象包含浏览器的类型、版本、安装的插件等信息。
可以使用英文的句号来引用上边的对象以及对象的属性,例如,要获得当前页面的地址(URL)信息,我们可以这样使用:
var url=window.location.href
Javascript提供了一个方便的功能,就是在建立window和navigator对象的时候将window对象的docment、location、history属性创建为高层对象,所以我们可以简写,如上例可以简写为:var url=location.href;
下面介绍一下Javascript为浏览器提供的对象
window对象
常用方法如下
alert():显示一个消息框,只有一个OK确认按钮。
confirm():显示一个对话框,带有“确认”和“取消”按钮。
prompt():显示一个可以让用户输入信息的对话框。
alert()方法,可以将这个函数放在代码中,让它显示出所要调试的变量或对象的值,在调试代码时,跟踪错误非常有用。
另一个常用的方法:
settimeout():让Javascript隔一段时间执行一段代码。代码的执行遵循事件句柄中的规则,也就是说,在这个函数中,每隔一段时间就会执行几条 JavaScript 代码 (每条代码使用“;”隔开) 或者执行调用的函数,时间参数的单位是毫秒,格式如下:
setTimeout("代码1;代码2;",时间参数)
setTimeout("count++; alert('Hello world!');", 500);
setTimeout返回的值是一个唯一值。如果调用了多个setTimeout,要用clearTimeout结束某个setTimeout可以使用这个返回值来确定结束的是哪个。如
var id=setTimeout("myFunction(a,b);",200);
代码段;
if (error);
clearTimeout(id);
小贴士:setTimeout()方法并不会让浏览器暂停执行此方法后的程序代码,只是其他代码只执行一次,而setTimeout()方法则是隔一段时间就执行一次。
在Netscape中使用setInterval()方法来实现重复执行一段代码或函数,使用clearInterval()方法中止前一个方法的执行。使用方法参考setTimeout()方法。
frame对象
每一个frame对象对应一个窗口,每个frame都是由一个window对象来指定的,当有一个页面使用了frameset的时候,主窗口(父窗口)window对象就包含了一个名为frames的数组,这个数组的每一个元素对应一个frame,而每一个frame都对应一个Window对象。而这些frame也可以通过frameset拥有自己的子窗口,这样的话,这个frame也拥有了frames数组。在每个页面上可以使用window.parent来指定当前窗口的父窗口,还可以使用window.parent.parent来指定当前窗口的父窗口的父窗口。使用window.top可以直接指定所有窗口的最顶层窗口。可以在当前的frame中调用其他frame的函数和数据。
document对象
此对象包含了与页面相关的属性。
bgcolor:页面的背景色。
fgcolor:页面的前景色,即文本的颜色。
linkcolor:链接的颜色。
lastmodified:最后编辑此页面的时间。
images:图片(img)对象组成的数组。数组中的每一个元素对应页面中出现的每一个img标记,数组元素的对应顺序是按img标记出现的顺序。
forms:表单(form)对象组成的数组。数组中的每一个元素对应页面中出现的每一个form标记,数组元素的对应顺序是按form标记出现的顺序。
links:超链接(link)对象组成的数组。数组中的每一个元素对应页面中出现的每一个a标记,数组元素的对应顺序是近a标记出现的顺序。
images、forms、links属性是数组,所以对他们的访问可以通过以下方式,如:
var a=document.images[2];//找到页面中的第三个img,因为数组下标是以0开始的。
还有一个更方便直观的方法。
<img name="aa" src="/image/1.gif" />
var myimg=document.images["aa"];
var myimg=document.aa;//此句效果和上一句是一样的。
小贴士:这个方法,需要注意,图片的名字不能取的重复。而且对图片命名这个引用方法,在Netscape3.0中会出错,是Netscape3.0的一个BUG。
image对象
关于一个图片的信息,可以保存到一个叫image的对象中,此对象包含了图片路径(URL),图片当前的下载状态,图片的宽高等信息。通常情况下,此对象会指向保存在images数组中存在的图像。使用image对象可以处理一些不在网页中的图片对象。使用image对象的src属性,就可以把图片下载到客户端。需要使用的时候直接显示,不会有延迟。如
var myimg=new image();
myimg.src="/image/1.gif";//此时1.gif将被下载到客户端
如果客户端的缓存(cache)中有这张图片,将被直接覆盖。
link对象
5-23日:http://science.nyist.net/frees/js/t_5.php
如果想知道超链接的值,可以使用href属性。
如果想知道超链接的目标窗口或者目标frame,可以使用target属性。
Link对象还包括一个Imagemap对象。它对应的是HTML中map标签。
form对象
Form对象自身用的并不多,但是,它包含了组成表单的元素对象。
这此对象包括:
文本框对象(text)
密码框(password)
单选钮(redio button)
多选钮(check box)
多行文本域(text area)
隐藏域(hidden field)
选择/下拉列表(select list option)
提交按钮(submit button)
重置按钮(reset button)。
这些对象都有共同的属性:name和value。
value属性是用户输入的值,或者HTML文件给定的值。
在使用Form中的对象之前,必须要先引用这个Form对象,因为Form是它们的父对象,而Document是Form对象的父对象。这层层的引用是很重要的。
document.forms[0];//指向页面中第一个表单对象。
document.forms["order"];//指向页面中名为order的表单对象(即<form name="order">的表单)。
document.order;//和上一行同样的功能。
可以使用form对象的elements数组访问表单中的每一个input对象。同样也可以使用表单中各个元素对象的名字来访问这些对象。input对象的名字也是通过,在Input标签中定义Name来引用<input name="address">。
document.forms[0].elements[3];//指向页面中第一个表单的第三个input元素。
document.forms["order"].elements["address"];//指向页面中名为Order的表单中名为address的对象。
document.order.address;//和上一行代码功能一样。
通常我们使用表单对象来检查用户的输入是否正确,或者用户提交的数据是否正确。这种检查是数据被提交到服务器之前进行的。这样做可以节省数据在客户端和服务器端传送的时间。
作为数组的对象
在 Javascript 中,对象和数组几乎是以相同的方式处理的。对象和数组均可以被赋予任意值,实际上数组只是一种特殊的对象。数组和对象的区别在于数组有一个“奇妙的” length 属性,而对象没有。这意味着可以给数组的一个元素赋予比其他元素更大的值。例如,myArray[100] = "hello",然后 length 属性将自动地被更新为 101(新长度)。同样,如果修改数组的 length 属性,将删除不再是数组部分的元素。
Javascript中的对象均支持"expando"属性或那些随时添加和删除的属性。这些属性可以有包含数字的任意名称。
如果属性的名称是简单的标识符,可以在对象名称后面加句点。如:
var myobj=new object();
//添加两个expando属性name和age
myobj.name="emma";
myobj.age=20;
如果属性的名称不是简单的标识符,或者在写脚本的时候不知道,可以在方括号中使用任意表达式来索引属性,在Javascript中所有expando的属性的名称在被添加到对象之前都被转换为字符串。如:
var myobj=new object();
//添加两个无法写在objcet.property语法中的expando属性。
//第一个属性包含无效字符(空格),所以必须写在方括号里。
myobj.["not a valid identifier"]="this is the property value";
//第二个expando名称是数字,所以也必须写在方括号里。
myobj.[100]="100";
传统的作法是赋给数组元素以0开始的数字索引,这些数组元素与length属性相交互。然而,由于所有数组也是对象,也支持expando属性。请注意,虽然如此,expando属性并不以任何方式与length属性想交互。如:
//三个元素的数组
var myarray=new array(3);
myarray[0]="hello";
myarray[1]=30;
myarray[2]=new date(2000,1,1);
//显示数组的长度:3
window.alert(myarray.length);
//添加某些expando属性
myarray.expando="Javascrpt";
myarray.["another expando"]="another expando";
//显示数组的长度仍是:3
window.alert(myarray.length);
虽然Javascript并不直接支持多维数组,但是,可以在数组元素中存储任意类型的数据(包含其他数组)。所以通过在一个数组的元素中存储其他数组可以得到多维数组。例如,下面的代码为最大是5的数字建立了乘法表
//若是更大的表请改变本数
var iMaxNum=5;
//循环计数
var i,j;
//新数组。由于数组从0开始计数而不是1,所以数组大小为iMaxNum+1
var MultiplicationTable=new array(iMaxNum+1);
//为每个主要的数做循环(表中的每一行)
for (i=1;i<=iMaxNum;i++)
{
//生成表中的列
MultiplicationTable=new array(iMaxNum+1);
//将乘法结果存在行中
for (j=1;j<=iMaxNum;j++)
{
MultiplicationTable[i][j]=i*j;
}
}
window.alert(Multiplication[1][2]);//显示2
window.alert(Multiplication[3][5]);//显示15
window.alert(Multiplication[2][4]);//显示8
http://www.ntc.com.cn/Javascript/Javascript_18638.htm
对象被引用之前,必须存在,否则引用将毫无意义,而出现错误信息。
有关对象的操作语句
Javascript不是纯面向对象的语言,而是基于对象,在Javascript中提供了几个用于操作对象的语句和关键字及运算符
1、For...in
格式:
for (对象属性名 in 已知对象名)
功能:
对一个已知对象的所有属性进行操作的循环控制,将一个已知对象的所有属性反复置给一个变量,而不必使用计数器。
下列函数是显示数组中的内容:
function showDate(object)
for (var x=0;x<30;x++)
document.write(object[x]);
使用这个方法,如果指定的数组的下标值x超出范围,就会发生错误。而使用for in则不需要知道对象属性的个数。
function showDate(object)
for(var x in object)
document.write(object[x]);
使用该函数时,在循环休中,For自动的把属性值取出来,直到最后为止。
2、with语句
使用该语句的意思是,在该语句体内,任何对变量的引用,都被认为是这个对象的属性,以节省一些代码。
with object{
...
}
所有在这个语句体内的语句,都是在object对象的作用域的。
3、this关键字
this是对当前的引用。this是将对象指定为当前对象的语句。
4、new运算符
使用new运算符可以创建一个新的对象,其创建对象的格式如下
Newobject=new Object(parameters table);
Newobject:创建的新对象
new:Javascript的命令语句
Object:Javascript中已经存在的对象
parameters table:参数表
如创建一个日期的新对象
newdate=new date();
birthday=new date(December 12.1998);
建立以后,就可以使用newdate、birthday作为一个新的日期对象了。
对象的属性(propertie):
在Javascript中使用英文句号(.)来访问对象的属性值。
通常情况下,你可以直接改变一个对象的属性,如改变document对象的bgcolor值。然而有一些属性是不能直接修改的,如字符串对象string的length属性,如果使用了concat()方法合并了两个字符串,length属性会自动改变,这是系统自动实现的,不是人为控制的。
对象属性的引用
对象属性的引用可由下列三种方式之一实现:
1)、使用点(.)运算符
university.Name="河南"
university.City="郑州市"
university.Date="1999"
其中university是一个已经存在的对象,Name、City、Date是它的三个属性,并通过操作对其赋值。
2)、通过对象的下标实现引用
university[0]="河南"
university[1]="郑州市"
university[2]="1999"
通过数组形式的访问属性,可以使用循环变量获取其值。
function showunievsity(object)
for (var j in this)
document.write(this[j]);
或者
function showunievsity(object)
for (var j=0;j<2;j++)
document.write(object[j]);
3)、通过字符串形式实现
university["Name"]="河南"
university["City"]="郑州市"
university["Date"]="1999"
对象方法的引用
在Javascript中对象方法的引用非常简单。
ObjectName.methods()
实际上methods()=FunctionName方法实质上是一个函数。如引用university对象中的showmy()方法,则可使用:
document.write(university.showmy());
或者
document.write(university)
如引用math内部对象中的cos()方法,则
with(math)
document.write(cos(35));
document.write(cos(80));
若不使用with则相对复杂一些
document.write(math.cos(35));
document.write(math.cos(80));
常用对象的属性和方法
Javascript为我们提供了一些非常有用的内部对象和方法。用户不需要使用脚本来实现这些功能,这正是基于对象编程的真正目地。
在Javascript中提供了string(字符串)、math(数值计算)、date(日期)三种对象和一些相关的方法。为编程人员快速开发强大的脚本程序提供了便利。
1、常用内部对象
在Javascript中对象的属性,方法的引用有两种情况
一种是静态对象,引用对象的属性、方法时不需为它建立实例。
一种是动态对象,引用对象的属性、方法时必须为它建立实例。
对于Javascript内部对象的引用,是紧紧围绕着它的属性与方法进行的。因而明确对象的动、静性对于掌握和理解Javascript内部对象是非常关键的。
1)、串对象
string对象:内部静态性。
访问properties和methods时,可使用(.)点运算符实现。
基本格式:objectName.pro/methods
a、串对象的属性
串对象的属性只有一个即length。它表明了字符串的字符个数,包括所有符号。
如:
mytest="this my test";
mytestlength=mytest.length;//返回的值是12
b、串对象的方法
string对象的方法有19种。主要方法如下:
锚点anchor():使用锚点anchor就像使用Html中<a name="name">一样。
访问格式:
string.anchor(anchorname);
有关字符显示的控制方法
big():字体显示
Itailcs():斜体显示
blod():粗体显示
blink():闪烁显示
small():小体字显示
fixed():固定高亮字显示
fontsize(size):控制字体大小等
字体颜色方法:
fontcolor(color):改变字体颜色方法
字符串大小写转换
toLowerCase():小写转换
toUpperCase():大写转换
格式:
string=stringValue.toUpperCase()
string=stringValue.toLowerCase()
字符搜索
indexOf[charactor,fromIndex]:
从指定fromIndex位置开始搜索charactor第一次出现的位置。
substring(start,end):
从start开始到end的字符全部返回
2)、算术函数的math对象
math对象:静态性
功能:提供除加、减、乘、除以外的一些自述运算。如对数,平方根等。
a、math对象的属性
math中提供了6个属性,是数学中经常用到的。
常数:E
以10为底数的自然对数:LN10
以2为底数的自然对数:LN2
3.14159的:PI
1/2的平方根:SQRT1-2
2的平方根:SQRT2
b、math对象的主要方法
abs():绝对值
sin():正弦值
cos():余弦值
tan():正切值
asin():反正弦值
acos():反余弦值
atan():反正切值
round():四舍五入
sqrt():平方根
Pow(base,exponent):基于几次方的值
5-24日:http://www.ntc.com.cn/Javascript/Javascript_18638.htm
3)、Date日期及时间对象
静动性:动态性,即必须使用New运算符建立一个新对象
功能:提供一个有关日期和时间的对象
Date对象没有提供属性,只具有获取和设置时间的方法
a、获取日期、时间的方法
getYear():返回年数
getMonth():返回月份
getDate():返回当日号数
getDay():返回星期几,0是星期日,1是星期一.....
getHours():返回小时数
getMintes():返回分
getSeconds():返回秒
getTime():返回毫秒
toGMTString():用GMT格式返回当前时间,(Sun,12 Feb 1999 14:19:22 GMT)。
toLocaleString:用locale格式返回当前时间,(03/11/99 14:19:22)。
parse(date):将普通date字符串转换成豪秒形式,从而给setTime()做参数。
b、设置日期、时间的方法
setYear():设置年份
setMonth():设置月份
setDate():设置当日号数
setDay():设置星期几
setYear():设置年份
setYear():设置年份
toGMTString() 用GMT格式返回当前时间. (Sun,12 Feb 1999 14:19:22 GMT)
toLocaleString 用locale格式返回当前时间. (03/11/99 14:19:22)
parse(date) 将普通date字符串转换成豪秒形式,从而给setTime()做参数.
2、Javascript中的系统函数
Javascript中的系统函数称为内部方法。它提供了与对象无关的系统函数,使用这些函数不需要建立实例,可直接用。
1)、返回字符串表达式中的值
方法名:eval(字符串表达式),例:
test=eval("5+2+5/2");//返回值是9.5
2)、返回字符串的ASCI码
方法名:unescape(string);
相对应方法是:
3)、返回字符串的编码
方法名:escape(character);
4)、返回实数
方法名:parseFloat(floustring);
5)、返回不同进制的数
parseint(numberstring,rad.x)
其中rad.x是数的进制,numberstring是字符串数。
http://www.ntc.com.cn/Javascript/Javascript_18639.htm
第五课在Javascript中建立新对象
概述:
使用Javascript可以建立新对象,首先,定义一个对象,然后为这个对象建立实例,这个实例就是一个新对象,它具有对象的基本特征。
一、对象的定义
基本格式:
function objectname (parameters)
this.prop1=prop1;
this.prop2=prop2;
...
this.meth1=functionName1;
this.meth2=functionName2;
...
在一个对象的定义中,可以指明它的属性和方法,通过属性和方法构成了一个对象的实例,如以下是一个university对象的定义:
function university(name,city,creatDate,URL)
this.name=name;//指定一个单位的名称
this.city=city;//指定一个单位的城市
this.creatDate=creatDate;//指定一个单位的建立时间
this.URL=URL;//指定一个单位的链接
二、建立对象的实例
格式:newobject=new object(parameters);
newobject:新对象。
object:已经定义好的对象。
一旦对象定义完毕,就可以为该对象建立实例了。如上例
new university1=new university("emma","洛阳","January 05,1997 12:00:00","http://www.weila.cn");
new university2=new university("煤炭","郑州","January 07,1997 12:00:00","http://www.meitan.com");
三、对象方法的使用
在对象中除了属性外,有时还需要方法。在对象的定义中,有this.meth=functionName语句,这就是为对象定义的方法。对质对象的方法就是一个函数functionname,通过函数来实现方法的控制。例如在university里增加一个方法,该方法是显示自身,并返回相应的字符串:
function university(name,city,createDate,URL) {
this.name=name;
this.city=city;
this.createDate=new Date("2006-1-1");
this.URL=URL;
this.showuniversity=showuniversity;
}
function showuniversity(){
for (var prop in this)
alert(prop+=':'+this[prop]);
}
var university1=new university("emma","郑州","2006-1-1","http://www.weila.cn");
university1.showuniversity();
四、Javascript中的数组
使用New创建数组,Javascript并没有提供明显的数组类型,可以通过Function定义一个数组,使用New操作符来创建一个带下标的数组对象。从而可以实现任何数据类型的存储。
a、定义对象的数组
function arrayname(size) {
for (var x=1;x<=size;x++)
this[x]=0;
this.length=size;
return this;
}
其中arrayname是这个数组的名字,由于数组的下标是从1到size,所以Javascript的对象功能更为强大。
b、创建这个对象的实例
var array=new arrayname(10);
array[1]="name";
array[2]="email";
array[3]="city";
array[4]="address";
for (var x in array )
{
document.write(array[x]+"<br />");
}
一旦数组被赋予了值,就可以在程序设计中直接引用了。
创建多维数组
function creatmarray(row,col){
var indx=0;
this.length=(row*10+col)
for (var x=1;x<=row ;x++ )
{
for (var y=1;y<=col ;y++ )
{
indx=(x*10+y);
this[indx]="5";
}
}
}
marray=new creatmarray(3,3)
for (var x=1;x<=3 ;x++ )
{
for (var y=1;y<=3 ;y++ )
{
document.write(marray[x*10+y]+"<br />")
}
}
可以通过
marray[11],marray[12],marray[13],marray[21],marray[22],marray[23]...来引用。
内部数组
在Javascript中为了方便对内部对象的操作,可以使用以下数组实现对内部对象的访问。
forms:窗体,当页面上有多个表单时,建立此数组。
frames:框架,不页面上多个框架时,建立此数组。
elements:表单元素,包含某个表单的所有元素。
links:链接,包含页面中所有使用<a href="URL">建立的链接,可以按下标,顺序访问。
anchors:锚点,包含页面中所有使用<a neme="anchorname">建立的锚点,可以按下标,顺序访问。
5-25日:http://www.ntc.com.cn/Javascript/Javascript_18640.htm
第六课Javascript对象系统的使用
概述:
使用Javascript的浏览器内部对象系统,可以实现与HTML的交互。它的作用是将相关元素包装起来供程序设计人员使用。
一、浏览器对象层次及主要作用
除了Document对象,Navigator浏览器中还提供了窗口(windows)对象,历史(history)对象,位置(location)对象。
浏览器对象navigator:提供和浏览器相关的信息。
窗口对象windows:处于对象层次的顶端,提供了处理navigator窗口的属性和方法。
位置对象location:提供了与当前打开的URL一起工作的方法和属性,它是一个静态对象。
历史对象history:提供了与历史清单有关的信息。
文档对象document:包含了与文档元素一起工作的对象,它将这些元素封装起来供程序设计人员使用。
二、文档对象的功能及其作用
Document对象的核心:
links:链接对象。
anchors:锚对象。
form:表单对象。
method:方法。
prop:对象。
Document对象的主要作用是将基本的元素包装起来,提供给编程人员使用,从另一个角度来看,Document对象中又是由属性和方法组成的。
1、Document对象的三个核心对象
1)、anchor锚对象
包含页面中<a name="anchorname">定义的所有的锚点对象。
2)、links链接对象
包含页面中<a href="url">定义的所有的链接对象。
3)、form表单对象
表单对象是文档对象的一个元素,这含有多种格式的对象存储信息。使用它可以在Javascrpt脚本中编写程序进行文字输入,动态改变文档的行为。通过document.forms[]数组来使得同一个页面上可以有多个相同表单。使用forms[]比使用表单名字要方便的多(教程原文,个人认为用名字比较好)。
举例:
<Html>
<head>
</head>
<body>
<form >
<input type=text onChange="document.my.elements[0].value=this.value;" >
</form>
<form NAME="my">
<input type=text onChange="document.forms[0].elements[0].value=this.value;">
</form>
</body>
</html>
其中用了onChange事件(表单内容发生改变时激活),第一个使用了表单的名字my,第二个使用的是forms[]数组,效果是一样的。
2、文档对象的attribute属性
Document中的attribute属性,主要用于在引用href标识时,控制着有关颜色的格式和有关文档标题、文档原文件的URL、文档的最后更新日期。主要含义如下:
1)、链接颜色:alinkcolor
指定选取一个链接时的颜色
2)、链接颜色:linkcolor
用户访问过一个链接后的颜色
3)、浏览过的颜色:vlinkcolor
一个链接被浏览器存储为访问过的链接颜色
4)、背景颜色:bgcolor
文档背景的颜色
5)、前景颜色:fgcolor
文档的文本颜色
3、文档的基本元素
1)、表单属性
表单属性length,表示页面中的表单数量。通过document.forms.length来得到文档中的表单数量。
2)、锚属性
锚属性length,表示页面中的锚数量。通过document.anchors.length来得到文档中的锚数量。
3)、链接属性
链接属性length,表示页面中的链接数量。通过document.links.length来得到文档中的链接数量。
http://www.ntc.com.cn/Javascript/Javascript_18641.htm
第七课
Javascript窗口及输入输出
Javascript是基于对象的脚本语言,它的输入输出也是通过对象来实现的,输入是由window窗口对象来完成,输出是由document文档对象来实现。
一、窗口及输入输出
首先看一个例子
<html>
<head>
<script language="javascript">
var test=window.prompt("请输入测试数据");
document.write(test+"Javascript输入输出测试");
</script>
</head>
<body>
</body>
</html>
其中window.prompt()就是一个窗口对象的方法,基本作用是,显示一个带确认,取消和输入框的提示框。
document.write()是一个文档对象的方法,它的基本功能是实现WEB页面的输出显示。
1、窗口对象
该对象包含许多有用的属性、方法、事件驱动程序。程序设计人员可以使用这些对象控制浏览器窗口显示的各个方面,如对话框、框架等,使用中应注意以下问题:
a、该对象对应于HTML文档中的<body>和<frameset>两种标识;
b、onload和onunload都是窗口对象的属性;
c、在Javascript中窗口对象可以直接引用
如:
window.alert("测试");//可以简写为以下语句
alert("测试");
2、窗口对象的事件驱动
窗口对象主要有装入WEB文档onload事件,和卸载文档onunload事件,主要用于文档载入或者卸载的时候开始和停止更新文档。
3、窗口对象的方法
窗口对象的方法主要用来提供信息,或者输入数据以及创建一个新窗口。
a、创建新窗口open()
使用window.open(参数表)方法来创建一个新窗口,其中参数表来提供新建窗口的主要特性和文档以及窗口的命名。
b、创建有OK按钮的对话框alert()
alert()方法用于建立一个带有OK按钮的对话框。
c、创建有OK和cancel按钮的对话框confirm()
confirm()方法用于建立一个带有OK和cancel按钮的对话框。
d、创建有输入框的对话框prompt()
prompt()方法用于建立一个带有信息输入框的对话框。基本格式如下:
prompt("提示信息",默认值)。
4、窗口对象中的属性
窗口对象中的属性,主要用来对浏览器中存在的各种窗口和框架引用。其主要属性有以下几个:
1)、frames文档中的框架数组:
frames框架属性是通过HTML的标签<frames>的顺序来引用的,它包含一个窗口中的全部框架数。frames本身就是一类窗口,它继承了窗口对象所有的属性和方法。
小贴士:注意区别frames和iframe。
2)、parent指明当前窗口的父窗口。
3)、defaultstatus默认状态,它的值显示在窗口的状态栏。
4)、status包含文档窗口中帧中的当前信息。
5)、top包括的是用以实现所有的下级窗口的窗口。
6)、window指的是当前窗口。
7)、self引用当前窗口。
5、输出流及文档对象
在Javascript文档对象中,提供了用于显示关闭,消除,打开HTML页面的输出流。
1)、创建新文档open()方法
使用document.open()方法创建一个新的窗口或在指定的命令窗口内打开文档。由于窗口对象是所加载的父对象,因而我们在调用它的属性和方法的时候不需要加入window对象。例如window.open()和open()是一样的。打开一个窗口的基本格式如下:
window.open("URL","窗口名字","窗口属性1,窗口属性2...")
属性参数说明如下:
toolbar:yes/no
建立或不建立标准工具条
location:yes/no
建立或不建立位置输入字段
directions:yes/no
建立或不建立标准目录按钮
status:yes/no
建立或不建立状态条
menubar:yes/no
建立或不建立菜单条
scrollbar:yes/no
建立或不建立滚动条
revisable:yes/no
能否改变窗口大小
width:yes/no/像素值
确定窗口的宽度
Height:yes/no/像素值
确定窗口的高度。
在使用open()方法的时候,要注意以下几个问题:
通常浏览器中,总有一个文档是打开的,所以不必为输出建立新文档。
在完成对WEB文档的写操作以后,要使用或调用close()方法实现输出流的关闭。
在使用open()方法的时候,可以为新文档指定一个有效的文档类型,有效的文档类型包括:text/html、text/gif、text/xim、text/plugin等。
2)、write()、writeln()输出显示
该方法主要用来实现在web页面上显示输出信息,在实际使用中需要注意
a、writeln()与write()相比唯一不同是前者输出了一个换行符。
b、为了正确显示输出信息,必须指明<pre></pre>标记,使之告诉编辑器。
c、输出的文档类型,可以由浏览器中的有效合法文本类型所确定。
3)、close()关闭文档流
在实现多个文档对象中,必须使用close()关闭一个对象后,再打开另一个文档对象。
4)、clear()清除文档内容
使用该方法清除已经打开的文档的内容。
二、简单的输入输出例子
在Javascript中可以非常方便的实现输入输出信息。并用户进行交互。
1、信息输入
通过使用Javascript中所提供的窗口对象的方法prompt()可以方便的实现信息的输入。基本格式如下:
window.prompt("提示信息",预定输入信息);
使用此方法,会弹出一个对话框,用户输入信息以后,返回输入值。
实际上prompt()是窗口对象的一个方法,因为缺省情况下,所用的对象就是window对象,所以window对象可以省略不写。
2、输出显示
比较常用的方法如下:
1)、document.write()和document.writeln()
这两种方法都可以实现将文本字符串直接输出到浏览器窗口的功能,两者唯一的区别是writeln会在文本之后自动输出一个回车符。
2)、window.alert()
它的主要用途是在输出时产生有关警告提示信息或者提示用户,一旦用户按"确定"后,方可继续执行其它脚本程序。
3、利用输入、输出方法实现交互
在Javascript中可以使用prompt()方法和write()方法实现与WEB页面用户的交互。例如:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<Script Language="JavaScript">
<!-- Hide From Other Browsers
document.write("<H1>有关交互的例子");
my=prompt("请输入数据:");
document.write(my+"</H1>");
document.close();
// Stop Hiding from Other Browsers-->
</Script>
</BODY>
</HTML>
脚本语言中可以输出包含HTML标签的代码,从而实现混合编程。
5-29日:http://www.ntc.com.cn/Javascript/Javascript_18642.htm
第八课
用Javascript脚本实现WEB页面信息交互
概述:要实现与页面信息的交互,必须掌握关于form对象和frame对象的知识。
一、表单基础知识
表单对象可以使设计人员能用窗口中的元素与客户机用户相交互。而用不着在之前进行数据输入,就可以动态改变WEB文档的行为。
1、什么是表单对象
表单(form):它是构成WEB页面的基本元素,可以使用forms[]数组来访问页面上的数组对象。
<form
name="表单名称"
target="提交窗口"
action="接收表单数据的程序的URL"
method="信息传送方式(get/post)"
enctype="窗体编码方式"
[onsubmit="Javascript代码"]></form>
2、表单对象的方法
表单对象只有一个方法submit(),该方法的主要功能是实现表单信息的提交。如提交一个表单可以使用如下格式:document.mytest.submit();//提交名为mytest的表单
3、表单对象的属性
表单对象的属性列举如下:
elements
name
action
target
encoding
method
除elements以外,其他几个反映了表单标识中相应属性的状态,通常是单个表单标识;而elements常常是多个表单元素值的数组,如:elements[0].mytest.elements[1];
4、访问表单对象
有两种方法:
1)、通过访问表单
在表单对象的属性中使用name指定表单名,就可以通过下列标识访问表单
document.mytest;指向文档中名为mytest的表单
2)、通过数组访问表单
除了用表单名来访问表单,还可以使用表单对象数组来访问表单。
小贴士:因为表单数组是浏览器环境提供的,而浏览器环境提供的数组下标是从0到n所以,表单数组的下标也是从0到n。依序访问文档中的数组:
document.forms[0];
document.forms[1];
...
document.forms[n];
5、引用表单的先决条件
表单在引用之前,已经定义。就是说,将定义表单放在引用之前。
二、表单中的基本元素
表单中的基本元素包括按钮、单选钮、复选钮、提交按钮、重置按钮、文本框...
在Javascript中要访问这些基本元素,必须通过对应特定的窗体元素的数组下标或者窗体元素名来实现,每一个元素主要是通过该元素的属性和方法来引用。
1、Text单行单列输入元素
功能:对Text标识中的元素实施控制
基本属性:
Name:设定提交信息时的信息名称,对应于HTML中的name;
Value:用以设定出现在窗口中对应HTML文档中的Value值;
defaultvalue:包括Text元素的默认值;
基本方法:
blur():将当前焦点移到后台;
select():加亮文字;
主要事件:
onFocus:Text获得焦点时,产生该事件;
onblur():失去焦点时,产生该事件;
onselect:文字被加亮显示后,产生该事件;
onchange:Text值被改变时,产生该事件;
2、textarea多行多列输入元素
功能:实施对textarea标识中的元素实施控制
基本属性:
name:设定提交信息时的名字;
Value:用以设定出现在窗口对应HTML文档中Value的信息;
DefaultValue:元素的默认值;
基本方法:
blur():失去输入焦点;
select():文字被加亮;
主要事件:
onblur():失去焦点,产生该事件;
onfocus():获得输入焦点,产生该事件;
onchange():文字值改变时,产生该事件;
onselect():文字加亮后,产生该事件;
3、Select元素
功能:实施对滚动选择对象的控制
基本属性:
name:设定提交信息时的信息名称,对应文档中select中的name;
length:对应文档中select中的length;
options:组成多个选项的数组;
selectIndex:该下标指明一个选项;
select每一个选项下都包含的属性:
Text:选项对应的文字;
selected:指明当前选项是否被选中;
Index:指明当前选项的位置;
defaultselected:默认选项;
基本事件:
onblur():当select失去焦点时,产生此事件;
onfocus():当select获得焦点时,产生此事件;
onchange():当select选项状态改变时,产生此事件;
4、Button按钮
功能:实施对Button按钮的控制
基本属性:
Name:设定提交信息时的名字,对应HTML中button的name;
Value:设定出现在表单中对应HTML文档元素的Value信息;
基本方法:
click():该方法类似于一个按下的按钮;
基本事件:
onclick():当单击Button按钮时,产生该事件;
5、checkbox复选框
功能:实施对复选框中的元素的控制;
基本属性:
name:设定提交信息时的信息名称;
Value:设定HTML文档中相应元素的Value值;
checked:该属性指明选择框的状态true/false;
defaultchecked:默认选中状态;
基本方法:
click():该方法使得框的某一项被选中;
基本事件:
onclick():当框被选中的时候,产生该事件;
6、radio单选按钮
功能:实施对一个具有单选功能的按钮的控制
基本属性:
name:设定提交信息时的信息名称,对应HTML中的radio的name;
value:设定HTML中对应元素的值;
length:单选按钮中的按钮数目;
defaultchecked:默认按钮;
checked:指明是否被选中;
index:选中按钮的位置;
基本方法:
chick():选定一个按钮;
基本事件:
onclick():单击按钮时,产生该事件;
7、hidden隐藏
功能:实施对一个不显示,能输入字符的区域的元素控制
基本属性:
name:设定提交信息时的名字;
Value:设定HTML中对应元素的值;
defaultvalue:默认值;
8、password口令
功能:实施对具有口令输入的元素的控制
基本属性:
name:设定提交信息时的名字;
value:设定HTML中对应元素的值;
defaultvalue:默认值;
基本方法:
select():加亮输入口令域;
blur():丢失输入焦点;
focus():获得Password输入焦点;
9、submit提交元素
功能:实施对一个提交功能按钮的控制;
基本属性:
name:设定提交按钮的名字;
value:设定HTML中对应元素的值;
基本方法
click()相当于按下submit按钮。
基本事件:
onclick()当按下该按钮时,产生该事件。
5月30日http://www.ntc.com.cn/Javascript/Javascript_18643.htm
第九课
Javascript控制框架
通过frames数组对象来实现对不同框架的访问。框架也是一种窗口,他继承了窗口对象所有的特征、属性和方法。
<HTML>
<HEAD>
</HEAD>
<Frameset Rows="20%,80%">
<frame src="test9_1.html">
<Frameset Cols="50%,50%">
<frame src="test9_2.html">
<frame src="test9_3.html">
</Frameset>
</Frameset>
</HTML>
以上HTML标识将屏幕分成三个框架。先将窗口分成以二行为单位的窗口,之后再按分成二个窗口。并在相应的框架中放入自己的HTML文档。
通过[Framset]告诉浏览器您要设置几个框架;rows这项参数告诉浏览器您想将视窗分割成几列;而cols这项参数是告诉浏览器您想将视窗分割成几行。
可以用很多组的<frameset...>标签将视窗分割得更复杂。
可以给每个frame一个"名字"(name)。frame的名字在JavaScript语法中的地位非常重要。
可以用<src>告诉浏览器您要载入哪一个HTML文件。
二、如何访问框架
在前面我们介绍过使用document.forms[]实现单一窗体中不同元素的访问。而要实现框架中多窗体的不同元素的访问,则必须使用window对象中的Frames属性。Frames属性同样也是一个数组,他在 父框架集中为每一个子框架设有一项。通过下标实现不同框架的访问:
parent.frames[Index1].docuement.forms[index2]
通过parent.frames.length确定窗口中窗体的数目。 除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访:
parent.framesName.decument.formNames.elementName.(m/p)
笔记完成
相关推荐
JavaScript学习笔记JavaScript学习笔记
个人Javascript学习笔记 精华版 个人Javascript学习笔记 精华版 个人Javascript学习笔记 精华版
JavaScript学习笔记,javascript基础知识,基础语法整理.pdf
javascript 学习笔记
挺好的javascript 学习笔记javascript 学习笔记javascript 学习笔记javascript 学习笔记javascript 学习笔记
javascript学习笔记
JavaScript学习笔记.pdf
javascript学习笔记讲解版参考.pdf
javaScript学习笔记总结.docx
JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和...
JavaScript学习笔记归纳.pdf
javascript学习笔记发放1,以后陆续发布。