淘气女友学编程----Ajax课程(1-1)

简介:
前记
    女友最近也吵着要学习软件开发,谁叫着报纸新闻天天说软件开发是未来的最吃香的行业,只要和软件沾上边的个个都是白领。唉,无论我苦口婆心的劝说,还把自己当作例子说我们只是工人,香是没吃着,班要天天加。劝说是没有用的,她是铁了心要做这行,还威胁我说:“你教我,教不好,你这个老师笨,看我怎么收拾你。”
    万般无奈之下,我只能屈服。不过我问她要学什么呢?她头也不抬,说道:“我要知道了还要你干吗?你是老师。”我听完之后快晕过去了,人是有差别的,为什么以前我就不能这么嚣张的对老师。想当初遇到问题,请教别人的时候,是虚心讨教,看别人的脸色,如诺问题能够解决,心中高兴万分,口中感谢不止。
    学什么呢?女友好歹也是计算机专业毕业,应该还有那么点基础。而且现在web开发这么流行,算了教她这个吧。赫赫,要是她什么都学会了,以后我就可以不用上班,做个居家男人天天摇摇扇子也是美事,脑袋中浮现出那个那美丽的幻境,我的嘴角不经意露出诡异的笑容。
    “你坏笑什么?”
    “没什么,正在想你要学习什么呢?”
    “那还笑得那么奸诈,肯定不怀好意,快说你要教我什么?”
    “web开发。”
    “web开发?我要学什么?”
    “web开发你要学的东西太多了,从开发语言上有Java/C#/VB/PHP/JScript等等,从工具上莱说的话,如果你选择了ASP.NET的话,你最少要学习Microsoft Visual Studio,Microsoft SQL Server…”
    “你啰嗦不?你就告诉我先学什么,再学什么,学完之后我能做什么就可以了。”还不等我滔滔不绝完毕,女友已经不耐烦地打断。
   我用最快的时间考虑了一下,什么东西该先教给他,比较容易学懂而且又少有成就感。
   前台,页面,我的脑中浮现的就是这些文字,就是前台的页面开发,比较容易上手而且可以立刻看到成果,对于女生来说,最合适不过了。
    “你就先学前台开发,从Javascript脚本开始学习。”
    “Javascript脚本有什么好学的,我要用的话在网上搜搜就可以找到。这个还用学?”
    我听完之后,不只是生气还是无奈,故意严肃地说道:“Javascript的作用你自己到网上找找,不过我决定了先教你Javascript,后续的教学内容看你的学习能力,如果你太笨的话,就不用往下学了。”
     “噢,那就先学Javascript.”
   “我们采用实例的方法,以代码讲解和分析为主,动手能力排在第一位,关于理论概念部分,你可以作为提高部分再学习。避免到了最后,你说起来一套一套,做起来一愣一愣。学习的例子就先用俄罗斯方块。”
   “不会不太难了,到最后我要是做不出来,就是你这个老师太笨,”还没有等她低估完,我壮起胆子瞪了她一眼,有老师这个帽子还挺管用的,她立马打住,要是放在平常,可能打住的人就是我。看到这样,心中不免美滋滋的。
一.移动的小方块
   俄罗斯方块就是通过键盘来控制各种小方块的旋转和下落,根据小方块的堆积来进行有戏。方块在一行堆满后就可以消掉,方块堆积至窗口顶端有戏就结束了。
    “那么假如我们要做一个俄罗斯方块有戏,我们该从那里入手?”
    “需求”女友没有摆脱学院派的影子。
    “因为大家对这个游戏都很了解,那么需求我们就先绕过去,毕竟我们不是正规军。我们直接从开发着手分析问题。从开发的角度来看,我们需要先解决什么问题?”
    “嗯,开发角度?那包含什么内容?”不按照常理出牌,她立马理不清头绪。
    “如果从开发的角度来说,需要将问题按照技术处理的关键来分,比如说图形该怎么处理,运动该怎么控制,程序中的每个逻辑层该如何划分等等。”
    “那就是说先要将问题细分,将每个处理的关键技术解决了,再根据系统总的要求进行具体开发,那么系统也就做出来了。”看来她还有点小聪明,一点就通。
    “如果是按照这么说的话,俄罗斯放宽涉及到的问题就有:键盘控制,图形呈现,有戏算法这三个部分。”看来来她有点得意了,一口气把知道的全给说出来了。
    “作为游戏开发,这里面时钟也是个需要处理的关键问题,否则方块就不会动了。那么我们今天首先要解决的问题就是关于在web上响应键盘,做一个可以根据键盘上下左右翼懂得小方块。首先我们先看看代码。”
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
</ head >
< body >
< div  id ="dSquare"  style ="background:#0000FF;POSITION: absolute; width:20px; height:20px; top:50px; left:200px;" ></ div >
</ body >
</ html >
< script  language =javascript >  
if ( typeof  GetControl == " #ff0000 " ) GetControl = function  (id)
{
    
return  document.getElementById(id);
};

