二十—XMLHttpRequest和AJAX解决方案

最后更新于:2022-04-01 20:32:34

## 一、AJAX概述        AJAX是Asynchronous JavaScript and XML的缩写,中文译作异步JavaScript和XML。AJAX 不是新的编程语言,而是一种使用现有标准的新方法,在不重新加载页面的情况下,与服务器交换数据并更新部分网页的艺术。其核心是:客户端的Javascript能够与web服务器进行异步数据交换。 ## 二、AJAX基础---XMLHttpRequest对象       所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。        1、创建 XMLHttpRequest 对象的语法:              var obj1 = new XMLHttpRequest();;              IE5和IE6中,使用ActiveX对象:var obj2 = new ActiveXObject("Micorosoft.XMLHTTP");              可以用如下方式保持兼容: ~~~ var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } ~~~       2、XMLHttpRequest 对象的方法和属性       XMLHttpRequest 对象的方法和属性用来向服务器发送请求和从服务器获取响应。        2.1    发送请求:open()和send() open()方法用于创建一个请求,创建的HTTP请求并未发送,直到调用send()方法才被发送 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecbf1a22.jpg) method不区分大小写;URL可以是绝对或者相对地址;async默认为true,意味着并不会立即返回数据。string参数可选,用于定义发送请求的正文(最好用字符串格式,并且使用setRequestHeader()方法定义请求报头的内容内型及编码方式)。              2.2    setRequestHeader():设置请求报头,将和请求一同发送到服务端 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecc19717.jpg) ~~~ //如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。 //然后在 send() 方法中规定您希望发送的数据: xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates"); ~~~             2.3    abort():终止请求 ,没有参数。 ## 三、AJAX获取服务器响应       利用XMLHttpRequest对象和属性获取服务器的响应,包括HTTP报头和响应的正文。       1、xmlObj.getAllResponseHeaders():获取所有响应的报头,以字符串形式返回。每个HTTP报头名称和值用冒号分隔,如myheader:myvalue,并以\r\n结束。              2、xmlObj.getResponseHeader(param):获取响应中某个特定的字段值,参数param是一个响应的HTPP字段名。         3、responseText和responseXML属性               均为只读属性,用于返回服务器中响应的正文。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecc2cbac.jpg) ~~~ //responseText属性 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; ////responseXML属性 xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i"; } document.getElementById("myDiv").innerHTML=txt; ~~~        4、status和statusText属性              均为只读属性,用于判断响应状态。status表示响应中的状态码,如404,200等,statusText表示状态文本信息,如OK,Not Found。状态码和文本信息一一对应,常见如下: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecc413ad.jpg)                 [点击查看完整版。](http://blog.sina.com.cn/s/blog_674b5aae0100m95j.html)这两个属性仅在send()方法发送数据并接收到服务器响应完毕后才有效。         5、readyState属性               该属性表示HTTP请求的状态码,只读,返回一个整数,其值和说明如下:               0 描述一种"未初始化"状态;此时,已经创建一个xmlhttp[request](http://www.111cn.net/tags.php/request)对象,但是还没有初始化。          1 描述一种"发送"状态;此时,代码已经调用了xmlhttprequest open()方法并且xmlhttprequest已经准备好把一个请求发送到服务器。          2 描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。          3 描述一种"正在接收"状态;此时,已经接收到http响应头部信息,但是消息体部分还没有完全接收结束。          4 描述一种"已加载"状态;此时,响应已经被完全接收。 ## 四、onreadystatechange 事件    readyState 属性存有 XMLHttpRequest 的状态信息。每当 readyState 改变时,就会触发 onreadystatechange 事件。onreadystatechange属性可以指定一个函数,当状态改变就调用该函数。函数经常与readyState/status/statusText属性确定响应的具体状态 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecc5e093.jpg) ~~~ xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } ~~~ ## 五、解决请求被浏览器缓存的问题    在使用XMLHttpRequest时,要注意的一个问题是加载的内容可能被浏览器缓存。可以对URL参数作修改避免此问题。常用方法是加上一个随机数作为查询参数。 ~~~ xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true); //或者:xmlhttp.open("get","url"+(new Date()).getTime(),true); xmlhttp.send(); ~~~ ## 六、[点击看实例](http://blog.csdn.net/u011043843/article/details/32943397)
';

十九–HTML5 DOM新标准—处理文档元信息和管理交互能力

最后更新于:2022-04-01 20:32:32

## 一、了解DOM        1、DOM是Document Object Model的缩写,即文档对象类型,是文档在内存中的表示形式,是一个应用程序接口,定义了文档的逻辑结构以及一套访问和处理文档的方法。        2、HTML DOM与Core DOM的区别:前者提供了大量的方法和属性,与现有的程序模型一致,更便于脚本的编写者控制。 ## 二、document对象       使用window.document属性返回一个document对象,代表当前window内加载的文档。window可以省略。winName.document返回指定window对象内加载的文档,winName是一个窗口的名称。       1、处理文档元信息:HTMLDocument接口定义了document对象的部分属性用于返回文档的元信息和对document对象的操作方法 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecbae045.jpg) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecbc1ffd.jpg)     2、其他属性:           2.1   document.cookie:返回cookie的字符串形式,也可以给该属性复制用于创建cookie。           2.2   document.readyState:返回文档的状态,有三个可选值: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecbd8a6a.jpg)                  文档的状态变化会触发readystatechange事件         2.3    document.designModel:设置文档是否可编辑,值为on:HTML文档可以被编辑,等价于body的contenteditable属性为true,(但是此时会忽略元素的contenteditable属性);值为off:HTML文档不可以被编辑。 ## 三、编辑API       编辑API可以执行很多命令,这些命令模仿了属性设置和对象方法调用才能实现的功能,一般用于富文本编辑器。       1、document.execCommand(commandID[showIU[,value]]):第一个参数是执行的命令参数,其参数值参考文档:[http://blog.csdn.net/woshinia/article/details/18664903](http://blog.csdn.net/woshinia/article/details/18664903)       2、document.queryCommandEnabled(commandID):确定命令是否已经激活。       3、document.queryCommandIndeterm(commandID):确定命令是否是不确定的。       4、document.queryCommandState(commandID):确定命令的状态       5、document.queryCommandSupported(commandID):确定命令是否被支持,返回true或false       6、document.queryCommandValue(commandID):返回命令的值 PS:简单的富文本源码下载:[http://download.csdn.net/detail/u011043843/7501567](http://download.csdn.net/detail/u011043843/7501567)
';

十八:BOM新成就(1)–客户端存储数据(Web SQL DataBase实现)

最后更新于:2022-04-01 20:32:30

   使用本地存储和会话存储可以实现简单的对象持久化,可以对简单的键值对或对象进行存储。但是,对于比较复杂的关系数据进行处理时,就要用Web SQL Database.浏览器对Web SQL Database的支持情况如图: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecb60179.jpg) ## 一、如何使用Web SQL Database ~~~ Web SQL ~~~ 在google中的结果和Web SQL中的数据: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecb815d5.jpg) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecb95cff.jpg) ## 二、异步数据库        使用window.openDatabase()方法创建本地数据库连接或者建立与已经存在的数据库之间的连接,称为异步执行数据库。因为它的操作并非同步操作,而是需要很多回调函数来接收异步执行的结果。        1、var db = window.openDatabase(name,version,displayName,estimatedSize[,creationCallback]):返回一个Database对象。             name:定义的数据库名,区分大小写且唯一。             version:创建的数据库的版本,具有唯一性。             displayName:数据库的描述信息,一般用于说明数据库的用途。             estimatedSize:数据库的预计大小,以byte为大小,可以更改。             creationCallback:可选,数据库没有被创建时执行的回调函数。      2、执行数据库事务:数据库创建成功返回Database对象,可以执行数据库操作。数据库的操作都是事务的。            2.1   db.transaction(callback[,errorCallback[,sucessCallback]]):执行事务的读写操作。                             callBack:定义事务操作要执行的回调函数,该函数内执行的SQL操作都是事务的,要么全部成功或要么全部失败。该函数有一个SQLTransaction对象参数,该对象定义的方法执行SQL操作。                     errorCallback:定义事务操作失败时调用的函数,该函数有一个SQLError对象的参数。                     sucessCallback:定义事务操作成功时调用的函数,无参数。            2.2  db.readTransaction(callback[,errorCallback[,sucessCallback]]):执行事务的读操作,不可以进行写操作。参数同2.1.     3、数据库版本管理           db.changeVersion(oldVersion,newVersion[,callback[,errorCallback[,sucessCallback]]]):用于改变数据库的版本。后续三个可选的参数同2.1。oldVersion是当前版本号,一般设置为Database.version(该属性返回DB的版本号);newVersion:新版本号,为字符串类型。     4、执行SQL语句:SQLTransaction对象定义了executeSql()方法执行SQL操作。            tx.executeSql(sql[,arg[,callback[,errorCallback]]]):            sql:执行的SQL语句            arg:可选,定义替换参数化查询中"?"占位符的数组,若没有使用参数化查询,参数可以忽略或者为空。            callback:定义一个SQL操作成功时执行的回调函数,若不定义,可以设置为null。该回调函数有两个参数:第一个是SQLTransaction对象,第二个是SQLResult对象,表示执行的结果。            errorCallback:定义一个SQL操作失败时执行的回调函数,若不定义,可以设置为null。该回调函数有两个参数:第一个是SQLTransaction对象,第二个是SQLError对象。 ## 三、同步数据库      同步数据库操作仅用在worker内,不能用在网页中,但是在worker内可以使用异步数据库。目前仅有Chrome 6支持同步数据库。      1、创建连接:在worker()内用WorkerGlobalScope.openDatabaseSync()方法创建本地数据库或者建立已经存在的数据库之间的连接。称为同步数据库,不需要各种回调函数来处理数据库操作结果。            var db = self.openDatabaseSync(name,version,displayName,estimatedSize[,creationCallback]):返回一个DatabaseSync对象,参数同openDatabase()方法。     2、执行数据库事务:db.transaction(callback)[执行读写操作]和db.readTransaction(callback)[执行写操作],callback函数的参数是一个SQLTransactionSync对象,该对象定义的方法执行SQL操作。 ~~~ //事务操作的JS代码放在一个worker.js文件中 //在HTML中创建Worker并接收消息 if(window.Worker) { var worker = new Worker("worker.js"); .... } else { alert("不支持Worker"); } ~~~     3、数据库版本管理: db.changeVersion(oldVersion,newVersion[,callback]):用于改变数据库的版本。可选的参数同上。oldVersion是当前版本号,一般设置为DatabaseSync.version(该属性返回DB的版本号);newVersion:新版本号,为字符串类型。           4、执行SQL语句:SQLTransactionSync对象定义了executeSql()方法执行SQL操作。            var re=tx.executeSql(sql[,arg]):返回结果集            sql:执行的SQL语句            arg:可选,定义替换参数化查询中"?"占位符的数组。若没有使用参数化查询,参数可以忽略或者为空。         ## 四、处理数据库操作的结果        成功使用executeSql()方法执行的SQL返回一个执行结果,该结果作为executeSql()的参数返回,是一个SQLResult对象。 ~~~ interface SQLResult { readonly attribute long insertId; //返回记录行的ID readonly attribute long rowsAffected; //返回SQL语句改变的行数 readonly sttribute SQLResultRowList rows;//返回所有记录行,没有记录则返回空对象 } ~~~ SQLResultRowList对象由SQLResultSetRowList接口定义 ~~~ interface SQLResultSetRowList { readoonly attribute unsigned long length; //放回记录的行数 getter any item(in unsigned long index);//根据索引获取指定行,索引不存在返回null } ~~~ ## 五、SQL注入    使用参数化查询可以防止恶意SQL注入。参数化查询指定SQL语句中使用问号(?)作为参数占位符,为数据库访问应用程序开发提供了一种安全、封装性的方法,将输入交给数据库进行预处理。
