追风堂 Javascript

JavaScript桃子搜索技术 —主搜索—搜索应用开发

目录JavaScript是什么JavaScript使用场景JavaScript基础语法如何使用JavaScriptJavaScript跨域如何调试JavaScript案例分析

JavaScript是什么在Web时代的早期，HTML相当简单，很容易就能够掌握设计网页所需知道的一切。随着Web的发展，页面设计人员的期望值也提高了，他们希望对页面的外观有更大的控制能力，这使HTML变得越来越复杂了。因为Web是一种动态的媒体，页面设计人员还希望他们的页面能够与用户进行交互，HTML很快就显得不足以满足这一需求了。Netscape（网景）发明了JavaScript，作为控制浏览器和给网页添加活力和交互性的方法。

JavaScript是什么JavaScript是一种易学易用的脚本语言，目的是面向与用户动态交互的脚本开发，扩展HTML页面的功能，而不是开发大型复杂的程序，所以相对而言，JavaScript的语法规则较少而且较为简单。但作为一门编程语言，它有自己的语法规则，自己的关键字、指令和对象。JavaScript 被设计用来向 HTML 页面添加交互行为。JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。JavaScript 由数行可执行计算机代码组成。JavaScript 通常被直接嵌入 HTML 页面。JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。所有的人无需购买许可证均可使用 JavaScript。

JavaScript？JScript？JScript是 Microsoft 公司对 ECMA 262 语言规范（ECMAScript编辑器 3）的一种实现。除了少数例外（为了保持向后兼容），JScript完全实现了 ECMA 标准。JScript是一种解释型的、基于对象的脚本语言。 Jscript是微软版的JavaScript，与JavaScript基本一致. 如果你这样写： <script> </script> 不声明脚本版本的话，在IE里默认用Jscript，在Netscape里默认用JavaScript 脚本语言本身和浏览器版本无关，JavaScript就是JavaScript，永远是Netscape公司的JavaScript，永远首先默认支持NS；JScript永远就是MS的JScript，IE永远默认首先支持JScript，其实只是MS和NS之间的积怨罢了，于我们这些使用者本无区别......

JavaScript 引擎加速实例

V8引擎V8是Google Chrome浏览器内置的JavaScript脚本引擎。V8引擎编译和执行JavaScript源代码。Google Chrome使用V8的API，但引擎的内核部分是独立于浏览器之外的。速度是V8追求的主要设计目标之一，它把JavaScript代码直接编译成机器码运行，比起传统的“中间代码+解释器”的引擎，优势不言而喻。 V8的团队说Chrome对脚本的解析和执行速度是Firefox和Safari的10倍，是IE的56倍。

JavaScript 是什么前台语言：Visual Basic，Delphi，JavaScript平台语言：Java，C#后台脚本语言：Perl，PHP，Python，Ruby系统语言：C，C++，汇编思考：编译？解释？

HTML，XHTML，DHTML，DOM，CSSHTML 指超文本标记语言，是通向 WEB 技术世界的钥匙。XHTML 是更严谨更纯净的 HTML 版本。DHTML 是一种使 HTML 页面具有动态特性的艺术。（D=dynamic）对大多数人来说，DHTML 意味着 HTML、样式表(CSS)和 JavaScript 的组合。DOM 文档对象模型，定义了访问和操作HTML文档的标准方法。CSS 层叠样式表 (Cascading Style Sheets)

HTML 5HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。特性：用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素，比如 article、footer、header、nav、section新的表单控件，比如 calendar、date、time、email、url、search

Javascript使用场景JavaScript是一种基于客户端浏览器的语言，用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的，即使是必须调用后端服务的部分，浏览器只将用户输入验证后的信息提交给远程的服务器，大大减少了服务器的开销。游戏开发

