javascript基础入门

1、.,JavaScript,.,主要内容,了解JavaScript JavaScript入门 语言基础 内置对象 对象与DOM 图像处理 框架 表单与事件处理,.,一、了解JavaScript,1.了解JavaScript 2. JavaScript与Java 3.JavaScript与Java不同点 4.JavaScript工作流程 5.JavaScript可以做什么 6.JavaScript不可以做什么,.,了解JavaScript,是一种基于对象和事件驱动并具有安全性的解释性语言，其目的就是增强Web客户交互。弥补了HTML的缺陷。,页面,标准,行为,表示 CSS,结构 HTML,.,Ja

2、vaScript与Java,处于两家不同的公司，属于两种完全不同的产品。 Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合Internet应用程序开发，前生是Oak语言。 JavaScript是Netscape公司的产品，是一种可嵌入到WEB当中的基于对象和事件驱动的解释性语言，前生是LiveScript。,.,JavaScript与Java不同点,基于对象和面向对象 解释和编译 强变量和弱变量 代码格式不一样 嵌入方式不一样 静态联编和动态联编 （对象引用在运行时进行检查，对象引用必须在编译时的进行）,.,JavaScirpt可以做什么,使网页更具有交互性，给用户提供更好，更

3、令人兴奋的体验。 确保用户在表单中输入有效的信息，可以节省你的业务开支。 即时创建HTML页面。 还可以处理表单，设置cookie，创建基于Web的应用程序。,.,JavaScirpt不可以做什么,不允许读写客户机器上的文件。 不允许写服务器上的文件。 不能关闭不是由它打开的窗口。 不能从来自另一个服务器的已经打开的网页中读取信息。,.,二.JavaScript入门,1.脚本写在哪里？ 2.第一个JavaScript程序 3.在脚本中写注释 4.弹出对话框 5.关闭一个浏览器窗口,.,脚本写在哪里？, . . ,HTML文档, function HELLO() . ,src=,.,第一个Jav

4、aScript程序, document.write(Hello World!); ,.,在脚本中写注释,两种注释示例 /* */ 与 / /*This is an example of a long JavaScript comment.Note the characters at the beginning ending of the comment.*/ Function Emg() / This is writeMessage. ,.,弹出对话框,三种对话框 function DialogBox() ,/alert(welcome!); 一个按钮 / confirm(can you sp

5、eak english?);两个按钮 prompt (“how old are you?”,”23”);有默认回答，两个按钮,.,关闭一个浏览器窗口,两种关闭方式 标签关闭与按钮关闭,关闭窗口, function NVGClose() window.close(); ,.,三.语言基础,1.基本数据类型 常量 2.基本数据类型变量 3.转义字符 4.表达式 5.运算符 6.控制语句 7.JavaScript函数 8.错误处理,.,基本数据类型 常量,整型 只能储存整数。可以是正整数、0、负整数，可以是十进制、八进制、十六进制。八进制数的表示方法是在数字前加“0”，如“0123”表示八进制数“1

6、23”。十六进制则是加“0 x”：“0 xEF”表示十六进制数“EF”。 浮点型 即“实型”，能储存小数。有资料显示，某些平台对浮点型变量的支持不稳定。没有需要就不要用浮点型。 字符串型 是用引号“” “”、“ ”包起来的零个至多个字符，而且单双引号可嵌套使用。 布尔型 常用于判断，只有两个值可选：true（表“真”）和 false（表“假”）。true 和 false 是 JavaScript 的保留字。它们属于“常数”。,.,基本数据类型变量,变量的命名 变量的命名有以下要求： 1.只包含字母、数字和/或下划线； 2.要以字母开头； 3.不能太长； 4.不能使用JavaScript中的关键

7、字作为变量； 变量是区分大小写的，例如，variable 和 Variable 是两个不同的变量 变量需要声明 没有声明的变量不能使用，否则会出错：“未定义”。声明变量可以用： var = 变量作用域。全局变量是定义在所有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。,.,转义字符,由于一些字符在屏幕上不能显示，或者 JavaScript 语法上已经有了特殊用途，在要用这些字符时，就要使用“转义字符”。 转义字符用斜杠“”开头： 单引号、“ 双引号、n 换行符、r 回车。于是，使用转义字符，就可以做到引号多重嵌套：Micro 说

