基础环境

搭建开发环境

node.js

打开链接

VS Code

轻量级 IDE

打开链接

建立课程文件夹

在你电脑里，找到一个位置，比如 桌面，D 盘，或者 Documents 文件夹内。

创建一个 ZZAX 的 文件夹

在 ZZAX 的文件夹下 创建一个 webd131 的文件夹

基础认知

运行机制 与 使用场景

浏览器下

浏览器端 100% 使用

与 HTML、CSS 搭配，构建网页，或网页程序

服务器端

也可以使用 node 做 服务器级别的程序

可以做 服务器、命令行、数据处理

客户端

可以被一些框架 将 HTML、CSS、JS 包装成 一个 本地 app

可以做 客户端、手机端 app

数据通信标准

JSON（JavaScript Object Notation）

作为现在 Rest API 的 主流数据格式

部分新型数据库 使用 JSON 作为数据格式

浏览器运行 js

webd131
chapter01-env
case01-browser
index.html
demo.js
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Demo</title>    <script src="demo.js"></script></head><body>    <script>        console.log('Hi, ZZAX - 2');    </script></body></html>
demo.js
1 
alert('Hi, ZZAX - 1');

控制台运行 js

webd131
chapter01-env
case02-node
demo.js
demo.js
1 
console.log('Hi, ZZAX');
  1 
current: webd131/chapter01-env/case02-nodenode demo.js

TypeScript

基础认知

为什么需要它？

因为 JavaScript 本身不带类型检查

收益

使用 TypeScript 后 会有更强的类型提示

案例对比
1 2 
const message = "zzax";console.log(name);
1 2 
const message: string = "zzax";console.log(message);
代价

需要 编译，将 TS 转换为 JS。再运行

控制台运行 TS

webd131
chapter01-env
case03-ts
src
demo.ts
tsconfig.json
1 2 
const message: string = "zzax";console.log(message);
1 2 3 4 5 6 7 8 9 10 11 12 
{  "compilerOptions": {    "module": "commonjs",    "moduleResolution": "Node16",    "target": "ES2021",    "lib": ["dom", "ES2021"],    "outDir": "out",    "sourceMap": false  },  "include": ["**/*.ts"],  "exclude": ["node_modules", "out"]}
先编译、再运行
1.

安装编译器

1   
npm i -g typescriptMac 可能需要在前面加 sudo， 也就是 sudo npm ...
2.

编译

  1 
current: webd131/chapter01-env/case03-tstsc src/demo.ts --outDir out
3.

运行

  1 
current: webd131/chapter01-env/case03-tsnode out/demo.js
直接运行
1.

安装 ts-node

1   
npm i -g ts-nodeMac 可能需要在前面加 sudo， 也就是 sudo npm ...
2.

直接运行

  1 
current: webd131/chapter01-env/case03-tsts-node src/demo.ts

相关名词

简称全名解释
JSJavaScript
ESECMAScript其实是跟 JS 一样的
ES6ECMAScript 2015JS 的重大版本更新，增强了一些高级语法，但没有增强类型检查
TSTypeScript对 JS 进行了类型检查增强，并且支持一些高级语法

JS/TS 和 Java 的对比

运行 和 类型检查分离

在 js 里没有编译这个环节，也就没有编译前的类型检查

即便是用 ts，也不需要所有的地方都加类型备注

无需强结构

Java 里 代码，必须写到 class 里

JS 里 可以直接写运行代码。

更强的文件概念

Java 里 文件被抽象成了 包

JS 里 基本是直接倒入文件

NPM

干什么用的

依赖管理

简化指令

依赖管理

webd131
chapter01-env
case04-npm
src
demo.js
1.

初始化 npm

  1 
current: webd131/chapter01-env/case04-npmnpm init

之后 一路 回车

2.

安装 依赖

  1 
current: webd131/chapter01-env/case04-npmnpm i chalk
3.

配置一下

1 2 3 4 5 6+7 
{  ...    "dependencies": {    "chalk": "^5.2.0"  },  "type": "module"}
4.

代码

1 2 
import chalk from "chalk";console.log(chalk.bgBlue("Hello world!"));
5.

运行

  1 
current: webd131/chapter01-env/case04-npmnode src/demo.js
再安装

删除 node_modules 后，可以运行以下指令恢复

  1 
current: webd131/chapter01-env/case04-npmnpm install

简化指令

webd131
chapter01-env
case05-npm-script
src
demo.ts
1.

初始化 npm

  1 
current: webd131/chapter01-env/case05-npm-scriptnpm init

之后 一路 回车

2.

代码

1 2 
const message: string = "zzax";console.log(message);
3.

配置一下

1 2 3 4+5 6 7 8 9 
{  ...  "scripts": {      "start": "ts-node src/demo.ts",      "test": "echo \"Error: no test specified\" && exit 1"  },  ...}
4.

运行

  1 
current: webd131/chapter01-env/case05-npm-scriptnpm run start

格式化代码Prettier

干什么的

格式化代码

webd131
chapter01-env
case06-format
demo.js
.prettier.json
配置
1.

安装 VSCode Prettier 插件

2.

添加配置文件

1 2 3 4 5 6 7 
{    "trailingComma": "es5",    "tabWidth": 2,    "semi": true,    "singleQuote": true,    "printWidth": 120}
3.

VSCode 设置 Format On Save

ZZAX 微信公众

文档一更新，立刻告诉你