1、從零開始，Web App開發(fā)實戰(zhàn)施烜(shi xuan) / Sam SHI飛盒培訓freebox技術總監(jiān)適合聽眾A 零基礎知道學習路線圖B 有少許HTML、CSS、JavaScript基礎了解基本工具構成C 中等水平工程師借鑒一些編程經驗內行看門道人人都是程序員沒有教不會的學生，只有不會教的老師希望大家給我反饋，提高我的教學水平40882080qqweibo/webappsam專職HTML5教學在線教學平臺開發(fā)從事股票應用網站開發(fā)7年什么是Web App?Web App 是運行在瀏覽器里應用軟件Web App 用JavaScript和HTML語言開發(fā)Web App 流行的原因瀏覽器無處不在不

2、必安裝，自動升級各個平臺通用Web App 成功運用的領域網頁游戲webmailWeb App 學習內容基本功HTMLCSSJavaScriptCanvas基本結構HTML頭初始化模塊定義節(jié)點層次ResizeReceiveEvent啟動工具庫瀏覽器判斷DomEventAnimateAjaxWeb App 學習方法速成法分段記憶基本功內容不求甚解，只求在瀏覽器顯示結果能給別人100%手寫演示，一氣哈成是最好！達成之前，不看其他資料，專注用工少而精，只精通最少的技能，好過面面俱淺到學習工具Notepad+Firefox，附加firebug組件Web App 基本功HTML(1)Web App的顯示

3、層次結構靠div和table標簽div確立大體布局table在局部細節(jié)和自適應上非常理想Web App的圖形靠img和canvas標簽不規(guī)則圖形用img規(guī)則或者簡單圖形用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列的表格就是tr行標記td列標記演示Web App 基本功HTML(4)演示Web App 基

4、本功HTML(5)audiovideoiframe演示Web App 基本功HTML(6)標簽HTML5標簽屬性HTML5屬性divimgtable/tr/tdbuttoninput-textinput-checkboxinput-radioselect/optiontextareaiframescriptcanvasaudiovideoinput-emailinput-dateinput-rangeinput-searchinput-telinput-colorinput-numberidsrcnametypetitlevaluewidthheightalignvalignbordercel

5、lSpacingcellPaddingrequiredminmaxresultsplaceholderpatternstep懂這些足夠了Web App 基本功CSSCSS屬性意義marginLeft, leftmarginTop, topwidthheightfontSizelineHeightmarginLeftopacitycolorbackgroundborderzIndexcursordisplaytextAlignoverflowPositionCss3: borderRadius左邊距頂邊距寬度高度字體大小行距邊距透明度顏色背景邊框層次鼠標顯示狀態(tài)水平排板溢出定位邊框圓角演示Web

6、 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控制流If()elsefor(vari=0;iob

7、jfor(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)/描繪形狀begin

8、Path路徑開始closePath路徑閉合moveTo畫筆重定位lineTo直線arc弧線quadraticCurveTo二次曲線bezierCurveTo貝塞爾曲線/描邊 & 填充strokeStyle描邊色設定stroke描邊fillStyle 填充色設定fill填充drawImage貼圖案fillText貼文字/矩形rect矩形clearRect矩形清空fillRect矩形填充strokeRect矩形描邊/漸變createLinearGradient 線性漸變createRadialGradient 徑向漸變addColorStop顏色過渡/坐標系變化Translate移動坐標原點rot

9、ate旋轉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);isI

10、pad = find(browser, ipad);isTouch = isIphone | isIpad | isAndroid;)();Web App 工具庫Dom(1)function getEle(a)/查找節(jié)點return document.getElementById(a);function createEle(tag)/創(chuàng)建節(jié)點return document.createElement(tag);function setCss(ele, css)/設置css屬性var z = ele.style;for(var i in css)zi = cssi;y = cssi, x = M

11、ath.round(y) + px;ele_+i = y;/記住當前屬性值，每次讀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

12、;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;/支持直接寫內

13、容default : zi = y;Web App 工具庫Dom(2)function createAppend(father, css, tag) /添加節(jié)點var ele = createEle(tag | div);setCss(z, css | )(father | document.body).appendChild(z);return z;function hideEle(ele) /隱藏節(jié)點ele.style.display = none;function showEle(ele) /顯示節(jié)點ele.style.display = ;function html(ele, str)

14、 /節(jié)點文字ele.innerHTML = str | ;Web App工具庫Event(1)function addEvent(ele, type, fn)if(isTouch)/如果支持觸屏var mapping = mousedown: touchstart,mouseup: touchend,mousemove: touchmovetype = mappingtype | type;if (ele.addEventListener)/瀏覽器兼容ele.addEventListener(type, fn, false);elseele.attachEvent(on+type, fn);W

15、eb App工具庫Event(2)function setEvent(e, keep_bubble)e = e | window.event;if(!keep_bubble)/缺省執(zhí)行if(!e.stopPropagation)/阻止冒泡e.cancelBubble = true/IEelsee.stopPropagation()return e.touches ? e.touches0 : e; /兼容pc和觸屏addEvent(mydiv, mousedown, function(e)e = setEvent(e);function setScrollY(ele, tween_id, ca

16、llback)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 = getE

17、vent(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_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,

18、 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) retur

19、n 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 先

20、慢后快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);elseobj.funi = tweent0;this.listid = obj;/第一個注冊的，將啟動循環(huán)if(count(this.list)=1)this.run

21、();,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 = tweenlinear; di = fun(rate, obj.fromi, ob

22、j.disi);setCss(obj.node, d);if(live)setTimeout(animate.run, 30);animate.add(abc, /注冊名node: mydiv,/移動節(jié)點duration: 1000,/持續(xù)時間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; /xmlHTTPif(wi

23、ndow.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

24、, 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 / AJAXvar _pool = , _state = , _timer = 0, _app = freebox/, _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_xmlhttp.setRequest(_app, function(a)eval(a);, quest_str, get);else/Script跨域i