用<script>小标签来装JavaScript
在HTML里面加JavaScript，要用到一个叫<script>的小标签哦。我们的代码就放在这个小标签里面，像这样：
<script>
document.getElementById("demo").textContent = "我学的第一段JavaScript代码呢！";
</script>
注意哦，以前有时候会看到<script type="text/javascript">，但现在不用这么写了，因为大家的浏览器都知道JavaScript是什么啦。
JavaScript里的函数和事件小概念
在JavaScript里面，function是一个魔法词，它可以让我们写一段代码，然后在需要的时候，像变魔术一样让这段代码跑出来。比如，当我点击一个按钮的时候哦。
JavaScript可以放在HTML的<head>或<body>里
在HTML文档里，JavaScript的代码可以放在<head>小帽子里，也可以放在<body>大肚子里，甚至可以两个地方都放哦。
把JavaScript放在<head>小帽子里
有时候，老师会把一些重要的函数定义放在HTML文档的<head>部分。这样，当我做点什么，比如点击按钮的时候，这些函数就知道该怎么响应了。
看，就像这样：
<!DOCTYPE html>
<html>
<head>
<script>
function updateText() {
document.getElementById("demo").textContent = "段落变新啦！";
}
</script>
</head>
<body>
<h2>在小帽子里演示JavaScript</h2>
<p id="demo">这是一个段落哦。</p>
<button onclick="updateText()">点这里试试看</button>
</body>
</html>
把JavaScript放在<body>大肚子里
其实，JavaScript代码也可以放在<body>标签里哦。虽然做的事情都一样，但放的位置不同，可能会影响网页加载和显示的速度呢。
像这样：
<!DOCTYPE html>
<html>
<body>
<h2>在大肚子里演示JavaScript</h2>
<p id="demo">这是一个段落哦。</p>
<button onclick="updateText()">点这里试试看</button>
<script>
function updateText() {
document.getElementById("demo").textContent = "段落变新啦！";
}
</script>
</body>
</html>
为了让网页更快地显示出来，老师建议我们把脚本放在<body>的最下面。因为浏览器是从上到下读HTML的，这样可以让网页的内容先显示出来，再加载和执行脚本。
把JavaScript装进外部小盒子里
除了直接写在HTML里，我们还可以把JavaScript代码放在另外一个小盒子里，然后通过<script>标签的src小手来拿。
这个小盒子通常以.js为后缀名。比如，我可以创建一个叫myScript.js的小盒子，然后在HTML里这样拿：
<script src="myScript.js"></script>
这样做的好处是，我可以在很多不同的网页里都用同一个小盒子里的脚本，而且这样HTML文件看起来更清爽，更好整理呢。
用外部小盒子的好处多多
用外部小盒子装JavaScript代码，有几个好处哦：
- 分开管理：HTML负责网页的结构，而JavaScript负责让网页动起来，这样代码更清晰，更容易维护。
- 缓存：如果我已经下载过某个小盒子，浏览器就会帮我存起来，下次再用的时候就不用重新下载了，可以更快地加载网页。
- 重用：我可以在不同的网页或项目里都用同一个小盒子里的脚本。
如果我想在一个网页里用很多不同的小盒子里的脚本，只需要多加几个<script>标签就好啦：
<script src="script1.js"></script>
<script src="script2.js"></script>
怎么拿外部小盒子里的脚本呢？
拿外部小盒子里的脚本，有几种方式哦：
- 用完整的网址：直接指向互联网上的某个具体位置。
- 用相对路径：指向和我当前看的网页在同一个网站内的某个位置。
- 不用路径：脚本小盒子和我当前的HTML文件在同一个文件夹里。
看，就像这样：
用完整的网址：
<script src="https://www.example.com/js/myScript.js"></script>
用相对路径：
<script src="/js/myScript.js"></script>
不用路径（在同一个文件夹里）：
<script src="myScript.js"></script>
选择哪种方式，要看我的项目是怎么安排的，还有看我心情什么了。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
