深入浅出JavaScript （二）代码放置位置与执行顺序

昵称10504424 2013-02-20

展开全文

JavaScript与JScript关系
1. 这样追溯的以前,javaScript和Jscript分别是netscape公司和microsoft公司为自己的浏览器而设计开发的脚本语言，在这两种脚本语言没有统一标准以前，很多的Web程序员不得不为不同的浏览器而设计不同的脚本语言运行，很是苦恼，为了解决脚本同一问题，于是诞生了ECMAScript,是一种国际标准化的javascript版本。现在的主流浏览器都支持这种版本。现在javaScript这个词也是代表这两种标准的意思，于是用了这个词语。
JavaScript开发环境与编辑工具
1. 它的运行环境很简单，只需要拥有浏览器既可以运行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区域的JavaScript代码是为了保证运行程序代码调用前相关函数程序代码已经加载，因为代码执行是从上到下依次执行，通常这个区域代码为了Body区域程序代码所调用的事件或处理函数，如下代码执行结果：

<SPAN style="FONT-SIZE: 18px"><title>第一份JavaScript程序</title>
<script language="javascript">
//批注文字隐藏
<!--
function showmessage()
{
alert("Head区域的JavaScript程序代码");
}
-->
</script>
</head>
<body onload="JavaScript:showmessage();">
<h2>Head区域的JavaScript程序代码</h2>
<hr>
在Head区域运行事件处理程序
</body></SPAN>

<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代码

[javascript] view plain copy print ?

    <!--先加载-->
    <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区域内的程序代码会马上运行，这些程序代码输出的内容属于网页的一部分，看下面代码

[javascript] view plain copy print ?

	<body >
		<h2>Body区域的JavaScript程序代码</h2>
		<hr>
		<script language="javascript">
		//批注文字隐藏
		<!--
				alert("Body区域的JavaScript程序代码");
		-->
		</script>
		 在Body区域运行事件处理程序
	</body>

执行结果为：