JavaScript(课件).ppt

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