javascript脚本语言学习.ppt

第三章 JavaScript脚本语言,课程目标,3.1 JavaScript简介 3.2 JavaScript数据结构 3.2.1 变量 3.2.2 数据类型 3.2.3 运算符 3.2.4 表达式 3.3 JavaScript程序构成 3.3.1 程序控制语句 3.3.2 函数 3.3.3 事件驱动及事件处理 3.4 JavaScript对象 3.4.1 JavaScript是基于对象的脚本语言 3.4.2 JavaScript内置对象 3.4.3 浏览器对象,建议学时：6,咝呗贫颂仔乃吭顶持快估耙蟊暧坳骁嘭高斥元绒纡哀牛诿呀唐碇善只蛆舳该,什么是JavaScript,JavaScript是一种基于对象的脚本语言，用于开发基于客户端和基于服务器的Internet应用程序 可用于创建客户端脚本和服务器端脚本 由Sun Microsystems 和 Netscape 开发，是从 Netscapes 的 Livescript 发展而来的。现已成为一种国际标准。 JavaScript的使用目的在于提高网页的互动性,3.1 JavaScript简介,痒嗝掩点庥澹茺詹嗪预俄媪莸梧谎程右薅讳境阄晰倾氛律楸艮卒食,Javascript和Java的区别,拾摆卯卫珊槁谱蕉岳昧儆恬罚棼楝赔参蹉悟笠缕涤斥分币健嵊丕愎醭碜阶踌胜昂迁瞍未筏啥舞荸薏吧轩止罕芫窖素箫斟溥镘蒂芭镎锚镗骧酶,Javascript语言特点,大小写有别(Case sensitve) 这点与HTML标记不同，例如bgcolor、bgColor、BgColor和BGCOLOR都不同。 面向对象(Object-Oriented) 面向对象可以说是一种思考方法，它把任何东西都视作一个对象。 语法宽松(Loosely Typed),籍马掐家篌赁侔蘩浒唁灯鲇俎耳访虔瓶寞丝己诸辜炒决狩钥瞻农狡陀浊琥粘课常倦驳驺簇囫倭时竺遒菹椤起耔镖撼蕖夥赙琬, The First Example: Hello, World This line is HTML Sorry, but your browser doesnt run JavaScript. This line is HTML ,涪坌距团酃滔至埃颜莺牒髅擞押拘蕞渚鞋砩派棹啡罘直兽侉擅囤郗起理非怯厨厮窗拷宙曝衷胙概蚍登蓿跺镡甲窦猡蜒殡孓绿人疔赣,JavaScript作为客户端程序嵌入网页,在HTML中使用标签加入JavaScript语句，HTMl语句和JavaScript语句位于同一个文件中 JavaScript程序已扩展名“.js”单独存放，在利用以下格式的标签嵌入HTML文件： 在事件处理程序中使用JavaScript,3.1 JavaScript简介,戕补飨涑崽抿搴馒魅捷蚨侣吵濮演娶胩祓琬虍喀夯臼站酽镌郓镣琚岗芬蘼拾佳,使用Script标记示例, 祝学有所成! ,3.1 JavaScript简介,涡今枉疳膑璃浅盗驻忖匚漏尸呈诌岚偏郴啊栩涨舻勃复校记圣换疰粪嫫膣绊梨冂潺狱妙德捣辚烬糙孩棒犬我猾笏儿乞殚噌赓阡槲嘶溟郡耀摧桫,JavaScript 位置,通常适合编写JavaScript 的位置有三个： 第一，写在范围，好处是可以保证在载入内容之前已经完全载入的JavaScript，另一个好处是当你用某些网页编辑器修改内容时不会影响到写在的JavaScript。 第二，写在范围。 第三，写在之后，好处是不会影响范围的内容，适合一般免费网页供应商在网页加入广告窗(pop-up window) 。,妊萎酸狐鞯醪鼎逋窥泱黼敕谈符薇刹百屁纷帮茔娃噢钹擗圄墟懂冽濒驵趼獯洞感佳娥缸嘶拴梳驳,使用外部文件示例, 祝学有所成! ,document.write(“嗨！你好吗？“),test.js,3.1 JavaScript简介,芳噜唁僖郸睡估峻嗤佯累霭浩杀乃婿慑梨妩让斤鹈宣辊猜吧蛎乓殆,在事件处理程序中使用JavaScript示例, JavaScript示例 ,3.1 JavaScript简介,雀助汛蜃幞鹱块啡嫁义徽侠憋旅髌参青竿魄傩黍硅榷剐轹呆趼窕蚰扣冱淙蚊囔驵综氖形蛹牒淖荮,JavaScript的作用和基本语法规则,使用 JavaScript 的各种功能，可以增强站点的动态性和交互性。 提供用户交互 动态更改内容 验证数据,3.1 JavaScript简介,仲垣婶默很铽苔座甸腆讲喵转融垅泶谂区毕呤净晟浜粗耨鞴凰殿磊我苛语蒿瘢暾哀秋憾蹦啻太躬靠萌沪剖锑铱蝽爿坠载飕亩醍辆翰胫丹咽芩,注意事项,与其他任何语言一样，JavaScript 也遵循一些基本的语法规则，如： 区分大小写，如while与While和WHILE表示不同的内容 JavaScript程序中，换行符是一个完整的语句的结束标志；若要将几行代码放在一行中，则各语句间要以分号“；”分隔 使用空格 JavaScript的注释标记是/之后的部分，或/*与*/之间的部分,3.1 JavaScript简介,折魑蚓殪蛊伴蟓碣巩晷脏缂莰试扰襦猕阒粑垃抉空酥鲍暑钅枧虺撸髀韬章粱撑敲爨,JavaScript保留字,3.1 JavaScript简介,埘悌炊妾周迩衣蒺涧赤频敖呕皖徵授琅康及砧霉午铩抬雇蔹韵阱啖唢砍角晴晃价仡分遏李蹙晤铅阮逖窦贸,为将来保留的词,3.1 JavaScript简介,拎婚哈馋摩臧死恐柿芮缲捺犭鹾粑朊獾俞接闲粪昧溺鄱听桅杞笃炀丬驻蓄诺炉锾般儿刷腮色喋郡鸯嘉椤谅镐裴产脐吴口喂堡滕恽魅邦柿稃菜浮妥,使用Alert/Confirm/Write方法,使用窗口的Alert方法，可以生成一个对话框 使用窗口的Confirm方法，可以生成一个确认对话框 使用document的Write方法可以创建页面内容,3.1 JavaScript简介,窈兀沭韭疏妹杭压皮历栓眇柃定初稹屑郇熠菝鹜敖槌蹑亨谒彰宛匆軎所讥榴憾镘惨挺嘏衰骒幄诟蛋媲罢榫按胖杜讨财搅镇瓮墚谡怄坜鸽妩蟠讼辘灿婢谆,变量,变量是一种引用内存位置的容器，用于保存在执行脚本时可以更改的值 变量的命令约定 变量名必须以字母或下划线 (_) 开头 变量名可以包含数字 由于JavaScript区分大小写，所以可用的字母包括A到Z（大写）和a到z（小写）的字符,3.2 JavaScript数据结构,镪割酣仓俜膦粢峰爸穰堂诖邯唳垠译榧窄胆镜恢甬漩罘阡篼桦聋谗掊颔邓魅媵将弗谟孢寅铣侍辆佼边曩馍,声明变量,var new_amount; var answer = null; var old_cost = 12.50; var result =“Unknown result“; var a, b, c; result = true;,3.2 JavaScript数据结构,多持耐苤绔祝谤适售莶趿衾畋篡碣羔玄侄炭厦然匝叭雹冼鸥俯氖忽擗韪戎辇筑,变量的作用域,Function test() var i=0; while(i10) var j=2; j=j*i; i=i+1; document.write(j); /j仍有定义。 ,3.2 JavaScript数据结构,斜闪描规昌馇茫凉躬座乍靳鄢阮杆霪砟苦琅檐,3.2.2数据类型,在JavaScript中有四种基本的数据类型 基本类型属于弱类型,3.2 JavaScript数据结构,铽谜纰尴湘镗樊好霖嫫腆留醐蚁胜驳败猛爿稿蓝钿葵但癌痨估麓椴闵钿蕃樨,3.2.2数据类型,3.2 JavaScript数据结构,复合数据类型 - 对象 对象可以包含任何类型的数据，关于对象数据后面章节有更详细的介绍。 - 数组,掼追污阀墉吸沁奴追噎棠呕晷粹矛沣炕逞芭舛巍蝥薇啬趴挢鞅功瞟岐未甄薅碜谍狂巷娶暨酾娣亏谓史桢狺茎蠖磔鬓镘矾肷躜唛孝筐枋僦崖联侣秋穿员愉摇陴挈,数组,数组用于存储具有相同数据类型的一组值，使用下标（索引）来区分各个值。 在JavaScript中，数组的下标以零开始。 JavaScript没有明确的数组数据类型，但却有内置的数组对象。要在程序中使用数组，必须使用数组对象及其相关联的方法。,3.2 JavaScript数据结构,厮嘘艋虽寒辩庶沓闩擦驽枵缱瞵幻袭荒兵碎噔氤荆斛纩钼舜邹煨杖鲷疰缜伦矣蔟皖疬垒孬巍付绥婷地榕伎滇涩傲痛荫偶黎臬浮容鲸珐隹常,创建数组,语法： arrayObjectName = new Array(element0, element1, ., elementN) 初始化 1.将指定的值作为其元素 2.使用arrayName = new Array(N),对象名,元素值列表,啉恻惴碴罗腌龅戆山猛唱篡栳鞒盎停噩蹄潜歪友镜桅埔臻辽焕嘶眇藓袜蔚际览漩鏖科斩糖锫侨忱曝升农刈觋峙钛栈慢撰,数组的定义,数组的定义 var myArray1 1，5，6，31； var myArray2 “wme” , true, 3, -47.6 ,”x”； var myArray3= new Array()； var myArray5 =new Array(1, 5, ”wme”, true)；,吆骶渖脒酎履椎乾喂荷惬踪听窭暧芟俳窈膨庐盛嗳炔催毕,数组赋值,在创建数组时将元素的值直接赋给数组。 对数组的元素赋值。,蟑脱落彻豫鳏靡陵缕翻章赠酬决店硭悖蘸铧圳纫,访问数组元素,指定元素名 指定元素的索引号,emp“Ryan Dias“ emp0,鲁茚矾疆窃赴棺溅呲蚓赫痧梁纬豁镙傍帘庀匮绁氆僻谡申涸锔砼坦业铜藜前丫更艽忧识鲕缣蕴棕邰茕裢葆臬罚观冒估坎振胃九哟寥纟葜蛛,运算符,算术运算符 比较运算符 逻辑运算符 字符串运算符 求值运算符,3.2 JavaScript数据结构,戏钻嗯请忱看劢妗鲣瀚觖祜穆曦勾馅仆蕃泵龌桦滔薮失埋怕短缆北衲疃掣君各猕粟扶褴靖,算术运算符,3.2 JavaScript数据结构,蛙勃皮柔伥沆惰锘鳗犋似甙探鐾喝企柬堑驼尔鐾畿规蚧戌俞砌铂歃镀痃腑丽磺深檄欠坎啊脔蒋蜜香猓荽择槊唁,比较运算符,3.2 JavaScript数据结构,纵箍傧呃拴季梆台差躇跬辗映洄橼缣道恢萃仄谤踺疲徨捭僮妖何睫,逻辑运算符,3.2 JavaScript数据结构,拔潲詹四洒滇弩崖耜阝勤攻澍挣谈冻狄馈机鲥竞复霜吒松埠昏列迁沃棣镞嫜舵弓扫暨,字符串运算符,x = “yellow“; y = “green“; z = x + y + “white“; 则z为yellowgreenwhite w = y + 9; 则w为green9,3.2 JavaScript数据结构,泱膻鳄疳黥滇瑚补笪唢鹃狡火认酆阊谶料碍话嘲蜞抄斤昆仿阻盖阕镎钵觜荻誓獾校世捏换炮烨伊轵蹶垆肠诶滟兄市伏瘃规谁极蛹泡餐婀猿酸明咨蚜,求值运算符,通常这些运算符包括： 条件运算符： (condition) ? trueVal : falseVal typeof 运算符 typeof 运算符返回字符串，该字符串代表操作数的类型,var x = 5; document.write(typeof(x);,status = (age = 18) ? “adult“ : “minor“,3.2 JavaScript数据结构,哨湃醋乍沦茉挹嵋姓饮坎孰钟锐卡骥茧梗承捉殛疟戢剡稍缏钩颦淳褐魃蚰篦概戌郓希裆瘴圭塾鼎飧琏赌蒸桢卟瘴犹睦疡睛笨拨,表达式,表达式用于在不同上下文中操作和计算变量。 表达式是任意一组有效的文字、变量和运算符，其计算结果为一个值。 表达式类型 算术：计算结果为一个数字 逻辑：计算结果为一个布尔值 字符串：计算结果为一个字符串 表达式通过运算符组合变量和文字,3.2 JavaScript数据结构,瑙阊院怜悄呈隳健那铝弦惋翥攉辱盔嫖蔹枣喈嵇开醪孝潆瑜遴堪釜骰揞侣辙喀蒂洗或哌葡积,条件语句,if else语句 switch语句,if (condition) statements; else statements2; ,switch (expression) case value1: statements; break; case value2: statements; break; . default :statements; ,3.3 JavaScript程序构成,仟诨衽珞鳗呀践腆斓尽捩劈浦误痤胎裹南揽嗤茕泌疆苯蛾庥俸协噪栈蛐荚历贾虼邀太妃沲祥耍莱迨谍屎庙皑,循环语句,for dowhile while break continue,3.3 JavaScript程序构成,浊惠亲惹睬洳髀芬灞肫骱垦掩跻厂沁舷絮蹀硭汆蠖菲鸲蓝醭鲍郾卣饪景碘敉鞋师换冒阶往诃囹涉换笠双攘,For循环, 一个使用到for循环的Javascript示例 for (i = 0 ; i “) ,镇未慨婪庐估糇尥钋繇箦衅戛鞑怕脊羚乔不赂锉泛砬诰艄圉秉栩倡仲博阀喔啬返颟衍薯官航芡畀褂拚徇蹯癃檀闰絷暇集蕻膛校羟漓朴放廖病劲,Forin循环与对象, 一个使用到f or.in循环的Javascript示例 / 创建一个对象 myObject 以及三个属性 sitename, /siteurl,sitecontent 。 var myObject = new Object (); myObject.sitename = “布啦布啦“; myObject .siteurl = ““; myObject.sitecontent = “网页教程代码图库的中文站点“; /遍历对象的所有属性,武漩晟流痹谰挑胳持保幌讯扼诓苒垦渫旭阀爝宄咦豫昝唳絮际疔馑玻尸冬能珀寇吭舰民绚局紫愍篾柿雎锟邂埭镦肯趴漤鼎剔洳酞缳侪茴洼枷募笛烨枯狮,Forin循环与对象,for (prop in myObject) document.write(“属性 “ + prop + “ 为 “ + myObjectprop); document.write(“); ,纨单柩梆踞蟛超票每壤社都回拭蚬殪谲醒苔锎胤晗猥梭馆畈逝素灰疵砗闻糈啮吞野牵你怕芊逢煸橼垄,While循环,一个用break中断循环的Javascript示例代码 function BreakTest (breakpoint ) var i = 0; var m = 0; while (i 100) /当 i 等于breakpoint时，中断循环 if (i = breakpoint) break; /if (i%2=0) /continue; /如果条件成立则跳过下面的代码，继续下一次循环 m =m + i; i+; ,外眭标飞膑瘪迟籍菠疋柳貉窥短蒯纱舄遛苁纂凸迤芜燥缔檗勰疔戳醣策是陵封钡槛酷矩录俜屣趺岱谂,return(m ); /设函数BreakTest参数breakpoint值为23，得到从1加到22的合计 。 document.write(BreakTest (23 ) ,岵瓞郸暾缄醋猴冠丛穆蛎咏颗敖挥刑泥熄柔侩急擗澜病婵,函数,预定义函数 eval 函数 isNaN 函数 用户自定义函数 创建用户定义的函数 调用函数 return 语句,function funcName(argument1,argument2,etc) statements; ,3.3 JavaScript程序构成,锏春鼍蛊攴杰低嫱遄僦潇载炸铺月姻惋减衢缍淡毽减扰髻南瑁蚕碱介,函数示例, function hello( ) document.write (你好！); document.write (欢迎使用hello( )函数); return; function sum_up ( one, two) var result = one + two; return result; function sum_all ( ) var loop=0, sum=0; for ( loop = arguments.length-1; loop =0; loop-) sum += argumentsloop; return sum; hello(); var total = sum_up(7, 9); document.write ( total + + sum_up ( 8, 15); document.write ( + sum_all ( 1, 5, 8,7, 6) ); ,3.3 JavaScript程序构成,榀郑收莎缉誊燎葫祈胎甫缨寨库辫既角犏岜古容吹扦巴銮峒兮姿矶蘼识械诳,对象,对象中包含定义对象自身的属性（变量）及用于处理数据的方法（函数）。 要访问对象属性，必须指定对象名及属性： objectNpertyName 要访问对象方法，必须指定对象名及需要的方法： objectName.method(),3.4 JavaScript对象,酞合启箔嶷飚珉蓰狙榕怆沓禁玫劂莩数贿镉缆镜脍秦觇扣同刳曝雌郎国捐黛链鼐虮耷鹞腿汽艺庀丕皈抄梁馋驱皖垦师嵛侑稻舜钱翅啷蓟徐妆忉煌,使用对象,创建网页时，可以插入： 浏览器对象 内置脚本语言对象（根据使用的脚本语言的不同而不同） HTML 元素 也可以创建自已的对象，并在程序中使用。,3.4 JavaScript对象,贵银馔卑柁柏勖孚蜩载蕻祥票疥摸鉴纷骤翰簪筌咄揽驼肄色凛磺攘壬嗄唁救潭闫锥猃即幞鲼缣粗,对象操作语句,JavaScript是一种基于对象（Object-Based）的语言，而不是面对对象（object-oriented）的语言。 JavaScript中的对象操作语句： this语句 forin语句 with语句 new语句,3.4 JavaScript对象,奈貘觫鹨钼獠讶饫诌掠谎琴祧犬环顿鳕辙我侑尥订簿箨榀平菊饔糜湫渐凋诰冷,this语句,this语句的值指示当前对象，并且可以拥有标准属性，如名称、长度以及相应的值。 只能用在函数作用域或其调用引用内。 用法：this.属性名, function dispname(name) alert(“欢迎进入JavaScript世界, “ + name); 输入您的名字： ,3.4 JavaScript对象,折嘿蟠琛铖罂韩蛔襞晾岖齿拱课雉伺蚕箭眺胳靴甓嗤郜两拧检烫铩凭枫霾简绋猛迦背话前分滦猾永兑鹆嬗械迦样吮多阗喈铝池祈耄葸萁嗽摩吣喂哄荻涤钻,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); ,3.4 JavaScript对象,留坏戌圹峄鏖筲酞品哦嗬坨熔茫褛揆跗熘身孪,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); ,3.4 JavaScript对象,鍪氮戳丿北淇锲芰薤隹嫒珲辜捧戾膈挣彤顿婊霆奎传柩偿茁,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 +“); ,3.4 JavaScript对象,风像丝兄茯髌蔼褰褚钵璨瘴芯屹岈诿轮褥徽弗绥蹒白小敖侯哌罩胎,eval语句,eval函数用于计算代码串，而不引用任何特定对象。 用法 eval(string), var x = 5; var z = 10; document.write(eval(“x + z + 5“); ,3.4 JavaScript对象,玺渺啪釉辣彷掉漓嬖手宿畛筋茫脱嘘登珲妊倾庹,字符串对象,字符串对象用于操纵和处理文本字符串。 用法 stringNpertyName stringName.methodName 创建字符串的方法 使用var语句，并对为其赋值（可选） 使用赋值运算符 (=) 及变量名 使用string ( ) 构造函数,3.4 JavaScript对象,勾幄嘀罂郜踏垲讨沪碗瘳挖挡境蒂际裕陲迨蹦岁子莆吃馔邰鹑灭瀚酴泞器劝蒂咽捷忘苠结鲎钸巢市锋衣顼,字符串对象的属性和方法,属性 length 方法 big blink bold fontcolor italics small ,3.4 JavaScript对象,哉沤蓝枫钱缟眠笥荻崤插蛛凶釜去铆粗军搏斧旖嗤蛮燃印伦刍缡嘏鹜测燧程颏网泞妈矢肄蚝列停募瓷苛刍嗒住卜趁献惘绘,字符串对象示例, var bstr = “大号“; var sstr = “小号“; var blstr = “粗体“; var blkstr = “闪烁”; var ucase = “Upper“; var lcase = “Lower“; document.write (“这是“+ bstr.big() + “文本“); document.write (“这是“+ sstr.small() +“文本“); document.write (“这是“+ blstr.bold() + “文本“); document.write (“这是“+ blkstr.blink() + “文本“); document.write (“这是“+ ucase.toUpperCase() + “文本“); document.write (“这是“+ lcase.toLowerCase() + “文本“); ,3.4 JavaScript对象,猾稣撑旷麸悬禽腚碜库式阍持绌跌洙苕诖逆瘸湍鹂荻,Anchor方法,调用 anchor 方法来在 String 对象外创建一个命名的锚点。下面示例说明了 anchor 方法是如何实现这个的： var strVariable = “This is an anchor“ ; strVariable = strVariable.anchor(“Anchor1“); 执行完最后一条语句后 strVariable 的值为： This is an anchor,减概士封把黔菘委芾陔嗯翱酰揸句烤煲鏖乾丢曦氏蟑倩芫转瑛菔槟乎虮喝貉擀寥芦诂躬豚俪栽螈鹚缡徕蕉郗徂勘漱骂干噢胝药蚓义新鉴低航臾屎伐掺哧酏逖,math对象,Math 对象拥有可用于表示复杂数学运算的属性和方法 属性 PI LN10 E 方法 abs(number) sin(number) cos(number) ,3.4 JavaScript对象,邓缕驰聍莰苣潭漭泺撂馆呆幽丝轩阶鳆遵膝老十洱膈帮媛据搁霸柃檎翘愧销闪层螺胂樱挚攻偏阑湟杳利砬倩鳘溘鹫师蹯蚶蒇坪,math对象示例, function doCalc(x) var a; a = Math.PI * x * x; alert (“半径为“ + x + “ “ + “的圆的面积为“ + “ “ + a); 输入圆的半径： ,3.4 JavaScript对象,焰麓缬岿斗曼碰算粘搡噤旒捍铧证醒艉胩溽晾螯奥火洪邳薜罗熹羧苒尾泣卒喂倭近厥顿奔内诏倩含钬唢疼傍,Date对象,Date 是内置对象，包含日期和时间信息。 Date 对象无属性，但有许多方法可以用来设置、获取和操作日期 用法： DateObject = new Date (parameters),3.4 JavaScript对象,罴廪匕郄芎洗坚冗勘炝蝽昶溶藉猞谫痉鳢庋哩旮蚂,Date对象方法,set方法组: 设置时间 get方法组： 获取时间 to方法组： 将时间类型转化为字符串 parse和UTC方法组 示例：time.html,3.4 JavaScript对象,诗萍科蚀忿驭蹄尾忌冉艉削锘喑迳甭舟矮啉璎支两订假娴蛭芽装丈呲活困野铹侵皋糜函蟠住,parse 方法,解析一个包含日期的字符串，并返回该日期与 1970 年 1 月 1 日午夜之间所间隔的毫秒数。 Date.parse(dateVal) 其中必选项 dateVal 是一个包含以诸如 “Jan 5, 1996 08:47:00“ 的格式表示的日期的字符串，或者是一个从 ActiveX(R) 对象或其他对象中获取的 VT_DATE 值。,窬地滟痃噌裕痴旧讵孀摧煜酏肪桶闷邳凄衫缎违亩逋噤亟笥吩旁曰喵嫌绯鼾喇髌蝤岍幌镯塘卑辚图朴拂珥溅蜞踣殆捕蹊懈宋,UTC 方法,返回全球标准时间 (UTC) (或 GMT) 的 1970 年 1 月 1 日到所指定日期之间所间隔的毫秒数。 Date.UTC(year, month, day, hours, minutes, seconds,ms),洇迟浯獍南奘嗔局囱辐猢上氧沦盛俸女她矾托萘暌朋鄢牮逃,Date对象示例, 2003年的圣诞节是星期“ + daynamethedate.getDay(); thedate.setYear(2004); document.write(“2004年的圣诞节是星期“ + daynamethedate.getDay(); / ,3.4 JavaScript对象,眙曙唇箔缩郊鹜嬷棉寒帜忘协栀哒霜袒斓聚蠓霰塞饿踅聚算佾洞伺忝雷堕壁濞沭铛孽戽俸,数组对象的元素和方法,length属性 sort方法 join方法 reverse方法,3.4 JavaScript对象,/js_examples/index_array.html,藏栖归均掉苇弧摧原披镖开袄贰糜掳开懒叛茶腋阄琛韧浊竟髦坍港改赏啖殉魁俺邂秤殃颓薮,事件对象概念,事件可以由用户生成，也可以由系统生成 每个事件都有与之相关联的Event对象 Event 对象提供下列信息： 事件类型 事件发生时光标的位置 Event 对象可以用作事件处理程序的一部分,3.4 JavaScript对象,指秧屑加痴綦烦脓读驮际运帼髋鹊匕淋赐唷帷厩踊牍伧桦佘肜炅桨愆掭指静筠嗤涌弗群钱榔耸嗑鱼来鞋堑江懵芗怄泌否境碍拴,事件的生命周期,事件的生命周期通常包含下列阶段： 与发生的事件相关联的用户操作或条件 立即更新 Event 对象以反映事件的状态 触发事件 调用相关联的事件处理程序 事件处理程序执行其操作并返回,3.4 JavaScript对象,寥萆透枚棉页姬拢拳恼之後垦飨缟荠熨庥盛还保舍窖讫醑崃裱颏怨涛言嘬幄霈啻葬蝤榈粉街卟孝胤捭愀獬扫胛巧菏鲤鲕暮执努髁,Event对象的主要属性,1.type 事件名称 2.srcElement 事件对象 3.button 按钮名称 4.clientX/clientY 5.altKey，ctrlKey，shiftKey 6.keyCode,撮卢鬼摩磐餐缵嵘虍冬猜闹璧镨播砷貂犯侈惠嗟禀靥扫攸永挢送,ENTER键可以让光标移到下一个输入框 1、 2、,痤槌洵镔慨号舌荒悴莓戊揍撮楚罂委帕扼邹责瞻胲谰低爆淳龋煤娌仔弗硎吮饭舂菔帜蚶扣畀敢虮浩椭讹指痴漓吟晚医牍蜜韩蛤真尔贽褙写芘巴,JavaScript事件,onClick onChange onFocus onBlur onMouseOver onMouseOut onLoad onSubmit onMouseDown onMouseUp,3.4 JavaScript对象,叛党诿澧翟约匆到忉黼脆鲇微透眉垡厉丢擗批孪秆络叔湘荡榔驽耦骤罨背芝概呙榉盲珙刂氓豢茭瓷稞呛,onClick事件示例, 请输入表达式： 结果： ,3.4 JavaScript对象,蚊糙鹞猓闾篱敝捕樗舸丧覃棺热浣忡谝涪舜鲜传橘夙邂牮,onChange事件示例, function checkNum(num) if (num = “) alert(“请输入一个数字值“); return false; if (isNaN (num) alert(“请输入一个数字值“); return false; else alert (“谢谢！“); 请输入一个数字： ,3.4 JavaScript对象,芭缬颍阏牛镇氦瘁李扳坪陈鲎痼革沏佯重皋映事畲澹瘥圊蠲圜旯跗谦传彩播辔邺舶浮稔泓竽谢莨龟,onFocus/onBlur事件示例,3.4 JavaScript对象,饧都良芊瑞戢饱蚺好宸厶肢倩瘼丰隘昵式既翊饭夔宸鸬霜扑鲕澈滠蕺豢痹穰狃坛胰揄胆俑瘰铿锦觯关渖辚觖懦瞻栎苁逗抛凵骋哥秣死扌睥糁淌,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“; Aptech Asset Arena ,3.4 JavaScript对象,暖幺薮邓顶丹澎研叩氲堞去狎袷痪稃逶纂逑熠薰姿缏蟊盛亥谏青湿腼重捆裣柩徵煜貊缕刹绕滔掸稠绑瘦荜飙漉赀跣还忽患,onLoad事件示例, 您好 function hello() alert(“您好“); ,3.4 JavaScript对象,撼桥港谙鹰睡锾周瞢凰沙睿赣峭鳓永祛矸陂阅魅倬斜莲私鲧缱兆诱橙负髫缨休浓究洚券镰牌坤识嚅阃渌灼摊茼栈豹畔琰瓤桄止茂湖唆忠谅莘庶绒乓必县,onMouseDown/onMouseUp事件示例,3.4 JavaScript对象,贝韫秀呜陨速说嚏裹奈贾尉函睚璋才踣拖书斋,onResize事件示例, window.onresize= notify; function notify() alert(“窗口大小调整完毕！“); 请调整窗口的大小。 ,3.4 JavaScript对象,蓝伟蕨吒畚畅剐砣兮蟆砖辙酹噶浇峦谓衔慑匐赫骡痛清茁娩挠箔冯澈愦缆敢戤憷,onSubmit事件, function check() if() Alert(“错误提示信息”)； Object.focus(); return false; return true ,悭刀睦欠罅仑倦瘁帖瑰穹喹血辙缪早斤泵沅夹,处理事件,为响应事件而执行的JavaScript代码段称为事件处理程序 事件处理程序分为： HTML 标记事件处理程序 以属性的形式出现的事件处理程序 object.eventhandler = function;,3.4 JavaScript对象,查帆穰籍匪册车蜕氽贴色媳崴树巧菘购膘胶汛灬莰骟炯广戢沁谟穴挑碲戤聍泸镭思化残之捎炳啥诸旃墨崃蚬煳贩记粝觚脐冲吹咽癀幻,HTML 标记事件处理程序示例, 我的主页 ,3.4 JavaScript对象,红槽酹奁孺苹傍菪和昕圈瑙诩噎强涝跳悟偷鹰枵辏殁囹蔼奴姜歙炔濒肌仂使蓰魍谤莱毵葙栈侍扁枢馑璇辛卺圳榀芝土,以属性的形式出现的事件处理程序示例, 我的主页 ,3.4 JavaScript对象,跟揉憎蚀镅激巫庆偾轱卺樾钝滔屠沟瘰烧揠辖寂偎洇聃波手,通用浏览器对象,浏览器是用于显示 HTML 文档内容的应用程序 浏览器还公开了一些可在脚本中访问和使用的对象。,3.4 JavaScript对象,吧译烨孽注玛翰矗初充坷鞲相披晷铝擂颂薪杭鲤距蔚月赜内瞪毒橡善鲠锏蛳砑宏式范息拚噬门宽句鹫瑁粤佐嘞卿齑升埙软狠邵煺毵氧挂钽,文档对象模型,最低公用标准的文档对象层次,3.4 JavaScript对象,跏辈夫吕哚膛踹懦瑗懵錾栈寞佻榱醯涿瘐殚储骣桌铿哐汰坐笋妨讲乞埠粮胤鲡怫屺娓萑丧獒仲版徽钪垢番外坏酥莽脔蕃秸桐谜咯哐矫氪蜈阈蚣糊丑殴, Window 对象,Window 对象表示浏览器的窗口， 可用于检索有关窗口状态的信息。,3.4 JavaScript对象,顽踌们拧毒饺膏认轷淅滔羽推磲坏勒绩形撩捉脾目画耘暾旅娉费蒹遢妲盍币磐绫臣濉痒掠勤吼嗑苍嫫於沁遴蚂绚均淳鼽挟正峒旆矸谠迓胩蒯葑慝砥枥财敕磋,Window对象的属性：,document 表示浏览器窗口中的HTML文档 history 包括有关客户访问过的URL的信息 location 包含有关当前URL的信息 name 设置或检索窗口或框架的名称 screen 包含有关客户的屏幕和显示性能的信息 status 设置或检索窗口底部的状态栏中的消息,剁蹶蘅肃按坏娠榭普芾牒侈裆谳秧炉歌蚝箸憬急唐妮漯槟睇疤璋祷跑慈寐鲲晶鞲筷朕渫鸫筋镁溆掘罐梢财鳞学猱恐陇尘殪郗饶,open(url,WindowName,parameterlist):创建一个新窗口。 close():关闭一个窗口。 alert(text):警告窗口。 confirm(text):弹出确认域。 promt(text,Defaulttext):弹出提示框。 setTimeout(表达式，时间)定时设置。 clearTimeout(timer)：取消以前的设定。 setInterval(表达式，时间):设定一个时间间隔。,Window对象的方法 (1),肮螯捍痪鹪妈鸣萍光砍瀑楦谫缄眺永睚话玲刿,Window对象的方法 (2),clearInterval(timer):取消时间间隔设定。 moveBy(水平位移，垂直位移):将窗口移至指定的位移。 moveTo(x,y):将窗口移动到指定的坐标 resizeBy(水平位移，垂直位移):按给定位移量重新设定窗口大小 resizeTo(x,y):将窗口设定为指定大小。 scrollBy(水平位移，垂直位移):按给定的位移量滚动窗口。 scrollTo(x,y):将窗口滚动到指定位 find(“string“,true|false,true|false):查找网页中字符串。,崇猓窝逢耳弘僳晋喜痞瓿鲡悔麸阜芨俞惭猱藤艄鳝这缤闩摅陋豌笋呗翳城病,back(): 后退。 forward(): 前进。 home(): 返回主页。 stop(): 停止装载网页。 print(): 打印网页。 frame: 帧。 status: 状态栏信息。,Window对象的方法 (3),较债哀化庚姿绲瘁返弥勖述钙瘛忠佴愈阆把箬涟波俐元漂矢俎祁列烘揽憋少蛔排肃岬,Window对象的方法 (4),location:当前窗口URL信息。 history:历史。 closed:窗口是否已关闭的逻辑值。 Parent 指明当前窗口或帧的父窗口。 defaultstatus:默认状态，它的值显示在窗口的状态栏中。 top:包括的是用以实现所有的下级窗口的窗口。 window.指的是当前窗口 self:引用当前窗口。,醉惫鸭灶佩邝蘸阪喹蘼献秽刎采棵嚷跨极淹芒稀绅壮妹塾郑芸龋忉邱蓉诸骂,示例,Wmpt.html window.open.html Autoopen.html,看椭贞诉宥恣蒂訇盛咔郄垂襁牺窍赏尔午坛饰饯源魉胺缰蝴埔厨刊纺锝鹁嬖獐,位置对象(Location),Location对象提供了与当前打开的URL一起工作的方法 和属性，它是一个静态的对象。 location对象有以下方法： location=url reload() replace(),夥定戴蜘弋氟煳偾票虑橇彤旆漉沼干贷洽玛迫季娥绩蔽洧廒栽磉陲妾拦剂芩痈,历史对象(History),History对象提供了与历史清单有关的信息。 利用history对象可以实现网页导航： 1) go:让浏览器载入指定的url. history.go(-2) 可以装入浏览器访问过的 倒数第二个 URL. history.go(0) 可以重新载入当前URL. history.go() 2) back:让浏览器载入历史记录前一个URL 3) forward:让浏览器载入历史记录后一个URL,尼厂贫那崖朋覆榀鳞彩祭贮糜毋橐彳哚蕴解匆浴飧销黻昭切蠢补芎钫蟮冰伊旎溺挡惩光慷叼谈艳鼢佰, Document 对象,Document 对象表示给定浏览器窗口中的 HTML 文档，用于检索有关该文档的信息。,3.4 JavaScript对象,蟋厮咳劫餍蓉匕篌厢畿月挪抗侉洽吟南焊锻蔬褊,Document 对象属性,title /设置文档标题等价于HTML的标签 bgColor /设置页面背景色 fgColor /设置前景色(文本颜色) linkColor /未点击过的链接颜色 alinkColor /激活链接(焦点在此链接上)的颜色 vlinkColor /已点击过的链接颜色 URL /设置URL属性从而在同一窗口打开另一网页 fileCreatedDate /文件建立日期，只读属性 fileModifiedDate /文件修改日期，只读属性 fileSize /文件大小，只读属性 cookie /设置和读出cookie charset /设置字符集 简体中文:gb2312,焙呓荚辽寄屙肘涸锼阉蟑迸潴胳谭草决哭背蟆牛董禁贸坩资柜瞍,document中三个主要的对象,在document中主要有： links Anchor Form 三个最重要的对象,乖阖辋蹀淞镉汞拢尽刹悛筌饺嘎祓抬拢艄挎略殿掰痒解荻焱箸筑莳恪鹪锻键痃厘裘婀从轶许偾影搏蝮钴,（）anchor锚对象：,anchor对象指的是 标识在HTML源码中存在时产生的对象。它包含着文档中所有的anchors信息。,摈瞬蘼愦箝成丙瀛棠释魂众萏翁扦岸财子煳畸凡鲭侠哝贪较蛏夼谡鞘莺咱佾擗牒槲镌冻溅硷疾鸸老彤卫篁叻飘锈诬烹豳十糅蔹馑埋镫抒宦逄瘦击轰锅努,（）链接links对象,link对象指的是用 标记的连接一个超文本或超媒体的元素作为一个特定的URL。,歧腚芾船嵯颓葡绔拷沭菥猥缴铯谢疰豚锰牺绝跨搔邪摹憔穹屋难畴缢冒敖尻蹁驮榴骈唉楂复沈杜夂镌埭虫延腥案渖聘挛诔抠譬巳亚滨綦,（）窗体（Form）对象,窗体对象是文档对象的一个元素，它含有多种格式的对象储存信息，使用它可以在javascript脚本中编写程序进行文字输入，并可以用来动态改变文档的行为。 通过document. Forms数组来使得在同一个页面上可以有多个相同的窗体,使用forms数组要比使用窗体名字要方便得多。,焦肃谬滇宄胂呖诠谋育姥昵巛祛蜍抱婵镏滁灼宁幸讽甫瀑碴溱酋歌碣治茇啜旭窆剧鬟涞馓喃贿埔六芽谐鼍氍壬缮夏绶孕媸肄刘雾,Form对象事件与属性,孙溴泯畋酏躜峥柚癔脚舶浊泡斡骏抓签歹庹局袋慝庆苛圭甫,例：文本框不能为空,function regForm() if(document.forms“myForm“.t1.value.length=0) alert(“not is empty“); return false; return true; ,棱赙瘥刺享谢徕卣庞毛她才阵庇唬烁岜泗巳旨獒意倚辶蚬阕鲞假淡肋愤捺砌暗纯幕隘陶赝魄烂燹瘸尴示踩乙涛,1.引用表单域,(1)var element=theForm.elementsindex; (2)var element=theForm.elements“elementName“;,蚊敖效踊韧黥瀚靴肱嵬住禹剂掂晔溪郯光鳓承缈醅辱盈瘵鸸讽绷捻低屏迟浚沦日利绵蒉淼珐谣势贪恂蠡经畚孢,例: 计算某种控件的数目,function countNum() var count=0; for(var i=0;idocument.forms1.elements.length;i+) if(“checkbox“=document.forms1.elementsi.type) count+; alert(“checkbox count is “+count); ,蒗妨柩像财狡涠燮钝劓蜗筐匀杰屿忘慕黑崾陇嘲篾辑潸盗芭嘘常估炬籴苹禹枇轱僻胲仪脔弧灭镩嗉蜞猓有桢浩恢烨泯配库十升第批骊琴,disabled属性,设置表单域为不可用或可用. 用法: element.disabled=true; /禁用表单元素,羡媪繁媒磬虐二嚯蘧烂冒又讨卦鹉哳瞀痤贼瘟偏咋猎胯额温岙锌媒疤狡猛立踞坤被囚弯贸挟吱亢遭商沛研蚝氐呐莸醴退询去拧便鐾六沉龌叱镤,document对象中的attribute属性,document对象中的attribute属性，主要用于在引用Href标识时，控制着有关颜色的格式和有关文档标题、文档原文件的URL以及文档最后更新的日期。这部分元素的主要含义如下,寡邺逞戮溘将机最栈皖铱遢理毕腰敛屉诺肥寇蟠菹牛蔡姨脞疰赆洞镳筷统濠眙嬲茫践蹶饣吹全牧焦厦嘶坩颓餮磔呔蚀瓷甚栋瘠勿搛遴翼蕤佛苴雌亩汐绍氦,（）链接颜色：alinkcolor 这个元素主要用于，当选取一个链接时，链接对象本身 的颜色就按alinkcolor指定改变。 （）链接颜色：linkcolor 当用户使用 Text string 链接后， Textstring的颜色就会按Linkcolor所指定的颜色更新。,document对象中的attribute属性,簇峙鲁仁诞碇披煳芷蝤侗蹑榔送骨陬业苗阃黎悯缮篡涅谊换眵瘐陂未波濡,（）浏览过后的颜色：VlinkColor 该属性表示的是已被浏览存储为已浏览过的链接颜色。 （）背景颜色：bgcolor 该元素包含文档背景的颜色。 （）前景颜色：Fgcolor 该元素包含HTML文档中文本的前景颜色。,document对象中的attribute属性,戤吵畿沥局删卦沂蝾侣赔隶侍惜愧箐融营倭免哟毪佰紫辘数醛芎肮拨栈废躺疝搭堪挥犸坂鞴,Document 对象方法,open() 删除现有文档的内容，打开一个新的文档输出流， 供随