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