JS快速學習之 head和body的中變量初始化問題

js script放在head跟body裏面的區別

在head中時,所代表的functions只加載而不執行,執行是在某一事件觸發後纔開始。
在body中時,直接加載並執行
典型區別:如果有不在函數中的執行語句,比如變量初始化,如果在head中就不會執行。

例如:

<html>  
    <head>  
    <title>第一個Html5視頻測試</title>  
        <script type="text/javascript">  
            var myVideo=document.getElementById("video1");  

            function playPause()  
            {   
                if (myVideo.paused)   
                  myVideo.play();   
                else   
                  myVideo.pause();   
            }   
        </script>   
    </head>  
    <body>  
        <div style="text-align:center;">  
            <button onclick="playPause()">播放/暫停</button>   
            <br/>   
            <video id="video1" src="mov_bbb.ogg" width="320" height="240" controls="controls">  
                Your browser does not support the video tag.  
            </video>  
        </div> 
    </body>  
</html>  

點擊“播放/暫停”時,playPause會被執行,但執行時myVideo對象沒有定義的,因爲定義和初始化語句被有執行過。

如果要執行,需要放在body

<html>  
    <head>  
    <title>第一個Html5視頻測試</title>  
    </head>  
    <body>  
        <div style="text-align:center;">  
            <button onclick="playPause()">播放/暫停</button>   
            <br/>   
            <video id="video1" src="mov_bbb.ogg" width="320" height="240" controls="controls">  
                Your browser does not support the video tag.  
            </video>  
        </div>  
        <script type="text/javascript">  
            var myVideo=document.getElementById("video1");  

            function playPause()  
            {   
                alert("AA");  
                if (myVideo.paused)   
                  myVideo.play();   
                else   
                  myVideo.pause();   
            }   
        </script>   
    </body>  
</html>  
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章