1. JavaScript
SCSC007-HTML,CSS,JS 2. JavaScriptJavaScript 特点
JavaScript 语法
JavaScript 基于对象编程
事件驱动及事件处理
常用宿主对象及其使用
框架
10/16/20182JavaScript 3. 什么是JavaScriptJavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。
使用它的目的是与HTML超文本标记语言、Java 脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用。从而可以开发客户端的应用程序等。
它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷,它是Java与HTML折衷的选择。10/16/20183JavaScript 4. JavaScript 特点是一种脚本编写语言
基于对象的语言。
简单性
安全性
动态性的
跨平台性10/16/20184JavaScript 5. JavaScript 特点综合所述JavaScript 是一种新的描述语言,它可以被箝入到 HTML 的文件之中。 JavaScript语言可以做到回应使用者的需求事件 (如: form 的输入) ,而不用任何的网路来回传输资料,所以当一位使用者输入一项资料时,它不用经过传给伺服端 (server)处理,再传回来的过程,而直接可以被客户端 (client) 的应用程式所处理。
10/16/20185JavaScript 6. JavaScript和Java 虽然JavaScript与Java有紧密的联系,但却是两个公司开发的不同的两个产品。
Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发;Java的前身是Oak语言。
而JavaScript是Netscape公司的产品,其目的是为了扩展Netscape Navigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言, 它的前身是Live Script。10/16/20186JavaScript 7. JavaScript和Java基于对象和面向对象
解释和编译
弱变量和强变量
代码格式不一样
嵌入方式不一样
静态联编和动态联编10/16/20187JavaScript 8. 第一个JavaScript程序 例:js2.html 例:js1.html10/16/20188JavaScript 9. 第一个JavaScript程序10/16/20189JavaScript 10. 第一个JavaScript程序JavaScript代码由 说明。在标识之间就可加入JavaScript脚本。
alert()是JavaScript的窗口对象方法,其功能是弹出一个具有OK对话框并显示()中的字符串。
通过标识说明:若不认识JavaScript代码的浏览器,则所有在其中的标识均被忽略;若认识,则执行其结果。使用注释这是一个好的编程习惯,它使其他人可以读懂你的语言。10/16/201810JavaScript 11. 注意相对于
10/16/201812JavaScript 13. 基本数据类型整型 只能储存整数。可以是正整数、0、负整数,可以是十进制、八进制、十六进制。八进制数的表示方法是在数字前加“0”,如“0123”表示八进制数“123”。十六进制则是加“0x”:“0xEF”表示十六进制数“EF”。
浮点型 即“实型”,能储存小数。有资料显示,某些平台对浮点型变量的支持不稳定。没有需要就不要用浮点型。
字符串型 是用引号“" "”、“' '”包起来的零个至多个字符。用单引号还是双引号由你决定。
布尔型 常用于判断,只有两个值可选:true(表“真”)和 false(表“假”)。true 和 false 是 JavaScript 的保留字。它们属于“常数”。10/16/201813JavaScript 14. 转义字符由于一些字符在屏幕上不能显示,或者 JavaScript 语法上已经有了特殊用途,在要用这些字符时,就要使用“转义字符”。
转义字符用斜杠“\”开头:\‘ 单引号、\“ 双引号、\n 换行符、\r 回车。于是,使用转义字符,就可以做到引号多重嵌套:’Micro 说:”这里是\“JavaScript 教程\”。“ ‘10/16/201814JavaScript 15. JavaScript 变量变量的命名 变量的命名有以下要求:
1)只包含字母、数字和/或下划线;2)要以字母开头;3)不能太长;4)不能与 JavaScript 保留字重复。
而且,变量是区分大小写的,例如,variable 和 Variable 是两个不同的变量。
变量需要声明 没有声明的变量不能使用,否则会出错:“未定义”。声明变量可以用:
var <变量> [= <值>]10/16/201815JavaScript 16. JavaScript 变量由于JavaScript 对数据类型的要求不严格,一般来说,声明变量的时候不需要声明类型。而且就算声明了类型,在过程中还可以给变量赋予其他类型的值。
声明类型可以用赋予初始值的方法做到:
var aString = '';
这将把aString定义为具有空值的字符串型变量。
var anInteger = 0;
变量的赋值 一个变量声明后,可以在任何时候对其赋值。赋值的语法是:<变量> = <表达式>;
其中“=”叫“赋值符”,它的作用是把右边的值赋给左边的变量。
10/16/201816JavaScript 17. JavaScript常数null 一个特殊的空值。
NaN “Not a Number”。
true 布尔值“真”。用通俗的说法,“对”。false 布尔值“假”。用通俗的说法,“错”。
在 Math 对象中还有一系列数学常数。这将在讨论“对象化编程”时谈到。
特殊字符 同C语言一样,JavaScript中同样以有些以反斜杠(/)开头的不可显示的特殊字符。通常称为控制字符。
10/16/201817JavaScript 18. JavaScript控制语句第一种是选择结构。
单一选择结构(if),
二路选择结构(if/else),
内联三元运算符 ?:
多路选择结构(switch)。
第二种类型的程序控制结构是循环结构。
在循环的开头测试表达式(while),
在循环的末尾测试表达式(do/while),
对对象的每个属性都进行操作(for/in),
由计数器控制的循环(for)。
10/16/201818JavaScript 19. 条件语句if 语句
if ( <条件> ) <语句1> [ else <语句2> ];
<条件>是布尔值,必须用小括号括起来;<语句1>和<语句2>都只能是一个语句,欲使用多条语句,请用语句块。
请看下例:
if (a == 1) { if (b == 0) alert(a+b);} else { alert(a-b);}10/16/201819JavaScript 20. 多路选择switch 语句是解决多种条件判断的最好方法。
switch (e) { case r1: (注意:冒号) ... [break;] case r2: ... [break;] ... [default: ...]} 10/16/201820JavaScript 21. 循环语句for (<变量>=<初始值>; <循环条件>; <变量累加方法>) <语句>;
本语句的作用是重复执行<语句>,直到<循环条件>为 false 为止。
for (i = 1; i < 10; i++) document.write(i);
和 if 语句一样,<语句>只能是一行语句,如果想用多条语句,你需要用语句块。10/16/201821JavaScript 22. for...in 循环JScript 提供了一种特别的循环方式来遍历一个对象的所有用户定义的属性或者一个数组的所有元素。for...in 循环中的循环计数器是一个字符串,而不是数字。它包含当前属性的名称或者当前数组元素的下标。
// 创建具有某些属性的对象
var myObject = new Object();
myObject.name = "James";
myObject.age = "22";
myObject.phone = "555 1234";
// 枚举(循环)对象的所有属性
for (prop in myObject){ // 显示 "The property 'name' is James",等等。
window.alert("The property '" + prop + "' is " + myObject[prop]);
}10/16/201822JavaScript 23. while 除了 for 循环,JavaScript 还提供 while 循环。
while (<循环条件>) <语句>;
do...while 循环与 while 循环相似,在循环的末尾检查条件,它总是至少运行一次。
10/16/201823JavaScript 24. break 和 continuebreak 和 continue
有时候在循环体内,需要立即跳出循环或跳过循环体内其余代码而进行下一次循环。
break;本语句放在循环体内,作用是立即跳出循环。
continue;本语句放在循环体内,作用是中止本次循环,并执行下一次循环。10/16/201824JavaScript 25. JavaScript函数JavaScript函数定义
Function 函数名 (参数,变元){
函数体;.
Return 表达式;
}
JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这是与其它语言不样的地方。10/16/201825JavaScript 26. JavaScript函数在函数的定义中,我们看到函数名后有参数表,这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢?在JavaScript中可通过arguments .Length来检查参数的个数。
Function function_Name(exp1,exp2,exp3,exp4){
Number =function _Name . arguments .length;
if (Number>1)
document.wrile(exp2);
if (Number>2)
document.write(exp3);
if(Number>3)
document.write(exp4);
}10/16/201826JavaScript 27. 对象化编程JavaScript语言是基于对象的(Object-Based),而不是面向对象的(object-oriented)。之所以说它是一门基于对象的语言,主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来,从而形成一个非常强大的对象系统。
虽然JavaScript语言是一门基于对象的,但它还是具有一些面向对象的基本特征。它可以根据需要创建自己 的对象,从而进一步扩大JavaScript的应用范围,增强编写功能强大的Web文文件。10/16/201827JavaScript 28. 对象的基本知识 对象是可以从 JavaScript“势力范围”中划分出来的一小块,可以是一段文字、一幅图片、一个表单(Form)等等。
每个对象有它自己的属性、方法和事件。
对象的属性是反映该对象某些特定的性质的,例如:字符串的长度、图像的长宽、文字框(Textbox)里的文字等等;
对象的方法能对该对象做一些事情,例如,表单的“提交”(Submit),窗口的“滚动”(Scrolling)等等;
而对象的事件就能响应发生在对象上的事情,例如提交表单产生表单的“提交事件”,点击连接产生的“点击事件”。
不是所有的对象都有以上三个性质,有些没有事件,有些只有属性。引用对象的任一“性质”用“<对象名>.<性质名>”这种方法。 10/16/201828JavaScript 29. 内部对象Microsoft Jscript 提供了 11 个内部(或“内置”)对象。它们是Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、Error 以及 String 对象。每一个对象有相关的方法和属性,这在语言参考中有详细的描述。
10/16/201829JavaScript 30. 全局对象Global全局对象从不现形,它可以说是虚拟出来的,目的在于把全局函数“对象化”。在 Microsoft JScript 语言参考中,它叫做“Global 对象”,但是引用它的方法和属性从来不用“Global.xxx”(况且这样做会出错),而直接用“xxx”。
方法
1.eval() 把括号内的字符串当作标准语句或表达式来运行。2.isFinite() 如果括号内的数字是“有限”的就返回 true;否则返回 false。3.isNaN() 如果括号内的值是“NaN”则返回 true 否则返回 false。4.parseInt() 返回把括号内的内容转换成整数之后的值。如果括号内是字符串,则字符串开头的数字部分被转换成整数,如果以字母开头,则返回“NaN”。10/16/201830JavaScript 31. 全局对象Global5.parseFloat() 返回把括号内的字符串转换成浮点数之后的值,字符串开头的数字部分被转换成浮点数,如果以字母开头,则返回“NaN”。6.toString() 用法:<对象>.toString();把对象转换成字符串。如果在括号中指定一个数值,则转换过程中所有数值转换成特定进制。7.escape() 返回括号中的字符串经过编码后的新字符串。该编码应用于 URL,也就是把空格写成“%20”这种格式。“+”不被编码,如果要“+”也被编码,请用:escape('...', 1)。8.unescape() 是 escape() 的反过程。解编括号中字符串成为一般字符串。
10/16/201831JavaScript 32. String 字符串属性
length 用法:<字符串对象>.length;返回该字符串的长度。
方法
1.charAt() 用法:<字符串对象>.charAt(<位置>);返回该字符串位于第<位置>位的单个字符。注意:字符串中的一个字符是第 0 位的,第二个才是第 1 位的,最后一个字符是第 length - 1 位的。
2.charCodeAt() 用法:<字符串对象>.charCodeAt(<位置>);返回该字符串位于第<位置>位的单个字符的 ASCII 码。3.fromCharCode() 用法:String.fromCharCode(a, b, c...);返回一个字符串,该字符串每个字符的 ASCII 码由 a, b, c... 等来确定。10/16/201832JavaScript 33. String 字符串4.indexOf() 用法:<字符串对象>.indexOf(<另一个字符串对象>[, <起始位置>]);该方法从<字符串对象>中查找<另一个字符串对象>(如果给出<起始位置>就忽略之前的位置),如果找到了,就返回它的位置,没有找到就返回“-1”。所有的“位置”都是从零开始的。
5.lastIndexOf() 用法:<字符串对象>.lastIndexOf(<另一个字符串对象>[, <起始位置>]);跟 indexOf() 相似,不过是从后边开始找。
6.split() 用法:<字符串对象>.split(<分隔符字符>);返回一个数组,该数组是从<字符串对象>中分离开来的,<分隔符字符>决定了分离的地方,它本身不会包含在所返回的数组中。例如:'1&2&345&678'.split('&')返回数组:1,2,345,678。10/16/201833JavaScript 34. String 字符串7.substring() 用法:<字符串对象>.substring(<始>[, <终>]);返回原字符串的子字符串,该字符串是原字符串从<始>位置到<终>位置的前一位置的一段。
8.substr() 用法:<字符串对象>.substr(<始>[, <长>]);返回原字符串的子字符串,该字符串是原字符串从<始>位置开始,长度为<长>的一段。
9.toLowerCase() 用法:<字符串对象>.toLowerCase();返回把原字符串所有大写字母都变成小写的字符串。
10.toUpperCase() 用法:<字符串对象>.toUpperCase();返回把原字符串所有小写字母都变成大写的字符串。10/16/201834JavaScript 35. Array数组数组对象是一个对象的集合,里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置(既然是“位置”,就也是从零开始)。
数组的定义方法:
var <数组名> = new Array();
这样就定义了一个空数组。以后要添加数组元素,就用:
<数组名>[<下标>] = ...;
如果想在定义数组的时候直接初始化数据,请用:
var <数组名> = new Array(<元素1>, <元素2>, <元素3>...);10/16/201835JavaScript 36. Array 数组例如,var myArray = new Array(1, 4.5, 'Hi'); 定义了一个数组 myArray,里边的元素是:myArray[0] == 1; myArray[1] == 4.5; myArray[2] == 'Hi'。
注意:JavaScript只有一维数组!要使用多维数组,请用这种虚拟法:
var myArray = new Array(new Array(), new Array(), new Array(), ...);
其实这是一个一维数组,里边的每一个元素又是一个数组。调用这个“二维数组”的元素时:myArray[2][3] = ...;10/16/201836JavaScript 37. Array 数组属性
length 用法:<数组对象>.length;返回:数组的长度,即数组里有多少个元素。它等于数组里最后一个元素的下标加一。想添加一个元素,只需要:myArray[myArray.length] = ...
方法
1.join() 用法:<数组对象>.join(<分隔符>);返回一个字符串,该字符串把数组中的各个元素串起来,用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。2.reverse() 用法:<数组对象>.reverse();使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法,它将使数组变成:[3, 2, 1]。 10/16/201837JavaScript 38. Array 数组3.slice() 用法:<数组对象>.slice(<始>[, <终>]);返回一个数组,该数组是原数组的子集,始于<始>,终于<终>。如果不给出<终>,则子集一直取到原数组的结尾。4.sort() 用法:<数组对象>.sort([<方法函数>]);使数组中的元素按照一定的顺序排列。如果不指定<方法函数>,则按字母顺序排列。10/16/201838JavaScript 39. 作为数组的对象在 Jscript 中,对象和数组几乎是以相同的方式处理的。对象和数组均可以被赋予任意值,实际上数组只是一种特殊的对象。数组和对象的区别在于数组有一个“奇妙的” length 属性,而对象没有。例如,myArray[100] = "hello" — 然后 length 属性将自动地被更新为 101(新长度)。同样,如果修改数组的 length 属性,将删除不再是数组部分的元素。
10/16/201839JavaScript 40. Array 数组(示例Array.html )var iMaxNum = 5;// 循环计数
var i, j;
// 新数组。由于数组从 0 开始计数, 而不是 1,所以数组大小为 iMaxNum + 1。
var MultiplicationTable = new Array(iMaxNum + 1);
// 为每个主要的数做循环(表中的每一行)
for (i = 1; i <= iMaxNum; i++){
MultiplicationTable[i] = new Array(iMaxNum + 1);// 生成表中的列
// 将乘法的结果存在行中
for (j = 1; j <= iMaxNum; j++){
MultiplicationTable[i][j] = i * j;
}
}
window.alert(MultiplicationTable[3][4]); // 显示 12
window.alert(MultiplicationTable[5][2]); // 显示 10
window.alert(MultiplicationTable[1][4]); // 显示 410/16/201840JavaScript 41. MathMath 对象,提供对数据的数学计算。 用法为 “Math.<名>”这种格式。
属性
1.E 返回常数 e (2.718281828...)。2.LN2 返回 2 的自然对数 (ln 2)。3.LN10 返回 10 的自然对数 (ln 10)。4.LOG2E 返回以 2 为低的 e 的对数 (log2e)。5.LOG10E 返回以 10 为低的 e 的对数 (log10e)。6.PI 返回π(3.1415926535...)。7.SQRT1_2 返回 1/2 的平方根。8.SQRT2 返回 2 的平方根。10/16/201841JavaScript 42. Math方法
1.abs(x) 返回 x 的绝对值。2.acos(x) 返回 x 的反余弦值(余弦值等于 x 的角度),用弧度表示。3.asin(x) 返回 x 的反正弦值。4.atan(x) 返回 x 的反正切值。5.atan2(x, y) 返回复平面内点(x, y)对应的复数的幅角,用弧度表示,其值在 -π 到 π 之间。10/16/201842JavaScript 43. Math6.ceil(x) 返回大于等于 x 的最小整数。7.cos(x) 返回 x 的余弦。8.exp(x) 返回 e 的 x 次幂 (ex)。9.floor(x) 返回小于等于 x 的最大整数。10.log(x) 返回 x 的自然对数 (ln x)。11.max(a, b) 返回 a, b 中较大的数。10/16/201843JavaScript 44. Date日期这个对象可以储存任意一个日期,从 0001 年到 9999 年,并且可以精确到毫秒数(1/1000 秒)。在内部,日期对象是一个整数,它是从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫秒数。如果所指日期比 1970 年早,则它是一个负数。所有日期时间,如果不指定时区,都采用“UTC”(世界时)时区,它与“GMT”(格林威治时间)在数值上是一样的。
定义一个日期对象:
var d = new Date();
这个方法使 d 成为日期对象,并且已有初始值:当前时间。10/16/201844JavaScript 45. Date日期如果要自定初始值,可以用:
var d = new Date(99, 10, 1); //99 年 10 月 1 日 var d = new Date('Oct 1, 1999'); //99 年 10 月 1 日
等等方法。
方法
以下有很多“g/set[UTC]XXX”这样的方法,它表示既有“getXXX”方法,又有“setXXX”方法。“get”是获得某个数值,而“set”是设定某个数值。如果带有“UTC”字母,则表示获得/设定的数值是基于 UTC 时间的,没有则表示基于本地时间或浏览期默认时间的。
10/16/201845JavaScript 46. Date日期1.g/set[UTC]FullYear() 返回/设置年份,用四位数表示。如果使用“x.set[UTC]FullYear(99)”,则年份被设定为 0099 年。
g/set[UTC]Year() 返回/设置年份,用两位数表示。设定的时候浏览器自动加上“19”开头,故使用“x.set[UTC]Year(00)”把年份设定为 1900 年。
2.g/set[UTC]Month() 返回/设置月份。
3.g/set[UTC]Date() 返回/设置日期。
4.g/set[UTC]Day() 返回/设置星期,0 表示星期天。
5.g/set[UTC]Hours() 返回/设置小时数,24小时制。
6.g/set[UTC]Minutes() 返回/设置分钟数。
7.g/set[UTC]Seconds() 返回/设置秒钟数。
8.g/set[UTC]Milliseconds() 返回/设置毫秒数。10/16/201846JavaScript 47. Date日期9.g/setTime() 返回/设置时间,该时间就是日期对象的内部处理方法:从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫秒数。
10.getTimezoneOffset() 返回日期对象采用的时区与格林威治时间所差的分钟数。在格林威治东方的市区,该值为负,例如:中国时区(GMT+0800)返回“-480”。
11.toString() 返回一个字符串,描述日期对象所指的日期。这个字符串的格式类似于:“Fri Jul 21 15:43:46 UTC+0800 2000”。
12.toLocaleString() 返回一个字符串,描述日期对象所指的日期,用本地时间表示格式。
13.toUTCString() 返回一个字符串,描述日期对象所指的日期,用 UTC 格式。
14.parse() 用法:Date.parse(<日期对象>);返回该日期对象的内部表达方式。10/16/201847JavaScript 48. 创建自己的对象使用JavaScript可以创建自己的对象。虽然JavaScript内部和浏览器本身的功能已十分强大,但JavaScript还是提供了创建一个新对象的方法。使其不必像超文本标识语言那样,求于或其它多媒体工具,就能完成许多复杂的工作。
在JavaScript中创建一个新的对象是十分简单的。首先它必须定义一个对象,而后再为该对象创建一个实例。这个实例就是一个新对象,它具有对象定义中的基本特征。
10/16/201848JavaScript 49. 自定义构造函数 我们已经知道,Array(),Image()等构造函数能让我们构造一个变量。其实我们自己也可以写自己的构造函数。自定义构造函数也是用 function。在 function 里边用 this 来定义属性。
function <构造函数名> [(<参数>)] { ... this.<属性名> = <初始值>; ...}
然后,用 new 构造函数关键字来构造变量:
var <变量名> = new <构造函数名>[(<参数>)];
构造变量以后,<变量名>成为一个对象,它有它自己的属性——用 this 在 function 里设定的属性。10/16/201849JavaScript 50. 自定义对象 10/16/201850JavaScript 51. 自定义构造函数 例如,下面的示例为 pasta 对象定义了构造函数。注意 this 关键字的使用,它指向当前对象。
// pasta 是有四个参数的构造器。
function pasta(grain, width, shape, hasEgg){
this.grain = grain; // 是用什么粮食做的?
this.width = width; // 多宽?(数值)
this.shape = shape; // 横截面形状?(字符串)
this.hasEgg = hasEgg; // 是否加蛋黄?(boolean)
this.toString = pastaToString;
// 这里添加 toString 方法(如下定义)。
// 注意在函数的名称后没有加圆括号;
// 这不是一个函数调用,而是对函数自身的引用。
}10/16/201851JavaScript 52. 自定义构造函数 // 实际的用来显示 past 对象内容的函数。
function pastaToString()
{
// 返回对象的属性。
return "Grain: " + this.grain + "\n" +
"Width: " + this.width + "\n" +
"Shape: " + this.shape + "\n" +
"Egg?: " + Boolean(this.hasEgg);
}
10/16/201852JavaScript 53. 使用自己的对象定义了对象构造器后,用 new 运算符创建对象实例。
var spaghetti = new pasta("wheat", 0.2, "circle", true);
// 将调用 toString() 并显示 spaghetti 对象 的属性。
window.alert(spaghetti);
10/16/201853JavaScript 54. expando属性可以给对象实例添加属性(expando属性) 以改变该实例,但是用相同的构造器生成的其他对象定义中并不包括这些属性,而且除非你特意添加这些属性那么在其他实例中并不显示出来。
spaghetti.color = "pale straw";
spaghetti.drycook = 7;
spaghetti.freshcook = 0.5;
var chowFun = new pasta("rice", 3, "flat", false);
// chowFun 对象或其他现有的 pasta 对象
// 都没有添加到 spaghetti 对象的三个新属性。10/16/201854JavaScript 55. 使用原型对象如果要将对象所有实例的附加属性显示出来,必须将它们添加到构造函数或构造器原型对象中。
例如: 将属性‘foodgroup’加到 pasta 原型对象 中,这样 pasta 对象的所有实例都可以有该属性, 包括那些已经生成的实例。
pasta.prototype.foodgroup = "carbohydrates"
现在 spaghetti.foodgroup、chowFun.foodgroup,等等 均包含值“carbohydrates”。10/16/201855JavaScript 56. 使用原型对象例如,如果想要能够删除字符串的前后空格(与 VBScript 的 Trim 函数类似),就可以给 String 原型对象创建自己的方法。
String.prototype.trim = function(){
// 用正则表达式将前后空格用空字符串替代。
return this.replace(/(^\s*)|(\s*$)/g, "");
}
var s = " leading and trailing spaces ";
// 显示 " leading and trailing spaces (35)"
window.alert(s + " (" + s.length + ")");
// 删除前后空格
s = s.trim();
// 显示"leading and trailing spaces (27)"
window.alert(s + " (" + s.length + ")");10/16/201856JavaScript 57. 数组和对象通常,使用点运算符“.”访问对象的属性。例如,
myObject.aProperty
也可以用索引运算符“[]”访问对象的属性。在这里,是把对象看作一个关联数组。关联数组是一种数据结构,它可以动态地将任意的数据的值与任意的字符串相关联。例如
myObject["not a valid identifier"]= "This is the property value";
myObject[100] ="100";
索引“[]” 字符串文字 能被作为数据处理
在运行之前并不知道属性名称时,这个差异会有用(比如基于用户输入构造对象时)。要想从一个关联数组提取所有的属性,必须用 for … in 循环。10/16/201857JavaScript 58. 数组和对象由于所有的数组也是对象,也支持expando属性。请注意,虽然如此,添加的属性并不以任何方式与 length 属性相交互。例如:
// 三个元素的数组
var myArray = new Array(3);
myArray[0] = "Hello";
myArray[1] = 42;
myArray[2] = new Date(2000, 1, 1);
window.alert(myArray.length);// 显示数组的长度 3
myArray.expando = "JScript!";// 添加某些 expando 属性
myArray["another Expando"] = "Windows";
// 仍然显示 3,因为两个 expando 属性,并不影响长度。
window.alert(myArray.length);10/16/201858JavaScript 59. with 语句为一个或一组语句指定默认对象。
用法:with (<对象>) <语句>;
with 语句通常用来缩短特定情形下必须写的代码量。在下面的例子中,请注意 Math 的重复使用:
x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10); y = Math.tan(14 * Math.E);
当使用 with 语句时,代码变得更短且更易读:
with (Math) { x = cos(3 * PI) + sin(LN10); y = tan(14 * E); }10/16/201859JavaScript 60. 宿主对象使用浏览器的内部对象系统(宿主对象), 可实现与HTML文档进行交互。它的作用是将相关元素组织包装起来,提供给程序设计人员使用,从而减轻编程人的劳动,提高设计Web页面的能力。
浏览器对象(Navigator)
提供有关浏览器的信息
窗口对象(Windows)
Window对象处于对象层次的最顶端,它提供了处理Navigator窗口的方法和属性。
位置对象(Location)
Location对象提供了与当前打开的URL一起工作的方法和属性,它是一个静态的对象。
历史对象(History)
History对象提供了与历史清单有关的信息。
文档对象(Document)
document对象包含了与文档元素(elements)一起工作的对象,它将这些元素封装起来供编程人员使用。10/16/201860JavaScript 61. 一个获取浏览器版本号的程序该程序首先显示一个波浪一提示信息。之后显示浏览器的版本号有关信息。
例:navigator.htm
document.write("浏览器名称: "+navigator.appName+" ");
document.write("版本号: "+navigator.appVersion+" ");
document.write("代码名字: "+navigator.appCodeName+" ");
document.write("用户代理标识: "+navigator.userAgent);
10/16/201861JavaScript 62. 文档对象(Document)write() 显示信息最常用的方式。该方法用一个字符串作为其参数,并在浏览器中显示。该字符串可以是普通文本或 HTML。
document.write(' ');
writeln( ) 方法与 write( ) 方法几乎一样,差别仅在于是前者将在所提供的任何字符串后添加一个换行符。在 HTML 中,这通常只会在后面产生一个空格;不过如果使用了 和 标识,这个换行符会被解释,且在浏览器中显示。
clear() 该方法也将清除您的脚本(随文档的其他部分一起),因此要特别注意该方法的使用方式及在什么时候使用该方法。
document.clear();
close() 关闭文档流,在实现多个文档对象中,必须使用close()来关闭一个对象后,才能打开另一个文档对象。10/16/201862JavaScript 63. 文档对象(Document)document对象包含了与文档元素(elements)一起工作的对象,它将这些元素封装起来供编程人员使用。
在document中主要有:links,anchor,form等三个最重要的对象:
10/16/201863JavaScript 64. 文档对象(Document)(1)anchor锚对象:
anchor对象指的是 标识在HTML源码中存在时产生的对象。它包含着文档中所有的anchors信息。
(2)链接links对象
link对象指的是用 标记的连接一个超文本或超媒体的元素作为一个特定的URL。
(3)窗体(Form)对象
窗体对象是文档对象的一个元素,它含有多种格式的对象储存信息,使用它可以在JavaScript脚本中编写程序进行文字输入,并可以用来动态改变文档的行为。通过document. Forms[]数组来使得在同一个页面上可以有多个相同的窗体,使用forms[]数组要比使用窗体名字要方便得多。10/16/201864JavaScript 65. 文档对象(Document)document对象中的attribute属性,主要用于在引用Href标识时,控制着有关颜色的格式和有关文档标题、文档原文件的URL以及文档最后更新的日期。这部分元素的主要含义如下:
(1)链接颜色:alinkcolor
这个元素主要用于,当选取一个链接时,链接对象本身的颜色就按alinkcolo r指定改变。
(2)链接颜色:linkcolor
当用户使用 Text string 链接后,Textstring的颜色就会按Linkcolor所指定的颜色更新。
(3)浏览过后的颜色:VlinkColor
该属性表示的是已被浏览存储为已浏览过的链接颜色。
(4)背景颜色:bgcolor
该元素包含文档背景的颜色。
(5)前景颜色:Fgcolor
该元素包含HTML文档中文本的前景颜色。10/16/201865JavaScript 66. 文档对象(Document)(例:Test6_2.htm)下面我们通过一个例子来说明文档对象的综合应用。输出结果见图所示。10/16/201866JavaScript 67. 事件驱动及事件处理事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性。
事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应。
其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行下去。
事件的处理程序可以是任意 JavaScript 语句,但是我们一般用特定的自定义函数(function)来处理事情。 10/16/201867JavaScript 68. 指定事件处理程序方法一 直接在 HTML 标记中指定。
<标记 ... ... 事件="事件处理程序" [事件="事件处理程序" ...]>
让我们来看看例子:
这样的定义标记,能使文档读取完毕的时候弹出一个对话框,写着“网页读取完成,请慢慢欣赏”;在用户退出文档(或者关闭窗口,或者到另一个页面去)的时候弹出“再见”。 10/16/201868JavaScript 69. 指定事件处理程序方法二 编写特定对象特定事件的 JavaScript。这种方法用得比较少,但是在某些场合还是很好用的。
例:
10/16/201869JavaScript 70. 指定事件处理程序方法三 用特定的自定义函数处理。方法:
<事件主角 - 对象>.<事件> = <事件处理程序>;
用这种方法要注意的是,“事件处理程序”是真正的代码,而不是字符串形式的代码。如果事件处理程序是一个自定义函数,如无使用参数的需要,就不要加“()”。例:
10/16/201870JavaScript 71. 窗口对象(window)窗口对象中的属性主要用来对浏览器中存在的各种窗口和框架的引用,其主要属性有以下几个:
(1)frames 确文档中帧的数目
frames(帧)作为实现一个窗口的分隔操作,起到非常有用的作用,在使用注意以下几点:
frames属性是通过HTML标识的顺序来引用的,它包含了一个窗口中的全部帧数。
帧本身已是一类窗口,继承了窗口对象所有的全部属性和方法。
(2)Parent 指明当前窗口或帧的父窗口。
(3)defaultstatus:默认状态,它的值显示在窗口的状态栏中。
(4)status:包含文档窗口中帧中的当前信息。
(5)top:包括的是用以实现所有的下级窗口的窗口。
(6)window.指的是当前窗口
(7)self:引用当前窗口。10/16/201871JavaScript 72. 窗口对象(window)alert 方法 希望对用户显示的文本字符串。该字符串不是 HTML 格式。该消息框提供了一个“确定”按钮让用户关闭该消息框,并且该消息框是模式对话框,也就是说,用户必须先关闭该消息框然后才能继续进行操作。
window.alert("欢迎!请按“确定”继续。");
10/16/201872JavaScript 73. 窗口对象(window)confirm()方法 弹出确认消息框
使用确认消息框可向用户问一个“是-或-否”问题,并且用户可以选择单击“确定”按钮或者单击“取消”按钮。confirm 方法的返回值为 true 或 false。该消息框也是模式对话框:用户必须在响应该对话框(单击一个按钮)将其关闭后,才能进行下一步操作。
var truthBeTold = window.confirm("单击“确定”继续。单击“取消”停止。");
if (truthBeTold) {
window.alert("欢迎访问我们的 Web 页!");
} else window.alert("再见啦!");10/16/201873JavaScript 74. 窗口对象(window)prompt()方法 提示消息框
提示消息框提供了一个文本字段,用户可以在此字段输入一个答案来响应您的提示。该消息框有一个“确定”按钮和一个“取消”按钮。如果您提供了一个辅助字符串参数,则提示消息框将在文本字段显示该辅助字符串作为默认响应。否则,默认文本为 ""。
var theResponse = window.prompt("欢迎?","请在此输入您的姓名。");
10/16/201874JavaScript 75. 窗口对象(例:Test7_1.htm)Var test=window.prompt("请输入数据:");
document.write("JavaScript输入输出的例子:"+test+" ");
从上面程序可以看出:
可通过write()和prompt()方法实现交互。
在JavaScript脚本语言中可以使用HTML标识语言的代码。从而实现混合编程。10/16/201875JavaScript 76. 窗口对象(window)open()方法 创建一个新窗口
使用window.open(参数表)方法可以创建一个新的窗口。其中参数表提供有窗口的主要特性和文档及窗口的命名。
打开一个窗口的基本格式:
Window .open("URL","窗口名字","窗口属性"]
10/16/201876JavaScript 77. 窗口对象的事件驱动窗口对象主要有装入Web文档事件onload和卸载时onunload事件。用于文档载入和停止载入时开始和停止更新文档。
onload 事件 发生在文档全部下载完毕的时候。全部下载完毕意味着不但 HTML 文件,而且包含的图片,插件,控件,小程序等全部内容都下载完毕。本事件是 window 的事件,但是在 HTML 中指定事件处理程序的时候,我们是把它写在标记中的。
onUnload 事件
当Web页面退出时引发onUnload事件,并可更新Cookie的状态。
应用于:window 对象
10/16/201877JavaScript 78. 窗口对象的事件驱动
10/16/201878JavaScript 79. 窗口对象的事件驱动 onresize 事件 发生在窗口被调整大小的时候。
应用于:window 对象
onerror 事件 发生在错误发生的时候。它的事件处理程序通常就叫做“错误处理程序”(Error Handler),用来处理错误。上边已经介绍过,要忽略一切错误,就使用:
function ignoreError() { return true;}window.onerror = ignoreError;
应用于:window 对象10/16/201879JavaScript 80. 窗体(Form)对象窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互,而用不着在之前首先进行数据输入,就可以实现动态改变Web文档的行为。
窗体(Form):它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体,使用Forms[]数组来实现不同窗体的访问。
10/16/201880JavaScript 81. 窗体(Form)对象
在Forms[0]中共有三个基本元素,而Forms[1]中只有两个元素。
窗体对象最主要的功能就是能够直接访问HTML文档中的窗体,它封装了相关的HTML代码:10/16/201881JavaScript 82. 窗体(Form)对象窗体对象最主要的功能就是能够直接访问HTML文档中的窗体,它封装了相关的HTML代码:
10/16/201882JavaScript 83. 窗体(Form)对象窗体对象的方法
窗体对象的方法只有一个--submit()方法,该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式:
document.mytest.submit()
窗体对象的属性
窗体对象中的属性主要包括以下:
elements name action target encoding method.
除Elements外,其它几个均反映了窗体中标识中相应属性的状态,这通常是单个窗体标识;而elements常常是多个窗体元素值的数组,例:
mytable.elements[1]10/16/201883JavaScript 84. 窗体(Form)对象访问窗体对象
在JavaScript中访问窗体对象可由两种方法实现:
(1)通过窗体名访问窗体
在窗体对象的属性中首先必须指定其窗体名,而后就可以通过下列标识访问窗体如:document.mytable。
(2)通过数组来访问窗体
除了使用窗体名来访问窗体外,还可以使用窗体对象数组来访问窗体对象。但需要注意一点,因窗体对象是由浏览器环境的提供的,而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问:
document.forms[0]
document.forms[1]
在JavaScript中要对窗体引用的条件是:必须先在页面中用标识创建窗体,并将定义窗体部分放在引用之前。10/16/201884JavaScript 85. 窗体(Form)对象(例:form.html)例:下面就是一个使用窗体数组和窗体名字的例子。该程序使得两个窗体中的字段内容保持一致。
其中用了OnChange事件(当窗体内容改变时激发)。第一个使用窗体名字标识my,第二个使用窗体数组Forms[]。其效果是一致。10/16/201885JavaScript 86. 窗体(Form)对象(例:Test7_2.htm)下列程序演示了你进入主页所停留的时间。
document.myform.clock.value = " " + iM + " 分 0" + iS + " 秒";
10/16/201886JavaScript 87. 窗体(Form)对象窗体中的基本元素
窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。
在JavaScript中要访问这些基本元素,必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下:
formName.elements[].methadName (窗体名.元素名或数组.方法)
formName.elemaent[].propertyName(窗体名.元素名或数组.属性) 10/16/201887JavaScript 88. 窗体(Form)对象的事件驱动onsubmit 事件 发生在表单的“提交”按钮被单击(按下并放开)的时候。可以使用该事件来验证表单的有效性。通过在事件处理程序中返回 false 值(return false)可以阻止表单提交。
onreset 事件 发生在表单的“重置”按钮被单击(按下并放开)的时候。通过在事件处理程序中返回 false 值(return false)可以阻止表单重置。
10/16/201888JavaScript 89. Text单行单列输入元素功能:对Text标识中的元素实施有效的控制。
基本属性:
Name:设定提交信息时的信息名称。对应于HTML文档中的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
defaultvalue:包括Text元素的默认值
基本方法:
blur():将当前焦点移到后台。
select():加亮文字。
主要事件:
onFocus:当Text获得焦点时,产生该事件。
OnBlur:从元素失去焦点时,产生该事件。
Onselect:当文字被加亮显示后,产生该文件。
onchange:当Text元素值改变时,产生该文件。10/16/201889JavaScript 90. Text单行单列输入元素(例:text.htm)
10/16/201890JavaScript 91. Select选择元素功能:实施对滚动选择元素的控制。
属性:
name:设定提交信息时的信息名称,对应文档select中的name。
Length:对应文档select中的length
options:组成多个选项的数组
selectIndex;该下标指明一个选项
select在中每一选项都含有以下属性:
Text:选项对应的文字
selected:指明当前选项是否被选中
Index:指明当前选项的位置
defaultselected:默认选项
事件:
OnBlur:当select选项失去焦点时,产生该文件。
onFocas:当select获得焦点时,产生该文件。
Onchange:选项状态改变后,产生该事件。10/16/201891JavaScript 92. Selectfunction Add(from, to){
var s1 = document.getElementById(from);
var s2 = document.getElementById(to);
for(var i = 0; i < s1.length; i++){
var option = s1.options[i];
if(option.selected){
var o = document.createElement("option");
o.text= option.text;
o.value = option.value;
s2.options.add(o) ;
s1.remove(option.index);
}
}
}
123
234
10/16/201892JavaScript 93. Button按钮元素功能:实施对Button按钮的控制。
属性:
Name:设定提交信息时的信息名称,对应文档中button的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
方法:
click()该方法类似于一个按下的按钮。
事件:
onclick当单击button按钮时,产生该事件。
10/16/201893JavaScript 94. Button按钮元素(例:button.htm)
10/16/201894JavaScript 95. checkbox检查框元素功能:实施对一个具有复选框中元素的控制。
属性:
name:设定提交信息时的信息名称。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
Checked:该属性指明框的状态true/false.
defauitchecked:默认状态
方法:
click()该方法使得框的某一个项被选中。
事件:
onclick:当框的选被选中时,产生该事件。10/16/201895JavaScript 96. radio单选按钮元素功能:实施对一个具单选功能的无线按钮控制。
属性:
name:设定提交信息时的信息名称,对应HTML文档中的radio的name相同
value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中的radio的name。
length:单选按钮中的按钮数目。
defalechecked:默认按钮。
checked:指明选中还是没有选中。
index:选中的按钮的位置。
方法:
chick():选定一个按钮。
事件:
onclick:单击按钮时,产生该事件。10/16/201896JavaScript 97. hidden:隐藏元素功能:实施对一个具有不显示文字并能输入字符的区域元素的控制。
属性:
name:设定提交信息时的信息名称,对应HTML文档的hidden中的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档hidden中的value。
defaleitvalue:默认值
10/16/201897JavaScript 98. Password密码元素功能:实施对具有口令输入的元素的控制。
属性:
Name:设定提交信息时的信息名称,对应HTML文档中password中的name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中password中的Value。
defaultvalu:默认值
方法
select():加亮输入口令域。
blur():使这丢失passward输入焦点。
focus():获得password输入焦点。10/16/201898JavaScript 99. 单击事件onClick当用户单击鼠标按钮时,产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生:
button(按钮对象)
checkbox(复选框)或(检查列表框)
radio (单选钮)
reset buttons(重要按钮)
submit buttons(提交按钮)
Image 对象;
Link 对象; 10/16/201899JavaScript 100. 单击事件onClick一个普通按钮对象(Button)通常会有 onclick 事件处理程序。按钮上添加 onclick 事件处理程序,可以模拟“另一个提交按钮”,方法是:在事件处理程序中更改表单的 action, target, encoding, method 等一个或几个属性,然后调用表单的 submit() 方法。
在 Link 对象的 onclick 事件处理程序中返回 false 值(return false),能阻止浏览器打开此连接。10/16/2018100JavaScript 101. onchange 事件 发生在文本输入区的内容被更改,然后焦点从文本输入区移走之后。捕捉此事件主要用于实时检测输入的有效性,或者立刻改变文档内容。应用于:
Password 对象;
Select 对象;
Text 对象;
Textarea 对象10/16/2018101JavaScript 102. 范例下面我们演示通过点击一个按钮(red)来改变窗口颜色,点击“调用动态按钮文档”调用一个动态按钮文档。
test8_1..htm
test8_2.htm
10/16/2018102JavaScript 103. 焦点事件选中事件onSelect
当Text或Textarea对象中的文字被加亮后,引发该事件。
获得焦点事件onFocus
当用户单击Text或textarea以及select对象时,产生该事件。此时该对象成为前台对象。
失去焦点onBlur
当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时,引发该文件,他与onFocas事件是一个对应的关系。
10/16/2018103JavaScript 104. 鼠标事件onmousedown 事件 发生在用户把鼠标放在对象上按下鼠标键的时候。
onmouseup 事件 发生在用户把鼠标放在对象上鼠标键被按下的情况下,放开鼠标键的时候。
应用于:Button 对象;Link 对象
onmouseover 事件 发生在鼠标进入对象范围的时候。
onmouseout 事件 发生在鼠标离开对象的时候。
应用于:Link 对象10/16/2018104JavaScript 105. 鼠标事件运用onmouseover 事件和 onmouseout 事件,再加上图片的预读,就可以做到当鼠标移到图像连接上,图像更改的效果了。有时我们看到,在指向一个连接时,状态栏上不显示地址,而显示其它的资料,看起来这些资料是可以随时更改的。它们是这样做出来的:
10/16/2018105JavaScript 106. 框架框架Frames最主要功用是"分割"视窗,使每个"小视窗"能显示不同的HTM L文件,不同框架之间可以互动(interact),这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames,第一个frame可显示书的目录,第二个frame则显示章节的具体内容。
框架可以将屏幕分割成不同的区域,每个区域有自己的URL,通过Frames[]数组对象来实现不同框架的访问。实际上框架对象本身也一类窗口,它继承了窗口对象的所有特征,并拥有所有的属性和方法。下面我们先看一下框架的例子。见图9-1所示。
10/16/2018106JavaScript 107. 框架10/16/2018107JavaScript 108. 框架
10/16/2018108JavaScript 109. 框架以上HTML标识将屏幕分成三个框架。先将窗口分成以二行为单位的窗口,之后再按分成二个窗口。并在相应的框架中放入自己的HTML文档。
通过[Framset ]告诉浏览器您要设置几个框架;rows这项参数告诉浏览器您想将视窗分割成几列;而 cols这项参数是告诉浏览器您想将视窗分割成几 行。
可以用很多组的 tags 将视窗分割得更复杂。
可以给每个frame一个"名字" (name)。frame的名字在JavaScript语法中的地位非常重要。
可以用 告诉浏览器您要载入哪一个 HTML文件。
10/16/2018109JavaScript 110. 如何访问框架在前面我们介绍过使用document.forms[]实现单一窗体中不同元素的访问。而要实现框架中多窗体的不同元素的访问,则必须使用window对象中的Frames属性。Frames属性同样也是一个数组,他在父框架集中为每一个子框架设有一项。通过下标实现不同框架的访问:
parent.frames[Index1].docuement.forms[index2]
通过parent.frames.length确定窗口中窗体的数目。
除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访:
parent.framesName.document.formNames.elementName.(m/p)
10/16/2018110JavaScript 111. 综合范例下面我们通过一个具体的实例, 来说明利用JavaScript脚本在WEB中实现更为复杂的信息交互。该例子是在一个多窗口中实现窗体信息的动态交互,在程序中首先在浏览器窗口中制作三个用于窗体交互的窗口,每个窗体窗口实现不同信息的动态交互。
tset9.html为主调用文档它首先将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体;
test9-1.html为显示标题文档;
test9_2.html为第二框架文档其中需要注意的是:
通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”;
test7_3.html为第三框架文档。
10/16/2018111JavaScript 112. 课后练习在网页上做一种可编辑的表格。正常情怳下它像一般的文本一样。当用鼠标点击它时就变成输入框并可编辑单元格的内容。然后当它失去焦点时又恢复成正常文本的样子。
实现省,市两个联动下拉框(levellist.htm)
实现可选项排序的 列表框(sortlist.htm)
10/16/2018112JavaScript 113. 补充练习实现可以相互交换元素的两个列表框(twolist.htm)
利用CSS和JavaScript实现的树形控件
10/16/2018113JavaScript