# 序言

欢迎来到《前端小课》，我是你的教练「素燕」。我想，当你阅读到这篇序言的时候，一定看到了关于《前端小课》的介绍。在接下来的时间，我会陪你一起学习前端，从最基础的知识出发，逐步深入学习。

《前端小课》是通过图片、文字、代码、视频等多种方式写成的一本多媒体电子书。全书分为不同的小书，每本小书旨在讲透一个知识点。比如 CSS布局、JavaScript基础、动画。以最基础的编程知识为起点，即使不懂编程的小白也能够通过本书学会编程，顺利进入互联网行业。

在开始学习编程之前，最重要的是融入程序员生活圈，然后了解在工作中需要哪些开发工具。比如电工需要钳子、电工刀、试电笔、扳手等这样工具的来工作，程序员也不例外，开始编程之前也需要各种工具。程序员需要一台电脑即可，推荐使用 mac，像大型互联网公司都会配备 mac 电脑。如果你没钱购买 mac，暂时可以选择一个 window 笔记本电脑。

编程，其实就是把自己的思想用代码表达出来。小学的时候我们学过加法运算，用 JavaScript（缩写 js，一种编程语言）代码可以这样表示：

function sum(a, b) {
  return a + b;
}

1
2
3

上面的代码看不懂没关系，我们来个直观一点的，实现一个「加法计算器」：

0 + 0 = 0

当你在输入框输入「数字」的时候会把结果计算出来，这就是程序要做的事情。当输入「非数字」的时候，你会发现结果显示为 NaN，这说明我们程序写的不够好，对异常情况没有进行处理。

上面这个「加法计算器」包含了两个输入框和一个显示结果的标签，它是通过 HTML + CSS + js 实现的。代码实现如下（这里只是带你了解一下代码，看不懂没关系）：

HTML 代码，显示输入框和标签

<div class="add-wrap">
  <input type="text" v-model="a" placeholder="请输入一个数字">
  <input type="text" v-model="b" placeholder="请再输入一个数字">
  <div>{{ a ? a : 0 }} + {{ b ? b : 0 }} = {{ sumRet }}</div>
</div>

1
2
3
4
5

JS 代码，用来计算用户输入的数字

export default {
  data() {
    return {
      a: undefined,
      b: undefined
    }
  },
  computed: {
    sumRet() {
      if (!this.a && !this.b) {
        return 0;
      }
      return +this.a + +this.b;
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

CSS，用来控制输入框和标签的样式，比如背景颜色，输入框宽高

.add-wrap
  background-color $navBgColor
  padding 20px
  input
    display block
    margin-bottom 10px
    height 30px
    width 200px

1
2
3
4
5
6
7
8

那这些代码是通过什么写出来的呢，使用 word 写出来的吗？

当然不是，用 word 这种文档软件岂不得累死，一个字母一个字母敲。写代码有专门的软件，你可以把它看做是一个特殊的 ”word“ 软件，专门用来写代码。不同的编程语言往往有不同的编写软件。而我们写前端最常用的是 VSCode。

TIP

本节完！如果你对本节内容有不明白的地方，可加入读者群交流（微信 wsy9871），或关注公众号「素燕」。下节内容见。

1.1 开发利器 VSCode →