javascript快速入門6--Script標籤與訪問HTML頁面

時間 2019-11-13

標籤 javascript 快速入門 script 標籤訪問 html 頁面欄目 JavaScript 简体版

原文原文鏈接

Script標籤

script標籤用於在HTML頁面中嵌入一些可執的腳本javascript

    <script>
        //some script goes here
    </script>

script標籤有三個特殊的屬性(固然,像id,class這樣的屬性它也是有的,HTML頁面中幾乎每一個元素均可以有class,id屬性)java

    <script language="JavaScript">//language屬性指明標籤裏包含的腳本所使用的語言
        //它有三個常見的取值JavaScript,JScript,VBScript
        //some script goes here
    </script>
    //對於JScript只有IE可以識別,其它瀏覽器會忽略這個標籤其裏面的內容
    //而對於VBScript,只有Windows上的IE可以識別,運行
    //然而language屬性後來在XHTML中被type屬性替代了
    <script type="text/javascript">//取值也變了,text/javascript,text/jscript,text/vbscript
        //some script goes here
    </script>

在Web瀏覽器中,咱們只會使用JavaScript,type屬性設置爲text/javascript.事實上,因爲JavaScript十分流行,它幾乎成了腳本的代名詞,而在Web瀏覽器中,即便script標籤不加任何屬性,瀏覽器也會把它當成JavaScript數組

    <script>
        alert("Hello!");
    </script>
    //上面的那段代碼將會按JavaScript的方式運行
    //即便有IE中,不加聲明的script塊也會當成JavaScript執行,而不是VBScript
    <script>
        msgbox "Hello!"
    </script>
    //上面的代碼在IE中也會報錯,IE也會將其當成JavaScript執行

之前在HTML頁面中,一些標籤常會加一些諸如onclick,onmouseover這樣的屬性,這是一種事件綁定(關於事件,咱們以後會詳細講解的,不要急).用於指定當HTML頁面某個元素上發生了什麼事的時候去執行的JavaScript代碼(固然也能夠是其它客戶端腳本)瀏覽器

   <img src="../images/stack_heap.jpg" alt="內存堆棧" onclick="alert('你把我點疼了!')"  />

上面的代碼將在HTML頁面上顯示一個圖像,當你用鼠標點擊一下時,會出現一個彈窗,顯示'你把我點疼了!',onclick屬性的值實際上是一段JavaScript代碼;這就是事件,下面是其它一些簡單的事件函數

onclick ,當鼠標點擊一下時執行一次
onmouseover ,當鼠標放上去時執行一次
onmouseout ,當鼠標移出去時執行一次
onmousedown ,當鼠標按下時執行一次
onmouseup ,當鼠標在上面鬆開(彈起)時執行一次
onmousedblclick ,當鼠標雙擊時執行一次
onload ,當對象加載完成時執行一次

之前網上十分流行的稱之爲RollverImages(翻轉圖像)的效果其實就是組合onmouseover,onmouseout這樣的事件和簡單的JavaScript代碼實現的測試

<img src="../images/stack_heap.jpg" alt="內存堆棧"
     onmouseover="this.src='../images/over.jpg'" 
     onmouseout="this.src='../images/out.jpg'"  />

你可能知道,onmouseover這類的屬性中的字符串將會在事件發生時當成腳原本執行,但上面的那些代碼看上去十分模糊this

     //爲了便於查看,咱們將它們提取出來放在下面
     this.src='../images/over.jpg'
     this.src='../images/out.jpg'

分析上面的代碼,咱們發現,這實際上是在給一個對象this的屬性src賦值,但問題是咱們並無聲明過一個叫this的對象!其實this對象是一個一直存在的一個對象,它不能被聲明(this是關鍵字).這裏,this就是指"這個",指這個標籤!對於HTML中的元素,JavaScript會自動將其解析成一個對象.對於下面的img標籤,會解析成下面一個對象:編碼

     <img src="../images/stack_heap.jpg" alt="內存堆棧" onclick="alert('Hello!')"  />
     //注意,實際上this是不能手動賦值,也不能手動聲明的,這裏僅僅是演示
     this = {
         src:"../images/stack_heap.jpg",
         alt:"內存堆棧",
         onclick:"alert('Hello!')",
         tagName:"IMG"
     };
     //其實不止這些屬性

上面,img標籤會被解析成一個對象,具備src,alt等屬性,src,alt屬性是咱們寫在HTML裏面的,而tagName則是系統自動生成的,它表示標籤的標籤名!咱們能夠用下面的代碼進行測試:spa

 <img src="../images/stack_heap.jpg" alt="內存堆棧" onclick="alert(this.src);alert(this.tagName);"  />

