JS引入方式、书写位置

最新推荐文章于 2025-03-02 18:31:37 发布

原创最新推荐文章于 2025-03-02 18:31:37 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

35 篇文章

订阅专栏

js引入方式

一、书写位置（大致有3个地方）：

head头部中；
body的不论什么位置；
以事件的形式写在标签上。
e.g.

 <p onclick="alert('叫你点，你就点啊')">点我</p>
 <p onclick="javascript:alert('javascript前缀，效果同上')">点我</p>

二、引入方式

注：采用不同引入方式引入的JS代码最终还是在一起执行的，互相有联系。遵循从左往右，从上往下执行顺序依次执行。

1. 嵌入方式：

写在页面内部，理论上是可以写在页面任何位置。一般写在head中，body后

<body>
    <script type="text/javascript">
        <!--js代码-->
        alert('欢迎');
    </script>
</body>

2. 引入方式：

很多html页面都可以调用设定的js页面

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--引入js-->
    <script src="js/demo.js"></script>
</head>
<body>
    <!--引入js-->
    <script src="js/demo.js"></script>
</body>

注：引入的script标签是不能在插入其他内容的

3. 在事件后面调用

 <p onclick="alert('叫你点，你就点啊')">点我</p>
 <p onclick="javascript:alert('javascript前缀，效果同上')">点我</p>
 <!--onclick:点击触发一个事件，alert：弹出一个提示框-->

效果图：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AIU哎呀

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JavaScript 三种书写位置——行内、内嵌和外部。

weixin_46558137的博客

03-30

2688

1、外部式js <script src="new.js" ><!-- 中间不可以写代码 --!></script> 2、内嵌式js <script type="text/ javascript"> alert( '如果我是DJ，你还爱我吗? ') </script> 3、 <body> //行内式的js直接写到元素...

JS新手入门笔记整理：JS引入方式

太空背包客的博客

01-03

771

JS引入方式

参与评论您还未登录，请先登录后发表或查看评论

Java Web 7 JavaScript 7.1 JavaScript 简介 && 7.2 JavaScript引入方式

代码改变世界

09-29

1034

Java Web 7 JavaScript 7.1 JavaScript 简介 && 7.2 JavaScript引入方式

JavaScript的书写位置

高先生的猫

12-11

577

js有3种书写位置，分别为行内、内嵌和外部。行内式 <input type="button" value="点我试试" onclick="alert('Hello World')" /> 可以将单行或少量js代码写在html标签的事件属性中（以 on 开头的属性），如：onclick 注意单双引号的使用：在html中我们推荐使用双引号, JS 中我们推荐使用单引号可读性差，在html中编写JS大量代码时，不方便阅读；引号易错，引号多层嵌套匹配时，非常容易弄...

js的引入方式

2301_79555864的博客

02-29

1096

【代码】js的引入方式。

jsp引入css及js的统一书写规范，走的是servlet入口

06-19

写在jsp页面上，但加载时一股脑全加载进来，后来改写成用关键字来引入对应的样式及脚本，但又后来觉得可能引入的便签上有特殊属性，再次扩展，最终演变成这样的书写格式，这样统一管理了css及js，对于那些脚本插件不...

JavaScript三种引入方式示例代码详解

快速版-JS基础01书写位置

lan_da_wang的博客

05-27

1045

var：声明变量。打印结果：console.log(变量名)第一个是你写在里面的。第二个是实际运行的先后之分，变量名字在最前面。变量提升。最后打印出来的结果//和/* */alert：输出弹出框。 alert("我是懒羊羊") document.write("我是输出到页面") console.log:输出在控制台。null、字符串、undefined、数值、boolean、对象所有被双引号或者单引号包裹的都是字符串。注

浅析四种常见的Javascript声明循环变量的书写方式

10-23

在JavaScript中，循环变量的声明和书写方式对于程序的逻辑正确性和代码的可维护性具有重要影响。以下详细解析了四种常见的循环变量声明方法，包括它们的特性、适用场景以及潜在问题。 1. 不声明直接使用循环变量这...

JavaScript三种引入方式及最佳实践

本文围绕“JS三种引入方式”这一主题，深入剖析了行内式、嵌入式和外链式这三种常见的JavaScript引入方法，并结合实际应用场景分析各自的优缺点，尤其强调了现代Web开发中推荐使用的最佳实践——外链式引入。...

JavaScript(JS引入方式，JS基础语法，JS函数，JS对象，JS事件监听)

Cupid_kl的博客

10-07

1557

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，它能使网页可交互。

Js引入js三种方法

qq_52700250的博客

05-09

6160

【代码】Js引入js三种方法

JS引入方式及性能

ALSNEI的博客

01-11

2125

