从零开始学写.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2019/12/21,#,适合听众,A,零基础,知道学习路线图,B,有少许,HTML,、,CSS,、,JavaScript,基础,了解基本工具构成,C,中等水平工程师,借鉴一些编程经验,内行看门道,人人都是程序员,没有教不会的学生，只有不会教的老师,希望大家给我反馈，提高我的教学水平,40882080,App?,Web App,是运行在浏览器里应用软件,Web App,用,JavaScript,和,HTML,语言开发,Web App,流行的原因,浏览器无处,不在,不必安装，自动升级,各个,平台通用,Web,App,成功运用的领域,网页游戏,webmail,Web,App,学习内容,基本功,HTML,CSS,JavaScript,Canvas,基本结构,HTML,头,初始化,模块定义,节点层次,Resize,Receive,Event,启动,工具库,浏览器判断,Dom,Event,Animate,Ajax,Web,App,学习,方法,速成法,分段,记忆,基本功内容,不求甚解，只求在浏览器显示,结果,能给别人,100%,手写,演示，一气哈成是最好！,达成之前，不看其他资料，,专注,用工,少而精，只,精通,最,少,的技能，好过面面,俱浅,到,学习工具,Notepad+,Firefox,，附加,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),Apple,Tencent,Microsoft,baidu,google,html,css,javascript,演示,Web App,基本功,HTML(3),table,这个,3,行,2,列的表格就是,tr,行标记,td,列标记,演示,Web App,基本功,HTML(4),演示,Web App,基本功,HTML(5),audio,video,iframe,演示,Web App,基本功,HTML(6),标签,HTML5,标签,属性,HTML5,属性,div,img,table/tr/td,button,input-text,input-checkbox,input-radio,select/option,textarea,iframe,script,canvas,audio,video,input-email,input-date,input-range,input-search,input-tel,input-color,input-number,id,src,name,type,title,value,width,height,align,valign,border,cellSpacing,cellPadding,required,min,max,results,placeholder,pattern,step,懂这些足够了,Web App,基本功,CSS,CSS,属性,意义,marginLeft,left,marginTop,top,width,height,fontSize,lineHeight,marginLeft,opacity,color,background,border,zIndex,cursor,display,textAlign,overflow,Position,Css3:borderRadius,左边距,顶边距,宽度,高度,字体大小,行距,边距,透明度,颜色,背景,边框,层次,鼠标,显示状态,水平排板,溢出,定位,边框圆角,演示,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,isNaN,Web App,基本功,JavaScript(2),逻辑,=,=,&,|,a?b:c,控制流,If()else,for(vari=0;iobj,for(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),/,描绘形状,beginPath,路径开始,closePath,路径闭合,moveTo,画笔重定位,lineTo,直线,arc,弧线,quadraticCurveTo,二次曲线,bezierCurveTo,贝塞尔曲线,/,描边,&,填充,strokeStyle,描边色设定,stroke,描边,fillStyle,填充色设定,fill,填充,drawImage,贴图案,fillText,贴文字,/,矩形,rect,矩形,clearRect,矩形清空,fillRect,矩形填充,strokeRect,矩形描边,/,渐变,createLinearGradient,线性渐变,createRadialGradient,径向渐变,addColorStop,颜色过渡,/,坐标系变化,Translate,移动坐标原点,rotate,旋转,save,记住当前坐标系,Restore,恢复坐标系,Web App,工具库,判断,function find(a,b),return a.indexOf(b)+1;,(function()/brwoser,var browser=navigator.userAgent.toLowerCase();,isIE=find(browser,msie);,isIE9=find(browser,msie 9);,isIE678=isIE,isAndroid=find(browser,android);,isIphone=find(browser,iphone);,isIpad=find(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;/,记住当前属性值，每次读,style,值都有代价,switch(i),case l:z.marginLeft=x;break;/marginLeft,代替,left,case t:z.marginTop=x;break;/marginTop,代替,top,case 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.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=createEle(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:touchstart,mouseup:touchend,mousemove:touchmove,type=mappingtype|type;,if(ele.addEventListener)/,浏览器兼容,ele.addEventListener(type,fn,false);,else,ele.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=true/IE,else,e.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:-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(zcatch_mouse_div);,if(z._t0),tween.add(tween_id,z,t:0);,else,var 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)return 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)return f(r+r,b,d/2);,/,前半段先慢后快,else return f(2-r-r,b+d,-d/2);,/,后半段先快后慢,Animate,先慢后快,Animate,先快后慢,Animate,前半段先慢后快,Animate,后半段先快后慢,Web 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);,else,obj.funi=tweent0;,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;,else,fun=tweenlinear;,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;/xmlHTTP,if(window.XMLHttpRequest)/Mozilla,Safari,.,_z=new XMLHttpRequest(),else if(window.ActiveXObject)/IE,try _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.setRequestHeader(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/AJAX,var _pool=,_state=,_timer=0,_app=_xmlhttp=type&type.toLowerCase()=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,_xmlhttpsetRequest(_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.src=_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=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,谢谢大家！,40882080,