JavaScript课程设计总结(javascript程序设计心得体会)
JavaScript跨域总结与解决办法 什么是跨域
JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下：
首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。
特别注意两点：
第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，
第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。
接下来简单地总结一下在“前台”一般处理跨域的办法，后台proxy这种方案牵涉到后台配置，这里就不阐述了，有兴趣的可以看看yahoo的这篇文章：《JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls》
1、document.domain+iframe的设置
对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。具体的做法是可以在和两个文件中分别加上document.domain = ‘a.com’；然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况，如果你异想天开的把script.a.com的domian设为alibaba.com那显然是会报错地！代码如下：
上的a.html
document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = '';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
? ?var doc = ifr.contentDocument || ifr.contentWindow.document;
? ?// 在这里操纵b.html
? ?alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};
script.a.com上的b.html
document.domain = 'a.com';
这种方式适用于{, kuqin.com, script.kuqin.com, css.kuqin.com}中的任何页面相互通信。
备注：某一页面的domain默认等于window.location.hostname。主域名是不带www的域名，例如a.com，主域名前面带前缀的通常都为二级域名或多级域名，例如其实是二级域名。 domain只能设置为主域名，不可以在b.a.com中将domain设置为c.a.com。
问题：
1、安全性，当一个站点（b.a.com）被攻击后，另一个站点（c.a.com）会引起安全漏洞。
2、如果一个页面中引入多个iframe，要想能够操作所有iframe，必须都得设置相同domain。
2、动态创建script
虽然浏览器默认禁止了跨域访问，但并不禁止在页面中引用其他域的JS文件，并可以自由执行引入的JS文件中的function（包括操作cookie、Dom等等）。根据这一点，可以方便地通过创建script节点的方法来实现完全跨域的通信。具体的做法可以参考YUI的Get Utility
这里判断script节点加载完毕还是蛮有意思的：ie只能通过script的readystatechange属性，其它浏览器是script的load事件。以下是部分判断script加载完毕的方法。
js.onload = js.onreadystatechange = function() {
? ?if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
? ? ? ?// callback在此处执行
? ? ? ?js.onload = js.onreadystatechange = null;
? ?}
};
3、利用iframe和location.hash
这个办法比较绕，但是可以解决完全跨域情况下的脚步置换问题。原理是利用location.hash来进行传值。在url： 中的‘#helloworld’就是location.hash，改变hash并不会导致页面刷新，所以可以利用hash值来进行数据传递，当然数据容量是有限的。假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息，cs1.html首先创建自动创建一个隐藏的iframe，iframe的src指向cnblogs.com域名下的cs2.html页面，这时的hash值可以做参数传递用。cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据（由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值，所以要借助于a.com域名下的一个代理iframe；Firefox可以修改）。同时在cs1.html上加一个定时器，隔一段时间来判断location.hash的值有没有变化，一点有变化则获取获取hash值。代码如下：
先是a.com下的文件cs1.html文件：
function startRequest(){
? ?var ifr = document.createElement('iframe');
? ?ifr.style.display = 'none';
? ?ifr.src = '';
? ?document.body.appendChild(ifr);
}
function checkHash() {
? ?try {
? ? ? ?var data = location.hash ? location.hash.substring(1) : '';
? ? ? ?if (console.log) {
? ? ? ? ? ?console.log('Now the data is '+data);
? ? ? ?}
? ?} catch(e) {};
}
setInterval(checkHash, 2000);
cnblogs.com域名下的cs2.html:
//模拟一个简单的参数处理操作
switch(location.hash){
? ?case '#paramdo':
? ? ? ?callBack();
? ? ? ?break;
? ?case '#paramset':
? ? ? ?//do something……
? ? ? ?break;
}
function callBack(){
? ?try {
? ? ? ?parent.location.hash = 'somedata';
? ?} catch (e) {
? ? ? ?// ie、chrome的安全机制无法修改parent.location.hash，
? ? ? ?// 所以要利用一个中间的cnblogs域下的代理iframe
? ? ? ?var ifrproxy = document.createElement('iframe');
? ? ? ?ifrproxy.style.display = 'none';
? ? ? ?ifrproxy.src = ''; ? ?// 注意该文件在"a.com"域下
? ? ? ?document.body.appendChild(ifrproxy);
? ?}
}
a.com下的域名cs3.html
//因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值
parent.parent.location.hash = self.location.hash.substring(1);
当然这样做也存在很多缺点，诸如数据直接暴露在了url中，数据容量和类型都有限等……
4、window.name实现的跨域数据传输
文章较长列在此处不便于阅读，详细请看?window.name实现的跨域数据传输。
5、使用HTML5 postMessage
HTML5中最酷的新功能之一就是?跨文档消息传输Cross Document Messaging。下一代浏览器都将支持这个功能：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 。 Facebook已经使用了这个功能，用postMessage支持基于web的实时消息传递。
otherWindow.postMessage(message, targetOrigin);
otherWindow:?对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性；window.open的返回值；通过name或下标从window.frames取到的值。
message:?所要发送的数据，string类型。
targetOrigin:?用于限制otherWindow，“*”表示不作限制
a.com/index.html中的代码：
iframe id="ifr" src="b.com/index.html"/iframe
script type="text/javascript"
window.onload = function() {
? ?var ifr = document.getElementById('ifr');
? ?var targetOrigin = ''; ?// 若写成''效果一样 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 若写成''就不会执行postMessage了
? ?ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
/script
b.com/index.html中的代码：
script type="text/javascript"
? ?window.addEventListener('message', function(event){
? ? ? ?// 通过origin属性判断消息来源地址
? ? ? ?if (event.origin == '') {
? ? ? ? ? ?alert(event.data); ? ?// 弹出"I was there!"
? ? ? ? ? ?alert(event.source); ?// 对a.com、index.html中window对象的引用
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 但由于同源策略，这里event.source不可以访问window对象
? ? ? ?}
? ?}, false);
/script
参考文章：《精通HTML5编程》第五章——跨文档消息机制、
6、利用flash
这是从YUI3的IO组件中看到的办法，具体可见。
可以看在Adobe Developer Connection看到更多的跨域代理文件规范：ross-Domain Policy File Specifications、HTTP Headers Blacklist。
课程设计：使用JavaScript制作一个网页上的贪吃蛇游戏
html
head
title贪吃蛇 Snake v2.4/title
style
body{
font-size:9pt;
}
table{
border-collapse: collapse;
border:solid #333 1px;
}
td{
height: 10px;
width: 10px;
font-size: 0px;
}
.filled{
background-color:blue;
}
/style
/head
script
function $(id){return document.getElementById(id);}
/**************************************************************
* javascript贪吃蛇 v2.4 br /
* author: sunxing007 05/14/2009br /
* 转载请注明来自 谢谢！br /
* v2.4修正了蛇身颜色可以随着蛇前进而移动
**************************************************************/
//贪吃蛇类
var Snake = {
tbl: null,
/**
* body: 蛇身，数组放蛇的每一节，
* 数据结构{x:x0, y:y0, color:color0},
* x,y表示坐标,color表示颜色
**/
body: [],
//当前移动的方向,取值0,1,2,3, 分别表示向上,右,下,左, 按键盘方向键可以改变它
direction: 0,
//定时器
timer: null,
//速度
speed: 250,
//是否已经暂停
paused: true,
//行数
rowCount: 30,
//列数
colCount: 30,
//初始化
init: function(){
var colors = ['red','orange','yellow','green','blue','purple','#ccc'];
this.tbl = $("main");
var x = 0;
var y = 0;
var colorIndex = 0;
//产生初始移动方向
this.direction = Math.floor(Math.random()*4);
//构造table
for(var row=0;rowthis.rowCount;row++){
var tr=this.tbl.insertRow(-1);
for(var col=0;colthis.colCount;col++) {
var td=tr.insertCell(-1);
}
}
//产生20个松散节点
for(var i=0; i10; i++){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
colorIndex = Math.floor(Math.random()*7);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = colors[colorIndex];
}
}
//产生蛇头
while(true){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = "black";
this.body.push({x:x,y:y,color:'black'});
break;
}
}
this.paused = true;
//添加键盘事件
document.onkeydown= function(e){
if (!e)e=window.event;
switch(e.keyCode | e.which | e.charCode){
case 13: {
if(Snake.paused){
Snake.move();
Snake.paused = false;
}
else{
//如果没有暂停，则停止移动
Snake.pause();
Snake.paused = true;
}
break;
}
case 37:{//left
//阻止蛇倒退走
if(Snake.direction==1){
break;
}
Snake.direction = 3;
break;
}
case 38:{//up
//快捷键在这里起作用
if(event.ctrlKey){
Snake.speedUp(-20);
break;
}
if(Snake.direction==2){//阻止蛇倒退走
break;
}
Snake.direction = 0;
break;
}
case 39:{//right
if(Snake.direction==3){//阻止蛇倒退走
break;
}
Snake.direction = 1;
break;
}
case 40:{//down
if(event.ctrlKey){
Snake.speedUp(20);
break;
}
if(Snake.direction==0){//阻止蛇倒退走
break;
}
Snake.direction = 2;
break;
}
}
}
},
//移动
move: function(){
this.timer = setInterval(function(){
Snake.erase();
Snake.moveOneStep();
Snake.paint();
}, this.speed);
},
//移动一节身体
moveOneStep: function(){
if(this.checkNextStep()==-1){
clearInterval(this.timer);
alert("Game over!\nPress Restart to continue.");
return;
}
if(this.checkNextStep()==1){
var _point = this.getNextPos();
var _x = _point.x;
var _y = _point.y;
var _color = this.getColor(_x,_y);
this.body.unshift({x:_x,y:_y,color:_color});
//因为吃了一个食物，所以再产生一个食物
this.generateDood();
return;
}
//window.status = this.toString();
var point = this.getNextPos();
//保留第一节的颜色
var color = this.body[0].color;
//颜色向前移动
for(var i=0; ithis.body.length-1; i++){
this.body[i].color = this.body[i+1].color;
}
//蛇尾减一节， 蛇尾加一节，呈现蛇前进的效果
this.body.pop();
this.body.unshift({x:point.x,y:point.y,color:color});
//window.status = this.toString();
},
//探寻下一步将走到什么地方
pause: function(){
clearInterval(Snake.timer);
this.paint();
},
getNextPos: function(){
var x = this.body[0].x;
var y = this.body[0].y;
var color = this.body[0].color;
//向上
if(this.direction==0){
y--;
}
//向右
else if(this.direction==1){
x++;
}
//向下
else if(this.direction==2){
y++;
}
//向左
else{
x--;
}
//返回一个坐标
return {x:x,y:y};
},
//检查将要移动到的下一步是什么
checkNextStep: function(){
var point = this.getNextPos();
var x = point.x;
var y = point.y;
if(x0||x=this.colCount||y0||y=this.rowCount){
return -1;//触边界，游戏结束
}
for(var i=0; ithis.body.length; i++){
if(this.body[i].x==xthis.body[i].y==y){
return -1;//碰到自己的身体,游戏结束
}
}
if(this.isCellFilled(x,y)){
return 1;//有东西
}
return 0;//空地
},
//擦除蛇身
erase: function(){
for(var i=0; ithis.body.length; i++){
this.eraseDot(this.body[i].x, this.body[i].y);
}
},
//绘制蛇身
paint: function(){
for(var i=0; ithis.body.length; i++){
this.paintDot(this.body[i].x, this.body[i].y,this.body[i].color);
}
},
//擦除一节
eraseDot: function(x,y){
this.tbl.rows[y].cells[x].style.backgroundColor = "";
},
paintDot: function(x,y,color){
this.tbl.rows[y].cells[x].style.backgroundColor = color;
},
//得到一个坐标上的颜色
getColor: function(x,y){
return this.tbl.rows[y].cells[x].style.backgroundColor;
},
//用于调试
toString: function(){
var str = "";
for(var i=0; ithis.body.length; i++){
str += "x:" + this.body[i].x + " y:" + this.body[i].y + " color:" + this.body[i].color + " - ";
}
return str;
},
//检查一个坐标点有没有被填充
isCellFilled: function(x,y){
if(this.tbl.rows[y].cells[x].style.backgroundColor == ""){
return false;
}
return true;
},
//重新开始
restart: function(){
if(this.timer){
clearInterval(this.timer);
}
for(var i=0; ithis.rowCount;i++){
this.tbl.deleteRow(0);
}
this.body = [];
this.init();
this.speed = 250;
},
//加速
speedUp: function(time){
if(!this.paused){
if(this.speed+time10||this.speed+time2000){
return;
}
this.speed +=time;
this.pause();
this.move();
}
},
//产生食物。
generateDood: function(){
var colors = ['red','orange','yellow','green','blue','purple','#ccc'];
var x = Math.floor(Math.random()*this.colCount);
var y = Math.floor(Math.random()*this.rowCount);
var colorIndex = Math.floor(Math.random()*7);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = colors[colorIndex];
}
}
};
/script
body onload="Snake.init();"
/*************************************************************br /
* javascript贪吃蛇 v2.4br /
* author: sunxing007 05/14/2009br /
* 转载请注明来自 a href="";/a 谢谢！br /
**************************************************************/br /
table id="main" border="1" cellspacing="0" cellpadding="0"/table
input type="button" id="btn" value="开始/暂停" /点左边按钮或按Enter开始/暂停游戏br /
input type="button" id="reset" value="重新开始" /br /
input type="button" id="upSpeed" value="加速" /点左边按钮或按Ctrl + ↑加速br /
input type="button" id="downSpeed" value="减速" /点左边按钮或按Ctrl + ↓减速
script
$('btn').onclick = function(){
if(Snake.paused){
Snake.move();
Snake.paused = false;
}
else{
Snake.pause();
Snake.paused = true;
}
};
$("reset").onclick = function(){
Snake.restart();
this.blur();
};
$("upSpeed").onclick = function(){
Snake.speedUp(-20);
};
$("downSpeed").onclick = function(){
Snake.speedUp(20);
};
/script
/body
/html
JavaScript与WEB前台开发课程实训总结怎么写
1 摘要：写一下网站的简介，开发采用了什么技术等。
2 目录。
3 技术介绍：介绍JavaScript和web前端相关的技术，可以去摘抄的多一点，让内容显得饱满充实。
4 网站整体设计：采用画图工具绘制网站的架构图，跟做数据表设计差不多的类型，并且对整体架构做一个详细的文字说明。
5 网站模块详情设计：详细介绍每个页面的每个功能，以及实现的过程，附上截图，主要的源码即可。
6 调试bug：实训过程中出现的问题记录下来，包括解决方案。
7 附录：心得体会、源码（可要可不要）等一堆东西。
javascript的学习计划书怎么写
制订学习计划 1、全面分析，正确认识自己。 准确找出自己的长处和短处，以便明确自己学习的特点、发展的方向，发现自己在学习中可以发挥的最佳才能。 2、结合实际，确定目标。 订计划时，不要脱离学习的实际，目标不能定得太高或过低，要依据：(1)知识、能力的实际；(2)“缺欠”的实际；(3)时间的实际；(4)教学进度的实际，确定目标，以通过自己的努力能达到为宜。 3、长计划，短安排。 要在时间上确定学习的远期目标、中期目标和近期目标。在内容上确定各门功课和各项学习活动的具体目标。学习目标可分为：(1)掌握知识目标；(2)培养能力目标；(3)掌握方法目标；(4)达到成绩(分数)目标。 长计划是指明确学习目标，确定学习的内容、专题，大致规划投入的时间；短安排是指具体的行动计划，即每周每天的具体安排和行动落实。 4、突出重点，不要平均使用力量。 所谓重点：一是指自己学习中的弱科或成绩不理想的课程或某些薄弱点；二是指知识体系中的重点内容。订计划时，一定要集中时间，集中精力保证重点。 5、计划要全面，还要与班级计划相配合。 计划里除了有学习的时间外，还要有进行社会工作、为集体服务的时间；有保证睡眠的时间；有文体活动的时间。时间安排上不能和班级、家庭的正常活动、生活相冲突。 6、安排好常规学习时间和自由学习时间。 常规学习时间(即基本学习时间)：指的是用来完成老师当天布置的学习任务，“消化”当天所学知识的时间。 自由学习时间：指的是完成了老师布置的学习任务之后，所剩下的归自己支配的学习时间。在自由学习时间内一般可做两件事：补课和提高。补课是指弥补自己学习上的缺欠；提高是指深入钻研，发展自己的学习优势或特长。不管是补课还是提高，最好要围绕一个专题进行，这样做，学习比较容易见效果。 自由学习时间内所取得的学习效果，对改变学习现状具有重大的作用，因此这一时间的安排，应当成为制订学习计划的重点之一。 7、脑体结合，学习和其他活动应合理安排。 在安排计划时，不要长时间地从事单一活动。(1)学习和体育活动要交替安排。比如，学习了一下午，就应当去锻炼一会儿，再回来学习；(2)安排科目时，文科、理科的学习要错开，相近的学习内容不要集中在一起学习；(3)同一学科的材料，用不同的方法学习。 8、提高学习时间的利用率 时间是宝贵的，自觉提高时间利用效率，是每个中学生学习上进行自我修养的重要内容。(1)早晨或晚上，一天学习的开头和结尾时间，可安排着重记忆的科目，如英语科等；(2)心情比较愉快，注意力比较集中，时间较完整时，可安排比较枯燥的内容或自己不太喜欢的科目；(3)零星的或注意力不易集中的时间，可安排学习自己最感兴趣的学科或做习题。这样可以提高时间的利用率。 9、计划要留有余地。 10、注意效果，定期检查，及时调整。 检查内容：(1)计划中的学习任务是否完成？(2)是否基本按计划去做？(3)学习效果如何？(4)总结得失，找出偏差，分析原因，以利改进。从而实现自我管理，自我控制，自我激励、自我调整。%D%A按照不同的日期在一天定一个计划，1周定一个计划，半个月定一个计划，1个月定一个计划，分别把你需要达到目标的要求逐一填写。 总结，分开写，有什么好的地方，有什么不足之处，如何去改进、完善。 百度一下。其实这个是自己做的，不必模仿，能体现出我写的内容就基本可以了，排版自己安排吧，感觉怎么看着舒服就怎样做~%D%A根据自己的学习情况，一科一科来呗。 1、你要综合估测自己的水平。不要因一次考试的好坏儿影响对自己水平的评判。 2、酌情为自己定下近期目标。不要太高。 3、根据目标，定下每天的学习任务。 4、备注：大部分的学习目标到最后都有折扣，所以不要定得太紧。 如果你计划每天都有，建议你周六和周日不要计划了，自己的自觉性没有想象得好。 具体计划可以： 语文：1、……2、……3、…… 数学：