';

十七:BOM新成就(1)–客户端存储数据(Storage实现)

最后更新于:2022-04-01 20:32:28

   数据构成了web站点的实际内容,这些数据多种多样,可以是独立的文件,也可以是位于某个数据库文件或者数据库服务器之中。现在,HTML 5 BOM允许在客户端实现较大规模的数据存储:一是web存储,二是Web SQL数据库存储。 ## 一、Web存储概述    Web存储机制是一种通过字符串形式的key/value对来安全的存储和使用数据的方法。Web存储和HTTP Cookie的区别在于:    1、容量不同:Web存储容量大、更安全、更易于使用;Cookie存储容量有很大的限制    2、存储的持久性也不同:Web存储是通过浏览器永久存储合理大小数据的数据方法,Cookie并没有为存储永久性的数据提供支持。 ## 二、Web存储的类型        1、在客户端存储数据的类型有以下两种:              1.1   localStorage:本地存储,没有时间限制的数据存储。              1.2   sessionStorage:会话存储,针对一个会话期的数据存储。                2、在客户端永久存储数据--创建Storage存储              localStorage存储的数据没有时间限制,可以永久使用。 ~~~ var oStorage = window.localStorage;//返回一个Storage对象,可以调用对应的方法和属性 oStorage.book = "javascript权威指南"; //添加键值 //window.localStorage.book = "javascript权威指南"; //查看键值 if(oStorage.book) { alert(oStorage.book); } else { alert("键值不存在"); } ~~~ 上图是google中的运行结果,中间图是google local storage存储的数据(ctrl+shift+i查看),下图是FF中的local storage存储的数据(ctrl+shift+k查看) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecab52b3.jpg) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecac7486.jpg) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecad8caf.jpg)    由于早期的FF没有显示localStorage,但是提供了globalstorage属性为指定域创建本地存储。可以用如下代码实现兼容:    var strDomain = "127.0.0.1";     var oStorage = window.localStorage? window.localStorage:window.globalStorage[strDomain]; ~~~ var strDomain = "127.0.0.1"; try { var oStorage = window.localStorage?window.localStorage:window.globalStorage[strDomain]; if(oStorage.visitorCount) { oStorage.visitorCount = parseInt(oStorage.visitorCount,10)+1; } else { oStorage.visitorCount = 1; } document.write("欢迎你第"+oStorage.visitorCount+"<\/span>次访问"); } catch(err) { alert(err.message?err.message:err.toString()); } ~~~ 在Google中的运行结果 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecaea374.jpg) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecb0a466.jpg) 关闭浏览器后,localStorage存储仍然存在,但是sessionStorage存储仅在会话期存在。    3、在会话期存储数据---创建sessionStorage           sessionStorage针对一个Session进行的数据存储,当用户关闭浏览器后,数据就被删除。window.sessionStorage返回当前页面会话期有效内创建的会话存储区域,只要浏览器没有关闭,或者页面重新载入或恢复,或从当前网页跳转到另外一个页面,会话一直存在。           可以利用window.sessionStorage属性返回的Storage对象调用对象方法和属性。 ~~~
~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecb20866.jpg) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecb3524d.jpg) 当用户输入有误,返回此页面重新输入时,数据就被恢复。 ## 三、Storage接口        HTML5规范了WindowSessionStorage和WindowLocalStorage接口,分别对应于SessionStorage和Localstorage的sessionStorage与localStorage属性,二者均返回Storage对象。        1、oStorage.length属性:获取key/value对的数量。        2、oStorage.key(index):根据索引获取键名,返回键名的字符串形式或者空字符串。PS:添加新键值对后,索引发生变化。        3、oStorage.getItem(skey):根据键名skey获取对应的键值。键不存在,返回null。 PS:不能从不安全URL环境(HTTP)中读取和写入安全环境(HTTPS)内定义的键。        4、oStorage.clear():清除所有的key/value对,包括存储空间。        5、oStorage.removeItem(skey):删除指定的键值对,skey是指定的键名,可以为空        6、oStorage.setItem(skey,svalue):添加或者更新键值对。 PS:不能从不安全URL环境(HTTP)中读取和写入安全环境(HTTPS)内定义的键。        7、storage事件:当存储区域发生变化时触发,可以用window.onstorage捕捉。若目标文档不处于活动状态则不会触发storage事件。上述方法中的4~6均会触发该事件。             storage事件对象的属性:             key:表示被更改的键;oldValue:表示被更改的键的旧值;newValue:表示被更改的键的新值;url:表示发生更改所在的网址;storageArea:表示发生更改坐在的Storage对象。(onstorage仅在IE9和Opera中实现) ~~~ Storage
~~~ 在IE中的运行结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecb474c0.jpg)
';

十六:BOM之源—BOM基本应用

最后更新于:2022-04-01 20:32:25

   BOM的基本应用包括:管理浏览器历史、解析地址和获取浏览器信息,本文将介绍这些应用。 ## 一、浏览历史管理            1、history对象的方法和属性                  History 对象包含用户(在浏览器窗口中)访问过的 URL,是 window 对象的一部分,可通过 window.history 属性对其进行访问。没有应用于 History 对象的公开标准,不过所有浏览器都支持该对象。                  length属性:返回浏览器历史列表中的URl数量。是"前进“和”后退“两个按钮之下包含的地址数的总和。                  back([num]):加载 history 列表中的前一个 URL。参数num表示后退的地址步数,若没有定义num,效果等价于点击后退按钮或调用 history.go(-1)。                  forward():加载 history 列表中的下一个 URL。该方法的效果等价于点击前进按钮或调用 history.go(1)。                  go([location]):加载history列表中的location位置的页面,location可以是字符串或者整数。若是字符串,表示是要访问历史列表中的某个 URL,或 URL 的子串;若是整数,表示是要访问的 URL 在 History 的 URL 列表中的相对位置,正数是前进,负数是后退,0表示刷新当前网页,与location.reload()等效            2、HTML 5 BOM新增功能             HTML 5 BOM新增了两个方法和一个属性:             window.history.pushState(data,title[,url]):添加新的浏览历史项。data定义历史记录的数据,title定义历史记录的标题,URL定义历史记录的URL地址。触发popstate事件。             window.history.replaceState(data,title[,url]):更新当前历史浏览项。参数同上。触发popstate事件。              state属性:返回上述两个方法添加的信息。 ## 二、解析地址        location对象描述的是一个窗口对象打开的URL地址。使用window.location可以返回一个location对象(window可以省略)。表示当前窗口的地址,可以用alert(location)获取;若要表示某一个窗口的地址,则要用”窗口对象名.location“获取URL。         var newWin = window.open("http://www.baidu.com","_target");         alert(newWin.location);                1、location对象的属性: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54eca1ee17.jpg)        2、location对象的方法 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54eca36d2b.jpg) HTML5新增一个resolveURL(sURL):将相对的URL转为绝对的URL ~~~ document.write("书签名称: "+location.hash+"
