• 1. SUN国际认证管理中心 Gjun巨匠IT培训广州  中山大学软件人才培训联盟 讲师:张明 Mobile: 15920458129 QQ: 1452261033 EMAIL: zhangming@pcschoolchina.com Website: http://www.pcschoolchina.com
  • 2. 巨 匠 Java 软 件 工 程 师 培 训 系 列  《JAVASCRIPT》 —Web客户端脚本语言讲师:张 明
  • 3. 课程目标掌握JavaScript的语法、程序控制结构 熟练使用JavaScript内置基本对象 熟悉JavaScript调用DHTML元素 掌握用JavaScript编写客户端脚本程序的技能 能创建功能强大的互动网页
  • 4. 主题内容JavaScript概述 JavaScript基础语法 JavaScript常用内置对象 JavaScript常用DHTML对象 JavaScript面向对象编程
  • 5. 概念JavaScript是一种网页编程技术,大部分使用者将它用于创建动态交互网页 JavaScript是一种基于对象和事件驱动的解释性脚本语言,具有与Java类似的语法 JavaScript是一种使用简单,功能强大的编程语言
  • 6. 分类JavaScript的基础为核心JavaScript,在实现上分为客户端JavaScript、服务器端JavaScriptJavaScript核心JavaScript客户端JavaScript服务器端JavaScript浏览器对象服务器对象内置对象
  • 7. 重要性随着Web浏览器的改进,功能越来越强大 是搭配服务器端技术的主要客户端编程语言
  • 8. 特 点简单易用 简洁易用,与Java有类似的语法 可以使用任何文本编辑工具编写 只需要浏览器就可以执行程序 解释执行 事先不编译 逐行执行 无需进行严格的变量声明 基于对象 内置大量现成对象,编写少量程序可以完成目标
  • 9. 使用范围适合做哪些事情 客户端数据计算 客户端表单合法性验证 浏览器对象的调用 浏览器事件的触发 网页特殊显示效果制作 不适合做哪些事情 大型应用程序 图像、多媒体处理 网络实时通讯应用
  • 10. JavaScript与Java的区别JavaScript与Java运行方式不一样 JavaScript是解释执行 Java是编译,解释执行 JavaScript不是Java的简化版本 逻辑运算符、语句结构类似 变量申明、对象调用等不同 JavaScript和Java功能实现不一样 JavaScript通过浏览器实现程序功能 Java通过Java虚拟机实现程序功能
  • 11. 编写工具JavaScript的编辑工具很多,如 Notepad,Ultraedit,EditPlus Microsoft FrontPage、DreamWeaver、Microsoft Visual InterDev Eclipse,JBuilder,NetBean等IDE开发工具 针对简单的程序,我们使用文本编辑器直接书写源代码
  • 12. 同步练习本练习主要针对事件驱动和基于对象,该例子在网页的一个按钮中设置了onclick属性,当鼠标单击该按钮时,将会弹出一个窗口,浏览google搜索网站 window是客户端JavaScript中浏览器对象之一,open是window对象的一个方法,意思是打开窗口,在参数中设置好网址,就可以打开指定的网站。在将来学习DHTML的时候将会详细讲解window对象的使用方法 打开记事本,将以下代码输入,保存为D:\hello.htm 保存好以后双击该文件打开,试一试单击按钮后运行的结果
  • 13. 事件定义方式在定义事件时直接写入JavaScript脚本
  • 14. 运行结果用记事本输入程序,以文件名test1_1.htm保存,用IE打开该文件鼠标单击按钮 [打开google网站]后弹出新的google站点IE窗口
  • 15. 直接嵌入式在网页中直接嵌入JavaScript脚本开始声明HTML注释JavaScript多行注释JavaScript单行注释脚本结束声明语句结尾
  • 16. 运行结果用记事本输入程序,以文件名test1-2.htm保存,用IE打开该文件。IE浏览器执行JavaScript时忽略了JS注释部分,只输出运行结果。
  • 17. 文件调用式在网页中调用独立JavaScript文件JS脚本文件中不需要脚本开始和结束声明HTML文件
  • 18. 运行结果用记事本分别创建test1_3.htm和test1-3.js,用IE打开test1_3.htm文件文件调入JavaScript代码和直接嵌入一样可以正常运行
  • 19. JavaScript的运行环境在Windows、Linux、Unix操作系统都可以运行JavaScript,只要安装了支持JavaScript的浏览器 不同的浏览器甚至同一浏览器的不同版本对JavaScript的支持程度都不一样 大部分常见的浏览器都对JavaScript提供支持,在本教程中以IE8.0作为主要的调试运行环境
  • 20. JavaScript的运行环境浏览器WindowsLinuxUnixIE 3.0--6.0√×√Netscape 3.0--7.0√√√Mozilla 1.0--1.6 FireFox2.0-3.0√√√Opera 5.0—7.0√√√Firebird×√√Konqueror ×√×Galeon×√×支持: √ 不支持: ×支持JavaScript的浏览器与操作系统
  • 21. JavaScript运行环境的建立Mozilla的安装 为什么要安装Mozilla 完全符合ECMA v3国际标准 Netscape6采用与其一致的内核 支持Windows、Linux和Unix等更多操作系统 源代码开放、程序短小、装卸方便 可用于检查JavaScript在非IE环境运行情况 如何安装Mozilla 下载Mozilla http://www.mozilla.org/ 运行Mozilla安装程序
  • 22. 调试运行JavaScript程序如果程序出现错误 双击左下角出现的感叹号 弹出错误显示窗口, 详细信息框中将会提示错误所在的行号
  • 23. 主题内容JavaScript概述 JavaScript基础语法 JavaScript常用内置对象 JavaScript常用DHTML对象 JavaScript面向对象编程
  • 24. 字符集JavaScript使用Unicode字符集,每个字符和汉字都是采用2个字节进行编码 ASCII码由大小写英文字母、数字、英文符号等组成,采用1个字节中的低7位进行编码,是Unicode编码的子集 Unicode是一种国际编码,可以表达几乎任何书写语言,它是采用16位编码的字符集010000011001111011000000ASCII编码:7位编码Unicode编码:16位编码A你
  • 25. 大小写敏感性在HTML中大小写是不敏感的,但是在JavaScript程序中大小写是敏感的 HTML都是大小写不敏感的 标准的JavaScript语法定义中区分大小写 大小写必须一致
  • 26. 换行与空格a=1;b=2;a=1 b=2{ a=1; b=2; }{ a=1; b=2; }==有换行,分号允许不加提倡加上空格或TAB增强程序可读性a=1; b=2;=推荐加上分号减少错误和歧义的发生空格、TAB换行、分号
  • 27. 常量与标识符常量 直接在程序中出现的数据值 标识符 由不以数字开头的字母、数字、下划线(_)、美元符号($)组成 常用于表示函数、变量等的名称 例如:_abc,$abc,abc,abc123是标识符,而1abc不是 JavaScript语言中代表特定含义的词称为保留字,不允许程序再定义为标识符
  • 28. 常量与标识符ECMA v3标准保留的JavaScript的关键字breakcasecatchcontinuedefaultdeletedoelsefalsefinallyforfunctionifininstanceofnewnullreturnswitchthisthrowtruetrytypeofvarvoidwhilewith
  • 29. 使用范例function、var是保留字sayHello是自定义标识符字符串常量
  • 30. 内容线索词法结构 数据类型 数据类型分类 数字类型 字符串类型 类型转换 运算符 语句 变量与函数 对象
  • 31. 数据类型分类JavaScript数据类型基本类型特殊类型组合类型Number:数字 String:字符串 Boolean:布尔Null:空 Undefined:未定义Array:数组 Object:对象
  • 32. 数字类型简介 最基本的数据类型 不区分整型数值和浮点型数值 所有数字都采用64位浮点格式存储,相当于Java和C语言中的double格式 能表示的最大值是±1.7976931348623157 x 10308 能表示的最小值是±5 x 10 -324
  • 33. 数字类型整数 在JavaScript中10进制的整数由数字的序列组成 精确表达的范围是 -9007199254740992 (-253) 到 9007199254740992 (253) 超出范围的整数,精确度将受影响 浮点数 使用小数点记录数据 例如:3.4,5.6 使用指数记录数据 例如:4.3e23 = 4.3 x 1023
  • 34. 数字类型16进制和8进制数的表达 16进制数据前面加上0x,八进制前面加0 16进制数是由0-9,A-F等16个字符组成 8进制数由0-7等8个数字组成 16进制和8进制与2进制的换算16进制:0xF3D410进制:624202进制: 1111 0011 1101 01008进制:01717242进制: 1 111 001 111 010 100
  • 35. String数据类型简介 是由Unicode字符、数字、标点符号组成的序列 字符串常量首尾由单引号或双引号括起 JavaScript中没有字符类型 常用特殊字符在字符串中的表达 字符串中部分特殊字符必须加上右划线\ 常用的转义字符换行单引号双引号右划线\n\'\"\\
  • 36. String数据类型//测试特殊字符的书写 var aa="\u4f60\u597d\n欢迎来到\"JavaScript世界\" "; alert(aa); String数据类型的使用 特殊字符的使用方法和效果 Unicode的插入方法你好换行
  • 37. Boolean数据类型简介 Boolean类型仅有两个值:true和false,也代表1和0,实际运算中true=1,false=0 布尔值也可以看作on/off、yes/no、1/0对应true/false Boolean值主要用于JavaScript的控制语句,例如if (x==1){ y=y+1; }else{ y=y-1; }
  • 38. Null Undefined简介 Null在程序中代表变量没有值或者不是一个对象 Undefined代表变量的值尚未指定或者对象属性根本不存在有趣的比较 比较结果null与空字符串不相等,null代表什么也没有,空字符串则代表一个为空的字符串null与false不相等,但是!null等于truenull与0不相等,但是在C++等其他语言中是相等的null与undefined相等,但是null与undefined并不相同
  • 39. 数据类型转换JavaScript属于松散类型的程序语言 变量在声明的时候并不需要指定数据类型 变量只有在赋值的时候才会确定数据类型 表达式中包含不同类型数据则在计算过程中会强制进行类别转换数字 + 字符串:数字转换为字符串 数字 + 布尔值:true转换为1,false转换为0 字符串 + 布尔值:布尔值转换为字符串true或false
  • 40. 数据类型转换强制类型转换函数 函数parseInt:强制转换成整数 例如parseInt("6.12")=6 例如parseInt(“12a")=12 例如parseInt(“a12")=NaN 例如parseInt(“1a2")=1 函数parseFloat: 强制转换成浮点数 例如parseFloat("6.12")=6.12 函数eval:将字符串强制转换为表达式并返回结果 例如eval("1+1")=2 例如eval("1<2")=true
  • 41. 数据类型转换类型查询函数 函数typeof :查询数值当前类型 (string / number / boolean / object ) 例如typeof("test"+3)  "string" 例如typeof(null)  "object " 例如typeof(true+1)  "number" 例如typeof(true-false)  "number"
  • 42. 算术运算符加(+)、 减(-)、 乘(*) 、除(/) 、余数(% ) 加、减、乘、除、余数和数学中的运算方法一样 例如:9/2=4.5,4*5=20,9%2=1 -除了可以表示减号还可以表示负号 例如:x=-y +除了可以表示加法运算还可以用于字符串的连接 例如:"abc"+"def"="abcdef"
  • 43. 算术运算符递增(++) 、递减(--) 假如x=2,那么x++表达式执行后的值为3,x--表达式执行后的值为1 i++相当于i=i+1,i--相当于i=i-1 递增和递减运算符可以放在变量前也可以放在变量后
  • 44. 逻辑运算符等于 ( == ) 、不等于( != ) 、 大于( > ) 、 小于( < ) 大于等于(>=) 、小于等于(<=) 与 (&&) 、或(||) 、非(!)111&&=010&&=000&&=111||=011||=000||=10!=01!=
  • 45. 位运算符左移(<<) 、右移(>>)、NOT (~)3<<2=12左移2位后补01100001112>>1=6右移1位前补000110110~6=9位非1和0互换01101001
  • 46. 位运算符位与(&) 、位或(|)、异或(^)1&2=0位与运算1000010000001|2=3位或运算100001001100^2=1异或运算10000100
  • 47. 赋值运算符 赋值 = JavaScript中=代表赋值,两个等号==表示判断是否相等 例如,x=1表示给x赋值为1 if (x==1){...}程序表示当x与1相等时 if(x==“on”){…}程序表示当x与“on”相等时 配合其他运算符形成的简化表达式 例如i+=1相当于i=i+1,x&=y相当于x=x&y
  • 48. 优先顺序表运算符描述 ( )括号++、--、-、~、!一元运算符*、/、%乘法、除法、取模+、-、+加法、减法、字符串连接<<、>>、>>>移位<、<=、>、>=小于、小于等于、大于、大于等于==、!=、===、!==等于、不等于、恒等、不恒等&按位与^按位异或|按位或&&逻辑与||逻辑或?:条件运算符=、oP=赋值、运算赋值
  • 49. 小常识2 == “2” true 2 === “2” false 4 != “4” false 4 !== “4” true var a = 2; var b = 4; var c = a--a; var c = a--a; var c = a--a; var c = a--a;
  • 50. if 选择控制语句if-else基本格式 if (表达式){ 语句1; ...... }else{ 语句2; ..... } 功能说明 如果表达式的值为true则执行语句1, 否则执行语句2表达式语句1truefalse语句2
  • 51. if 选择控制语句程序范例var x= (new Date()).getDay(); //获取今天的星期值,0为星期天 var y; if ( (x==6) || (x==0) ) { y="周末"; }else{ y="工作日"; } alert(y);if 语句允许不使用else子句y="工作日"; if ( (x==6) || (x==0) ) { y="周末"; }等价于
  • 52. if 选择控制语句if语句嵌套格式 if (表达式1) { 语句1; }else if (表达式2){ 语句2; }else if (表达式3){ 语句3; } else{ 语句4; }表达式1表达式2表达式3语句1语句2语句3语句4truetruetruefalsefalsefalse
  • 53. 程序范例if (x==1){ y="星期一"; }else if (x==2){ y="星期二"; ... }else if (x==6){ y="星期六"; }else if (x==0){ y="星期日"; }else{ y="未定义"; }if 语句允许进行嵌套对变量x的值进行判断,采用if语句嵌套转换成相应的星期名称
  • 54. switch 选择控制语句switch基本格式 switch (表达式) { case 值1:语句1;break; case 值2:语句2;break; case 值3:语句3;break; default:语句4; }case 值1case 值2语句1语句2truetruefalse表达式case 值2语句3truefalse语句4false
  • 55. switch 选择控制语句程序范例 对变量x的值进行判断,采用switch转换成相应的星期名称。switch(x){ case 1:y="星期一"; break; case 2:y="星期二"; break; case 3:y="星期三"; break; case 4:y="星期四"; break; case 5:y="星期五"; break; case 6:y="星期六"; break; case 7:y="星期日"; break; default: y="未定义"; }swith比else if结构更加简洁清晰,使程序可读性更强。
  • 56. for 循环控制语句for循环基本格式 for (初始化;条件;增量){ 语句1; ... } 功能说明 实现条件循环,当条件成立时,执行语句1,否则跳出循环体条件语句1增量falsetrue初始化
  • 57. 程序范例for (var i=1;i<=7;i++){ document.write("hello "); document.write("
    "); } //循环输出H1到H7的字体大小
  • 58. while 循环控制语句while循环基本格式 while (条件){ 语句1; ... } 功能说明 运行功能和for类似,当条件成立循环执行语句花括号{}内的语句,否则跳出循环条件语句1falsetrue初始化
  • 59. while 循环控制语句程序范例var i=1; while (i<=7) { document.write("hello "); document.write("
    "); i++; } //循环输出H1到H7的字体大小采用while和for的输出效果一样
  • 60. 变量的声明与使用变量声明语句 var a; var x,y; 变量赋值语句 a=1; x="hello,how are you!"; y=x; 变量的调用 … alert(a); document.write("Tom,"+x);允许一次定义多个变量不需要指定变量类型赋值为数值赋值为字符串赋值为另一个变量
  • 61. 函数的声明与使用函数的定义 function 函数名 (参数){ 函数体; return 返回值; } 功能说明 可以使用变量、常量或表达式作为函数调用的参数 函数由关键字function定义 函数名的定义规则与标识符一致,大小写是敏感的 返回值必须使用return
  • 62. 函数的声明与使用使用范例在调用函数的时候要注意函数的大小写,如果写成sayhello或sayHello都会出错
  • 63. 对 象 对象的概念与分类: 对象由属性和方法封装而成 JavaScript是一种基于对象语言,对象是JavaScript中最重要的元素 JavaScript包含四种对象 内置对象 ,DATE 自定义对象 Cart 浏览器对象 Window ActiveX对象 ActiveXObject
  • 64. 对 象11种内置对象 包括 Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp , Object 简介 在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象 也可以用创建对象的方法定义变量 String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象
  • 65. 对 象在JavaScript程序大多数功能都是通过对象实现的
  • 66. 主题内容JavaScript概述 JavaScript基础语法 JavaScript常用内置对象 JavaScript常用DHTML对象(Dom) JavaScript面向对象编程
  • 67. 内置对象的分类 11种内置对象 包括 Array, Boolean, Date, Math, Number , String Error, Function, Global , Object, RegExp 简介 在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象 可以用创建对象的方法定义变量 String、Math、Array、Date是JavaScript中常用的对象
  • 68. 内置对象的分类类型内置对象介绍数据对象Number数字对象String字符串对象Boolean布尔值对象组合对象Array数组对象Math数学对象Date日期对象高级对象Object自定义对象Error错误对象Function函数对象RegExp正则表达式对象Global全局对象
  • 69. 创建String对象var str1="hello world"; alert(str1.length); alert(str1.substr(1,5));var str1= new String("hello word"); alert(str1.length); alert(str1.substr(1,3));调用字符串的对象属性或方法时自动创建对象,用完就丢弃采用new创建字符串对象str1,全局有效自动创建字符串对象手工创建字符串对象
  • 70. String对象的属性获取字符串长度 length书写格式 x.length 使用注解 x代表字符串对象 length必须小写 中间用点操作符调用 汉字、字母长度均为1 返回大于或等于0的整数var str1="String对象"; var str2=""; alert("str1长度 "+str1.length); alert("str2长度 "+str2.length);
  • 71. String 对象的方法String对象方法(1)格式编排方法(2)大小写转换(3)获取指定字符(5)查询字符串(4)子字符串处理截取替换分割连接
  • 72. String对象的方法(1)——格式编排方法方法介绍方法介绍anchor()锚fontcolor(color)字体颜色blink()闪烁fixed()固定bold()粗体fontsize(size)字体大小italics()斜体strike()删除线big()字变大link(url)超链接small()字变小sub()下标sup()上标
  • 73. String对象的方法(1) )——格式编排方法书写格式: String对象提供了一组针对HTML格式的方法,如x.anchor()返回锚定义字符串x,x.bold()返回粗体表示字符串x,x.sup()返回上标格式字符串x。var x="google"; var y="x.bold():"+x.bold(); document.write(y.fontsize(7)); //相当于document.write("google")
  • 74. 格式编排方法返回值列表方法返回值说明anchor()string返回锚定义字符串blink()string返回闪烁定义字符串fixed()string返回固定定义字符串bold()string返回粗体定义字符串italics()string返回斜体定义字符串strike()string返回删除线定义字符串big()string返回字变大定义字符串small()string返回字变小定义字符串sub()string返回下标定义字符串sup()string上标定义字符串String对象的方法(1) )——格式编排方法
  • 75. 方法返回值说明fontcolor(“color”) string返回字体颜色定义字符串,color参数可以为red、blue、green等fontsize(“size”) string返回字体大小定义字符串,size从小到大可以定义为1到7link(“url”) string返回超链接定义字符串,url为网络超链接格式编排方法返回值列表String对象的方法(1) )——格式编排方法
  • 76. 使用范例function writeln(mystr){ document.write(mystr+"
    "); } var x="hello"; writeln("anchor="+x.anchor()); writeln("blink="+x.blink()); writeln("fixed="+x.fixed()); writeln("bold="+x.bold()); writeln("italics="+x.italics()); writeln("strike="+x.strike()); writeln("big="+x.big()); writeln("small="+x.small()); writeln("sub="+x.sub()); writeln("sup="+x.sup());
  • 77. String对象的方法(2)——大小写转换类别方法说明大小写转换toLowerCase()返回小写字符串toUpperCase()返回大写字符串获取指定字符charAt(index)返回指定位置字符charCodeAt(index)返回指定位置字符Unicode编码查询字符串indexOf(findstr,index)返回正向的索引位置lastIndexOf(findstr)返回反向的索引位置match(regexp)返回匹配的字符串search(regexp)返回找到字符串的首字符索引
  • 78. 书写格式 x.toLowerCase() x.toUpperCase() 使用注解 x代表字符串对象 返回转换后的字符串var str1="AbcdEfgh"; var str2=str1.toLowerCase(); var str3=str1.toUpperCase(); alert(str2); //结果为"abcdefgh" alert(str3); //结果为"ABCDEFGH"String对象的方法(2)——大小写转换
  • 79. 程序图解:AbcdEfghabcdefghABCDEFGHvar str1="AbcdEfgh"; var str2=str1.toLowerCase();alert(str2); //结果为"abcdefgh"var str3=str1.toUpperCase();alert(str3); //结果为"ABCDEFGH"String对象的方法(2)——大小写转换
  • 80. String对象的方法(3) ——获取指定字符书写格式 x.charAt(index) x.charCodeAt(index) 使用注解 x代表字符串对象 index代表字符位置 index从0开始编号 charAt返回index位置的字符 charCodeAt返回index位置的Unicode编码var str1="JavaScript网页教程"; var str2=str1.charAt(12); var str3=str1.charCodeAt(12); alert(str2); //结果为"教" alert(str3); //结果为25945
  • 81. 程序图解:JavaScript网页教程012345678910111213var str1="JavaScript网页教程";var str2=str1.charAt(12);var str3=str1.charCodeAt(12);alert(str2); //结果为"教" alert(str3); //结果为25945教25945String对象的方法(3) ——获取指定字符
  • 82. String对象的方法(4)——查询字符串书写格式 x.indexOf(findstr,index) x.lastIndexOf(findstr) 使用注解 x代表字符串对象 findstr代表查找的字符串 index代表开始找的位置索引,省略代表从开始找 返回findstr在x中出现的首字符位置索引,如果没有找到返回-1 lastIndexOf代表从后面找起var str1="JavaScript网页教程"; var str2=str1.indexOf("a"); var str3=str1.lastIndexOf("a"); alert(str2); //结果为1 alert(str3); //结果为3
  • 83. 程序图解:JavaScript网页教程012345678910111213var str1="JavaScript网页教程";var str2=str1.indexOf("a");var str3=str1.lastIndexOf("a");alert(str2); //结果为1 alert(str3); //结果为3String对象的方法(4)——查询字符串
  • 84. 书写格式 x.match(regexp) x.search(regexp) 使用注解 x代表字符串对象 regexp代表正则表达式或字符串 match返回匹配字符串的数组,如果没有匹配则返回null search返回匹配字符串的首字符位置索引var str1="JavaScript网页教程"; var str2=str1.match("Script"); var str3=str1.search("Script"); alert(str2[0]); //结果为"Script" alert(str3); //结果为4String对象的方法(4)——查询字符串
  • 85. 程序图解:JavaScript网页教程012345678910111213var str1="JavaScript网页教程";var str2=str1.match("Script");var str3=str1.search("Script");alert(str2[0]); //结果为"Script" alert(str3); //结果为4match返回的是字符串数组search的作用同indexOf方法String对象的方法(4)——查询字符串
  • 86. String对象的方法(5) ——子字符串处理类 别方 法说 明截取子字符串substr(start,length)返回从索引位置start开始长为length的子字符串substring(start,end)返回start开始end结束的子字符串slice(start,end)同substring,但允许使用负数表示从后计算位置替换子字符串replace(findstr,tostr)返回替换finstr为tostr之后的字符串分割字符串split(bystr)返回由bystr分割成的字符串数组连接字符串concat(string)返回与string连接后的字符串
  • 87. 截取子字符串书写格式 x.substr(start, length) x.substring(start, end) 使用注解 x代表字符串对象 start表示开始位置 length表示截取长度 end是结束位置加1 第一个字符位置为0var str1="abcdefgh"; var str2=str1.substr(2,4); var str3=str1.substring(2,4); alert(str2); //结果为"cdef" alert(str3); //结果为"cd"
  • 88. 程序图解:abcdefghabcdefgh01234567abcdefgh01234567var str1="abcdefgh";var str2=str1.substr(2,4);var str3=str1.substring(2,4);alert(str2); //结果为"cdef" 从索引为2的字符开始,截取四个字符从索引为2的字符开始,到索引为3的字符为止alert(str3); //结果为"cd"截取子字符串
  • 89. 书写格式 x.slice(start, end) 使用注解 x代表字符串对象 start表示开始位置索引 end是结束位置下一字符索引编号 第一个字符索引为0 start、end可为负数 -1代表最后一个字符 end省略则相当于从start位置开始截取以后所有字符var str1="abcdefgh"; var str2=str1.slice(2,4); var str3=str1.slice(4); var str4=str1.slice(2,-1); var str5=str1.slice(-3,-1); alert(str2); //结果为"cd" alert(str3); //结果为"efgh" alert(str4); //结果为"cdefg" alert(str5); //结果为"fg"截取子字符串
  • 90. 程序图解:abcdefgh01234567-8-7-6-5-4-3-2-1var str1="abcdefgh";var str2=str1.slice(2,4); var str3=str1.slice(4); var str4=str1.slice(2,-1); var str5=str1.slice(-3,-1); alert(str2); //结果为"cd" alert(str3); //结果为"efgh" alert(str4); //结果为"cdefg" alert(str5); //结果为"fg"abcdefgh01234567-8-7-6-5-4-3-2-1截取子字符串
  • 91. 替换子字符串书写格式 x.replace(findstr,tostr) 使用注解 x代表字符串对象 findstr要找的子字符串 tostr替换为的字符串 返回替换后的字符串var str1="abcdefgh"; var str2=str1.replace("cd","aaa"); alert(str2); //结果为"abaaaefgh"
  • 92. 程序图解:abcdefghabcdefghabaaaefghvar str1="abcdefgh";var str2=str1.replace("cd","aaa");alert(str2); //结果为"abaaaefgh"将str1字符串中的子字符串"cd"替换为"aaa"截取子字符串
  • 93. 分割字符串书写格式 x.split(bystr) 使用注解 x代表字符串对象 bystr作为分割字符串 返回分割后的字符串数组var str1="一,二,三,四,五,六,日"; var strArray=str1.split(","); alert(strArray[1]); //结果为"二"
  • 94. 程序图解:一,二 ,三,四,五,六,日var str1="一,二,三,四,五,六,日"; var strArray=str1.split(",");alert(strArray[1]); //结果为"二"生成的数组元素编号是从0开始编号的,所以索引1指的是第二个元素一,二 ,三,四,五,六,日分割字符串一二三四五六日0123456
  • 95. 连接字符串书写格式 y=x.concat(addstr) 使用注解 x代表字符串对象 addstr为添加字符串 返回x+addstr字符串var str1="abcd"; var str2=str1.concat("efgh"); alert(str2); //结果为"abcdefgh"
  • 96. 连接字符串程序图解:abcdvar str1="abcd";var str2=str1.concat("efgh");alert(str2); //结果为"abcdefgh"将str1与字符串"efgh"相加后赋值给str2,但是str1自身的值不发生变化abcdefgh+abcdefgh
  • 97. 创建Array对象创建数组对象 初始化数组对象var cnweek=new Array(7); var books=new Array();创建数组时允许指定元素个数也可以不指定元素个数。也可以直接在建立对象时初始化数组元素,元素类型允许不同。var cnweek=new Array(7); cnweek[0]="星期日"; cnweek[1]="星期一"; ... cnweek[6]="星期六";var test=new Array(100,"a",true);
  • 98. 创建Array对象创建二维数组 var cnweek=new Array(7); for (var i=0;i<=6;i++){ cnweek[i]=new Array(2); } cnweek[0][0]="星期日"; cnweek[0][1]="Sunday"; cnweek[1][0]="星期一"; cnweek[1][1]="Monday"; ... cnweek[6][0]="星期六"; cnweek[6][1]="Saturday";通过指定数组中的元素为数组的方式可以创建二维甚至多维数组。星期日Sunday星期一Monday星期二Tuesday星期三Wensday星期四Thursday星期五Friday星期六Saturday
  • 99. Array对象的属性获取数组元素的个数 length书写格式 x.length 使用注解 x代表数组对象 length必须小写 中间用点操作符调用 返回大于或等于0整数var cnweek=new Array(7); cnweek[0]="星期日"; cnweek[1]="星期一"; cnweek[2]="星期二"; cnweek[3]="星期三"; cnweek[4]="星期四"; cnweek[5]="星期五"; cnweek[6]="星期六"; for (var i=0;i
  • 100. Array对象的方法类别方法说明连接数组join(bystr)返回由bystr连接数组元素组成的字符串toString()返回由逗号(,)连接数组元素组成的字符串concat(value,...)返回添加参数中元素后的数组数组排序reverse()返回反向的数组sort()返回排序后的数组
  • 101. 连接数组-join方法书写格式 x.join(bystr) x.toString() 使用注解 x代表数组对象 bystr作为连接数组中元素的字符串 返回连接后的字符串 与字符串的split功能刚好相反var arr1=[1, 2, 3, 4, 5, 6, 7]; var str1=arr1.join("-"); alert(str1); //结果为"1-2-3-4-5-6-7"
  • 102. 用 join方法 连接数组程序图解1-2-3-4-5-6-7var arr1=[1, 2, 3, 4, 5, 6, 7];var str1=arr1.join("-");alert(str1); //结果为"1-2-3-4-5-6-7"根据join方法传入参数"-"将元素连接成字符串1234567
  • 103. 连接数组-concat方法书写格式 x.concat(value,...) 使用注解 x代表数组对象 value作为数组元素连接到数组的末尾 返回连接后的数组 concat方法并不改变x自身的值var a = [1,2,3]; Var a = new Array(1,2,3) var b=a.concat(4, 5) ; alert(a.toString()); //返回结果为1,2,3 alert(b.toString()); //返回结果为1,2,3,4,5
  • 104. 使用 concat方法 连接数组程序图解12345var a = [1,2,3];var b=a.concat(4, 5) ;alert(a.toString()); //返回结果为1,2,3 alert(b.toString()); //返回结果为1,2,3,4,512345123ab
  • 105. 数组排序书写格式 x.reverse() x.sort() 使用注解 x代表数组对象 返回排序后的数组 排序后x会发生改变var arr1=[32, 12, 111, 444]; arr1.reverse(); //颠倒数组元素 alert(arr1.toString()); //结果为444,111,12,32 arr1.sort(); //排序数组元素 alert(arr1.toString()); //结果为111,12,32,444
  • 106. 数组排序程序图解var arr1=[32, 12, 111, 444];arr1.reverse(); //颠倒数组元素 alert(arr1.toString()); //结果为444,111,12,32321211144444411112321111232444arr1.sort(); //排序数组元素 alert(arr1.toString()); //结果为111,12,32,444reversesort
  • 107. Array对象的方法类别方法说明获取子数组slice(start,end)通过数组元素起始和结束索引号获取子数组splice(start, deleteCount, value, ...)对数组指定位置进行删除和插入进出栈操作push(value, ...)数组末端入栈操作pop()数组末端出栈操作unshift(value,...)数组首端入栈操作shift()数组首端出栈操作
  • 108. 获取子数组书写格式 x.slice(start, end) 使用注解 x代表数组对象 start表示开始位置索引 end是结束位置下一数组元素索引编号 第一个数组元素索引为0 start、end可为负数,-1代表最后一个数组元素 end省略则相当于从start位置截取以后所有数组元素
  • 109. var arr1=['a','b','c','d','e','f','g','h']; var arr2=arr1.slice(2,4); var arr3=arr1.slice(4); var arr4=arr1.slice(2,-1); alert(arr2.toString()); //结果为"c,d" alert(arr3.toString()); //结果为"e,f,g,h" alert(arr4.toString()); //结果为"c,d,e,f,g"使用 slice方法 获取子数组程序图解abcdefgh0123456-1efghcdslice(2,4)slice(4)cdefgslice(2,-1)
  • 110. 删除子数组书写格式 x. splice(start, deleteCount, value, ...) 使用注解 x代表数组对象 splice的主要用途是对数组指定位置进行删除和插入 start表示开始位置索引 deleteCount删除数组元素的个数 value表示在删除位置插入的数组元素 value参数可以省略
  • 111. var a = [1,2,3,4,5,6,7,8] a.splice(1,2); //a变为 [1,4,5,6,7,8] alert(a.toString()); a.splice(1,1); //a变为[1,5,6,7,8] alert(a.toString()); a.splice(1,0,2,3); //a变为[1,2,3,5,6,7,8] alert(a.toString());使用 splice方法 删除子数组程序图解123456780123456-1splice(1,2)1456780123451567802345splice(1,1)splice(1,0,2,3)1235678012456-1
  • 112. 数组的进出栈操作(1)书写格式 x.push(value, ...) x.pop() 使用注解 x代表数组对象 value可以为字符串、数字、数组等任何值 push是将value值添加到数组x的结尾 pop是将数组x的最后一个元素删除
  • 113. var arr1=[1,2,3]; arr1.push(4,5); alert(arr1); //结果为"1,2,3,4,5" arr1.push([6,7]); alert(arr1) //结果为"1,2,3,4,5,6,7" arr1.pop(); alert(arr1); //结果为"1,2,3,4,5"数组的进出栈操作程序图解1231234512345[6,7]12345push(4,5)push([6,7])pop()
  • 114. 数组的进出栈操作(2)书写格式 x.unshift(value,...) x.shift() 使用注解 x代表数组对象 value可以为字符串、数字、数组等任何值 unshift是将value值插入到数组x的开始 shift是将数组x的第一个元素删除
  • 115. var arr1=[1,2,3]; arr1.unshift(4,5); alert(arr1); //结果为"4,5,1,2,3" arr1. unshift([6,7]); alert(arr1) //结果为"6,7,4,5,1,2,3" arr1.shift(); alert(arr1); //结果为"4,5,1,2,3"数组的进出栈操作程序图解1234512312345unshift(4,5)unshift([6,7])pop()[6,7]45123
  • 116. Math对象的属性Math对象的属性都是数学常数 Math.E (自然数) Math.LN2 (ln2) Math.LN10 (ln10) Math.LOG2E (log 2e) Math.LOG10E (log e) Math.PI (圆周率) Math.SQRT1_2 (根号1/2) Math.SQRT2 (根号2)
  • 117. 用程序获取Math对象的属性值 //定义换行输出函数 function writeln(mystr){ document.write(mystr+"
    "); } //输出Math属性 writeln ("E="+Math.E); writeln("LN2="+ Math.LN2); writeln("LN10="+ Math.LN10 ); writeln("LOG2E="+ Math.LOG2E ); writeln("LOG10E="+ Math.LOG10E ); writeln("PI="+ Math.PI ); writeln("SQRT1_2="+ Math.SQRT1_2 ); writeln("SQRT2="+ Math.SQRT2 );
  • 118. Math对象的方法——三角函数类 别方 法说 明三角函数Math.sin(x) 计算正弦值 (x在0~2π之间,返回值-1~1)Math.cos(x) 计算余弦值 (x在0~2π之间,返回值-1~1)Math.tan(x) 计算正切值 (x在0~2π之间,返回正切值)反三角函数Math.asin(x) 计算反正弦值 (x在 -1与1之间,返回0~2π)Math.acos(x) 计算反余弦值 (x在 -1与1之间,返回0~2π)Math.atan(x)计算反正切值 (x可以为任意值,返回 -π/2 ~π/2)Math.atan2(y,x) 计算从X轴到一个点的角度 (y,x分别为点的纵坐标和横坐标,返回-π ~π)
  • 119. Math对象的方法程序示范 function writeln(mystr){ document.write(mystr+"
    "); } var x=0.5; var y=0.8; writeln("sin("+x+")="+Math.sin(x)); writeln("cos("+x+")="+ Math.cos(x)); writeln("tan("+x+")="+ Math.tan(x)); writeln("asin("+x+")="+ Math.asin(x)); writeln("acos("+x+")="+ Math.acos(x)); writeln("atan("+x+")="+ Math.atan(x)); writeln("atan2("+y+","+x+")="+ Math.atan2(y,x));
  • 120. Math对象的方法—计算函数类 别方 法说 明计算函数Math.sqrt(x) 计算平方根 pow(x,y) 计算xyMath.exp(x) 计算e的指数 exMath.log(x) 计算自然对数 (x为大于0的整数)程序示范:function writeln(mystr){ document.write(mystr+"
    "); } var x=3; var y=4; writeln("sqrt("+x+")="+Math.sqrt(x)); writeln("pow("+x+","+y+")="+ Math.pow(x,y)); writeln("exp ("+x+","+y+")="+ Math.exp(x,y)); writeln("log("+x+")="+ Math.log(x));
  • 121. Math对象的方法—数值比较函数类 别方 法说 明数值比较函数Math.abs(x)计算绝对值Math.max(x,y,...)返回参数中较大的一个Math.min(x,y,...) 返回参数中较小的一个Math.random( )计算0~1之间的一个随机数Math.round(x) 舍入为最接近的整数Math.floor(x) 对一个数下舍入Math.ceil(x) 对一个数上舍入
  • 122. Math对象的方法程序示范: function writeln(mystr){ document.write(mystr+"
    "); } var x=-1.1; var y=2.6; writeln("abs("+x+")="+Math.abs(x)); writeln("max("+x+","+y+")="+ Math.max(x,y)); writeln("min("+x+","+y+")="+ Math.min(x,y)); writeln("random()="+ Math.random()); writeln("round("+x+")="+ Math.round(x)); writeln("floor("+x+")="+ Math.floor(x)); writeln("ceil("+x+")="+ Math.ceil(x));
  • 123. 创建Date对象创建日期对象程序范例://方法1:不指定参数 var nowd1=new Date(); alert(nowd1.toLocaleString( )); //方法2:参数为日期字符串 var nowd2=new Date("2004/3/20 11:12"); alert(nowd2.toLocaleString( )); var nowd3=new Date("04/03/20 11:12"); alert(nowd3.toLocaleString( ));
  • 124. 创建日期对象程序范例://方法3:参数为毫秒数 var nowd3=new Date(5000); alert(nowd3.toLocaleString( )); alert(nowd3.toUTCString()); //方法4:参数为年月日小时分钟秒毫秒 var nowd4=new Date(2004,2,20,11,12,0,300); alert(nowd4.toLocaleString( )); //毫秒并不直接显示月份参数从0~11,所以这里2对应3月份
  • 125. Date对象的方法—获取日期和时间获取日期和时间 getDate() 获取日 getDay () 获取星期 getMonth () 获取月 getFullYear () 获取完整年份 getYear () 获取年 getHours () 获取小时 getMinutes () 获取分钟 getSeconds () 获取秒 getMilliseconds () 获取毫秒 getTime () 返回累计毫秒数(从1970/1/1午夜)
  • 126. 获取日期和时间程序示范function writeln(mystr){ document.write(mystr+"
    "); } var x=new Date(1997,7,1,12,23,54,230) //1997年8月1日12点23分54秒230毫秒 writeln(x.getFullYear ()); //返回年1997 writeln(x.getYear()); //返回年97 writeln(x.getMonth()); //返回月7 writeln(x.getDate()); //返回日1 writeln(x.getDay()); //返回星期5 writeln(x.getHours()); //返回小时12 writeln(x.getMinutes()); //返回分钟23 writeln(x.getSeconds()); //返回秒54 writeln(x. getMilliseconds()); //返回毫秒230 writeln(x.getTime()); //返回累计870409434230
  • 127. Date对象的方法—设置日期和时间设置日期和时间 setDate(day_of_month) 设置日 setMonth (month) 设置月 setFullYear (year) 设置年 setHours (hour) 设置小时 setMinutes (minute) 设置分钟 setSeconds (second) 设置秒 setMillliseconds (ms) 设置毫秒(0-999) setTime (allms) 设置累计毫秒(从1970/1/1午夜)
  • 128. 设置日期和时间程序示范:var x=new Date(); x.setFullYear (1997); //设置年1997 x.setMonth(7); //设置月7 x.setDate(1); //设置日1 x.setHours(5); //设置小时5 x.setMinutes(12); //设置分钟12 x.setSeconds(54); //设置秒54 x.setMilliseconds(230); //设置毫秒230 document.write(x.toLocaleString( )+"
    "); //返回1997年8月1日5点12分54秒 x.setTime(870409430000); //设置累计毫秒数 document.write(x.toLocaleString( )+"
    "); //返回1997年8月1日12点23分50秒
  • 129. Date对象的方法—日期和时间的转换日期和时间的转换 getTimezoneOffset() 返回本地时间与GMT的时间差,以分钟为单位 toUTCString() 返回国际标准时间字符串 toLocalString() 返回本地格式时间字符串 Date.parse(x) 返回累计毫秒数(从1970/1/1午夜到本地时间) Date.UTC(x) 返回累计毫秒数(从1970/1/1午夜到国际时间)
  • 130. 日期和时间的转换程序示范:function writeln(mystr){ document.write(mystr+"
    "); } var x=new Date(); writeln("x.getTimezonOffset()="); writeln(x. getTimezoneOffset()); //时间差 writeln("x. toUTCString()="); writeln(x. toUTCString()); //国际时间 writeln("x.toLocaleString()="); writeln(x.toLocaleString()); //本地时间 writeln("Date.parse(x)="); writeln(Date.parse(x)); //本地时间毫秒数 writeln("Date.UTC(x)="); writeln(Date.UTC(x)); //UTC毫秒数
  • 131. RegExp对象的方法程序范例: function matchDemo(){     var r, re; // 声明变量。     var s = "The rain in Spain falls mainly in the plain";     re = /ain/i; // 创建正则表达式模式。    r = s.match(re); // 尝试匹配搜索字符串。     return(r); // 返回第一次出现 “ain” 的地方。 }test():测试是否字符串匹配表达式。 exec():返回一个数组,包含input,index等信息。 compile() : 替换原来的正则表达式。function testDemo(re, s){     var s1; // 声明变量。     // 检查字符串是否存在的正则表达式。     if (re.test(s)) // 测试是否存在。       s1 = “ contains ”; // s 包含模式。     else        s1 = “ does not contain ”; // s 不包含模式。     // 返回字符串。 return("'" + s + "'" + s1 + "'"+ re.source + "'"); }
  • 132. 正则表达式练习:判断下面字符是否包含有“tech”的字符串,然后把匹配的输出 High tech is the power for a technical country. 编写一个正则表达式来匹配下面的字符串 123abc24aBc56Abc 找出ab匹配的字符。 然后把ab全部替换成cc 编写一个正则表达式来匹配下面的字符串 /category/game/type/video/ /category/tech/type/pic/ /type/pic/ /type/video/
  • 133. 主题内容JavaScript概述 JavaScript基础语法 JavaScript常用内置对象 JavaScript常用DHTML对象 JavaScript面向对象编程
  • 134. DHTML 介绍 DHTML的定义 使用JavaScript和CSS级联样式表操作HTML创造出各种动态视觉效果统称为DHTML DHTML是一种浏览器端的动态网页技术
  • 135. DHTML介绍DHTML的功能 动态改变字体大小和字体颜色 动态设定文档元素的位置、内容,甚至隐藏和显示元素 可以通过事件响应机制制作动态折叠的树形结构和菜单 可以通过定时器制作时钟、日历 可以弹出对话框与用户进行交互 可以通过表单提交用户填写的信息 通过动态样式表可以设定更多的显示效果
  • 136. DHTML对象模型DHTML对象模型(DOM) 将HTML标记、属性和CSS样式对象化 可以动态存取HTML文档中的所有元素 可以使用属性name或id来存取或标记对象 改变元素内容或样式后浏览器中显示效果即时更新 DHTML对象模型包括浏览器对象模型和Document对象模型
  • 137. DHTML对象模型WindowFramesHistoryNavigatorDocumentLocationEventFormTableAnchorImageIframeTableRowTableCellInputSelectTextarea...
  • 138. DHTML对象模型DHTML DOM与W3C DOM的比较比较项目DHTML DOMW3C DOM概念DHTML中的Document对象模型标准的树形结构文档操作接口浏览器支持IE4.0以上IE5.0以上实现方法对象数组Document.all树形节点对象 Node.Element操作语言JavaScriptJavaScript、Java、C++等文档对象HTMLHTML、XML
  • 139. Window对象常用属性名 称功能说明document对象,代表窗口中显示的HTML文档frames窗口中框架对象的数组history对象,代表浏览过窗口的历史记录location对象,代表窗口文件地址,修改属性可以调入新的网页defaultStatus,status窗口的状态栏信息closed窗口是否关闭,关闭时该值为truename窗口名称,用于标识该窗口对象
  • 140. Window对象常用属性:名 称功能说明opener对象,是指打开当前窗口的window对象,如果当前窗口被用户打开,则它的值为nullparent对象,当前窗口是框架页时指的是包含该框架页的上一级框架窗口top对象,当前窗口是框架页时指的是包含该框架页的最外部的框架窗口self对象,指当前Window对象window对象,指当前Window对象,同self
  • 141. Window 对象常用方法:名 称功能说明alert(),confirm,prompt()弹出简单对话框close(),open()关闭、打开窗口print()打印窗口中网页的内容focus(),blur()请求或放弃窗口为当前操作窗口moveBy(),moveTo()移动窗口resizeBy(),resizeTo()调整窗口大小scrollBy(),scrollTo()滚动窗口中网页的内容setInterval(),clearInterval()设置或取消周期执行的定时器setTimeout(),clearTimeout()设置或取消一次性执行的定时器
  • 142. Window对象的主要功能 窗口的打开和关闭 对话框 状态栏 定时器 内容滚动 调整窗口大小和位置 Screen对象 History对象 Navigator对象 Location对象
  • 143. Window对象的主要功能—窗口的打开和关闭书写格式功能说明window.open(url,name,config)打开新窗口并返回新窗口对象。 url为打开的超链接,name为窗口的名称 config为窗口的配置参数window.close()关闭窗口config 参数具体元素 menubar 菜单条 toolbar 工具条 location 地址栏 directories 链接 status 状态栏 scrollbars 滚动条 resizeable 可调整大小 width 窗口宽,以像素为单位 height 窗口高,以像素为单位参数值为yes或no参数值为数字值
  • 144. 窗口的打开和关闭程序示范:打开google搜索窗口 var config= 'menubar=yes,toolbar=no,location=no, '; config += 'directories=no,status=yes, '; config += 'scrollbars=yes,resizable=yes,'; config += 'width=500,height=300'; var openurl=" http://www.google.com"; window.open(openurl,"popwin",config); //仅仅打开窗口var mywin=window.open(openurl,"popwin",config); mywin.close(); //关闭打开的窗口
  • 145. 对话框分类对话框简单对话框窗口对话框alert 提示框confirm 确认框prompt 输入框showModalDialog (IE4.0)showModelessDialog (IE5.0)
  • 146. 显示效果比较: alert("您好!"); confirm("您好吗?"); prompt("您贵姓?","陈");简单对话框书写格式功能说明alert(str)提示对话框,显示str字符串的内容 按[确定]关闭对话框confirm(str)确认对话框,显示str字符串的内容 按[确定]按钮返回true,[取消]返回falseprompt(str,value)输入对话框,采用文本框输入信息 按[确定]按钮返回输入值,[取消]关闭返回值比较: var firstname=prompt("您贵姓?","陈"); if (confirm("您确定?")==true) { alert(firstname+"先生,您好!"); }不返回值返回值为输入字符串返回值为true或false
  • 147. 窗口对话框书写格式功能说明showModalDialog(url,arguments,config)IE4或更高版本支持该方法showModelessDialog(url,arguments,config)IE5或更高版本支持该方法参数说明: url 打开链接 arguments 传入参数 config 窗口配置参数config 外观配置参数 status 状态栏 resizable 可调整大小 help 是否显示标题栏中的 按钮 center 是否显示在桌面正中间 dialogWidth 对话框宽 dialogHeight 对话框高 dialogTop 对话框左上角的y坐标 dialogLeft 对话框左上角的x坐标参数值为yes或no值为数字 单位为像素
  • 148. ... ...程序示范:调用窗口对话框的方法传入input1对象
  • 149. 程序示范:窗口对话框页面的编写设置传入对象input1的值
  • 150. 窗口对话框运行结果:选择日期对话框调用页被调用对话框
  • 151. 状态栏书写格式功能说明window.status状态栏中的字符串信息 允许进行设置或读取window.status="hello";var str="您好!今天是"+(new Date()).toLocaleString(); window.status=str;
  • 152. 定时器书写格式功能说明tID=setInterval(exp,time)周期性触发执行代码exp exp为字符串格式的执行语句 time为时间周期,单位为毫秒 返回已经启动的定时器clearInterval(tID)停止启动的定时器tID=setTimeout(exp,time)一次性触发执行代码exp exp为字符串格式的执行语句 time为间隔时间,单位为毫秒 返回已经启动的定时器clearTimeout(tID)停止启动的定时器
  • 153. 定时器的实际运用 网页动态时钟 制作倒计时 跑马灯效果 幻灯片效果 自动滚屏阅读 制作网页小游戏 ……
  • 154. ... var timmerID=null; function updateTime(){ //更新状态栏显示当前时间 var now=(new Date()).toLocaleString(); window.status="当前时间:"+now; } function mystart(){ //启动定时器 timmerID=window.setInterval("updateTime()",1000); } function mystop(){ //停止定时器 window.clearInterval(timmerID); } //调用 mystart();定时器程序示范:网页动态时钟 —采用setIntervalmystartmystopupdateTime
  • 155. 程序示范:网页动态时钟—采用setTimeout... var timmerID=null; function updateTime(){ //更新状态栏显示当前时间 var now=(new Date()).toLocaleString(); window.status="当前时间:"+now; mystart(); } function mystart(){ //启动定时器 timmerID=window.setTimeout("updateTime()",1000); } function mystop(){ //停止定时器 window.clearTimeout(timmerID); } ... mystart();mystartmystopupdateTime
  • 156. 定时器运行结果:网页动态时钟状态栏中的时间信息将每秒种刷新一次
  • 157. 内容滚动书写格式功能说明window.scroll(x,y)滚动窗口到指定位置,单位为像素window.scrollTo(x,y)同scroll方法window.scrollBy(ax,ay)从当前位置开始,向右滚动ax像素,向下滚动ay像素... var timmerID=null; function updateScroll(){ //更新滚动位置 window.scrollBy(0,1); } function mystart(){ //启动定时器 timmerID=window.setInterval("updateScroll ()",100); } function mystop(){ //停止定时器 window.clearInterval(timmerID); } ...mystartmystopupdateScroll程序示范:自动滚屏阅读
  • 158. 调整窗口大小和位置书写格式功能说明window.moveTo(x,y)移动窗口到指定位置,单位为像素window.moveBy(ax,ay)向右移动ax像素,向下移动ay像素,参数为负数表示反方向移动window.resizeTo(width,height)调整窗口大小为指定大小window.resizeBy(ax,ay)放大或缩小窗口,参数为负数表示缩小var STEPSIZE=10;//定义移动的步长 var timmerID=null,tempx=STEPSIZE; function updateMove(){ //更新移动位置 if (window.screenLeft>500) tempx=-STEPSIZE; if (window.screenLeft<100) tempx=STEPSIZE; window.moveBy(tempx,0); } function mystart(){ //启动定时器 window.resizeTo(400,300); timmerID=window.setInterval("updateMove()",10); } function mystop(){ //停止定时器 window.clearInterval(timmerID); }mystartmystopupdateMove窗口移动程序示范:会摇头的窗口
  • 159. Screen 对象书写格式功能说明screen.width屏幕分辨率的宽度,例如1024*768分辨率下宽度为1024screen.height返回屏幕的高度screen.availWidth屏幕中可用的宽screen.availHeight屏幕中可用的高screen.colorDepth屏幕的色彩数对象介绍 1)属于window的子对象 2)常用于获取屏幕的分辨率和色彩Screen对象应用例子:窗口最大化window.moveTo(0,0); window.resizeTo(screen.availWidth,screen.availHeight);采用screen对象的分辨率属性和resizeTo方法来动态确定窗口最大长度和宽度
  • 160. History对象书写格式功能说明history.length历史记录数history.back()返回上一页history.forward()前进一页history.go(num)前进或后退num页,num为0时表示页面刷新对象介绍 属于window的子对象 常用于返回到已经访问过的页面
  • 161. History对象应用例子:网页导航按钮history.back()history.forward()history.go(-1)history.go(1)等价于等价于
  • 162. Navigator 对象Navigator对象 属于window的子对象,只有属性 常用于获取客户端浏览器和操作系统信息 常用的属性 appCodeName 浏览器的名称 appVersion 浏览器的版本和操作系统名称 userLanguage 用户语系 cookieEnable 是否支持cookie
  • 163. Navigator对象获取Navigator对象的所有属性var showtext = "Navigator对象属性列表:\n"; for (var propname in navigator) { showtext += propname + ": " + navigator[propname] + "\n"; } alert(showtext);
  • 164. Navigator对象Mozilla下运行的结果
  • 165. Location对象Location对象 属于window的子对象 常用于获取和改变当前浏览的网址 常用的属性 href 当前窗口正在浏览的网页地址 replace(url) 转向到url网页地址 reload() 重新载入当前网址,同按下刷新按钮
  • 166. Location对象获取Location对象的所有属性var showtext = "Location对象属性列表:\n"; for (var propname in location) { showtext += propname + ": " + location[propname] + "\n"; } alert(showtext);
  • 167. Document 对象常用字符串属性名 称功能说明title文档标题, 通过窗口标题栏显示URL,location文档的载入链接referrer链接到该文档的前一文档链接,只读lastModified文档最后修改日期的字符串,只读bgColor,fgColor文档背景和缺省字体颜色alinkColor链接按下激活后的颜色linkColor未访问过链接的颜色vlinkColor已经访问过链接的颜色
  • 168. Document 对象程序示范 获取上次修改时间 标题栏动态修改 背景颜色调整document.write("最后修改时间:"+document.lastModified); document.title="欢迎进入JavaScript世界"; document.bgColor="#EFEFEF"; //设置背景为灰色 document.fgColor="red"; //设置字体为红色
  • 169. Document 对象常用对象属性名 称功能说明forms[ ]Form对象数组,存放文档中所有表单images[ ]Image对象数组,存放文档所有图片anchors[ ]链接定义数组,存放文档中所有链接applets[ ]存放文档中Java小程序的数组cookie子对象,用于在客户端存储信息all[ ]存放文档中所有对象的数组,IE支持
  • 170. Document 对象数组对象的调用 根据对象索引号,如forms[0]代表文档中第一个表单 根据对象名称,如forms[“myform"]代表名称为form1的表单 直接对象调用,如document. form1
    一般情况下采用直接对象调用方式调用表单
  • 171. Document 对象关键方法名 称功能说明close()关闭open()方法打开的文档open()初始化文档对象write(str)将文本附加到当前打开的文档writeln(str+”
    ”)将文本附加到当前打开的文档并加上一个换行符var myWin=window.open(); //打开新窗口 myWin.document.open(); //初始化显示文档 myWin.document.write("直接输出;"); myWin.document.writeln("1.输出后换行"); myWin.document.writeln("2.输出后换行"); myWin.document.writeln("3.输出后换行"); myWin.document.close(); //关闭文档 如果不指定Window对象则代表直接操作当前窗口的Document对象。程序示范:输出内容到弹出新窗口
  • 172. Document对象程序结果:writeln输出的换行符在原代码中可以看到
  • 173. Form表单的练习建立一个用户信息注册的表单,信息包含有: 用户名,密码,确认密码,Email,联系电话,出生年月 在提交表单之前,使用javascript来验证: 用户名只能是数字,字母或下划线(长度最小是6位,最长18位) 密码最小要8位,最长20位。 确认密码和密码要一致 Email要合法格式 电话格式为: 3位或4位的区号-7位或8位的数字 如020-88888888, 0755-88888888 出生年月:格式 yyyy-MM-dd 如:1985-01-01
  • 174. 对象事件处理对象事件概念 指DHTML对象在状态改变、操作鼠标或键盘时触发的动作 对象事件的分类 鼠标事件:针对鼠标单击、双击、移动等动作 键盘事件:针对按下键盘产生的动作 状态改变事件:在载入文档、退出、获取焦点、失去焦点、提交、变化等动作时产生的事件
  • 175. 常见事件分类图对象事件onclick 单击 ondblclick 双击 onmousedown 鼠标按下 onmouseup 鼠标弹起 onmouseover 鼠标移入 onmouseout 鼠标移出onkeypress 按过键盘 onkeydown 键盘按下 onkeyup 键盘弹起onload 文档装载完毕 onunload 退出文档 onchange 值发生变化 onfocus 获得焦点 onblur 失去焦点 onresize 调整窗口大小 onsubmit 表单提交鼠标事件键盘事件状态事件
  • 176. 事件触发后将会产生一个Event对象 Event对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息主要的属性 clientX、clientY : 事件触发时鼠标光标相对浏览器窗口的坐标 screenX、screenY : 事件触发时相对客户端屏幕的位置坐标 offsetX、offsetY : 事件触发时相对引发事件标记对象的位置 x、y : 事件触发时鼠标光标相对父组件的位置坐标 srcElement : 触发该事件的标记对象 button : 鼠标按下的键(1左键、2右键、4中键) keyCode : 键盘按键的Unicode码 altKey/ctrlKey/shiftKey : 键盘的alt、ctrl、shift键是否按下 fromElement : 鼠标原来所处标记对象(专门针对onmouseover和onmouseout事件) toElement : 鼠标现在所处标记对象(专门针对onmouseover和onmouseout事件) Event 事件对象
  • 177. 属性定义中直接处理事件 定义进入、退出文档和单击按钮事件
  • 178. IE的冒泡事件处理机制DocumentFormInputSelectTextareaonclick="alert('click input')"onclick="alert('click form')"onclick="alert('click doc')" 当处于DHTML对象模型底部的对象事件发生时,会依次激活上层对象定义的同类事件处理。
  • 179. 表 单表单元素:FormInputSelectTextareatype包括 text、button、submit、reset、 checkbox、radio、hidden等
  • 180. 表 单表单验证:
    姓名:
  • 181. 级联样式表CSS样式表 链接外部样式表文件 (Linking to a Style Sheet) 先建立外部样式表文件(.css),然后使用HTML的link对象。 定义内部样式块对象 (Embedding a Style Block) 可以在HTML文档的和标记之间插入一个块对象。 内联定义 (Inline Styles) 内联定义是指在对象的标记内使用对象的style属性直接定义少数的样式表属性。
  • 182. 三种样式表的不同定义方法 < link rel = "stylesheet" href="test.css" type="text/css">

    测试

    被导入的外部CSS文件无需加