首頁 >
文章 > web前端 > JavaScript高階程式設計(第3版)學習筆記 概述_基礎知識
JavaScript高階程式設計(第3版)學習筆記 概述_基礎知識 WBOY 原創
2016-05-16 17:49:20 888瀏覽
在JavaScript面世之初,没有人会想到它会被应用的如此广泛,也远比一般人想象中的要复杂强大的多,在我自己学习的过程中,曾经有过多次震撼,只是常常没有过多久,很多美轮美奂的用法就又模糊起来,希望通过对JavaScript高级程序设计(第3版)的专题学习笔记,能够较为系统的将基础知识梳理一次,也能够将自己平常学习与工作过程中遇到的一些美妙用法记录下来,便于自己再次学习,当然,也希望可以给有需要的朋友们一些力所能及的帮助。
相关术语
先简要说一下和JavaScript相关的一些背景术语,就不详细讨论JavaScript的历史了,想了解的朋友可以参考原书。
ECMA:欧洲计算机制造商协会(Standard ECMA-262European Computer Manufacturers Association)。
TC39:ECMA第39号技术委员会(Technical Committee#39),由来自一些关注脚本语言发展的公司的程序员组成,负责制定一种通用、跨平台、供应商中立的脚本语言。
ECMAScript:由ECMA制定,在ECMA-262中定义的脚本语言标准。ECMAScript只是一个脚本语言标准,你尽可以在自己的环境中取实现它,这个环境,就称为ECMAScript的宿主环境,Web浏览器可以说是ECMAScript目前最重要的宿主环境了,而不同的Web浏览器,对ECMAScript标准的支持也不尽相同。除Web浏览器,Adobe ActionScript也实现了ECMAScript。一般的宿主环境,除了实现ECMAScript标准,也会有各自的扩展,以便与环境更好的交互。
ES3、ES5:ECMAScript目前最新的版本是5.1版,发布于2011年7月,可以从其官方网站免费下载 。最主要的两个版本是第3版和第5版,分别简称为ES3和ES5,目前五大浏览器(IE、Firefox、Chrome、Safari、Opera)都已经开始不同程度的支持ES5了,但目前在Web浏览器上兼容性最好的还是第3版。介于向后兼容和安全上的考虑,第5版提供了普通和严格两种模式,后面会再讨论相关内容。
LiveScript、JavaScript、JScript:LiveScript是Netscape最初开发JavaScript时的名称,在发布时,为了赶上Java的时髦,临时修改为JavaScript了,而JScript则是微软为了防止版权冲突而给自己的脚本语言起的名称。对于开发者来说,他们都只是ECMAScript的实现。一般来说,JavaScript的除了实现ECMAScript外,还会包括针对浏览器的扩展(BOM:浏览器对象模型)和针对XML/HTML API的扩展(DOM:文档对象模型)。
DOM:文档对象模型(Document Object Model),DOM标准由负责制定WEB通信标准的W3C(World Web Consortium,万维网联盟)制定。DOM并非针对JavaScript的,很多别的语言也都实现了DOM。目前DOM共有三级标准(DOM1、DOM2、DOM3),有时,也将DOM标准之前称为DOM0级,现代浏览器几乎全部支持DOM2级标准,也部分支持DOM3级标准了。
BOM:浏览器对象模型(Browser Object Model)。
使用JavaScript
在HTML中使用JavaScript的方式主要有:
使用<script>标签元素引入外部文件(推荐),将代码写入外部文件中。
</li>
<li>使用<script>标签元素嵌入JavaScript代码。
</li>
<li>直接在HTML中嵌入JavaScript代码,比如在HTML元素中的事件处理程序。</li>
</ol>
<p> <script>标签元素:</p>
<table class="cnblogs_code" border="1">
<tbody>
<tr>
<td>属性</td>
<td>是否必填</td>
<td>适用范围</td>
<td>说明</td>
</tr>
<tr>
<td>async</td>
<td>可选</td>
<td>外部文件</td>
<td>表示应该立即下载脚本,但不应妨碍页面中的其它操作,比如下载资源或其它脚本文件</td>
</tr>
<tr>
<td>charset</td>
<td>可选</td>
<td>外部文件</td>
<td>表示通过src指定的代码的字符集</td>
</tr>
<tr>
<td>defer</td>
<td>可选</td>
<td>外部文件,IE4-7也支持嵌入代码</td>
<td>表示脚本可以延迟到文档完全解析和显示之后再执行</td>
</tr>
<tr>
<td>language</td>
<td>可选(已废弃)</td>
<td> </td>
<td>原用于表示编写代码的脚本语言</td>
</tr>
<tr>
<td>src</td>
<td>可选,使用外部文件时为必填选项</td>
<td>外部文件</td>
<td>表示包含要执行的外部文件</td>
</tr>
<tr>
<td>type</td>
<td>可选,默认text/javascript</td>
<td> </td>
<td>可以看成是language的替代属性,表示编写代码使用的脚本语言的内容类型(也称为MIME类型)。</td>
</tr>
</tbody>
</table>
<p> 说明:</p>
<p> (1)外部文件</p>
<p> A、在XHTML文档中,导入外部文件时,可以使用简写方式<script/>但是在HTML中只能<script></script>。
B、导入外部文件时,src属性是必须的,这个时候嵌入在<script></script>中的代码(如果有)会被忽略。
C、src属性也可以指定来自外部域的JavaScript文件,这一点让');会将字符串中的作为前面的标签结束符来解析,从而出现异常 document.writeln('');//通过将分开,从而避免作为<script>的结束标签解析 <br></script>
(3)关于type属性,虽然text/javascript和java/ecmascript都已经不被推荐使用,但一直以来使用的都还是test/javascript,实际上,服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript,但在type中设置这个值可能导致脚本被忽略,另外,在非IE浏览器中还可以使用application/javascript和application/ecmascript。type如果没有指定,默认值为text/javascript。
(4)只要不包含async和defer,浏览器会按照<script>在页面中出现的顺序依次解析;设置了defer时,会立即下载<script>元素,但是延迟执行,在规范中,要求多个含defer属性的脚本顺序执行且在DOMContentLoaded事件前执行,但是在实现中不一定满足这些要求;在HTML5中添加了async属性,和defer类似,也只是适用于外部文件,告诉浏览器立即下载文件,但延迟执行,不同的是,多个含async的脚本即便在规范中也没有规定执行的顺序,异步脚本再load事件前执行,但可能在DOMContentLoaded之前或之后执行。 <br><br> (5)在阅读之前的代码或者用一些IDE生成代码时,常常可以看到下面的结构: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="73941" class="copybut" id="copybut73941" onclick="doCopy('code73941')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code73941"> <br><script type="text/javascript"> <br>//<![CDATA[ <BR>// 这里首先是以//开始的JavaScript注释 <BR>// 然后<![CDATA[...]]>结构是XHTML(XML)的一个特殊区域,区域内的文本不需要做任何解析,以防止XHTML将代码中的类似小于号“<”的这种特殊符号解析为元素标签 <BR>// 若不使用CDATA结构,则需要转义成相应实体,比如小于号(<)需要使用(<) <BR>// 对于不兼容XHTML的,由于最开始的//注释,也能够平稳退化 <BR>//]]> <br></script>
一些常用的HTML转义:
显示
说明
实体名称
实体编号
半方大的空白
全方大的空白
不断行的空白
<
小于
<
<
>
大于
>
>
&
&符号
&
&
"
双引号
"
"
有些不支援JavaScript的瀏覽器,可以將JavaScript程式碼包含在一個HTML註解中(由於所有主流瀏覽器均支援JavaScript,所以不再建議使用):
<script><!-- <BR>//--></script>『〜
對於某些老舊瀏覽器或停用了JavaScript的瀏覽器,也可以使用
元素來呈現相關的說明。
文檔模式 在IE5.5中開始引入文檔模式的概念,透過使用透過文件類型(doctype)切換實現的,最初包括混雜模式(quirks mode)與標準模式(standards mode),混雜模式讓IE的行為與包含非標準特性的IE5相同,標準模式則讓IE的行為更接近標準行為。在IE引進文件模式之後,其他瀏覽器也紛紛仿效。之後,IE提出一種所謂準標準模式(almost standards mode),這種模式下的瀏覽器特性有很多是符合標準的,但也不盡然。所有瀏覽器預設開啟混雜模式。
可以透過下面的方法啟動標準模式:
複製程式碼
複製程式碼 程式碼
複製程式碼 程式碼如下: 程式碼如下: 程式碼如下:
程式碼如下:
參考書籍 [1]Professional JavaScript for Web Developers 3rd Edition:JavaScript高級程式設計(第3版)[美]Nicholas C.Zakes 著李松峰曹力譯人民郵電出版社。