script標(biāo)簽用于在HTML頁面中嵌入一些可執(zhí)的腳本
<script> //some script goes here </script>
script標(biāo)簽有三個特殊的屬性(當(dāng)然,像id,class這樣的屬性它也是有的,HTML頁面中幾乎每個元素都可以有class,id屬性)
<script language="JavaScript">//language屬性指明標(biāo)簽里包含的腳本所使用的語言 //它有三個常見的取值JavaScript,JScript,VBScript //some script goes here </script> //對于JScript只有IE能夠識別,其它瀏覽器會忽略這個標(biāo)簽其里面的內(nèi)容 //而對于VBScript,只有Windows上的IE能夠識別,運(yùn)行 //然而language屬性后來在XHTML中被type屬性替代了 <script type="text/javascript">//取值也變了,text/javascript,text/jscript,text/vbscript //some script goes here </script>
在Web瀏覽器中,我們只會使用JavaScript,type屬性設(shè)置為text/javascript.事實(shí)上,由于JavaScript十分流行,它幾乎成了腳本的代名詞,而在Web瀏覽器中,即使script標(biāo)簽不加任何屬性,瀏覽器也會把它當(dāng)成JavaScript
<script> alert("Hello!"); </script> //上面的那段代碼將會按JavaScript的方式運(yùn)行 //即使有IE中,不加聲明的script塊也會當(dāng)成JavaScript執(zhí)行,而不是VBScript <script> msgbox "Hello!" </script> //上面的代碼在IE中也會報(bào)錯,IE也會將其當(dāng)成JavaScript執(zhí)行
以前在HTML頁面中,一些標(biāo)簽常會加一些諸如onclick,onmouseover這樣的屬性,這是一種事件綁定(關(guān)于事件,我們之后會詳細(xì)講解的,不要急).用于指定當(dāng)HTML頁面某個元素上發(fā)生了什么事的時候去執(zhí)行的JavaScript代碼(當(dāng)然也可以是其它客戶端腳本)
<img src="../images/stack_heap.jpg" alt="內(nèi)存堆棧" onclick="alert('你把我點(diǎn)疼了!')" />
上面的代碼將在HTML頁面上顯示一個圖像,當(dāng)你用鼠標(biāo)點(diǎn)擊一下時,會出現(xiàn)一個彈窗,顯示'你把我點(diǎn)疼了!',onclick屬性的值其實(shí)是一段JavaScript代碼;這就是事件,下面是其它一些簡單的事件
以前網(wǎng)上十分流行的稱之為RollverImages(翻轉(zhuǎn)圖像)的效果其實(shí)就是組合onmouseover,onmouseout這樣的事件和簡單的JavaScript代碼實(shí)現(xiàn)的
<img src="../images/stack_heap.jpg" alt="內(nèi)存堆棧" onmouseover="this.src='../images/over.jpg'" onmouseout="this.src='../images/out.jpg'" />
你可能知道,onmouseover這類的屬性中的字符串將會在事件發(fā)生時當(dāng)成腳本來執(zhí)行,但上面的那些代碼看上去十分模糊
//為了便于查看,我們將它們提取出來放在下面 this.src='../images/over.jpg' this.src='../images/out.jpg'
分析上面的代碼,我們發(fā)現(xiàn),這其實(shí)是在給一個對象this的屬性src賦值,但問題是我們并沒有聲明過一個叫this的對象!其實(shí)this對象是一個一直存在的一個對象,它不能被聲明(this是關(guān)鍵字).這里,this就是指"這個",指這個標(biāo)簽!對于HTML中的元素,JavaScript會自動將其解析成一個對象.對于下面的img標(biāo)簽,會解析成下面一個對象:
<img src="../images/stack_heap.jpg" alt="內(nèi)存堆棧" onclick="alert('Hello!')" /> //注意,實(shí)際上this是不能手動賦值,也不能手動聲明的,這里僅僅是演示 this = { src:"../images/stack_heap.jpg", alt:"內(nèi)存堆棧", onclick:"alert('Hello!')", tagName:"IMG" }; //其實(shí)不止這些屬性
上面,img標(biāo)簽會被解析成一個對象,具有src,alt等屬性,src,alt屬性是我們寫在HTML里面的,而tagName則是系統(tǒng)自動生成的,它表示標(biāo)簽的標(biāo)簽名!我們可以用下面的代碼進(jìn)行測試:
<img src="../images/stack_heap.jpg" alt="內(nèi)存堆棧" onclick="alert(this.src);alert(this.tagName);" />
自然,我們也可以修改它的值,于是翻轉(zhuǎn)圖象的效果就這樣成功了
對于這樣的行內(nèi)事件綁定,有一些注意點(diǎn).
<head> <script> function myFn() { alert("圖象加載完成了!"); } </script> </head> //.............若干若干代碼之后 <img src="../images/stack_heap.jpg" alt="內(nèi)存堆棧" onload="myFn()" />//當(dāng)圖象加載成功時執(zhí)行一個函數(shù)
上面的代碼執(zhí)行是沒問題的,然而將順序翻轉(zhuǎn)一下(script可以放在任何合法的地方)
<img src="../images/stack_heap.jpg" alt="內(nèi)存堆棧" onload="myFn()" />//當(dāng)圖象加載成功時執(zhí)行一個函數(shù) //.............若干若干代碼之后 <script> function myFn() { alert("圖象加載完成了!"); } </script>
HTML頁面按照從上往下的順序加載執(zhí)行,當(dāng)圖象加載成功后,就去執(zhí)行onload里的內(nèi)容(一個自定義函數(shù)),但由于script標(biāo)簽在下面若干代碼之后,所以還沒被加載,因此會出錯"myFn is undefined";這就是為什么要將script標(biāo)簽放在head部分的原因,因?yàn)閔ead在body前面,當(dāng)body里的元素加載完成時,head中的script肯定加載完成了
但后來有了XHTML,有了"三層分離",W3C推出了DOM2,我們需要使用另一種方式綁定事件,獲取HTML頁面元素.再以上面的圖像為例:
<head> <script> var img = document.getElementById("myImg");//我們通過ID來獲取它 //document.getElementById方法有個參數(shù),一個字符串ID //然后,img就表示了那個圖像標(biāo)簽對象 img.onclick = myFn; /*我們不是把JavaScript代碼以字符串符值給它的onclick屬性 而是直接賦值給它一個函數(shù)名 你也會說,為什么不是img.onclick=myFn(); 因?yàn)楝F(xiàn)在是在JavaScript代碼區(qū)域中 加"()"表示執(zhí)行這個函數(shù),然后將這個函數(shù)的返回值賦給了img.onclick*/ function myFn() { alert("圖象加載完成了!"); } </script> </head> //....... <img src="../images/stack_heap.jpg" id="myImg" alt="內(nèi)存堆棧" /> //我們不再加onclick屬性了,而是給它起了個ID
但上面的代碼執(zhí)行了仍會出錯,因?yàn)镠TML從上往下加載,當(dāng)加載到script時,body部分在下面,還沒有被加載,而JavaScript在瀏覽加載到時就會自動執(zhí)行.這時,頁面上的ID為myImg的img還沒被加載到,所以會出錯;document.getElementById方法需要一個字符串形式的ID,而如果頁面上沒有ID為這個的元素,它則會返回null(空對象);而在下面一行,img.onclick這一句使用了一個空對象,所以會在這里出錯!至于解決方法,其實(shí)只是將傳統(tǒng)的行內(nèi)事件綁定的script位置反過來放.將script放在所以HTML元素后面!
<img src="../images/stack_heap.jpg" id="myImg" alt="內(nèi)存堆棧" /> //..................若干代碼之后 <script> var img = document.getElementById("myImg"); //這個時候,由于script標(biāo)簽放置的位置處在img標(biāo)簽之后,加載到script時img標(biāo)簽肯定加載完成了 img.onclick = myFn; function myFn() { alert("圖象加載完成了!"); } </script>
但標(biāo)準(zhǔn)仍然推薦將script放在head部分!那么,這就要用到另一個事件onload
window.onload = initAll;//將所有代碼寫在一個函數(shù)之中,然后注冊到window對象的onload事件屬性上 //window表示窗口對象,只要窗口打開,它就始終存在,當(dāng)頁面加載完成后,會觸發(fā)window對象上的onload事件 function initAll() { var img = document.getElementById("myImg"); img.onclick = myFn; function myFn() { alert("圖象加載完成了!"); } }
這樣,代碼就不出錯了,不管將腳本放在什么位置,initAll只有當(dāng)頁面加載完成后才會被執(zhí)行
HTML DOM將整個頁面當(dāng)成一個document對象,HTML里的標(biāo)簽都要通過document對象來訪問.而文檔中的每個標(biāo)簽,又會轉(zhuǎn)換成一個對象
<p class="demo" title="第一個段落:DOM樹" id="p1">我們用一個p標(biāo)簽來演示</p>
它又會被轉(zhuǎn)換成下面這個對象
//總該記得對象字面量語法吧 { tagName:"p", className:"demo", title:"第一個段落:DOM樹", id:"p1", innerHTML:"我們用一個p標(biāo)簽來演示" } //你也許會奇怪,為什么標(biāo)簽的class屬性會變成對象的className屬性而不是class. //class是JavaScript保留字!!! //tagName表示它的標(biāo)簽名,而innerHTML表示它里面的HTML代碼
瀏覽將HTML標(biāo)簽轉(zhuǎn)換成這樣的對象后,在JavaScript中訪問該標(biāo)簽的屬性或里面的內(nèi)容就簡單多了,但問題是如何訪問到這個對象!!
//首先要給該標(biāo)簽加個ID,然后使用document.getElementById方法就能夠訪問到它了 window.onload = initAll;//注意,要將所要訪問HTML頁面的代碼都放在window的onload事件處理上! function initAll() { var p = document.getElementById("p1"); alert(p.className); alert(p.tagName); alert(p.title); alert(p.id); alert(p.innerHTML); }
訪問HTML頁面就這么簡單!獲取一個元素之后,不但可以讀取它的屬性值,還可以設(shè)置它的屬性值!
window.onload = initAll;
function initAll() {
var p = document.getElementById("p1");
p.title="JavaScript";
p.className="load";//我們可以更改它的樣式
}
利用這些,我們已經(jīng)能做出一些激動人心的事了!
//一些CSS .over { color:red; background:blue; font-size:larger; } .out { color:black; background:white; font-size:smaller; } .click { color:yellow; background:yellow; font-size:12px; }
//HTML代碼
<p id="p1" class="out">一大行文字,它們都是普通的文字!</p>
//JavaScript代碼 window.onload = initAll; function initAll() { var p = document.getElementById("p1"); p.onclick=clickFn;//這里的事件注冊方式除了比行內(nèi)注冊方式少了括號,其它的是一樣的 p.onmouseover = overFn; p.onmouseout = outFn; } function clickFn() { this.className="click";//這里,this也是可用的 //注意是className,而不是class } function overFn() { this.className="over"; } function outFn() { this.className="out"; }
當(dāng)然,獲取頁面元素不止這一種方法.document.getElementsByTagName方法也能獲取頁面元素,顧名思意,它是通過HTML的標(biāo)簽來獲取元素的,而不是ID. 因?yàn)橐粡圚TML頁面,一個ID名稱是唯一的,而標(biāo)簽名則大多數(shù)是相同的,所以,getElementsByTagName方法只有一個參數(shù),即一個字符串形式的標(biāo)簽名(tagName),而返回值則是一個類似數(shù)組的HTML元素列表
window.onload = initAll;//仍然要寫在window.onload事件處理函數(shù)中 function initAll() { var pList = document.getElementsByTagName("P"); //為什么要用大寫的P?其實(shí)用小寫p也可以,不區(qū)分大小寫,但由于對象的tagName總報(bào)告的是大寫的,就.... alert(pList.length);//與數(shù)組相似,length報(bào)告有多少個元素,頁面上有多少個p標(biāo)簽,就報(bào)告多少 alert(pList[0].innerHTML);//這樣來訪問第一個p元素 }
另外,對于document.getElementsByTagName方法,還可以傳一個"*"號作為參數(shù),以獲取頁面的所有元素,類似于CSS里面的通配符
window.onload = initAll;
function initAll() {
var allThings = document.body.getElementsByTagName("*");
//可在任何DOM元素上調(diào)用getElementsByTagName方法,在body上調(diào)用此方法時,body外的標(biāo)簽不會獲取到
alert(allThings.length);//頁面上有多少個標(biāo)簽,就報(bào)告多少(包含DOCTYPE)
alert(allThings[3].innerHTML);//這樣來訪問第四個元素
}
偽協(xié)議不同于因特網(wǎng)上所真實(shí)存在的如http://,https://,ftp://,而是為關(guān)聯(lián)應(yīng)用程序而使用的.如:tencent://(關(guān)聯(lián)QQ),data:(用base64編碼來在瀏覽器端輸出二進(jìn)制文件),還有就是javascript:
我們可以在瀏覽地址欄里輸入"javascript:alert('JS!');",點(diǎn)轉(zhuǎn)到后會發(fā)現(xiàn),實(shí)際上是把javascript:后面的代碼當(dāng)JavaScript來執(zhí)行,并將結(jié)果值返回給當(dāng)前頁面
類似,我們可以在a標(biāo)簽的href屬性中使用javascript偽協(xié)議
<a href="javascript:alert('JS!');"></a> //點(diǎn)擊這面的鏈接,瀏覽器并不會跳轉(zhuǎn)到任何頁面,而是顯示一個彈窗
但javascript:偽協(xié)議有個問題,它會將執(zhí)行結(jié)果返回給當(dāng)然的頁面
<a href="javascript:window.prompt('輸入內(nèi)容將替換當(dāng)前頁面!','');">A</a>
解決方法很簡單
<a href="javascript:window.prompt('輸入內(nèi)容將替換當(dāng)前頁面!','');undefined;">A</a> //將undefined加到最后
盡管javascript偽協(xié)議提供了一定的靈活性,但在頁面中盡量不要使用!而對于調(diào)試JavaScript,javascript偽協(xié)議則顯得十分有用!
