当前位置：首页 > news >正文

【3.1JavaScript】JavaScript引入方式

news 来源：原创 2025/5/29 12:29:32

静态页面和动态页面的区别

不是 “会动” 的页面就叫动态页面，页面加入了 JavaScript 也不一定是动态页面，静态页面和动态页面的区别在于。是否与服务器进行数据交互，简单来说就是，是否用到了后端技术（如PHP、JSP、ASP.NET）。下面列出的四种情况都不一定是动态页面：

带有音频和视频
带有Flash动画
带有CSS动画
带有JavaScript动画

1.JavaScript的引入方式

外部 JavaScript
内部 JavaScript
元素事件 JavaScript

1.1外部JavaScript

外部 JavaScript 是最理想的 JavaScript 引入方式

<!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中引入 -->
    <script src="index.js"></script>
</head>
<body>
    <!-- 在body中引入 -->
    <script src="index.js"></script>
</body>
</html>

注：对于 CSS 来说，外部 CSS 文件只能在 head 中引入。不过对于 JavaScript 来说，外部 JavaScript 文件不仅可以在 head 中引入，还可以在 body 中引入。

此外还有一点需要注意，引入外部 CSS 文件使用的是 link 标签，而引入外部 JavaScript 文件使用的是 script 标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 引入外部CSS -->
    <link rel="stylesheet" href="index.css">
    <!-- 引入外部 JavaScript -->
    <script src="index.js"></script>
</head>
<body>
</body>
</html>

rel="stylesheet"：指定该文件是一个样式表。

在 HTML 中，使用相对路径时，一般情况下不需要加 ./ 前缀，除非你希望显式地表示当前目录。

1.2内部JavaScript

<!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中引入 -->
    <script>
        // 内部JavaScript
        alert("head内部JavaScript");
    </script>
</head>
<body>
    <!-- 在body中引入 -->
    <script>
        // 内部JavaScript
        alert("body内部JavaScript");
    </script>
</body>
</html>

实际上 <script></script> 是一种简写形式，它其实等价于：

<script type="text/javascript">

</script>

例子：

<!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>
    <script type="text/javascript">
        document.write("Hello World!");
    </script>
</body>
</html>

在这里插入图片描述

document.write()表示在页面中输出一个内容。

1.3元素属性JavaScript

指的是在元素的 “事件属性” 中直接编写 JavaScript 或函数调用

直接编写：

<!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>
    <input type="button" value="按我" onclick="alert('Hello!')">
</body>
</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>
        function myalert(){
            alert("Hello");
        }
    </script>
</head>
<body>
    <input type="button" value="按我" onclick="myalert()">
</body>
</html>

本章使用到的方法

document.wirte() 在页面输出内容
alert() 弹出对话框

一个简单的 JavaScript 程序

<!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>
        window.onload = function(){
            alert("欢迎光临");
        }
        window.onbeforeunload = function(){
            var e = event || window.event;
            e.returnValue = "确定离开当前页面吗？";
        }
    </script>
</head>
<body>
</body>
</html>