JavaScript学习
在HTML里嵌入javascript
可以通过<script>标签把javascript代码嵌入到HTML文件里。语法如下:
<script> //代表脚本语言的开始。
</script> //代表脚本语言的结束。
<script language=”javascript” type=”text/javascript”>
//javascript 代码
</script>
Language属性指出编写脚本所使用的语言。
Type 属性指出脚本的类型。
还有src属性用于指出脚本文件名(.js)。
这里要指出的是除了事件响应程序以外,任何javascript代码必须要写在<script>与</script>之间。
可以在HTML以下的4个部分中使用javascript:
<body>与</body>:此时,脚本会在浏览器load页面时被执行。
<head>与</head>:此时,脚本不会被浏览器所执行。但,可以被其他脚本所引用。
在HTML标签内部的javascript:称为“事件响应程序“,并允许脚本处理HTML元素。
.js文件:可以把javascript写在一个独立的javascript文件中,然后在由src属性引用它。这是标准的写法。
标准的写法是,在HTML外部编写独立的.js文件。然后在由<script>的src属性引用该文件。这样做的原因是:可以使HTML文件清晰并且体积小、结构化好、便于维护javascript、可读性增强等。
如果在<script>标签内引用了.js文件的话,则,<script>与</script>之间的代码将会被浏览器忽略掉。通常也没有必要再在这里写任何javascript语句了。
编写独立的javascript文件(.js)有一个显著的优点:
多个文档可以同时使用一个.js文件,由于浏览器会在缓存中保存脚本文件,所以这样可以很有效的缩短显示网页的时间。
Javascript的事件响应机制:
由于javascript可以很好的实现交互式的页面,所以“事件响应“机制是必不可少的。
可以通过以下语法实现事件响应的定义:
<button onClick=”alert(‘You clicked the buttons.’)”>
可以在HTML标签内部指定将要响应的事件名,与””括住的响应方法。来实现。我们可以把事件的响应代码放在独立的javascript文件中。这样可以把一个.js文件应用到多个标签上。不但可以节省代码,当要修改响应代码的时候也非常的便利。就象是C中的宏定义一样。
什么是DOM ?
DOM就是Document Object Model的缩写。翻译成中文就是”文档对象模型”。是指用来呈现WEB文档的一组标准化对象的运用。使用javascript通过DOM可以完全的控制整个页面。
Javascript在浏览器之外的应用:
通常javascript是运行在WEB浏览器上的,但是javascript在其他应用程序上的应用也是日益广泛。下面介绍几点javascript在其他环境运行的版本:
用于WEB的应用程序与多媒体,比如flash。可以通过javascript进行扩展。
有几种服务器版的javascript,它们运行在WEB服务器上。
Microsoft公司的”Windows脚本宿主”支持jscript(javascript的微软版本)是Windows的通用脚本语言。
除了以上的例子外,javascript一直在向通用脚本语言的方向发展。将来javascript版本将会做出更多的改进。
Javascript的应用方面:
改善导航功能:javascript最常用的应用就是网站的导航系统,这是javascript实现交互式页面的最直接的体现。并且该功能在不支持javascript的浏览器上一样可以使用的。
验证表单:使用一个简单脚本就可以读取表单数据,同时确保输入格式的正确。而不必等待服务器的响应。
特殊效果的实现:可以创建一些简单并且美观的特殊效果 ,来吸引访问者的眼球。当然不要做的太花俏,甚至会让访问者感觉到讨厌。
Ajax(远程脚本):长期以来,javascript最大的缺陷是:没有办法与服务端通讯。Ajax使得不需要加载页面的情况下上传数据到服务端或从服务端下载数据到本地。
临时插上一句:利用W3C的DOM可以在页面中创建出:可拖放的对象、图片之间的逐渐淡去效果等。
javascript编程基础
Javascript中的语句:
语句是javascript脚本的基本组成单元,其实,一条语句就是执行某一特定功能的代码而已,通常由分号(;)结尾。每一条语句可以在javascript控制台中单独被执行。在javascript中语句并不一定非要以分号结尾的,在语句独占一行的时候可以不写分号的,但是笔者建议大家一定要写分号,这样可以提高代码的可读性。当然这也是标准的写法。
利用函数(function)来完成任务:
在javascript中使用函数的优点有2处:
可以很好的把脚本的各个逻辑块分离,从而让脚本更便于人们理解。结构化增强,便于维护。
可以避免使用重复的语句,从而降低最终脚本的体积。函数的通用性使得利用固有的算法处理不同的数据(data)。
Javascript包含许多内置函数,从而javascript可以完成更为强大的功能,使得开发更加的简单、高效。
Javascript中的变量:
在javascript中可以通过关键字 var 声明变量,例如:
var value=99;
以上语句声明了一个变量 value 并且向其内部赋入99。
在javascript中变量可以隐含被声明,也就是不必指定关键字var 。javascript中变量是无类型的,准确的说是在声明的时候不用给变量指定数据类型。
理解javascript中的对象(object):
Javascript支持对象,所以我们可以把它理解为“面向对象”。但是它并不是真正的支持面向对象,但是javascript正在向着这方面发展。相信在不久的将来javascript可以实现真正的面向对象机制。
由于“面向对象”与“面向过程”是2种完全不同的“程序设计思想”,所以有一些关于面向对象的概念需要我们重新来认识:
对象中储存的数据称为对象的属性(描述对象的静态特征)。
基于对象的方法(对数据的操作)被称为行为(对象所具有的行为,属于对象的动态特征)。
在javascript中也和其他面向对象的语言相同,是使用 . 来引用对象的成员,比如:
Object.Display();
Javascript支持3种类型的对象:
Javascript的内置对象:Date String Array Math等。
文档对象模型(document object model):该对象表示了浏览器的组建与当前HTML文档。
自定义对象:由程序员自己创建的对象。
Javascript中的“事件响应程序”:
Javascript中的事件处理程序实际上就是处理页面事件的脚本而已。一个事件实际上就是发生在浏览器中的一个动作,可以用以下关系来描述:
动作 ->触发-> 事件
一个事件实际上表明了发生在某一特定对象上的动作,脚本可以通过预先设定的响应代码来响应该事件。
有些“事件”是预期的,或者说是:我们希望它(事件)发生的。而有些事件则是在我们预期只外的,我们不希望它发生的。
Javascript中的事件响应程序,告诉浏览器在一个特定的事件发生时,它(浏览器)该如何做。脚本(script)是按照用户的动作来响应的,并非顺序执行。有些事件是由用户所触发的,而有些则是由浏览器所触发的,比如下载页面完毕等。
每个事件处理程序与一个浏览器对象相关联,也就是说:它(事件)只为该对象服务。每一个浏览器对象所能够监听到的事件都不同,我们可以在对象标签内指定事件响应程序。
WEB浏览器执行脚本的顺序:
在一个WEB文档里,可能包含了多个脚本。也就是多组<script></script>标签,但是浏览器先执行哪个脚本后执行哪个脚本呢?这由一个“逻辑形式”所决定:
先执行<head></head>标签内部的script,因为<head></head>标签内的脚本不能够理解被执行而只是被预先定义,一被后面的脚本所引用。所以在这里定义函数是非常合适的。
执行完<head></head>之后,浏览器开始执行<body></bodu>标签,该标签内的脚本将会被立即执行。如果在<body></body>有多个脚本则按照先后次序依次被执行。
此时浏览器将会进入等待状态,等待事件的发生。当特定事件发生时,浏览器会去执行预先定义的事件处理程序(通常被定义在<head></head>标签内。
Javascript语法规则:
Javascript的语法规则,就是定义如何来使用该语言。Javascript的语法规则应该是有浏览器内部的解释器定义。以下有几点javascript的几点基础规则:
区分大小写:javascript中的标识符是区分大小写的,这与其他一些语言是相同的。Javascript中的关键字必须要小写。Javascript的内置对象是以大写字母开头的,比如:Math\Date等。DOM(文档对象模型)对象必须要小写,但其方法通常是大小写混合。标识符大小写错误,可以被浏览器识别,属于是语法错误。
标识符的命名规则:javascript中的标识符可以是字母、数字、下划线。但是标识符不可以以数字开头。这一点与C语言是相同的。
保留字:保留字是javascript语言系统所定义的具有特殊含义的‘词’。不可以用做标识符。Javascript中的保留字包括:控制程序执行流程的if\for,DOM对象window\document,还有内置对象Date\Math等。
空格符号:javascript是忽略空格的,包括在一行在包含空格与TAB符号,或者是空白行。空格的出现主要是为了提高javascript的可读性。
在javascript中使用注释:
学习过计算机语言的人都应该知道“注释”实际上就是对程序代码的附加说明,主要是为了提高可读性的目的。这在其他人阅读你写的程序或过一段时间在回过头来读自己的程序都是非常有帮助的。如果想在javascript中添加注释的话,可以使用以下2种格式:
1,//注释说明,此种格式的注释主要用于为一行代码注释说明使用的,与C++的注释语法是一样的。
2,/*注释说明*/,此种格式的注释将跨越多行把阔住的内容注释掉。这是C语言风格的注释,在调试代码的时候是非常有帮助的。
在注释范围内的所有内容都将被解释程序所忽略,不会得到执行机会。这里有一点要注意到:以上2种注释方法,是基于javascript的,所以只能够在<script>标签内使用或是在.js文件中使用。不可以使用在HTML标签之间。
使用link和anchor对象:
Link是document的子对象,可以这样来引用它:document.link; link对象代表一个连接。可以通过links数组来访问多个link对象,links数组中的每一个元素都是当前文档中的一个link对象。通过该语句可以得到当前页面中的连接数量:document.links.length; link的Href属性包含了当前连接的完整URL。
Anchor对象也是document的子对象,anchor对象代表了当前文档直接跳转的位置。
基于WEB浏览器的history对象:
History是window的子对象,history对象保存着当前URL之前与之后访问过的地址。而且history对象包含了到达之前地址与之后地址的方法。
History对象只有一个可以被访问属性:
History.length:该属性保存了用户曾经访问过的网址数目,也就是历史列表的长度。
History提供了3个方法来访问历史列表:
history.go():打开历史列表中的指定网址。
history.back():打开历史列表总的前一网址。
history.forward():打开历史列表中的后一个网址(如果有的话)。
使用location对象:
Location是window的子对象,该对象储存了当前窗口地址栏中的URL信息。
Location对象的属性包括:
location.protocol:该属性保存了URL的协议部分。
location.hostname:该属性保存了URL的主机名部分。
location.port:该属性保存了URL中的端口号部分。
location.pathname:该属性保存了URL中的文件名部分。
location.search:保存了URL的查询部分(如果有的话)。
location.hash:保存了URL中的anchor名称(如果有的话)。
通常会用到location.href属性来加载新页面到当前浏览器窗口。
Location对象有2个方法:
location.reload():该方法会刷新当前页面,如果给定参数 true 的话,则不保存当前页面中的更改强行重新加载页面。
location.replace():替换一个新的位置。
四:javascript中的变量、字符串与数组
给变量命名的规则:
在javascript中变量是有名称的一个容器,用于储存数据。而给变量命名的时候要遵守一定的规则:
变量名称可以包含字母、数字、下划线。
变量名称中不可以出现空格或其他标点符号。
变量名称的第一个字符不允许是数字。
变量名称是区分大小写的。
Javascript中的变量名没有长度限制,但是变量名必须要写在一行中。
建议在变量命名的时候给变量取一个顾名思义的名字,这样可以提高可读性。不易被忘记。
局部变量与全局变量:
Javascript中可以通过关键字var来声明变量,但是var也可以省略掉。因为在给变量赋值的同时就已经隐含的被声明了。有变量相关的有一个概念“作用域”,也就是变量存在的范围。当变量离开了该范围,它就不存在了。按照作用域来分类变量,可以分为2类:
全局变量:该种变量的作用域在HTML文档中的所有脚本中。
局部变量:该种变量只可以在被声明的函数内部使用,离开声明它的函数,就不存在了。
声明在所有函数之外的变量被认为是全局变量,可以通过var关键字也可以省略var关键字。但是笔者建议始终使用var来声明变量,这样不但可以提高可读性,与可理解性。而且不会给脚本带来任何副作用。
声明在函数内部的变量被认为是局部变量,函数内部的局部变量必须要通过var关键字来声明。函数的形式参数也属于该函数的局部变量。
Javascript中的数据类型:
在一些计算机语言中声明变量必须要指定该变量的数据类型(它要储存的数据的类型),但在javascript中没必要这样做。但是你必须要知道javascript可以处理哪些类型的数据。
Javascript的基本数据类型包括:
数字:该类数据包括整数与浮点数。
Boolean:该类变量的取值范围为 true 或false。
字符串(string):由一个或多个被包含在双引号中的字符组成,严格的来说它是对象。在很多面向对象的语言中,都已经把字符串做为对象来处理。
空值:用关键字null表示,变量未被赋值的表现。
其实在javascript中变量的数据类型可以随时被改变,比如:
Value=99;
Value=”LiquidWorm”;
在执行的时候不会出现任何错误,但是这种做法并不被推荐。笔者希望能够始终如一的处理同一类型的数据。
数据类型之间的转换:
Javascript中的类型转换大多数时候是由解释程序自动来完成的,以下2个函数用于转换类型:
parseInt():该函数将给定为形参的字符串转换为数值,转换原理是把字符串中表示数值等子串转换为等价的数值型数据,而其它非数值型的数据将会被忽略掉。
parseFloat():与以上函数类似,只不过该函数是把字符串转换为浮点数而已。
以上2个函数都是从字符串的开始处读取并开始转换,非数值型数据将会被忽略掉。
以上2个函数如果没有发现一个有效的数字的话,将会返回NaN(非数字)。
Javascript中的字符串对象(String):
在一些基于面向对象的语言中,已经把字符串作为对象来处理了。基于字符串的相关算法也已经集成到对象内部了。这样的封装与组织使得处理字符串变的更加的灵活与自然。当然在javascript中字符串也被处理为对象(String)。
在javascript中有以下2种方法可以创建字符串对象:
原始的创建方法,即把一个字符串数据赋给一个变量。这是早期非面向对象语言的语法格式,比如C语言。Test=”I is Liquidworm”;
基于面向对象思想的语法,该方法在当前高级与支持面向对象的语言中被普遍使用。当然在javascript中笔者也推荐大家使用该语法,便于以后的移植性,因为将来的javascript可能会放弃第一种语法,而实现完全支持面向对象机制。Test=new String(“I is Liquidworm”);
上面使用到了new关键字,它用于创建对象。New关键字告诉浏览器实例化一个对象String到test并且给定参数到构造方法。
临时插上一句:+ 该运算符,不但可以在数学表达式中当作加法运算符,如果表达式中存在字符串可以用于连接字符串。该运算符的出现使得字符串连接操作变地非常简单。也就是说,如果该运算符号的2个操作对象中有一个是字符串则表达式的最终值应该是一个新的字符串。还可以使用 += 运算符想字符串变量追加字符串。
如何计算字符串的长度(length):
Javascript提供了最简单的办法实现这一点,String对象的length属性包含了当前字符串的长度,我们可以直接读取到。比如:test.length; 这个语句表示了test字符串中字符的数量。这里值得强调的是length属性是只读属性,也就是不允许被外部改变的。当然这也是很不合理的。
字符串大小写的互相转换:
String对象提供了2个方法可以实现这一点,2种方法分别可以让字符串中的所有字符全部转换为大写或小写。
toUpperCase():该方法会将字符串中的所有字符转换为大写。
toLowerCase():该方法会将字符串中的所有字符转换为小写。
这里值得注意的是,以上2种方法返回的只是原字符串被转换为大写或小写的一个副本,原字符串本身并没有被改变。比如:
Test=new String(“I is Liquidworm”);
Document.write(test.toLowerCase());
Document.write(test);
以上语句,我没有去执行。但是按照最初的设想应该会有2个输出,分别是:
i is liquidworm
I is Liquidworm
从而应该明白,如果想要把test转换为大写或小写,可以这样来实现:
test=test.toLowerCase();
子串(字符串的部分):
Javascript支持对子串的操作,也支持对字符串中单个字符的获取。
substring():该方法可以获得子串。
charAt():获得一个字符。
数值型的数组:
数组在其他语言中也存在该结构,所以这里只需要谈谈与其他语言的不同点。简单的来理解就是:同类型变量的有限集合。Javascript中的数组可以包括字符串、数字、对象。
与javascript中的其他普通变量不同的是,数组在使用之前必须要先被声明。声明一个数组语法类似于以下:
Score=new Array(9);
以上语句声明了一个数组Score,最多可以存储9个元素。上面的语法该怎样来理解呢。实际上是一种申请内存空间的方法。
Array(9) //代表9个特定元素的长度。
New //申请。
New Array(9); //就是申请9个特定元素的长度。
Score // 变量,是一个容器。用语存储数据。
Score=new Array(9); //就是告诉解释程序分配9个元素长度的内存空间到score变量。
如果想给数组元素赋值的话,可以通过类似于以下的语法来实现:
Score[index]=value; //把指定数据赋给指定索引的元素。
Javascript中的索引实际上就是C中的下标,索引从0到 length-1。
可以使用以下语法初始化数组:
Score=new Array(32,21,10,65,87);
解释程序可以根据给定的参数个数来适当分配内存。
数组也象String一样有长度属性(length),可以很方便的获得数字的长度。如果在声明数组时候给定了长度,那么这个给定的长度就是length的值。
Score=new Array(9);
Document.write(Score.length);
输出:9
五:函数与对象:
函数可以有效的组织代码,从而避免使用了过多的重复代码。并且一个函数可以同时为多个脚本服务。而对象将会更加的强大,其内部包含了要处理的数据与处理数据的相关算法。
Javascript中的函数(function):
虽然可以在<script>与</script>标签之间嵌入javascript,但是这样只适合较小的脚本,并且笔者并不推荐这种结构。对于比较复杂与专业的程序,这样的结构导致了后期的维护相当的困难。函数(function)的出现也是为了解决该问题。
如何定义函数:
在javascript中函数被做为一个基本的组成模块看待,要定义函数必须按照以下格式来完成:
Function name()
{
//函数体(语句序列)
}
Function:是关键字,用于定义函数。
Name:是标识符,是给函数取的名字。
当然,函数也可以接收一个或更多的参数,以实现它的通用性。
如果想在HTML中嵌入函数的话,最好的位置会是<head>标签内,因为<head>中的语句将会被先执行,这样可以保证函数在被调用之前已经被定义过。
如何来调用已定义过的函数:
调用函数,实际上就是给被调用函数一次执行的机会,可以是给定参数的调用或无参数的调用。这里有一点要注意的是,javascript中函数调用过程中参数的传递方式是“值传递“,也就是会copy一个副本过去。比如可以用以下的语句来调用前面定义过的函数:
Name();
临时插上一句:浏览器在显示警告框的同时,javascript代码将会被挂起。直到按下确定按扭。
返回值关于函数(function):
作为函数它的最后一项任务就是要把处理的结果返回给主掉者,当然这也是函数的最终目的:
return result;
return 是javascript语言系统中预先定义的关键字。用于返回数据的。很多语言中都使用该关键字。这里有一点要注意的是,可以在表达式中使用函数调用,前提是该函数有返回值。
Javascript中的对象(object):
实际上要明白,javascript并没做到完全支持面向对象机制,而只是支持面向对象机制的一部分。对象=变量+方法 这个表达式通常情况下成立的,对象中的变量可以理解为对象的属性,用于描述对象的静态特征,而对象中的方法实际上就是对象所具有的行为,是对象的动态特征。
Javascript中的对象按照组建类型来分类可以分为以下几类:
DOM对象:允许javascript与WEB页面交互。
内置对象:是语言系统预先定义的对象,可以在脚本中直接来引用。
自定义对象:由脚本编写者自己来定义。
对象(object)可以简化脚本:
在javascript中我们通常处理数据都是使用的变量,这里在处理简单数据时很有效。但是有的时候我们要处理一些比较具体的对象结构,比如人员管理系统、图书管理系统等。在处理这类结构的时候我们可以使用对象(object)。他可以很好的组织要要出的数据与使用的操作。在javascript中的对象实际上可以表示一个显示中的独立存在的实体。
Javascript中如何定义对象(object):
定义对象分为以下几个步骤:
给对象选一个适合它与顾名思义的名字。
给该对象拟订所需要的属性,也就是不同的变量。
定义一个函数(function)作为对象(object)的构造函数,用于创建该对象。对象构造函数定义类似于下面:
Function obj(name,address,work,home)
{
This.name=name;
This.address=address;
This.work=work;
This.home=home;
}
构造函数中的关键字this 代表当前即将创建的对象。
如何给对象定义方法:
因为javascript中的同一类对象都有相同的属性,所以我们可以定义一个方法同意的为所有同一类对象使用。脚本编写者定义的方法必须要以函数(function)的形式编写。定义对象的方法类似于以下语法:
Function printObj()
{
This.name; //通常需要使用到对象内部的属性
//函数体
}
通常对象方法需要读取对象的属性,以上我们定义了对象的方法,但是它还没有成为obj对象的方法。在定义完对象的方法以后,还需要把该方法指定给对象。告诉对象它有一个成员方法。
//定义对象
Function Obj(name,home)
{
This.name=name;
This.home=home;
This.objPrint=objPrint;
}
以上代码定义了一个对象Obj,并且给该对象指定了它的成员方法objPrint()。大家可以很容易的看到给对象添加方法就象对象属性一样,但是objPrint之前被定义为函数(function)所以对象会调用该外部函数。
临时插上一句:javascript中通常的好习惯是,变量名一般用小写,而方法名一般用大写。
对象的实例化(派生):
在javascript中可以通过关键字 new 来派生一个对象的实例,派生对象语法类似于以下:
Tom=new Obj(“name”,”555-9999”);
Javascript中可以把定义对象时的对象理解为对象的摸板,当需要使用该对象的时候可以根据该摸板来派生对象的实例。以上语句根据给定的构造参数派生了一个对象实例tom。在派生对象时也可以不给定构造参数,以后可以再次赋值。
扩展内置对象:
Javascript提供了一种功能,可以扩展内置对象的定义。可以向其内部添加属性与方法。Prototype关键字允许在对象构造函数之外更改对象的定义。
向内置对象添加属性与方法分为以下几个步骤:
定义外部函数,作为内置对象的新方法
Object.prototype.newfunction=newfunction;
六:javascript中的内置对象与程序库
Math对象:
该对象属于javascript的内置对象,包含了数学常数与函数。
如何通过Math对象来生成随机数?
可以通过Math.random()来生成随机数,该方法不接收任何参数。Math.random()返回0-1之间的随机小数。
With关键字:
With关键字可以节省代码量。With可以指定一个对象名称,并且包含被扩在大括号内部的语句块。块内的属性与方法如果没有明确指定对象的话,都将认为是with指定对象的属性与方法。
日期对象Date:
Date属于javascript内置对象,可以为日期与时间的处理提供方便。Date对象没有任何属性。
Date对象的实例化:
可以通过new关键字来派生一个Date对象,可以指定构造参数。如果不指定构造参数的话,当前时间将会被存储在Date对象里。
第三方程序库:
使用第三方程序库的好处是,使用最少的代码实现最复杂的功能。第三方程序库实际上是有些其他脚本编写者写的.js文件,我们可以直接把该文件保存到站点目录然后直接用<script>标签来引用就可以了。
七:事件响应
什么是事件处理程序:
事件就是在浏览器中发生的事,事件处理程序就是要响应这个事件。事件的存在网页的交互性大大的提高了。
事件 关于对象:
每个事件都有一个关联的对象,既该事件被触发的地方。每个事件都有一个名称,如果在某一个对象上被触发了预先监听的事件,那该对象的事件处理程序就得到了一次执行的机会。
临时插上一句:注意事件名的抒写格式,on总是小写,事件名中的没个单词都是首字母大写。
如何来创建事件处理程序:
可以为单独的HTML标签指定事件处理程序。可以把事件处理程序写为外部函数,然后在爱事件发生时调用它就可以了。
在javascript中如何定义事件处理程序?
可以把事件处理程序写在.js文件中,这样的话可以随时打开或关闭该事件处理程序,对于更新时间处理程序也是非常便利的。笔者推荐这种写法,可以完全作到与HTML分离。
定义事件处理函数的具体方法是:
定义事件处理函数(function)。
把之前定义的函数指定为事件处理函数。
用代码可以描述为:
Function mousealert()
{
Alert(“You clicked the mouse!”);
}
以上代码定义了一个事件处理函数,接下来:
<a href=http://www.google.com.cn id=”link1”>
确定该事件要关联的对象,并给该对象指定唯一的ID属性。
Obj=Document.getElementById(“link1”);
以上代码找到了ID属性为link1的HTML对象,保存到obj中。
Obj.onClick=mousealert;
以上代码把预先定义的函数mousealert()指定为obj对象onClick事件的处理函数。
利用以上的技术,可以把一个函数指定给多个对象,从而代码量大大减少。并且实现与HTML分离,不会给后期维护带来任何麻烦。
Event对象:
在某个事件被触发时,可能需要了解更详细的信息关于该事件。要知道,event对象是属于DOM的,并非是javascript的。很简单,我们只需要在特定事件被触发时,把event传递给事件处理函数就可以了。
<body onKeyPress=”getkey(event);”>
然后在在该函数中具体处理。
Function getkey(event)
{
//
}
在Firefox中event对象会被自动传递到事件处理函数,而IE中则保存在window.event中。所以我们在接收到event的时候要判断,如果event为空的话,必须要从window.event中得到该对象。
Function getkey(e)
{
If(!e)
E=Window.event;
}
以上代码保证了无论是Firefox还是IE都可以正确的得到事件更加详细的信息。
九:窗口与框架
本章主要讲解window对象,也就意味着可以直接操作浏览器窗口。还要介绍到一种变异的window对象我们称为“框架”。
临时插上一句:self关键字代表当前窗口。相当于window对象。
如何创建一个新窗口?
可以通过window.open()方法创建新WEB浏览器窗口,该方法语法如下:
winObj=window.open(“URL”,”windowName”,”feature list”);
下面将简要的介绍一下window.open()方法的参数:
URL:新窗口将要打开WEB文档的URL地址,如果该参数为空,则新窗口不会加载任何页面。
windowName:顾名思义,就是新窗口的名字,该参数将被赋予window对象的name属性。
feature list:该参数是一个可选参数,用于定制新窗口的相关特性。各个项之间用逗号(,) 间隔。
打开与关闭窗口:
可以通过window.close()方法关闭窗口,例如:
Updatewindow.close();
以上代码关闭了窗口updatewindow。
这里有一点要注意的是:浏览器一般不允许关闭主窗口,如果可以关闭的话,前提也是要得到用户的同意。
移动与改变窗口的大小:
DOM允许移动与改变窗口大小,以下方法可用于移动与改变window对象大小:
window.moveTo():可以把窗口移动到新的位置。
window.moveBy():移动窗口到与当前位置相对的位置上。
window.resizeTo():一直的高度与宽度重新设置窗口的尺寸。
window.resizeBy():调整窗口尺寸,相对于当前尺寸。
Javascript中的超时功能:
一般最难的事,就是让脚本在特定时间内什么都不做,幸运的是javascript提供了内置的方法 window.setTimeout() 该方法可以指定延时的时间与之后要执行的指令。
临时插一句:超时的功能并不会让浏览器停止工作,在超时阶段内,浏览器还可以处理其他工作。比如响应事件。
window.setTimeout(“alert(‘Time Up’)”,10000);
以上代码可以实现让脚本延时10秒,然后执行alert()函数。
如何让超时到期之前停止它呢?
可以使用clearTimeout()方法,指定一个标识符。标识符是setTimeout()的返回值。
如何在javascript中显示对话框:
Window对象含有3个方法,用于显示不同类型的对话框:
window.alert():主要用于显示警告对话框,该对话框显示一个消息(message)给访问者。
window.confirm():用语显示确认对话框,如果选择确定按扭则返回true,如果选择了取消按扭则返回false。
window.prompt():实用提示用户输入,并且返回用户输入的文本。
临时插一句:通常在使用window对象的方式时,可以省略window直接写对象名就可以了。这是因为window对象是javascript默认的上下文环境。
十:利用表单获取用户数据
Javascript中最强大的应用就是处理HTML表单,并且介绍到如何通过javascript提高HTML表单的交互性。
如何通过HTML定义表单:
HTML表单从<form>标签开始,<form>标签的属性包括:name\method\action\enctype。<form>标签之后可以是一个或多个表单元素。
如何使用<form>标签:
HTML中的表单在javascript中用一个对象来表示,该对象就是<form>标签的name属性。
也可以通过forms数组来引用表单对象,forms的每一个元素都是页面中的一个表单(form)。
下面简单记载下form对象的属性:
action:指定了接收表单数据的服务端程序。
enctype:表单数据加密时采用的mime类型。
length:指出了表单中元素的数量,该属性是只读属性。
method:提交表单的方式,可以是get或post,该属性决定发送的数据格式。
target:指定用来显示表单结果(来自CGI脚本)的窗口。
提交或重置表单:
Form对象有2个方法:submit()与reset() 这2个方法可以实现提交表单与重置表单。
事件 关于表单:
Form对象有2个事件:onSubmit与onReset :
onSubmit:该事件会使得表单数据被提交给CGI脚本之前响应。
脚本 关于表单元素:
Elements数组是form的属性,该数组中每一个元素都是一个表单元素。该类数组的length属性指出了数组中元素的数量,也就是表单或表单元素的数量。比如:
Document.order.elements[0]
以上语句表示order表单中的第一个表单元素。
Document.order.name1;
以上语句也表示了order表单中第一个元素name1
Document.forms.length;
以上代码表示了当前文档中的表单数量
Document.form1.elements.length;
以上代码表示了form1表单中表单元素的数量。
临时插上一句:可以为HTML标签指定ID属性,然后在javascript脚本中利用getElementById()方法查找指定ID标识的标签对象,比如:
<form id=”form1”>
Test=getElementById(“form1”);
文本字段 关于表单元素:
文本字段是表单中最常用来收集用户信息的元素,当然也可以显示信息给用户。以下定义了一个文本字段最简单的例子:
<input type=”text” name=”text1” value=”Liquidworm” size=”30”>
Text对象的属性:
name:是该对象的名称,主要起到标识的作用。
defaultValue:文本字段的默认值,该属性是只读属性。
value:是当前值,该属性最初与defaultValue相同。
文本区域 关于表单元素:
文本区域使用独有的标签<textarea>来定义,文本区域与文本字段的区别就是文本区域允许用户输入多行数据,而文本字段只可以输入一行数据。以下定义了一个最简单的文本区域:
<textarea name=”text1” rows=”2” cols=”70”>
This is Test
</textarea>
以上HTML定义了一个文本区域最多允许用户输入2行与70列的文本。<textarea>与</textarea>标签之间的文本是该文本区域的默认值。
如何处理表单中的文本?
可以通过方法来直接操作文本字段与文本区域,也可以通过事件来检测文本字段与文本区域的变化。
以下方法text与textarea对象同时支持:
focus():使文本字段或文本区域获得输入焦点。
blur():失去输入焦点,与上一方法正好相反。
select():选择文本字段或文本区域中的全部文本。
按扭 关于表单元素:
按扭使用<input>标签,并可以使用3种type属性创建:
type=”submit” 可以把表单数据发送到CGI脚本。
type=”reset” 可以把所有表单字段恢复到默认值。
type=”button” 通用按扭,本身不执行任何动作。
以下创建了一个最简单按扭的例子:
<input type=”button” name=”button1” value=”ClickButton”>
复选框关于表单元素:
单击一个复选框,会在打开与关闭2种状态之间切换。复选框可以使用<input>标签来定义:
<input type=”checkbox” name=”check1” value=”Yes” checked>
Checkbox对象的4个属性分别是:
name:该属性表示了复选框的名称,标识了该对象。
value:复选框被选总时,将把该属性值发送的服务端。
checked:该属性的值是bollean,选中时为true取消时为false。
以下代码选中了位于order表单中的Liquidworm复选框:
Document.order.Liquidworm.checked=true;
除此之外checkbox还有一个方法 click(),该方法模拟单击复选框。
Checkbox还有一个事件 onClcik,该事件由单击复选框被触发。
下拉列表:
下拉列表也属于表单元素,它由<select>标签定义。
Select对象具有下列属性:
name:下拉列表的名称。
length:指出列表中选项的数量。
options:该属性表示选项数组,每个可选项都在该数组中有一个条目。
selectedIndex:返回当前被选中选项的索引值。
十四:调试javascript代码
如何避免BUG的出现:
BUG实际上就是软件中存在的错误,影响程序正常执行的缺陷。无论是编写程序还是脚本都有可能存在一个或多个BUG。
培养良好的编码习惯:
没有任何一位程序员可以一次成功且不出现问题的。编写质量高的脚本的好习惯是:
脚本代码的格式要符合标准,可读性强。
给关键代码添加注释,便于移交代码或以后回忆代码。
Javascript语句应该以分号结尾,不但可以提高可读性,而且还可以使得浏览器在发现错误时生成错误信息。
严格使用var来声明变量。
尽量将复杂的脚本分解为多个逻辑块,这样不但可以提高可读性,而且可以使程序错误局部化。
将编写大型脚本划分为几个工作阶段,并在每个阶段测试脚本。
有效预防常见错误:
在编码的过程中会有很多错误,是我们经常会犯的,而且不只一次。所以在这一点上尽量要避免。
创建错误处理程序:
有的时候我们可以预见错误有可能会发生,并确定它有可能会发生的位置。这个时候我们可以使用错误处理程序来对错误就行处理。当然该类错误通常是由外部环境所引起的。
Onerror属性:
Onerror是window对象的一个属性,可以为该属性指定一个函数,用于处理浏览器错误。如果指定了错误处理函数,一但浏览器发现脚本中存在错误,就会调用该函数。错误处理函数的返回值决定了浏览器下一步的动作,如果错误处理函数返回true浏览器将不会显示错误对话框,否则反之。
当浏览器调用错误处理函数时,将传递3个参数:
message:错误信息
url:错误发生在哪个文档
line:错误发生的行号
比如以下声明了错误处理函数并指定为onerror属性:
Function errormsg(message,url,line)
{
Return true //已处理
Return false // 未处理,浏览器将显示错误框
}
Window.onerror=erormsg; //指定错误处理函数
Try – catch:
Try与catch是2个关键字,可以用于处理代码发生的错误。 Try监视代码的执行,如果发现错误就会转道catch块执行错误处理代码。
Try
{
A=99;
}
Catch(err)
{
Alert(err,description);
}
如果try会存在错误catch会才得到执行的机会,都则将不会执行catch块。
Err 是接收到的错误对象。