肉渣教程

JS 开始

上一节 下一节

JS 快速上手

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

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

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

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

用<script>标签直接插入

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

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

运行一下


<script>标签既可以放在<head>元素内,也可以放在<body>元素内。如下所示,把<script>放在head元素内

<!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 开始

上一节 下一节