"); document.write("主机全称: "+location.host+"
"); document.write("主机名称: "+location.hostname+"
"); document.write("路径名称: "+location.pathname+"
"); document.write("连接端口名称: "+location.port+"
"); document.write("协议名称: "+location.protocol+"
"); document.write("查询字符串: "+location.search+"
"); ~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54eca4af2a.jpg) 三、获取浏览器信息        Navigator 对象包含有关浏览器的信息,其对象实例唯一,可以用 Window 对象的 navigator 属性来引用它。没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象。        1、遍历Navigator对象成员               使用window.navigator属性可以返回一个Navigator对象,使用for..in循环可以检测 ~~~ for(var i in window.navigator) { document.write(i + "==="+window.navigator[i]+"
"); } ~~~ 在不同的浏览器中运行结果不同,在google中结果如下 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54eca5f57e.jpg)        2、Navigator对象属性: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54eca7abf1.jpg)        3、Navigator对象的方法 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54eca8e097.jpg) |   |   | |-----|-----| 四、非标准应用---screen对象        Screen 对象包含有关客户端显示屏幕的信息。每个 Window 对象的 screen 属性都引用一个 Screen 对象。没有应用于 screen 对象的公开标准,不过所有浏览器都支持该对象。其属性: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecaa0fd6.jpg)
';

十五:BOM之源—window对象

最后更新于:2022-04-01 20:32:23

   BOM是Browser Object Model的缩写,即浏览器对象模型,提供了独立于网页内容和浏览器窗口之间进行交互的APi。API由若干对象组成,由于浏览器是Javascript的宿主,因此,这些对象也称为宿主对象。 ## 一、定时器--间隔调用和延迟调用    1、setInterval()和clearInterval()方法实现间隔调用(循坏调用)          setInterval(code,millisec[,"lang"]):按照指定的周期(以毫秒计)来调用函数或计算表达式,直到 clearInterval() 被调用或窗口被关闭。返回一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。           code:必须,要调用的函数或要执行的代码串。调用函数传入函数名或者创建匿名函数。           millisec:必须,间隔调用的时间,以毫秒为单位。           lang:可选,用于定义传递给函数的任意数量的参数。           若要用clearInterval()方法取消setInterval()方法调用,就必须将setInterval的返回值赋给一个变量给clearInterval调用。 ~~~
~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec964d1b.jpg) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec97721d.jpg)    2、setTimeout()和clearTimeout()方法实现延迟调用          setTimeout(code,millisec):用于在指定的毫秒数后调用函数或计算表达式,只执行 code 一次,不循环调用,如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。参数同setInterval。          若要用clearTimeout()方法取消clearTimeout()方法调用,就必须将setTimeout()的返回值赋给一个变量给clearTimeout()调用。 ~~~
2秒钟后出现其他内容
~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec98954d.jpg) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec99ce86.jpg)    3、强制清除:没有一个内建的方法可以一次清除所有的setInterval()或者setTimeout(),因此要采用循环清除:       for(var i = 0; i < 10; i++) clearTimeout(i); ## 二、基本的交互操作    1、alert(msg):警告对话框,msg是要显示的文本字符串,包含的HTML原样显示。    2、confirm(msg):确认对话框,参数同alert;方法返回TRUE(“确定”)或者FALSE(“取消)。    3、prompt(msg[,input]):提示输入消息对话框,msg同alert,input可选,定义在文本框中显示的信息,不定义input,则为空。prompt()方法以字符串或者整数返回用户输入的信息。按取消按钮返回null    4、showModalDialog(URL[,arg]);打开一个新窗口类型的对话框,可以加载一个网页(但是不能刷新)。URL是加载网页的URL地址,arg是传递给窗口的参数。部分浏览器默认阻止弹出这个窗口,需要设置允许弹出新窗口。该方法有返回值。    5、print():打印当前文档。 ~~~ var returned = confirm("你是SB吗?"); if(returned) {  document.write("你是SB
"); } else {  document.write("你不是SB
"); } var value = prompt("你多少岁?",100); document.write("你是"+value+"岁
"); showModalDialog("http://blog.csdn.net/u011043843"); ~~~ ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec9b2616.jpg) ## 三、窗口交互操作    1、window.open():打开一个新的浏览器窗口或查找一个已命名的窗口。返回新窗口的引用。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec9c882b.jpg) features的可选值: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec9dc21f.jpg) ~~~ ~~~    2、window.close([arg]):关闭窗口,arg是窗口的引用,未定义arg,则关闭当前窗口。    3、window.stop():取消文档的加载。    4、获取窗口引用:window[index] 或 window[name]:根据索引或者名称获取window对象,属性如下: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec9efbee.jpg)    5、window.blur()和window.focus():分别使窗口失去焦点和获取焦点,并触发onblur和onfocus事件。 ## 四、HTML5 中新增的几个属性     1、window.locationbar.visible:是一个布尔值,定义地址栏是否可见     2、window.menubar.visible:是一个布尔值,定义菜单栏是否可见     3、window.personalbar.visible:是一个布尔值,定义个人栏是否可见     4、window.scrollbars.visible:是一个布尔值,定义滚动栏是否可见     5、window.statusbar.visible:是一个布尔值,定义状态栏是否可见    6、window.toolbar.visible:是一个布尔值,定义工具栏是否可见
';

十四:JavaScript内建类

最后更新于:2022-04-01 20:32:21

   前面的几篇博文分别介绍了[对象](http://blog.csdn.net/u011043843/article/details/27366379)、[字符串](http://blog.csdn.net/u011043843/article/details/27959563)、[数组](http://blog.csdn.net/u011043843/article/details/28294213)、[日期](http://blog.csdn.net/u011043843/article/details/29191771)等内建类,本篇将介绍Boolean/Math/Function/Arguments类 ## 一、使用Boolean类处理逻辑值    Boolean类是JS的一个封装类,可以用于获取Boolean对象的原始数据类型或者字符串表示形式。new Boolean(value)用于创建一个Boolean对象,Boolean(value)它的参数转换成一个原始的布尔值,并且返回这个值。Boolean对象只有两个值:true或者false.    value参数可以省略。如果省略 value 参数,或者设置为 0、-0、null、""、false、undefined 或 NaN,则该对象设置为 false。否则设置为 true(即使 value 参数是字符串 "false")。    Boolean对象有三个方法: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec8a2c6c.jpg) 但是在ECMAScript 5中,Boolean对象新增一个toJSON()方法,可以将逻辑值序列化为JSON格式字符串返回。 ~~~ ~~~ FF中结果(在Google只能输出第一个[????]) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec8b9b67.jpg) ## 二、使用Number类进行数字类型转换    在JavaScript中内建了Number类对数字数据进行处理。Number类是Number数据类型的一个简单封装,可以用Number类对象处理数据的原始值。在调用Number类的方法时要用new Number(value)创建Number对象,但是对于Number类的属性则是不需要,因为属性均是静态的。Number(value)函数用于转换,转换失败返回NaN。    Number类的属性: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec8cc42a.jpg)    Number类的方法 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec8e0d92.jpg) ~~~ var num = new Number("1234"); document.write("转为16进制:"+num.toString(16)+"
"); //默认是10进制 document.write("本地化:"+num.toLocaleString()+"
"); var num1 = new Number("2.1415"); document.write("保留2位小数:"+num1.toFixed(2)+"
"); //参数范围[0,20],表示保留的小数位数,不足补0 document.write("保留3位小数:"+num.toFixed(3)+"
"); document.write("指定3个长度:"+num1.toPrecision(3)+"
"); //有效长度,参数范围[0,21] document.write("指数表示:"+num1.toExponential(2)+"
"); //参数范围[0,20],表示需要的小数位数。 document.write("原值:"+num1.valueOf()); //默认是0,即new Number()
~~~ 结果 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec8f358c.jpg) 如果不在参数指定的范围之内,均会抛出RangeError异常。在ECMAScript 5中新增了toJSON()方法,将数值序列化为JSON格式字符串并返回。 ## 三、使用Math类进行复杂的数学运算    Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法,通过把 Math 作为对象使用就可以调用其所有属性和方法。     Math类的属性: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec91810f.jpg)    Math类的方法 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec92a8a7.jpg) ## 四、使用Function和arguments类    4.1    Function类:JavaScript中的每个函数都由一个Function对象表示,均有三个实用方法:call()、apply()和bind()。都是用来调用函数的。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec93f291.jpg) ~~~ var theFunction = function(arg) { document.write(arg+"
"); document.write(arguments+": 第二个参数:"+arguments[1]+"
"); document.write(this == myObj); } var myObj = new Object; var arr = new Array("a","b","c"); theFunction.apply(myObj,arr); theFunction.call(null,1,2,3);
~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec950fee.jpg) 与call()相比,apply()方法有如下不同: 1、如果在Javascript中调用的任何函数使用了this关键字,那么可以使用apply()指定this关键字所代表的对象值。 2、如果在Javascript中调用的任何函数内使用了arguments关键字,那么可以使用apply()指定arguments关键字所代表的参数值。    2、Arguments类和arguments属性    Arguments类代表函数参数作为数组元素作为存储,可以按访问数组元素的方法访问参数。arguments.length表示参数的数目。但是,不能用for...in循环访问arguments对象,需用for循环。 arguments有两个重要属性: arguments.callee属性用来表示当前正在执行函数的引用,等价于arguments.callee.apply(null)或者arguments.callee.call(null);      oFunction.caller属性表示当前正在执行函数的调用者的引用,如果没有其他函数调用则返回null,等价于oFunction.caller.apply(null)或者oFunction.caller.call(null).          
';

十三:处理日期和时间

最后更新于:2022-04-01 20:32:18

