学习笔记之Js-1

浏览器内，按下F12，打开控制台(Console)，写下：

1
console.log('Hello World');

回车执行
得到输出Hello World
还可以进行数字运算

1
2 + 2

回车得到 4
还可以：

1
alert('oi');

回车，浏览器弹出一个提示弹窗，其内容是oi

有挺多编辑器可以选，我习惯用VSCode。
进入官网下载安装即可
还有安装Node.js，可以使用nodejs运行js代码。

打开VSCode，新建文件index.html

在文件内打一个!(注意是英文)，按下Tab，VSCode会自动填充html的基本样式，生成像下面这样：

1
2
3
4
5
6
7
8
9
10
11
<!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>

</body>
</html>

来到VSCode的扩展，搜索Live Server，安装重启VSCode，index.html右键使用Live Server打开，这个时候修改html文件保存后，网页内容也会自动刷新，无需手动刷新。
可以写一个Hello World在<body>...</body>标签内。

1
2
3
<body>
    <h1>Hello World</h1>
</body>

Setp1 在Html中添加js

有两个地方可以添加js标签：

  • head标签里添加
  • body标签里添加

    一个比较好的习惯是把script标签加在body中的其他元素的末尾，浏览器是自上而下解析代码，如果写的靠上，而js又多，浏览器就会先解析js，而不是先渲染界面，用户体验不好。

script标签

格式是<script>...</script>。
可以试一下之前在浏览器输入的js语句。
比如

1
console.log('Hello World');

这里的代码称为一条语句，而语句表达了我们要执行的操作，在本例中，我们想要在控制台中记录一条信息，这里使用单引号括起的Hello World，是一串字符串，字符串就是由字符组成的序列。

在编写Script脚本时，难免会使用到注释，写法是使用两个斜杠，或者可以选中要注释的文本，然后按下Ctrl+/，批量注释代码时挺好用的。

关于注释，建议描述在代码的上方，尽量保持统一，方便查看。

主体分离

未来可能js的大小很大，如果都放在html中，会导致加载变慢，html的主要的功能是告诉浏览器要渲染的内容，而且代码全在同一个文件也会让人头疼。想改个功能又太长了找不到。
将关注点分离，所以可以添加一个新文件index.js。
这时原来的index.html中<body>标签里的<script>标签不用删，引入index.js。
将原<script>...</script>改为<script src="index.js">...</script>。
保存，来到浏览器即可看到效果。

下一篇学习如何使用node运行js.