8、：”这里是“JavaScript 教程” 。,.,表达式,表达式在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常又叫称一个叫表达式来完成，可以说它是变量、常量、布尔及运算符的集合，因此表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。 var m=1+9; var m=“hello”+”world”; var m=100; var m=false;,.,运算符,1算术运算符 JavaScript中的算术运算符有单目运算符和双目运算符。 双目运算符： +（加） 、-（减）、 *（乘）、 /（除）、 %（取模） 、|（按位或）、 var n=3; var

9、bol=(mn)?m:n;,.,多目选择,基本格式解决多种条件判断 switch (e) case r1: （注意：冒号） . break; case r2: . break; default: . ,.,循环语句for,基本格式 for（初始化；条件；增量） 语句集； 功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体,.,循环语句while,基本格式 while（条件） 语句集； 该语句与For语句一样，当条件为真时，重复循环，否则退出循环。 *break和continue语句 与C+语言相同，使用break语句使得循环从For或while中跳出，continue使得跳过循环内剩

10、余的语句而进入下一次循环。,.,do-while循环,基本格式 do while(条件); 功能：do.while 循环与 while 循环相似，在循环的末尾检查条件，它总是至少运行一次。,.,forin循环,JScript 提供了一种特别的循环方式来遍历一个对象的所有用户定义的属性或者一个数组的所有元素。for.in 循环中的循环计数器是一个字符串，而不是数字。它包含当前属性的名称或者当前数组元素的下标。 / 创建具有某些属性的对象 var myObject = new Object(); myO = James; myObject.age = 22; myObject.

11、phone = 555 1234; / 枚举（循环）对象的所有属性 for (prop in myObject) / 显示 The property name is James，等等。 window.alert(The property + prop + is + myObjectprop); ,.,JavaScript函数,Function 函数名 （参数,变元） 函数体;. Return 表达式; 说明： 当调用函数时,所用变量或字面量均可作为变元传递。 函数由关键字Function定义。 函数名：定义自己函数的名字。 参数表，是传递给函数使用或操作的值，其值可以是常量 ，变量或其它表达式

