第4章JavaScript语言基础

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,4,章,JavaScript,语言基础,第,4,章,JavaScript,语言基础,本章主要内容包括：,4.1 JavaScript,简 介,4.2 JavaScript,函 数,4.3 JavaScript,事件,4.4 JavaScript,对象化编程,4.5,访问文档对象,4.6,用,VS2008,编辑与调试,JavaScript,4.7 JavaScript,实例,4.1 JavaScript,简 介,4.1.1,将,JavaScript,插入网页,使用,标签在网页中插入,JavaScript,代码，插入方法如下：,document.write,(,我是菜鸟我怕谁,!);,language=“,javascript,”,表示使用,JavaScript,脚本语言,document.write,用来输出内容,4.1.2,插入,JavaScript,的位置,JavaScript,脚本在网页中的位置：,（,1,）放在,body,标记里的脚本在网页读取到该语句时就会执行。,（,2,）放在,head,标记里的脚本在被调用时才会执行。通常是在,.,中定义函数，通过调用函数来执行该脚本。,（,3,）可以添加外部脚本文件，其后缀通常为,.,js,，添加方法如下：,4.1.3 JavaScript,语句,在,JavaScript,中，一行的结束就被认定为语句的结束。最好还是在结尾加上一个英文半角分号“,;”,，示例如下：,document.write,(This is a header);,document.write,(This is a paragraph);,4.1.4 JavaScript,注释,1,单行注释,插入单行注释的符号是：“,/”,。,2,多行注释,多行注释以“,/*”,开始，以“*,/”,结束。,3,HTML,注释标记,是,HTML,注释标记，对于,标记中符合,JavaScript,语法规则的内容仍然会执行，否则会被注释掉，示例如下：,/*,简单的例子,说明三种注释的使用,*,/,4.1.5 JavaScript,弹出框,1,警告（,alert,）,alert(),的方法以对话框显示信息，并有一个“确定”按钮。,2,确认（,confirm,）,确认框用于作出选择：“是”或“不是”。,confirm(),有两种取值：,true,或,false,。例：,var,r=confirm(,你是学生吗,);,if(r=true),document.write,(,是,);,else,document.write,(,不是,);,3,提问（,prompt,）,prompt,和,confirm,类似，不过它允许访客输入回答内容，例：,var,name=prompt(,请输入你的姓名：,),document.write,(,欢迎你！,+name),prompt(),可以给出初始值，格式如下：,prompt(,提示信息,初值,),4.2 JavaScript,函 数,4.2.1,定义函数,定义函数的格式如下：,function,函数名,(),函数代码,;,编写两数相加的简单函数，函数的名字为,add,，如下：,function add(),sum=1+1;,alert(sum,);,4.2.2,函数的调用,可以通过多种方法调用函数，最简单的函数调用方式：按钮的单击事件。,通过,button,按钮的鼠标单击事件,onclick,调用,add(),函数，代码如右边：,function add(),sum=1+1;,alert(sum,);,4.3 JavaScript,事件,JavaScript,有很多事件，例如：鼠标单击、移动，网页的载入和关闭。,4.3.1,单击事件,4.3.2,鼠标经过、移出事件,使用鼠标经过事件调用函数的代码如下：,鼠标滑过调用函数,当鼠标经过按钮时，触发,onmouseover,事件，调用函数,displaymessage,(),。,使用鼠标移出事件调用函数的代码如下：,鼠标移出调用函数,鼠标移动到这个按钮中，当再移动出去时，触发,onmouseout,事件，调用函数,displaymessage,(),。,4.3.3,其他事件,P(35),4.4 JavaScript,对象化编程,JavaScript,对象有基本对象、全局对象、文档对象,;,对象有它自己的属性、方法和事件。,引用对象的属性、方法和事件用“,.”,这种方法。,4.4.1,基本对象,4.4.4.1 String,字符串对象,声明一个字符串对象的方法：,var,s=,我有个美好的愿望,;,访问其,length,属性的方法。,var,L=,s.length,；,/,返回该字符串的长度。,字符串对象的方法：,indexOf,(),：,indexOf,(,),；该方法从,中查找,（如果给出,就忽略之前的位置），如果找到了，就返回它的位置，没有找到就返回,-1,。所有的“位置”都是从零开始的。,4.4.1.2 Array,数组对象,数组的定义方法：,var,=new Array();,使用数组元素：,=.;,在定义数组时直接初始化数据：,var,=new Array(,.);,例如：,var,myArray,=new Array(1,4.5,Hi);,定义时指定有,n,个空元素的数组：,var,a=new,Array(n,);,4.4.1.3 Math,数学对象,Math,对象提供对数据的数学计算，对象使用格式：“,Math.”,。,方法：,abs(x,),：返回,x,的绝对值。,max(a,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,日期对象,定义一个日期对象：,var,d=new Date();,Date,日期对象方法的使用格式为,:,“.”,。,方法,getXXX,(),是获得某个数值，方法,setXXX,(),是设定某个数值。,get/,setFullYear,(),：返回,/,设置年份，用,4,位数表示。,get/,setYear,(),：返回,/,设置年份，用,2,位数表示。,get/,setMonth,(),：返回,/,设置月份，,0,表示,1,月。,get/,setDate,(),：返回,/,设置日期。,get/,setDay,(),：返回,/,设置星期几，,0,表示星期天。,get/,setHours,(),：返回,/,设置小时数，,24,小时制。,get/,setMinutes,(),：返回,/,设置分钟数。,get/,setSeconds,(),：返回,/,设置秒钟数,。,下面的例子显示当前日期,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(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,全局对象,全局对象就是一些全局函数，可以直接使用。,eval,(),：把字符串当作标准语句或表达式来运行。例如：,b=2+5*2;,var,a=,eval(b,);,isNaN,(),：如果括号内的值是,NaN,（不是数字），则返回,true,，否则返回,false,。,parseInt,(),：把括号内的内容转换成整数。,如果是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回,NaN,。,parseFloat,(),：把括号内的字符串转换成浮点数，,如果字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回,NaN,。,toString,(),：,.,toString,(),；把对象转换成字符串。,4.4.3,文档对象,文档对象是指在网页文档里划分出来的对象。,主要对象：,window,、,document,、,location,、,navigator,、,screen,、,history,等。,这些文档对象组成一个文档对象模型（,Document Object Model,，,DOM),，,DOM,结构如图所示。,要引用某个对象，就要把父级的对象都列出来。,例如，要引用表单,MyForm,的文本框,UserName,，就要用,document.MyForm.UserName,4.4.3.1 window,对象,window,窗口对象是最大的对象，它描述的是一个浏览器窗口。,在引用它的属性和方法时，一般不需要用,window.xxx,这种形式，而直接使用,xxx,。,1,window,对象的方法,（,1,）,open(),方法：打开一个窗口。,用法：,open(,页面地址,窗口名称,窗口风格,);,页面地址：表示要打开的网页地址。如果用单引号（,），则不打开任何网页。,窗口名称：表示被打开的窗口的名称（,window.name,），可以使用,_top,、,_blank,等内建名称。,窗口风格：表示被打开的窗口的样式。如果只需要打开一个普通窗口，该字符串用单引号（,），如果要指定样式，就在字符串里写上一到多个参数，参数之间用逗号隔开。,例如，打开一个,400100,的干净窗口。,open(,_,blank,width,=400,height=100,menubar=,no,toolbar,=no,location=,no,directories,=,no,status,=,no,scrollbars,=,yes,resizable,=yes),open(),方法有返回值，返回的就是它打开的窗口对象,（,2,）,close(),：关闭一个已打开的窗口。,用,window.close,(),或,self.close,(),关闭本窗口；,用,.close(),关闭指定的窗口。,（,3,）延时方法,setTimeout,(),和,setInterval,(),。,两个方法都可以用来实现在一个固定时间段之后执行,JavaScript,。但两者各有各的应用场景。,相同：都有两个参数：一个是将要执行的代码字符串；一个是以毫秒为单位的时间间隔，当过了指定“时间间隔”之后就将执行“代码字符串”。,区别：,setInterval,在执行完一次代码之后，经过固定的时间间隔，它还会自动重复执行代码，而,setTimeout,只执行一次那段代码。,使用,setInterval,每隔,5,秒钟就显示一次时间，代码如下：,setInterval(showTime,(),5000);,function,showTime,(),var,today=new Date();,alert(The,time is:+,today.toString,();,用,setInterval,命令创建的对象，可以用,clearInterval,(),命令终止。例如：,var,MyMar,=,setInterval(showTime(),speed,);,clearInterval(MyMa