var  control = GetControl( " dSquare " );
function  KeyDown(e) {                  
            
var  key;
            
try
                   key
= event.keyCode;   // 取得键盘Code编号
             } 
             
catch (a){  // 对于Firefox来说,不支持event.keyCode
                   key = KeyDown.arguments[ 0 ].keyCode; 
             } 
             
            
switch (key)
            {
                
case   40 : // 40 == down
                    control.style.top = (parseInt(control.style.top) + 1 ) +   " px " ;            
                    
break ;
                
case   39 : // 39 == right
                    control.style.left = (parseInt(control.style.left) + 1 ) +   " px " ;
                    
break ;
                
case   38 : // 38 == up
                    control.style.top = (parseInt(control.style.top) - 1 ) +   " px " ;
                    
break ;
                
case   37 : // 37 == left    
                    control.style.left = (parseInt(control.style.left) - 1 ) +   " px " ;
                    
break ;                    
            }

document.onkeydown
= KeyDown;  // 附加事件
document.onkeypress = KeyDown;  // 附加事件
</ script >
在这个代码中,我们需要关注代码中的5点:
   1:document;
   2:id="dSquare";
   3:getElementById
   4:document.onkeydown=KeyDown;
   5:event.keyCode,
   1.document  是浏览器提供的客户端对象模型,而且document对象是一个顶层对象,不需要预先实例化就可直接使用。所以这个对象和Div存在区别,浏览器所提供的客户端模型中也存在Div模型,但是这个模型需要根据指定的ID来进行访问。在Javascript中,可以对浏览器提供的各种对象模型进行操作,可以修改对象模型的属性,和调用对象模型的函数和给对象模型附加事件。但是使用过程中需要注意的问题是:由于不同浏览器提供的对象模型并不完全一致,而是彼此存在差异,所以提供的属性或函数中就存在不同,这些不同也就造成了Javascript多浏览器的问题。
   2.id="dSquare",这里我们实际上关注的是DOM对象问题,再HTML中所有的元素都存在对应的DOM模型,如果我们需要访问这些模型,通过ID是比较快捷的一种方法,而且这个ID尽量避免一样,就下我们每个人使用的身份证一样。
   3.getElementById,是内置对象提供的一个方法,用于访问指定ID的对象,如果对象不存在的话,就会返回一个null值。
  4.document.onkeydown=KeyDown;这是比较典型的Javascript时间附加的方式,对于Javascript中,对于事件附加的处理之需要定义之需要函数明就可以了,具体函数的操作可以参考Javascript中各种函数的定义,如对象内函数,一般函数等。
  5.event.keyCode ,这部分代码主要是针对多浏览器处理的,可以看到代码中存在有一个try catch的处理,这个是由于firefox中没有提供event.keyCode,所以需要通过KeyDown.arguments[0].keyCode的方式来访问参数,这里面需要注意的是在Javascript中函数参数的访问方式,如固定参数,和动态参数的访问。
   “我听完这些头都有点大了。”等我将代码注意部分简单讲完,她已经开始有点晕头转向。“document对象模式我可以理解,不就是浏览器客户端中提供的各种对象,这个其实和DOM模式应该是描述的一件事情,Javascript根据DOM的模型进行对应的各种处理。”
   “是的,所以如果你在浏览器上使用其他的对象模型,比如表格的话,可以根据浏览器提供的DOM信息,去确认对象的属性和函数是否存在,在具体开发中根据需要去查资料。”
   “if(typeof GetControl=="#ff0000") GetControl=function (id)这部分代码就比较奇怪,我们又看明白?你为什么不写成这个样子,我看代码也能运行。“
