Ajax技术及应用实训报告.docx

《Ajax技术及应用实训报告.docx》由会员分享，可在线阅读，更多相关《Ajax技术及应用实训报告.docx（11页珍藏版）》请在冰豆网上搜索。

Ajax技术及应用实训报告

Ajax技术及应用实训报告

小组：

八小组

学号：

201205160203

班级：

过程控制122班

姓名：

曹玮

二零零四年五月十九日

实训报告

一、实训科目：

javascript语言与Ajax技术及应用实训

二、实训时间：

2014年3月10日——2014年3月21日

三、实训地点：

兰州石化职业技术学院西区信控系实训基地四机房

四、实训人员：

指导教师：

李模刚

学生：

曹玮

五、实训目的：

通过该实训，让学生深入学习JavaScript，学会运用Ajax技术，了解Ajax技术应用，理解网站的设计方法，了解一个网站的开发过程，培养网站开发的相关经验。

六、实训要求：

开发出一个可发布实训作业网站，要求每个学生必须熟悉并读懂每个程序的源代码，每个源文件代码，熟悉每个网页界面，熟悉整个开发过程；运用JavaScript，Ajax技术，完成网站设计。

设计说明书中的代码必须为实际调试过程中的源代码，界面等等。

七、实训任务

1.面向对象程序设计实例

·用不同的方式创建Boolean对象的实例，并使用typeof操作符返回其类型。

······

varboolA=newBoolean（）;

varboolB=newBoolean（false）;

······

document.write（"boolA="+boolA+"类型：

"+typeof（boolA））;

document.write（"boolB="+boolB+"类型：

"+typeof（boolB））;

······

······

小结：

使用常见系统对象以及这些对象的属性和方法，创建对象，对象方法和属性的使用。

2.文档对象模型的应用

·文档结构树

······

我的链接

我的标题

······

3.事件处理运用

·浏览器中的事件

······

window.onload=functiondd（）{

varoNewP=document.createElement（"p"）;

varoText=document.createTextNode（"浏览器载入了文档!

"）;

oNewP.appendChild（oText）;

document.body.appendChild（oNewP）;

}

window.onfocus=functiondd（）{

varoNewP=document.createElement（"p"）;

varoText=document.createTextNode（"浏览器取得了焦点!

"）;

oNewP.appendChild（oText）;

document.body.appendChild（oNewP）;

}

······（焦点取消，自编）

······

4.浏览器对象模型的应用

·三种对话框使用

······

alert（"GoodMorning!

"）;

prompt是一个询问框，它产生一个询问输入窗口，同时等待用户输入的结果，

alert（"Hello,"+prompt（"What'syourname?

"）+"!

"）;

if（confirm（"Areyouok?

"））

alert（"Great!

"）;

else

alert（"oh,what'swrong?

"）;

······

5.JavaScript库的应用

······

window.onload=function（）{

varcal=newYAHOO.widget.Calendar（"cal1","cal1Container"）;

cal.render（）;

}······

6.动画效果网页的应用

·动画队列

······

.demo{

background-color:

gray;

color:

White;

top:

50px;

width:

200px;

position:

absolute;

}

functionEffect（options）{

varele=options.element;

if（typeof（ele）=="string"）ele=document.getElementById（options.element）;

if（!

ele）returnfalse;

varfps=30;

varstep=0;

vartotalSteps=options.duration/1000*fps;

varinterval=（options.begin-options.end）/totalSteps;

varintId;

functionanimate（）{

varnewValue=options.begin-（step*interval）;

if（options.onStart&&step==0）options.onStart（）;

if（options.onStep）options.onStep（）;

if（step++

ele.style[options.prop]=Math.ceil（newValue）+"px";

}else{

ele.style[options.prop]=options.end+"px";

if（options.onEnd）options.onEnd（）;

Methods.stop（）;

}

}

varMethods={

start:

function（）{

intId=setInterval（animate,1000/30）;

},

stop:

function（）{

clearInterval（intId）;

},

reStart:

function（）{

step=0;

ele.style[options.prop]=options.begin+"px";

},

end:

function（）{

step=totalSteps;

ele.style[options.prop]=options.end+"px";

}

};

······

varef2=newEffect（options2）;

varoptions3={

element:

"d3",

prop:

"top",

begin:

50,

end:

200,

duration:

500

};

varef3=newEffect（options3）;

vara1=document.getElementById（"a1"）;

a1.onclick=function（）{

ef1.start（）;//启动第一个动画

}

}

开始

动画效果