12、。 通过指定函数名（实参）来调用一个函数。 必须使用Return将值返回。 函数名对大小写是敏感的,.,JavaScript函数,在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments .Length来检查参数的个数。 Function function_Name(exp1,exp2,exp3,exp4) Number =function _Name . arguments .length; if (Number1） document.wrile(exp2); if (Number2) docu

13、ment.write(exp3); if(Number3) document.write(exp4); ,.,错误处理,基本语句 try/throw/catch try 语句块 throw new Error(“”); catch(errMsg) alert(errMsg.message); ,eg: function Age() try var m=age; var n=20; document.write(parseInt(m)+n); /抛出语句 throw new Error(not a valid number); catch (errMsg) alert(errMsg.messag

14、e); ,.,四、内置对象,1.对象化编程 2.对象的基本知识 3.内置对象 4.String字符串 5.Array数组 6.Math 7.Date日期,8.全局对象 9.自定义构造函数 10.自定义对象 11.expando属性 12使用原型对象 13.数组对象 14.With语句,.,对象化编程,JavaScript语言是基于对象的（Object-Based），而不是面向对象的（object-oriented）。之所以说它是一门基于对象的语言，主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。 虽然J

15、avaScript语言是一门基于对象的，但它还是具有一些面向对象的基本特征。它可以根据需要创建自己 的对象，从而进一步扩大JavaScript的应用范围，增强编写功能强大的Web文文件。,.,对象的基本知识,对象是可以从 JavaScript“势力范围”中划分出来的一小块，可以是一段文字、一幅图片、一个表单（Form）等等。 每个对象有它自己的属性、方法和事件。 对象的属性是反映该对象某些特定的性质的，例如：字符串的长度、图像的长宽、文字框（Textbox）里的文字等等； 对象的方法能对该对象做一些事情，例如，表单的“提交”(Submit)，窗口的“滚动”(Scrolling)等等； 而对象的

16、事件就能响应发生在对象上的事情，例如提交表单产生表单的“提交事件”，点击连接产生的“点击事件”。 不是所有的对象都有以上三个性质，有些没有事件，有些只有属性。引用对象的任一“性质”用“.”这种方法。,.,内置对象,Microsoft Jscript 提供了 11 个内部（或“内置”）对象。它们是Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、Error 以及 String 对象。每一个对象有相关的方法和属性，这在语言参考中有详细的描述。,.,String字符串,属性 length 用法：.length；返回该字符串的长度

17、。 方法 charAt() 用法：.charAt()；返回该字符串位于第位的单个字符。注意：字符串中的一个字符是第 0 位的，第二个才是第 1 位的，最后一个字符是第 length - 1 位的。 charCodeAt() 用法：.charCodeAt()；返回该字符串位于第位的单个字符的 ASCII 码。 fromCharCode() 用法：String.fromCharCode(a, b, c.)；返回一个字符串，该字符串每个字符的 ASCII 码由 a, b, c. 等来确定。,.,String字符串,indexOf() 用法：.indexOf(, )；该方法从中查找（如果给出就忽略之前

18、的位置），如果找到了，就返回它的位置，没有找到就返回“-1”。所有的“位置”都是从零开始的。 lastIndexOf() 用法：.lastIndexOf(, )；跟 indexOf() 相似，不过是从后边开始找 。 split() 用法：.split()；返回一个数组，该数组是从中分离开来的，决定了分离的地方，它本身不会包含在所返回的数组中。例如：1 这样就定义了一个空数组。以后要添加数组元素，就用： = .; 注意这里的方括号不是“可以省略”的意思，数组的下标表示方法就是用方括号括起来。 如果想在定义数组的时候直接初始化数据，请用： var = new Array(, , .);,.,Arr

19、ay数组,例如，var myArray = new Array(1, 4.5, Hi); 定义了一个数组 myArray，里边的元素是：myArray0 = 1; myArray1 = 4.5; myArray2 = Hi。 但是，如果元素列表中只有一个元素，而这个元素又是一个正整数的话，这将定义一个包含个空元素的数组。 注意：JavaScript只有一维数组！千万不要用“Array(3,4)”这种愚蠢的方法来定义 4 x 5 的二维数组，或者用“myArray2,3”这种方法来返回“二维数组”中的元素。任意“myArray.,3”这种形式的调用其实只返回了“myArray3”。要使用多维数组

20、，请用这种虚拟法： var myArray = new Array(new Array(), new Array(), new Array(), .); 其实这是一个一维数组，里边的每一个元素又是一个数组。调用这个“二维数组”的元素时：myArray23 = .;,.,Array数组,属性 length 用法：.length；返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。所以，想添加一个元素，只需要：myArraymyArray.length = .。 方法 join() 用法：.join()；返回一个字符串，该字符串把数组中的各个元素串起来，用置于元素与元素之间

21、。这个方法不影响数组原本的内容。 reverse() 用法：.reverse()；使数组中的元素顺序反过来。如果对数组1, 2, 3使用这个方法，它将使数组变成：3, 2, 1。 slice() 用法：.slice(, )；返回一个数组，该数组是原数组的子集，始于，终于。如果不给出，则子集一直取到原数组的结尾。 sort() 用法：.sort()；使数组中的元素按照一定的顺序排列。如果不指定，则按字母顺序排列。在这种情况下，80 是比 9 排得前的。如果指定，则按所指定的排序方法排序。比较难讲述，这里只将一些有用的介绍给大家。,.,math,Math 对象，提供对数据的数学计算。 用法为 “M

22、ath.”这种格式。 属性 E 返回常数 e (2.718281828.)。 LN2 返回 2 的自然对数 (ln 2)。 LN10 返回 10 的自然对数 (ln 10)。 LOG2E 返回以 2 为低的 e 的对数 (log2e)。 LOG10E 返回以 10 为低的 e 的对数 (log10e)。 PI 返回（3.1415926535.)。 SQRT1_2 返回 1/2 的平方根。 SQRT2 返回 2 的平方根。,.,math,方法 abs(x) 返回 x 的绝对值。 acos(x) 返回 x 的反余弦值（余弦值等于 x 的角度），用弧度表示。 asin(x) 返回 x 的反正弦值。

