JavaScript.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,JavaScript,JavaScript,是由,Netscape,公司开发的、介于,Java,与,HTML,之间、基于对象事件驱动的编程语言。因它的开发环境简单，不需要,Java,编译器，而是直接运行在,Web,浏览器中，而因倍受,Web,设计者的所爱。,虽然,JavaScript,与,Java,有紧密的联系，但却是两个公司开发的不同的两个产品。,Java,是,SUN,公司推出的新一代面向对象的程序设计语言，特别适合于,Internet,应用程序开发；而,JavaScript,是,Netscape,公司的产品，其目的是为了扩展,Netscape Navigator,功能，而开发的一种可以嵌入,Web,页面中的基于对象和事件驱动的解释性语言，它的前身是,Live Script,；而,Java,的前身是,Oak,语言。,在,Html,中嵌入,JavaScript,将,JavaScript,脚本加入,Html,文档：,JavaScript,语言代码；,JavaScript,语言代码,;.,JavaScript,脚本放置位置,document.Write(“,脚本输出内容,);,Type=“text/,javascript,”,基本数据类型,在,JavaScript,中四种基本的数据类型：,数值（整数和实数）,字符串型（用“”号或括起来的字符或数值）,布尔型（使,True,或,False,表示）,空值。,由于,JavaScript,采用弱类型的形式，因而一个变量或常量不必首先作声明，而是在使用或赋值时确定其数据的类型的。当然也可以先声明，它是通过在赋值时自动说明其数据类型的。,常量,整型常量整型常量可以使用十六进制、八进制和十进制表示其值。,实型常量实型常量是由整数部分加小数部分表示，如,12.32,、,193.98,。可以使用科学或标准方法表示：,5E7,、,4e5,等。,布尔值布尔常量只有两个值：,True,或,False,。,字符型常量使用单引号（）或双引号（“）括起来的一个或几个字符。如,”,This is a book of JavaScript“,、,”,3245“,、,”,ewrt234234“,等。,空值,JavaScript,中有一个空值,null,表示什么也没有。如试图引用没有定义的变量,则返回一个,Null,值。,特殊字符同语言一样，,JavaScript,中同样有些以反斜杠（,）开头的特殊字符。通常称为转义字符。,转义字符,b,退格,f,走纸换页,n,换行,r,回车,t,横向跳格,(Ctrl-I),单引号,双引号,反斜杠,e,转义字符（,Esc,字符）,变量,变量的命名必须以字母或下划线开头，后面跟随字母、下划线或数字。,不能使用,JavaScript,中的关键字作为变量。在对变量命名时，最好把变量的意义与其代表的意思对应起来，以免出现错误。,变量的声明在,JavaScript,中，变量可以用命令,Var,作声明,:,var,mytest,;,该例子定义了一个,mytest,变量。但没有赋予它的值。,Var,mytest,=”This is a book”,该例子定义了一个,mytest,变量,同时赋予了它的值。在,JavaScript,中，变量以可以不作声明，而在使用时再根据数据的类型来确其变量的类型。如：,x=100 y=“125”,xy,=True cost=19.5,等。其中,x,整数，,y,为字符串，,xy,为布尔型，,cost,为实型。,变量的作用域在,JavaScript,中同样有全局变量和局部变量。全局变量是定义在所有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。,运算符,（）算术运算符双目运算符：,+,（加）、,-,（减）、*（乘）、,/,（除）、,%,（取模）。单目运算符：,+,（递加,1,）、,-,（递减,1,）。,（）比较运算符,(,大于,),、,=(,大于等于,),、,=(,等于,),、,!=(,不等于,),。,（）逻辑运算符,!,（逻辑非,),、,&,（逻辑与）、,|,（逻辑或）。,?:,（三目操作符）。,基本输入输出与交互,Document.write,Alert(),Confirm(),Prompt(),Javascript,脚本直接放在,HTML,标记中,Javascript,脚本单独放置在一个文件中,Html,事件,将,Javascript,脚本单独放置在一个以,js,为后缀的文件中，在,html,中调用。,Myjava.js,myhtml.html,程序流程控制条件和分支语句：,IfElse,，,Switch,If,（条件）,执行语句,Else,执行语句,switch(expression,)case 1:,语句块,1 case 2:,语句块,2 default:,语句块,N,程序流程控制循环语句：,For,，,ForIn,，,While,，,D0While,语句，,Break,和,Continue,for,（初始化部分；条件部分；更新部分）,语句块,for(,变量,in,对象,),语句块；,while,（条件）,语句块；,do,语句块；,while,（条件）,;,var,x,var,mycars,=new Array()mycars0=Saab mycars1=Volvo mycars2=BMW for(x in,mycars,),document.write(mycarsx,+),在,Javascript,脚本中添加注释,单行注释：,/,多行注释：,/*/,Javascript,函数,函数,Javascript,中的函数程序中多次用到的程序片断作为事件驱动的结果而调用的程序片断 防止网页一打开就被浏览器执行的程序片断,Javascript,函数定义,function,函数名,(【,函数参数,】),函数体,;return,表达式,;,在网页中的位置一般定义在,部分中。如果这个函数在多个网页中用到，可以将函数放在单独的,.,js,文件中。,Javascript,系统函数示例,校验字符串是否为整型,:,checkIsInteger(str,),校验整型最小值,:,checkIntegerMinValue(str,val,),校验整型最大值,:,checkIntegerMaxValue(str,val,),校验整型是否为非负数,:,isNotNegativeInteger(str,),校验字符串是否为浮点型,:,checkIsDouble(str,),校验浮点型最小值,:,checkDoubleMinValue(str,val,),校验浮点型最大值,:,checkDoubleMaxValue(str,val,),校验浮点型是否为非负数,:,isNotNegativeDouble(str,),校验字符串是否为日期型,:,checkIsValidDate(str,),校验两个日期的先后,:,checkDateEarlier(strStart,strEnd,),校验字符串是否为,email,型,:,checkEmail(str,),校验字符串是否为中文,:,checkIsChinese(str,),计算字符串的长度，一个汉字两个字符,:,realLength,(),校验字符串是否符合自定义正则表达式,:,checkMask(str,pat,),得到文件的后缀名,:,getFilePostfix(oFile,),按键屏蔽,:,KeyDown,(),Javascript,事件,什么是事件网页的每一个元素都能因用户的操作而产生一定的动作，我们把这些元素因用户操作而产生的动作称之为事件。通过事件的触发可以调用,JavaScript,的函数（或,javascript,事件处理程序）。例如，我们可以使用一个按钮的点击,(,onClick,),事件来指定当用户点击按钮时执行某个函数。,事件在,HTML,的标签中定义。,JavaScript,的事件,onabort,一个图片的加载被终止,(,只用于,),onblur,当一个元素失去焦点（光标移开）,onchange,用户改变了一个域的值（用于,）,onclick,鼠标点击对象,ondblclick,鼠标双击对象,onerror,文件或图片加载出错（,）,onfocus,一个元素得到焦点,onkeydown,键盘上任一键被按下,onkeypress,-,键盘上任一键被按下或保持按下,onkeyup,当被按下的键被释放时,onload,当页面或图片完成加载,onmousedown,当一个鼠标键被按下,onmousemove,-,鼠标移动,onmouseout,鼠标被从一个元素上移开,onmouseover,鼠标移至某元素上,onmouseup,鼠标键被释放,onreset,重置按钮被点击,onresize,窗口或框架大小被改变,onselect,文本被选择,onsubmit,提交按钮被点击,onunload,用户关闭页面,第一个简单的例子,function,displaymessage,(),alert(“welcome,”);,第二个简单的例子,function,displaymessage(txt,),alert(txt,);,第三个简单的例子,function,mySite,()return(“welcome,mywebsite,”);,document.write(mySite,();,第四个简单的例子,function,JiaFa(a,b,),return(a+b,);document.write(JiaFa(1,2);,第五个简单例子,document.,formName.inputname.value,;,document.getElementById(“id).innerHTML,Javascript,对象,对象：一切具有标识的东西。在具体的计算机语言中对象是个抽象的概念，是要操作的目标。（现实中的例子）电脑这个对象，他具有外观、价格等等特点，这在对象概念中被称为属性，而利用这个电脑玩游戏、看电影、查找资料等用途，这就对应于对象里的方法。,基本结构：,Javascript,中的对象是由,属性,和,方法,两个基本元素构成的。,在一个对象中包含的属性和其它对象，或者可以理解为变量。,能按照设计者的意图而执行的程序段（函数）。,Javascript,对象,对象的引用：,Javascript,内部对象,浏览器对象,新创建的对象,(1),对象,.,属性，对象,.,方法（参数）,(2),通过对象的下标引用,(3),以字符串形式引用,对象,.,属性,1=,值,1,对象,.,属性,2=,值,2,对象,0=,值,1,对象,1=,值,2,对象,“,属性,1“=,值,1,对象,”,属性,2“=,值,2,Javascript,常用内部对象：,String,串对象（,String),属性：,length,，字符串长度,串对象（,String),方法：串对象的方法共有,19,个，主要用于关于字符串在,Web,页面中的显示，字体大小、字体颜色、字符的搜索以及字符的大小写转换。,fontsize(size,),控制字体大小,fontcolor(color,),控制字体颜色,toLowerCase,(),转换为小写,toUpperCase,(),转换为大写,substring(start,end,),返回字符串中由位置,start,到,end,的所有字符,charAt(num,),返回指定位置,num,处的内容,split(),根据指定的分隔符把一个字符串划分为一个字符串数组,Javascript,常用内部对象：,Math,Math,对象的属性：数学中经常用的常数例如园周率,Math,对象的方法：绝对值,abs(),三角函数,sin(),四舍五入,round(),平方根,sqrt,(),Javascript,常用内部对象：日期时间对象,date,Date,对象没有提供直接访问的属性，只具有获取和设置日期和时间的方法。使用前必须用,new,运算符创建一个对象实例。,MyDate,=New Date(),获取日期时间的方法,getYear,():,返回年,getMonth,():,返回月,getDate,():,返回日,getDay,():,返回星期几,getHours,():,返回小时,getMintes,():,返回分钟,getSeconds,():,返回秒,getTime,():,返回毫秒,设置日期时间的方法,Javascript,常用内部对象：,Array,Array,对象的属性：,length,数组的长度。,Array,对象的方法：,join(),将数组值连接变为一个字符串,reverse(),将数组值倒序,sort(),将数组值进行排序,例：,myArray,=new Array(3);myArray0=“g”;myArray1=“o”;myArray2=“d”;,document.write(myArray.length,+”);,document.write(myArray.join,()+”);,document.write(myArray.reverse().join,()+”);,document.write(myArray.sort().join,()+”);,浏览器对象模型（,BOM),可以访问和操作浏览器窗口的浏览器对象模型（,BOM,，,Browser Object Model,）。,利用,javascript,可以实现对,bom,的扩展,:,弹出新浏览器窗口的功能；移动、缩放和关闭浏览器窗口的功能；提供浏览器详细信息的,navigator,对象；提供浏览器所加载页面的详细信息的,location,对象；提供用户显示器分辨率详细信息的,screen,对象；对,cookies,的支持；,Bom,不是,w3c,的标准，所以不周的浏览器对,bom,的支持不同。,浏览器对象模型,history,window,document,screen,frames,location,navigator,embeds,applets,location,links,images,forms,anchors,elements,button,checkbox,fileupload,hidden,password,radio,reset,submit,text,select,textarea,options,引用：,橙色对象通过对象名称引用。,绿色通过,HTML,标签中的,name,属性值引用。,粉红色可以通过,name,值引用也可以以数组形式引用。,引用示例,1,引用示例,1,：,请输入姓名：,引用示例,2,请输入姓名：,请输入地址：,Window,对象,window,对象的属性方法,open,和,close,：开、关一个浏览器窗口,;,可以定义大小、内容、按钮条、定位区域和其他一些属性。,alert,：显示带警告信息的对话框。,confirm,：显示带,OK,和,Cancel,按钮的确认对话框。,prompt,：显示带一个输入文本框的提示对话框。,status,用于设置浏览器状态行中所显示的信息。,示例：,window.open(pageURL,name,parameters,),1,、最简单的弹出窗口,Window,对象,2.,定制弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。,Window,对象,3.,把弹出窗口的代码写到函数中，在用户进行操作时弹出窗口。,Window,对象,4.widows.close function closeit()setTimeout(self.close(),1000);,5.,设置浏览器状态行中所显示的信息,window.status,=,欢迎访问光临本站,!;,location,对象,该对象包含有当前网页的,URL,（统一资源定位器，即网址）。,属性,href,属性：本面的,url,，或要转到的,url,.,示例：,1.,显示本页地址,document.write(window.location.href,);,2.,转到新地址,window.location.href,=“,page.html,”;,History,对象,history,对象记录了用户曾经浏览过的页面，并可以实现浏览器前进与后退相似的导航功能。,length,属性查看,history,对象中存储的页面数,Back,（）后退一个页面,forward,（）前进一个页面,go(),任意后退或前进页面,示例：,window.history.length,浏览器缓存中的历史页面,window.history.back,(),后退一页,window.history.forward,(),前进一页,window.history.go(-1),后退到曾访问过的倒数第一个页面,window.history.go(-2),后退到曾访问过的倒数第二个页面,window.history.go(1),前进到曾访问过的第一个页面,window.history.go(0),重新装载当前页面,Navigaor,对象,appCodeName,-,浏览器代码名的字符串表示,appName,-,官方浏览器名的字符串表示,appVersion,-,浏览器版本信息的字符串表示,示例：,“,你使用的浏览器是：,”+,navigator.appName,“,浏览器的版本是：”,+,navigator.appVersion,Document,对象,常用方法：,document.write,(),document.getElementById(ID,)/,获得指定,ID,值的对象,document.getElementsByName(Name,)/,获得指定,Name,值的对象,在,JavaScript,中创建对象的方法,1,：,var,myObj,=,id:1,/,属性名用引号括起来，属性间由逗号隔开,name:,zhangsan,age:10,test:function,(),document.write,(“,我叫,”+,this.name,+“,，今年,”+,this.age,+“,岁。,);,;,myObj.test,(),This:,表示当前对象,在,JavaScript,中创建对象的方法,function,myClass,(),this.id,=5;,this.name,=,myclass,;,this.getName,=function(),return,this.name,;,var,my=new,myClass,();/,用这种方法创建的对象在引用前需要 先创建实例。,document.write(my.id,);,document.write(my.getName,();,在,JavaScript,中创建对象的方法,var,company=newObject();,company.name,=,天堂,;,company.address,=,北京,;,company.produce,=,function(message,),document.write(message,);,document.write(company.name,);,company.produce,(“,天使,);,附：,window.open,参数说明,alwaysLowered,|yes/no|,指定窗口隐藏在所有窗口之后,alwaysRaised,|yes/no|,指定窗口悬浮在所有窗口之上,depended|yes/no|,是否和父窗口同时关闭,directories|yes/no|Nav2,和,3,的目录栏是否可见,height|pixel value|,窗口高度,hotkeys|yes/no|,在没菜单栏的窗口中设安全退出热键,innerHeight,|pixel value|,窗口中文档的像素高度,innerWidth,|pixel value|,窗口中文档的像素宽度,location|yes/no|,位置栏是否可见,menubar,|yes/no|,菜单栏是否可见,outerHeight,|pixel value|,设定窗口,(,包括装饰边框,),的像素高度,outerWidth,|pixel value|,设定窗口,(,包括装饰边框,),的像素宽度,resizable|yes/no|,窗口大小是否可调整,screenX,|pixel value|,窗口距屏幕左边界的像素长度,screenY,|pixel value|,窗口距屏幕上边界的像素长度,scrollbars|yes/no|,窗口是否可有滚动栏,titlebar,|yes/no|,窗口题目栏是否可见,toolbar|yes/no|,窗口工具栏是否可见,Width|pixel value|,窗口的像素宽度,z-look|yes/no|,窗口被激活后是否浮在其它窗口之上,