解释性语言特性决定JS代码位置
一 概念
解释性语言特性决定JS代码位置
- 出现在head标签底部：依赖型JS库
- 出现在body标签底部：功能型JS脚本
二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>js位置</title>
<!-- 位置② -->
<!-- 出现在head标签底部：依赖型JS库 -->
<!-- <script>
bd.style.backgroundColor = '#0ff';
</script> -->
<script>
var color = "cyan";
</script>
</head>
<!-- 内联使用场景:某页面的特有逻辑,可以书写该该页面的script标签内 -->
<!-- 外联使用场景:适用于团队开发,js代码具有复用性 -->
<!-- js为解释性语言 -->
<body id="bd">
<!-- 位置① -->
<!-- <script>
bd.style.backgroundColor = '#0ff';
</script> -->
<!-- 需求1:操作div,让其字体颜色变为红色 => 功能(style.color) => 尽可能下移 -->
<!-- 需求2:让div背景颜色变为提供的颜色 => 依赖(color变量) => 尽可能上移 -->
<div id="div">123</div>
<!-- 需要使用color变量这个资源 -->
<script>
div.style.backgroundColor = color;
</script>
</body>
<!-- 位置③ -->
<!-- 出现在body标签底部：功能型JS脚本 -->
<!-- <script>
bd.style.backgroundColor = '#0ff';
</script> -->
<!-- 完成需求1 -->
<script>
div.style.color = 'red';
</script>
<!-- 外联出现位置同内联 -->
<!-- 拥有src的外联script标签,会自动屏蔽标签内部的代码块 -->
<script src="js/02.js">
alert(123)
</script>
</html>
