从零开始学写Web-App-PPT课件.pptx

1、从零开始，Web App开发实战施烜(shi xuan)/Sam SHI飞盒培训freebox技术总监适合听众A 零基础 知道学习路线图B 有少许HTML、CSS、JavaScript基础 了解基本工具构成C 中等水平工程师 借鉴一些编程经验 内行看门道人人都是程序员 没有教不会的学生，只有不会教的老师 希望大家给我反馈，提高我的教学水平40882080qqweibo/webappsam 专职HTML5教学 在线教学平台开发 从事股票应用网站开发7年什么是Web App?Web App 是运行在浏览器里应用软件 Web App 用JavaScript和HTML语言开发 Web App 流行的原

2、因 浏览器无处不在 不必安装，自动升级 各个平台通用 Web App 成功运用的领域 网页游戏 webmailWeb App 学习内容基本功 HTML CSS JavaScript Canvas基本结构 HTML头 初始化 模块定义 节点层次 Resize Receive Event 启动工具库 浏览器判断 Dom Event Animate AjaxWeb App 学习方法 速成法 分段记忆基本功内容 不求甚解，只求在浏览器显示结果 能给别人100%手写演示，一气哈成是最好！达成之前，不看其他资料，专注用工 少而精，只精通最少的技能，好过面面俱浅到 学习工具 Notepad+Firefox，

3、附加firebug组件Web App 基本功HTML(1)Web App的显示层次结构靠div和table标签 div确立大体布局 table在局部细节和自适应上非常理想 Web App的图形靠img和canvas标签 不规则图形用img 规则或者简单图形用canvas生成 除了这20多个标签，其他几乎从来不用Web App 基本功HTML(1)Hello HTML5!I belive I can fly演示Web App 基本功HTML(2)AppleTencentMicrosoftgooglehtmlcssjavascript演示Web App 基本功HTML(3)table这个3行2列的

4、表格就是tr行标记td列标记演示Web App 基本功HTML(4)演示Web App 基本功HTML(5)audiovideoiframe演示Web App 基本功HTML(6)标签标签HTML5标签标签属性属性HTML5属性属性divimgtable/tr/tdbuttoninput-textinput-checkboxinput-radioselect/optiontextareaiframescriptcanvasaudiovideoinput-emailinput-dateinput-rangeinput-searchinput-telinput-colorinput-numberi

5、dsrcnametypetitlevaluewidthheightalignvalignbordercellSpacingcellPaddingrequiredminmaxresultsplaceholderpatternstep懂这些足够了Web App 基本功CSSCSS属性属性意义意义marginLeft,leftmarginTop,topwidthheightfontSizelineHeightmarginLeftopacitycolorbackgroundborderzIndexcursordisplaytextAlignoverflowPositionCss3:borderRadi

6、us左边距顶边距宽度高度字体大小行距边距透明度颜色背景边框层次鼠标显示状态水平排板溢出定位边框圆角演示Web App 基本功JavaScript(1)基本数据类型及常用操作命令数字+,-,*,/,%,+,-,Math.sin,Math.cos,Math.PI字符串+,length,substring,indexOf,parseInt,toLowerCase数组,push,pop,slice,splice,contact,join,split对象 obj.a,obja,obja类型判断 typeof,isNaNWeb App 基本功JavaScript(2)逻辑=,=,&,|,a?b:c控制流I