## 一、创建Date实例     1、Date类的方法和属性很多不是静态的,因此,在应用Date类的属性和方法之前,必须创建Date类的实例。                var date = new Date();  //以当前日期和时间创建实例。                var date = new Date(value);  //value是必选项,如果是数值,value表示指定日期与1970.1.1午夜之间的毫秒数;如果是字符串,value则按照parse()方法中的规则进行解析。全局的Date()函数完成与new Date(value)相同的功能                var date = new Date(year[,month[,date[,hour[,minute[,second[,millisecond]]]]]]);  //参数说明如下: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec872ce3.jpg) ## 二、使用parse()方法解析日期字符串        Date.parse(datestring)方法可解析一个日期时间字符串,并返回 1970/1/1 午夜距离该日期时间的毫秒数。datestring必需。表示如Jan 5,1996 08:47:00格式的日期和时间的字符串。        解析规则: - 短日期可以使用“/”或“-”作为日期分隔符,但是必须用月/日/年的格式来表示,例如"7/20/96"。 - 以 "July 10 1995" 形式表示的长日期中的年、月、日可以按任何顺序排列,年份值可以用 2 位数字表示也可以用 4 位数字表示。如果使用 2 位数字来表示年份,那么该年份必须大于或等于 70。 - 括号中的任何文本都被视为注释。这些括号可以嵌套使用。 - 逗号和空格被视为分隔符。允许使用多个分隔符。 - 月和日的名称必须具有两个或两个以上的字符。如果两个字符所组成的名称不是独一无二的,那么该名称就被解析成最后一个符合条件的月或日。例如,"Ju" 被解释为七月而不是六月。 - 在所提供的日期中,如果所指定的星期几的值与按照该日期中剩余部分所确定的星期几的值不符合,那么该指定值就会被忽略。例如,尽管 1996 年 11 月 9 日实际上是星期五,"Tuesday November 9 1996" 也还是可以被接受并进行解析的。但是结果**Date**对象中包含的是 "Friday November 9 1996"。 - JScript 处理所有的标准时区,以及全球标准时间 (UTC) 和格林威治标准时间 (GMT)。 - 小时、分钟、和秒钟之间用冒号分隔,尽管不是这三项都需要指明。"10:"、"10:11"、和 "10:11:12" 都是有效的。 - 如果使用 24 小时计时的时钟,那么为中午 12 点之后的时间指定 "PM" 是错误的。例如 "23:15 PM" 就是错误的。 - 包含无效日期的字符串是错误的。例如,一个包含有两个年份或两个月份的字符串就是错误的。 ~~~ ~~~ ## 三、Date类方法 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec887b2a.jpg)
';

十二:数组、多维数组和符合数组(哈希映射)

最后更新于:2022-04-01 20:32:16

   Array(数组)是JavaScript中较为复杂的数据类型,同Java、C#、VB等程序语言的数组相比,Javascript数组中的元素不必为相同的数据类型,可以在数组每个元素上混合使用数字、日期、字符串、Object,甚至添加一个嵌套数组。 ## 一、创建数组    1、var arr1 = new Array(); /var  arr2 = new Array(length); /var arr3 = new Array(element1,element2...); var arr4 = [element1,element2,...];    length是一个指定数组长度的整数。element是一系列任意值。    2、变长数组:JavaScript的数组长度可以任意扩展。 ~~~ var arr = new Array(2); arr[0] = "Jan"; arr[1] = "Feb"; arr[2] = "Mar"; alert(arr.length); //输出3 ~~~ 3、元素可以为空 ~~~ var arr = new Array(); arr[0] = "Jan"; arr[2] = "Mar"; alert(arr.length); //输出3 alert(arr[1]); //undefined ~~~ 但是document.write(arr);将输出:Jan,,Mar 4、使用Array()时的注意事项:不能将另外一个数组作为参数传递给该函数,否则是创建了一个仅有一个元素的复合数组 ~~~ var arr1 = ['a','b','c']; var arr2 = new Array(arr1); document.write(arr2+"
"); document.write(arr2[0]+"
"); document.write(arr2[1]+"
"); document.write(arr2[0] === arr1); ~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec7b4f3b.jpg) 但是使用Object()则不然,它创建了一个对象的副本。 ~~~ var obj = {a:1,b:2,c:3}; var obj2 = new Object(obj); document.write(obj2+"
"); document.write(obj2.a+"
"); document.write(obj === obj2); ~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec7c9d93.jpg) ## 二、实现和使用多维数组    在Javascript中不可以直接声明多维数组,但是可以将数组嵌套实现多维数组。 ~~~ var multiArr = new Array(new Array("one","two"),new Array(1,2)); document.write(multiArr+"
"); document.write(multiArr[0]+"
"); document.write(multiArr[1][0]+"
"); document.write("循环输出数组元素:
"); for(var i = 0; i < multiArr.length; i++) { for(var j = 0; j < multiArr[i].length;j++) { document.write(multiArr[i][j]+"
"); } } ~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec7df4e6.jpg) ## 三、使用Array API处理数组    1、Array类的常见方法和属性: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec7f402f.jpg) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec81eeb1.jpg)    2、Array类的静态属性: CASEINSENSITIVE :在排序中,此常数指定不区分大小写。 DESCENDING:在排序中,此常数指定降序排序。 NUMERIC:在排序中,此常数指定数字(不是字符串)排序。 RETURNINDEXEDARRAY:指定排序返回索引 UNIQUESORT:在排序方法中,此常数指定唯一的排序要求。 3、示例 ~~~ var arr = new Array("Jody"); document.write("原数组:"+arr+"
"); arr.push("Mary"); //新增一个元素 document.write("新增一个元素:"+arr.toString()+"
"); arr.push("Marcell"); document.write(arr.toString()+"
"); arr.shift(); //删除第一个元素 document.write("删除第一个元素:"+arr.toString()+"
"); arr.reverse(); //反转元素 document.write("反转元素:"+arr.toString()+"
"); var arr1 = ["Judy","Jody"]; var arr3 = arr1.concat(arr); //两个数组相连创建一个新数组 document.write("两个数组相连创建一个新数组:"+arr3.toString()+"
"); document.write("join()方法:"+arr3.join("-")+"
"); var arr4 = arr3.slice(0,2); document.write("slice()方法返回子数组:"+arr4.join("-")+"
"); document.write("splice()方法删除元素:"+arr3.splice(0,2)+"
"); ~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec835aa7.jpg) ## 四:ECMAScript 5 新增的方法(在IE中,只有IE9支持)    1、every(callbackFunction[,thisObject]):对数组的每一项执行测试函数,直到获得对指定的函数返回false的项。 callbackFunction为定义的函数名,该函数有元素值、元素索引和Array对象三个参数;thisObject可选,是函数的this对象。    2、filter(callbackFunction[,thisObject]):对数组的每一项执行测试函数,根据函数结果构造一个新数组。所有数组元素对指定函数返回TRUE,则新数组中包含此元素,反之,不包含。    3、forEach(callbackFunction[,thisObject]):对数组中的每一项执行回调函数。参数同every()函数。 4、indexOf(seachElement[,fromIndex]):使用“===”运算符搜索数组中的项,并返回该值索引位置。seachElement是查找项,若没有找到则返回-1;fromIndex是查找的起始位置。 5、Array.isArray(objArr):静态方法,判断指定的参数是否为数组。 6、lastIndexOf(seachElement[,fromIndex]):使用“===”运算符搜索数组中的项(从最后一项向前搜索),并返回该值索引位置。语法同indexOf()方法。    7、map(callbackFunction[,thisObject]):对数组的每一项执行测试函数,根据函数结果构造一个新数组,其中包含与原始数组中的每一项的函数结果对应的项。参数语义同every()函数。   8、reduce(callbackFunction[,initialValue]):从左到右,使用函数比较数组中的两个值,将两个值删除一个。callbackFunction是自定义的函数,包含前一个元素值、当前元素值、当前元素索引和Array对象。initialValue是第一次调用callbackFunction函数时的previous值(前一个元素值)。若不定义,第一次调用callbackFunction时前一个元素值是第一个元素值,当前值是第二个元素值;若定义了,则当前值是第一个元素值。   9、refuceRight(callbackFunction[,initialValue]):从右到左,使用函数比较数组中的两个值,将两个值删除一个。参数语义同reduce()。   10、some(callbackFunction[,thisObject]):对数组中的每一项执行测试函数,直到返回true的项。 ## 五、数组的排序:    sort([sortfunction]):用于对数组进行排序,sortfunction可选,用来定义数组元素排序的函数,若省略,元素按照ASCII字符顺序进行升序排列,意味着不能对中文排序。   1、默认的排序规则       1.1   排序区分大小写,大写优先于小写(Z优先于a)       1.2    按升序排序(a优先于b)       1.3    数字字段按字符串形式排序,所以100优先于99,因为1的字符串值比9低。  2、自定义排序:定义sortfunction参数       2.1  函数返回 -1表示传递的第一个参数比第二个参数小       2.2   函数返回 0表示传递的第一个参数等于第二个参数       2.3   函数返回 1表示传递的第一个参数比第二个参数大 ~~~ var arr = new Array("Tom","Tommy","John"); //按照ASCII顺序升序排列 arr.sort(); document.write("按照ASCII顺序升序排列:"+arr+"
"); var sortFun = function(a,b) { if(a.length < b.length) return -1; if(a.length > b.length) return 1; if(a.length == b.length) return 0; } arr.sort(sortFun); document.write("按照自定义顺序排列:"+arr+"
"); ~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec8488e6.jpg) ## 六、创建和使用复合数组:在Javascript中可以使用Object和Array对象创建复合数组   1、使用Object对象创建         var per = {sex:"male",age:28,birth:new Date(1980,7,5)};         document.write(per.sex) <=> document.write(per['sex']) ;//类似于创建Javascript对象   2、使用Array对象创建         var per = new Array();         per['sex'] = "male";   per['age'] = 28;  per['birth'] = new Date(1980,7,5);        以下方法则是错误的:        var per = [sex:"male",age:28,birth:new Date(1980,7,5)];         3、遍历复合数组 ~~~ var per = new Array(); per['sex'] = "male"; per['age'] = 28; per['birth'] = new Date(1980,7,5); for(var i in per) { document.write(i+" : "+per[i]+"
"); } ~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec85b659.jpg)
';

