# 快速上手

TIP

javascript 代码可以在网页的任何地方运行(这个单词太长了,以后统称为 js)

# Hello, world

来!实现你的第一个 javascript 程序

新建文件: index.html

<html>
<head>
  <script>
    alert('Hello, world');
  </script>
</head>
<body>
  test
</body>
</html>

写入一下代码后把文件拖拽到浏览器中运行。

凡是 <script>...</script> 标签包裹的代码,就是 js 代码,它将直接被浏览器执行。

引入 js 文件的两种方法:

第一种:嵌入 html 中

就是上面的 hello, word 程序

第二种:引入 .js 文件

单独创建一个 .js 结尾的文件。然后在 html 中引入

新建 index.js

alert('Hello, world');

新建 index.html

<html>
<head>
  <script src="./index.js"></script>
</head>
<body>
  test
</body>
</html>

文件拖拽到浏览器中运行。

一般推荐第二种方法,js 代码和 html 代码分开。这样代码好维护。而且我们也可以同时引入多个 .js 代码

<html>
<head>
  <script src="./a.js"></script>
  <script src="./b.js"></script>
  <script src="./c.js"></script>
</head>
<body>
  test
</body>
</html>

浏览器会按顺序加载这些 .js 文件。加载成功后会立刻执行文件中的 js 代码。

有些时候你会看到 <script> 标签还设置了一个type属性:

<script type="text/javascript">
  ...
</script>

实际开发中 type 属性是可以省略的,因为他的默认值就是 text/javascript

type 的默认值是 “text/javascript”, 如果好奇,你还可以尝试其他的值

  • text/javascript (默认)
  • text/ecmascript
  • application/ecmascript
  • application/javascript
  • text/vbscript

# 如何编写 js

你需要一个趁手的代码编辑器。txt 文本肯定是不行的。

这里我推荐 VsCode(opens new window) , 因为它启动很快,插件丰富。是微软的产品,完全免费。

安装也非常简单,全部下一步即可。并且支持跨平台 Mac 电脑一样用。还有一点你也许不知道。VsCode 就是用 javascript 实现的。这标志着微软对待开源的态度。

# 怎样运行 js

第一步:要有一个趁手的浏览器(IE除外)。

这里我推荐 Chrome(opens new window) ,大部分开发都非常喜爱的浏览器。因为它启动速度快,并且开发者工具非常强大。

第二步:准备一个 html 文件,就像刚开始那个例子一样。

第三步:新建一个 .js 文件,把你的 .js 文件引入到 html 中

第四步:再把 html 文件通过 chrome 打开。

WARNING

如果遇到任何问题,你要耐心寻找答案。初级编程有点像侦探游戏,需要在各个环节寻找线索。 chrome 浏览器中 F12 是开发者工具的启动键,你现在按下试试看!

F12 开发者工具

上次更新: 7/5/2020, 7:19:14 PM