深入淺出JavaScript （二）代碼放置位置與執(zhí)行順序

昵稱10504424 2013-02-20

展開全文

JavaScript與JScript關系
1. 這樣追溯的以前,javaScript和Jscript分別是netscape公司和microsoft公司為自己的瀏覽器而設計開發(fā)的腳本語言，在這兩種腳本語言沒有統(tǒng)一標準以前，很多的Web程序員不得不為不同的瀏覽器而設計不同的腳本語言運行，很是苦惱，為了解決腳本同一問題，于是誕生了ECMAScript,是一種國際標準化的javascript版本?，F(xiàn)在的主流瀏覽器都支持這種版本。現(xiàn)在javaScript這個詞也是代表這兩種標準的意思，于是用了這個詞語。
JavaScript開發(fā)環(huán)境與編輯工具
1. 它的運行環(huán)境很簡單，只需要擁有瀏覽器既可以運行javaScript代碼
2. 編輯工作也有很多種，比如常見的PSPad、DreamWave、VS、記事本等等
JavaScript基本架構
1. [javascript] view plain copy print ?
  1. <SPAN style="FONT-SIZE: 18px"><head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  3. <title>第一份JavaScript程序</title>
  4. </head>
  5. <body>
  6. <script language="javascript">
  7. //批注文字隱藏
  8. 
  11. </script>
  12. </body>
  13. </html></SPAN>
```
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>第一份JavaScript程序</title>
</head>
	<body>
		<script language="javascript">
		//批注文字隱藏
		
		</script>
	</body>
</html>
```
  上面的是為了解決瀏覽器不兼容的問題，如果舊版瀏覽器不兼容JavaScript代碼，將隱藏JavaScript代碼，否則會把它視為HTML代碼一部分顯示在瀏覽器中，稱為無用信息。
JavaScript程序代碼的位置

在Head區(qū)域的JavaScript代碼是為了保證運行程序代碼調用前相關函數(shù)程序代碼已經加載，因為代碼執(zhí)行是從上到下依次執(zhí)行，通常這個區(qū)域代碼為了Body區(qū)域程序代碼所調用的事件或處理函數(shù)，如下代碼執(zhí)行結果：

[html] view plain copy print ?

<SPAN style="FONT-SIZE: 18px"><title>第一份JavaScript程序</title>
<script language="javascript">
//批注文字隱藏
<!--
function showmessage()
{
}
-->
</script>
</head>
<body onload="JavaScript:showmessage();">
<h2>Head區(qū)域的JavaScript程序代碼</h2>
<hr>
在Head區(qū)域運行事件處理程序
</body></SPAN>

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

執(zhí)行結果為：

當彈出框彈出來時，Body部分內容已經顯示出來，即這部分代碼已經加載完，Body部分代碼是在Head區(qū)域之前加載。

4.2 Head區(qū)域的JavaScript代碼

[javascript] view plain copy print ?

<SPAN style="FONT-SIZE: 18px">
<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" /></SPAN>

    <!--先加載-->
    <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區(qū)域的JavaScript代碼

在加載網頁時，Body區(qū)域內的程序代碼會馬上運行，這些程序代碼輸出的內容屬于網頁的一部分，看下面代碼

[javascript] view plain copy print ?

<SPAN style="FONT-SIZE: 18px"> <body >
<h2>Body區(qū)域的JavaScript程序代碼</h2>
<hr>
<script language="javascript">
//批注文字隱藏
<!--
alert("Body區(qū)域的JavaScript程序代碼");
-->
</script>
在Body區(qū)域運行事件處理程序
</body></SPAN>

	<body >
		<h2>Body區(qū)域的JavaScript程序代碼</h2>
		<hr>
		<script language="javascript">
		//批注文字隱藏
		<!--
				alert("Body區(qū)域的JavaScript程序代碼");
		-->
		</script>
		 在Body區(qū)域運行事件處理程序
	</body>

執(zhí)行結果為：