起步

在书写第一个程序之前，我们应该知道在哪里去写程序，JS 可以在很多地方执行，我们这里使用浏览器环境来学习 JS。

首先我们需要一个空网页，在网页最后加上一个 script 元素，在这个元素内部就可以写 JavaScript 代码，这样我们不需要像 java 那样繁琐的环境配置也可以直接学习 JavaScript。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
		//代码写在这里
    </script>
</body>
</html>

正常情况下，学习一门编程语言，第一个程序都是输出一个东西，我们这里也不例外，我要输出一个 hello world 就书写如下代码：

document.write("hello world");

写了这个代码之后，在网页中就会显示 hello world，如下图所示

当然，结合我们前面学习的 HTML，我们其实可以在网页上输出一个元素，甚至样式，如下所示

document.write("<p style='color:red;font-size:20px'>hello world</p>");

效果如下图所示

这里我们还要考虑一个问题，我们前面说过，js 代码可以直接写在页面中的 script 元素中，但是如果代码量很大，写在 script 元素中就不太可取了，我们一般将 js 代码全部提取出来，放到一个. js 文件中，在页面中引入这个文件即可，也就是说，这里我们书写 js 代码的地方就有两处了，可以写在页面的 script 元素内部，也可以写在外部 js 文件中通过 src 属性引入，我们这里就考虑如何引入。

首先，我们应该创建一个 js 文件，创建之后，在页面中使用 script 元素，通过该元素的 src 属性来引用

<script src="./test.js"></script>

此时我就引入了一个 test.js 的文件，我在这个文件内部写的 js 代码和我直接写在 script 元素一样。值得注意的是，一个 script 元素，要么用来引用外部 js 文件，要么用来书写 js 代码，添加了 src 属性之后，在该元素中间书写的 js 代码会直接失效，如下所示

<script src="./test.js">
   document.write(1);//这种做法是错误的，因为这个script元素已经用来引入外部js了，所以这一行代码根本不会执行。
</script>

不论什么情况，都推荐使用引入外部 js 文件这种方式，我们追求结构、样式、行为分离。

页面上出现多个 script 元素的处理

在页面上往往不止一个 script 元素，经常出现多个，如果出现了多个 script 元素，执行顺序永远是自上而下，必须是第一个 script 元素的内容执行完，再执行第二个 script 元素，以此类推。

script 元素中的 type 属性

页面中其实不止可以嵌入 JavaScript 代码，它可以嵌入各种各样的代码，type 属性就是用来指定我这个东西是什么代码，现在浏览器默认都是 JavaScript 代码，所以浏览器允许我们不指定代码格式，当然我们也可以加上，如下所示

<script src="./test.js" type="text/javascript"></script>

基本原则

• JS 由多条语句组成，每条语句由英文分号结束。
• JS 代码始终是从上向下同步执行的，简单来说就是上面的语句没有执行完，后面的语句绝不会执行。（异步除外 ）
• JS 严格区分大小写。

在上面的原则中，提到了每条语句都由英文分号结束，实际上这并不是 JS 的强制要求，我们可以不加分号，使用换行来代替分号，一般来说，一条语句都独占一行，如果严格按照这样来写代码，哪怕不用分号也不会让程序出现问题。但我们依旧要加上分号，因为为了节省传输的流量，加快用户访问速度，我们的 JS 代码会被压缩，压缩之后就没有换行这个东西了，所有 JS 代码都会被压缩到一行，如果不加分号，压缩后的 JS 代码很有可能无法执行。

常见输出语句

输出很好理解，就是展示给我们看，前面的 document.write("helloworld") 实际上就是一条输出语句，是在页面上输出一个 helloworld ，这些输出语句是非常常见的，也是学习过程中用的最多的语句。所以有必要介绍一下。

所有的输出语句均不是 ES 标准，因为输出语句依赖于环境，而 ES 标准本身不依赖于环境。

document. write()

这个语句我们已经见过了，功能就是把一个东西输出到页面，这个语句用的非常少，可能也就这里会用到，所以我也不打算介绍这个东西。

alert()

这个语句也可以输出，但说成输出其实并不恰当，更像是一个提示或者弹窗，我们看一下效果：

alert(1);

使用 alert 方法之后会在页面上弹出一个提示信息，这个也可以用于输出，没有问题，点击 确定 后弹窗会消失。由于这个确实可以输出一个东西，所以我们也归纳到输出语句里面，这个用的也不是很多，因为这个弹窗并不好看，如果需要用到弹窗我们一般都会自己写一个更好看的弹窗。

alert() 有一个很神奇的功能，就是阻塞代码，什么意思呢，如果你不点击这个确定，整个页面是阻塞的，代码是不会执行的，我们用这样一个例子来说明。

alert(1);
document.write(1);

这个代码很简单，首先弹出一个弹窗，然后在页面上输出一个 1，我们前面说过，执行顺序从上往下，所以应该是先执行 alert(1)，再执行 document.write(1)。读者可以尝试一下这个代码，会得到下面的结果。


很显然，在执行 alert(1) 的时候，页面出现弹窗，并且页面是空白的，此时页面是一个劲转圈的，也就一直等着，只有当你点击了确定之后，才会执行后面的 document.write(1)，向页面输出一个 1。

一个小问题

读者可以尝试一下这个代码

document.write(1);
alert(2);
document.write(3);

这个代码的执行效果如下：

这似乎与预期效果不同，因为我们前面写到过，代码的执行顺序是从上往下的，应该先执行 document.write(1);，在页面输出一个 1，之后再执行 alert(2)，但是这里再执行 alert(2) 的时候页面依旧是空白的，这是由于 alert 会阻塞渲染进程，在第一句执行完的时候，并不是立刻向页面输出信息的，而是将 “要向页面输出一个 1”这个信息交给渲染进程，然后渲染进程执行，但 alert 直接阻塞了渲染进程，让页面无法渲染，导致页面空白。

console.log()

这个语句是最常用的输出语句，这个语句用于将数据显示到控制台，在页面中按下 f12，就可以看到控制台

console.log(123);

输入语句

这个语句在后面根本用不到，这里为了方便，就先提供一个简单的输入语句。

prompt("123");

这样用户可以在这里输入一个东西，我们可以在程序中获得这些数据，如下所示

var data = prompt("123");
console.log(data);

这样就实现了将用户输入的内容在控制台输出这一功能。

如果用户点击取消，会输出一个 null，关于 null 可以参见 [2.数据和数据类型](./2.数据和数据类型.md#null 类型)

注释

任何语言都应该有注释，注释是为了方便程序开发者阅读的东西，浏览器在执行的时候会直接忽略注释，所以注释并不参与执行，对程序完全透明，只有你阅读程序的时候才能看到。

单行注释

使用双斜杠，双斜杠后面的内容（本行）均为注释

console.log("123"); //这行代码输出了123

在这里，//这行代码输出了123 写不写均不会影响代码的执行，这个完全就是用来给程序员看的，这是为了防止我们在写了很多代码之后忘记前面代码是什么意思。

多行注释

单行注释只能用于单行，如果我们要写好几行的注释，如果依旧使用单行注释这种，就要每一行前面都加上一个双斜杠，这显然不合适，所以就有了多行注释。

多行注释的写法就是：/*注释内容*/

这个注释是可以换行的，如下所示

/*
这是一个注释
这还是注释
这还是注释
*/

这样就可以一口气写好多注释。

文档注释将在后面介绍