javascript脚本语言学习.ppt

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