web基础教程之Javascriptv.ppt

课程名称web基础课程(javascript),讲师：喻辉中软培训中心邮件：yuhui,JavaScript语言概况,什么是JavaScript？JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。简单的说它是一种运行在客户端的脚本语言，结构简单，使用方便，其代码可以直接放入HTML文档中，可以直接在支持JavaScript的浏览器中运行。JavaScript使得网页制作的交互性更强，更生动和灵活。当在浏览网页时做了某种操作就产生一个事件，JavaScript所编写的程序对相应的事件做出反应。,JavaScript语言概况,基本特点：脚本编写语言基于对象的语言简单性简化的java语言；变量类型采用弱类型安全性只能通过浏览器实现信息浏览或动态交互动态性JavaScript是动态的，采用以事件驱动的方式进行的跨平台性JavaScript是依赖于浏览器本身，与操作环境无关,JavaScript语言概况,JavaScript和Java的区别：1、基于对象和面向对象面向对象的三大特点（封装，继承，多态）缺一不可。通常“基于对象”是使用对象，但是无法利用现有的对象模板产生新的对象类型.2、执行过程不同js是浏览器读取它们的时候才进行编译、执行3、强变量和弱变量JavaScriptJavavarn=1intn=1；n=1.5floatn=1.5；n=“董爽爽”Stringn=“董爽爽”；4、嵌入方式不一样JavaScript：.Java：.,JavaScript语言概况,JavaScript程序编写注意事项：1、JS是区分大小写的函数名称为“myfunction”并不和“myFunction”相同2、空格的使用JS会忽略多余的空白。name=“Hege“与name=”Hege”相同3、JS的注释单行注释：/thisisacomment多行注释：/*Thisisacommentseverallines*/4、若不认识JavaScript代码的浏览器，则所有在其中的标识均被忽略；若认识，则执行其结果。,JavaScript引入方式,HTML的任意位置都可以引入JavaScript，有两种方式引入JavaScript一种是直接在HTML文档中直接写：例如：例子演示：firstscript.htmlDocument.write()是文档对象的输出函数，其功能是将括号中的字符或变量值输出到窗口；document.close()是将输出关闭。,JavaScript运行方式,可以直接在HTML页面中调用JavaScript函数，也可以通过链接方式运行指定的函数alert(“Hello,World!”);点击这里会弹出一个alert框其中，alert是JavaScript内置的一个函数，用于弹出对话框。例子：secondscript.html,JavaScript引入方式,Javascript第二种引入方式：是写单独的JS文件，然后在HTML中引入该文件：引入JS文件后，在HTML文件中就可以调用JS文件定义的函数了还包含了一个language属性，用于指定使用的脚本语言例子：thirdscript.html,JavaScript三种消息框,创建三种消息框：警告框、确认框、提示框。警告框:Alert()确认框:Confirm()提示框:Prompt()打开窗口:Open()扩展：子父页面传值,Javascript基本构成,变量语句三种控制语句函数对象方法属性,JavaScript变量,JavaScript语法上与Java十分相似，不同的是JavaScript不是强类型，变量没有任何类型JavaScript不是强类型语言，变量可以不声明而直接使用。即使声明也不用指明类型var=;或者：=;,JavaScript变量,JavaScript变量的类型可以是：1、整型可以是正整数、0、负整数，可以是十进制、八进制、十六进制。八进制“0”，十六进制加“0 x”。2、浮点型即“实型”3、字符串型用单引号或双引号。4、布尔型true和false。5、对象,JavaScript语句,以分号结束，可以使用将多个语句括在一起JavaScript语句在语法上与Java基本相同，也包括了顺序、分支、循环三种程序结构顺序结构按语句顺序执行；分支结构根据条件执行不同的语句块；循环则反复执行同一语句块。,Javascript分支结构,if语句if()else;switch语句switch(e)caser1:break;caser2:break;default:.例子：ifswitch.html,Javascript循环结构,for循环for(=;);for循环例子:for.htmlwhile循环while();dowhile();while循环例子:while.html,Javascript循环结构,break结束循环，跳出循环体continue结束本次循环，进入下一次循环例子：break.return;.其中，用在function之后和函数结尾的大括号是不能省去的，就算整个函数只有一句。,Javascript对象,JavaScript与Java类似，也采用了对象化编程对象包括基本对象和对象DOM基本对象：可以将声明的变量视为对象，依其类型不同可以调用对象不同的属性和方法DOM(documentobjectmodel)对象：页面内容也可以抽象成对象，依其种类的不同，也有不同的属性和方法简单的说，DOM是一种理念，一种思想，一种方法使Web开发人员可以访问HTML元素！,Javascript对象,基本对象全局对象Global数字对象Number字符串对象String数组对象Array数学对象Math日期对象Date,Javascript对象,对象具有属性、方法和事件三大特征。属性：决定了对象的特征，如长度、颜色等等。方法：是对象可以做的事情，通过调用方法达到改变对象状态的目的事件：能响应发生在对象上的事情,全局对象,全局对象是一个虚拟的对象，通常用Global代表它JavaScript有一些全局的函数，通常认为是Global对象的，调用这些方法时直接写名字就可以了，无须用对象名限定。属性NaN非数字vara=abc;alert(parseInt(a);,全局对象,方法isFinite()如果括号内的数字是“有限”的（介于Number.MIN_VALUE和Number.MAX_VALUE之间）返回true；否则false。isNaN()如果括号内的值是“NaN”则返回true否则返回false。parseInt()把括号内的内容转换成整数。如果字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回“NaN”。parseFloat()转换浮点数，其它同上例子：globle.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。toLocaleString()用法：.toLocaleString()；返回一个日期，该日期使用当前区域设置并已被转换为字符串。valueOf()用法：.valueOf()；返回指定对象的原始值。例子：numberobject.html,String对象,属性length：返回该字符串的长度。方法charAt()用法：.charAt()；返回该字符串位于第位的单个字符。charCodeAt()用法：.charCodeAt()；返回该字符串位第位字符的ASCII码。indexOf()用法：.indexOf(,)；找到返回位置。没有找到就返回“-1”。lastIndexOf()用法：.lastIndexOf(,)。找到返回位置。没有找到就返回“-1”。,String对象,split()用法：.split()；返回一个数组。substring()用法：.substring(,)；返回原字符串的子字符串。substr()用法：.substr(,)；返回原字符串的子字符串。toLowerCase()用法：.toLowerCase()；返回把原字符串所有大写字母都变成小写的字符串。toUpperCase()用法：.toUpperCase()；返回把原字符串所有小写字母都变成大写的字符串。例子：stringobject.html,Array对象,JavaScript中的数组对象与Java中的数组对象相同，也是一个对象的集合。不同在于JavaScript中数组中的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，从零开始。数组定义方法：var=newArray();多维数组定义：varmyArray=newArray(newArray(),newArray(),newArray(),.);,Array对象,数组元素访问方法：=.;数组初始化方法：var=newArray(,.);例如，varmyArray=newArray(1,4.5,Hi);varmyArray=newArray(newArray(1,2,3),newArray(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的自然对数(ln2)。LN10返回10的自然对数(ln10)。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)返回大于等于x的最小整数。cos(x)返回x的余弦。exp(x)返回e的x次幂(ex)。,Math对象,floor(x)返回小于等于x的最大整数。log(x)返回x的自然对数(lnx)。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对象,Date可以储存任意一个日期，从0001年到9999年，精确到毫秒数（1/1000秒）。在内部，日期对象是一个整数，它是从1970年1月1日零时正开始计算到日期对象所指的日期的毫秒数。如果所指日期比1970年早，则它是一个负数。所有日期时间，如果不指定时区，都采用“UTC”（世界时）时区，它与“GMT”（格林威治时间）在数值上是一样的。,Date对象,定义日期对象：vard1=newDate;vard2=newDate();d1和d2的初始值都是当前时间。如果要自定初始值，可以用：vard1=newDate(99,10,1);/99年10月1日vard2=newDate(Oct1,1999);/同上,Date对象,方法g/setUTCFullYear()返回/设置年份g/setUTCYear()返回/设置年份g/setUTCMonth()返回/设置月份，一月返回0g/setUTCDate()返回/设置日期g/setUTCDay()返回/设置星期，0表示星期天g/setUTCHours()返回/设置小时数，24小时制g/setUTCMinutes()返回/设置分钟数g/setUTCSeconds()返回/设置秒钟数g/setUTCMilliseconds()返回/设置毫秒数g/setTime()返回/设置时间，该时间就是日期对象的内部处理方法：从1970年1月1日零时正开始计算到日期对象所指的日期的毫秒数。,Date对象,getTimezoneOffset()返回日期对象采用的时区与格林威治时间所差的分钟数。在格林威治东方的市区，该值为负，例如：中国时区（GMT+0800）返回“-480”。toString()返回一个字符串，描述日期对象所指的日期。这个字符串的格式类似于：“FriJul2115:43:46UTC+08002000”。toLocaleString()返回一个字符串，描述日期对象所指的日期，用本地时间表示格式。如：“2000-07-2115:43:46”。toGMTString()返回一个字符串，描述日期对象所指的日期，用GMT格式。toUTCString()返回一个字符串，描述日期对象所指的日期，用UTC格式。parse()用法：Date.parse()；返回该日期对象的内部表达方式。毫秒数。例子：dateobject.html,正则表达式,正则表达式是一个描述字符模式的对象。JavaScript的RegExp对象和String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法可以使用一个RegExp()构造函数来创建RegExp对象，也可以将正则表达式直接包含在一对斜杠(/)之间varpattern=newRegExp(s$);varpattern=/s$/;,正则表达式,字符类：将单独的直接符放进中括号内就可以组合成字符类。一个字符类和它所包含的任何一个字符都匹配,所以正则表达式/abc/和字母“a”,“b”,“c”中的任何一个都匹配定义否定字符尖时,要将一个符号作为从左中括号算起的第一个字符,正则表达式,.位于括号之内的任意字符.不在括号之中的任意字符.除了换行符之外的任意字符,等价于nw任何单字字符,等价于a-zA-Z0-9W任何非单字字符,等价于a-zA-Z0-9s任何空白符,等价于tnrfvS任何非空白符,等价于tnrfvd任何数字,等价于0-9D除了数字之外的任何字符,等价于0-9b与单词的边界匹配，即单词与空格之间的位置。例如，“erb”与“never”中的“er”匹配，但是不匹配“verb”中的“er”。$第一个表示一个字符串的开始,后一个表示字符串的结束,n,m匹配前一项至少n次,但是不能超过m次n,匹配前一项n次,或者多次n匹配前一项恰好n次?匹配前一项0次或1次,也就是说前一项是可选的.等价于0,1+匹配前一项1次或多次,等价于1,*匹配前一项0次或多次.等价于0,选择,分组和引用,|选择.匹配的要么是该符号左边的子表达式,要么它右边的子表达式(.)分组.将几个项目分为一个单元.这个单元可由*、+、？和|等符号使用,整个组可以多次使用,后面可以用3来规定使用的次数例子：zhengze.html,DOM基础,主讲：董爽爽,DOM简介,DOM是DocumentObjectModel的缩写，即文档对象模型DOM将HTML页面中的内容抽象成对象，每个对象拥有各自的属性(Properties)、方法(Method)和事件(Events)。通过DOM可以在JavaScript中操纵HTML页面的内容,DOM简介,DOM节点：HTML文档中的每个成分都是一个节点。整个文档是一个文档节点每个HTML标签是一个元素节点包含在HTML元素中的文本是文本节点每一个HTML属性是一个属性节点注释属于注释节点,DOM简介,DOM访问节点,通过DOM，您可访问HTML文档中的每个节点。查找并访问节点通过使用getElementById()和getElementsByTagName()方法通过使用一个元素节点的parentNode、firstChild以及lastChild属性,DOM简介,有些DOM对象在浏览器中只有一个，因此他们的名字是惟一确定的，比如navigator大部分DOM对象是不确定不惟一的，因此需要在HTML标记中给他们起名，如、等等DOM对象同基本对象一样，也有属性、方法和事件，尤其是DOM对象对事件的响应是JavaScript中尤为重要的部分,DOM对象,浏览器对象,navigator反映了当前浏览器的资料属性appCodeName返回浏览器代号，一般返回”Mozilla”。appName返回浏览器名。IE返回”MicrosoftInternetExplorer”，NN返回“Netscape”。appVersion返回浏览器版本。platform返回浏览器的操作平台。userAgent返回以上全部信息。方法javaEnabled()当前浏览器是否允许Java。例子：dom_navigator.html,屏幕对象,screen反映了当前用户的屏幕设置，只有属性没有方法（注意是屏幕设置，而不是浏览器）属性width屏幕的宽度（像素数）。height屏幕的高度。availWidth屏幕的可用宽度（除去了一些不自动隐藏的类似任务栏的东西所占用的宽度）。availHeight返回屏幕的可用高度。colorDepth返回当前颜色设置所用的位数-1：黑白；8：256色；16：增强色；24/32：真彩色例子：dom_screen.html,窗口对象,window是DOM最顶层对象，描述一个浏览器窗口。引用它的属性和方法时，不需用“window.xxx”，而直接使用“xxx”。navigator与screen对象与window对象是平级的，其余所有对象都是这个对象的属性，或者是属性的属性。例如，调用一个form，可以写成：window.document.formName或document.formName,窗口对象,属性name窗口的名称，由打开它的连接（）或框架页（）或某调用的open()方法决定。status“状态栏”所显示的内容。opener打开本窗口的窗口对象。self窗口本身，如关闭窗口。parent窗口所属的框架页对象。top占据整个浏览器窗口的最顶端的框架页对象。,窗口对象,方法open()打开一个窗口。close()关闭一个已打开的窗口。blur()使窗口变为“非活动窗口”。focus()使窗口变为“活动窗口”。scrollTo().scrollTo(x,y)；使窗口从左上角数起的(x,y)点滚动到窗口的左上角。scrollBy().scrollBy(deltaX,deltaY)；使窗口向右滚动deltaX像素，向下滚动deltaY像素。如果取负值，则向相反的方向滚动。resizeTo()使窗口调整到宽width像素，高height像素。resizeBy()使窗口宽调整deltaWidth像素，高调整deltaHeight像素。(数值为负数是向小调整,整数是向大调)setTimeout(expression,time):在一定时间后自动执行expression描述的代码,使用time设置时间,单位是毫秒，返回是一个定时器对象clearTimeout(timer):取消以前的定时设置.例子：window对象,窗口对象,alert()alert()；弹出一个只包含“确定”按钮的对话框，显示的内容，整个文档的读取、Script的运行都会暂停，直到用户按下“确定”。confirm()confirm()；弹出一个包含“确定”和“取消”按钮的对话框，显示的内容。按下“确定”，则返回true值，如果按下“取消”，则返回false值。prompt()用法：prompt(,)；弹出一个包含“确认”“取消”和一个文本框的对话框，显示的内容，要求用户在文本框输入一些数据。如果用户按下“确认”，则返回文本框里已有的内容，如果用户按下“取消”，则返回null值。如果指定，则文本框里会有默认值。,Event对象,Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行，event对象只在事件过程中才有效。尽管所有事件属性都可通过所有的event对象访问，但是在某些事件中某些属性可能无意义。例子：event_xy.html,Event对象,altKey：检索ALT键的当前状态falseALTkeyisnotpressed.trueALTkeyispressed.button：检索按下的鼠标键0没按键1按左键2按右键3按左右键4按中间键5按左键和中间键6按右键和中间键7按所有的键,Event对象,returnValue：设置或检索从事件中返回的值true事件中的值被返回false源对象上事件的默认操作被取消x检索相对于父要素鼠标水平坐标的整数y检索相对于父要素鼠标垂直坐标的整数例子：event_test.html,History对象,History指浏览器的浏览历史属性length历史的项数。方法back()后退。forward()前进。go(x)在历史的范围内去到指定的一个地址。如果x0，则前进x个地址，如果x=0，则刷新现在打开的网页。history.go(0)跟location.reload()是等效的。例子：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)键。replace()打开一个URL，并取代历史对象中当前位置的地址。用这个方法打开一个URL后，按下浏览器的“后退”键将不能返回到刚才的页面。例子：location.html,document对象,document描述当前窗口或指定窗口对象的文档。它包含了从到的内容。属性title.定义的文字。fgColor的text属性所表示的文本颜色。bgColor的bgcolor属性所表示的背景颜色。linkColor的link属性所表示的连接颜色。alinkColor的alink属性所表示的活动连接颜色。vlinkColor的vlink属性所表示的已访问连接颜色。方法write();writeln()向文档写入数据，所写入的会当成标准文档HTML来处理。writeln()换行,只是在HTML中换行。例子：document.html,document对象,document对象包含若干数组对象，它们代表了页面上的标记元素，即：Links链接对象集合，即appletsApplet对象集合forms表单对象集合，即images图片对象集合，即embeds插件对象集合这些集合包含了页面上全部的同类对象，如果访问其中一个只需要加上索引即可，如docment.forms0.username.value;练习：用户名和密码的验证,Form对象,Form对象代表一个HTML表单。属性name表单名称，即属性。action返回/设定表单提交地址，即action属性。method返回/设定表单提交方法，即method属性target返回/设定表单提交后返回的窗口，也就是属性。encoding返回/设定表单提交内容的编码方式，也就是属性。length返回该表单所含元素的数目。例子：form.html,Form对象,方法reset()重置表单。这与按下“重置”按钮是一样的。submit()提交表单。这与按下“提交”按钮是一样的例子：reset.html,Form对象,以下对象都可以做为表单属性使用，但需要指定名字1、文本框对象2、多行文本输入区对象3、隐藏对象4、密码输入区对象5、单选域对象6、复选框对象7、下拉菜单对象8、选择项对象9、重置按钮对象10、按钮对象11、提交对象,文本类对象,包括text、textarea、hidden、password属性name返回/设定用指定的元素名称。value返回/设定密码输入区当前的值。defaultValue返回用指定的默认值。form返回包含本元素的表单对象。方法blur()从对象中移走焦点。focus()让对象获得焦点。select()选中输入区里全部文本。注意：由于hidden不可