十一:处理字符串—String类和正则表达式

最后更新于:2022-04-01 20:32:14

## 一、正则表达式的基本语法     1、概念:正则表达式由普通字符和特殊字符(元字符)组成的文本模式,该模式描述在查找字符串主体时待匹配的一个或者多个字符串。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。          普通字符包括所有的大小写字母字符、所有数字、所有标点符号及一些特殊符号。普通字符本身可以组成一个正则表达式,也可以和元字符组合组成一个正则表达式;而元字符则具有特殊的含义,包括()、[]、{}、/、^、$、*、+、?、.、|、-、?:、?=、?!    2、基本语法 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec65c2e4.jpg)     3、优先权含义 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec67a4cb.jpg) ## 二、使用RegExp处理字符串正则匹配    1、创建一个RegExp对象:一是使用正则字符串创建(两个斜杠包围)创建一个RegExp对象:var re = /pattern/[flags];  二是用Javascript内建类RegExp类创建RegExp对象:var re = new RegExp("pattern"[,flags]);    2、参数详解:        2.1    pattern:是要使用的正则表达式模式        2.2    flags:可选参数,用于修饰正则表达式,取值如下: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec68bf9f.jpg) ~~~
function matchDemo()
		{   
			var str = "abcdefgh";
			var re = new RegExp("abc","g");       //全局匹配abc
			var result = re.exec(str);
			alert(result);
		}
        matchDemo();
~~~
  

  
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec69d847.jpg)

  

  

   3、方法和属性

          3.1  exec():检索字符串中的正则表达式的匹配,返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

~~~
	function matchDemo()
		{   
			var str = "abcdefgh";
			var re = new RegExp("def","g");       //全局匹配def
			var result = re.exec(str);
			alert(result);
		}
        matchDemo();
~~~
  
结果:
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec6b25d2.jpg)

exec()方法返回的数组有input和index属性,input包含了整个被查找的字符串,index属性包含了匹配的子串的位置。result.index返回3,result.input则返回abcdefgh。

  

对于pattern本身也有lastIndex和source两个属性,前者包含匹配最后一个字符的位置,后者包含pattern本身,可以利用该属性修改匹配模式。  

  

  3.2   test():检测一个字符串是否匹配某个模式,如果匹配则返回true,反之返回FALSE。如利用上例,re.test(str)返回TRUE,但是/ABC/.test(str)返回FALSE。

  

## 四、正则表达式的捕获语法和变量替换

   1、捕获语法:

         1.1  (pattern):匹配pattern并捕获该匹配的子表达式,可以使用$0...$9(或[0]...[9])从结果中检索捕获的匹配。

~~~
var re =/windows(98|95|NT)/;
         var str = "windows95";         //匹配windows95或者windows98或者windowsNT,不匹配windows
         document.write(re.exec(str));  //windows9598与windows95匹配结果一样
         document.write("
$0:"+RegExp.$1); ~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec6c7405.jpg)          1.2    (?:pattern):匹配pattern但不捕获pattern,不可以使用$0...$9(或[0]...[9])从结果中检索捕获的匹配。 ~~~ var re =/windows(?:98|95|NT)/; var str = "windows98"; //匹配windows95或者windows98或者windowsNT,不匹配windows document.write(re.exec(str)); //windows9598与windows95匹配结果一样 document.write("
$0:"+RegExp.$1); ~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec6dadc0.jpg)          1.3    (?=pattern)正向预查,在任何匹配pattern的字符串开始处匹配查找字符串,不可以使用$0...$9(或[0]...[9])从结果中检索捕获的匹配。 ~~~ var re =/windows(?=98|95|NT)/; var str = "windowsNT"; //匹配windows95或者windows98或者windowsNT,不匹配windows document.write(re.exec(str)); //windows9598与windows95匹配结果一样 document.write("
$0:"+RegExp.$1); ~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec6ee91b.jpg)          1.4   (?!pattern):执行反向预查,先执行搜索子表达式,实现与1.3相反的功能,不可以使用$0...$9(或[0]...[9])从结果中检索捕获的匹配。 ~~~ var re =/windows(?!98|95|NT)/; var str = "windows67"; //不匹配windows95或者windows98或者windowsNT,不匹配windows document.write(re.exec(str)); document.write("
$0:"+RegExp.$1); ~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec715a76.jpg)    2、使用$替换变量            字 符                          含义                    $$                               $             $&                               指定与整个模式匹配的字符串             $`                                指定与$&描述的匹配之前的字符串部分             $'                                 指定与$&描述的匹配之后的字符串部分             $n                                捕获的第n个匹配,n为1-9             $nn                              捕获的第nn个匹配,nn为01--99 ~~~ var oString = "flip-flop"; var re = /(\w+)-(\w+)/g; //$1表示第一个\w+,$2是第二个,第一个匹配flip,第二个匹配flop oString = oString.replace(re,"$1-$2"); document.write(oString+"
"); //输出flip-flop function matchDemo() { var s; var re = new RegExp("d(b+)(d)","ig"); var str = "cdbBdbsbdbdz"; var arr = re.exec(str); s = "$1 contains: " + RegExp.$1 + "
"; s += "$2 contains: " + RegExp.$2 + "
"; s += "$3 contains: " + RegExp.$3; document.write(s); } matchDemo(); ~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec727a3a.jpg) ## 五、使用string类处理字符串      使用new或者用文字字面字符串,可以调用String类的所有成员方法。对于字符串文字,JS解释引擎会自动将其转为临时的String对象,然后调用方法,最后清楚临时对象。不要混淆字符串文字和String实例。String对象有反常的行为。 ~~~ var s1 = "2+2"; //字符串文字 var s2 = new String("2+2"); //String实例 alert(eval(s1)+"\n"+eval(s2)); //alert(s1+"\n"+s2)的返回结果一样:2+2 ~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec73989c.jpg)      1、String类的方法和属性 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec74d32b.jpg)      2、在方法中使用正则表达式               2.1   match(searchvalue,regexp):在字符串内检索指定的值,或找到一个或多个正则表达式的匹配,返回存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。searchvalue规定要检索的字符串值,regexp,非必须,规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象,则需要首先把它传递给 RegExp 构造函数,将其转换为 RegExp 对象。 ~~~ ~~~ ~~~ var str="1 plus 2 equal 3" document.write(str.match(/\d+/g)) //不使用全局标志g,则只返回一个匹配,输出1 ~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec764e97.jpg)              2.2    replace(*regexp/substr*,*replacement*)在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串,返回一个新的字符串。 regexp/substr规定子字符串或要替换的模式的 RegExp 对象,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。 *replacement*一个字符串值。规定了替换文本或生成替换文本的函数. ~~~ var str="Visit Microsoft!" document.write(str.replace(/Microsoft/, "W3School")) ~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec777cee.jpg)            2.3   search(regexp) 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。regexp该参数可以是需要在 stringObject 中检索的子串,也可以是需要检索的 RegExp 对象。要执行忽略大小写的检索,请追加标志 i。返回第一个与 regexp 相匹配的子串的起始位置,若没有匹配,返回-1 ~~~ var str="Visit W3School!" document.write(str.search(/w3school/)) ~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec78a40f.jpg)           2.4     split(*separator*,*howmany*) 方法用于把一个字符串分割成字符串数组并返回。*separator*参数必须,字符串或正则表达式,用于指定分隔符;*howmany*可选,该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。 ~~~ var str="How are you doing today?" document.write(str.split(" ") + "
") document.write(str.split("") + "
") document.write(str.split(" ",3))
~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec79d9e5.jpg) |   |   | |-----|-----|
';

十:ECMAScript 5 增强的对象模型

最后更新于:2022-04-01 20:32:12

