《web基础教程之Javascript.ppt》由会员分享，可在线阅读，更多相关《web基础教程之Javascript.ppt（71页珍藏版）》请在三一办公上搜索。
1、课程名称 web 基础课程(javascript),讲师：喻辉中软培训中心邮件：,JavaScript语言概况,什么是JavaScript？JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。简单的说它是一种运行在客户端的脚本语言，结构简单，使用方便，其代码可以直接放入HTML文档中，可以直接在支持JavaScript的浏览器中运行。JavaScript使得网页制作的交互性更强，更生动和灵活。当在浏览网页时做了某种操作就产生一个事件，JavaScript所编写的程序对相应的事件做出反应。,JavaScript语言概况,基本特点：脚本
2、编写语言基于对象的语言简单性 简化的java语言；变量类型采用弱类型 安全性只能通过浏览器实现信息浏览或动态交互动态性 JavaScript是动态的，采用以事件驱动的方式进行的 跨平台性 JavaScript是依赖于浏览器本身，与操作环境无关,JavaScript语言概况,JavaScript和Java的区别：1、基于对象和面向对象 面向对象的三大特点（封装，继承，多态）缺一不可。通常“基于对象”是使用对象，但是无法利用现有的对象模板产生新的对象类型.2、执行过程不同 js是浏览器读取它们的时候才进行编译、执行 3、强变量和弱变量 JavaScript Java var n=1 int n=1
3、；n=1.5 float n=1.5；n=“董爽爽”String n=“董爽爽”；4、嵌入方式不一样JavaScript：.Java：.,JavaScript语言概况,JavaScript程序编写注意事项：1、JS是区分大小写的 函数名称为“myfunction”并不和“myFunction”相同 2、空格的使用 JS会忽略多余的空白。name=“Hege“与 name=”Hege”相同3、JS的注释 单行注释：/this is a comment多行注释：/*This is a comment several lines*/4、若不认识JavaScript代码的浏览器，则所有在其中的标识均被
4、忽略；若认识，则执行其结果。,JavaScript引入方式,HTML的任意位置都可以引入JavaScript，有两种方式引入JavaScript一种是直接在HTML文档中直接写：例如：例子演示：firstscript.htmlDocument.write()是文档对象的输出函数，其功能是将括号中的字符或变量值输出到窗口；document.close()是将输出关闭。,JavaScript运行方式,可以直接在HTML页面中调用JavaScript函数，也可以通过链接方式运行指定的函数 alert(“Hello,World!”);点击这里会弹出一个alert框其中，alert是JavaScript
5、内置的一个函数，用于弹出对话框。例子：secondscript.html,JavaScript引入方式,Javascript第二种引入方式：是写单独的JS文件，然后在HTML中引入该文件：引入JS文件后，在HTML文件中就可以调用JS文件定义的函数了还包含了一个language属性，用于指定使用的脚本语言例子：thirdscript.html,JavaScript三种消息框,创建三种消息框：警告框、确认框、提示框。警告框:Alert()确认框:Confirm()提示框:Prompt()打开窗口:Open()扩展：子父页面传值,Javascript基本构成,变量语句三种控制语句函数对象方法属性,
6、JavaScript变量,JavaScript语法上与Java十分相似，不同的是JavaScript不是强类型，变量没有任何类型JavaScript不是强类型语言，变量可以不声明而直接使用。即使声明也不用指明类型var=;或者：=;,JavaScript变量,JavaScript变量的类型可以是：1、整型 可以是正整数、0、负整数，可以是十进制、八进制、十六进制。八进制“0”，十六进制加“0 x”。2、浮点型 即“实型”3、字符串型 用单引号或双引号。4、布尔型 true和 false。5、对象,JavaScript语句,以分号结束，可以使用将多个语句括在一起JavaScript语句在语法上与
7、Java基本相同，也包括了顺序、分支、循环三种程序结构顺序结构按语句顺序执行；分支结构根据条件执行不同的语句块；循环则反复执行同一语句块。,Javascript分支结构,if语句if()else;switch语句switch(e)case r1:break;case r2:break;default:.例子：ifswitch.html,Javascript循环结构,for 循环for(=;);for循环例子:for.htmlwhile循环while();do while();while循环例子:while.html,Javascript循环结构,break结束循环，跳出循环体continue结
8、束本次循环，进入下一次循环例子：break&continue.html,Javascript函数,JavaScript中函数有多种，如对象的方法、全局函数等等。这里所说的函数是指自定义函数。定义函数用以下语句：function 函数名(参数集)函数体;.return;.其中，用在 function 之后和函数结尾的大括号是不能省去的，就算整个函数只有一句。,Javascript对象,JavaScript与Java类似，也采用了对象化编程对象包括基本对象和对象DOM基本对象：可以将声明的变量视为对象，依其类型不同可以调用对象不同的属性和方法DOM(document object model)对象
9、：页面内容也可以抽象成对象，依其种类的不同，也有不同的属性和方法 简单的说，DOM是一种理念，一种思想，一种方法使 Web开发人员可以访问HTML元素！,Javascript对象,基本对象全局对象Global数字对象Number字符串对象String数组对象Array数学对象Math日期对象Date,Javascript对象,对象具有属性、方法和事件三大特征。属性：决定了对象的特征，如长度、颜色等等。方法：是对象可以做的事情，通过调用方法达到改变对象状态的目的事件：能响应发生在对象上的事情,全局对象,全局对象是一个虚拟的对象，通常用Global代表它JavaScript有一些全局的函数，通常认
10、为是Global对象的，调用这些方法时直接写名字就可以了，无须用对象名限定。属性NaN 非数字 var a=abc;alert(parseInt(a);,全局对象,方法isFinite()如果括号内的数字是“有限”的（介于 Number.MIN_VALUE 和 Number.MAX_VALUE 之间）返回 true；否则false。isNaN()如果括号内的值是“NaN”则返回 true 否则返回 false。parseInt()把括号内的内容转换成整数。如果字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回“NaN”。parseFloat()转换浮点数，其它同上 例子：glo
11、ble.html,Number对象,属性 MAX_VALUE：Number.MAX_VALUE，返回“最大值”MIN_VALUE：Number.MIN_VALUE；返回“最小值”NaN：Number.NaN 或 NaN；返回“NaN”NEGATIVE_INFINITY：Number.NEGATIVE_INFINITY，返回负无穷大，比“最小值”还小的值。POSITIVE_INFINITY：Number.POSITIVE_INFINITY；返回正无穷大，比“最大值”还大的值。方法toString()用法：.toString()；返回字符串形式。若 a=123；则 a.toString()=123
12、。toLocaleString()用法：.toLocaleString()；返回一个日期，该日期使用当前区域设置并已被转换为字符串。valueOf()用法：.valueOf()；返回指定对象的原始值。例子：numberobject.html,String对象,属性length：返回该字符串的长度。方法charAt()用法：.charAt()；返回该字符串位于第位的单个字符。charCodeAt()用法：.charCodeAt()；返回该字符串位第位字符的 ASCII 码。indexOf()用法：.indexOf(,)；找到返回位置。没有找到就返回“-1”。lastIndexOf()用法：.la
13、stIndexOf(,)。找到返回位置。没有找到就返回“-1”。,String对象,split()用法：.split()；返回一个数组。substring()用法：.substring(,)；返回原字符串的子字符串。substr()用法：.substr(,)；返回原字符串的子字符串。toLowerCase()用法：.toLowerCase()；返回把原字符串所有大写字母都变成小写的字符串。toUpperCase()用法：.toUpperCase()；返回把原字符串所有小写字母都变成大写的字符串。例子：stringobject.html,Array对象,JavaScript中的数组对象与Java
14、中的数组对象相同，也是一个对象的集合。不同在于JavaScript中数组中的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，从零开始。数组定义方法：var=new Array();多维数组定义：var myArray=new Array(new Array(),new Array(),new Array(),.);,Array对象,数组元素访问方法：=.;数组初始化方法：var=new Array(,.);例如，var myArray=new Array(1,4.5,Hi);var myArray=new Array(new Array(1,2,3),ne
15、w Array(5,6,7);,Array对象,属性length 用法：.length。方法join()用法：.join()；返回字符串，把数组元素用串起来。reverse()用法：.reverse()；使数组中的元素顺序反过来。slice()用法：.slice(,)；返回原数组的子集，始于，终于。sort()用法：.sort()；例子：arrayobject.html和Array.html,Math对象,Math对象提供了与数学计算相关的属性和方法Math对象的属性和方法调用时的格式都是Math.属性E 返回常数 e(2.718281828.)。LN2 返回 2 的自然对数(ln 2)。LN
16、10 返回 10 的自然对数(ln 10)。LOG2E 返回以 2 为低的 e 的对数(log2e)。LOG10E 返回以 10 为低的 e 的对数(log10e)。PI 返回（3.1415926535.)。SQRT1_2 返回 1/2 的平方根。SQRT2 返回 2 的平方根。,Math对象,方法 abs(x)返回 x 的绝对值。acos(x)返回 x 的反余弦值（余弦值等于 x 的角度），用弧度表示。asin(x)返回 x 的反正弦值。atan(x)返回 x 的反正切值。atan2(x,y)返回复平面内点(x,y)对应的复数的幅角，用弧度表示，其值在-到 之间。ceil(x)返回大于等于
17、x 的最小整数。cos(x)返回 x 的余弦。exp(x)返回 e 的 x 次幂(ex)。,Math对象,floor(x)返回小于等于 x 的最大整数。log(x)返回 x 的自然对数(ln x)。max(a,b)返回 a,b 中较大的数。min(a,b)返回 a,b 中较小的数。pow(n,m)返回 n 的 m 次幂(nm)。random()返回大于 0 小于 1 的一个随机数Math.random()round(x)返回 x 四舍五入后的值。sin(x)返回 x 的正弦。sqrt(x)返回 x 的平方根。tan(x)返回 x 的正切。例子:mathobject.html,Date对象,Da
18、te 可以储存任意一个日期，从 0001 年到 9999 年，精确到毫秒数（1/1000 秒）。在内部，日期对象是一个整数，它是从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫秒数。如果所指日期比 1970 年早，则它是一个负数。所有日期时间，如果不指定时区，都采用“UTC”（世界时）时区，它与“GMT”（格林威治时间）在数值上是一样的。,Date对象,定义日期对象：var d1=new Date;var d2=new Date();d1和d2的初始值都是当前时间。如果要自定初始值，可以用：var d1=new Date(99,10,1);/99 年 10 月 1 日 v
19、ar d2=new Date(Oct 1,1999);/同上,Date对象,方法g/setUTCFullYear()返回/设置年份g/setUTCYear()返回/设置年份g/setUTCMonth()返回/设置月份，一月返回0g/setUTCDate()返回/设置日期g/setUTCDay()返回/设置星期，0 表示星期天g/setUTCHours()返回/设置小时数，24小时制g/setUTCMinutes()返回/设置分钟数g/setUTCSeconds()返回/设置秒钟数g/setUTCMilliseconds()返回/设置毫秒数g/setTime()返回/设置时间，该时间就是日期对象
20、的内部处理方法：从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫秒数。,Date对象,getTimezoneOffset()返回日期对象采用的时区与格林威治时间所差的分钟数。在格林威治东方的市区，该值为负，例如：中国时区（GMT+0800）返回“-480”。toString()返回一个字符串，描述日期对象所指的日期。这个字符串的格式类似于：“Fri Jul 21 15:43:46 UTC+0800 2000”。toLocaleString()返回一个字符串，描述日期对象所指的日期，用本地时间表示格式。如：“2000-07-21 15:43:46”。toGMTString(
21、)返回一个字符串，描述日期对象所指的日期，用 GMT 格式。toUTCString()返回一个字符串，描述日期对象所指的日期，用 UTC 格式。parse()用法：Date.parse()；返回该日期对象的内部表达方式。毫秒数。例子：dateobject.html,正则表达式,正则表达式是一个描述字符模式的对象。JavaScript的RegExp对象和String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法可以使用一个RegExp()构造函数来创建RegExp对象，也可以将正则表达式直接包含在一对斜杠(/)之间var pattern=new RegExp(s$);va
22、r pattern=/s$/;,正则表达式,字符类：将单独的直接符放进中括号内就可以组合成字符类。一个字符类和它所包含的任何一个字符都匹配,所以正则表达式/abc/和字母“a”,“b”,“c”中的任何一个都匹配 定义否定字符尖时,要将一个 符号作为从左中括号算起的第一个字符,正则表达式,.位于括号之内的任意字符.不在括号之中的任意字符.除了换行符之外的任意字符,等价于n w 任何单字字符,等价于a-zA-Z0-9 W 任何非单字字符,等价于a-zA-Z0-9 s 任何空白符,等价于 t n r f v S 任何非空白符,等价于 t n r f v d 任何数字,等价于0-9 D 除了数字之外的
23、任何字符,等价于0-9 b与单词的边界匹配，即单词与空格之间的位置。例如，“erb”与“never”中的“er”匹配，但是不匹配“verb”中的“er”。$第一个表示一个字符串的开始,后一个表示字符串的结束,n,m 匹配前一项至少n次,但是不能超过m次 n,匹配前一项n次,或者多次 n 匹配前一项恰好n次?匹配前一项0次或1次,也就是说前一项是可选的.等价于 0,1+匹配前一项1次或多次,等价于1,*匹配前一项0次或多次.等价于0,选择,分组和引用,|选择.匹配的要么是该符号左边的子表达式,要么它右边的子表达式(.)分组.将几个项目分为一个单元.这个单元可由*、+、？和|等符号使用,整个组可以
24、多次使用,后面可以用3来规定使用的次数例子：zhengze.html,DOM基础,主讲：董爽爽,DOM简介,DOM是Document Object Model的缩写，即文档对象模型DOM将HTML页面中的内容抽象成对象，每个对象拥有各自的属性(Properties)、方法(Method)和事件(Events)。通过DOM 可以在JavaScript中操纵HTML页面的内容,DOM简介,DOM 节点：HTML 文档中的每个成分都是一个节点。整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点,
25、DOM简介,DOM 访问节点,通过 DOM，您可访问 HTML 文档中的每个节点。查找并访问节点通过使用 getElementById()和 getElementsByTagName()方法 通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性,DOM简介,有些DOM对象在浏览器中只有一个，因此他们的名字是惟一确定的，比如navigator大部分DOM对象是不确定不惟一的，因此需要在HTML标记中给他们起名，如、等等DOM对象同基本对象一样，也有属性、方法和事件，尤其是DOM对象对事件的响应是JavaScript中尤为重要的部分,DOM对象,浏览器
26、对象,navigator反映了当前浏览器的资料属性appCodeName 返回浏览器代号，一般返回”Mozilla”。appName 返回浏览器名。IE 返回”Microsoft Internet Explorer”，NN 返回“Netscape”。appVersion 返回浏览器版本。platform 返回浏览器的操作平台。userAgent 返回以上全部信息。方法javaEnabled()当前浏览器是否允许 Java。例子：dom_navigator.html,屏幕对象,screen反映了当前用户的屏幕设置，只有属性没有方法（注意是屏幕设置，而不是浏览器）属性width 屏幕的宽度（像素数
27、）。height 屏幕的高度。availWidth 屏幕的可用宽度（除去了一些不自动隐藏的类似任务栏的东西所占用的宽度）。availHeight 返回屏幕的可用高度。colorDepth 返回当前颜色设置所用的位数-1：黑白；8：256色；16：增强色；24/32：真彩色例子：dom_screen.html,窗口对象,window是DOM最顶层对象，描述一个浏览器窗口。引用它的属性和方法时，不需用“window.xxx”，而直接使用“xxx”。navigator与screen对象与window对象是平级的，其余所有对象都是这个对象的属性，或者是属性的属性。例如，调用一个form，可以写成：或d
28、ocument.formName,窗口对象,属性name 窗口的名称，由打开它的连接（）或框架页（）或某调用的 open()方法决定。status“状态栏”所显示的内容。opener 打开本窗口的窗口对象。self 窗口本身，如关闭窗口。parent 窗口所属的框架页对象。top 占据整个浏览器窗口的最顶端的框架页对象。,窗口对象,方法open()打开一个窗口。close()关闭一个已打开的窗口。blur()使窗口变为“非活动窗口”。focus()使窗口变为“活动窗口”。scrollTo().scrollTo(x,y)；使窗口从左上角数起的(x,y)点滚动到窗口的左上角。scrollBy().
29、scrollBy(deltaX,deltaY)；使窗口向右滚动 deltaX 像素，向下滚动 deltaY 像素。如果取负值，则向相反的方向滚动。resizeTo()使窗口调整到宽 width 像素，高 height 像素。resizeBy()使窗口宽调整 deltaWidth 像素，高调整deltaHeight 像素。(数值为负数是向小调整,整数是向大调)setTimeout(expression,time):在一定时间后自动执行expression描述的代码,使用time设置时间,单位是毫秒，返回是一个定时器对象clearTimeout(timer):取消以前的定时设置.例子：window
30、对象,窗口对象,alert()alert()；弹出一个只包含“确定”按钮的对话框，显示的内容，整个文档的读取、Script 的运行都会暂停，直到用户按下“确定”。confirm()confirm()；弹出一个包含“确定”和“取消”按钮的对话框，显示的内容。按下“确定”，则返回 true 值，如果按下“取消”，则返回 false 值。prompt()用法：prompt(,)；弹出一个包含“确认”“取消”和一个文本框的对话框，显示的内容，要求用户在文本框输入一些数据。如果用户按下“确认”，则返回文本框里已有的内容，如果用户按下“取消”，则返回 null 值。如果指定，则文本框里会有默认值。,Eve
31、nt对象,Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行，event对象只在事件过程中才有效。尽管所有事件属性都可通过所有的 event 对象访问，但是在某些事件中某些属性可能无意义。例子：event_xy.html,Event对象,altKey：检索ALT键的当前状态 false ALT key is not pressed.true ALT key is pressed.button：检索按下的鼠标键 0 没按键 1 按左键 2 按右键 3 按左右键 4 按中间键 5 按左键和中间键
32、6 按右键和中间键 7 按所有的键,Event对象,returnValue：设置或检索从事件中返回的值 true 事件中的值被返回 false 源对象上事件的默认操作被取消 x 检索相对于父要素鼠标水平坐标的整数 y 检索相对于父要素鼠标垂直坐标的整数例子：event_test.html,History对象,History指浏览器的浏览历史属性length 历史的项数。方法back()后退。forward()前进。go(x)在历史的范围内去到指定的一个地址。如果 x 0，则前进 x 个地址，如果 x=0，则刷新现在打开的网页。history.go(0)跟 location.reload()是等
33、效的。例子：history.html,Location对象,location是某一个窗口对象所打开的地址。属性Location.href返回整个当前url,若对其赋值：location.href=“”则跳转其urllocation.host返回域名和端口号，如:80lcation.hostname返回域名location.port返回端口location.pathname返回域名后第一个斜框后的字符串location.hash跳到本页的某个锚返回#后的内容location.search取url?后的部分方法reload()相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)
34、键。replace()打开一个 URL，并取代历史对象中当前位置的地址。用这个方法打开一个 URL 后，按下浏览器的“后退”键将不能返回到刚才的页面。例子：location.html,document对象,document 描述当前窗口或指定窗口对象的文档。它包含了从到的内容。属性 title.定义的文字。fgColor 的 text 属性所表示的文本颜色。bgColor 的 bgcolor 属性所表示的背景颜色。linkColor 的 link 属性所表示的连接颜色。alinkColor 的 alink 属性所表示的活动连接颜色。vlinkColor 的 vlink 属性所表示的已访问连接颜
35、色。方法write();writeln()向文档写入数据，所写入的会当成标准文档 HTML 来处理。writeln()换行,只是在 HTML 中换行。例子：document.html,document对象,document对象包含若干数组对象，它们代表了页面上的标记元素，即：Links 链接对象集合，即appletsApplet对象集合forms 表单对象集合，即images 图片对象集合，即embeds插件对象集合这些集合包含了页面上全部的同类对象，如果访问其中一个只需要加上索引即可，如docment.forms0.username.value;练习：用户名和密码的验证,Form对象,For
36、m 对象代表一个 HTML 表单。属性name 表单名称，即属性。action 返回/设定表单提交地址，即action属性。method 返回/设定表单提交方法，即method属性target 返回/设定表单提交后返回的窗口，也就是属性。encoding 返回/设定表单提交内容的编码方式，也就是属性。length 返回该表单所含元素的数目。例子：form.html,Form对象,方法reset()重置表单。这与按下“重置”按钮是一样的。submit()提交表单。这与按下“提交”按钮是一样的例子：reset.html,Form对象,以下对象都可以做为表单属性使用，但需要指定名字1、文本框对象2、
37、多行文本输入区对象 3、隐藏对象4、密码输入区对象 5、单选域对象6、复选框对象7、下拉菜单对象 8、选择项对象 9、重置按钮对象10、按钮对象11、提交对象,文本类对象,包括text、textarea、hidden、password属性name 返回/设定用指定的元素名称。value 返回/设定密码输入区当前的值。defaultValue 返回用指定的默认值。form 返回包含本元素的表单对象。方法blur()从对象中移走焦点。focus()让对象获得焦点。select()选中输入区里全部文本。注意：由于hidden不可见，因此hidden对象没有方法。例子：textobject.html,
38、按钮类对象,包括button、reset、submit属性name 返回/设定用指定的元素名称。value 返回/设定用指定的元素的值。form 返回包含本元素的表单对象。方法blur()从对象中移走焦点。focus()让对象获得焦点。click()模拟鼠标点击该对象。例子：buttonobject.html,单/多选对象,Radio/checkbox对象属性name 返回/设定用指定的元素名称。value 返回/设定用指定的元素的值。form 返回包含本元素的表单对象。checked 返回/设定该单选域对象是否被选中。这是一个布尔值。defaultChecked 返回/设定该对象默认是否被选
39、中。方法blur()从对象中移走焦点。focus()让对象获得焦点。click()模拟鼠标点击该对象注意：返回的是数组例子：radiotest.html,下拉菜单对象,Select对象 属性name 返回/设定用指定的元素名称。length 返回 Select 对象下选项的数目。selectedIndex 返回被选中的选项的下标。这个下标就是在 options 数组中该选项的位置。form 返回包含本元素的表单对象。方法blur()从对象中移走焦点。focus()让对象获得焦点。,下拉菜单对象,options 数组的属性length;selectedIndex 与所属 Select 对象的同名
40、属性相同。Option 对象的属性text 返回/指定 Option 对象所显示的文本 value 返回/指定 Option 对象的值，与一致。index 返回该 Option 对象的下标。对此并没有什么好说，因为要指定特定的一个 Option 对象，都要先知道该对象的下标。这个属性好像没有什么用。selected 返回/指定该对象是否被选中。通过指定 true 或者 false，可以动态的改变选中项。defaultSelected 返回该对象默认是否被选中。true/false。例子：checked change.html,事件处理,事件处理就是当浏览器中发生某类事件时，浏览器将回调用户指定的方法。事件的类型很多，比如当用户按下一按钮或者点一下鼠标都会触发一个事件。并不是所有DOM对象都会产生事件，某些事件只发生在特定的对象上。当事件发生后，如果用户希望处理此类事件，就必须为事件指定处理程序。有三种方法：123,事件处理,1、直接指定：2、编写特定对象特定事件的 JavaScript:(事件处理程序代码)3、在 JavaScript 中说明:.=;window.onerror=ignoreError();,Javascript高级应用,Javascript日期控件全选和反选增加或者减少一行静态树选人页面,
