追风堂 Javascript

4,390 views

Published on

Javascript

Published in: Technology
1 Comment
12 Likes
Statistics
Notes
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,390
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

追风堂 Javascript

  1. 1. JavaScript<br />桃子<br />搜索技术 —主搜索—搜索应用开发<br />
  2. 2. 目录<br />JavaScript是什么<br />JavaScript使用场景<br />JavaScript基础语法<br />如何使用JavaScript<br />JavaScript跨域<br />如何调试JavaScript<br />案例分析<br />
  3. 3. JavaScript是什么<br />在Web时代的早期,HTML相当简单,很容易就能够掌握设计网页所需知道的一切。<br />随着Web的发展,页面设计人员的期望值也提高了,他们希望对页面的外观有更大的控制能力,这使HTML变得越来越复杂了。<br />因为Web是一种动态的媒体,页面设计人员还希望他们的页面能够与用户进行交互,HTML很快就显得不足以满足这一需求了。Netscape(网景)发明了JavaScript,作为控制浏览器和给网页添加活力和交互性的方法。<br />
  4. 4. JavaScript是什么<br />JavaScript是一种易学易用的脚本语言, 目的是面向与用户动态交互的脚本开发,扩展HTML页面的功能,而不是开发大型复杂的程序,所以相对而言,JavaScript的语法规则较少而且较为简单。但作为一门编程语言 ,它有自己的语法规则,自己的关键字、指令和对象。<br />JavaScript 被设计用来向 HTML 页面添加交互行为。<br />JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。<br />JavaScript 由数行可执行计算机代码组成。<br />JavaScript 通常被直接嵌入 HTML 页面。<br />JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。<br />所有的人无需购买许可证均可使用 JavaScript。<br />
  5. 5. JavaScript?Java?<br />
  6. 6. JavaScript?JScript?<br />JScript是 Microsoft 公司对 ECMA 262 语言规范(ECMAScript编辑器 3)的一种实现。除了少数例外(为了保持向后兼容),JScript完全实现了 ECMA 标准。JScript是一种解释型的、基于对象的脚本语言。 <br />Jscript是微软版的JavaScript,与JavaScript基本一致. 如果你这样写: <script> </script> 不声明脚本版本的话,在IE里默认用Jscript,在Netscape里默认用JavaScript 脚本语言本身和浏览器版本无关,JavaScript就是JavaScript,永远是Netscape公司的JavaScript,永远首先默认支持NS;JScript永远就是MS的JScript,IE永远默认首先支持JScript,其实只是MS和NS之间的积怨罢了,于我们这些使用者本无区别...... <br />
  7. 7. JavaScript 引擎<br /> <br />加速实例<br />
  8. 8. V8引擎<br />V8是Google Chrome浏览器内置的JavaScript脚本引擎。<br />V8引擎编译和执行JavaScript源代码。<br />Google Chrome使用V8的API,但引擎的内核部分是独立于浏览器之外的。速度是V8追求的主要设计目标之一,它把JavaScript代码直接编译成机器码运行,比起传统的“中间代码+解释器”的引擎,优势不言而喻。  <br />V8的团队说Chrome对脚本的解析和执行速度是Firefox和Safari的10倍,是IE的56倍。<br />
  9. 9. JavaScript 是什么<br />前台语言:Visual Basic,Delphi,JavaScript<br />平台语言:Java,C#<br />后台脚本语言:Perl,PHP,Python,Ruby<br />系统语言:C,C++,汇编<br />思考:编译?解释?<br />
  10. 10. HTML,XHTML,DHTML,DOM,CSS<br />HTML 指超文本标记语言,是通向 WEB 技术世界的钥匙。<br />XHTML 是更严谨更纯净的 HTML 版本。<br />DHTML 是一种使 HTML 页面具有动态特性的艺术。(D=dynamic)<br />对大多数人来说,DHTML 意味着 HTML、样式表(CSS)和 JavaScript 的组合。<br />DOM 文档对象模型,定义了访问和操作HTML文档的标准方法。<br />CSS 层叠样式表 (Cascading Style Sheets)<br />
  11. 11. HTML 5<br />HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。<br />HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。<br />特性:<br />用于绘画的 canvas 元素<br />用于媒介回放的 video 和 audio 元素<br />对本地离线存储的更好的支持<br />新的特殊内容元素,比如 article、footer、header、nav、section<br />新的表单控件,比如 calendar、date、time、email、url、search<br />
  12. 12. Javascript使用场景<br />JavaScript是一种基于客户端浏览器的语言,用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的,即使是必须调用后端服务的部分,浏览器只将用户输入验证后的信息提交给远程的服务器,大大减少了服务器的开销。<br />游戏开发<br />
  13. 13. Javascript能做什么<br />JavaScript 为 HTML 设计师提供了一种编程工具<br />JavaScript 可以将动态的文本放入 HTML 页面<br />JavaScript 可以对事件作出响应<br />JavaScript 可以读写 HTML 元素<br />JavaScript 可被用来验证数据<br />JavaScript 可被用来检测访问者的浏览器<br />JavaScript 可被用来创建 cookies<br />
  14. 14. Javascript语法<br /><html><br /><head><br /><title>JavaScript的Hello World程式</title><br /> <script type="text/javascript"><br />document.write("Hello, world!"); //直接在瀏覽器視窗顯示。<br />alert("Hello, world!"); //開啟對話視窗顯示。<br /> </script><br /></head><br /><body><br />HTML 本文……<br /></body><br /></html><br />实例<br />
  15. 15. Javascript放到何处<br />head 部分:<br />包含函数的脚本位于文档的 head 部分。这样我们就可以确保在调用函数前,脚本已经载入了。<br />body 部分 :<br />执行位于 body 部分的脚本。<br />外部 JavaScript:<br />如何访问外部脚本。<br /><html><br /><head><br /><script src="xxx.js">....</script><br /></head><br /><body><br /></body><br /></html><br />
  16. 16. Javascript语法<br />执行顺序:<br />实例<br />注释:<br />单行的注释以 // 开始。<br />多行注释以 /* 开头,以 */ 结尾。<br />
  17. 17. Javascript变量<br />变量对大小写敏感(y 和 Y 是两个不同的变量)<br />变量必须以字母或下划线开始<br />这些语句:<br />x=5; carname="Volvo"; <br />与这些语句的效果相同:<br />var x=5; varcarname="Volvo"; <br />数据类型:<br />字符串,数值,对象,布尔,null,undefined<br />
  18. 18. Javascript运算符<br />思考:如果把数字与字符串相加,结果?<br />
  19. 19. Javascript运算符<br />条件运算符<br />JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。<br />语法<br />variablename=(condition)?value1:value2 <br />例子<br />greeting=(visitor=="PRES")?"Dear President ":"Dear ";<br />
  20. 20. Javascript条件语句<br />if 语句<br />在一个指定的条件成立时执行代码。<br />if...else 语句<br />在指定的条件成立时执行代码,当条件不成立时执行另外的代码。<br />if...else if....else 语句<br />使用这个语句可以选择执行若干块代码中的一个。<br />switch 语句<br />使用这个语句可以选择执行若干块代码中的一个。<br />
  21. 21. Javascript循环<br />For<br />将一段代码循环执行指定的次数<br />while<br />当指定的条件为 true 时循环执行代码<br />do...while <br />do...while 循环是 while 循环的变种。<br />break 语句<br />使用 break 语句来终止循环。<br />continue 语句<br />使用 continue 语句来终止当前的循环,然后从下一个值继续执行。<br />
  22. 22. Javascript for…in循环<br />For...In 声明用于对数组或者对象的属性进行循环操作。<br />语法:<br />for (变量 in 对象) { <br /> 在此执行代码<br />}<br />“变量”用来指定变量,指定的变量可以是数组下标,也可以是对象的属性。<br />实例<br />
  23. 23. Javascript消息框<br />可以在 JavaScript 中创建三种消息框:警告框、确认框<br />警告框<br />警告框经常用于确保用户可以得到某些信息。<br />当警告框出现后,用户需要点击确定按钮才能继续进行操作。<br />语法:<br />alert(“文本”);<br />确认框<br />确认框用于使用户可以验证或者接受某些信息。<br />当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。<br />如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。<br />语法:<br />confirm("文本")<br />
  24. 24. Javascript函数<br /><html><br /><head><br /><script type="text/javascript"><br />function displaymessage()<br />{<br /> alert("Hello World!")<br />}<br /></script><br /></head><br /><body><br /><form><br /><input type="button" value="Click me!" onclick="displaymessage()" ><br /></form><br /></body><br /></html><br />实例<br />
  25. 25. Javascript事件<br />事件<br />JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。<br />网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick事件来触发某个函数。事件在 HTML 页面中定义。<br />事件举例:<br />鼠标点击<br />页面或图像载入<br />鼠标悬浮于页面的某个热点之上<br />在表单中选取输入框<br />确认表单<br />键盘按键<br />实例<br />
  26. 26. Javascript try…catch语句<br />Try...Catch 语句<br />try...catch 可以测试代码中的错误。try 部分包含需要运行的代码,而 catch 部分包含错误发生时运行的代码。<br />语法:<br />try { <br /> //在此运行代码 <br />} <br />catch(err) { <br /> //在此处理错误<br />}<br />实例<br />
  27. 27. Javascript面向对象<br />JavaScript 是面向对象的编程语言 (OOP)。OOP 语言使我们有能力定义自己的对象和变量类型。<br />注意:对象只是一种特殊的数据。对象拥有属性和方法<br />属性:指与对象有关的值。<br /><script type="text/javascript"> <br />var txt="Hello World!" ;<br />document.write(txt.length) ;<br /></script><br />方法:指对象可以执行的行为<br /><script type="text/javascript"><br />varstr="Hello world!”;<br />document.write(str.toUpperCase());<br /></script><br />实例<br />
  28. 28. Javascript内置对象<br />●  String对象:处理所有的字符串操作<br />●  Math对象:处理所有的数学运算<br />●  Date对象:处理日期和时间的存储、转化和表达<br />●  Array对象:提供一个数组的模型、存储大量有序的数据<br />●  Event对象:提供JavaScript事件的各种处理信息<br />内置对象都有自己的方法和属性,访问的方法如下:<br />   <br />对象名.属性名称 txt.length<br />对象名.方法名称 str.toUpperCase() <br />实例<br />
  29. 29. Javascript数组对象<br />Array 对象<br />Array 对象用于在单个的变量中存储多个值。<br />创建 Array 对象的语法:<br />new Array(); <br />new Array(size); <br />new Array(element0, element1, ..., elementn); <br />实例<br />
  30. 30. Javascript RegExp<br />RegExp是正则表达式的缩写。<br />当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp就是这种模式。<br />exec()<br />exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。<br />例:<br />var patt1=new RegExp("e"); <br />document.write(patt1.exec("The best things in life are free")); <br />实例<br />
  31. 31. Javascript DOM<br />除了内置的 JavaScript 对象以外,你还可以使用 JavaScript 访问并处理所有的 HTML DOM 对象。<br />
  32. 32. Javascript 自定义对象<br />var Person = {<br /> name: “Tom”, //属性<br /> age: 20, //属性<br /> introduction: function() { //方法<br /> alert("My name is " + this.name + ", my age is " + this.age);<br /> }<br /> }<br />实例<br />
  33. 33. Javascript  函数?数组?对象?<br />数据的本质:<br />第一种类型是scalar(标量),一个单独的string或数字,比如“北京”这个单独的词。<br />第二种类型是sequence(序列),若干个相关的数据按照一定顺序并列在一起,又叫做array(数组)或List(列表),比如“北京,南京,东京”。<br />第三种类型是map(映射),一个键/值对(Key/value),又称作hash(散列)或dictionary(字典),比如“首都:北京”。<br />json四规则正好剖析了javascript描述数据的方式::<br /><ul><li>并列的数据之间用逗号(” , ”)分隔。
  34. 34. 映射用冒号(” : ”)表示。
  35. 35. 并列数据的集合(数组)用方括号('[ ]')表示。
  36. 36. 映射的集合(对象)用大括号(”{ }”)表示。</li></li></ul><li>Javascript  函数?数组?对象?<br />function user(n, a){<br /> this.name = n;<br />this.age = a;<br />this.toString = function() {<br /> return 'Name:' + this.name + ', Age:' + this.age;<br /> }<br />}<br />var user = new Array();<br />user['name']='tom';<br />user['age']=18;<br />user['toString']=function(){<br /> return 'Name:' + this.name + ', Age:' + this.age;<br />}<br />var u = {<br /> 'name':'tom',<br /> 'age':18<br />}<br />u.toString = function(){<br />return 'Name:' + this.name + ', Age:' + this.age;<br />};<br />
  37. 37. Javascript  函数?数组?对象?<br />由以上这些代码可以看出:<br />所有的javascript对象,包括Array对象在内实际上就是一个哈希表,属性名称就是哈希表的key,而属性的值就是哈希表的值。<br />Array对象与通常意义的数组对象并不相关,通常的数组仅能通过下标来定位,而javascript中的Array却可以像哈希表一个通过key来定位集合中的对象。<br />可以将一个function直接作为值赋给对象的“哈希表”<br />
  38. 38. Javascript  函数?数组?对象?<br />关于数组与映射的不同,可以看下面这个例子:<br />var m = {<br />name:'keel',<br /> age:5<br />}<br />var a = [m,'sss',3];<br />alert(m['name']);<br />alert(a[0]['name']);//a[0]定位到m<br />alert(a[0].name);<br />alert(m[0]); //能执行?<br /><ul><li>从定位到成员的方法来看,映射使用key来定位其中的成员,而数组使用下标,映射无法使用下标定位,同样数组也无法使用key(理所当然,根本就没有key);
  39. 39. 从表示方法来看,映射可以使用类似对象属性的方式来访问(如:m.name),也可以使用带key的[]方式(如:m['name'],这是javascript一个特例,看上去像数组,实际上仍是映射);但数组仅能使用下标的方式;
  40. 40. 从顺序来看:数组是有顺序的,映射是无序的;</li></li></ul><li>Javascript  趣味题<br /><html><br /> <head><br /> <title></title><br /> <meta http-equiv="Content-Type" content="text/html; charset=GBK"><br /> <script type="text/javascript"><br /> ( $ = [] [“sort”] ) () [“alert”] (1) ; //无视空格,能执行否?答案?<br /> </script><br /> </head><br /> <body><br /> </body><br /></html><br />答案<br />
  41. 41. Javascript XML HTML<br />XML 被设计用来传输和存储数据。<br />HTML 被设计用来显示数据。<br />XML 与 HTML 的主要差异:<br />XML 不是 HTML 的替代。<br />XML 和 HTML 为不同的目的而设计:<br />XML 被设计为传输和存储数据,其焦点是数据的内容。<br />HTML 被设计用来显示数据,其焦点是数据的外观。<br />HTML 旨在显示信息,而 XML 旨在传输信息。<br />XML 应用于 web 开发的许多方面,常用于简化数据的存储和共享。<br />
  42. 42. Javascript AJAX AJAJ<br />AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML)。<br />AJAX 是一种在 2005 年由 Google 推广开来的编程模式。<br />AJAX 不是一种新的编程语言,而是一种使用现有标准的新方法。<br />通过 AJAX,你可以创建更好、更快以及更友好的 WEB 应用程序。<br />AJAX 基于 JavaScript 和 HTTP 请求(HTTP requests)。<br />AJAJ? <br />J=JSON<br />
  43. 43. Javascript AJAX<br />XMLHttpRequest是 AJAX 的基础。<br />XMLHttpRequest对象:<br />所有现代浏览器均支持 XMLHttpRequest对象<br />(IE5 和 IE6 使用 ActiveXObject)。<br />XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。<br />实例<br />
  44. 44. Javascript XMLHttpRequest<br />
  45. 45. Javascript XML Element<br />XML文件<br />Element 对象表示 XML 文档中的元素。<br />元素可包含属性、其他元素或文本。如果元素含有文本,则在文本节点中表示该文本。<br />文本永远存储在文本节点中。在 DOM 处理过程中的一个常见的错误是,导航到元素节点,并认为此节点含有文本。不过,即使最简单的元素节点之下也拥有文本节点。举例,在 <year>2005</year> 中,有一个元素节点(year),同时此节点之下存在一个文本节点,其中含有文本(2005)。<br />读取XML子节点<br />读取XML指定节点<br />遍历XML<br />
  46. 46. Javascript  POST<br />GET 还是 POST?<br />与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。<br />然而,在以下情况中,请使用 POST 请求:<br />无法使用缓存文件(更新服务器上的文件或数据库)<br />向服务器发送大量数据(POST 没有数据量限制)<br />发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠<br />
  47. 47. Javascript 缓存?GET POST<br />由于cache的基准是以URL为对象,如果传递的参数不同时,很难发现cache的存在。<br />为了解决这个问题,可以使用一些小伎俩,例如将URL参数改为传入“get.php?"再加上日期时间,强迫URL每次都不一样,而使得浏览器不会传回cache中的档案。<br /> 不过最简单的方法,就是将GET改成POST,就一切正常了。何乐而不为?<br />GET与POST的这点差异,主要是因为GET原始设计的语意,就是单纯的查询,只要是相同的查询条件(传递的参数内容),不论查询几次都应该传回相同的结果。 由于这样的原因,浏览器端的就会把GET的response给cache下来。 反观POST,原本的语意就是将资料推送给服务端处理,所以浏览器就不应该自作聪明,不等待服务器的处理而自行取用cache。<br />
  48. 48. Javascript  AJAX POST<br />xmlhttp.open("POST","ajax_post.php",true); //发送post请求<br />xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); <br />//设置http头 <br />xmlhttp.send("name=taozi&sex=man");<br />实例<br />
  49. 49. Javascript 跨域<br />为什么会有跨域问题?<br />Web浏览器必须遵守同源策略,因此客户端的Ajax应用程序一般不能与第三方服务器通信。这一策略规定JavaScript代码只能访问其来源服务器上的数据。事实上,这一策略是非常必要的。如果没有这个策略,那么在另一个域的另一个窗口中运行的JavaScript就有可能修改当前窗口中的HTML。<br />同源策略,它是由Netscape提出的一个著名的安全策略,现在所有的可支持javascript的浏览器都会使用这个策略。<br />   <br /> 假设现在没有同源策略,会发生什么事情呢?<br />大家知道,JavaScript可以做很多东西,比如:读取/修改网页中某个值。恩,你现在打开了浏览器,在一 个tab窗口中打开了银行网站,在另外一个tab窗口中打开了一个恶意网站,而那个恶意网站挂了一个的专门修改银行信息<br />的JavaScript,当你访问 这个恶意网站并且执行它JavaScript时,你的银<br />行页面就会被这个JavaScript修改!<br />
  50. 50. Javascript 跨域<br /><script><br />Varurl=“跨域的url”;<br /> something ; //Get the data from url;<br /></script><br /><script src=“abc.js”></script><br />实例(返回字符串)<br />实例(返回回调函数)<br />
  51. 51. Javascript  JSONP<br />JSONP即JSON with Padding。<br />由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。<br />很明显,JSONP是一种脚本注入(Script Injection)行为,需要特别注意其安全性。JSONP服务器端代码需要充分做好安全措施。 <br />谁在用jsonp?<br />搜狗云输入法,google,豆瓣,Jquery,Kissy,dojo,youtube,<br />digg,delicious<br />
  52. 52. Javascript  JSONP<br />Js:<br />function jsonpHandle(a){ <br /> alert(a); <br />} <br />var JSONP = document.createElement("script") ; <br />JSONP.type = "text/javascript"; <br />JSONP.src = "http://yourdomain/jsonp.php?callback=jsonpHandle";<br />//在head之后添加js文件 <br />document.getElementsByTagName("head")[0].appendChild(JSONP);<br />Php:<br />echo $_GET["callback"]."('hello,world')"; <br />
  53. 53. Javascript 框架<br />YUI ? Jquery? Kissy ?<br />Jquery是汇编而YUI是VB。(无褒贬)YUI的特性是体积大而且功能齐全它的代码经过了大量的实践与使用,被证明是可靠的。统一的UI风格,齐全的功能,稳定,都是它的优点。<br />Jquery小巧,插件众多,灵活。<br /> YUI:企业网站、超大型网站、WEB形式的应用程序开发速度、运行的稳定性大于打开速度,或者拥有CDN的网站。<br />以下场合适合jquery:简单,小型网站,小团队开发<br />
  54. 54. Javascript 框架<br />YUI ? Kissy ? 淘宝 ?<br />淘宝使用YUI:<br />拥有CDN,速度影响不大,稳定可靠<br />普通网站不应该使用YUI:<br />带宽质量各地不一<br />不需要这么多齐全的功能<br />能应付主流浏览器即可,细节的差异影响不大<br />如果超大型网站使用jQuery:<br />需要开发很多功能,成本高<br />开发出来的未必成熟<br />复杂的客户端环境<br />插件良莠不齐<br />
  55. 55. Javascript Jquery<br />Write less , do more<br />
  56. 56. Javascript Jquery<br />增加节点,原生js实现:<br />function addPeach(){<br />vari=1;<br />var pp=document.createElement("strong");<br />pp.textContent="增加"+(i++)+"个桃子";<br />document.getElementById("name").appendChild(pp);<br />varbr=document.createElement("br");<br />document.getElementById("name").appendChild(br);<br /> }<br /> <div id="name"></div><button onclick="addPeach()">设置</button><br />实例<br />
  57. 57. Javascript Jquery<br />增加节点,jquery实现:<br /> $("#name").append("<strong>增加"+(i++)+"个桃子</strong><br/>");<br />实例<br />
  58. 58. Javascript Jquery跨域<br />$.ajax({<br />url: url,<br />dataType: 'json',<br /> data: data,<br /> success: callback<br />});<br />$.getJSON()<br />$.getScript()<br />Kissy.getScript() //淘宝商城跨域获取cookie,一淘跨域<br />
  59. 59. Javascript Jquery跨域<br />实例<br />
  60. 60. Javascript 闭包!<br />什么是闭包?<br />全局变量,局部变量?<br /> function addPeach(){<br />vari=1;<br /> $("#name").append("<strong>增加"+(i++)+"个桃子</strong><br/>");<br /> }<br />实例<br />闭包就是能够读取其他函数内部变量的函数。<br />由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,<br />因此可以把闭包简单理解成"定义在一个函数内部的函数"。<br />在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。<br />
  61. 61. Javascript 闭包!<br />function f1(){<br />    var n=999;<br />    nAdd=function(){<br /> n+=1;<br /> }<br />    function f2(){<br />      alert(n);<br />    }<br />    return f2;<br />  }<br /> var result=f1();<br /> result(); // 999<br /> nAdd();<br /> result(); // ???<br />危害?<br />
  62. 62. Javascript 调试<br />实例<br />
  63. 63. Javascript 案例分析<br />淘宝登陆<br />直接打开淘宝商城<br />为何自动登录?<br />JS脚本<br />安全隐患?<br />
  64. 64. Javascript 服务端编程?<br />LAMP(linux/windows,apache/nginx/iis,mysql,php/python/perl/ruby)<br />LMJ (linux,mysql,Javascript)<br />Node.js js框架?<br />Node.JS是资深C程序员Ryan Dahl的作品,依据Google著名的开源JavaScript引擎V8来进行二次开发的Web I/O服务器(http://nodejs.org/)。V8本身是非常快的JavaScript引擎,处理JS执行运行的速度非常高。<br />Ab测试结果?<br />并发性差不多和nginx持平,在5000/s左右,几乎是apache的两倍。速度,跑起来几乎和C一样快,是Python的20倍。<br />
  65. 65. Javascript  node.js<br />Evented I/O for V8 JavaScript.<br />An example of a web server written in Node which responds with "Hello World" for every request.<br />var http = require('http');<br />http.createServer(function (req, res) {<br />res.writeHead(200, {'Content-Type': 'text/plain'});<br />res.end('Hello Worldn');<br />}).listen(8124, "127.0.0.1");<br />console.log('Server running at http://127.0.0.1:8124/');<br />To run the server, put the code into a file example.js and execute it <br />with the node program:<br />node example.js<br />Server running at http://127.0.0.1:8124/<br />
  66. 66. Javascript 学习资料<br />http://www.w3school.com.cn/js/index.asp<br />http://jquery.com/<br />http://www.google.com.hk<br />入门:《JavaScript DOM 编程艺术 》 <br />基础:《JavaScript 权威指南》<br />进阶: 《高性能Javascript》<br />
  67. 67. UED what is this?<br />UED:user experience design<br />WD:Web Develop<br />PD:Product Design <br />ID:Interactive Design<br />VD:Visual Design<br />UD:user researcher<br />博客:<br />http://ued.taobao.com/<br />http://ued.alipay.com/<br />http://ued.koubei.com/<br />http://www.aliued.cn/<br />http://uedc.163.com/<br />http://cdc.tencent.com/<br />http://www.sndaued.com/<br />http://www.19ued.com/<br />
  68. 68. Javascript so easy ?<br />VIA 小马<br /> Java和JavaScript是雷锋和雷峰塔的区别<br />编程语言,只是我们工作的工具 <br />岗位名称,只表示我们工作内容的偏重。<br />后端研发工程师对编译性语言/数据库要求高一些<br />前端研发工程师对JavaScript/HTML/CSS要求高一些而已<br />有前端基础的后端工程师更容易找的满意的工作<br />有后端基础的前端工程师更容易找到满意的工作 <br />先学什么都可以不要生硬的割裂前端和后端,多学总没有坏处。<br />HTML/CSS/JavaScript 看起来门槛不高,要做好其实非常不容易,原生的脚本要去耐心学习。你对闭包和http请求了解的程度?安全呢?<br />实践,实践,尽可能的寻找机会实践,在实践中快速学习和明确你的<br />方向。不要找任何理由,没有机会,就创造机会。<br />
  69. 69. Q & Ahttp://weibo.com/minipeach<br />

×