## 一、属性和描述符    1、概述:在ECMAScript 5中,属性模型已经完全被重写了,并规定了value,writable,configurable,enumerable,get和set共6个属性,用于完成不同的功能。例如: ~~~ { value:"属性值", writable:true,            //定义属性是否可以改变,默认为TRUE configurable:true,    //定义属性是否可以被删除,默认为TRUE enumerable:true      //定义属性是否可以迭代,默认为TRUE } ~~~    2、注意事项          要使用ECMAScript 5 增强的对象模型定义属性,不能再使用原来的模式。 ~~~ function Person(){} Person.prototype.nickName= { value:"Tom", writable:true, enumerable:true, configurable:true }; var per = new Person; alert(JSON.stringify(per.nickName)); ~~~ Google运行结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec5be419.jpg) 上述的定义并没有应用ECMAScript 5的增强对象模型,属性nickName的值其实是一个对象,而我们想要的仅仅是Tom。 ## 二 、使用ECMAScript 5 增强的对象模型定义属性    1、定义属性:Object.defineProperty(obj,prop,desc)         1.1  参数详解:          obj是一个对象,若要为一个类的所有实例定义属性,则将该参数指定为该类的原型对象;prop是一个字符串,指定属性名;desc是一个对象,包含属性的描述。         1.2  重新定义Person ~~~ function Person(){} Object.defineProperty(Person.prototype,"nickName", { value:"Tom", writable:true, enumerable:true, configurable:true }); var per = new Person; alert(JSON.stringify(per.nickName)); ~~~ Google运行结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec5d4381.jpg)   2、定义get和set存取器方法         Object。defineProperty()也可以用于定义get和set方法,由于get和set方法需要一个中间的私有变量,所以,需要定义一个自执行的匿名函数包含Object.defineProperty()方法的定义。 ~~~ function Person(){} (function() { var nick = "Tom"; Object.defineProperty(Person.prototype,"nickName", { get:function(){return nick;}, set:function(value){nick = value;} }); })(); var per1 = new Person; document.write(per1.nickName+"
"); per1.nickName = "John"; document.write(per1.nickName); ~~~ Google运行结果 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec5e8bb2.jpg)    3、一次定义多个属性         Object.defineProperties()可以一次定义或修改多个属性,为Person类定义nickName和age属性 ~~~ function Person(){} Object.defineProperties(Person.prototype, { "nickName": { value:"Tom", writable:true }, "age": { value:20, configurable:false, writable:false } }); ~~~ ## 三 、使用ECMAScript 5 增强的对象模型获取属性      1、Object.getOwnPropertyDescriptor(obj,prop)方法可以获取一个属性的描述信息。            1.1   参数详解            obj是一个对象,指定要获取属性的对象;prop是一个字符串,用于指定要获取的属性名。 ~~~ function Person(){} var per = new Person; Object.defineProperties(per, { "nickName": { value:"Tom", writable:true }, "age": { value:20, configurable:false, writable:false } }); var age = Object.getOwnPropertyDescriptor(per,"age"); alert(JSON.stringify(age)); ~~~ Google运行结果 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec6070f4.jpg)    2、枚举属性         Object.keys(obj)是一个枚举对象obj所有可以枚举的属性的静态方法,返回值是一组字符串,每个字符串就是属性名。         Object.getOwnPropertyNames(obj)可以实现同样的功能,但是能列出所有能枚举和不能枚举的属性。该方法不能实现向前兼容,因为ECMAscript3没有相关的方法可以获得不能枚举的属性。 ## 四 、密封对象和动态对象    1、概述:默认情况下,JS创建的对象都是动态的,允许在运行为对象添加属性和方法。使用ECMAScript 5增强的对象模型,就可以定义密封对象,它是通过object.preventExtensions(obj)、Object.seal(obj)、Object.freeze(obj)等静态方法实现。    2、Object.preventExtensions(obj):锁定一个对象,密封对象不允许添加新成员。同时提供了Object.isExtensible(obj)方法检查一个对象是否可以增加成员,即是否应用了Object.preventExtensions(obj)方法,没有应用则返回TRUE,否则返回FALSE。obj是要密封的对象,若要密封一个类,该参数可以指定为类的原型对象。 ~~~ function Person(name,age) { this.name = name; this.age = age; } Person.prototype.show = function() { document.write("my name is "+this.name+", and age is "+this.age+"
"); }; var per = new Person("康",20); per.show(); document.write("是否可以添加成员:"+Object.isExtensible(per)+"
"); Object.preventExtensions(per); document.write("是否可以添加成员:"+Object.isExtensible(per)+"
"); per.hobby = "篮球"; //不能再添加属性 document.write(per.hobby+"
"); document.write(delete per.hobby); //但是可以删除属性 ~~~ Google运行结果 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec619f8f.jpg)    3、Object.seal(obj):锁定一个对象,密封对象不允许添加和删除新成员。同时提供了Object.isSealed(obj)方法检查一个对象是否可以增加成员,即是否应用了Object.preventExtensions(obj)方法,没有应用则返回TRUE,否则返回FALSE。obj是要密封的对象,若要密封一个类,该参数可以指定为类的原型对象。 ~~~ function Person(name,age) { this.name = name; this.age = age; } Person.prototype.show = function() { document.write("my name is "+this.name+", and age is "+this.age+"
"); }; var per = new Person("康",20); per.show(); document.write("是否可以添加成员:"+Object.isSealed(per)+"
"); Object.seal(per); document.write("是否可以添加成员:"+Object.isSealed(per)+"
"); per.hobby = "篮球"; document.write(per.hobby+"
"); document.write(delete per.age); //不能删除,返回false ~~~ Google运行结果 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec62e6c9.jpg)    4、Object.freeze(obj):锁定一个对象,密封对象不允许添加和删除新成员,所有属性均变为只读。同时提供了Object.isFrozen(obj)方法检查一个对象是否可以增加成员,即是否应用了Object.freeze(obj)方法,没有应用则返回TRUE,否则返回FALSE。obj是要密封的对象,若要密封一个类,该参数可以指定为类的原型对象。 ~~~ function Person(name,age) { this.name = name; this.age = age; } Person.prototype.show = function() { document.write("my name is "+this.name+", and age is "+this.age+"
"); }; var per = new Person("康",20); per.show(); document.write("是否可以添加成员:"+Object.isFrozen(per)+"
"); Object.freeze(per); document.write("是否可以添加成员:"+Object.isFrozen(per)+"
"); per.age = 25; //不能改变,仍为20 document.write(per.age+"
"); document.write(delete per.name); ~~~ Google运行结果 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec645839.jpg) ## 五 、根据原型对象创建对象   使用Object.create(proto[,props])方法可以为指定的对象和可选的属性创建一个新对象。proto指向一个对象,该对象作为新建对象的原型对象,props指定要增加的属性,可选。该方法的功能相当于将新创建的对象的原型作为参数,同时使用Object.defineProperties(props)方法定义属性。
';

九:原型链本质论

最后更新于:2022-04-01 20:32:09

   每个类都有一个prototype静态属性,该属性包含了一个标识该类的一个对象,称为原型对象。原型对象定义了部分内部属性,并包含了部分基类属性,Javascript解释引擎可知该类的基类;同时基类也有相同的构成,因而又可以推知基类的基类,这样的链条就称为原型链。原型链的尽头是Object的原型对象,其prototype属性值是null。 ## 一、内部属性         1、Prototype属性:表示该类的父类的原型对象,除了IE之外,都可以用__proto__属性访问。每个JS内建类的Pro头type属性值是Object,因为都是直接继承Object。注意与prototype属性的首字母区别。         2、Class属性:表示类名,是一个字符串。ECMA-262标准第5版规定的所有内建Javascript类的Class属性值:               “Arguments”,"Array","Boolean","Date","Error"."Function","JSON","Math","Number","Object"."RegExp"."String" 例如内建类Array的原型对象定义: ~~~ { Prototype:Object的原型对象, Class:"Array" } ~~~ ## 二 、__proto__和prototype的区别   1、prototype是静态属性,__proto__是一个实例属性,前者是类的原型对象,后者表示原型对象的内部属性Prototype属性值。   2、每个实例都有一个__proto__属性,用于引用创建它的构造方法的prototype属性,即原型对象,如(new Array(“abc”)).__proto__ === Array.prototype返回true   3、__proto__有同名的静态属性__proto__,也返回原型对象。但是Array.__proto__ == Array.prototype返回FALSE,一般不推荐使用静态的__proto__。 ## 三、检查原型链   1、查看对象是否在指定对象的原型链中:类名.prototype.isPrototypeOf(obj)-->obj是要检查的实例对象,若存在原型链中则返回TRUE,反之返回FALSE   2、查看指定对象是否定义了特定属性和方法:obj.hasOwnProperty(propName)--->obj是实例对象,但是该方法无法访问原型链中的方法和属性,可以用原型代替 ~~~ var a = new Array(); alert(a.hasOwnProperty("join")); //false alert(Array.prototype.hasOwnProperty("join")); //true ~~~ 在 Array的原型中有join方法,以上是不同方式访问的结果。使用hasOwnProperty方法时,属性和方法必须对象本身定义的成员,所以该方法可以过滤原型链中继承的方法和属性   3、检查指定对象是否定义了特定属性且可以枚举:obj.propertyIsEnumerable(propName).自定义的属性可以枚举,内置属性不可以枚举,如Array的length属性。改方法不检查原型链。
';

八:静态成员、静态类、枚举、重载和覆盖

最后更新于:2022-04-01 20:32:07