23、atan(x) 返回 x 的反正切值。 atan2(x, y) 返回复平面内点(x, y)对应的复数的幅角，用弧度表示，其值在 - 到 之间。 ceil(x) 返回大于等于 x 的最小整数。 cos(x) 返回 x 的余弦。 exp(x) 返回 e 的 x 次幂 (ex)。 floor(x) 返回小于等于 x 的最大整数。,.,math,log(x) 返回 x 的自然对数 (ln x)。 max(a, b) 返回 a, b 中较大的数。 min(a, b) 返回 a, b 中较小的数。 pow(n, m) 返回 n 的 m 次幂 (nm)。 random() 返回大于 0 小于 1 的一个随机

24、数。 round(x) 返回 x 四舍五入后的值。 sin(x) 返回 x 的正弦。 sqrt(x) 返回 x 的平方根。 tan(x) 返回 x 的正切。,.,Date日期,这个对象可以储存任意一个日期，从 0001 年到 9999 年，并且可以精确到毫秒数（1/1000 秒）。在内部，日期对象是一个整数，它是从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫秒数。如果所指日期比 1970 年早，则它是一个负数。所有日期时间，如果不指定时区，都采用“UTC”（世界时）时区，它与“GMT”（格林威治时间）在数值上是一样的。 定义一个日期对象： var d = new Dat

25、e(); 这个方法使 d 成为日期对象，并且已有初始值：当前时间。,.,Date日期,如果要自定初始值，可以用： var d = new Date(99, 10, 1); /99 年 10 月 1 日 var d = new Date(Oct 1, 1999); /99 年 10 月 1 日 等等方法。 方法 以下有很多“g/setUTCXXX”这样的方法，它表示既有“getXXX”方法，又有“setXXX”方法。“get”是获得某个数值，而“set”是设定某个数值。如果带有“UTC”字母，则表示获得/设定的数值是基于 UTC 时间的，没有则表示基于本地时间或浏览期默认时间的。,.,Date日

26、期,g/setUTCFullYear() 返回/设置年份，用四位数表示。如果使用 “x.setUTCFullYear(99)”，则年份被设定为 0099 年。 g/setUTCYear() 返回/设置年份，用两位数表示。设定的时候浏览器自动加上“19”开头，故使用“x.setUTCYear(00)”把年份设定为 1900 年。 g/setUTCMonth() 返回/设置月份。 g/setUTCDate() 返回/设置日期。 g/setUTCDay() 返回/设置星期，0 表示星期天。 g/setUTCHours() 返回/设置小时数，24小时制。 g/setUTCMinutes() 返回/设置

27、分钟数。 g/setUTCSeconds() 返回/设置秒钟数。 g/setUTCMilliseconds() 返回/设置毫秒数。,.,Date日期,g/setTime() 返回/设置时间，该时间就是日期对象的内部处理方法：从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫秒数。如果要使某日期对象所指的时间推迟 1 小时，就用：“x.setTime(x.getTime() + 60 * 60 * 1000);”（一小时 60 分，一分 60 秒，一秒 1000 毫秒）。 getTimezoneOffset() 返回日期对象采用的时区与格林威治时间所差的分钟数。在格林威治东方

28、的市区，该值为负，例如：中国时区（GMT+0800）返回“-480”。 toString() 返回一个字符串，描述日期对象所指的日期。这个字符串的格式类似于：“Fri Jul 21 15:43:46 UTC+0800 2000”。 toLocaleString() 返回一个字符串，描述日期对象所指的日期，用本地时间表示格式。如：“2000-07-21 15:43:46”。 toGMTString() 返回一个字符串，描述日期对象所指的日期，用 GMT 格式。 toUTCString() 返回一个字符串，描述日期对象所指的日期，用 UTC 格式。 parse() 用法：Date.parse()；

29、返回该日期对象的内部表达方式。,.,全局对象,全局对象从不现形，它可以说是虚拟出来的，目的在于把全局函数“对象化”。在 Microsoft JScript 语言参考中，它叫做“Global 对象”，但是引用它的方法和属性从来不用“Global.xxx”（况且这样做会出错），而直接用“xxx”。 方法 eval() 把括号内的字符串当作标准语句或表达式来运行。 isFinite() 如果括号内的数字是“有限”的（介于 Number.MIN_VALUE 和 Number.MAX_VALUE 之间）就返回 true；否则返回 false。 isNaN() 如果括号内的值是“NaN”则返回 true

