• 在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,然后在运行代码。

  • 相关阅读:
    技术学习之分析思想
    测试类的必要性
    Webstorm配置运行React Native
    React Native
    npm太慢, 淘宝npm镜像使用方法
    数据库设计那些事儿
    Linux 安装nodejs
    Java
    解决 vmware workstations 14 开启虚拟机黑屏
    编程与盖楼的思考
  • 原文地址:https://www.cnblogs.com/yiluhuakai/p/10373762.html
Copyright © 2020-2023  润新知