引言
從畢業到年已經整整7年,期間一直從事.net開發做c/s從 c# 轉到 wpf 而后又開始做b/s 用silverlight,從最開始的arcgis engine 到后來的silverlight api ,去年開始一直在涉及開源的GIS方面應用開發openlayers geoserver dotspatial等。c/s方面還可以用.net的一些開源庫來搞,bs原本想湊合用sl混混,但是不會js實在是讓我工作起來很難受。這次正好有個項目用涉及到的系統都是提供js接口,本屌絲連html頁面標簽都認不全,無比蛋疼之下只好下定決心。
javaScript 介紹
通用跨平台的腳本語言。
js主要由以下三部分組成
ECMAScript 核心
DOM 文檔對象模型
BOM 瀏覽器對象模型
ECMAScript:
1997年 制定的 ECMA-262標准 中定義了ECMAScript
最新一版的標准時2009年的ECMA-262第5版 簡稱ECMAScript 5
從第一版到第五版 如果用C#的角度來解釋就可以理解為C#1.0-5.0這種概念。
ECMAScript與web瀏覽器沒有關系,Web瀏覽器只是ECMAScript實現可能的宿主環境之一,其他宿主比如Adobe Flash。
ECMAScript 主要規定了如下內容:語法、類型、語句、關鍵字、保留字、操作符、對象。
javaScript實現了ECMAScript,Adobe ActionScript也同樣實現了ECMAScript。
到了2008年,五大主流web瀏覽器(IE,Firefox,Safari,Chrome,Opera)全部做到了與ECMA-262兼容。對於ecmascript5的兼容如下:
Opera 11.60+、
Internet Explorer 9+、Firefox 4+、Safari 5.1+、Chrome 13
文檔對象模型(DOM)
文檔對象模型是針對XML的,但經過擴展用於HTML的應用程序API。DOM把整個頁面映射為一個多層節點結構。HTML或者XML頁面中的每個組成部分都是這種類型的節點,這些節點又包含着不同類型的數據。
DOM並不是針對js的,很多語言都實現了DOM.
DOM Level1 於1998年10月成為W3C的推薦標准。
DOM1由兩個模塊組成:
DOM core
DOM HTML
其中DOM核心規定了如何映射基於XML的文檔結構。DOM HTML模塊則在DOM核心的基礎上加以擴展,添加了針對HTML的對象和方法。
DOM2在DOM1的基礎上增加了鼠標和用戶界面事件、范圍、遍歷等。DOM3又進一步擴展了DOM。
瀏覽器對象模型(BOM)
BOM可以控制瀏覽器顯示的頁面以為的部分。但是BOM沒有相關的標准這也導致了各種問題。HTML5致力於把很多BOM功能寫入正式規范。人們習慣把所有針對瀏覽器的js擴展算作BOM的一部分,如:彈出新的瀏覽器窗口,移動、縮放關閉瀏覽器窗口,cookies支持,提供瀏覽器信息的navigator對象,提供瀏覽器加載頁面信息的location對象,提供用戶顯示器分辨率的screen對象xmlhttprequest和activexobject這也的自定義對象。
由於沒有BOM的標准,因此每個瀏覽器都有自己的實現。
JavaScript的版本
當前最新版本應該是2010年7月的1.82 對應的IE版本是9
在HTML中使用JavaScript
<script>元素
向HTML頁面中插入js的主要方法就是使用<script>元素,相關屬性:
async:可選。立即下載腳本,但不反感頁面中的其他操作。只對外部腳本文件有效。
charset:可選。標識通過src屬性制定的代碼的字符集。
src:可選。表示包含要執行代碼的外部文件。
type:可選默認值為text/javascript。為了兼容性一般使用text/javascript。
示例:
<script type=“text/javascript”>
function sayhi(){alert(“hi”);}
</script>
包含在<script>元素內部的js代碼將被從上至下依次解釋。然后將該定義保存在自己的環境當中。在解釋器對<script>元素內部的所有代碼解釋完畢前,頁面中的其余內容都不會被瀏覽器加載或顯示。
在使用<script>嵌入js代碼時要注意不能出現”</script>”字符串如下:
<script type=”text/javascript”>
function sayhi()
{
alert(“</script>”);這樣就會報錯
alert(“<\/scriot>”);這樣才正確
}</script>
如果要通過<script>元素來包含外部js文件則需要指定src屬性。src屬性接收一個url。如果指定了src屬性則<srcript>標簽中不在解析包含的代碼。只要不存在defer和async屬性,瀏覽器都會按照<script>元素在頁面中出現的先后屬性對他們一次進行解析。
標簽的位置
按照慣例,所有的<script>元素都應該放在頁面的<head>元素中。但是這種做法導致要全部的js代碼都下載解析完后,才會開始呈現頁面內容(瀏覽器遇到<body>標簽時才開始呈現內容)。這樣對於很多js代碼的頁面來說,用戶體驗很不好,為了避免這個問題現代web英語程序一版會把全部jsavascript引用放在<body>元素中頁面的內容后面。如:
<!DOCTYPE html>
<html>
<head>
<title>123<title>
</head>
<body>
<!--這里放內容—》
<script type=”text/javascript”src=”example1.js”></script>
</body>
</html>
</html>
在html4.01開始為<script>定義了defer屬性
<srcipt type=”text/javascript” defer=”defer”src=”example1.js”></script>
這樣就可以把js代碼放到head中了