Javascript能做什么JavaScript 为 HTML 设计师提供了一种编程工具JavaScript 可以将动态的文本放入 HTML 页面JavaScript 可以对事件作出响应JavaScript 可以读写 HTML 元素JavaScript 可被用来验证数据JavaScript 可被用来检测访问者的浏览器JavaScript 可被用来创建 cookies

Javascript语法<html><head><title>JavaScript的Hello World程式</title> <script type="text/javascript">document.write("Hello, world!"); //直接在瀏覽器視窗顯示。alert("Hello, world!"); //開啟對話視窗顯示。 </script></head><body>HTML 本文……</body></html>实例

Javascript放到何处head 部分：包含函数的脚本位于文档的 head 部分。这样我们就可以确保在调用函数前，脚本已经载入了。body 部分：执行位于 body 部分的脚本。外部 JavaScript：如何访问外部脚本。<html><head><script src="xxx.js">....</script></head><body></body></html>

Javascript语法执行顺序：实例注释：单行的注释以 // 开始。多行注释以 /* 开头，以 */ 结尾。

Javascript变量变量对大小写敏感（y 和 Y 是两个不同的变量）变量必须以字母或下划线开始这些语句：x=5; carname="Volvo"; 与这些语句的效果相同：var x=5; varcarname="Volvo"; 数据类型：字符串，数值，对象，布尔，null，undefined

Javascript运算符思考：如果把数字与字符串相加，结果？

Javascript运算符条件运算符JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。语法variablename=(condition)?value1:value2 例子greeting=(visitor=="PRES")?"Dear President ":"Dear ";

Javascript条件语句if 语句在一个指定的条件成立时执行代码。if...else 语句在指定的条件成立时执行代码，当条件不成立时执行另外的代码。if...else if....else 语句使用这个语句可以选择执行若干块代码中的一个。switch 语句使用这个语句可以选择执行若干块代码中的一个。

Javascript循环For将一段代码循环执行指定的次数while当指定的条件为 true 时循环执行代码do...while do...while 循环是 while 循环的变种。break 语句使用 break 语句来终止循环。continue 语句使用 continue 语句来终止当前的循环，然后从下一个值继续执行。

Javascript for…in循环For...In 声明用于对数组或者对象的属性进行循环操作。语法：for (变量 in 对象) { 在此执行代码}“变量”用来指定变量，指定的变量可以是数组下标，也可以是对象的属性。实例

Javascript消息框可以在 JavaScript 中创建三种消息框：警告框、确认框警告框警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法：alert(“文本”);确认框确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。语法：confirm("文本")

Javascript函数<html><head><script type="text/javascript">function displaymessage(){ alert("Hello World!")}</script></head><body><form><input type="button" value="Click me!" onclick="displaymessage()" ></form></body></html>实例

Javascript事件事件JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick事件来触发某个函数。事件在 HTML 页面中定义。事件举例：鼠标点击页面或图像载入鼠标悬浮于页面的某个热点之上在表单中选取输入框确认表单键盘按键实例

