使用JavaScript的三种方式

1.内联(Inline)方式

内联(Inline)方式,又称为行内方式。往往用于单个元素。

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <p id="demo">This is a paragraph</p>
    <button type="button" onclick="document.getElementById('demo').innerHTML = 'Paragraph changed'">Try it</button>
  </body>
</html>

2.内部(Internal)方式

往往用于单个网页。

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <p id="demo">This is a paragraph</p>
    <button type="button" onclick="myFunction()">Try it</button>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "Paragraph changed";
      }
    </script>
  </body>
</html>

3.外部(External)方式

往往用于所有网页。

//目录结构
demo/
  index.html
  myscript.js
//index.html
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <p id="demo">This is a paragraph</p>
    <button type="button" onclick="myFunction()">Try it</button>
    <script src="myscript.js"></script>
  </body>
</html>
//myscript.js(注意:不能包含<script>元素)
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed";
}

4.优先级

比如上面的示例中 myFunction() 事件处理程序函数,当同时存在多种使用 JavaScript 的方式中存在相同的函数名时,则优先级如下:

内联方式优先级最高。

其次,内部方式和外部方式的优先级取决于它们放置在 <head> 元素或者 <body> 元素中的前后顺序,后面的永远覆盖前面的。情形如下:

  • 后面的内部方式优先级 > 前面的内部方式。
  • 后面的内部方式优先级 > 前面的外部方式。
  • 后面的外部方式优先级 > 前面的外部方式。
  • 后面的外部方式优先级 > 前面的内部方式。

5.<script>元素位置

注意:<script> 元素只支持内部方式或外部方式。

过去,所有 <script> 元素都被放在 <head> 元素内,如下所示:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 这里是外部CSS -->
    <script src="myScript1.js"></script>
    <script src="myScript2.js"></script>
  </head>
  <body>
    <!-- 这里是页面内容 -->
  </body>
</html>

这样做的好处是把外部的 CSS 和 JavaScript 文件都集中放在一起,缺点就是,必须把所有的 </head> 标签之前的 JavaScript 文件都下载、解析和解释执行完成后,才能开始渲染 <body> 标签后的页面内容。对于需要很多 JavaScript 的页面,这会导致页面渲染明显延迟,在此期间浏览器窗口完全空白。为了解决此问题,可将所有或者部分 <script> 元素放在结束标签 </body> 的紧挨着前面,如下所示:

<!DOCTYPE html>
<html>
  <head>
    <!-- 这里是外部CSS -->
  </head>
  <body>
    <!-- 这里是页面内容 -->
    <script src="myScript1.js"></script>
    <script src="myScript2.js"></script>
  </body>
</html>

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/experience/javascriptexp/31817.html

(0)
huoxiaoqiang的头像huoxiaoqiang
上一篇 2023年10月10日
下一篇 2023年10月11日

相关推荐

  • nodejs -v与node -v的区别

    笔者在使用 Node.js 的时候发现有 nodejs -v 和 node -v 两个命令,经过一番测试后,总结如下: 如果从 Ubuntu 操作系统官方源里面安装的 Node.js,命令用 nodejs -v,例如: 如果从 Ubuntu 操作系统以外的第三方源(包括snap) 或者 通过 n、node-build、…

    JavaScript经验 2020年9月12日
    03.9K0
  • 开启JavaScript语言的严格模式

    要对一个脚本文件内的所有内容开启严格模式,只需要在脚本文件内的顶部添加 “use strict” 或 ‘use strict’ 即可。 要单独对一个函数体内的所有内容开启严格模式,只需要在函数体内的顶部添加 “use strict” 或 ‘use strict’ 即可。 注意:JavaScript 模块内的所有内容自动…

    JavaScript经验 2023年12月12日
    02850
  • type=”module”、defer、async属性的区别

    当 <script> 标签无 type=”module” 属性时,defer 和 async 属性都只可以被用在 <script> 元素的外部方式,如果被用在 <script> 元素的内部方式,则会被忽略。 当 <script> 标签有 type=”module” 属性时…

    JavaScript经验 2024年1月25日
    03200

发表回复

登录后才能评论