javascript课程设计报告总结(javascript教学设计)
对JavaScript的认识和经验
1:学习无重点，js应该从实践中去学，例如常用到表单验证，这里就涉及到事件，正则等内容，还有就是常用的动画特效，当做网页需要实现某些功能时，再考虑js的实现，网上资料很多，很容易就能看懂的，想要一次性全部学懂了再去做网站，就没必要了。
2：函数无非就是逻辑能力的问题，假设你要实现一个手风琴之类的效果，那么你就要先分析逻辑，就跟学c语言一样，当你逻辑理顺了，那么代码无非就是if。。。else加上一些预定义的函数就能实现了，你要是逻辑都不理解，那自然就不知道什么时候该动态改变样式。
3：JSON Cookies Ajax XML，只要是涉及到后台交互，这些都必须要会的，Ajax就容易多了，因为模板都是固定的，json格式很容易理解，把如何调用深入学习下就差不多了。前台cookies我不太懂，我做网页都是后台java代码对cookie操作的。
4：dw和js没什么结合的事项，能导入html正常运行就可以了。
5：工作的时候，要自己写js是很正常的事情，比较网上功能是很全，但是不一定是你需要的效果，而且在公司做网页是根据设计图来做，所以就需要你自己写出设计图的效果。
6:也没啥流程，一整个网站全给你做都是正常的，至于具体先做什么，也是你根据自己能力来做，如果你去的公司只有你一个前端开发人员，那么只需要你按时完工就行了。
7：勤能补拙。
《网页设计》实验报告
1、
设计由多个网页组成的小型网站，自选主题，要求积极、健康，不得从网络上下载；
2、
构建本地站点，创建站点目录；
3、
站点目录中各种文件分类存放，文件命名
科学
，网站不少于10个页面；
4、
整个网站内容大小不超过20M；
5、
网页版面采用表格布局；
6、
网页中引入CSS
样式表
技术。
7、
超级链接的都可正确点通；
8、
网页中需添加如
动画
、
音频
、视频等多媒体元素；
9、
栏目设计合理，页面
文字
充实，图文并茂。
10、
使用动态页面效果，如
时间轴动画
、弹出信息、弹出菜单等；
11、
可根据个人能力和兴趣使用数据库，ASP，JSP，PHP等网页技术。
实验报告
应包涵以下几个部分：
1、实验说明：说明网战在设计所应用的技术，站点下各目录、各文件；素材的收集途径等；
2、实验步骤：详细阐述网页设计整体
流程
和其中各个环节的操作步骤；
3、实验心得。
制作一个时钟显示程序
脚本说明:
第一步：把如下代码加入body区域中
SCRIPT language=javascript
var dot=65
rads=new Array(65)
function rad () {
for (i=1; idot; i++) {
if (document.all) rads[i]=new Array (eval('rad'+i).style,-100,-100)
else rads[i] = new Array (eval('document.rad'+i),-100,-100)
}
}
function setCircle() {
for (i=1; idot; i++) {
rads[i][0].left=rads[i][1]+pX-15
if (document.layers) rads[i][0].left+=10
rads[i][0].top=rads[i][2]+pY-20
//if (document.layers) rads[i][0].top-=5
}
}
function counter() {
for (i=1; idot; i++) {
rad=Math.PI*(i/((dot-1)/2))
rads[i][1] = Math.sin(rad)*60;
rads[i][2] = -Math.cos(rad)*60;
}
setCircle()
}
pX=400;pY=150
obs = new Array(13)
function ob () {
for (i=0; i13; i++) {
if (document.all) obs[i]=new Array (eval('ob'+i).style,-100,-100)
else obs[i] = new Array (eval('document.ob'+i),-100,-100)
}
}
function cl(a,b,c){
if (document.all) {
if (a!=0) b+=-1
eval('c'+a+'.style.pixelTop='+(pY+(c-5)))
eval('c'+a+'.style.pixelLeft='+(pX+(b)))
}
else{
if (a!=0) b+=10
eval('document.c'+a+'.top='+(pY+(c)))
eval('document.c'+a+'.left='+(pX+(b)))
}
}
function runClock() {
for (i=0; i13; i++) {
obs[i][0].left=obs[i][1]+pX
obs[i][0].top=obs[i][2]+pY
}
}
var lastsec
function timer() {
time = new Date ()
sec = time.getSeconds()
if (sec!=lastsec) {
lastsec = sec
sec=Math.PI*sec/30
min=Math.PI*time.getMinutes()/30
hr =Math.PI*((time.getHours()*60)+time.getMinutes())/360
for (i=1;i6;i++) {
obs[i][1] = Math.sin(sec) * (44 - (i-1)*11)-16;
if (document.layers)obs[i][1]+=10;
obs[i][2] = -Math.cos(sec) * (44 - (i-1)*11)-27;
}
for (i=6;i10;i++) {
obs[i][1] = Math.sin(min) * (40 - (i-6)*10)-16;
if (document.layers)obs[i][1]+=10;
obs[i][2] = -Math.cos(min) * (40 - (i-6)*10)-27;
}
for (i=10;i13;i++) {
obs[i][1] = Math.sin(hr) * (37 - (i-10)*11)-16;
if (document.layers)obs[i][1]+=10;
obs[i][2] = -Math.cos(hr) * (37 - (i-10)*11)-27;
}
}
}
function setNum(){
cl (0,-67,-65);
cl (1,10,-51);
cl (2,28,-33);
cl (3,35,-8);
cl (4,28,17);
cl (5,10,35);
cl (6,-15,42);
cl (7,-40,35);
cl (8,-58,17);
cl (9,-65,-8);
cl (10,-58,-33);
cl (11,-40,-51);
cl (12,-16,-56);
}
/SCRIPT
DIV id=c0
style="HEIGHT: 128px; LEFT: 38px; POSITION: absolute; TOP: -119px; WIDTH: 686px; Z-INDEX: 2"/DIV
DIV id=c1
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"B1/B
/DIV
DIV id=c2
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"B2/B
/DIV
DIV id=c3
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"B3/B
/DIV
DIV id=c4
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"B4/B
/DIV
DIV id=c5
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"B5/B
/DIV
DIV id=c6
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"B6/B
/DIV
DIV id=c7
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"B7/B
/DIV
DIV id=c8
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"B8/B
/DIV
DIV id=c9
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"B9/B
/DIV
DIV id=c10
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"B10/B
/DIV
DIV id=c11
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"B11/B
/DIV
DIV id=c12
style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"B12/B
/DIV
DIV id=ob0 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 1"
/DIV
DIV id=ob1
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#0000ff size=+3B./B/FONT /DIV
DIV id=ob2
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#0000ff size=+3B./B/FONT /DIV
DIV id=ob3
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#0000ff size=+3B./B/FONT /DIV
DIV id=ob4
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#0000ff size=+3B./B/FONT /DIV
DIV id=ob5
style="HEIGHT: 32px; LEFT: -35px; POSITION: absolute; TOP: -4px; WIDTH: 742px; Z-INDEX: 8"FONT
color=#0000ff size=+3B./B/FONT /DIV
DIV id=ob6
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#00ffff size=+3B./B/FONT /DIV
DIV id=ob7
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#00ffff size=+3B./B/FONT /DIV
DIV id=ob8
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#00ffff size=+3B./B/FONT /DIV
DIV id=ob9
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#00ffff size=+3B./B/FONT /DIV
DIV id=ob10
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 6"FONT
color=#ff0000 size=+3B./B/FONT /DIV
DIV id=ob11
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 6"FONT
color=#ff0000 size=+3B./B/FONT /DIV
DIV id=ob12
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 6"FONT
color=#ff0000 size=+3B./B/FONT /DIV
DIV id=rad0 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 1"
/DIV
DIV id=rad1
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad2
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad3
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad4
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad5
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad6
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad7
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad8
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad9
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad10
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad11
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad12
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad13
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad14
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad15
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad16
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad17
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad18
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad19
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad20
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad21
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad22
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad23
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad24
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad25
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad26
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad27
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad28
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad29
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad30
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad31
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad32
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad33
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad34
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad35
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad36
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad37
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad38
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad39
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad40
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad41
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad42
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad43
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad44
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad45
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad46
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad47
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad48
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad49
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad50
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad51
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad52
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad53
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad54
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad55
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad56
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad57
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad58
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad59
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad60
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad61
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"FONT
color=#000000B./B/FONT /DIV
DIV id=rad62
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad63
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
DIV id=rad64
style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"FONT
color=#000000B./B/FONT /DIV
第二步：把body中的内容改为：
body onload="rad();counter();ob();setNum();setInterval('timer()',100);setInterval('runClock()',100)"
您可以登录我们的网站：（网站地址点击我们的百度账号名进入在我们的简介中有网址和我们的联系方式）点击在线客服专员为您指导一下
JavaScript与WEB前台开发课程实训总结怎么写
1 摘要：写一下网站的简介，开发采用了什么技术等。
2 目录。
3 技术介绍：介绍JavaScript和web前端相关的技术，可以去摘抄的多一点，让内容显得饱满充实。
4 网站整体设计：采用画图工具绘制网站的架构图，跟做数据表设计差不多的类型，并且对整体架构做一个详细的文字说明。
5 网站模块详情设计：详细介绍每个页面的每个功能，以及实现的过程，附上截图，主要的源码即可。
6 调试bug：实训过程中出现的问题记录下来，包括解决方案。
7 附录：心得体会、源码（可要可不要）等一堆东西。