30、否则返回 false。 parseInt() 返回把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回“NaN”。,.,全局对象,parseFloat() 返回把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN”。 toString() 用法：.toString()；把对象转换成字符串。如果在括号中指定一个数值，则转换过程中所有数值转换成特定进制。 escape() 返回括号中的字符串经过编码后的新字符串。该编码应用于 URL，也就是把空格写成“%20”这种格式。“+”不被编码，如

31、果要“+”也被编码，请用：escape(., 1)。 unescape() 是 escape() 的反过程。解编括号中字符串成为一般字符串。,.,自定义构造函数,我们已经知道，Array()，Image()等构造函数能让我们构造一个变量。其实我们自己也可以写自己的构造函数。自定义构造函数也是用 function。在 function 里边用 this 来定义属性。 function () . this. = ; . 然后，用 new 构造函数关键字来构造变量： var = new (); 构造变量以后，成为一个对象，它有它自己的属性用 this 在 function 里设定的属性。,.,自定义

32、构造函数,例如，下面的示例为 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; / 这里添加 toStrin

33、g 方法（如下定义）。 / 注意在函数的名称后没有加圆括号； / 这不是一个函数调用，而是对函数自身的引用。 ,.,自定义构造函数,/ 实际的用来显示 past 对象内容的函数。 function pastaToString() / 返回对象的属性。 return Grain: + this.grain + n + Width: + this.width + n + Shape: + this.shape + n + Egg?: + Boolean(this.hasEgg); ,.,自定义对象, function Student(name) = name; this.get

34、Name = getName; function getName() return ; function Button1_onclick() var s = new Student(lijie, 20, asdad, 13971212); alert(s.getName(); alert(); ,.,使用自己的对象,定义了对象构造器后，用 new 运算符创建对象实例。 var spaghetti = new pasta(wheat, 0.2, circle, true); / 将调用 toString() 并显示 spaghetti 对象 的属性。 window.

35、alert(spaghetti);,.,expando属性,可以给对象实例添加属性(expando属性) 以改变该实例，但是用相同的构造器生成的其他对象定义中并不包括这些属性，而且除非你特意添加这些属性那么在其他实例中并不显示出来。 spaghetti.color = pale straw; spaghetti.drycook = 7; spaghetti.freshcook = 0.5; var chowFun = new pasta(rice, 3, flat, false); / chowFun 对象或其他现有的 pasta 对象 / 都没有添加到 spaghetti 对象的三个新属性。

36、,.,使用原型对象,如果要将对象所有实例的附加属性显示出来，必须将它们添加到构造函数或构造器原型对象中。 例如： 将属性foodgroup加到 pasta 原型对象 中，这样 pasta 对象的所有实例都可以有该属性， 包括那些已经生成的实例。 totype.foodgroup = carbohydrates 现在 spaghetti.foodgroup、chowFun.foodgroup，等等 均包含值“carbohydrates”。,.,使用原型对象,例如，如果想要能够删除字符串的前后空格（与 VBScript 的 Trim 函数类似），就可以给 String 原型对象创

37、建自己的方法。 Stotype.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.len

38、gth + );,.,数组和对象,通常，使用点运算符“.”访问对象的属性。例如， myObject.aProperty 也可以用索引运算符“”访问对象的属性。在这里，是把对象看作一个关联数组。关联数组是一种数据结构，它可以动态地将任意的数据的值与任意的字符串相关联。例如 myObjectnot a valid identifier= This is the property value; myObject100 =100; 索引“” 字符串文字 能被作为数据处理 在运行之前并不知道属性名称时，这个差异会有用（比如基于用户输入构造对象时）。要想从一个关联数组提取所有的属性，必须用 for in

39、循环。,.,数组和对象,由于所有的数组也是对象，也支持expando属性。请注意，虽然如此，添加的属性并不以任何方式与 length 属性相交互。例如： / 三个元素的数组 var myArray = new Array(3); myArray0 = Hello; myArray1 = 42; myArray2 = new Date(2000, 1, 1); window.alert(myArray.length);/ 显示数组的长度 3 myArray.expando = JScript!;/ 添加某些 expando 属性 myArrayanother Expando = Windows;

40、 / 仍然显示 3，因为两个 expando 属性，并不影响长度。 window.alert(myArray.length);,.,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 = t

