JavaScript _ JS 开始

JS 开始

JS 快速上手

JavaScript是一门前端的脚本语言，正常来说，其程序的运行位置是网页前端，即客户端，即网页运行的终端，即浏览器。

恭喜，汝不需要去学如何安装语言环境。汝只需要知道在哪里插入JavaScript脚本就ok啦~ 网页运行，JavaScript脚本就运行咯~

JS作为网页的脚本语言，在网页中有两种插入方式：

利用<script>标签直接插入在网页HTML源码中（运行一下）
作为外部JS脚本由<script>引入到HTML页面中（运行一下）

用<script>标签直接插入

如下所示，利用<script>标签直接插入在网页HTML源码中。切记，JS代码必须放在<script>和</script>标签之间。

<script>
document.getElementById("demo").innerHTML = "反清复明";
</script>

运行一下

<!DOCTYPE html>
<html>
<head>
<script>
function change_demo() {
  document.getElementById("demo").innerHTML = "反清复明";
}
</script>
</head>
<body>

<h1 id="demo">H1标题</h1>
<p>点击下方按钮改变上述标题</p>
<button type="button" onclick="change_demo()">click me!</button>

</body>
</html>

运行一下

把<script>放在body元素内：

<!DOCTYPE html>
<html>
<body>

<h1 id="demo">H1标题</h1>
<p>点击下方按钮改变上述标题</p>
<button type="button" onclick="change_demo()">click me!</button>

<script>
function change_demo() {
  document.getElementById("demo").innerHTML = "反清复明";
}
</script>
</body>
</html>

运行一下

用<script>标签引入外部JS脚本

JavaScript代码可以作为外部JS脚本，由<script>引入到HTML页面中。如下所示，先把JS脚本保存成单独的js文件，名曰“change-demo.js”，放在专否沙盒的服务器上。然后如下所示，在head部分中引入change-demo.js这个外部脚本，效果等价。

<!DOCTYPE html>
<html>
<head>
<script src="/static/change-demo.js"></script>
</head>
<body>

<h1 id="demo">H1标题</h1>
<p>点击下方按钮改变上述标题</p>
<button type="button" onclick="change_demo()">click me!</button>

</body>
</html>

运行一下

外部脚本也可以直接放在body元素中：

<!DOCTYPE html>
<html>
<body>

<h1 id="demo">H1标题</h1>
<p>点击下方按钮改变上述标题</p>
<button type="button" onclick="change_demo()">click me!</button>

<script src="/static/change-demo.js"></script>

</body>
</html>

运行一下

JS脚本放在head部分还是放在body元素中都可以，但是唯一要注意的是JS脚本的引入顺序，以及JS脚本运行时，文档是否加载完毕。JS脚本在HTML文档尚未加载完毕时就运行，若JS并不涉及文档元素，那还好；若是涉及尚未加载完毕的HTML元素，那就不好啦！这些后续都会深入说道，这个事情，一定要做到心里敬畏，细节很重要。

JS 开始

推广