2.JavaScript的使用方式-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_55123102/article/details/130210183

该文介绍了JavaScript的基础知识，包括如何在HTML中嵌入JavaScript代码，使用<script>标签以及通过src属性引入外部.js文件。同时强调了JavaScript代码的位置对执行顺序的影响，并推荐将JS代码放置在HTML底部以避免元素加载问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

频教学作用仅限于0基础需要入门的同学，后期博主会规划其它课程

视频有不懂的地方或者有哪些问题可直接联系我

也可以加入自学学习群，有同伴一起学，交流也更方便

vx搜公众号【前端新气象】有我的微信，请务必填写备注，否不予通过

课件代码地址GitHub - haojiey/js-Introductory-courseware: JavaScript零基础入门课件

可以学习到的内容

js的引入方式
js的引入位置
js的写法

JavaScript 引入方式

HTML中嵌入 JavaScript 代码

在 HTML 页面中嵌入 JavaScript 脚本需要使用 <script> 标签，在 <script> 标签中直接编写 JavaScript 代码

新建一个HTML 文档
在 <body> 标签内写入一个 <script> 标签
给 <script> 标签添加一个属性type="text/javascript"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <script type="text/javascript">
        document.write('hello 小木')
    </script>
</body>
</html>

document.write() 一种输出方式，后续会讲到，此处仅作为查看js嵌入效果

HTML中引入 JavaScript 脚本

JavaScript 可以直接放在 HTML 文档中，也可以放在 JavaScript 脚本文件中。JavaScript 脚本文件是文本文件，扩展名为.js，使用任何文本编辑器都可以编辑。

通过 <script> 标签的 src 属性引入脚本

新建一个 js 脚本
在html中 <body> 标签内写入一个 <script> 标签
给 <script> 标签添加一个属性type="text/javascript"
在<script> 标签的 src 属性引入脚本

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="./index.js"></script>
</body>
</html>

js文件

document.write('hello 小木')

JavaScript 代码位置

浏览器在解析 HTML 文档时，文档流是自上而下的方式解析的。 JavaScript 脚本的执行顺序也是根据 <script> 标签的位置来确定的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.write('1')
    </script>
</head>
<body>
    <script>
        document.write('2')
    </script>
    <script type="text/javascript" src="./index.js"></script>
    <script>
        document.write('3')
    </script>
</body>
</html>
<script>
    document.write('4')
</script>