41、an(14 * E); ,.,五.对象与DOM,1、宿主对象 2、浏览器对象(Navigator) 3、屏幕对象(screen) 4、窗口对象(Windows) 5、位置对象(Location) 6、历史对象(History) 7、文档对象(Document) 8、文档DOM 9、DOM结构图 10、添加节点 11、删除节点 12、插入节点 13、替换节点,.,宿主对象,使用浏览器的内部对象系统（宿主对象）, 可实现与HTML文档进行交互。它的作用是将相关元素组织包装起来，提供给程序设计人员使用，从而减轻编程人的劳动，提高设计Web页面的能力。 浏览器对象(Navigator) 提供有关浏览器

42、的信息 屏幕对象(screen) 反映了当前用户的屏幕设置 窗口对象(Windows) Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性。 位置对象(Location) Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象。 历史对象(History) History对象提供了与历史清单有关的信息。 文档对象(Document) document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。,.,浏览器对象(Navigator),属性： appCodeName：返回浏览器的代码名，

43、IE返回Mozilla appName：返回浏览器名，IE返回“Microsoft Internet Explorer” appVersion：返回浏览器版本，包括版本号、语言、操作平台等 language：返回浏览器编译语言 platform：返回操作平台 Navigator对象的plugin属性以数组表示已安装的外挂程序 description 外挂程序模块的描述 filename 外挂程序模块的文件名 length 外挂程序模块的个数 name 外挂程序模块的名称,.,浏览器对象(Navigator),Eg: var len = navigator.plugins.length; wit

44、h (document) write (你的浏览器共支持 + len + 种外挂插件：); write () write (外挂插件清单) write ( 名称描述文件名) for (var i=0; i + i + + + + navigator.pluginsi.description + + navigator.pluginsi.filename); ,.,屏幕对象(screen),属性 screen对象屏幕对象，描述屏幕的显示及颜色属性 availHeight 屏幕区域的可用高度 availWidth 屏幕区域的可用宽度 colorDep

