《javascript基础.ppt》由会员分享，可在线阅读，更多相关《javascript基础.ppt（96页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Neusoft Institute of InformationMar 2008IT Education&TrainingApril23 重温JavaScriptNeusoft Institute of InformationMar 2008IT Education&Training授课要点JavaScript介绍ECMAScriptDOMBOMNeusoft Institute of InformationMar 2008IT Education&TrainingJavaScript概念JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本
2、语言。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，可以开发客户端的应用程序。典型应用：客户端交互数据验证动态更改网页内容Neusoft Institute of InformationMar 2008IT Education&TrainingJavaScript特点基于对象（ObjectBased）和事件驱动（EventDriver）解释型语言：其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户编由浏览器解释执行。弱类型变量：即变量在使用前不需作声明，而是解释器在运行时检查其数据类型。代码格式：JavaScript的代码是一种文本
3、字符格式，可以直接嵌入HTML文档中。嵌入方式：使用.来标识Neusoft Institute of InformationMar 2008IT Education&TrainingJavaScript版本JavaScript/jscript/ECMAScriptJavaScript是由Netscape公司开发.它的前身是LiveScript。Microsoft发行jscript用于internetexplorer最初的jscript和javascript差异过大，web程序员不得不痛苦的为两种浏览器编写两种脚本。于是诞生了ECMAScript,是一种国际标准化的javascript版本。现在
4、的主流浏览器都支持这种版本。Neusoft Institute of InformationMar 2008IT Education&TrainingJavaScript组成一个完整的JavaScript实现是由以下3个不同部分组成的。核心（ECMAScript）文档对象模型（DOM）；浏览器对象模型（BOM）。javascriptECMAScript文档对象模型浏览器对象模型Neusoft Institute of InformationMar 2008IT Education&TrainingECMAScriptECMAScript描述了以下内容：语法类型语句关键字保留字运算符对象Neus
5、oft Institute of InformationMar 2008IT Education&Training基本数据类型Number类型：包括整数和实数Boolean类型：两个值true和falseString类型：Null型：它只有一个专用值null，即它的字面量。Undefined类型：只有一个值即undefined，当声明的变量未初始化时，该变量的默认值是undefined。类型转换：转换为字符串转换为数字强制类型转换Neusoft Institute of InformationMar 2008IT Education&Training类型转换转换为字符串：toString(va
6、lue)转换为数字转换为整数：parseInt(value)转换为实数:parseFloat(value)强制类型转换Boolean(value)-把给定的值转换成Boolean型；Number(value)-把给定的值转换成数字（可以是整数或浮点数）；String(value)-把给定的值转换成字符串；Neusoft Institute of InformationMar 2008IT Education&Training类型转换Number()函数的强制类型转换与parseInt()和parseFloat()方法的处理方式相似，只是它转换的是整个值，而不是部分值。parseInt()和pa
7、rseFloat()方法只转换第一个无效字符之前的字符串，因此1.2.3将分别被转换为1和1.2。用Number()进行强制类型转换，1.2.3将返回NaN，因为整个字符串值不能转换成数字。如果字符串值能被完整地转换，Number()将判断是调用parseInt()方法还是parseFloat()方法。Neusoft Institute of InformationMar 2008IT Education&Training var x=100;var y;var z;document.write(竞拍SONY数码相机 600万像素+x+$起价);y=prompt(加多少银子？,1);z=x+y
8、;alert(您最终的出价n+z+$);/”n”用于换行显示 Prompt函数返回输入的字符串“+”号的用法 10020?bug+字符串相连：100+”200”200Neusoft Institute of InformationMar 2008IT Education&Training var x=100;var y;var z;document.write(竞拍SONY数码相机 600万像素+x+$起价);y=prompt(加多少银子？,1);z=x+parseFloat(y);alert(您最终的出价n+z+$);/”n”用于换行显示 parseFloat()函数将字符串转换为float
9、数据 parseInt()函数将字符串转换为int数据如果转换失败，返回NaN值(not a number)“+”号的用法Neusoft Institute of InformationMar 2008IT Education&Training变量JavaScript是一门弱类型的语言，所有的变量定义均以var来实现JavaScript的变量建议先定义，再使用JavaScript区分大小写虽然JavaScript可以不需定义即可直接使用变量，但不建议这么做Neusoft Institute of InformationMar 2008IT Education&Training运算符算术运算符比
10、较运算符逻辑运算符Neusoft Institute of InformationMar 2008IT Education&Training算术运算符运算符说明示例+加a=5+8-减a=8-5/除a=20/5*乘a=5*19%取模两个数相除的余数10%3=1+一元自加。该运算符带一个操作数，将操作数的值加1。返回的值取决于+运算符位于操作数的前面或是后面将返回x 自加运算后的值。x+将返回x自加运算前的值-一元自减。该运算符只带一个操作数。返回的值取决于-运算符位于操作数的前面或是后面-x将返回 x自减运算后的值。x-将返回 x自减运算前的值Neusoft Institute of Infor
11、mationMar 2008IT Education&Training比较运算符运算符运算符说说 明明示示 例例=等于。如果两个操作数相等，则返回真。a=b!=不等于。如果两个操作数不相等，则返回真。Var2!=5大于。如果左边的操作数大于右边的操作数，则返回真。Var1 var2小于。如果左边的操作数小于右边的操作数，则返回真。Var2 var1=小于等于。如果左边的操作数小于或等于右边的操作数，则返回真。Var2=4Var2=大于等于。如果左边的操作数大于或等于右边的操作数，则返回真。Var1=5Var1=var2Neusoft Institute of InformationMar 20
12、08IT Education&Training逻辑运算符运算符运算符值值说说 明明与(&)expr1&expr2只有当expr1和expr2同为真时，才返回真。否则，返回假。或(|)expr1|expr2如果其中一个表达式为真，或两个表达式同为真，则返回真。否则，返回假。非(!)!expr如果表达式为真，则返回假。如果为假，则返回真。Neusoft Institute of InformationMar 2008IT Education&Training控制语句if语句if(条件)语句块1if(条件)语句块1else语句块2while语句while(条件)语句块switch语句switch(i
13、)casei1:casei2:default:forfor(条件)语句块dowhilewhileNeusoft Institute of InformationMar 2008IT Education&Training函数function函数名（arg0,arg1,.argN)）函数体;.return表达式;说明：当调用函数时,所用变量或字面量均可作为变元传递。函数由关键字function定义。函数名：定义自己函数的名字。参数表，是传递给函数使用或操作的值，其值可以是常量，变量或其它表达式。通过指定函数名（实参）来调用一个函数。必须使用return将值返回。函数名对大小写是敏感的。Neusof
14、t Institute of InformationMar 2008IT Education&Training函数中的形式参数在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments.Length来检查参数的个数。例：functionfunction_Name(exp1,exp2,exp3,exp4)Number=function_Name.arguments.length;if(Number1）document.wrile(exp2);if(Number2)document.write(exp3
15、);if(Number3)document.write(exp4);.Neusoft Institute of InformationMar 2008IT Education&Training内置对象ArrayBooleanDateMathNumberStringRegExpGlobalNeusoft Institute of InformationMar 2008IT Education&TrainingArray对象创建创建 Array 对象的语法：对象的语法：new Array();new Array(size);new Array(element0,element1,.,element
16、n);参数参数size是期望的数组元素个数。返回的数组，length字段将被设为size的值。参数element.,elementn是参数列表。当使用这些参数来调用构造函数Array()时，新创建的数组的元素就会被初始化为这些值。它的length字段也会被设置为参数的个数。返回值如果调用构造函数Array()时没有使用参数，那么返回的数组为空，length字段为0。当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为undefined的数组。Neusoft Institute of InformationMar 2008IT Education&TrainingArra
17、y对象属性Neusoft Institute of InformationMar 2008IT Education&TrainingArray对象方法Neusoft Institute of InformationMar 2008IT Education&TrainingDate对象创建创建 Date 对象的语法：对象的语法：var myDate=new Date()Date对象会自动把当前日期和时间保存为其初始值。Data方法的分组：方法分方法分组组说说 明明 setxxx这些方法用于设置时间和日期值getxxx 这些方法用于获取时间和日期值Toxxx这些方法用于从 Date对象返回字符串值
18、parsexxx&UTCxx这些方法用于解析字符串Neusoft Institute of InformationMar 2008IT Education&Training用作Date方法的参数的整数：值值整整 数数 Seconds 和和 minutes0 至至 59 Hours0 至至 23 Day0 至至 6（星期（星期几）几）Date1 至至 31（月份中的天数）（月份中的天数）Months0 至至 11（一月（一月至十二月）至十二月）Neusoft Institute of InformationMar 2008IT Education&TrainingSet方法方法方法说说明明set
19、Date设置Date对象中月份中的天数，其值介于1至31之间。setHours设置Date对象中的小时数，其值介于0至23之间。setMinutes设置Date对象中的分钟数，其值介于0至59之间。setSeconds设置Date对象中的秒数，其值介于0至59之间。setTime设置Date对象中的时间值。setMonth设置Date对象中的月份，其值介于0至11之间。Neusoft Institute of InformationMar 2008IT Education&TrainingGet方法方法方法说说明明getDate返回Date对象中月份中的天数，其值介于1至31之间getDay返
20、回Date对象中的星期几，其值介于0至6之间getHours返回Date对象中的小时数，其值介于0至23之间getMinutes返回Date对象中的分钟数，其值介于0至59之间getSeconds返回Date对象中的秒数，其值介于0至59之间getMonth返回Date对象中的月份，其值介于0至11之间getFullYear返回Date对象中的年份，其值为四位数getTime返回自某一时刻（1970年1月1日）以来的毫秒数Neusoft Institute of InformationMar 2008IT Education&Training方方 法法说说 明明 ToGMTString使用格林
21、尼治标准时间(GMT)数据格式将Date对象转换成字符串表示ToLocaleString使用当地时间格式将Date对象转换成字符串表示To方法：Parse方法和UTC方法方方 法法说说 明明Date.parse(date string)用日期字符串表示自1970年1月1日以来的毫秒数Date.UTC(year,month,day,hours,min.,secs.)Date对象中自1970年1月1日以来的毫秒数Neusoft Institute of InformationMar 2008IT Education&TrainingMath对象名称名称 说说 明明属性PI的值，约等于3.1415L
22、N1010的自然对数的值，约等于2.302EEuler的常量的值，约等于2.718。Euler的常量用作自然对数的底数abs(y)返回y的绝对值sin(y)返回y的正弦，返回值以弧度为单位。cos(y)返回y的余弦，返回值以弧度为单位tan(y)返回y的正切，返回值以弧度为单位min(x,y)返回x和y两个数中较小的数max(x,y)返回x和y两个数中较大的数random返回0-1的随机数方法round(y)四舍五入取整sqrt(y)返回y的平方根Neusoft Institute of InformationMar 2008IT Education&TrainingString对象创建创建
23、String 对象的语法：对象的语法：使用var语句var newstr=“这是我的字符串这是我的字符串创建String对象var newstr=new String(“这是我的字符串这是我的字符串)Neusoft Institute of InformationMar 2008IT Education&Training名名 称称说说 明明属性Length返回字符串的长度 方法big()增大字符串文本 bold()加粗字符串文本 fontcolor()确定字体颜色 italics()用斜体显示字符串 indexOf()查找子字符串的位置strike()显示加删除线的文本 sub()将文本显示为
24、下标 concat()连接字符串。charAt()返回在指定位置的字符。splice()提取字符串的片断split()把字符串分割为字符串数组。substr()从起始索引号提取字符串中指定数目的字符。substring()提取字符串中两个指定的索引号之间的字符。toLowerCase()把字符串转换为小写。toUpperCase()把字符串转换为大写。Neusoft Institute of InformationMar 2008IT Education&TrainingGlobal全局对象顶层属性（全局属性）Neusoft Institute of InformationMar 2008IT
25、 Education&Training顶层函数（全局函数）Neusoft Institute of InformationMar 2008IT Education&TrainingBOM浏览器对象模型Neusoft Institute of InformationMar 2008IT Education&Traininghttp:/Window 窗口对象location地址对象document文档对象FORM表单对象浏览器对象的分层结构window.document.myform.text1 Neusoft Institute of InformationMar 2008IT Educatio
26、n&TrainingWindow对象Window对象表示浏览器中打开的窗口。如果文档包含框架（frame或iframe标签），浏览器会为HTML文档创建一个window对象，并为每个框架创建一个额外的window对象。Neusoft Institute of InformationMar 2008IT Education&Trainingwindow对象方法名称 说明 moveBy(dx,dy)把浏览器窗口相对当前位置水平移动dx个像素，垂直移动dy个像素。dx值为负数，向左移动窗口，dy值为负数，向上移动窗口moveTo(x,y)移动浏览器窗口，使它的左上角位于用户屏幕的(x,y)处。可以使
27、用负数，不过这样会把部分窗口移出屏幕的可视区域resizeBy(dw,dh)相对于浏览器窗口的当前大小把它口的宽度调整dw个像素，高度调整dy个像素。dw为负数，缩小窗口的宽度，dy为负数，缩小窗口的高度resizeTo(w,h)把窗口的宽度调整为w，高度调整为h。不能使用负数alert()显示包含消息的对话框。confirm（）显示一个确认对话框，包含一个确定取消按钮prompt（）弹出提示信息框open(url,name)打开具有指定名称的新窗口，并加载给定URL所指定的文档；如果没有提供URL，则打开一个空白文档close()关闭当前窗口Neusoft Institute of Info
28、rmationMar 2008IT Education&Trainingwindow对象属性名称名称 说明说明 document表示给定浏览器窗口中的HTML文档。history包含有关客户访问过的URL的信息。location包含有关当前URL的信息。name设置或检索窗口或框架的名称。status设置或检索窗口底部的状态栏中的消息。screenLeftscreenTopscreenXscreenY只读整数。声明了窗口的左上角在屏幕上的的x坐标和y坐标。IE、Safari和Opera支持screenLeft和screenTop，而Firefox和Safari支持screenX和screenY
29、。screen包含有关客户端的屏幕和显示性能的信息。Neusoft Institute of InformationMar 2008IT Education&TrainingDocument对象每个载入浏览器的HTML文档都会成为Document对象。Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。Document对象集合Neusoft Institute of InformationMar 2008IT Education&TrainingDocument对象属性Neusoft Institute of InformationMar 2008IT Education
30、&TrainingDocument对象方法Neusoft Institute of InformationMar 2008IT Education&TrainingHistory对象History对象包含用户（在浏览器窗口中）访问过的URL。History对象属性：length：返回浏览器历史列表中的URL数量History对象方法：名称说明back()加载History列表中的上一个URL。相当于后退按钮forward()加载History列表中的下一个URL。相当于前进按钮go(urlornumber)加载History列表中的一个URL，或要求浏览器移动指定的页面数。Neusoft In
31、stitute of InformationMar 2008IT Education&TrainingLocation对象Location对象包含有关当前URL的信息。Location对象属性Neusoft Institute of InformationMar 2008IT Education&TrainingLocation对象方法Neusoft Institute of InformationMar 2008IT Education&TrainingNavigator对象Navigator对象包含有关浏览器的信息。Navigator方法Neusoft Institute of Infor
32、mationMar 2008IT Education&TrainingNavigator属性Neusoft Institute of InformationMar 2008IT Education&TrainingScreen对象Screen对象包含有关客户端显示屏幕的信息Neusoft Institute of InformationMar 2008IT Education&TrainingDOM文档对象模型通过JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口
33、。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。Neusoft Institute of InformationMar 2008IT Education&TrainingDOM被分为不同的部分（核心、XML及HTML）。Core DOM 定义了一套标准的针对任何结构化文档的对象XML DOM 定义了一套标准的针对XML文档的对象HTML DOM 定义了一套标准的针对HTML文档的对象。Neusoft Institute of InformationMar 2008IT Education&TrainingHTMLDOMHTMLDOM
34、节点文档树（节点数）HTMLDOM节点信息HTMLDOM访问节点Neusoft Institute of InformationMar 2008IT Education&TrainingHTMLDOM节点根据DOM，HTML文档中的每个成分都是一个节点。DOM是这样规定的：整个文档是一个文档节点每个HTML标签是一个元素节点包含在HTML元素中的文本是文本节点每一个HTML属性是一个属性节点注释属于注释节点Neusoft Institute of InformationMar 2008IT Education&TrainingNode层次Neusoft Institute of Informa
35、tionMar 2008IT Education&Training文档树（节点数）除文档节点之外的每个节点都有父节点。大部分元素节点都有子节点。当节点分享同一个父节点时，它们就是同辈（同级节点）。节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。Neusoft Institute of InformationMar 2008IT Education&TrainingHTMLDOM节点信息每个节点都拥有包含着关于节点某些信息的属性。这些属性是：nodeName（节点名称）元素节点的nodeNa
36、me是标签名称属性节点的nodeName是属性名称文本节点的nodeName永远是#text文档节点的nodeName永远是#documentnodeValue（节点值）nodeType（节点类型）Neusoft Institute of InformationMar 2008IT Education&TrainingHTMLDOM节点信息nodeValue（节点值）对于文本节点，nodeValue属性包含文本。对于属性节点，nodeValue属性包含属性值。nodeValue属性对于文档节点和元素节点是不可用的。nodeType（节点类型）Neusoft Institute of Infor
37、mationMar 2008IT Education&TrainingHTMLDOM对象Neusoft Institute of InformationMar 2008IT Education&TrainingHTMLDOM对象Neusoft Institute of InformationMar 2008IT Education&TrainingHTMLDOMDocument对象Document 对象对象每个载入浏览器的HTML文档都会成为Document对象。Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。提示：提示：Document对象是Window对象的一部分
38、，可通过window.document属性对其进行访问。Neusoft Institute of InformationMar 2008IT Education&TrainingDocument对象方法Neusoft Institute of InformationMar 2008IT Education&TrainingHTMLDOM访问节点getElementById：通过惟一的ID值，查找一个单独的元素JourneytothestarsvarelementRef=document.getElementById(sirius);getElementsByTagName：通过标签名字来返回一
39、组元素SiriuscanopusarcturusvegavaranchorArray=document.getElementsByTagName(a);Neusoft Institute of InformationMar 2008IT Education&Training节点的访问顺序node.childNodes指定节点的所有子节点，包括文本节点和所有其他元素；node.firstChild指定节点的第一个子节点；node.lastChild指定节点的最后一个子节点；node.parentNode指定节点的上级节点；node.nextSibling指定节点的下一个兄弟节点；node.pre
40、viousSibling指定节点的上一个兄弟节点。Neusoft Institute of InformationMar 2008IT Education&Training文本框对象文本框事件onBlur文本框失去焦点onChange文本框的值被修改onFocus光标进入文本框中方法focus()获得焦点，即获得鼠标光标select()选中文本内容，突出显示输入区域属性readonly 只读，文本框中的内容不能修改 Neusoft Institute of InformationMar 2008IT Education&Training文本框对象cardpricenumbertotmyform
41、Neusoft Institute of InformationMar 2008IT Education&Training文本框对象-onChange事件处理程序function clearText()if(document.myform.card.value=输入您的会员帐号)document.myform.card.value=;function check()var a=document.myform.card.value;if(a.substr(0,2)!=10|isNaN(a)alert(格式错误，请重新输入);document.myform.card.focus();documen
42、t.myform.card.select();function compute()var price=document.myform.price.value;var number=document.myform.number.value;document.myform.tot.value=parseFloat(price)*parseInt(number);onFocus事件调用的函数clearText（）（）清空帐号文本框中的内容onBlur事件调用的函数check（）检查输入的帐号是否是“10”打头，并且是数字onChange事件调用的函数compute()用来计算总价 Neusoft I
43、nstitute of InformationMar 2008IT Education&Training文本框对象 .帐号：.单价：￥.数量：个总价：￥.帐号文本框添加onFocus和onBlur焦点事件价格只读属性数量文本框添加onChange事件Neusoft Institute of InformationMar 2008IT Education&Training命令按钮对象命令按钮对象是网页中最常用的元素之一Neusoft Institute of InformationMar 2008IT Education&Training“按钮-事件处理程序表表单单元素元素事件事件处处理程序理程
44、序说说明明命令按钮onSubmit表单提交事件，单击“提交”按钮时产生，此事件属于元素，不属于提交按钮onClick按钮单击事件onSubmit事件处理代码：如果函数返回true，则向远程服务器提交表单；如果函数返回false，则取消提交。Neusoft Institute of InformationMar 2008IT Education&Training命令按钮事件处理程序Neusoft Institute of InformationMar 2008IT Education&TraininguserNamepass1pass2type=resettype=submitmyformNeu
45、soft Institute of InformationMar 2008IT Education&Training命令按钮对象function check()var userName=document.myform.userName.value;var pass1=document.myform.pass1.value;var pass2=document.myform.pass2.value;if(pass1=pass2)if(pass1.length!=0)document.write(恭喜您，注册成功！欢迎恭喜您，注册成功！欢迎 +userName+光临光临！);return true
46、;else alert(密码不能为空！密码不能为空！n请输入密码请输入密码);return false;else alert(确认码必须和输入的密码相同确认码必须和输入的密码相同！);return false;onSubmit事件调用的函数：输入数据检查如果输入格式正确，返回true，提交表单信息；如果格式错误，返回false，取消提交，提醒用户重填Neusoft Institute of InformationMar 2008IT Education&Training复选框对象当用户需要在选项列表中选择多项时，可以使用复选框对象要创建复选框对象，请使用标签请选择您的爱好 电影 电影Neuso
47、ft Institute of InformationMar 2008IT Education&Training复选框-事件处理程序复选框事件onBlur复选框失去焦点onFocus 复选框获得焦点 onClick 复选框被选定或取消选定属性checked复选框是否被选中，选中为true，未选中为false。您可以使用此属性查看复选框的状态或设置复选框是否被选中 value设置或获取复选框的值Neusoft Institute of InformationMar 2008IT Education&Training复选框-事件处理程序Neusoft Institute of Informatio
48、nMar 2008IT Education&Trainingcheckbox1checkbox2checkbox3设置复选框的值checkbox4myformNeusoft Institute of InformationMar 2008IT Education&Training复选框-事件处理程序function buy()var s=;if(document.myform.checkbox1.checked=true)/如果被选中如果被选中 s=s+document.myform.checkbox1.value+“n”;/累计选中的商品累计选中的商品 if(document.myform.
49、checkbox2.checked=true)s=s+document.myform.checkbox2.value+n;if(document.myform.checkbox3.checked=true)s=s+document.myform.checkbox3.value+n;if(document.myform.checkbox4.checked=true)s=s+document.myform.checkbox4.value+n;/if(confirm(您定购了以下物品，确定吗？：您定购了以下物品，确定吗？：n+s)=true)document.write(您定购了以下物品您定购了以下
50、物品:+s+);单击”成交“按钮调用的函数：检查每个复选框的选中情况，累计用户选中的商品是为了原样显示字符串中的换行”n”格式 onClick=buy()“Neusoft Institute of InformationMar 2008IT Education&Training复选框-事件处理程序function buy()var s=;for(var i=0;i document.myform.mybox.length;i+)/判断第i个复选框是否被选中 if(document.myform.myboxi.checked=true)s=s+document.myform.myboxi.val