1. 程式人生 > >深入淺出JavaScript (二) 程式碼放置位置與執行順序

深入淺出JavaScript (二) 程式碼放置位置與執行順序

  1.  JavaScript與JScript關係
    1. 這樣追溯的以前,javaScript和Jscript分別是netscape公司和microsoft公司為自己的瀏覽器而設計開發的指令碼語言,在這兩種指令碼語言沒有統一標準以前,很多的Web程式設計師不得不為不同的瀏覽器而設計不同的指令碼語言執行,很是苦惱,為了解決指令碼同一問題,於是誕生了ECMAScript,是一種國際標準化的javascript版本。現在的主流瀏覽器都支援這種版本。現在javaScript這個詞也是代表這兩種標準的意思,於是用了這個詞語。
  2.  JavaScript開發環境與編輯工具
    1. 它的執行環境很簡單,只需要擁有瀏覽器既可以執行javaScript程式碼
    2. 編輯工作也有很多種,比如常見的PSPad、DreamWave、VS、記事本等等
  3. JavaScript基本架構
    1. <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      <title>第一份JavaScript程式</title>
      </head>
      	<body>
      		<script language="javascript">
      		//批註文字隱藏
      		<!--
      			document.write("第一個JavaScriptc程式<br>");
      		-->
      		</script>
      	</body>
      </html>
              上面的<!-- …… -->是為了解決瀏覽器不相容的問題,如果舊版瀏覽器不相容JavaScript程式碼,將隱藏JavaScript程式碼,否則會把它視為HTML程式碼一部分顯示在瀏覽器中,稱為無用資訊。
  4. JavaScript程式程式碼的位置   

             4.1  Head區域的JavaScript程式碼

              在Head區域的JavaScript程式碼是為了保證執行程式程式碼呼叫前相關函式程式程式碼已經載入,因為程式碼執行是從上到下依次執行,通常這個區域程式碼為了Body區域程式程式碼所呼叫的事件或處理函式,如下程式碼執行結果:

<title>第一份JavaScript程式</title>
		<script language="javascript">
		//批註文字隱藏
		<!--
			function showmessage()
			{ 
				alert("Head區域的JavaScript程式程式碼");
			}
		-->
		</script>
</head>
	<body onload="JavaScript:showmessage();">
		<h2>Head區域的JavaScript程式程式碼</h2>
		<hr>
		 在Head區域執行事件處理程式
	</body>

         執行結果為:


           當彈出框彈出來時,Body部分內容已經顯示出來,即這部分程式碼已經載入完,Body部分程式碼是在Head區域之前載入。

           4.2  Head區域的JavaScript程式碼

    <!--先載入-->
    <link href="css/admin.global.css" rel="stylesheet" type="text/css" />
    <link href="css/admin.index.css" rel="stylesheet" type="text/css" />
    <!--後加載-->
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.utils.js" type="text/javascript"></script>
    <link href="jBox/Skins/Green/jbox.css" rel="stylesheet" type="text/css" />


                上面連結CSS檔案或是JS檔案是按著從上到下順序載入的,如果某個檔案需要用到另一個檔案,那麼就需要放在該檔案之前在家,否則則會出錯,這也是我們經常遇到的問題,希望大家多多注意.

       5   Body區域的JavaScript程式碼

            在載入網頁時,Body區域內的程式程式碼會馬上執行,這些程式程式碼輸出的內容屬於網頁的一部分,看下面程式碼

	<body >
		<h2>Body區域的JavaScript程式程式碼</h2>
		<hr>
		<script language="javascript">
		//批註文字隱藏
		<!--
				alert("Body區域的JavaScript程式程式碼");
		-->
		</script>
		 在Body區域執行事件處理程式
	</body>

        執行結果為:

 

           此次執行結果中,Body在<JavaScript>後面的程式碼沒有執行,說明在Body裡的程式碼用網頁載入時馬上執行,而不是呼叫時再執行,因此需要呼叫或處理事件的函式或程式碼應當放入Head區域裡面。

          另外,如果把呼叫程式碼解除安裝Body裡面,因為我們所做的操作都是屬於網頁一部分,也需要寫在網頁內部。

      6   寫作風格

             JavaScript寫作風格在上一篇部落格已經說明,這裡需要注意下載 { } 大括號後面沒有“ ;”號。