45、th 颜色深度 256/8 16/16 32M/32 height 屏幕区域的实际高度 width 屏幕区域的实际宽度,.,屏幕对象(screen),Eg： if ( screen.width ,.,窗口对象(Windows),属性： name：窗口名称 status：改变状态栏的信息 self：当前窗口 top：最顶端的框架页 parent：窗口所属的框架页,.,窗口对象(Windows),Eg： function cfm() if (confirm(确定离开么?) /关闭当前窗口,下面两个方法都可以 /window.close(); self.close(); else return fa

46、lse ,.,窗口对象(Windows),window对象的open()方法：打开一个新窗口 参数： alwaysLowered 是否将窗口显示的堆栈后推一层 alwaysRaised 是否将窗口显示的堆栈上推一层 dependent 是否将该窗口与当前窗口产生依存关系 fullscreen 是否满屏显示 directories 是否显示连接工具栏 location 是否显示网址工具栏 menubar 是否显示菜单工具栏 scrollbars 是否显示滚动条,.,窗口对象(Windows),status 是否显示状态栏 titlebar 是否显示标题栏 toolbar 是否显示标准工具栏 re

47、sizable 是否可以改变窗口的大小 screenX 窗口左边界距离 screenY 窗口上边界距离 top 窗口上边界 width 窗口宽度 height 窗口高度 left 窗口左边界 outerHeight 窗口外边界的高度 personalbar 是否显示个人工具栏,.,位置对象(Location),属性： hash 锚点名称 host 主机名称 hostname host:port href 完整的URL字符串 pathname 路径 port 端口 protocol 协议 search 查询信息 方法： reload() 重新加载 replace() 用指定的网页取代当前网页，并

48、且当按下浏览器的 “后退”键时将不能返回原先的网页,.,位置对象(Location),Eg: ,.,历史对象(History),属性： current 当前历史记录的网址 length 存储在记录清单中的网址数目 next 下一个历史记录的网址 previous 上一个历史记录的网址 方法： back() 回到上一个历史记录中的网址（和按下“后退”键等效） forward() 回到下一个历史记录中的网址 （和按下“前进”键等效） go(整数或URL) 前往历史记录中的网址（如果整数x0，则前进x个地 址，如果整数x1) var lastGraf=allGraffs.item(allGrafs.

49、length-1) var docBody=document.getElementsByTagName(body)0 docBody.removeChild(lastGraf) ,.,插入节点,.insertBefore(newnode,oldnode) 释： 父节点下的.insertBefore()方法中，在原始节点前插入新的节点。,.,替换节点,.replaceChild(newnode,oldnode) 释： 父节点下的.replaceChild()方法中，用新节点替换原始的节点。,.,六.图像处理,1.翻转器（rollover） 2.低级翻转器 3.高级翻转器 4.链接式翻转器 5.三

50、状态翻转器,.,翻转器（rollover）,JavaScript实现的一种常见且有效的效果是，当用户将鼠标移动到图像上时，改变网页上的图像，从而让页面对用户的操作做出反应。这种称为翻转器（rollover）的效果很容易实现，而且有许多可以应用它的场合,.,低级翻转器, onmouseover=document.arrow.src=arrow_on.jpg onmouseout=document.arrow.src=arrow_off.jpg 释： 当鼠标移动到图片上或离开，重定向到另一张图片,缺点：察觉到延迟，需要下载,.,高级翻转器,window.onload=setup; function

51、 setup() var thisImage= document.images0;/获取图像 thisImage.outImage=new Image();/定义图像的属性为一图像 thisImage.outImage.src=thisImage.src;/定义属性指向的地址 thisImage.onmouseout=rollout;/调用事件 thisImage.overImage=new Image(); thisImage.overImage.src=arrow_on.jpg; thisImage.onmouseover=rollover; ,.,高级翻转器,function rollo

52、ut() this.src=this.outImage.src; function rollover() this.src=this.overImage.src; ,优点：一次性将图片下载到客户段 的内存当中，不会出现延时。,.,链接式翻转器,window.onload=setup; function setup() var thislinks= document.links0;/获取链接对象 thislinks.thisImage=document.images0;/定义属性 thislinks.outImage=new Image(); thislinks.outImage.src=thi

53、sImage.src; thislinks.onmouseout=rollout; thislinks.overImage=new Image(); thislinks.overImage.src=arrow_on.jpg; thislinks.onmouseover=rollover; ,.,链接式翻转器,function rollout() this.thisImage.src=this.outImage.src; function rollover() this.thisImage.src=this.overImage.src; ,.,三状态翻转器,三状态翻转器就是在高级翻转器中加入一条

54、点击的过程中出现的图片； thisImage.onclickImage=new Image(); thisImage.onclickImage.src=图片地址; thisImage.onclick=rollClick; function rollClick() this.src=this.onclickImage.src; ,.,七 .框架,1、框架概述 2、一个简单的框架 3、防止页面显示在框架中 4、迫使站点显示在框架中 5、创建和装载动态框架 6、在框架间共享函数 7、用javascript装载iframe,.,框架概述,框架由至少三个HTML页面组成。第一个页面称为框架集（frame

55、set），它设置每个子框架的尺寸。框架集在JavaScirpt中称为顶层页面（top）或父页面（parent）。,框架集,left 框架,content 框架,.,一个简单的框架, ,scrolling：是否显示滚动条 noresize:是否允许调整框架 大小,.,防止页面显示在框架中,抢劫,我的页面,新 闻网 页贴 吧知 道MP3图 片视 频 帮助 高级 空间 hao123 | 更多 把百度设为首页 企业推广 | 搜索风云榜 | 关于百度 | About Baidu 2008 Baidu 使用百度前必读 京ICP证030173号,百度一下,if(top.location!=self.loca

56、tion) top.location.replace(self.location); 注意：直接用top.location!=self.location IE的Back按钮不能用,防止,.,迫使站点显示在框架中,var framesetPage = frameset3.html; var currPage = justTheFilename(self.location.pathname); if (top.location = self.location 检查top.location是否与self.location相同,.,迫使站点显示在框架中,window.onload = chgFrame

57、; function chgFrame() if (top.location = self.location ,.,迫使站点显示在框架中,function justTheFilename(thisFile) if (thisFile.indexOf(/) -1) thisFile = thisFile.substring(thisFile.lastIndexOf(/)+1); if (thisFile.indexOf(?) = 0) thisFile = thisFile.substring(1); return thisFile; ,.,创建和装载动态框架,window.onload = in