## 一、创建静态成员      直接将属性或者方法赋给类本身 ~~~ function Person(name,age) { this.myname = name; this.age = age; } Person.showInfo = function() //静态方法,只能访问静态属性 { return ("我的性别是:"+Person.sex); }; var per = new Person("yuan",20); Person.sex = "男"; //静态属性 alert(Person.showInfo()); ~~~ Google中运行结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec559bca.jpg) 也可以改为this.sex访问,结果相同。但是不可以用this.myname/this,age访问实例属性。 ## 二 、注意事项   2.1   静态成员一般是公共成员,不能被继承,但可以在子类中直接使用   2.2   JS中允许定义同名的静态属性和实例属性,二者互相独立 ~~~ function Person(name,age,sex) { this.myname = name; this.age = age; this.sex = sex; } Person.showInfo = function() //静态方法,只能访问静态属性 { return ("我的性别是:"+Person.sex); }; var per = new Person("yuan",20,"女"); Person.sex = "男"; //静态属性 alert(Person.showInfo()); ~~~ 运行结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec559bca.jpg)   2.3    静态方法中不能访问实例属性,且不能使用关键字super,但是实例方法可以访问静态属性和实例属性 ~~~ function Person(name,age,sex) { this.myname = name; this.age = age; this.sex = sex; } Person.prototype.showInfo = function() //实例方法 { return ("我的性别是:"+Person.sex+"\n我的年龄是:"+this.age); }; var per = new Person("yuan",20,"女"); Person.sex = "男"; //静态属性 alert(per.showInfo()); ~~~ 运行结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec579179.jpg)   2.4    如果一个类的成员全是静态成员,则这个类是静态类,不能被实例化。 ## 三 、枚举:一组静态常量 ~~~ function Day() { throw new Error("这是静态类,不能实例化"); } Day.MONDAY = 1; Day.TUE = 2; Day.WED = 3; var date = new Date(); var day = date.getDay(); switch(day) { case Day.MONDAY: alert("周一"); break; case Day.TUE: alert("周二"); break; case Day.WED: alert("周三"); break; } ~~~ ## 四、重载和覆盖   4.1   重载:在JS中,不允许有两个同名的方法,且参数没有数据类型,所以JS中的重载是通过参数的个数不同实现的 ~~~ function OverLoad() { this.method = function() { var len = arguments.length; if(len == 2) { document.write("正在调用的是两个参数的方法
"); } else if(len == 3) { document.write("正在调用的是三个参数的方法"); } } } try { var over = new OverLoad; over.method(1,2); over.method(1,2,3); } catch(err) { document.write(err); } ~~~ 运行结果 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec58e580.jpg)   4.2   覆盖:用于继承中,指子类中定义了与父类中同名的方法,父类的同名方法被隐藏 ~~~ //父类 function Father(myName,age) { this.myname = myName; this.age = age; } Father.prototype.show = function() { return("Father's name: "+this.myName+", and age: "+this.age); }; //子类 function Child(myName,age) { this.$super = Father; //继承父类 this.$super(myName,age); //调用父类的构造方法 this.show = function() { return ( "Child's age: "+this.age); }; } Child.prototype = new Father(); var child = new Child("yuan",20); alert(child.show()); ~~~ 运行结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec5a2d20.jpg)
';

七:面向对象编程(OOP)

最后更新于:2022-04-01 20:32:05

## 一、Javascript中“类”的定义方式 1、 ~~~ function Person(name,age) { this.age=age; this.name=name; this.show=function() { return ("my name is "+this.name+",and my age is "+this.age); } } var per = new Person("yuan",20); alert(per.show()); ~~~ 2、 ~~~ function Person(name,age) { var o = new Object; o.name=name; o.age=age; o.show=function() { return ("my name is "+o.name+",and my age is "+o.age); } return o; } var per = new Person("yuan",20); alert(per.show()); ~~~ 3、 ~~~ var per= { name:"yuan", age:20, show:function() { return ("my name is "+this.name+",and my age is "+this.age); } } alert(per.show()); ~~~ 以上三种方式的输出结果相同。 ## 二 、获取构造器方法  所有构造器均是类,但并非所有类是构造器。内建类都是用构造器创建对象,而宿主对象(window等)则不是,对于实例对象而言,利用其constructor属性,可获取构造器方法: ~~~ function Person(name,age) { this.name=name; this.age=age; this.show=function() { return ("my name is "+this.name+",and my age is "+this.age); } } var per = new Person("yuan",20); alert(per.constructor); ~~~ 运行结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec541261.jpg) 内建类和宿主对象的constructor属性不能得到构造方法。 ## 三 、使用prototype属性定义方法和属性   除了在类的构造器定义方法和属性外,也可以用prototype定义。 ~~~ function Person(){} Person.prototype.name="yuan"; //定义属性 Person.prototype.age=20; Person.prototype.show=function() //定义方法 { return ("my name is "+this.name+",and my age is "+this.age); } var per = new Person; alert(per.show()); ~~~ ## 四 、类的成员的访问控制   1、public成员:使用this和prototype定义的属性和方法是公共成员,可以在脚本的任何位置访问   2、private成员:定义属性用var,定义方法时采用命名函数或者匿名函数
';

六:自定义函数

最后更新于:2022-04-01 20:32:02

## 一、定义方法:在Javascript中必须用function关键字 ~~~ function funcName(arg1,arg2...) { statements; return "变量值"; //返回值可以根据函数的需要 } ~~~ 函数名是函数自身的一个引用。此种方式创立的函数引用是独立存在的,无法删除。   1、调用函数:函数名(参数列表)。 传递的参数不必与函数定义的参数个数一致,并且可以设定函数参数的默认值。 ~~~ function example(a,b){   var a = arguments[0] ? arguments[0] : 1;//设置参数a的默认值为   var b = arguments[1] ? arguments[1] : 2;//设置参数b的默认值为2   return a+b; } alert(example()); //输出3 ~~~ 其他方法:[设置默认参数方式](http://blog.csdn.net/u011043843/article/details/26155307)   2、嵌套函数:在JS中,函数的定义中还可以再次定义新的函数 ~~~ function say() { function add(x,y) { return (x+y); } alert(add(2,3)); } say(); //输出5 ~~~ 内嵌函数add()只能在嵌套它的函数(say())中调用,而不能再外部调用。   3、条件函数: ~~~ var b = false; if(b) { function ex1() { alert(1); } ex1(); } else { function ex2() { alert(0); } ex2(); } ~~~ 输出0,将b的值改为TRUE,则输出1,不演示。条件函数的花括号不具有范围限制,即可以在花括号外访问函数。 ## 二 、函数的特殊条用方式:网页中的所有方法可以看做全局对象window对象的方法 ~~~ function add(x,y) { return x+y; } //1 alert(window.add(2,3)); //2 alert(window['add'](2,3)); ~~~ 以上结果均是5 ## 三、函数表达式定义函数:匿名函数 1、定义方式:var fucName = function(arg1,arg2,...){statements;} ~~~ var add = function (x,y) { return x+y; } alert(add(2,3));//输出为5 ~~~ 其中,add是该函数的唯一引用,当add=null,该函数便不能再调用。 2、匿名自执行函数: ~~~ (function(x,y) { alert(x + y) ; })(2,3); //立即自动执行,结果为5 ~~~ 3、匿名函数的用途 2.1  用于一次调用后就丢弃的函数 2.2  向prototype属性附加函数以实现对象方法的定义 ## 四、使用Function定义函数:     在JS中,Function为核心类的一种,而其他方式定义的函数也均作为对象对待,因为在JS中的OOP中,不存在类的概念,这是JS与Java、C#等语言的区别。 var add = new Function(“函数参数”,"函数体"); add为函数名,即函数的一个引用。 ~~~ var add = new Function('x','y',"return x+y"); alert(add(2,3)); ~~~ 上述的结果为5. ## 五、闭包函数:当一个函数不位于它所处环境(变量的作用范围)被调用,仍可使用本地变量(脱离了变量的作用范围仍可使用该变量),这是闭包函数的显著特征。   5.1    作为值从函数返回的函数是闭包函数 ~~~ function B() { var temp="abc"; function A() { alert("闭包函数处理本地变量temp = "+temp); } return A; } var a = B(); a(); ~~~ 运行结果:(本地变量是函数内声明的变量) ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec518bb2.jpg)   5.2   利用变量的作用范围形成闭包函数 ~~~ var F; function B() { var temp="abc"; F=function () { alert("利用变量范围形成闭包函数处理本地变量temp = "+temp); } } B(); F(); ~~~ 运行结果 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec52d8c7.jpg)
';

五:内建的全局函数

最后更新于:2022-04-01 20:32:00

## 一、eval()函数:用于将表达式转换为一个变量名或者对象名。 ~~~ var x3 = "good"; var x = 3; var y = eval("x"+x);//获得变量x3,即y=x3 alert(y); ~~~ 运行结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec4a844e.jpg) 传入的string参数不能缺少,否则出错;eval()函数会执行string中包含的JS代码。 ## 二、转义函数 2.1    escape()和unescape()函数:前者以字符串为参数,并以URL格式进行编码。所有空格、标点、重音符以及其他非ASCII字符杜都用%xx十六进制序列编码代替,例如,空格以%20代替;unescape()则相反,将URL转为字符串。 ~~~ document.write("编码前:Hello {[World]}
"); var str1 = escape("Hello {[World]}"); document.write("escape()编码:"); document.write(str1+"
"); document.write("unescape()解码:"); ~~~ ~~~ document.write(unescape(str1)+"
"); ~~~ 运行结果 ;![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ec4f1eee.jpg) escape()和unescape()处理非ASCII字符会出错,不能用于对Unicode字符编码,已不推荐使用,可以用encodeURI()和decodeURI()代替。 2.2encodeURI()和decodeURI():前者将文本字符串编码为一个有效的统一资源标示符(URI)。后者则将URI转为原始的字符串。 不能用encode()处理的字符:;、,、/、?、:、@、&、=、+、$、英文字母、数字、-、_、.、!、~、*、‘、(、)、#,此函数也不能独自形成HTTP GET或者POST请求,因为&、+、=都不会被编码,若要向服务器发送数据,可以用encodeURIComponent()和decodeURIComponent() 2.3    encodeURIComponent()和decodeURIComponent():跟encodeURI()和decodeURI()一样的功能,但是encodeURIComponent()可以用来发送HTTP GET或者POST请求。encodeURIComponent()不能转义的字符有:英文字母、数字、-、_、.、!、~、*、‘、(、) ## 三、转换函数: 3.1    parseFloat():将字符串转为浮点数,并返回字符串中的数字,知道非数字部分。若字符串不是以数字开始,则返回NaN,有效整数前面的空白和其后的非数字部分被忽略。 ex:parseFloat("-2")==>返回-2;parseFloat("123.78ad")==>返回123.78;parseFloat("df123ad")==>f返回NaN;parseFloat("123.6765.435")==》返回123.6765 3.2   parseInt(string,[radix]):将字符串转为整数,若不能转换则返回NaN,radix为可选参数,规定以radix进制返回,合法值是2~36。有效整数前面的空白和其后的非数字部分被忽略。 ex:parseInt("3.5")==>返回3;parseInt("f")==>返回NaN ## 四、判断函数 4.1   isFinite():查看某个数字是否是有限数,是则返回true,反之返回false; 4.2   isNaN():查看某个数字是否为数字,不是则返回true,反之返回false.
';

