• 在HTML中使用JavaScript


    一、HTML中使用JavaScript的两种方式

      1、在<script></script>中包含JavaScript代码。

      2、使用<script>标签的src属性引入外部javaScript文件,JavaScript文件可以来自外域也可以是同域。如果script标签包含src属性,那么script标签中的内容会被忽律。

    二、html文档中JavaScript执行顺序。

      html文档中JavaScript执行顺序是按照他们在文档中的顺序执行的。

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <script>
     7         console.log("aaa");
     8     </script>
     9     <script>
    10         console.log("hello world");
    11     </script>
    12 </head>
    13 <body>
    14 
    15 </body>
    16 </html>

      控制台中会先输出aaa,在输出hello world.

      html文档中script标签的位置可以在head标签中,也可以在body标签中。当script标签在head中时,会先执行JavaScript代码,再加载文档的内容,如果script标签在body标签中,会先加载文档内容,再执行JavaScript代码。

    三、script标签的defer和aynsc属性

      script标签的defer和aynsc属性只对外部脚本有效。

      <script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。脚本会被延迟到整个页面都解析完毕后再运行。

     1 <!DOCTYPE html>
     2 <html>   
     3 <head>     
     4     <title>Example HTML Page</title>     
     5     <script type="text/javascript" defer="defer" src="example1.js"></script>
     6         
     7     <script type="text/javascript" defer="defer" src="example2.js"></script>
     8       
     9 </head>
    10 <body>   
    11 <!-- 这里放内容 -->   </body>
    12 </html>

      我们把<script>元素放在了文档的<head>元素中,但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。HTML5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于DOMContentLoaded事件执行。

      <script>标签定义了aysnc属性。脚本执行和文档内容渲染之间异步(同时)执行,所以不要在脚本中修改dom。脚本会在Load时间之前执行,在DOMContentLoaded之前或者之后执行。脚本之间的顺序不可保证,所以脚本之间不要有依赖关系.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="example1.js" async="async"></script>
        <script src="example2.js" async="async"></script>
    </head>
    <body>
    
    </body>
    </html>

    三、使用外部脚本的好处

      1.代码可维护性好。html和JavaScript代码分离,内容清晰,如果需要修改JavaScript,只需要在单独的文件中修改即可。

      2.浏览器缓存,同一个页面多次加载时,外部的JavaScript文件会在浏览器缓存。

    四、noscript标签

      该标签可以出现在body标签中的任何位置,包含在<noscript>元素中的内容只有在下列情况下才会显示出来:

      1.浏览器不支持脚本;

      2.浏览器支持脚本,但脚本被禁用。  

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <script src="example1.js" async="async"></script>
     7     <script src="example2.html" async="async"></script>
     8 </head>
     9 <body>
    10     <noscript>
    11         <p>当前浏览不支持或者禁用了javascript</p>
    12     </noscript>
    13 </body>
    14 </html>

      需要在浏览器中禁用JavaScript,然后在运行代码。

  • 相关阅读:
    Expression Bland 入门视频(五) 了解对象面板和属性面板
    Windows Phone 一步一步从入门到精通
    “北京今年入冬的第一场雪”,纪念博客园写日志一年了
    2010年即将到来,用我的名字注册了的新域名 TerryFeng.com
    我要在黑龙江的老家,组织一个微软.Net俱乐部
    Windows 7 小工具 问题步骤记录器
    给弟弟起步学习软件开发(.Net 方向)的指导,博友们帮助看看,提些意见给他。
    今天是中国传统节日“重阳节”。也是爷爷的生日,今年80岁高龄。
    Windows 7 远程服务器管理工具 简体中文 下载
    新的技术和概念应该尽可能先去接受,而不是排斥。
  • 原文地址:https://www.cnblogs.com/yiluhuakai/p/10373762.html
Copyright © 2020-2023  润新知