JavaScript核心对象2.ppt

1,JavaScript 核心对象,2,回顾,什么是JavaScript 如何在HTML中引用JavaScript 什么是变量及其作用域 JavaScript支持的基本数据类型 JavaScript支持的运算符 什么是表达式 数组 条件语句 循环语句 JavaScript函数,3,目标,使用核心对象 使用核心对象的方法和属性,4,对象,对象中包含定义对象自身的属性（变量）及用于处理数据的方法（函数）。 要访问对象属性，必须指定对象名及属性： objectNpertyName 要访问对象方法，必须指定对象名及需要的方法： objectName.method(),5,使用对象,创建网页时，可以插入： 浏览器对象 内置脚本语言对象（根据使用的脚本语言的不同而不同） HTML 元素 也可以创建自已的对象，并在程序中使用。,6,对象操作语句,JavaScript是一种基于对象（Object-Based）的语言，而不是面对对象（object-oriented）的语言。 JavaScript中的对象操作语句： this语句 forin语句 with语句 new语句,7,this语句,this语句的值指示当前对象，并且可以拥有标准属性，如名称、长度以及相应的值。 只能用在函数作用域或其调用引用内。 用法：this.属性名, function dispname(name) alert(“欢迎进入JavaScript世界, “ + name); 输入您的名字： ,8,for . . . in 语句,for in语句用于在对象的各个属性，或数组的各个元素之间循环 用法： for (variable in object) statements; , color = new Array(“红色“,“蓝色“,“绿色“); for (var prop in color) var record = “color “ ; record+=prop+“=“+colorprop + “; document.write(record); ,9,new语句,new操作符用于新建对象类型实例。 用法 objectName = new objectType (param1,param2 .,paramN), function employee(name, code, designation) = name this.code = code this.designation = designation newemp = new employee(“John Dias“, “A001“, “职员“); document.write(“雇员姓名：“ + + “); document.write(“雇员代号：“ + newemp.code + “); document.write(“头衔：“ + newemp.designation); ,10,with语句,with语句用于执行一组语句，所有这些语句都假定引用指定的对象。 用法 with (object) statements; , var a, b, c; var r=10; with (Math) a = PI * r * r; b = r * cos(PI); c = r * sin(PI/2); document.write (a +“); document.write (b +“); document.write (c +“); ,11,eval语句,eval函数用于计算代码串，而不引用任何特定对象。 用法 eval(string), var x = 5; var z = 10; document.write(eval(“x + z + 5“); ,12,字符串对象,字符串对象用于操纵和处理文本字符串。 用法 stringNpertyName stringName.methodName 创建字符串的方法 使用var语句，并对为其赋值（可选） 使用赋值运算符 (=) 及变量名 使用string ( ) 构造函数,13,字符串对象的属性和方法,属性 length 方法 big blink bold fontcolor italics small ,14,字符串对象示例, var bstr = “大号“; var sstr = “小号“; var blstr = “粗体“; var blkstr = “闪烁”; var ucase = “大写“; var lcase = “小写“; document.write (“这是“+ bstr.big() + “文本“); document.write (“这是“+ sstr.small() +“文本“); document.write (“这是“+ blstr.bold() + “文本“); document.write (“这是“+ blkstr.blink() + “文本“); document.write (“这是“+ ucase.toUpperCase() + “文本“); document.write (“这是“+ lcase.toLowerCase() + “文本“); ,15,math对象,Math 对象拥有可用于表示复杂数学运算的属性和方法 属性 PI LN10 E 方法 abs(number) sin(number) cos(number) ,16,math对象示例, function doCalc(x) var a; a = Math.PI * x * x; alert (“半径为“ + x + “ “ + “的圆的面积为“ + “ “ + a); 输入圆的半径： ,17,Date对象,Date 是内置对象，包含日期和时间信息。 Date 对象无属性，但有许多方法可以用来设置、获取和操作日期 用法： DateObject = new Date (parameters),18,Date对象方法,set方法组 get方法组 to方法组 parse和UTC方法组,19,Date对象示例, 2003年的圣诞节是星期“ + daynamethedate.getDay(); thedate.setYear(2004); document.write(“2004年的圣诞节是星期“ + daynamethedate.getDay(); / ,20,事件对象概念,事件可以由用户生成，也可以由系统生成 每个事件都有与之相关联的Event对象 Event 对象提供下列信息： 事件类型 事件发生时光标的位置 Event 对象可以用作事件处理程序的一部分,21,事件的生命周期,事件的生命周期通常包含下列阶段： 与发生的事件相关联的用户操作或条件 立即更新 Event 对象以反映事件的状态 触发事件 调用相关联的事件处理程序 事件处理程序执行其操作并返回,22,JavaScript-获取事件信息,JavaScript中： window.event或event对象获取事件信息 调用其keyCode获取按键的键位号 event.keyCode - 返回对应键位的值 event.shiftKey - 如果触动了shift键则返回true event.ctrlKey - 如果触动了ctrl键则返回true event.altKey - 如果触动了alt键则返回true 可以进行一些键位的屏蔽,23,Html事件,onClick -单击事件 onChange - 值改变事件 onFocus - 获取焦点 onBlur - 失去焦点 onMouseOver-鼠标移动 onMouseOut -鼠标离开 onLoad -加载事件 onSubmit -提交事件 onMouseDown - 鼠标按下 onMouseUp-鼠标弹起,24,onClick事件示例, 请输入表达式： 结果： ,25,onChange事件示例, function checkNum(num) if (num = “) alert(“请输入一个数字值“); return false; if (isNaN (num) alert(“请输入一个数字值“); return false; else alert (“谢谢！“); 请输入一个数字： ,26,onFocus/onBlur事件示例,27,onMouseOver/onMouseOut事件示例, var num =0; function showLink(num) if (num=1) document.forms0.elements0.value= “您选择了baidu“; if (num=2) document.forms0.elements0.value = “您选择了163“; if (num=3) document.forms0.elements0.value = “您选择了sina“; baidu 163 sina ,28,onLoad事件示例, 您好 function hello() alert(“您好“); ,29,onMouseDown/onMouseUp事件示例,30,onResize事件示例, window.onresize= notify; function notify() alert(“窗口大小调整完毕！“); 请调整窗口的大小。 ,31,处理事件,为响应事件而执行的JavaScript代码段称为事件处理程序 事件处理程序分为： HTML 标记事件处理程序 以属性的形式出现的事件处理程序 object.eventhandler = function;,32,HTML 标记事件处理程序示例, 我的主页 ,33,以属性的形式出现的事件处理程序示例, 我的主页 ,34,通用浏览器对象,浏览器是用于显示 HTML 文档内容的应用程序 浏览器还公开了一些可在脚本中访问和使用的对象。,35,文档对象模型,最低公用标准的文档对象层次,36,Window 对象,Window 对象表示浏览器的窗口，可用于检索有关窗口状态的信息。 属性 document _ navigator (appName,appVersion) event history location name screen (width,height) 方法 alert _ confirm _ prompt blur close focus open _ setTimeout,37,window.showModalDialog,Objects参数 在弹出窗口中使用 window.dialogArguments 对象（即主窗口传递过来的 window 对象集），即可以获得或者设置主窗口的值。 Ex: var dialogArg = window.dialogArguments; if(dialogArg.length 1) for(i = 0; i ,38,window.open,使用JavaScript打开一个新窗口 document.open() - 创建一个新的窗口或在指定的命令窗口内打开文档 window.open() - 创建一个窗口的基本格式: Window.open(“URL”,”窗口名字”,”窗口属性”); 窗口属性:,39,JavaScript-window.open,参数 设置 含义 toolbar Yes/no 建立或不建立标准工具条 location Yes/no 建立或不建立位置输入字段 directions Yes/no 建立或不建立标准目录按钮 status Yes/no 建立或不建立状态条 menubar Yes/no 建立或不建立菜单条 scrollbar Yes/no 建立或不建立滚动条 revisable Yes/no 能否改变窗口大小 width yes/no 确定窗口的宽度 Height yes/no 确定窗口的高度,40,showModalDialog,dialogHeight ：对话框高度，不小于px， 中dialogHeight 和 dialogWidth 默认的单位是em， 而中是px，为方便其见， 在定义modal方式的对话框时，用px做单位。 dialogWidth：对话框宽度。 dialogLeft：距离桌面左的距离。 dialogTop：离桌面上的距离。 Center:yes | no | 1 | 0 ：窗口是否居中，默认yes，但仍可以指定高度和宽度。 help: yes | no | 1 | 0 ：是否显示帮助按钮，默认yes。 resizable: yes | no | 1 | 0 ：是否可被改变大小。默认no。 status: yes | no | 1 | 0 IE5+：是否显示状态栏。默认为yes Modeless 或noModal。 scroll: yes | no | 1 | 0 | on | off ：指明对话框是否显示滚动条。默认为yes。 还有几个属性是用在HTA中的，在一般的网页中一般不使用。 dialogHide: yes | no | 1 | 0 | on | off ：在打印或者打印预览时对话框是否隐藏。 默认为no。 edg