【深入浅出】JavaScript (二) 代码放置位置与执行顺序

  1.  JavaScript与JScript关系
    1. 这样追溯的以前,javaScript和Jscript分别是netscape公司和microsoft公司为自己的浏览器而设计开发的脚本语言,在这两种脚本语言没有统一标准以前,很多的Web程序员不得不为不同的浏览器而设计不同的脚本语言运行,很是苦恼,为了解决脚本同一问题,于是诞生了ECMAScript,是一种国际标准化的javascript版本。现在的主流浏览器都支持这种版本。现在javaScript这个词也是代表这两种标准的意思,于是用了这个词语。
  2.  JavaScript开发环境与编辑工具
    1. 它的运行环境很简单,只需要拥有浏览器既可以运行javaScript代码
    2. 编辑工作也有很多种,比如常见的PSPad、DreamWave、VS、记事本等等
  3. 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.         <!--  
      9.             document.write("第一个JavaScriptc程序<br>");  
      10.         -->  
      11.         </script>  
      12.     </body>  
      13. </html></span>  
              上面的<!-- …… -->是为了解决浏览器不兼容的问题,如果旧版浏览器不兼容JavaScript代码,将隐藏JavaScript代码,否则会把它视为HTML代码一部分显示在浏览器中,称为无用信息。
  4. JavaScript程序代码的位置   

             4.1  Head区域的JavaScript代码

              在Head区域的JavaScript代码是为了保证运行程序代码调用前相关函数程序代码已经加载,因为代码执行是从上到下依次执行,通常这个区域代码为了Body区域程序代码所调用的事件或处理函数,如下代码执行结果:

  1. <span style="font-size:18px;"><title>第一份JavaScript程序</title>  
  2.         <script language="javascript">  
  3.         //批注文字隐藏  
  4.         <!--  
  5.             function showmessage()  
  6.             {   
  7.                 alert("Head区域的JavaScript程序代码");  
  8.             }  
  9.         -->  
  10.         </script>  
  11. </head>  
  12.     <body onload="JavaScript:showmessage();">  
  13.         <h2>Head区域的JavaScript程序代码</h2>  
  14.         <hr>  
  15.          在Head区域运行事件处理程序  
  16.     </body></span>  

         执行结果为:


           当弹出框弹出来时,Body部分内容已经显示出来,即这部分代码已经加载完,Body部分代码是在Head区域之前加载。

           4.2  Head区域的JavaScript代码

[javascript] view plain copy print ?
  1. <span style="font-size:18px;">    <!--先加载-->  
  2.     <link href="css/admin.global.css" rel="stylesheet" type="text/css" />  
  3.     <link href="css/admin.index.css" rel="stylesheet" type="text/css" />  
  4.     <!--后加载-->  
  5.     <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>  
  6.     <script src="js/jquery.utils.js" type="text/javascript"></script>  
  7.     <link href="jBox/Skins/Green/jbox.css" rel="stylesheet" type="text/css" /></span>  


                上面链接CSS文件或是JS文件是按着从上到下顺序加载的,如果某个文件需要用到另一个文件,那么就需要放在该文件之前在家,否则则会出错,这也是我们经常遇到的问题,希望大家多多注意.

       5   Body区域的JavaScript代码

            在加载网页时,Body区域内的程序代码会马上运行,这些程序代码输出的内容属于网页的一部分,看下面代码

[javascript] view plain copy print ?
  1. <span style="font-size:18px;">  <body >  
  2.         <h2>Body区域的JavaScript程序代码</h2>  
  3.         <hr>  
  4.         <script language="javascript">  
  5.         //批注文字隐藏  
  6.         <!--  
  7.                 alert("Body区域的JavaScript程序代码");  
  8.         -->  
  9.         </script>  
  10.          在Body区域运行事件处理程序  
  11.     </body></span>  

        执行结果为:

 

           此次执行结果中,Body在<JavaScript>后面的代码没有执行,说明在Body里的代码用网页加载时马上执行,而不是调用时再执行,因此需要调用或处理事件的函数或代码应当放入Head区域里面。

          另外,如果把调用代码卸载Body里面,因为我们所做的操作都是属于网页一部分,也需要写在网页内部。

      6   写作风格

             JavaScript写作风格在上一篇博客已经说明,这里需要注意下载 { } 大括号后面没有“ ;”号。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值