function GetControl(id)
{
    return document.getElementById(id);
};
   “其实这段代码有两个概念需要说明,1:关于变量的定义,由于在Javascript中对于变量的定义比较灵活,可以使用Var固定作用域,也可以不使用Var,如果没有使用var 的变量,就会被当成全局变量,所以这里GetControl是全局变量。2:关于函数的定义方式的灵活性也在这里面体现出来,说明函数的声明不是只有function GetControl(id)一种形式。”
   “key=KeyDown.arguments[0].keyCode; 为什么不使用KeyDown(e)中的e呢?“
   “对于key=e.keyCode的处理也是可以的,对于Javascript中,对于函数参数的处理和其他高级语言存在比较大的区别,这里需要注意。“
   “通过try catch取得KeyCode的方式我总觉得不好,有没有别的办法?”
   “嗯,通过异常的方式去取值确实是一种不好的开发习惯,在这里可以有多种方式去取的KeyCode,而且不会引起异常。比如说判断浏览器类型,然后根据不同的浏览器去取的不同的方式。还有以下的这种方式也能取得KeyCode。主要是利用判断的方式去调用不同的方法取值。“
var key = window.event ? window.event.keyCode : e.which;
   “好了,代码就这些,这个小方块能够移动的原因就在于在Key按下后,触发了我们附加的事件函数,在函数中我们通过key的值来修改Div的style 的位置值,这样就达到了运动的效果。Key事件的触发也为我们开发俄罗斯方块解决了第一个关键问题。“
  “还有,这个课还有一个课后作业,就是修改代码,判断如果方块移动到浏览器的边界后,就不能再往外移动,不能让浏览器出现滚动边框。”
  “还要有作业,我才不做呢。”












本文转自小余(Yice)博客园博客,原文链接:http://www.cnblogs.com/yice/archive/2008/04/17/983958.html     ,如需转载请自行联系原作者



相关文章
|
6月前
|
JSON 前端开发 JavaScript
AJAX 课程学习笔记三
AJAX 课程学习笔记三
|
6月前
|
JSON 缓存 前端开发
AJAX 课程学习笔记二
AJAX 课程学习笔记二
|
6月前
|
XML 前端开发 JavaScript
AJAX 课程学习笔记一
AJAX 课程学习笔记一
|
前端开发 JavaScript C#
【C#编程最佳实践 十】控件使用及Ajax通信
【C#编程最佳实践 十】控件使用及Ajax通信
80 0
|
JSON 前端开发 数据格式
一起谈.NET技术,使用WCF实现SOA面向服务编程——使用AJAX+WCF服务页面开发
  在上一篇讲到,如果将BLL层的每一个类都转化为*.svc,这是一个不实在的想法。它会使服务变化复杂,难于管理。   这时候,我们第一时间想到的是23个简单开发模式中的Factory,在这里,Factory正好派上用场。
908 0
|
JSON 前端开发 数据格式
使用WCF实现SOA面向服务编程——使用AJAX+WCF服务“.NET技术”页面开发
  在上一篇讲到,如果将BLL层的每一个类都转化为*.svc,这是一个不实在的想法。它会使服务变化复杂,难于管理。   这时候,我们第一时间想到的是23个简单开发模式中的Factory,在这里,Factory正好派上用场。
1093 0
|
JSON 前端开发 数据格式
使用WC“.NET研究”F实现SOA面向服务编程——使用AJAX+WCF服务页面开发
  在上一篇讲到,如果将BLL层的每一个类都转化为*.svc,这是一个不实在的想法。它会使服务变化复杂,难于管理。   这时候,我们第一时间想到的是23个简单开发模式中的Factory,在这里,Factory正好派上用场。
664 0
|
前端开发 JavaScript 数据格式
|
前端开发 .NET 数据安全/隐私保护