天然,咱們也能夠修改它的值,因而翻轉圖象的效果就這樣成功了調試

對於這樣的行內事件綁定,有一些注意點.

    <head>
         <script>
            function myFn() {
                alert("圖象加載完成了!");
            }
        </script>
    </head>
    //.............若干若干代碼以後
     <img src="../images/stack_heap.jpg" alt="內存堆棧" onload="myFn()"  />//當圖象加載成功時執行一個函數

上面的代碼執行是沒問題的,然而將順序翻轉一下(script能夠放在任何合法的地方)

    <img src="../images/stack_heap.jpg" alt="內存堆棧" onload="myFn()"  />//當圖象加載成功時執行一個函數
    //.............若干若干代碼以後
    <script>
        function myFn() {
            alert("圖象加載完成了!");
        }
    </script>

HTML頁面按照從上往下的順序加載執行,當圖象加載成功後,就去執行onload裏的內容(一個自定義函數),但因爲script標籤在下面若干代碼以後,因此還沒被加載,所以會出錯"myFn is undefined";這就是爲何要將script標籤放在head部分的緣由,由於head在body前面,當body裏的元素加載完成時,head中的script確定加載完成了

但後來有了XHTML,有了"三層分離",W3C推出了DOM2,咱們須要使用另外一種方式綁定事件,獲取HTML頁面元素.再以上面的圖像爲例:

      <head>
         <script>
             var img = document.getElementById("myImg");//咱們經過ID來獲取它
             //document.getElementById方法有個參數,一個字符串ID
             //而後,img就表示了那個圖像標籤對象
             img.onclick = myFn;
             /*咱們不是把JavaScript代碼以字符串符值給它的onclick屬性
             而是直接賦值給它一個函數名
             你也會說,爲何不是img.onclick=myFn();
             由於如今是在JavaScript代碼區域中
             加"()"表示執行這個函數,而後將這個函數的返回值賦給了img.onclick*/
            function myFn() {
                alert("圖象加載完成了!");
            }
        </script>
    </head>
    //.......
    <img src="../images/stack_heap.jpg" id="myImg" alt="內存堆棧" />
    //咱們再也不加onclick屬性了,而是給它起了個ID

但上面的代碼執行了仍會出錯,由於HTML從上往下加載,當加載到script時,body部分在下面,尚未被加載,而JavaScript在瀏覽加載到時就會自動執行.這時,頁面上的ID爲myImg的img還沒被加載到,因此會出錯;document.getElementById方法須要一個字符串形式的ID,而若是頁面上沒有ID爲這個的元素,它則會返回null(空對象);而在下面一行,img.onclick這一句使用了一個空對象,因此會在這裏出錯!至於解決方法,其實只是將傳統的行內事件綁定的script位置反過來放.將script放在因此HTML元素後面!

    <img src="../images/stack_heap.jpg" id="myImg" alt="內存堆棧" />
    //..................若干代碼以後
    <script>
         var img = document.getElementById("myImg");
         //這個時候,因爲script標籤放置的位置處在img標籤以後,加載到script時img標籤確定加載完成了
         img.onclick = myFn;
        function myFn() {
            alert("圖象加載完成了!");
        }
    </script>

但標準仍然推薦將script放在head部分!那麼,這就要用到另外一個事件onload

    window.onload = initAll;//將全部代碼寫在一個函數之中,而後註冊到window對象的onload事件屬性上
    //window表示窗口對象,只要窗口打開,它就始終存在,當頁面加載完成後,會觸發window對象上的onload事件
    function initAll() {
        var img = document.getElementById("myImg");
         img.onclick = myFn;
        function myFn() {
            alert("圖象加載完成了!");
        }
    }

這樣,代碼就不出錯了,無論將腳本放在什麼位置,initAll只有當頁面加載完成後纔會被執行

訪問HTML頁面:HTML DOM

HTML DOM將整個頁面當成一個document對象,HTML裏的標籤都要經過document對象來訪問.而文檔中的每一個標籤,又會轉換成一個對象

<p class="demo" title="第一個段落:DOM樹" id="p1">咱們用一個p標籤來演示</p>

