Skip to content

Commit e8b0e28

Browse files
AmazingAngAmazingAng
committed
edit 1 Hello Javascript
1 parent d2b4dfe commit e8b0e28

2 files changed

Lines changed: 44 additions & 15 deletions

File tree

‎01_HelloJavaScript/readme.md‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@
99

1010
-----
1111

12-
2023年，WTF学院将带来零基础入门的 WTF JavaScript 教程，帮助新人进入 Web3。第一讲，我们介绍编程语言的分类，JavaScript 概述，并写第一个JavaScript 程序（两行代码）：`Hello JavaScript`。
12+
2023年，WTF Academy 将开发一个零基础入门的 JavaScript 教程，帮助新人进入 Web3 开发。第一讲，我们将介绍什么是 JavaScript，并编写第一个JavaScript 程序：`Hello JavaScript`（两行代码）。
1313

1414
## 什么是 `Javascript`?
1515

16-
最初，JavaScript 是一种用于与网页元素交互的轻量型编程语言。前端开发者可以将它与 HTML/CSS 结合并增强网页的功能，例如填写表单，写博客。现在，JavaScript 也可以在服务器（后端）通过 Node.js 运行，可用于更新数据库、文件系统。
16+
JavaScript 是一种用于与网页元素交互的轻量型编程语言。前端开发者可以将它与 HTML/CSS 结合并增强网页的功能，例如动态更新网页内容，网页交互等。现在，JavaScript 也可以在服务器（后端）通过 Node.js 运行，用于更新数据库、文件系统等。
1717

1818
## 为什么要学习 `JavaScript`?
1919

