太原理工大学Web程序设计基础-第三章高级Javascript

1、1,The JavaScript Language,田玉玲,2,基于对象的JavaScript语言,3,基于对象的JavaScript语言,4,基于对象的JavaScript语言,5,有关对象操作语句,6,Example,函数是显示数组中的内容,7,Example,函数是显示数组中的内容,8,有关对象操作语句,9,有关对象操作语句,10,有关对象操作语句,11,有关对象操作语句,12,对象属性的引用,13,对象属性的引用,通过通过对点（.）运算符操作对属性赋值,14,对象属性的引用,15,对象属性的引用,16,对象方法的引用,17,常用对象的属性和方法,18,常用对象的属性和方法,19,常用对

2、象的属性和方法,string 对象的属性 该对象只有一个属性length，它表明字符串中的字符个数，包括所有符号。,20,Example, var str=China is great! document.write(+str+) document.write(str.length) ,Example16.html,21,常用对象的属性和方法,string 对象的方法 该对象的方法共有19个。主要用于有关字符串在Web页面这显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换.,22,Example, var txt=China is great! document.write(+txt.

3、fontcolor()+) document.write(+txt.fontcolor(red)+) document.write(+txt.fontcolor(blue)+) document.write(+txt.fontcolor(green)+) ,Example17.html,Fontcolor()方法-字体颜色方法,23,Example, var str=China is great! var pos=str.indexOf(great) if(pos=0) document.write(great found at position:) document.write(pos+)

