HTML与JavaScript结合使用的两种方式

最新推荐文章于 2024-06-10 20:53:57 发布

亿点足迹

最新推荐文章于 2024-06-10 20:53:57 发布

阅读量4.1k

点赞数 6

分类专栏： HTML+JavaScript 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_72237413/article/details/125453155

版权

HTML+JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、在HTML代码中的 head 或 body 标签中使用 script 标签来书写JavaScript代码

样式：

<script type="text/javascript">

.............. //JavaScript代码块

</script>

注意：

可以有多个script标签
整体代码按由上至下的顺序执行

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方式一</title>
    <script type="text/javascript">
        // alert()是JavaScript语言提供的一个警告框函数。
        //它可以接收任意类型的参数，并且作为警告框的提示信息
        alert("hello JavaScript 第一次")
    </script>
</head>
<body>
<script type="text/javascript">
    alert("hello JavaScript 第二次")
</script>
</body>
</html>

二、使用script标签引入单独的JavaScript代码文件

样式：

<script type="text/javascript" src="JavaScript文件路径（绝对或相对路径）"></script>

注意：

src的值是需要引入JavaScript文件的绝对路径或相对路径
当使用了script引入JavaScript文件后，该script标签内的代码将不再生效
如需添加JavaScript代码，则只需再定义一个script标签。两种方式均可再使用
整体代码按从上至下的顺序执行

示例：

//JavaScript文件（hello.js），放于HTML文件同级目录
alert("hello JavaScript")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方式二</title>
    <!-- src的值可以是JavaScript文件的绝对路径也可以是相对路径 -->
    <script type="text/javascript" src="hello.js">
        //当script标签已经引入了JavaScript文件后，script标签中的JavaScript代码将不再运行
        //如需要再添加JavaScript代码，只需再定义一个script标签。再引入文件或书写代码即可。
        //值得注意的是，代码运行顺序是从上至下
        alert("无效")
    </script>
</head>
<body>

</body>
</html>