Javascript try…catch语句Try...Catch 语句try...catch 可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码。语法：try { //在此运行代码 } catch(err) { //在此处理错误}实例

Javascript面向对象JavaScript 是面向对象的编程语言 (OOP)。OOP 语言使我们有能力定义自己的对象和变量类型。注意：对象只是一种特殊的数据。对象拥有属性和方法属性：指与对象有关的值。<script type="text/javascript"> var txt="Hello World!" ;document.write(txt.length) ;</script>方法：指对象可以执行的行为<script type="text/javascript">varstr="Hello world!”;document.write(str.toUpperCase());</script>实例

Javascript内置对象● String对象：处理所有的字符串操作● Math对象：处理所有的数学运算● Date对象：处理日期和时间的存储、转化和表达● Array对象：提供一个数组的模型、存储大量有序的数据● Event对象：提供JavaScript事件的各种处理信息内置对象都有自己的方法和属性，访问的方法如下：对象名.属性名称 txt.length对象名.方法名称 str.toUpperCase() 实例

Javascript数组对象Array 对象Array 对象用于在单个的变量中存储多个值。创建 Array 对象的语法：new Array(); new Array(size); new Array(element0, element1, ..., elementn); 实例

Javascript RegExpRegExp是正则表达式的缩写。当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp就是这种模式。exec()exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。例：var patt1=new RegExp("e"); document.write(patt1.exec("The best things in life are free")); 实例

Javascript DOM除了内置的 JavaScript 对象以外，你还可以使用 JavaScript 访问并处理所有的 HTML DOM 对象。

Javascript 自定义对象var Person = { name: “Tom”, //属性 age: 20, //属性 introduction: function() { //方法 alert("My name is " + this.name + ", my age is " + this.age); } }实例

Javascript 函数？数组？对象？数据的本质：第一种类型是scalar（标量），一个单独的string或数字，比如“北京”这个单独的词。第二种类型是sequence（序列），若干个相关的数据按照一定顺序并列在一起，又叫做array（数组）或List(列表)，比如“北京，南京，东京”。第三种类型是map（映射），一个键/值对（Key/value），又称作hash（散列）或dictionary（字典），比如“首都：北京”。json四规则正好剖析了javascript描述数据的方式:：并列的数据之间用逗号（” , ”）分隔。

映射用冒号（” : ”）表示。

并列数据的集合（数组）用方括号('[ ]')表示。

映射的集合（对象）用大括号（”{ }”）表示。Javascript 函数？数组？对象？function user(n, a){ this.name = n;this.age = a;this.toString = function() { return 'Name:' + this.name + ', Age:' + this.age; }}var user = new Array();user['name']='tom';user['age']=18;user['toString']=function(){ return 'Name:' + this.name + ', Age:' + this.age;}var u = { 'name':'tom', 'age':18}u.toString = function(){return 'Name:' + this.name + ', Age:' + this.age;};

Javascript 函数？数组？对象？由以上这些代码可以看出：所有的javascript对象,包括Array对象在内实际上就是一个哈希表,属性名称就是哈希表的key，而属性的值就是哈希表的值。Array对象与通常意义的数组对象并不相关，通常的数组仅能通过下标来定位，而javascript中的Array却可以像哈希表一个通过key来定位集合中的对象。可以将一个function直接作为值赋给对象的“哈希表”

Javascript 函数？数组？对象？关于数组与映射的不同，可以看下面这个例子：var m = {name:'keel', age:5}var a = [m,'sss',3];alert(m['name']);alert(a[0]['name']);//a[0]定位到malert(a[0].name);alert(m[0]); //能执行？从定位到成员的方法来看，映射使用key来定位其中的成员，而数组使用下标，映射无法使用下标定位，同样数组也无法使用key（理所当然，根本就没有key）；

从表示方法来看，映射可以使用类似对象属性的方式来访问（如:m.name），也可以使用带key的[]方式（如:m['name']，这是javascript一个特例，看上去像数组，实际上仍是映射）；但数组仅能使用下标的方式；

从顺序来看：数组是有顺序的，映射是无序的；Javascript 趣味题<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <script type="text/javascript"> ( $ = [] [“sort”] ) () [“alert”] (1) ; //无视空格，能执行否？答案？ </script> </head> <body> </body></html>答案

Javascript XML HTMLXML 被设计用来传输和存储数据。HTML 被设计用来显示数据。XML 与 HTML 的主要差异：XML 不是 HTML 的替代。XML 和 HTML 为不同的目的而设计：XML 被设计为传输和存储数据，其焦点是数据的内容。HTML 被设计用来显示数据，其焦点是数据的外观。HTML 旨在显示信息，而 XML 旨在传输信息。XML 应用于 web 开发的许多方面，常用于简化数据的存储和共享。

Javascript AJAX AJAJAJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。AJAX 是一种在 2005 年由 Google 推广开来的编程模式。AJAX 不是一种新的编程语言，而是一种使用现有标准的新方法。通过 AJAX，你可以创建更好、更快以及更友好的 WEB 应用程序。AJAX 基于 JavaScript 和 HTTP 请求（HTTP requests）。AJAJ？ J=JSON

Javascript AJAXXMLHttpRequest是 AJAX 的基础。XMLHttpRequest对象：所有现代浏览器均支持 XMLHttpRequest对象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。实例

Javascript XML ElementXML文件Element 对象表示 XML 文档中的元素。元素可包含属性、其他元素或文本。如果元素含有文本，则在文本节点中表示该文本。文本永远存储在文本节点中。在 DOM 处理过程中的一个常见的错误是，导航到元素节点，并认为此节点含有文本。不过，即使最简单的元素节点之下也拥有文本节点。举例，在 <year>2005</year> 中，有一个元素节点（year），同时此节点之下存在一个文本节点，其中含有文本（2005）。读取XML子节点读取XML指定节点遍历XML

Javascript POSTGET 还是 POST？与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：无法使用缓存文件（更新服务器上的文件或数据库）向服务器发送大量数据（POST 没有数据量限制）发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

Javascript 缓存？GET POST由于cache的基准是以URL为对象，如果传递的参数不同时，很难发现cache的存在。为了解决这个问题，可以使用一些小伎俩，例如将URL参数改为传入“get.php?"再加上日期时间，强迫URL每次都不一样，而使得浏览器不会传回cache中的档案。不过最简单的方法，就是将GET改成POST，就一切正常了。何乐而不为？GET与POST的这点差异，主要是因为GET原始设计的语意，就是单纯的查询，只要是相同的查询条件（传递的参数内容），不论查询几次都应该传回相同的结果。由于这样的原因，浏览器端的就会把GET的response给cache下来。反观POST，原本的语意就是将资料推送给服务端处理，所以浏览器就不应该自作聪明，不等待服务器的处理而自行取用cache。

Javascript AJAX POSTxmlhttp.open("POST","ajax_post.php",true); //发送post请求xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //设置http头 xmlhttp.send("name=taozi&sex=man");实例

Javascript 跨域为什么会有跨域问题？Web浏览器必须遵守同源策略，因此客户端的Ajax应用程序一般不能与第三方服务器通信。这一策略规定JavaScript代码只能访问其来源服务器上的数据。事实上，这一策略是非常必要的。如果没有这个策略，那么在另一个域的另一个窗口中运行的JavaScript就有可能修改当前窗口中的HTML。同源策略，它是由Netscape提出的一个著名的安全策略，现在所有的可支持javascript的浏览器都会使用这个策略。　　假设现在没有同源策略，会发生什么事情呢？大家知道，JavaScript可以做很多东西，比如：读取/修改网页中某个值。恩，你现在打开了浏览器，在一个tab窗口中打开了银行网站，在另外一个tab窗口中打开了一个恶意网站，而那个恶意网站挂了一个的专门修改银行信息的JavaScript，当你访问这个恶意网站并且执行它JavaScript时，你的银行页面就会被这个JavaScript修改！

Javascript 跨域<script>Varurl=“跨域的url”; something ; //Get the data from url;</script><script src=“abc.js”></script>实例（返回字符串）实例（返回回调函数）

Javascript JSONPJSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。很明显，JSONP是一种脚本注入(Script Injection)行为，需要特别注意其安全性。JSONP服务器端代码需要充分做好安全措施。谁在用jsonp？搜狗云输入法，google，豆瓣，Jquery，Kissy，dojo，youtube，digg，delicious

Javascript JSONPJs:function jsonpHandle(a){ alert(a); } var JSONP = document.createElement("script") ; JSONP.type = "text/javascript"; JSONP.src = "http://yourdomain/jsonp.php?callback=jsonpHandle";//在head之后添加js文件 document.getElementsByTagName("head")[0].appendChild(JSONP);Php:echo $_GET["callback"]."('hello,world')";

Javascript 框架YUI ? Jquery? Kissy ?Jquery是汇编而YUI是VB。（无褒贬）YUI的特性是体积大而且功能齐全它的代码经过了大量的实践与使用，被证明是可靠的。统一的UI风格，齐全的功能，稳定，都是它的优点。Jquery小巧，插件众多，灵活。 YUI：企业网站、超大型网站、WEB形式的应用程序开发速度、运行的稳定性大于打开速度，或者拥有CDN的网站。以下场合适合jquery：简单，小型网站，小团队开发

Javascript 框架YUI ? Kissy ? 淘宝？淘宝使用YUI：拥有CDN，速度影响不大，稳定可靠普通网站不应该使用YUI：带宽质量各地不一不需要这么多齐全的功能能应付主流浏览器即可，细节的差异影响不大如果超大型网站使用jQuery：需要开发很多功能，成本高开发出来的未必成熟复杂的客户端环境插件良莠不齐

Javascript JqueryWrite less , do more

Javascript Jquery增加节点，原生js实现：function addPeach(){vari=1;var pp=document.createElement("strong");pp.textContent="增加"+(i++)+"个桃子";document.getElementById("name").appendChild(pp);varbr=document.createElement("br");document.getElementById("name").appendChild(br); } <div id="name"></div><button onclick="addPeach()">设置</button>实例

Javascript Jquery增加节点，jquery实现： $("#name").append("<strong>增加"+(i++)+"个桃子</strong><br/>");实例

Javascript Jquery跨域$.ajax({url: url,dataType: 'json', data: data, success: callback});$.getJSON()$.getScript()Kissy.getScript() //淘宝商城跨域获取cookie，一淘跨域

Javascript Jquery跨域实例

Javascript 闭包！什么是闭包？全局变量，局部变量？ function addPeach(){vari=1; $("#name").append("<strong>增加"+(i++)+"个桃子</strong><br/>"); }实例闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

Javascript 闭包！function f1(){　　　　var n=999;　　　　nAdd=function(){ n+=1; }　　　　function f2(){　　　　　　alert(n);　　　　}　　　　return f2;　　}　var result=f1();　result(); // 999　nAdd();　result(); // ？？？危害？

Javascript 案例分析淘宝登陆直接打开淘宝商城为何自动登录？JS脚本安全隐患？

Javascript 服务端编程？LAMP（linux/windows，apache/nginx/iis，mysql，php/python/perl/ruby）LMJ （linux，mysql，Javascript）Node.js js框架？Node.JS是资深C程序员Ryan Dahl的作品，依据Google著名的开源JavaScript引擎V8来进行二次开发的Web I/O服务器（http://nodejs.org/）。V8本身是非常快的JavaScript引擎，处理JS执行运行的速度非常高。Ab测试结果？并发性差不多和nginx持平，在5000/s左右，几乎是apache的两倍。速度，跑起来几乎和C一样快，是Python的20倍。

Javascript node.jsEvented I/O for V8 JavaScript.An example of a web server written in Node which responds with "Hello World" for every request.var http = require('http');http.createServer(function (req, res) {res.writeHead(200, {'Content-Type': 'text/plain'});res.end('Hello World\n');}).listen(8124, "127.0.0.1");console.log('Server running at http://127.0.0.1:8124/');To run the server, put the code into a file example.js and execute it with the node program:node example.jsServer running at http://127.0.0.1:8124/

Javascript 学习资料http://www.w3school.com.cn/js/index.asphttp://jquery.com/http://www.google.com.hk入门：《JavaScript DOM 编程艺术》基础：《JavaScript 权威指南》进阶：《高性能Javascript》

追风堂 Javascript

More Related Content

Viewers also liked

Similar to 追风堂 Javascript

追风堂 Javascript