JavaScript(课件).ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,JavaScript,教程,JavaScript,是由,NetscapeNavigator,导航者一起发布的、,介于,Java,与,HTML,之间、,基于对象事件驱动的编程语言，正日益受到全球的关注。,因它的开发环境简单，不需要,Java,编译器，而是直接运行在,Web,浏览器中，而因倍受,Web,JavaScript,教程语言概况,JavaScript,的出现，它可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交式的表达能力,.,JavaScript,脚本正是满足这种需求而产生的语言。它深受广泛用户的喜爱的欢迎。它是众多脚本语言中较为优秀的一种，它与,WWW,的结合有效地实现了网络计算和网络计算机的蓝图。无凝,Java,家族将占领,Internet,网络的主导地位。,2,JavaScript,几个基本特点,安全性,易用性,动态交互性,跨平台性,P213,3,JavaScript,的主要功能,表单操作,响应事件,动态特效,记录状态,4,例,1,：编写第一个,JavaScript,程序,/JavaScript Appears here.,document.write(“,欢迎来到,JS,世界！,”);,alert(,这是第一个,JavaScript,例子,!);,5,练习,1,：编写第一个,JavaScript,程序,通过,javascript,实现以下页面效果：,1.,页面输出：“你好！”,2.,弹出对话框：对话框内容为“欢迎光临我的小站！”,6,基本数据类型,在,JavaScript,中四种基本的数据类型：,数值（整数和实数）,字符型（字符串）,document.write(“,中国,”+“,的北京,”);,布尔型（使,True,或,False,表示）,基本数据类型,在,JavaScript,中四种基本的数据类型：,数组,大家有疑问的，可以询问和交流,可以互相讨论下，但要小声点,变量,变量的声明,(1)var num;,num=20;,(2)var num=20;,10,变量、表达式,例,2,var r=2,pi=3.14;,document.write(,半径为,2,的圆的面积为：,+pi*r*r);,注：不同类型的变量都通过,var,定义,11,运算符,算术运算符,赋值运算符,关系运算符,逻辑运算符,P223,12,JavaScript,程序控制结构,顺序,选择,循环,13,选择,if,语句（,1,）,基本格式,if,（表述式）语句段；,功能：若表达式为,true,，则执行语句段。,14,基本格式,if,（表述式）语句段；,.else,语句段；,.,功能：若表达式为,true,，则执行语句段；否则执行语句段。,选择,if,语句（,2,）,15,循环,while,基本格式,while,（条件）,循环体,var i=1;,while(i 3),document.write(i);,i=i+1;,程序结果是什么？,16,循环,For,循环,基本格式,for,（表达式,1,；表达式,2,；表达式,3,）,循环体,for(var i=0;i5;i+),document.write(“i,的值为：,”+i);,程序结果是什么？,17,函数,函数为程序设计人员提供了一个丰常方便的能力。通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。,JavaScript,函数可以封装那些在程序中可能要多次用到的模块。,并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这是与其它语言不样的地方。,18,JavaScript,函数定义,function,函数名（参数,1,参数,2,）,函数体,;,19,JavaScript,函数使用 例,3,var x=20,y=22;,function sum(),return x+y;,document.write(x+y,的值为：,+sum();,20,练习,2,：函数的使用,在,javascript,中：,1.,定义变量,r,初值为,3,，变量,pi,初值为,3.14,；,2.,定义函数,area(),求圆的面积；,3.,在页面输出圆的面积。,var x=20,y=22;,function sum(),return x+y;,document.write(x+y,的值为：,+sum();,21,练习,2,参考,var r=3,pi=3.14;,function area(),return pi*r*r,document.write(,圆的面积为：,+area();,22,JavaScript,函数使用 例,4,function sum(x,y),return x+y;,document.write(x+y,的值为：,+sum(3,6);,注意！参数前不需要加,var,23,JavaScript,教程,第,10,章,JavaScript,核心对象,基于对象的,JavaScript,语言,JavaScript,语言是基于对象的（,Object-Based,），而不是面向对象的（,object-oriented,）。之所以说它是一门基于对象的语言，主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。,虽然,JavaScript,语言是一门基于对象的，但它还是具有一些面向对象的基本特征。它可以根据需要创建自己的对象，从而进一步扩大,JavaScript,的应用范围，增强编写功能强大的,Web,文档。,25,对象的概念,JavaScript,中的对象是由属性,(properties),和方法,(methods),两个基本的元素的构成的。,引用对象性质的方法,对象名,.,属性,对象名,.,方法,26,JavaScript,对象的分类,内置对象,JavaScript,定义的类，包括数组对象、日期对象、字符串对象等。,宿主对象,浏览器对象模型和文档对象模型中的对象，如浏览器对象,window,，文档对象,document,。,27,串对象的属性,string,对象只有一个属性，即,length,。它表明了字符串中的字符个数，包括所有符号。例：,var mytest=“This is a JavaScript”var mtLength=mytest.length,最后,mtLength,值为,20,。,28,串对象的方法,P253,29,数组对象,使用,New,创建数组,JavaScript,中没有提供像其它语言具有明显的数组类型，但可以通过,function,定义一个数组，并使用,New,对象操作符创建一个具有下标的数组。从而可以实现任何数据类型的存储。,30,数组对象,(1),创建数组,var myArray=new Array(3);,(2),数组赋值,myArray0=,“Jim,”,；,myArray1=,“,Tom,”,；,myArray2=,“,Kate,”,；,var myArray=new Array(“Jim”,”Tom”,”Kate”);,31,数组应用,例,5,var myArray=new Array(Jim,Tom,Kate);,document.write(,数组的长度为：,+myArray.length+);,for(var i=0;imyArray.length;i+),document.write(myArrayi+,32,练习,3,：数组,在,javascript,中：,利用数组，在页面输出以下内容：,*,*,*,33,用日期对象创建日期,功能：提供一个有关日期和时间的对象。,创建日期,（,1,）,var myDate1=new Date(),（,2,）,var myDate2=new Date(2012,，,3,，,7),34,获取日期的时间方法,getFullYear():,以四位数返回年数,getMonth():,返回月数（,011,）,getDate():,返回当月的几号,getDay():,返回星期几（,06,）,35,日期对象的应用 例,6,var date=new Date();,document.write(date+);,document.write(date.getFullYear()+,年,+(date.getMonth()+1)+,月,+date.getDate()+,日,+,星期,+date.getDay();,36,算术函数的,math,对象,功能：提供除加、减、乘、除以外的一引些自述运算。如对数，平方根等。,37,算术函数的,Math,对象,主要方法,:,绝对值：,abs(),正弦余弦值：,sin(),cos(),反正弦反余弦,:asin(),acos(),正切反正切：,tan(),atan(),四舍五入：,round(),最大值：,max(x,y),最小值：,min(x,y),.P 264-(10-7),38,宿主对象,窗口对象,(Window),文档对象,(Document),39,JavaScript,窗口及输入输出,JavaScript,是基于对象的脚本编程语言，那么它的输入输出就是通过对象来完成的。其中有关输入可通过窗口（,Window,）对象来完成，而输出可通过文档（,document,）对象的方法来实现。,40,窗口对象的方法,alert():,弹出带有指定信息和确定按钮的警告框。,confirm():,弹出带有指定询问信息的确认对话框，并有确定和取消按钮。,prompt():,产生一个输入窗口，返回输入值。,注：,Windows,窗口对象是所有对象的父对象，代表一个浏览器窗口。引用,windows,对象的属性或方法是，可直接引用，不必通过对象名引用。,41,Window,对象的应用 例,7,var name;,name=prompt(,请输入你的名字,);,if(confirm(,准备好考试了吗？,),alert(name+,你好，下面开始考试！,);,。,42,document,对象,输出,:,document.write(),document.writeln(),说明：,write(),和,writeln(),方法都是用于向浏览器窗口输出文本字串；二者的唯一区别就是,writeln(),方法自动在文本之后加入回车符。,43,简单的输入、输出 例,8,var name;,name=prompt(,请输入你的名字,);,document.write(name+,，你好，下面开始考试！,);,44,练习,4,简单输入输入,（,1,）弹出输入框，询问信息为“请输入姓名”,将用户输入姓名存放在,name,变量中；,（,2,）同时弹出警告框，内容为：“,XX,，你好，下面开始考试。”,（,3,）在页面输出，当前日期。,45,练习,3,参考,var name;,name=prompt(,请输入你的名字,);,alert(name+,你好，下面开始考试！,);,var date=new Date();,document.write(date);,46,事件 例,9,现在的时间是,?,47,事件 例,10,div background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;,function mOver(obj)obj.innerHTML=,谢谢,function mOut(obj)obj.innerHTML=,把鼠标移到上面,把鼠标移到上面,48,练习,4,事件练习,在页面中设计个高宽都为,100px,的黄色块，当鼠标悬停在上面的时候，块内出现文本“你好！”当鼠标离开的时候，块内的文本消失。,49,