四:流程控制

最后更新于:2022-04-01 20:31:58

## 一、语句和语句块 1、语句:在Javascript中,分号或者换行均可作为Javascript的语句终止符,所以省略分号时,解释引擎会自动在行末尾添加";",但是,建议手动添加分号,有利于代码的阅读。 2、语句块:在Javascript中,语句块的界定符是:{  statement;} ~~~ var i = 1; { i = 2; var j = 1; } alert(i); //输出2 alert(j); //输出1 ~~~ 在JS中,不认为语句块是一个新范围,只有函数才创建新范围。上述的i和j在同一个作用域范围 ## 二、for...in循环:遍历对象的属性或数组元素,但不能迭代方法。此外,静态成员和部分属性(非对象原型链中的属性)也不能迭代。 2.1语法格式: ~~~ for(variable in object){ statements; }       ~~~ variable是声明的变量,代表对象的属性名,object是需要被遍历的对象。 ~~~ var myObj = {name:"JavaScript", age:11,belonging:"ECMA" } for(var prop in myObj) { document.write("myObj"+prop+"="+myObj[prop]+"
");// } ~~~ 2.2注意事项 2.2.1不会将相同的属性迭代两次。若child有原型parent,二者均有prop属性,则for-in循环中的prop来自child,忽略parent中的prop属性。 2.2.2若在类中(类内)定义一个for-in循环,则实例成员对该循环不可用,静态成员可用;若在代码中(类外)定义一个for-in循环,则实例成员可用,静态成员不可用。 ## 三、for each...in循环:遍历对象的属性值,语法格式和for-in循环差不多,但是该语法是JS1.6引入,且只在FF2及以上版本可用。 ## 四、标签语句:用于提供一个标识符,用于直接跳转到标识符处执行,仅有break和continue语句可以使用。 4.1语法格式:label:statements; label是一个符合JS规则的合法标识符,statements可以是一条语句,也可以是一个语句块。 4.2示例 ~~~ foo: for(var i = 1; i < 10; i++) { if(i == 5) break foo; document.write(i); } document.write("end"); //当i==5时,即跳出循环,执行此语句 ~~~ ## 五:with语句:方便引用对象的方法和属性 ~~~ with(object) { statements; } ~~~ ~~~ var now = new Date(); with(now) { document.write(getDay()); document.write(getMonth+1); } //未使用with document.write(now.getDay()); document.write(now.getMonth+1); ~~~
';

三:数据运算

最后更新于:2022-04-01 20:31:56

## 一、算术运算的注意事项 1、操作数不是数字时,Javascript会尝试将数据转换为数字,转换成功则进行算术运算,反之,则返回数字常量NaN: ~~~ var a = "123"; alert(++a); //输出124 alert(a-2); //输出122 alert("123ds" - 1); //输出NaN ~~~ 2、加法运算符(+) 2.1   当两个或多个数字使用“+”运算符时,执行加法算术运算。 2.2   当单个数字和其他类型的数据使用“+”运算符时,首先会将两个表达式的值转为字符串,执行字符串运算。如alert("10"+10); //输出1010 2.3   当多个数字和其他类型的数据使用“+”运算符时,首先会从左到右根据运算符两边的数据类型进行判断,是采用算术运算还是字符串运算。如alert("10"+10+5); //输出10105;而alert(5+10+"10"); //输出1510 ## 二、全等运算符 1、数字和逻辑值按值比较,值相等,则返回true。 2、字符串具有相同字符数且对应位置的字符相同,则返回TRUE。 3、对于对象、函数和数组变量则是按引用比较,若引用同一个对象,则返回TRUE。 ## 三、特殊值的比较 1、常量NaN:没有具体数值,解释引擎一般将其表示为一个随机对象。 ~~~ alert(NaN == NaN); //false alert(NaN != NaN); //true alert(NaN >= NaN); //false alert(NaN < NaN); //false ~~~ 2、null和undefined的比较:无规律,参考一下示例 ~~~ alert(null == undefined); //true alert(null != undefined); //false alert(null >= undefined); //false alert(null < undefined); //false alert(null === undefined); //false ~~~ ## 四:浅谈typeof、instanceof和delete运算符 1、typeof运算符用于测试表达式的类型,格式为 typeof(expression); 1.1用于特殊类型: ~~~ typeof(NaN); //number类型 typeof(Infinity); //number类型 typeof(Undefined); //undefined类型 typeof(null); //object类型 ~~~ 1.2用于Javascript的核心类,永远返回object: ~~~ var blog = "myblog"; var blog1 = new String("myblog"); alert(typeof blog); //输出string alert(typeof blog1); //输出object ~~~ 2、instanceof运算符:测试表达式是否是指定类的实例 ~~~ var blog = "myblog"; var blog1 = new String("myblog"); alert(blog instanceof String); //false alert(blog1 instanceof String); //true ~~~ 3、delete运算符:破坏对象属性,使其初始值为undefined,执行成功返回TRUE,但是delete不能删除对象的固定属性,如数组的length属性 ~~~ var user = new Object; user.name = "zhang"; user.age = 20; var b = delete user.name; alert(b); //true ~~~
';

二:变量

最后更新于:2022-04-01 20:31:53

## 一、变量的数据类型 1、简单数据类型:Boolean/String/NumberUndefined/Null 在Javascript的简单数据类型中,有两个特别的类型:Undefined和Null,二者均只有一个值,分别是undefined和null(区分大小写),具体说明详见下文的常量部分。 2、复杂数据类型:常见的有两种,Array(数组)和Object(对象)。 2.1 在JavaScript中,不能直接声明二维等多维数组,但是可以通过嵌套实现,以声明二维数组为例,常见方式有: 2.1.1  var arr1 = new Array(); arr1[0] = new Array(); 2.1.2  var arr2 = new Array([1,2,3],new Array([4,5,6)); 2.1.3  var arr3 = [[1,2],[3,4]]; 2.2 Object是属性集合,属性用于描述对象特性。属性值可以是任何Javascript数据类型,包括对象。 var user  = new Object(); user.name = "zahng"; user.age=20; 上述定义了一个user对象,并给user的name和age属性赋值。 ## 二、变量的声明 1、在Javascript中,使用var声明变量:var 变量名;Javascript是无类型语言,在声明时不需要指定变量的数据类型,Javascript会自动转换。(变量名区分的大小写,在非严格模式下,var可以省略) 2、Javascript变量命名规范 2.1 第一个字符必须是字母、下划线或美元符 2.2 后跟任意的字母、数字、美元符和下划线,也可以是unicode字符(包括中文) 2.3 不能是关键字或逻辑常量(true/flase/null/undefined),且在作用范围内必须唯一 ## 三、常量 1、null常量:表示某个变量或属性未赋值。常见情况: 1.1 表示变量存在,蛋不需要定义值或未赋值:var ex1 = null;var ex2; 1.2 表示函数没有返回值:function getInfo(){return null;} 1.3 表示调用函数或方法,省略一个参数。 1.4 表示动态对象的属性值,当没有初始化,其值为null 2、undefined常量:表示未初始化的变量或动态对象属性。作用于不同类型时,返回值不同 String(undefined)返回字符串"undefined"; Number(undefined)返回"NaN"; Object(undefined)返回新的Object实例 3、null常量和undefined常量的比较 3.1 使用==和===比较null和undefined,返回值不同 nul == undefined返回true,null === undefined返回false. 3.2 概念的比较 var info = new Object; info.mes; alert(info.mes == null);  //返回true var user = new Object;alert(user,sex);  //返回undefined,sex属性没有初始化,null是针对动态对象属性,而Object是非动态属性 ## 四、ECMAScript的严格模式 1、使用严格模式 在全局范围或者函数内部(局部范围)使用严格模式,只需在脚本代码的第一行添加:"use strict";就可以在ECMAScript的严格模式的编程 2、严格模式下的特定要求 2.1 必须使用var关键字声明变量。 2.2 对象的属性名必须唯一且不同定义相同属性 2.3 函数中不同有同名参数且arguments数组的属性是只读的 2.4 eval成为i保留的关键字 2.5 with语句被抛弃,且不支持八进制数字
';

最后更新于:2022-04-01 20:31:51

## 一、正确认识ECMAScript、JavaScript和JScript 1、JavaScript有网景公司创建,原名为LiveScript。 2、JavaScript被Netscape公司提交给ECMA制定标准时,才有了ECMAScript的诞生。 3、JavaScript和JScript是不同的脚本语言,前者属于Netscape公司,在服务端由Livewire解释, 不属于ASP语法;后者属于微软,在服务端,与VBScript使用相同的服务器解释,属于ASP语法。 ## 二、在HTML中嵌入Javascript的常见方式 1、使用script元素定义,代码在文档加载后执行,且只执行一次:  ~~~ ~~~ 2、定义在内建事件属性中,当事件触发时执行   ~~~ ~~~ 3、在HTML中动态加载外部的脚本文件 url是外部Javascript文件的路径 ## 三、良好的编程习惯: 1、Javascript文件尽量放在外部文件中 2、尽量避免在HTML中直接写脚本。 3、脚本尽量放在文件后面,可以减少页面的加载时间
';