它又會被轉換成下面這個對象

    //總該記得對象字面量語法吧
    {
        tagName:"p",
        className:"demo",
        title:"第一個段落:DOM樹",
        id:"p1",
        innerHTML:"咱們用一個p標籤來演示"
    }
    //你也許會奇怪,爲何標籤的class屬性會變成對象的className屬性而不是class.
    //class是JavaScript保留字!!!
    //tagName表示它的標籤名,而innerHTML表示它裏面的HTML代碼

瀏覽將HTML標籤轉換成這樣的對象後,在JavaScript中訪問該標籤的屬性或裏面的內容就簡單多了,但問題是如何訪問到這個對象!!

    //首先要給該標籤加個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頁面就這麼簡單!獲取一個元素以後,不但能夠讀取它的屬性值,還能夠設置它的屬性值!

    window.onload = initAll;
    function initAll() {
        var p = document.getElementById("p1");
        p.title="JavaScript";
        p.className="load";//咱們能夠更改它的樣式
    }

利用這些,咱們已經能作出一些激動人心的事了!

    //一些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;//這裏的事件註冊方式除了比行內註冊方式少了括號,其它的是同樣的
        p.onmouseover = overFn;
        p.onmouseout = outFn;
    }
    function clickFn() {
        this.className="click";//這裏,this也是可用的
        //注意是className,而不是class
    }
    function overFn() {
        this.className="over";
    }
    function outFn() {
        this.className="out";
    }

固然,獲取頁面元素不止這一種方法.document.getElementsByTagName方法也能獲取頁面元素,顧名思意,它是經過HTML的標籤來獲取元素的,而不是ID. 由於一張HTML頁面,一個ID名稱是惟一的,而標籤名則大多數是相同的,因此,getElementsByTagName方法只有一個參數,即一個字符串形式的標籤名(tagName),而返回值則是一個相似數組的HTML元素列表

　　 window.onload = initAll;//仍然要寫在window.onload事件處理函數中
    function initAll() {
        var pList = document.getElementsByTagName("P");
        //爲何要用大寫的P?其實用小寫p也能夠,不區分大小寫,但因爲對象的tagName總報告的是大寫的,就....
        alert(pList.length);//與數組類似,length報告有多少個元素,頁面上有多少個p標籤,就報告多少
        alert(pList[0].innerHTML);//這樣來訪問第一個p元素
    }

另外,對於document.getElementsByTagName方法,還能夠傳一個"*"號做爲參數,以獲取頁面的全部元素,相似於CSS裏面的通配符

　　 window.onload = initAll;
    function initAll() {
    　　var allThings = document.body.getElementsByTagName("*");
    　　//可在任何DOM元素上調用getElementsByTagName方法,在body上調用此方法時,body外的標籤不會獲取到
    　　alert(allThings.length);//頁面上有多少個標籤,就報告多少(包含DOCTYPE)
    　　alert(allThings[3].innerHTML);//這樣來訪問第四個元素
    }

其它-javascript:僞協議

僞協議不一樣於因特網上所真實存在的如http://,https://,ftp://,而是爲關聯應用程序而使用的.如:tencent://(關聯QQ),data:(用base64編碼來在瀏覽器端輸出二進制文件),還有就是javascript:

咱們能夠在瀏覽地址欄裏輸入"javascript:alert('JS!');",點轉到後會發現,其實是把javascript:後面的代碼當JavaScript來執行,並將結果值返回給當前頁面

相似,咱們能夠在a標籤的href屬性中使用javascript僞協議

　　 <a href="javascript:alert('JS!');"></a>
    //點擊這面的連接,瀏覽器並不會跳轉到任何頁面,而是顯示一個彈窗

但javascript:僞協議有個問題,它會將執行結果返回給固然的頁面

　　 <a href="javascript:window.prompt('輸入內容將替換當前頁面!','');">A</a>

解決方法很簡單

　　 <a href="javascript:window.prompt('輸入內容將替換當前頁面!','');undefined;">A</a>
    //將undefined加到最後

儘管javascript僞協議提供了必定的靈活性,但在頁面中儘可能不要使用!而對於調試JavaScript,javascript僞協議則顯得十分有用!

1. JavaScript快速入門
2. HTML入門（三）後臺系統顯示頁面_框架標籤
3. html頁面入門
4. SSM 訪問HTML頁面
5. android訪問html頁面
6. HTML快速入門3
7. javascript快速入門26--XPath
8. JavaScript快速入門（六）——DOM
9. JavaScript簡單快速入門
10. html頁面標籤轉義解決
更多相關文章...
• SVG 在 HTML 頁面 - SVG 教程
• ASP.NET Web Forms - HTML 頁面 - ASP.NET 教程
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• YAML 入門教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。