03-02：你从来没试过的方式学习 JavaScript - 2了解完 JS 历史后，我们现在开始撸起袖子来写两行 JS

JS 书写在哪个位置

了解完 JS 历史后，我们现在开始撸起袖子来写两行 JS 代码吧。

我们 JS 比较简单，只要有浏览器这就可以运行了。也就说我们在写 JS 的时候，只需要在我们 HTML 文件中写完，通过浏览器打开 HTML 文件就能看到效果。

首先我们要解决 JS 代码到底可以写到哪个位置，其实可以结合着以前我们 CSS 的来综合记忆，写的方法跟我们 CSS 的套路是一样。

JS 也有三种书写位置：分别为行内式，内嵌式，外链式。

行内式

第一个我们称之为行内式的 JS，行内式 JS 直接写到标签上就可以了，我们现在有个需求叫：唐伯虎点秋香。

我这先准备一个 button 按钮，这是一个叫唐伯虎的按钮，HTML 代码如下。

<input type="button" value="唐伯虎">

那么通过 JS 如何实现 唐伯虎点秋香 的效果呢？

只需要在按钮标签上添加 onclick="alert('秋香姐')" 即可，是不是很简单呢，JS 行内式代码如下：

<input type="button" value="唐伯虎" onclick="alert('秋香')">

在线体验 JS 代码：

jsbin.com/zadefax/edi…

那么我来解释一下代码：

onclick 是点击的意思，alert 是警告的意思，秋香 两个字是中文。

所以综合起来的意思就是：当 按钮 被 点击 的时候弹出一个警告框，警告框内容为 秋香 。而且按钮点完后可以再点哦，秋香真的是随叫随到，你点到明天都可以。

再和大家说个注意事项：因为秋香姐是个汉字，需要添加引号包起来，而外面已经有一对双引号了，所以里面的秋香需要用单引号包裹，也就是俗称的引号秘诀 外双内单 。

好啦，以上就是我们的 JS 行内式写法啦，直接写在标签那行内部，所以叫行内式，是不是很容易上手咧。

内嵌式

接下来我们再看看 JS 的第二种写法，叫做内嵌式，那内嵌式的代码具体写在哪里呢？

我从网上找了张图，大家可以看看。

没错，箭头指的位置就是 JS 代码书写的地方了，也就是 <script> </script> 这对 HTML 标签的内部。

再看一张图，我们可以这么写，在 HTML 文件中插入 JS 代码。

在线体验 JS 代码：

jsbin.com/qupelem/edi…

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JS内嵌式</title>
    <script>
        alert('第一次插入到头部');
    </script>
</head>

<body>
    <script>
        alert('第二次插入到主体');
    </script>
</body>

</html>
<script>
    alert('第三次插入后面');
</script>