20-
根据2022年[Stack Overflow社区年度调查显示](https://survey.stackoverflow.co/2022/#most-popular-technologies-language)，JavaScript 已经连续十年成为最受开发者和学习者欢迎的一门编程语言。学习 JavaScript 不仅是普通 web 开发者的技能，同时也是全栈 web3 学习者的必备知识。
20+
根据2022年[Stack Overflow社区年度调查显示](https://survey.stackoverflow.co/2022/#most-popular-technologies-language)，JavaScript 已经连续十年成为最受开发者欢迎的一门编程语言。学习 JavaScript 不仅是普通 web 开发者的必备技能，同时也是全栈 web3 学习者的必要知识。
2121

2222
![1-1](./img/1-1.png)
2323

@@ -27,18 +27,18 @@
2727

2828
![](./img/1-2.png)
2929

30-
[playcode](https://playcode.io/)是一个在线编译`javascript`的平台，你不需要在本地安装任何人间就可以运行`.js`文件，非常方便。本教程将使用 playcode 进行代码演示，未来也将在 [wtf.academy]
30+
[playcode](https://playcode.io/)是一个在线编译`javascript`的平台，你不需要在本地安装任何程序就可以运行`.js`文件，非常方便。本教程将使用 playcode 进行代码演示，未来也将在 [wtf.academy]
3131
(https://wtf.academy) 的教程中嵌入可互动代码模块。你可以在[链接](https://playcode.io/1051873)上找到这一讲的代码。
3232

3333
![](./img/1-3.png)
3434

3535
### 2. VScode
3636

37-
你可以使用本地 [VScode](https://code.visualstudio.com/download) 进行开发，需要安装[Node.js](https://nodejs.org/zh-cn/download/)。我们会在之后的章节介绍如何使用 `Node.js`。
37+
你可以使用本地 [VScode](https://code.visualstudio.com/download) 进行开发，需要安装[Node.js](https://nodejs.org/zh-cn/download/)，我们会在之后的章节介绍如何使用它。
3838

39-
## Hello JavaScript
39+
## Hello JavaScript!
4040

41-
下面，我们要写第一个 JavaScript 程序：`Hello JavaScript`。在这个程序中，我们定义了一个变量，然后将它的值输出到控制台。
41+
下面，我们要写第一个 JavaScript 程序：`Hello JavaScript`。在这个程序中，我们定义了一个变量，并将它的值输出到控制台。
4242

4343
代码:
4444

@@ -52,40 +52,42 @@ console.log(hello);
5252

5353
下面，我们逐行学习一下。
5454

55-
1. 第 1 行中，我们利用 `let` 关键字定义了一个名为 `hello` 的变量，并将`"Hello JavaScript!"` 赋值给它，最后以分号 `;` 结束这一行命令。
55+
1. 第 1 行，我们利用 `let` 关键字定义了一个名为 `hello` 的变量，并将`"Hello JavaScript!"` 赋值给它，最后以分号 `;` 结束这一行语句。
5656

5757
```js
5858
let hello = "Hello JavaScript!";
5959
```
6060

61-
2. 第 2 行中，我们利用内置函数 `console.log` 将 `hello` 变量的值转换成文本并输出到控制台，让我们可以看到。
61+
2. 第 2 行，我们利用内置函数 `console.log` 将 `hello` 变量的值输出到控制台，让人们可以看到。
6262

6363
```js
6464
console.log(hello);
6565
```
6666

67-
## Javascript 程序是如何运行的?
67+
## 【拓展知识】Javascript 程序是如何运行的?
6868

6969
![](./img/1-5.png)
7070

71-
如果说`编程语言`是人类与机器沟通的语言，那么`程序`是一篇篇文章，`代码`就其中的文本。Javascript 程序运行的大致步骤：
71+
> 你不理解下面这段话也没关系，不妨碍你继续学习 JavaScript，因为我也不是很理解！
72+
73+
如果说`编程语言`是人类与机器沟通的语言，那么`程序`是一篇篇文章，`代码`是其中的文本。Javascript 程序运行的大致步骤如下：
7274

7375
1. 程序员完成一段代码。
7476
```js
7577
let hello = "Hello JavaScript!";
7678
```
77-
2. 将代码提交给`编译器`（compiler）编译。首先，`编译器`会将`代码`分解为单个的`令牌`（token）。上面的命令会被分解为 `5` 个令牌: `let`, `hello`, `=`, `"Hello JavaScript!"`, 和 `；`。
79+
2. 将代码提交给`编译器`（compiler）编译。首先，`编译器`会将`代码`分解为单个的`令牌`（token）。上面的语句会被分解为 `5` 个令牌: `let`, `hello`, `=`, `"Hello JavaScript!"`, 和 `；`。
7880

7981
3. 接下来，`令牌`会被重新组织成一个树状结构，也叫`抽象语法树`（Abstract Syntax Tree, AST）。你可以在[AstExplorer](https://astexplorer.net/)上输入代码，并查看生成的`抽象语法树`。
8082

8183
4. 最后，编译器会将结构化的`抽象语法树`转换并生成计算机能运行的的`机器码`。
8284

83-
如果你的`代码`没有按照`编程语言`的语法来写，编译器就没有办法把它解析为机器能懂的`机器码`，`程序`就无法运行。这时，你就要去找出程序的`bug`并修复它。在未来的教程中，我们将介绍更多的 `JavaScript` 语法。
85+
如果你的`代码`没有按照`编程语言`的语法来写，编译器就无法把它解析为机器能懂的`机器码`，那么`程序`就无法运行。这时，你就要去找出程序的`bug`并修复它。在未来的教程中，我们将介绍更多的 `JavaScript` 语法。
8486

8587
## 习题
8688

87-
将 `Hello Javascript` 程序中变量 `hello` 的值改为 `Hello WTF Academy`，并观察控制台的输出。
89+
将 `Hello Javascript` 程序中变量 `hello` 的值改为 `“Hello WTF Academy!”`，并观察控制台的输出。
8890

8991
## 总结
9092

91-
这一讲我们介绍了编程语言的分类，JavaScript的诞生，JavaScript的概述，并在最后写了第一个包含JavaScript的程序代码：Hello JavaScript。之后，我们会学习更多关于JavaScript的细节。
93+
第一讲，我们介绍了什么是 JavaScript，为什么要学习它，JavaScript 开发工具，并编写了第一个仅有两行的 JavaScript 程序：`Hello JavaScript`。接下来，我们将继续 JavaScript 之旅！

‎README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,29 @@
11
# WTF-JavaScript
22
我最近在重新学 JavaScript, 巩固一下细节, 也写一个“WTF JavaScript极简入门”，供新人使用。
3+
4+
## 开发工具
5+
### 在线编辑器运行
6+
7+
`javascript`在线编译平台：
8+
* [playcode.io](https://playcode.io)
9+
10+
### VScode本地运行
11+
12+
需要安装[VSCode](https://code.visualstudio.com/download)和[Node.js](https://nodejs.org/zh-cn/download/)，然后运行：
13+
14+
```shell
15+
node 01_HelloJavaScript/HelloJavaScript.js
16+
```
17+
18+
## 目录
19+
**第1讲：Hello JavaScript（2行代码）**：【[代码](https://github.com/WTFAcademy/WTF-JavaScript/blob/main/01_HelloJavaScript/HelloJavaScript.js)】【[教程](https://github.com/WTFAcademy/WTF-JavaScript/tree/main/01_HelloJavaScript/readme.md)】【[PlayCode](https://playcode.io/1051873)】
20+
21+
## WTF JavaScript贡献者
22+
<div align="center">
23+
<h4 align="center">
24+
贡献者是WTF学院的基石
25+
</h4>
26+
<a href="https://github.com/WTFAcademy/WTF-JavaScript/graphs/contributors">
27+
<img src="https://contrib.rocks/image?repo=WTFAcademy/WTF-JavaScript" />
28+
</a>
29+
</div>

0 commit comments

Comments
 (0)