js中书写位置有哪些

发布时间：2023-05-15 18:29:47

JavaScript是一种脚本语言，通过在HTML文件中嵌入代码的方式来实现它的效果。在JavaScript中，代码的书写位置有以下几种：

1. 内部JS

内部JS指将JS代码放在HTML文件的

标签之间，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>内部JS</title>
        <script>
            function sayHello() {
                alert("Hello World!");
            }
        </script>
    </head>
    <body>
        <button onclick="sayHello()">点击我</button>
    </body>
</html>

上述代码展示了内部JS的一个例子，这里我们定义了一个函数sayHello()，并将其放入HTML文档的头部中。在按钮的onclick事件中，我们调用了该函数。

2. 外部JS

外部JS指将JS代码放在独立的.js文件中，然后在HTML文件中通过

标签引用，如下所示：

// 代码保存在test.js文件中
function sayHello() {
    alert("Hello World!");
}

<!DOCTYPE html>
<html>
    <head>
        <title>外部JS</title>
        <script src="test.js"></script>
    </head>
    <body>
        <button onclick="sayHello()">点击我</button>
    </body>
</html>

这里我们将JS代码保存在了test.js文件中，并在HTML文件的头部中通过

标签引入了该文件。在按钮的onclick事件中，我们调用了test.js文件中的函数。

3. 行内JS

行内JS指将JS代码直接放在HTML元素的属性中，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>行内JS</title>
    </head>
    <body>
        <button onclick="alert('Hello World!')">点击我</button>
    </body>
</html>

这里我们在按钮的onclick事件中直接写入了alert函数，弹出一个“Hello World!”的提示框。虽然行内JS十分方便，但它会增加HTML文件的体积，降低页面的加载速度，因此在实际开发中不太推荐使用。

4. 头部JS

头部JS指将JS代码放在HTML文件的头部中，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>头部JS</title>
        <script>
            window.onload = function() {
                alert("Hello World!");
            }
        </script>
    </head>
    <body>
        <p>页面正文</p>
    </body>
</html>

在上述代码中，我们使用了window.onload事件，当HTML页面加载完毕后，会弹出一个“Hello World!”的提示框。

综上所述，JavaScript的代码书写位置主要有内部JS、外部JS、行内JS和头部JS。根据实际需求，我们可以选择合适的位置来书写我们的JS代码。