向一个页面引入 JavaScript 代码一般有三种方式:

  • 内联 JavaScript
  • 内部 JavaScript
  • 外部 JavaScript

内联 JavaScript

内联的 JavaScript 一般会放在元素的各个事件中,比如以下就是放在 button 的 onclick(点击事件)中。

$$edit$$
<button onclick="alert('你好~')">say hello</button>

$$demo

<button onclick="alert('你好~')">say hello</button>

$$

内部 JavaScript

内部 JavaScript 则是将 JavaScript 代码写在 script 元素中,多数情况下再放置到 head 元素中。

$$edit$$
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>内部 JavaScript</title>
        <script>
            function sayHello() {
                alert("你好~")
            }
        </script>
    </head>
    <body>
        <button onclick="sayHello()">say hello</button>
    </body>
</html>

$$demo

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>内部 JavaScript</title>

<script>

function sayHello() {

alert("你好~")

}

</script>

</head>

<body>

<button onclick="sayHello()">say hello</button>

</body>

</html>

$$

外部 JavaScript

外部 JavaScript 代码通过 script 元素引入 , src="script.js" 表示引入的路径。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>外部 JavaScript</title>
        <script src="script.js"></script>
    </head>
    <body>
        <button onclick="sayHello()">say hello</button>
    </body>
</html>
function sayHello() {
    alert("你好~")
}