4、else document.write(great not found!) ,Example18.html,从指定位置开始搜索great第一次出现的位置,24,Example, var str=China is great! document.write(str.match(great) This example tests if a string contains a specified word. If the word is found it returns the word. ,Example19.html,25,常用对象的属性和方法,算术函数的math对象静态对象 主要属性和方法 m

5、ath中提供了6个属性 绝对值：abs() 正弦余弦值：sin(), cos() 正切反正切：tan(), atan() 四舍五入：round() 平方根：sqrt() 基于几个方次的值:Pow (base, exponent),26,常用对象的属性和方法,日期及事件对象date动态性，即必须使用New运算符创建一个实例。 MyDate=New Date() Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。,27,获取日期的时间方法,常用对象的属性和方法,getYear ():返回年数 getMonth():返回当月号数 getDate():返回当日号数 getDay()

6、:返回星期几 getHours():返回小时数 getMinutes():返回分种数 getSeconds ():返回秒数 getTime():返回分钟数,28,设置日期和时间： setYear():设置年 setDate():设置当月号数 setMonth():设置当月份数 setHours():设置小时数 setMinutes():设置分种数 setSeconds():设置秒数 setTime设置毫秒数,常用对象的属性和方法,29,常用对象的属性和方法,Javascript有一个计算时间的函数 SetTimeout。SetTimeout让函数在一定的时间段内重新执行。 SetTimeout

7、（函数名，时间间隔，重复次数）； 时间间隔 单位是毫秒 重复次数 是大于0的数值,30,Example, function hello() alert(hello); setTimeout(hello();,2000); ,Example25.html,31,Example,在页面上显示时间 把时间写在表单中，每秒刷新一次时间 setTimeout让函数在一定的时间段内重新执行。 clearTimeout清除已设置的setTimeout对象。,32, var timer = null function stop() clearTimeout(timer) function start() va

8、r time = new Date() var hours =time.getHours() var minutes =time.getMinutes() minutes=(minutes ,Example26.html,33,常用对象的属性和方法,The Array object is used to store a set of values in a single variable name . Each value is an element of the array and has an associated index number . You create an instance

9、 of the Array object with the “new” keyword.,34,Example, var famname = new Array(6) famname0=Jan Egil famname1=Tove famname2=Hege famname3=Stale famname4=Kai Jim famname5=Borge for(i=0;i) ,Example27.html,35,Example, var famname = new Array(3) famname0=Jani famname1=Tove famname2=Hege document.write(

10、famname.length+) document.write(famname.join(.)+) document.write(famname.reverse()+) document.write(famname.push(Olx)+) document.write(famname.pop()+) document.write(famname.shift()+) ,Example29.html,用“.”将数组元素连接为字符串,将数组元素顺序倒转,将”Olx”加入到数组尾，然后返回新长度,删除并返回数组最后一个元素,删除并返回数组第一个元素,36,在JavaScript中创建新对象,在Java

11、Script中创建一个新的对象是十分简单的。首先它必须定义一个对象，而后再为该对象创建一个实例。这个实例.就是一个新对象，它具有对象定义中的基本特征。 对象的定义 JavaScript对象的定义，其基本格式如下： Function Object（属性表） Tp1=prop1 Tp2=prop2 This.meth=FunctionName1; This.meth=FunctionName2; ,37,在JavaScript中创建新对象,Function university(name, city, creatDate, URL) T=name Thi

12、s.city=city This.creatDate=New Date(creatDate) This.URL=URL this.showuniversity=showuniversity; function showuniversity() for (var prop in this ) alert (prop+=“+thisprop+”);,38,在JavaScript中创建新对象,39,HTML DOM对象,40,HTML DOM对象,41,HTML DOM对象,代表整个HTML文档，用来访问页面中的所有元素,包含客户端浏览器的信息。,包含了浏览器窗口访问过的URL,包含了当前URL的信

13、息。,42,JavaScript HTML DOM对象,43,JavaScript HTML DOM对象,document对象中的attribute属性,44,45,Example, Test document.write(document.domain+) document.write(document.title+) document.write(document.url+) document.write(document.lastModified+) ,Example30.html,46,Example, function ChangeColor() document.body.bgCo

14、lor=yellow Click on this document! ,Example31.html,47,JavaScript HTML DOM对象,document对象中的method,48,49,Example, function getElement() var x=document.getElementById(myHeader) alert(I am a +x.tagName+ element) Click to see what element I am! ,Example32.html,50,Example, function docOpen() document.open()

15、 document.write(Hello World!) ,Example33.html,51,Example, function replace() var newDoc=document.open(text/html,replace) var txt=FUN! newDoc.write(txt) newDoc.close Learning how to access the DOM is. ,Example34.html,52,JavaScript HTML DOM对象,document对象中的collection,53,Example, Name: Age: txt=This docu

16、ment contains: + document.forms.length+ forms. document.write(txt) ,Example35.html,54, Form1: Form2: You can use the forms number: document.write(The first forms name is: ) document.write(+) document.write(The second forms name is: ) document.write(+) Or, the

17、forms name: document.write(The first forms name is: ) document.write(document.getElementById(Form1).name+) document.write(The second forms name is: ) document.write(document.getElementById(Form2).name+) ,Example36.html,55,Example, document.write(This document contains: + document.images.length+ imag

18、es.) ,Example37.html,56,JavaScript HTML DOM对象,anchor对象 anchor对象指的是 标识HTML在源码中存在时产生的对象. 它包含着文档中所有的anchors信息。 连接links对象 Links对象指的是用 标记的连接一个超文本或超媒体的元素作为一个特定的URL 。,57, a:activecolor:blue function getfocus() document.getElementById(sina).focus() function losefocus() document.getElementById(sina).blur() V

19、isit ,Example38.html,58, function myTarget() document.getElementById(myAnchor).target=_blank Visit last page Try the link before and after you have pressed the button! ,Example40.html,59,JavaScript HTML DOM对象,60, function go(form) location=form.selectmenu.value -Select page- Last Page First Page Fra

20、me A ,Example41.html,61,JavaScript HTML DOM对象,62,JavaScript HTML DOM对象,63,JavaScript HTML DOM对象,64,JavaScript HTML DOM对象,65, function disp_confirm() var name=confirm(Press a button) if(name=true) document.write(You pressed the OK button!) else document.write(You pressed the Cancle button!) ,Example42.html,66, function disp_prompt() var name=prompt(Enter your name!) if(name!=null start=new Date(); function go() now=new Date(); time=(now.getTime(); time=Math.floor(time-start.getTime()/1000); iS=time%60; iM=Math.floor(ti