部分-JavaScript程序设计.ppt

,JavaScript 程序设计入门,ASP.NET 程序设计 JavaScript设计基础,授课人： 代霞 Email： Tel：82878177 QQ：75085881,主体纲要,第一部分 JavaScript简介 第二部分 JavaScript组成 第三部分 JavaScript案例演示 第四部分 JavaScript编程简介 第五部分 JavaScript编程基础 第六部分 BOM（浏览器对象模型） 第七部分 DOM（文档对象模型）,第一部分 JavaScript简介,一、JavaScript的起源 1995年NetScape（网景浏览器）中出现，前身叫作 LiveScript，NetScape公司与Sun公司联手开发，为了利用 Java这个时髦记汇，将其更名为JavaScript。 JavaScript和Java根本就是两种语言！ 微软为了进军浏览器市场，开发了一个JavaScript的克隆 版，叫JScript。 1997年，JavaScript作为一个草案提交给ECMA（欧洲计 算机制造商协会），定义了ECMAScript.,二、JavaScript的特点 1、脚本编写语言 它是一种脚本语言，采用小程序段的方式进行编程。它 的基本结构形式如我们已学过的C#，但它不像C#必须先编 译，而网页在浏览器中运行时逐行被“翻译”，它与HTML标 签结合在一起。 2、跨平台性 JavaScript是依赖于浏览器本身，与操作系统无关。 3、基于对象 它是一种基于对象（Object Based）和事件驱动（Event Driver）的编程语言，它本身提供了非常丰富的内部对象供 设计人员使用。,4、用于客户端 事先在网页中编写好代码，此代码随HTML文件一起发 送到客户端的浏览器上，由浏览器对这些代码进行解释执 行，这样就减轻了服务器的负担。 三、JavaScript的作用 1. 校验用户输入内容； 2. 动态显示网页内容； 3. 为静态网页增加一些特效 4. AJAX程序的核心技术之一 如果你有一些编程经验，会觉得JavaScript比较熟悉，即 使没有任何编程经验，也没什么问题，网上有很多 JavaScript特效，你可以直接Copy进网页使用。,第二部分 JavaScript的组成,ECMAScript：不与任何具体浏览器相绑定，只描述以下内容：语法、类型、语句、关键字、保留字、运算符、对象。 DOM：文档对象模型，是HTML和XML的应用程序接口（API），DOM把整个页面规划成由节点层级构成的文档。, Sample Page Hello World! ,DOM通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。用DOM API可以轻松地删除、添加和替换节点。,BOM：浏览器对象模型，可以对浏览器窗口进行访问和操 作，由于没有相关的BOM标准，每种浏览器都有自己的 BOM实现。 主要实现： 弹出新的窗口； 移动、关闭浏览器窗口以及调整大小； 提供用户屏幕分辨详细信息的屏幕对象 .,第三部分 Java案例演示,1. 一些有趣的例子； 2. 见案例中的JavaScript各种特效.rar 3. 网络资源： 收录了很多JavaScript实现的特效； 4. 一个类似于Windows XP的网络操作系统界面，这也是 JavaScript与其他技术结合完成的 请用FireFox访问： ,第四部分 JavaScript编程简介,一、编辑软件 编辑JavaScript可以使用任何一种文本编辑器，例如记 事本，为降低JavaScript难度，我们使用1st JavaScript Editor，由于破解不完善，智能提示必须自己手工启动 菜单：Edit Preference TextEditor IntelliSense 二、调试器 使用VS.NET 2005，同样支持断点设置，F10、F11操作 但有两条必须注意：,设置IE中的Internet选项 将高级设置中的禁用脚本调试（Internet Explorer） （英文：Disable Script Debugging（Internet Explorer)关闭 在VS.NET 2005 IDE中直接运行 三、JavaScript的编写形式用函数写的代码不能马上执行 直接把JavaScript嵌入在HTML任何标签中 这里的document对象指的是当前的HTML文档,2. 使用JavaScript函数时，将函数定义在标签中JavaScrip可以放在任何位置,3. 使用单独的.js文件 在标签中链接外部.js文件 利用 ,Jscript.js内容,第五部分 JavaScript编程基础,一、JavaScript的变量 区分大小写，变量是弱类型的，ECMAScript中的变量无 特定的类型，变量的声明，使用关键字 var 可以随时改变变量所存数据的类型 var color=“red”; var num = 25; var visible = false; 这种特性在.NET 3.5框架中已被引入！ 与C#中的变量不同，变量并不一定要被初始化,var test; test=55; test=“hi”; 二、 原始类型 ECMAScript有5种原始类型（primitive type)：undefined、 null、boolean、number和string。 1、undefined类型 var oTemp； 声明的变量未初始化时，该变量的初始值是undefined. 函数（function）无明确,2 、null类型 用于尚未存在的对象，值undefined实际是从值null派生 的，ECMAScript把它们定义为相等 null = = undefined;/ 这个表达式返回true 3、 boolean类型 只有两个值 true和false; 4、 number类型 任何数字都被看作number类型的字面量 var num = 55; var num = 070；/56的八进制 var num = 0 x1f; /31的16进制 var num = 5.0;,有一个特殊的值是NaN，表示非数（Not a Number） 可以使用isNaN函数判断，例如 :isNaN(“blue”); 返回true 5、string类型 字符串类型 三、typeof运算符 对变量或值调用typeof运算符将返回下列的值之一： “undefined” 变量是undefined类型的 “boolean” 变量是boolean类型的 “number” 变量是number型的 “string” 变量是string型的 “object” 变量是一种引用类型或null类型 例： var i=2; alert(typeof(i); /得到number类型,四、 类型转换 （1）转换成字符串 3种主要的原始值 boolean、number和string都有toString 方法 （2）转换成数字 parseInt方法和parseflota方法 只有对string类型调用这些方法，它们才能正确运行；对其他类型都返回NaN; parseInt方法首先检查位置0处的字符，判断它是否是 个有效数字，若有效，再往下检查，直到发现非数字，并 返回前面的检查结果。 例：var num1 = parseInt(“1234”); /得到1234,var num2= parseInt（”1234blue”）;/返回1234 var num3 = parseInt (“blue”）; /返回NaN parseFloat的使用类似： var fnum1 = parseFloat（”1234blue”); /返回1234.0 var fnum2 = parseFloat (“blue”）;/返回NaN 五、 函数 1. 语法规则 function 函数名(参数1，参数2） return 值； ,说明： （1）JavaScript的函数与C#的方法或函数不同， function后面不需要定义返回值类型； （2）当使用多个参数时，参数间以逗号隔开； （3）JavaScript中函数的传递也是分两种，按值传递和 按引用传递； 2. argument对象 使用特殊对象arguments，开发者无需指出参数名，就能 访问它们。例如：,function SayHi() if(arguments0 =bye) return; alert(arguments0); ,调用形式1: SayHi(test); 调用形式2： SayHi(test”,123); ,与其他语言不同，ECMAScript不会验证传递给函数的参数的个数是否相等，函数可以接受任意个数的参数（Netscape的文档最多25个），而不会引发任何错误。,还可以在函数内使用argument.length属性检测参数个数 function HowManyArgs() alert(arguments.length); 利用arguments对象判断传递给函数的参数个数，即可模 拟函数重载。,六、事件驱动及事件处理 Event Drive：JavaScript是基于对象(object-based）的语 言，基于对象的基体特征，就是采用事件驱动（event drive) 事件：鼠标或键盘的动作； 事件驱动：由鼠标或键盘的动作引发的一连串程序的动作叫事件驱动（event drive） 事件处理程序（Event Handler）：通常由函数执行。 网页中的事件一般分为鼠标事件、键盘事件及其他事件。 1. 一些常用的事件,3. 用JavaScript处理事件 JavaScript语言与HTML文档相关联主要是通过“事件”， JavaScript的函数就是用于处理事件的程序，语法规则是： 事件 = “函数名”或 事件 = “JavaScript语句” 例如： （1） （2）也可以定义好函数后再调用 function message() alert(hello world); ,4. JavaScript练习 （1） 当装入HTML文档时调用LoadForm（）函数，而退出 该文档进入另一个HTML文档时则首先调用 UnLoadForm（）函数，确认后方可进入 LoadForm（）函数：提示用户“这是一个自动装载例子” UnLoadForm（）函数：提示用户“这是一个自动卸载的例子”, 无标题页 function LoadForm() alert(这是一个装载的例子); function UnLoadForm() alert(这是一个卸载的例子); 测试 ,（2）一个输入框中，当没有输入值时，提示用户：请输入！ 无标题页 function validate() if(user.value=) alert(请输入!); , 若要验证form中提交的数据 ,JavaScript脚本为： function validate() if(document.data.user.value=) alert(wrong); return false; ,七、 数组对象 1. JavaScript数组的定义 （1）新建一个长度为0的数组 var myArray= new Array（）; （2）长度为n的数组 var myArray = new Array(n); （3）新建一个指定长度的数组，并赋初值 var myArray = new Array(1,2,3); （4）访问数组的某个元素 myArray2=4; var i = myArray2;,2. 动态数组 JavaScript的数组的长度不是固定不变，若要增加数组的 长度，只要直接赋值。 例如： var myArray = new Array(1,2,3); myArray3 = 4; 这时myArray的长度为4 如果 var myArray = new Array(1,2,3); myArray4=4; 则长度为5,其中myArra3的值为undefined,3. 数组的常用属性和方法 （1）length属性：获取数组长度 （2）concat方法 例：var a = new Array(1,2,3); var b = new Array(4,5,6); alert(a.concat(b); /输出1,2,3,4,5,6 alert(a.length); /长度不变，仍为3 也可以直接连接数值 a.concat(4,5,6); （3）join方法，连接数组，缺省为”,” 例：var a = new Array(1,2,3); alert(a.join(); /输出1,2,3,也可用指定的符号连接，例 alert(a.join(“-”); （4）push方法，在数组的结尾添加一个或多个项，同时更 改数组的长度 例：var a = new Array(1,2,3); a.push(4,5,6); alert(a.length);/输出为6 （5）pop方法，删除最后一个数组项，将其作为函数值返 回 例：var a1=new Array(1,2,3); alert(a1.pop(); /输出3 alert(a1.length); /输出2,（6）shift方法:删除数组中的第一个项，将其作为函数值返 回 例如：var a1=new Array(1,2,3); alert(a1.shift(); /输出1 alert(a1.length); /输出2 （7）unshift方法:添加元素至数组开始处 例如： var a1=new Array(1,2,3); a1.unshift(4,5,6) alert(a1); /输出4,5,6,1,2,3,（8）slice方法：返回数组的片断。（或者说子数组）。有 两个参数，分别指定开始和结束的索引（不包括第二个参 数索引本身）。如果只有一个参数该方法返回从该位置开 始到数组结尾的所有项。如果任意一个参数为负的，则表 示是从尾部向前的索引计数。比如-1 表示最后一个，-3 表示倒数第三个。 var a1=new Array(1,2,3,4,5); alert(a1.slice(1,3); /输出2,3 alert(a1.slice(1); /输出2,3,4,5 alert(a1.slice(1,-1); /输出2,3,4 alert(a1.slice(-3,-2); /输出3,（9）splice方法：从数组中替换或删除元素。第一个参数 指定删除或插入将发生的位置。第二个参数指定将要删除 的元素数目，如果省略该参数，则从第一个参数的位置到 最后都会被删除。splice()会返回被删除元素的数组。如 果没有元素被删，则返回空数组。 例： var a1=new Array(1,2,3,4,5); alert(a1.splice(3); /输出4,5 alert(a1.length); /输出3 var a1=new Array(1,2,3,4,5); alert(a1.splice(1,3);/输出2,3,4 alert(a1.length); /输出2,（10）sort方法：数组排序 var a1=new Array(1,4,2,3,5); alert(a1.sort(); /输出1,2,3,4,5 另外它的sort方法可以指定比较函数，根据比较函数进行排序，例： function compare(a,b) return (b-a); var a1=new Array(1,4,2,3,5); alert(a1.sort(compare); /输出5,4,3,2,1 （11）reverse方法：将数组倒序,八、String对象主要属性和方法 例如：var myString = “This is a sample”; （1）charAt：返回字串对象在指定位置处的字符 myString.charAt(2)；/返回i （2）charCodeAt：返回字串对象在指定位置处字符的10进 制的ASCII码 myString.charCodeAt(2)；/返回105 （3）indexOf：要查找的字串在字串对象中的位置 myString.indexOf(“is”)；/返回2 （4）lastIndexOf：要查找的字串在字串对象中的最后位置 myString.lastIndexOf(“is”)；,（5）substr方法：截取字串 myString.substr(10,3)；/返回sam，其中10表示位置，3表示长度 （6）substring方法：截取字串 myString.substring(5,9)；/返回is a,其中5表示开始位置，9表示结束位置 （7）split方法：分隔字串到一个数组中 var a = myString.split( ); /a0 = “This” a1=“is” a2=“a” a3=“sample” （8）replace方法 myString.replace(“sample”,”apple”); /结果”This is a apple”,（9）toLowerCase方法：变成小写字母 myString.toLowerCase()；/ this is a sample （10）toUpperCase方法，变成大写字母 myString. toUpperCase();/THIS IS A SAMPLE （11）prototype属性 注：JavaScript中的string没有像C#中的Trim（）方 法，但可以利用prototype属性为其添加 例如，我们设计三个函数LTrim、RTrim、Trim分别剪 切字串的左边多余空格、右边多余空格、左右多余空格,function RTrim(str) var i= str.length-1; while(str.charAt(i) = ,function LTrim(str) var i =0; while(str.charAt(i) = ,function Trim(str) return(LTrim(RTrim(str); ,使用prototype属性为String类添加Trim方法 String.prototype.Trim = function() return Trim(this); 这里表示为String类添加了一个方法叫作Trim方法，这个 Trim方法调用Trim函数实现。 同理，还可以为String类添加LTrim和RTrim方法 String.prototype.LTrim = function() return LTrim(this); String.prototype.RTrim = function()return RTrim(this);,第六部分 BOM（浏览器对象模型）,它提供了独立于内容而与浏览器窗口进行交互的对象 一、体系结构,二、Window对象 导航和打开新窗口 使用window.open（）方法，该方法接受4个参数，即url、 新窗口的名字、特性字符串和说明是否用新载入的页面替 换当前载入的页面的boolean值，一般只用前三个. 特性字符串是用逗号分隔的设置列表，它定义新创建的 窗口的某些方面。 例： window.open(“1.htm”,”mywindow”,”height=150,width=300, top=10,left=10,resizable=yes”);,特性字符串设置,2. 关闭窗口 window.close(); 关闭前有的浏览器（IE）会提示。 系统对话框 （1）alert方法，显示一个警告框； （2）confirm方法 confirm（“你真的要删除么?”);,当用户点击确定，返回true，取消则返回false if(confirm(你真的要删除么？) alert(删除); else alert(不删除); （3）prompt方法 接受两个参数：显示文本和缺省答案,若点击确定，则返回输入值，取消则返回null值 var result= prompt(你的姓名, 黄波); if(result!=null) alert(result); 注：这三种对话框都是模式化的，即用户不操作，不能在浏览器中作任何操作!,4. 状态栏 使用window.status=“”设置状态栏信息； 5. 时间间隔和暂停 所谓暂停，是在指定的毫秒数后执行指定的代码。时间 间隔是指反复执行指定的代码，每次执行之间等待指定的 毫秒数。 （1）使用setTimeout实现暂停 setTimeout(“alert(hello)”,3000)； 或 setTimeout(函数名，3000);暂停的实践效果-3秒,function sayHello() alert(hello); 第一个参数使用函数指针或引用，例如 setTimeout(sayHello,3000); 若有参数，则必须 setTimeout(function()sayHello(1,2);,3000); 调用setTimeout时，会创建一个数字暂停ID，要取消可 使用clearTimeout，并把暂停ID传给它 var tid= setTimeout(sayHello,3000); clearTimeout(tid);,（2）使用setInterval定义间隔 用法与setTimeout基本类似，如 setInterval(sayHello,3000); 如果调用函数时要想传递参数，必须： setInterval(function()sayHello(1,2);,3000); 它也会创建间隔ID，若不取消，一直执行，直到页面卸 载为止，使用clearInterval取消 var sid= setInterval(sayHello,3000); clearInterval(sid);,6. 历史 后退： window.history.go（-1）; 后退一页 与此类推 window.history.go(-2)；后退两页 前进 window.history.go(1); 也可用： window.history.back();后退 window.history.forward();前进,三、document对象 这个对象比较独特，它既属于BOM，又属于DOM。 1. document对象集合,例如： 要访问body中的img图像，可用 document.images“imgHome” 访问表单中的输入框 document.forms“data”.txtEmail,这时这些对象的所有特性都变成了该对象的属性，可以进 行设置或读取，例如： function showMessage() alert(document.imagesimgHome.src); alert(document.formsdata.txtEmail.value); document.imagesimgHome.src=pop.gif; document.formsdata.txtEmail.value = 这是测试一下; document.write在第一行显示内容,2. write和writeln方法 这两个方法都接受一个字符串参数，在当前HTML文档 中输出字符串，唯一区别：writeln在字串末尾加一个（n） 动态引入.js文件的办法 document.write(); 注意：这种写法会导致错误，因为浏览器一遇到 ，它会假定其中代码是完整的（即使它出现字符串中). document.write(“” + “”); /正确写法，将分成两部分,四、location对象 导航 使用location.href= URL 属性 例： 重新载入 location.reload()；/重新从缓存中载入页面 location.reload(true); /重新从服务器载入页面 清空网页 location.href=“about:blank”;,五、frame对象 1. 框架实例：,2. 框架的使用 （1）创建普通的XHTML网页； （2）创建框架集文档 在框架集文档也是XHTML页面，在页面中指示网页浏 览器将窗口分为几个框架，并指定每一框架应显示哪个网 页。 要注意的是，框架集的XHTML所使用的DOCTYPE必 须是 XHTML 1.1不支持框架！,例1：在一个窗口下同时显示三个页面, 无标题页 ,框架集文档中，可以不使用body标签，必须使用 标签，它有两个属性cols和rows，cols表示按列分 布网页，rows表示按行分布网页。可以使用像素值或%，* 表示尽可能占据窗口的可用空间。同时使用标签， 利用其src属性指定链接的网页url。 对于不支持框架的浏览器，可以在标签中使用 来显示内容 例如： 这是浏览器不支持框架时显示的内容 ,例2：既有行显示，也有列显示,当框架中既有行显示，也有列显示时，必须使用框架标 签的嵌套 ,例3：框架的导航 在导航中地址栏的url是保持不变的,框架文件内容： 左边导航页面的内容： 淘宝网 新浪 ,这里表示在框架showframe中显示,3.框架中一些特别的属性 （1）控制边框 在每个标签中，使用属性frameborder=“0” frameborder=“0”不 显示，frameborder=1显示 （2）是否允许调整框架大小 在每个标签中，使用属性noresize=“noresize”控 制； （3）是否有滚动条 在每个标签中，使用属性scrolling=“yes/no/auto” 控制,4. 标签 它用来在一个HTML文档内部显示一个框架，例如, 这只是一个iframe的测试 ,5. 框架(frame）对象控制,上下框架：框架组窗口对象.document.body.rows=尺寸字串； 左右框架：框架组窗口对象.document.body.cols=尺寸字串； 例如：window.parent.document.body.rows=“50%,*”;,第七部分 DOM（文档对象模型）,DOM是文档对象模型(Document Object Model，是基于 浏览器编程的一套API接口，W3C出台的推荐标准，每个浏 览器都有一些细微的差别，其中以Mozilla的浏览器最与标 准接近，几乎支持所有的DOM Level 2，以及部分DOM Level 3。Opera和Safari也支持所有的DOM Level1和大部分 DOM Level 2。IE对DOM Level1的实现最差，还有待完 善！,一、访问指定节点 1. getElementsByTagName() 返回一个包含所有指定标签名的的集合 例如：返回文档中所有元素的列表： var oImgs = document.getElementsByTagName(img); 在把所有的img标签存储在oImgs中后，可以使用序号或 名称进行子项的访问 alert (oImgs0.tagName)；/ 输出标签名“IMG” 或 alert(oImgs“img1”.tagName); /img1为某个img的name属性,获取所有元素 在FireFox等浏览器下： var oAllElement = document. getElementsByTagName（“*”）； 在IE 6.0下： var oAllElement = document. all; /使用这句，可用来判断是否是IE浏览器 2. getElementsByName（） 用来获取所有name属性等于指定值的元素集合 例如：获取所有name属性等于”img1”的所有元素 var oImgs = document.getElementsByName(img1); alert(oImgs0.alt); /输出第一个元素的alt属性值,3. getElementById（） 返回id属性等于指定值的元素. 在HTML中，id是唯一 的，这也是从DOM文档树中获取单个指定元素的最快的方 法。 例如：获取id属性为img1的元素 var oImgs = document.getElementById(img1); alert(oImgs.alt); /输出找到元素的alt属性值 注：IE中有个严重的Bug! ,当var oImgs = document.getElementById(“img1”);时，由于 第一个img标签排在前面，它的name属性也为img1，使用这 个方法时，获得的却是第一个img标签对象，使用 alert(oImgs.src); /输出的是2.gif 二、处理元素属性 getAttribute 获取元素的某个属性 例如： var oImgs = document.getElementById(“img1”); alert(oImgs. getAttribute(“src”); setAttribute 设置元素的某个属性,例如： var oImgs = document.getElementById(“img1”); oImgs.setAttribute(src,test.gif); /设置图片对象的src属性为test.gif 3. removeAttribute 移除元素的某个属性 例如：相移除email中的value属性 可用 var iHid = document.getElementById(email); iHid.removeAttribute(“value”,1);/1表示忽略大小写 但这个方法在IE上工作不正常,三、一些高级DOM技术 动态修改文档内容 （1）使用innerHTML 用来读取、添加或删除指定标签中的内容，其中改变后 的内容也可以包括HTML标签 例如：页面源代码如下 ,读取 function test() var oDiv = document.getElementById(content); alert(oDiv.innerHTML); /输出： 修改 function test() var oDiv = document.getElementById(content); oDiv.innerHTML= ,（2）使用outerHTML 将删除指定的标签本身，把它替换成新的HTML内容 例如： function test() var oDiv = document.getElementById(content); oDiv.outerHTML=; 将删除div标签本身，将其替换成 注：这个方法仅IE支持,2. 样式表编程 （1）style对象 style对象包含与每个CSS样式对应的特性，虽然格式 不同，但它的样式属性有一定的规律，和CSS样式能对应 起来 例如： CSS样式特性 JavaScript样式属性 background-color style.backgroundColor color style.color font-family style.fontFamily,练习1： 在body中有个层div，其id为”content”，请实现一个翻转 效果，当鼠标放置在层上时，控制该层的背景色为蓝色， 鼠标离开时，层的背景恢复成红色。 层的设计： 要用到的事件为： onmouseover（放置）和onmouseout（离开）,function ChangeBlue() var oDiv = document.getElementById(content); oDiv.style.backgroundColor=Blue; function ChangeRed() var oDiv = document.getElementById(content); oDiv.style.backgroundColor=Red; ,练习2：,（2）访问内联样式表 但是，style对象用来读取样式时，只能获取在HTML标 签的Style属性中定义的CSS样式。当css样式是在标 签中定义或在外部的.css文件定义时，无法使用style对象获 取某个元素的Css样式。 例如： #Content height : 100px ; width : 200px ; background-color : red ; ,var oDiv = document.getElementById(Content); alert(oDiv.style.width); 打印出来的是空值,（3）获取标签样式表的集合 document.styleSheets可以代表样式表的集合。,document.styleSheets0代表1.css样式表集合 document.styleSheets1代表样式表集合 反之若标签排在标签前，则 document.styleSheets0代表样式表集合 document.styleSheets1代表1.css样式表集合,（4）获取样式表中规则的引用 DOM标准（FireFox和Safari)：使用cssRules集合； IE ：使用rules集合 var oCssRules = document.styleSheets0.cssRules|document.styleSheets0.rules; alert(oCssRules0.style.backgroundColor); /读取出第一个style标签中设置的第一个样式的背景色 当然，也可以通过程序进行设置 oCssRules0.style.backgroundColor=Gray; 注意：最好只修改单个元素的style对象，不要更改CSS规则 最简单的还是使用下面这种方式修改单独对象：,var oDiv = document.getElementById(Content); oDiv.style.backgroundColor=blue; （3）如何获取有选择器的CSS规则 比较复杂，请参看网页： （5）最终样式 在IE中 使用currentStyle对象 例如：获取div使用的最终颜色 var oDiv = document.getElementById(Content); alert(oDiv.currentStyle.backgroundColor);,注：所有currentStyle特性都是只读的，若赋值会引发错 误 DOM中的最终样式 使用 document.defaultView.getComputedStyle(oDiv ,null).backgroundColor可以获取 但取出来的颜色值在FireFox下表示成RGB形式,四、DOM获取标签的尺寸 假设 obj 为某个 HTML 标签，则 obj.offsetTop 指 obj 距离上方或上层控件的位置，整 型，单位像素。 obj.offsetLeft 指 obj 距离左方或上层控件的位置，整 型，单位像素。 obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素 obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素 其他还有类似的clientTop、scrollTop、clientHeight， 使用比较复杂，有兴趣的参看： ,练习1：,练习2：,练习3：,练习4： 复习框架 （1）控制页面导航：从一个框架中输入网页地址，然后在另一个框架中打开该地址； （2）清空网页 （3）向另外一个框架页写内容,JavaScript的其他使用,使用正则表达式进行验证： 正则表达式是一种用来描述一定数量文本的模式，你的 文本必须与这个模式匹配，例如：这个文本必须是中文 的，或者这个文本必须是数字并且只有6位. 参考资料： 常用正则表达式.doc 使用原则：先找到相应的正则表达式，例如验证email的 w+(-+.w+)*w+(-.w+)*.w+(-.w+)*,JavaScript验证： var emailReg= /w+(-+.w+)*w+(-.w+)*.w+(-.w+)*/; /在正则表达式前后各加一个”/” if(!emailReg.test(e) alert(“email不合法”); ,2. 标签 标签可包含任何HTML代码（除）。它 用在浏览器不支持或关闭JavaScript时，显示中定 义的内容，若浏览器支持或启用了JavaScript，将忽略其中 定义的HTML代码。 例：在中不支持JavaScript时 应启用 JavaScript，才能使用新极速风格。然而，JavaScript 似乎已被禁用，要么就是您的浏览器不支持 JavaScript。要使用新极速风格，请更改您的浏览器选项以启用 JavaScript，然后重新登陆。 ,3. 一些流行的JavaScript包： jQuery 参考资料 （1）中文官方论坛: （2）使用 jQuery 简化 Ajax 开发 Prototype DoJo,Thank you,Neusoft Institute of Information,谢谢,