JS引入方式1.在页面中直接写入<script type="text/javascript">js代码</script>2.在页面中引入外部文件<script src="xx.js"></script>3.在js中引入外部js，通过document.wirite("scr"+"ipt src='xx.js'></scr"+"ipt">4.在js中引用其他js片段，document.write("<s

JS引入方式有哪些？

m0_64986878的博客

06-21

2470

JS引入方式有哪些，ES6中JS引入方式，常用的JS引入方式，JS引入

JavaScript 书写位置

a804847944的博客

08-04

298

　　类似于 CSS 样式，JavaScript 也有三种不同位置的书写方式。　　1、写在行内 <input type="button" value="按钮" onclick="alert('Hello World')" /> 　　2、写在 script 标签中 <head> <script> alert('Hel...

JavaScript书写位置

m0_54349455的博客

07-05

1523

在浏览器打开直接显示弹出框，如下图所示。书写在href属性上，如下图所示。书写在行为属性上，如下图所示。在浏览器打开点击如下图所示。在浏览器打开点击如下图所示。引入js文件，如下图所示。在浏览器打开直接显示。

Javascript的书写位置

weixin_30765505的博客

05-29

358

1、在html页面中<body>元素末尾位置；代码示例如下：以上示例代码中， 1- type="text/javascript"表明放在之间的是文本类型(text)，javascript是告诉浏览器里面的text是个javascript脚本。 h5 以后，type属性是可以省略的，因为默认脚本语言就是javascript，所以省略也不会出错。 2- al...

JavaScript 代码的书写位置

m0_62599305的博客

03-02

847

JavaScript 的书写位置不仅仅是一个语法问题，它直接影响到代码的执行顺序、页面加载速度、用户体验等方面。<head>中的 JavaScript 适合那些需要在页面加载前就执行的脚本。<body>底部的 JavaScript 适合那些依赖于页面 DOM 元素的脚本，避免页面渲染被阻塞。外部文件可以让代码更具可维护性和复用性。async和defer帮助我们控制脚本的加载顺序。事件驱动的代码要确保 DOM 元素加载完成，常用和。

JavaScript之引入方式

JesyWu的博客

11-06

611

JavaScript文件的引入方式与CSS引入方式类似，主要也是分为三种：标签内联、内部写入、外部引入......

js的书写位置

最新发布

07-30

JavaScript 代码在 HTML 中的书写位置对页面的加载性能和脚本执行的正确性有重要影响。为了确保脚本能够顺利访问页面元素并提升用户体验，需要根据脚本的功能和需求选择合适的位置。 ### 将 `<script>` 放在 `<body>` 底部附近通常，将 `<script>` 标签放在 `<body>` 标签的底部附近是最常见的做法。这样可以确保在脚本执行时，相关的 HTML 元素已经加载完成，从而避免脚本因无法找到目标元素而失效的问题。例如： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Hello, World!</h1> <script src="script.js"></script> </body> </html> ``` 这种做法特别适用于那些需要操作 DOM 元素的脚本，因为浏览器是按照代码在文件中的顺序加载 HTML 内容的，如果脚本在 DOM 元素之前加载并尝试访问这些元素，可能会导致脚本无法正常运行[^3]。 ### 使用 `DOMContentLoaded` 事件如果希望将 `<script>` 放在 `<head>` 中，可以使用 `DOMContentLoaded` 事件来确保脚本在页面完全加载后再执行。例如： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> document.addEventListener("DOMContentLoaded", function() { // 在这里编写需要操作 DOM 的代码 console.log("DOM fully loaded and parsed"); }); </script> </head> <body> <h1>Hello, World!</h1> </body> </html> ``` 通过这种方式，即使脚本位于 `<head>` 中，也可以安全地访问页面上的 DOM 元素[^5]。 ### 使用 `async` 和 `defer` 属性对于外部脚本（即通过 `src` 属性引入的脚本），可以通过 `async` 和 `defer` 属性来优化加载行为： - `async`：脚本将异步加载，加载过程中不会阻塞 HTML 解析，脚本一旦加载完成就会立即执行。适用于不依赖页面内容且执行顺序无关紧要的脚本。 - `defer`：脚本将异步加载，但会在 HTML 文档解析完成后、`DOMContentLoaded` 事件触发前按顺序执行。适用于需要等待 HTML 解析完成后再执行的脚本。 ```html <script src="script.js" async></script> <script src="script.js" defer></script> ``` 这两种属性可以显著提升页面的加载速度，尤其是对于较大的脚本文件。 ### 总结 - 如果脚本需要操作 DOM 元素，建议将其放在 `<body>` 的底部附近。 - 如果需要将脚本放在 `<head>` 中，可以使用 `DOMContentLoaded` 事件确保页面加载完成后再执行脚本。 - 对于外部脚本，推荐使用 `async` 或 `defer` 属性以优化加载性能。通过合理选择 JavaScript 的书写位置，可以有效提升网页的加载速度和脚本的执行效率。