7、f()elsefor(vari=0;iobjfor(var i in obj2)obj1i=obj2i;return obj1i;Web App 基本功Canvas(1)var c=document.getElementById(mycanvas)var ctx=c.getContext(2d);ctx.strokeStyle=#004433;ctx.strokeRect(10,10,100,100);ctx.fillStyle=rgba(200,50,60,0.5;ctx.arc(100,100,60,0,Math.PI*2);ctx.fill()Web App 基本功Canvas(2)/描

8、绘形状beginPath路径开始closePath路径闭合moveTo画笔重定位lineTo直线arc弧线quadraticCurveTo二次曲线bezierCurveTo贝塞尔曲线/描边&填充strokeStyle描边色设定stroke描边fillStyle 填充色设定fill填充drawImage贴图案fillText 贴文字/矩形rect矩形clearRect矩形清空fillRect 矩形填充strokeRect矩形描边/渐变createLinearGradient 线性渐变createRadialGradient 径向渐变addColorStop颜色过渡/坐标系变化Translate移

9、动坐标原点rotate旋转save记住当前坐标系Restore 恢复坐标系Web App 工具库判断function find(a,b)return a.indexOf(b)+1;(function()/brwoservar browser=navigator.userAgent.toLowerCase();isIE=find(browser,msie);isIE9=find(browser,msie 9);isIE678=isIE&!isIE9;isAndroid=find(browser,android);isIphone=find(browser,iphone);isIpad=find(

10、browser,ipad);isTouch=isIphone|isIpad|isAndroid;)();Web App 工具库Dom(1)function getEle(a)/查找节点return document.getElementById(a);function createEle(tag)/创建节点return document.createElement(tag);function setCss(ele,css)/设置css属性var z=ele.style;for(var i in css)zi=cssi;y=cssi,x=Math.round(y)+px;ele_+i=y;/记住

11、当前属性值，每次读style值都有代价switch(i)case l:z.marginLeft=x;break;/marginLeft 代替leftcase t:z.marginTop=x;break;/marginTop 代替topcase w:z.width=x;break;case h:z.height=x;break;case f:z.fontSize=x;break;case lh:z.lineHeight=x;break;case a:z.opacity=y;break;case c:z.color=y;break;case d:z.display=y;break;case o:z

12、.overflow=y;break;case p:z.position=y;break;case z:z.zIndex=y;break;case cs:z.cursor=y;break;case ta:z.textAlign=y;break;case bd:z.border=y;break;case bg:z.background=y;break;case i:ele.innerHTML=y;break;/支持直接写内容default:zi=y;Web App 工具库Dom(2)function createAppend(father,css,tag)/添加节点var ele=createEl

13、e(tag|div);setCss(z,css|)(father|document.body).appendChild(z);return z;function hideEle(ele)/隐藏节点ele.style.display=none;function showEle(ele)/显示节点ele.style.display=;function html(ele,str)/节点文字ele.innerHTML=str|;Web App工具库Event(1)function addEvent(ele,type,fn)if(isTouch)/如果支持触屏var mapping=mousedown:

14、touchstart,mouseup:touchend,mousemove:touchmovetype=mappingtype|type;if(ele.addEventListener)/浏览器兼容ele.addEventListener(type,fn,false);elseele.attachEvent(on+type,fn);Web App工具库Event(2)function setEvent(e,keep_bubble)e=e|window.event;if(!keep_bubble)/缺省执行if(!e.stopPropagation)/阻止冒泡e.cancelBubble=tru

15、e/IEelsee.stopPropagation()return e.touches?e.touches0:e;/兼容pc和触屏addEvent(mydiv,mousedown,function(e)e=setEvent(e);function setScrollY(ele,tween_id,callback)addEvent(ele,mousedown,function(e)e=getEvent(e);var z=this;z.is_move=1;z.ot=z._t;z.my=e.clientY;if(!z.catch_mouse_div)z.catch_mouse_div=$A(z,l:

16、-500,t:-500,w:1000+z._w,h:1000+z._h);$V(z.catch_mouse_div););addEvent(ele,mousemove,function(e)var z=this;if(z.is_move)e=getEvent(e);var move_y=Math.abs(e.clientX-z.mx)$S(z,t:z.ot+e.clientY-z.my););addEvent(ele,mouseup ,function()var z=this;if(z.is_move)$H(z.catch_mouse_div);if(z._t0)tween.add(tween

17、_id,z,t:0);elsevar y=Math.min(0,z.parentNode._h-(z._h|z.offsetHeight);if(y z._t)tween.add(tween_id,z,t:y);z.is_move=0;if(fun&Math.abs(z._t-z.ot)3)callback(););Web App工具库Animate(1)tween=/r:运行时间占比，b:起始点，d:位移linear:function(r,b,d)return b+d*r;,quad:function(r,b,d)return b+d*r*r;,cubic:function(r,b,d)re

18、turn b+d*r*r*r;,quart:function(r,b,d)return b+d*r*r*r*r;,quint:function(r,b,d)return b+d*r*r*r*r*r;,sine :function(r,b,d)return b+d*(1-Math.cos(r*Math.PI/2);,/除了linear是匀速运动，其他都是先慢后快easeOut:function(f)/先快后慢return function(r,b,d)return f(1-r,b+d,-d);,easeInOut:function(f)return function(r,b,d)if(r.5)r

19、eturn f(r+r,b,d/2);/前半段先慢后快else return f(2-r-r,b+d,-d/2);/后半段先快后慢Animate 先慢后快00.10.20.30.40.50.60.70.80.910%10%20%30%40%50%60%70%80%90%100%linearquadcubicquartquintsineAnimate 先快后慢00.10.20.30.40.50.60.70.80.910%10%20%30%40%50%60%70%80%90%100%linearquadcubicquartquintsineAnimate 前半段先慢后快Animate 后半段先快后

20、慢00.10.20.30.40.50.60.70.80.910%5%10%15%20%25%30%35%40%45%50%55%60%65%70%75%80%85%90%95%100%linearquadcubicquartquintsineWeb App工具库Animate(3)animate=list:,add:function(id,obj)obj.begin=getMS();for(var i in obj.fun)var t=i.split(|);if(t1=easeOut|t1=easeInOut)obj.funi=tweent1(t0);elseobj.funi=tweent0;

21、this.listid=obj;/第一个注册的，将启动循环if(count(this.list)=1)this.run();,run:function()var live=0,now=getMS(),obj,d,rate;for(var list in animate.list)d=;obj=animate.listlist;if(now=obj.begin+obj.duration)live+;rate=(now-obj.begin)/obj.duration;for(var i in obj.dis)if(obj.fun&obj.funi)fun=obj.funi;elsefun=twee

22、nlinear;di=fun(rate,obj.fromi,obj.disi);setCss(obj.node,d);if(live)setTimeout(animate.run,30);animate.add(abc,/注册名node:mydiv,/移动节点duration:1000,/持续时间from:l:100,t:100,w:100,h:30,a:1,/起始位置dis:l:800,t:500,w:200,h:50,a:0.5,/位移fun:t:quint /位移函数,缺省为linear);演示Web App工具库Ajax(1)function Ajax(a)var _z=false;/

23、xmlHTTPif(window.XMLHttpRequest)/Mozilla,Safari,._z=new XMLHttpRequest()else if(window.ActiveXObject)/IEtry _z=new ActiveXObject(Msxml2.XMLHTTP)catch(e)try _z=new ActiveXObject(Microsoft.XMLHTTP)catch(e)this.setRequest=function(url,fun,content,type)_z.open(type,type=get?url+?+content:url,true);_z.se

24、tRequestHeader(Content-type,application/x-www-form-urlencoded);_z.onreadystatechange=function()if(_z.readyState=4&_z.status=200)fun(_z.responseText)_z.send(type=get?NULL:(content|NULL);function setChannel(type)/type：Script/AJAXvar _pool=,_state=,_timer=0,_app=freebox/,_xmlhttp=type&type.toLowerCase(

25、)=ajax?new Ajax():,callAjax=function()var _gets=;for(var _key in _pool)_gets.p(_key+=+_pool_key);_pool=;var quest_str=_gets.join(&);if(_xmlhttp)/Ajax_xmlhttp.setRequest(_app,function(a)eval(a);,quest_str,get);else/Script跨域if(!window.ajax_id)ajax_id=$A(,script);ajax_id.type=text/javascript;ajax_id.sr

26、c=_app+?+quest_str;this.add=function(a,b,c)_poola=b|0;clearTimeout(_timer);_timer=setTimeout(callAjax,c|20);Web App结构HTML头div-moz-user-select:-moz-none;-webkit-user-select:none;.Web App结构初始化resize=function()W=window.innerWidth;H=window.innerHeight;for(var i in MODELS)MODELSi.resize();window.onresize

27、=function(a)if(window.resize_timer)clearTimeout(window.resize_timer);resize_timer=setTimeout(resize,100);$S(document.body,l:0,t:0,o:hidden);MODELS=;Web App结构模块定义MODELS.main=canvas:$A(,canvas).,resize:function().,receive:function(a).,start:function().;addEvent(MODELS.main.canvas,mousedown,function(e).);Web App结构启动resize();for(var i in MODELS)MODELSi.start();demo谢谢大家！40882080qqweibo/webappsamfreebox