web前端技术

Web前端技术Web前端工程师JavaScript核心45minJavaScript进阶与框架45minHTML5探秘45minWebapp开发实践45min大纲JavascriptJavascriptbasicJSNESisaportofvNEStoJavaScript,inspiredbyMattWestcott’sJSSpeccy.TheThesourceisavailableonGitHub.作者FabriceBellard使用JavaScript编写了一个简单的PC模拟器，包含32位x86兼容CPU、8259可编程中断控制器、8254可编程中断计时器,实现16450UART串口设备•JavaScript历史•JavaScript特性•JavaScript变量•JavaScript数据类型•JavaScript函数与闭包•JavaScript作用域•JavaScript基于原型的继承Let’sStart!JavascriptECMAScriptDOMBOM•ECMAScript（核心）描述了该语言的语法和基本对象•DOM（文档对象模型）描述了处理网页内容的方法和接口•BOM（浏览器对象模型）描述了与浏览器进行交互的方法和接口•PrototypalOOP•Functional•DynamicJavaScript变量•JavaScript变量都对大小写敏感•JavaScript变量可以存放任何类型的值•使用关键字var声明，允许对此声明•没有块级作用域•全局变量、局部变量数据类型JavaScript函数functionadd(value1,value2){returnvalue1+value2;}varresult=add(1,2);JavaScript闭包•闭包就是能够读取其他函数内部变量的函数•由于在JavaScript中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”•闭包就是将函数内部和函数外部连接起来的一座桥梁JavaScript作用域functionadd(value1,value2){returnfunction(){returnvalue1+value2;}}JavaScript基于原型继承的动态对象functionPerson(){}functionPerson(){}；varperson1=newPerson();varperson2=newPerson();functionBook(title,publisher){this.title=title;this.publisher=publisher;}Book.prototype.sayTitle=function(){alert(this.title);};varbook1=newBook(HighPerformanceJavaScript,Yahoo!Press);varbook2=newBook(JavaScript:TheGoodParts,Yahoo!Press);JavaScript进阶与框架•浏览器种类•文档对象模型•事件和事件处理•AJax客户端JavaScript文档对象模型（DOM）•元素：匹配XML文件中的大部分元素,div•文本：匹配文档内的所有文本块•文档：匹配文档的根元素，htmlpstrongHello/stronghowareyoudoing?/pHTML解析完毕脚本在文档内解析执行HTMLDOM完全构造起来图片和外部内容加载网页完成加载•JavaScript事件模型相当独特，它不使用任何线程，完全是异步的•异步回调•JavaScript事件在两个阶段中执行：捕获和冒泡•标准事件模型与IE事件模型事件和事件处理•事件对象•事件注册•事件传播•事件处理程序的作用域•取消事件传播•重载浏览器的默认行为AsynchronousJavascriptandXML•ActiveXObject•XMLHttpRequest。。。。。。。。。使用框架来解决问题！jQuery1991HTML1994HTML21996CSS1+Javascript1997HTML41998CSS22000XHTML12002Tableless2005AJAX2008HTML5919496979800020509articleheaderh1/h1/headerp/pfooterahref=?comments=1/a/footer/articlemetermin=0max=100low=40high=90optimum=100value=91A+/meterprogress/progressprogressvalue=75max=100”75%/progressinputtype=emailvalue=[e-mail]/inputtype=datemin=2010-08-14max=2011-08-14value=2010-08-14/inputtype=rangemin=0max=50value=10/inputtype=searchresults=10placeholder=Search.../type=emailtype=tellocalStorage.setItem('lng',map.getCenter().lng);localStorage.setItem('lat',map.getCenter().lat);localStorage.setItem('mapZoom',map.getZoom());vardb=window.openDatabase('MyDB','1.0','mydatabase',5*1024*1024);db.transaction(function(tx){tx.executeSql(CREATETABLEIFNOTEXISTStest(idunique,text));tx.executeSql(INSERTINTOtest(id,text)VALUES(1,'mydata'));tx.executeSql(SELECT*FROMtest,[],successCallback);});if(navigator.geolocation){navigator.geolocation.getCurrentPosition(function(pos){alert(pos.coords.latitude+','+pos.coords.longitude);})}inputtype=textx-webkit-speech/window.addEventListener(deviceorientation,function(e){vara=e.alpha;varb=e.beta;varg=e.gamma;},false);functionRequestPermission(callback){window.webkitNotifications.requestPermission(callback);}functionshowNotification(){if(window.webkitNotifications.checkPermission()0){RequestPermission(showNotification);}else{window.webkitNotifications.createNotification(header.png,Title,Body).show();}}新消息提示新邮件提示audio/video/audiosrc=vincent.mp3controls=controls/videosrc=mapapi.mp4controls=controls/MoreWebGLDemosat{-webkit-text-fill-color:white;-webkit-text-stroke-color:black;-webkit-text-stroke-width:1px;}text-shadow:4px4px1px#aaa;box-shadow:1px1px2px#fff;box-shadow:inset0010px#000;border-radius:10pxbackground-image:-moz-linear-gradient(#fff,#000);background-image:-moz-linear-gradient(30deg,#000,#fff75%,#000);.left{background:red;left:0px}.right{background:green;left:1000px}#myDiv{-webkit-transition:left1sease-in-out,background1sease-in-out;}://://diveintohtml5.org/://未来趋势•移动优先•游戏开发者领衔主演Webapp开发实践•开发成本较低•适配多种移动设备•跨平台和终端•无需安装、即时更新•方便、快捷地部署什么是WebappWebApplication是指通过使用Web和Web浏览器技术，跨越网络完成一个或多个任务的应用程序，通常需要使用Web浏览器就是利用Web技术，能够做出超越传统理解网站的功能，让它更具有交互体验，让这个App看起来和用起来更像NativeAppWebApp特性Single-Page，自包含的可以在使用它的时候进行交互、参与并完成一些事情有丰富的用户界面，界面看起来非常美观使用和本地应用一样的模式可以离线工作应用了设备的某些功能传统的网站的导航元素和链接被隐藏起来如何构建WebappBackbone复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构根据模型的变更自动更新应用程序的HTML促进客户端模板使用，避免了在JavaScript中嵌入HTML代码开源、稳定、文档社区丰富Backbone.Model模型是所有Javascript应用程序的核心，提供了一组基本的管理数据变化的功能用于绑定键值数据和自定义事件，包括交互数据及相关的大量逻辑：转换、验证、计算属性和访问控制实现和服务端交互的动作可以用特定的方法扩展Backbone.ModelBackbone.View负责一切和界面相关的工作绑定html模板，初始的渲染，模型值改变后的重新渲染和界面元素的销毁等：呈现Web应用程序中的数据模型绑定界面元素的事件，完成对于事件的监听以及对事件的响应Backbone.Router为应用的重要位置提供可链接，可收藏，可分享的URLs很好的处理浏览器的前进、后退等问题匹配适合的路由，并触发回调函数ModelModelModelRouterViewViewViewUI