搜索
JavaScript脚本语言---高级应用内容提要•理解事件驱动机制•会使用常用的事件触发机制，如：OnClick、OnChange等事件•面向对象的程序设计的特性•常用对象处理语句：this、和new。•JavaScript内置对象：时间对象，Math对象、String对象和数组对象•JavaScript常用函数：parseInt、parseFloat、confirm()函数等•JavaScript中的对象层次及DOM模型的建立•Window对象•Location对象•History对象•Document对象事件的概念•事件是对象发送的消息，以发信号通知操作的发生。操作可能是由用户交互（例如鼠标单击）引起的，也可能是由某些其他的程序逻辑触发的。•JavaScript的事件处理机制就可以改变浏览器响应用户操作的标准方法，这样就可以开发出更加具有交互性和易用性的Web页面。•为什么要利用JavaScript的事件呢？主要有下面的两个用途：–1．验证用户输入窗体的数据。–2．增加页面的动感效果。常用事件onclick被点击ondbclick被双击Onchange(input-text)选中对象的值发生变化onfocus(input-text)成为焦点onblur(input-text)当对象失去焦点onkeydown键按下onkeypress字母数字键按下onkeyup键被释放实现JavaScript和HTML交互•一个利用JavaScript实现交互功能的WEB网页总是拥有三个部分的内容：–在Head部分定义一些JavaScript函数，其中的一些可能是事件处理函数，另外一些可能是为了配合这些事件处理函数而编写的普通函数。–HTML本身的各种控制标记。–拥有句柄属性的HTML标记，主要涉及到一些界面元素。这些元素可以把HTML同JavaScript代码相连。鼠标单击事件•是最最常见的事件，我们只要写JavaScript程序就会用到单击事件。•语法非常的简单：–onClick=函数或是处理语句5-1onSelect事件•onSelect事件就是当文本框的内容被选中的时候，发生的事件。•语法和刚才的Onclick事件比较类似：–onSelect=处理函数或是处理语句5-2onChange事件•Onchange事就是当文本框的内容改变并失去焦点的时候，发生的事件。•语法结构：–onChange=处理函数或是处理语句5-13处理下拉列表•当选中了下拉列表的一个元素的时候，如何用程序来实现根据不同的选项来处理不同的事件？–SELECTtype=selectname=select1size=3onchange=func1()–OPTIONvalue=select1selected北京/OPTION–OPTIONvalue=select2上海/OPTION–OPTIONvalue=select3广州/OPTION–/SELECT–ScriptLanguage=JavaScript–functionfunc1()–{–alert(你选择了+select1.value);–}–/Script5-4onfocus和onblur事件•onfocus事件就是当光标落在文本框中的时候，发生的事件。•Onblur事件就是对象元素失去焦点的时候发生的事件•语法结构：–onfocus=处理函数或是处理语句–onblur=处理函数或是处理语句5-3Onmousemove事件•Onmousemove事件是鼠标在指定元素范围之内移动是发生的事件。•例如实现在一个页面当中显示一条跟随鼠标移动的小鱼。–在该程序中首先使用层标记div将图片单独放在一层中，然后使用CSS层叠样式表定义该图片的位置，再与onmousemove事件结合，追踪鼠标的位置(event.x,event.y)，并随时用鼠标的位置修改对应图片的位置。onmouseover和onmouseout•Onmouseover事件：当鼠标悬停在对应元素上方的时候发生。•Omouseout事件：当鼠标移开的时候触发•语法结构：–onmouseover=处理函数或是处理语句–onmouseout=处理函数或是处理语句对象处理语句•This语句：–This语句符总是指当前对象，这同其他面向对象编程语言是一样的。面向对象基础•面向对象的设计方法被认为是一种比较成功和成熟的设计方法，广泛的引用在各种程序设计语言中。如：C++和Java时间对象•使用以前必须先申明：–varcurr=newDate();•主要的方法–getyYear(),getMonth(),…–setYear(),setMonth(),…–toLoacaleString();04-1日期及时间函数getYear():返回年数getMonth():返回月数getDate():返回日数getDay():返回星期几getHours():返回小时数getMinutes():返回分钟数getSeconds():返回秒数getTime():返回毫秒数setYear():设置年数setMonth():设置月数setDate():设置日数setDay():设置星期数setHours():设置小时数setMintes():设置分钟数setSeconds():设置秒数setTime():设置毫秒数04-2-3-4Math对象•内置的Math对象可以用来处理各种数学运算•可以利用直接调用的方法：–Math.数学函数（参数）•同时也可以利用with语句来调用，如下面的语法：–with(Math)–{–数学函数–}6-16-2Math对象绝对值：abs（）正弦余弦值：sin(),cos()反正弦反余弦:asin(),acos()正切反正切：tan(),atan()四舍五入：round()平方根：sqrt()基于几次方的值：Pow(base,exponent)6-3String对象•我们一般利用String对象提供的函数来处理字符串。String对字符串的处理主要提供了下列方法：–charAt(idx)：返回指定位置处的字符–indexOf(Chr)：返回指定子字符串的位置，从左到右。找不到返回-1–lastIndexOf(chr)：返回指定子字符串的位置，从右到左。找不到返回-1–toLowerCase()：将字符串中的字符全部转化成小写。–toUpperCase()：将字符串中的字符全部转化成大写。•注意：–这些返回值都是从零开始的。07JavaScript常用的函数•这些函数不从属于任何的对象•在JavaScript的任何地方都可以直接使用这些函数。•我们在此主要介绍几个最常用的函数：–parseInt()函数–parseFloat函数parseInt和parseFloat函数•parseInt函数功能：试图从一个字符串中提出一个整数。•ParseInt函数也可以附加一个整数n，可以返回n进制的一个整数。可以利用这个函数从字符串中提取二进制、八进制和十六进制的整数。•如果在字符串中除了数字、符号、小数点和指数符号以外的字符，parseInt就停止转换，返回已有的结果。•如果第一个字符就不可以转换，parseInt就返回”NaN”值，指示字符串中不存在数字。parseFloat函数和parseInt函数相似，只不过它转换的是浮点数。08-2-3•JavaScriptconfirm()函数•confirm函数语法confirm(str);•confirm函数返回值•Boolean值，当用户点击OK按钮时，返回true•当用户点击Cancel按钮时，返回false•通过返回值可以判断用户点击了什么按钮示例：if(confirm(“确定要删除吗？)){alert(“已删除);}else{alert(“未删除!);}DOM模型的建立•所谓DOM是指--文档对象模型•利用从属关系一级一级地定位•当我们要读取一个Form表单中的某一个元素的时候，如何来定位呢？这里就要用到DOM了Window对象•window对象是浏览器对象中其他大部分对象的共同的祖先，所以一般在JavaScript程序中可以省略window对象•常用window对象的方法–open(URL,windowName,parameterList)：open方法创建一个新的浏览器窗口，并在新窗口中载入一个指定的URL地址–close()：close方法关闭一个浏览器窗口–alert()：弹出一个消息框02Location对象•location对象是当前网页的URL地址。我们可以使用Location对象来让浏览器打开某页•具体的语法为–window.location=xxxx–这里的xxxx可以是一页也可以是一个网站的IP地址。具体请看下面的案例。03History对象•go函数语法•history.go(num);•go函数参数num--负数为后退指定的页数，正数为前进指定的页数示例ahref=javascript:history.go(-1);返回上一页/a04Document对象—方法•write方法•getElementById方法•getElementByName方法•getElementByTagName方法•对象属性document.title//设置文档标题等价于HTML的title标签document.bgColor//设置页面背景色document.fgColor//设置前景色(文本颜色)document.linkColor//未点击过的链接颜色document.alinkColor//激活链接(焦点在此链接上)的颜色document.vlinkColor//已点击过的链接颜色document.URL//设置URL属性从而在同一窗口打开另一网页document.fileCreatedDate//文件建立日期，只读属性document.fileModifiedDate//文件修改日期，只读属性document.charset//设置字符集简体中文:gb2312document.fileSize//文件大小，只读属性document.cookie//设置和读出cookie•常用对象方法document.write()//动态向页面写入内容document.createElement(Tag)//创建一个html标签对象document.getElementById(ID)//获得指定ID值的对象document.getElementsByName(Name)//获得指定Name值的对象getElementById()和getElementsByName()以及getElementsByTagName()的区别以及使用技巧：1、getElementById()getElementById()可以访问DOCUMENT中的某一特定元素，顾名思义，就是通过ID来取得元素，所以只能访问设置了ID的元素。比如说有一个DIV的ID为docid：程序代码divid=docid/div那么就可以用getElementById(docid)来获得这个元素。•2、getElementsByName()这个是通过NAME来获得元素，但不知大家注意没有，这个是GETELEMENTS，复数ELEMENTS代表获得的不是一个元素，为什么呢？因为DOCUMENT中每一个元素的ID是唯一的，但NAME却可以重复。打个比喻就像人的身份证号是唯一的（理论上，虽然现实中有重复），但名字重复的却很多。如果一个文档中有两个以上的标签NAME相同，那么getElementsByName()就可以取得这些元素组成一个数组。比如有两个DIV：程序代码divname=docnameid=docid1/divdivname=docnameid=docid2/div那么可以用getElementsByName(docname)获得这两个DIV，用getElementsByName