JAVA多媒体03JavaScript.ppt

JavaScript,本章目标,javascript的基本语法自定义对象Javascript内建对象文档对象模型Javascript的各类事件,什么是 JavaScript,1.JavaScript 是一种解释型的、基于对象的脚本语言。2.JavaScript 是一种宽松类型的语言。宽松 类型意味着您不必显式定义变量的数据 类型。3.JavaScript程序是语句的集合。,JavaScript作为客户端程序嵌入网页,使用Script标记使用外部文件在事件处理程序中使用JavaScript在body即正文部分使用,Javascript使用方法示例,document.writeln(“hello world”);,引用外部脚本,Head节定义,BODY内使用,Javascript转义符,转义符是指将那些特殊的字符符号在javascript中表示。b退格t制表符f换页符n换行符r回车符(Enter)符号“符号符号,Javascript数据类型,数值型number 可为整数或浮点数字符串型string 用于保存文本数据布尔型boolean 只能是True或False对象型object 例如document、window、date等对象函数Function 为内置函数或用户自定义函数。,Javascript数据类型转换,parseInt 将字符串转为整数parseFloat 将字符串转为浮点数eval 将表达式字符串转为表达 式的结果X=“12.3”y=parseInt(x)y=12X=“12.3”y=parseFloat(x)y=12.3X=“3*4”y=eval(x)y=12,特殊运算符,new 构造一个对象实例 typeof 判断var变量的类型，返回字符串;类型有object string number等 var s1=“java”alert(typeof(s1)结果：String void 执行一个程序语句;例如：void执行,Javascript基本语法-变量定义,变量的定义定义变量不能以数字符号开并没有变量名称不能与保留字相同。例如for,new,if,else等。,Javascript基本语法-运算符号,赋值运算=，+=,算术运算+,-，*，/，%(取余)逻辑运算&,|关系运算=,!=,=,Javascript基本语法语句语法,单向选择结构 if(条件)语句;双向选择结构 if()else 多向选择结构 switch(表达式)case 条件1：语句1 break;default：语句,Javascript基本语法语句语法,循环结构：记数循环for(I=1;I);,Javascript语法函数定义和参数传递,函数的基本编写格式：Function subname()不传递参数function subname()传递参数 function subname(p1)传递多个参数 function subname(p1,p2)返回值 function subname(p1)return p;如：function subname(x)if(x96,Javascript语法数组的定义和使用,定义数组一维数组：var a=new Array(19)var a=new Array()可以改变数组的大小。Var a=new Array(1,2,3,4,5)Var a=new Array(“a”,”b”,”c”)通过ai来访问数组中的元素。,Javascript语法数组属性或方法,例如：var aryA=new Array(1,8,4);alert(aryA.length);aryA.sort();,Javascrit语法-对象的类别,客户端对象：navigator：代表浏览器本身对象 window：代表浏览器窗口的对象核心对象：String：字符串对象 Array：数组对象 Date：日期对象 Math：数学函数对象 Number：数字对象 Function：函数对象服务端对象：Request：要求对象用于接收客户端的要求。File：文件对象，用来读取或写入文件到 服务器 SendMail：传送邮件对象,Javascript语法对象-对象的定义和使用,String 字符串对象Math数学对象Number数字对象Date日期对象Array数组对象内建函数(内建全局对象),String对象方法和属性,例如：var str=examples;alert(str.length);,String对象方法和属性,Str=“abcdeabc”X1=str.substr(2,5)结果：cdeabX2=str.substring(2,5)结果：cdeX3=str.indexOf(“c”)结果：2,Array数组对象,例如：var aryA=new Array(1,8,4);alert(aryA.length);aryA.sort();,Math数学对象,例如：alert(Math.pow(2,3);alert(Math.round(4.5);,Date日期对象,例如：var today=new Date;var second=new Date(05,1,1)/2005-01-01 alert(today.toLocaleString();,全局对象-全局函数,内部数组,Forms/属于document 在程序中使用多表单时,建立该数组。Elements/属于form 在一个窗口中使用几个元素时,建立该数组。Frames/属于window建立框架时,使用该数组Document.forms0.elements0表示每一表单窗体中的第一个元素。,文档对象模型,最低公用标准的文档对象层次,window 对象,Window 对象表示浏览器的窗口，可用于检索有关窗口状态的信息。属性 document event history location screen name status 状态栏信息opener 返回打开本窗口的窗口对象top/self/parent/frames 多框架下的window对象属性,多框架下window对象间关系,多框架下window对象间关系,框架之间的关系：Parent表示上一层框架Top表示最上层框架Self表示目前所在的框架,Frame0 Frame1 Frame2 Top.frames2.frame1.location.href=“www.baidu.tw”;,window对象方法,方法 alert confirm prompt blur close focus navigate(url)moveBy(水平偏移，垂直偏移)/moveTo(横坐标x，纵坐标y)scrollBy(水平偏移，垂直偏移)/scrollTo(x，y)resizeBy(水平,垂直)/resizeTo(长度,宽度)setTimeout(执行动作，毫秒数)/clearTimeout()setInterval(执行动作，毫秒数)/clearInterval()open(url,name,feture)showModalDialog(url,argumentParam,feture)showModelessDialog(url,argumentParam,feture),模式窗口和非模式窗口,showModalDialog(url,dialogArguments，features)参数1:网页地址；参数2:设定传给新视窗网页的参数；参数3：对话框显示参数;showModallessDialog(url,dialogArguments，features),说明：1、在dialog窗口内，使用window.dialogArguments参数获取由调用窗口传入的数据2、可以通过dialog窗口的window对象中returnValue将数据返回给调用dialog者,document 对象,Document 对象表示给定浏览器窗口中的 HTML 文档，用于检索有关该文档的信息。属性alinkColor bgColor body fgColor linkColor location title URL vlinkColor cookie方法clear close open write writeln,history对象,此对象提供客户最近访问过的 URL 列表。属性 length 历史项数方法 back()后退 forward()前进 go()到哪一页,location 对象,此对象包含有关当前 URL 的信息，它提供了重新加载窗口的当前 URL 的方法。属性 hash 指Book Mark”#”后面的字符串 pathname指主机后面的字符串，包含斜线，不包含问号后面的参数字符串 hostname 指主机和端口字符串 href 目前网页的URL字符串包含问号后面的参数 port 端口号字符串 search 指URL问号后面的参数字符串，包含”？”方法 assign(url)如同设定的值 reload()重新装载当前页 replace(url)代替原来的URL，而且此URL不会存入history对象里,screen对象,navigator对象,event对象,文档节点模型遍历,-文档节点的方法和属性：all 返回对象所包含的元素集合的引用 children 获取作为对象直接后代的HTML对象的集合 firstChild 获取集合节点的第一个节点对象 nextSibling 获取该节点的下一个同级节点对象 previousSibling获取该节点的上一个同级节点对象 attributes 获取对象标签属性的集合 nodeName 节点名称即标签名 nodeType 节点类型(1-标签 2-属性 3-文字节点)innerHTML 内部HTML字符串 outerHTML 外部HTML字符串,文档节点的增删改,-在文档的基础上-createElement(String)createAttribute(String)createTextNode(String)-在任意结点-appendChild(Node)removeChild(Node)replaceChild(Node,Node)setAttributeNode(Attr)removeAttributeNode(String)setAttribute(String attribName,Value)getElementsByTagName(String)/通过标签名获取节点集合 getElementsById(String)/通过id获取节点集合 getElementsByName(String),JavaScript事件,onclick onchange onfocus 获得焦点onblur 失去焦点onmouseover/onmouseout/onmousedown/onmouseuponload/onupload onsubmit oncontextmenuonkeydown/onkeypress/onkeyup,onClick事件示例,请输入表达式：结果：,onChange事件示例,function checkNum(num)if(num=)alert(请输入一个数字值);return false;if(isNaN(num)alert(请输入一个数字值);return false;else alert(谢谢！);请输入一个数字：,onFocus/onBlur事件示例,onMouseOver/onMouseOut事件示例,var num=0;function showLink(num)if(num=1)document.forms0.elements0.value=您选择了Aptech;if(num=2)document.forms0.elements0.value=您选择了Asset;if(num=3)document.forms0.elements0.value=您选择了Arena;AptechAssetArena,onLoad事件示例,您好 function hello()alert(您好);,事件绑定方法,绑定元素属性 绑定对象属性(ie3+,nn3+)btnOK.onclick=newopen;绑定 标识(ie4+)newopen();,捕获用户按键事件,function keydown()alert(window.event.keyCode);window.event.keyCode=0;window.event.returnValue=false;/替换文档中按键事件 document.onkeydown=keydown;,绑定对象属性,屏蔽鼠标右键,function mouse()if(window.event.button=2)/1表示左键，2-表示右键 4表示中间键 alert(“不允许使用鼠标右键”);window.event.returnValue=false;function cancelMenu()return false;document.onmousedown=mouse;document.oncontextmenu=cancelMenu;,