《JavaScript语言基础.ppt》由会员分享，可在线阅读，更多相关《JavaScript语言基础.ppt（24页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第4章 JavaScript语言基础 第4章 JavaScript语言基础v本章主要内容包括：4.1 JavaScript 简 介4.2 JavaScript 函 数4.3 JavaScript事件4.4 JavaScript对象化编程4.5 访问文档对象4.6 用VS2008编辑与调试JavaScript4.7 JavaScript实例4.1 JavaScript 简 介v4.1.1 将JavaScript插入网页 使用标签在网页中插入JavaScript代码，插入方法如下：document.write(我是菜鸟我怕谁!);language=“javascript”表示使用JavaScrip
2、t脚本语言 document.write用来输出内容 v4.1.2 插入JavaScript的位置JavaScript脚本在网页中的位置：（1）放在body标记里的脚本在网页读取到该语句时就会执行。（2）放在head标记里的脚本在被调用时才会执行。通常是在.中定义函数，通过调用函数来执行该脚本。（3）可以添加外部脚本文件，其后缀通常为.js，添加方法如下：v4.1.3 JavaScript语句在JavaScript中，一行的结束就被认定为语句的结束。最好还是在结尾加上一个英文半角分号“;”，示例如下：document.write(This is a header);document.write
3、(This is a paragraph);v4.1.4 JavaScript注释1单行注释 插入单行注释的符号是：“/”。2多行注释 多行注释以“/*”开始，以“*/”结束。3HTML注释标记 是HTML注释标记，对于标记中符合JavaScript语法规则的内容仍然会执行，否则会被注释掉，示例如下：/*简单的例子 说明三种注释的使用 */v4.1.5 JavaScript弹出框 v1警告（alert）alert()的方法以对话框显示信息，并有一个“确定”按钮。v2确认（confirm）确认框用于作出选择：“是”或“不是”。confirm()有两种取值：true或false。例：var r=c
4、onfirm(你是学生吗);if(r=true)document.write(是);else document.write(不是);v3提问（prompt）prompt和confirm类似，不过它允许访客输入回答内容，例：var name=prompt(请输入你的姓名：,)document.write(欢迎你！,+name)prompt()可以给出初始值，格式如下：prompt(提示信息,初值)4.2 JavaScript 函 数v4.2.1 定义函数定义函数的格式如下：function 函数名()函数代码;编写两数相加的简单函数，函数的名字为add，如下：function add()sum=
5、1+1;alert(sum);v4.2.2 函数的调用可以通过多种方法调用函数，最简单的函数调用方式：按钮的单击事件。通过button按钮的鼠标单击事件onclick调用add()函数，代码如右边：function add()sum=1+1;alert(sum);4.3 JavaScript事件 JavaScript有很多事件，例如：鼠标单击、移动，网页的载入和关闭。v4.3.1 单击事件v4.3.2 鼠标经过、移出事件使用鼠标经过事件调用函数的代码如下：鼠标滑过调用函数 当鼠标经过按钮时，触发onmouseover事件，调用函数displaymessage()。使用鼠标移出事件调用函数的代码
6、如下：鼠标移出调用函数 鼠标移动到这个按钮中，当再移动出去时，触发onmouseout事件，调用函数displaymessage()。v4.3.3 其他事件P(35)4.4 JavaScript对象化编程vJavaScript对象有基本对象、全局对象、文档对象;v对象有它自己的属性、方法和事件。v引用对象的属性、方法和事件用“.”这种方法。4.4.1 基本对象4.4.4.1 String 字符串对象声明一个字符串对象的方法：var s=我有个美好的愿望;访问其length属性的方法。var L=s.length；/返回该字符串的长度。字符串对象的方法：indexOf()：indexOf(,)；
7、该方法从中查找（如果给出就忽略之前的位置），如果找到了，就返回它的位置，没有找到就返回-1。所有的“位置”都是从零开始的。4.4.1.2 Array数组对象数组对象v数组的定义方法：var =new Array();v使用数组元素：=.;v在定义数组时直接初始化数据：var =new Array(,.);例如：var myArray=new Array(1,4.5,Hi);v定义时指定有n个空元素的数组：var a=new Array(n);4.4.1.3 Math数学对象数学对象vMath对象提供对数据的数学计算，对象使用格式：“Math.”。v方法：abs(x)：返回x的绝对值。max(a
8、,b)：返回a、b中较大的数。min(a,b)：返回a、b中较小的数。pow(n,m)：返回n的m次幂（nm）。random()：返回大于0小于1的一个随机数。round(x)：返回x四舍五入后的值。sin(x)：返回x的正弦。.4.4.1.4 Date日期对象日期对象v定义一个日期对象：var d=new Date();vDate日期对象方法的使用格式为:“.”。方法getXXX()是获得某个数值，方法setXXX()是设定某个数值。get/setFullYear()：返回/设置年份，用4位数表示。get/setYear()：返回/设置年份，用2位数表示。get/setMonth()：返回/
9、设置月份，0表示1月。get/setDate()：返回/设置日期。get/setDay()：返回/设置星期几，0表示星期天。get/setHours()：返回/设置小时数，24小时制。get/setMinutes()：返回/设置分钟数。get/setSeconds()：返回/设置秒钟数。v下面的例子显示当前日期today=new Date();var day;var date;if(today.getDay()=0)day=星期日if(today.getDay()=1)day=星期一if(today.getDay()=2)day=星期二if(today.getDay()=3)day=星期三if
10、(today.getDay()=4)day=星期四if(today.getDay()=5)day=星期五if(today.getDay()=6)day=星期六 date=今天是+(today.getYear()+年+(today.getMonth()+1)+月 +today.getDate()+日 +day+;document.write(date);4.4.2 全局对象全局对象就是一些全局函数，可以直接使用。veval()：把字符串当作标准语句或表达式来运行。例如：b=2+5*2;var a=eval(b);visNaN()：如果括号内的值是NaN（不是数字），则返回true，否则返回fal
11、se。vparseInt()：把括号内的内容转换成整数。如果是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回NaN。vparseFloat()：把括号内的字符串转换成浮点数，如果字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回NaN。vtoString()：.toString()；把对象转换成字符串。4.4.3 文档对象v文档对象是指在网页文档里划分出来的对象。v主要对象：window、document、location、navigator、screen、history等。v这些文档对象组成一个文档对象模型（Document Object Model，DOM)，D
12、OM结构如图所示。要引用某个对象，就要把父级的对象都列出来。例如，要引用表单MyForm的文本框UserName，就要用document.MyForm.UserName 4.4.3.1 window对象 window 窗口对象是最大的对象，它描述的是一个浏览器窗口。在引用它的属性和方法时，一般不需要用window.xxx这种形式，而直接使用xxx。v1window对象的方法（1）open()方法：打开一个窗口。用法：open(页面地址,窗口名称,窗口风格);页面地址：表示要打开的网页地址。如果用单引号（），则不打开任何网页。窗口名称：表示被打开的窗口的名称（window.name），可以使用_
13、top、_blank等内建名称。窗口风格：表示被打开的窗口的样式。如果只需要打开一个普通窗口，该字符串用单引号（），如果要指定样式，就在字符串里写上一到多个参数，参数之间用逗号隔开。例如，打开一个 400100的干净窗口。open(,_blank,width=400,height=100,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes)open()方法有返回值，返回的就是它打开的窗口对象 v（2）close()：关闭一个已打开的窗口。用window.close()或
14、self.close()关闭本窗口；用.close()关闭指定的窗口。v（3）延时方法setTimeout()和setInterval()。两个方法都可以用来实现在一个固定时间段之后执行JavaScript。但两者各有各的应用场景。相同：都有两个参数：一个是将要执行的代码字符串；一个是以毫秒为单位的时间间隔，当过了指定“时间间隔”之后就将执行“代码字符串”。区别：setInterval在执行完一次代码之后，经过固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。使用setInterval每隔5秒钟就显示一次时间，代码如下：setInterval(showTime(
15、),5000);function showTime()var today=new Date();alert(The time is:+today.toString();用setInterval命令创建的对象，可以用 clearInterval()命令终止。例如：var MyMar=setInterval(showTime(),speed);clearInterval(MyMar);2window对象的属性v（1）closed和opener属性。closed属性可以判断一个窗口是否已经被关闭。如果一个窗口是通过open()方法打开的，在opener中存放的是打开的它的父窗口，通过opener属性
16、可以操纵它的父窗口。父窗口可以通过open()方法的返回值和子窗口发生联系。例如，通过opener属性可以获取父窗口的属性信息：alert(opener.name);v下面的语句可以判断一个窗口的父窗口是否已经被用户关闭。if (window.opener.closed)document.write(父窗口已经被关闭);else document.write(父窗口还没有被关闭);v（2）defaultStatus和status属性。defaultStatus属性的值是浏览器状态栏默认的显示信息，status属性是状态栏中当前显示的信息。4.4.3.2 history对象4.4.3.3 loc
17、ation对象4.4.3.4 document对象vdocument文档对象描述当前窗口或指定窗口对象的文档。它包含文档从到的内容。vwrite()方法向文档写入数据，所写入的内容会被当成标准HTML文档处理。网站弹出式通知窗口例子：!-var whatsNew=open(,_blank,top=50,left=50,width=200,height=300,+menubar=no,toolbar=no,directories=no,location=no,+status=no,resizable=no,scrollbars=yes);whatsNew.document.write(最新通知);whatsNew.document.write(通知日期：2009.09.01);whatsNew.document.write(祝贺三（1）班开通班级网站！);whatsNew.document.write(+关闭窗口);whatsNew.document.close();-4.5 访问文档对象4.6 用VS2008编辑与调试JavaScript4.7 JavaScript实例