Javascript变量与函数

学习目标

理解变量的概念和作用：变量是存储数据的容器。理解如何声明（使用 var，let，const 关键字）、初始化和赋值变量。
理解数据类型：理解 JavaScript 中的基本数据类型（如 Number，String，Boolean，Null，Undefined）和复杂数据类型（如 Object，Array）。了解如何使用 typeof 操作符检查变量的数据类型。
理解变量的作用域：理解全局变量和局部变量的区别，以及 let 和 const 声明的块级作用域。
理解函数的概念和作用：函数是执行特定任务的代码块。理解如何定义（函数声明和函数表达式）和调用函数，以及如何传递参数和返回结果。
理解函数作用域和闭包：理解在函数内部声明的变量（局部变量）只在函数内部可见，以及闭包的概念和用法。
理解函数的高级概念：包括箭头函数，回调函数，以及异步编程中的 Promise 和 async/await。
理解变量和函数的命名规则和最佳实践：学习如何为变量和函数选择有意义的名称，以及遵循驼峰命名法等编程规范。

1. 变量

1.1 变量的概念和作用

在 JavaScript 中，变量是用来存储数据的容器。你可以把变量想象成一个存储箱，我们可以在其中放入我们想要的数据，并在需要的时候取出来。

1.2 数据类型

JavaScript 有七种基本数据类型：

Number
String
Boolean
Null
Undefined
Symbol (ES6 新增)
BigInt (ES10 新增)

和一种复杂数据类型：

Object

我们可以使用 typeof 操作符来检查一个变量的数据类型，例如：

let num = 123;
console.log(typeof num); // 输出 "number"

1.3 变量的声明和赋值

在 JavaScript 中，我们可以使用 var，let 或 const 关键字来声明变量，例如：

var a; // 声明一个变量 a
let b; // 声明一个变量 b
const c = 3; // 声明一个常量 c，并赋值为 3

1.4 变量的作用域

在 JavaScript 中，变量的作用域决定了哪些代码可以访问这个变量。我们有全局变量和局部变量，以及 ES6 引入的块级作用域。

2. 函数

2.1 函数的概念和作用

在 JavaScript 中，函数是一组用来执行特定任务的代码块。我们可以在代码的任何地方调用函数，甚至可以在一个函数内部调用另一个函数。

2.2 函数的声明和调用

函数可以通过函数声明或函数表达式来定义，例如：

// 函数声明
function sayHello() {
  console.log('Hello, world!');
}
// 函数表达式
var sayHello = function() {
  console.log('Hello, world!');
};

调用函数很简单，只需要使用函数名后面跟上括号，例如：sayHello();

2.3 函数的参数和返回值

函数可以接受参数，参数是在函数定义时声明的，作为函数执行时的输入。函数也可以有返回值，作为函数执行的结果。

function add(a, b) {
  return a + b;
}
let sum = add(1, 2); // sum 现在是 3

2.4 函数作用域和闭包

在函数内部声明的变量只在函数内部可见，这就是函数作用域。闭包是 JavaScript 中的一个重要概念，它允许一个函数访问并操作函数外部的变量。

2.5 高级函数概念

在 JavaScript 中，我们还有一些高级的函数概念，包括箭头函数，回调函数，以及异步编程中的 Promise 和 async/await。

3. 变量和函数的命名规则和最佳实践

在编程中，为变量和函数选择有意义的名称是非常重要的。这不仅可以提高代码的可读性，也可以帮助你和其他开发者更好地理解代码的功能。

在 JavaScript 中，我们通常使用驼峰命名法来命名变量和函数。这意味着所有的单词都连在一起，每个单词的首字母都大写，除了第一个单词。例如：

let myVariable = 123;
function myFunction() {
  // ...
}

示例3：打个招呼

<button onclick="hello()">打个招呼</button>
<script>
  var name = "我的名字";
  function hello() {
     alert(name);
  }
</script>

把上面这段代码复制到记事本中，保存为“Javascript-3.html”。

你可以把“我的名字”换成你自己的名字，或者任何一个人名。

在浏览器中打开这个文件，你会看到它产生的效果：

【图片3：示例3的效果】

在这个页面上，当你点击“打个招呼“这个按钮，浏览器弹出的对话框里就会显示你写的名字。

比较一下，这个示例跟上一个示例，有什么不同？

最大的不同是这个示例里多了两个新名词：

var：变量
function：函数

示例4：理解变量名和函数名

变量名和函数名只能用英文和数字、下划线来表示。但是很多人一看到英文字就头晕，然后就被吓住了，觉得不能理解了。

其实看变量名和函数名，不要去细抠英文单词的意思，要把这个名字当做一个整体来看。

变量名和函数名可不可以换呢？当然可以！

我们把上一个例子中的变量name换成abc，这个例子的效果仍然跟以前一样！

<button onclick="hello()">打个招呼</button>
<script>
  var abc = "我的名字";
  function hello() {
    alert(abc);  
  }
</script>

把上面这段代码复制到记事本中，保存为“Javascript-4.html”。

在浏览器中打开这个文件，你会看到它产生的效果：

【图片4：示例4的效果】

新的页面的效果跟上一个例子一模一样！

试试看：你可以把var abc中的abc换成其他字母，比如a、a2、b123……，看看效果是否还一样。

你会发现：

把var abc中的abc换成a、a2、b123……以后，只要后面alert(abc)中的abc也被换成同样的字母，那么页面效果就是一样的！
但如果忘记换alert(abc)中的abc，那这个页面就会出错了。

你还可以尝试把function hello()中的hello换成xyz，或者其他的字母，看看页面的效果是否仍然一样。

通过尝试，你会发现：

变量名和函数名是可以换的，只要把它所有出现的地方都换成同样的字母，就可以保证跟原来一样的效果了
如果一个变量名或者函数名看起来太复杂，你可以把它换成一个更简单、让你觉得更容易的名字。
但是有些字母是不能换的，比如var、function、alert，这些是Javascript里面固定的字，不能换，换了以后页面就会出错了。

【学习方法】学习IT，看到不懂的英文字不要发晕。英文字不过就是变量名或者函数名。用这一节所教的方法，把它替换为其他好懂的字母，比如`abc`，你就可以看懂了。

页面就是HTML和Javascript的组合

在一个页面上，HTML决定页面的内容和长相，Javascript决定页面的功能和动态效果。

换句话说，HTML提供页面的模板（内容和长相），Javascript提供页面的数据（变量）和对数据的操作（函数）。

模板和变量、函数组合起来，就是有用户界面（UI）的APP。

这一课讲的内容很简单，但是体现了几乎所有页面的基本特点：模板、变量和函数的组合。

不管多么复杂的页面，都是由这几种最基本的功能实现的。在学习的过程中，只要你紧紧抓住这几个关键点 —— 模板、变量和函数，那么任何一个页面你都能理解它背后的结构、理解它是怎么写出来的。

案例：计算器

在上一课“HTML”中，我们写了一个计算器的输入界面。但是，这个计算器仅有长相，不能做计算。

在这个案例中，我们把Javascript代码加入上一课所写的计算器中，这个计算器就可以用起来了。

<button onclick="e()">C</button>
<button onclick="d()">=</button>
<input id="c">
<br>
<button onclick="b(1)">1</button>
<button onclick="b(2)">2</button>
<button onclick="b(3)">3</button>
<br>
<button onclick="b(4)">4</button>
<button onclick="b(5)">5</button>
<button onclick="b(6)">6</button>
<br>
<button onclick="b(7)">7</button>
<button onclick="b(8)">8</button>
<button onclick="b(9)">9</button>
<br>
<button onclick="b(0)">0</button>
<button onclick="b('+')">+</button>
<button onclick="b('-')">-</button>
<script>
  var a="";
  function b(x){
    a=a+x;
    document.getElementById("c").value=a;
  }
  function d(){
    a=eval(a).toString();
    document.getElementById("c").value=a;
  }
  function e(){
    a="";
    document.getElementById("c").value=a;
  }
</script>

现在这个计算器可以做加减法运算了！它的计算结果会显示在页面上的输入框里。

在这个页面中，我们自己写的变量和函数包括：

var a：存储用户输入的算式或者计算结果
function b()：接收用户点击的数字按钮或者“+”、“-”按钮，存储到a里面。
function d()：用户点击“=”按钮之后，把算式a的结果计算出来。
function e()：用户点击“C”按钮（清零按钮）之后，把a里的内容清除掉。

还有两个函数，是Javascript自己本来就有的函数：

eval(a)：计算算式a，得出运算结果。
toString()：把数字转变成字符串。字符串就是一段文字，是专门表示文字的数据类型。
document.getElementById("c").value=a：这一段英文字虽然很长，但是不要懵圈，这段英文字其实只起了一个作用：找到id为“c”的输入框，让它的值等于a的值。这样，输入框里就会显示出输入的算式或者计算结果了。

本课总结

本课学习的重要概念：
- Javascript：变量和函数
学习方法
- 阅读参考手册不要卡住
- 看到英文字不要懵圈

1. 训练学习方法：

1.1 预判。（主动的学习，不能被动的学习。）
1.2 你怎么知道你的程序是对的？你的方法必须是对路的！

比如：你怎么知道你的地基是对的？你的图必须经过审核！写程序，搞建筑，都是有章法的！
比如：我怎么知道我的查经是对的？——也是有章法（找到作者在说啥）”

1.3 我们现在学的是编程的章法！

靠谱的人写的是靠谱的东西！
编程最重要的章法是什么？就是变量和函数！

在VueJS里，data里面就是变量，method里面就是函数。

2. 变量、数组和对象

数组和对象是Javascript里较为复杂的两类数据类型。

数组用方括号[]表示，对象用花括号{}表示。

变量可以是数组，也可以是对象。

一个数组里可以有好多个元素。数组里面可以有对象，对象里面也可以有数组。

变量自己后面带着一大堆函数。

声明一个变量是字符串，字符串就自带一堆的函数，可以对字符串进行操作。

声明一个变量是数组，数组就自带一堆的函数，可以对数组进行操作。

3. 循环语句和事件

循环语句是在模版里使用的。循环语句、条件语句、都是Vue.js 的模版语法。

“事件”就是点击、输入等用户的动作。

4. 正确的学习方法：浸泡式学习！

每天沉浸在读文档里面，泡透了！
每天十分钟，30分钟，没有用，刚预热就凉凉了！

5. 怎么读文档？

文档里面最重要的，就是尝试一下！改一改，碰一碰！
碰到不明白的东西，需要的时候就去学一下！
learning on demand

6. 重复一下重点：

变量后面自己带着一大堆函数；
增删改查vuetify也帮你写好了！
声明了一个变量，放个.，知道后面放啥就行。
写程序，从读人家的程序开始！
学习就是从不知道到知道，从无知到有知；

7. 资源

点击这里下载本课的示范代码。

本课用到的网页资料：

菜鸟教程：VueJS

教程：https://www.runoob.com/vue2/vue-tutorial.html

菜鸟教程：Javascript

教程：https://www.runoob.com/js/js-tutorial.html
数据类型：https://www.runoob.com/js/js-datatypes.html
字符串对象：https://www.runoob.com/jsref/jsref-obj-string.html
数组对象：https://www.runoob.com/jsref/jsref-obj-array.html

作业

阅读Javascript参考手册里的变量和函数这两节，在实例里面尝试一下。
阅读Javascript参考手册，理解什么是数据类型，Javascript有哪些数据类型。
阅读Javascript参考手册，了解什么是Javascript事件。记录下你不懂的地方，来问老师。

## 学习目标

1. **理解变量的概念和作用**：变量是存储数据的容器。理解如何声明（使用 var，let，const 关键字）、初始化和赋值变量。
2. **理解数据类型**：理解 JavaScript 中的基本数据类型（如 Number，String，Boolean，Null，Undefined）和复杂数据类型（如 Object，Array）。了解如何使用 typeof 操作符检查变量的数据类型。
3. **理解变量的作用域**：理解全局变量和局部变量的区别，以及 let 和 const 声明的块级作用域。
4. **理解函数的概念和作用**：函数是执行特定任务的代码块。理解如何定义（函数声明和函数表达式）和调用函数，以及如何传递参数和返回结果。
5. **理解函数作用域和闭包**：理解在函数内部声明的变量（局部变量）只在函数内部可见，以及闭包的概念和用法。
6. **理解函数的高级概念**：包括箭头函数，回调函数，以及异步编程中的 Promise 和 async/await。
7. **理解变量和函数的命名规则和最佳实践**：学习如何为变量和函数选择有意义的名称，以及遵循驼峰命名法等编程规范。

## 1. 变量

### 1.1 变量的概念和作用

在 JavaScript 中，变量是用来存储数据的容器。你可以把变量想象成一个存储箱，我们可以在其中放入我们想要的数据，并在需要的时候取出来。

### 1.2 数据类型

JavaScript 有七种基本数据类型：

- Number
- String
- Boolean
- Null
- Undefined
- Symbol (ES6 新增)
- BigInt (ES10 新增)

和一种复杂数据类型：

- Object

我们可以使用 `typeof` 操作符来检查一个变量的数据类型，例如：

```
let num = 123;
console.log(typeof num); // 输出 "number"

```

### 1.3 变量的声明和赋值

在 JavaScript 中，我们可以使用 `var`，`let` 或 `const` 关键字来声明变量，例如：

```
var a; // 声明一个变量 a
let b; // 声明一个变量 b
const c = 3; // 声明一个常量 c，并赋值为 3

```

### 1.4 变量的作用域

在 JavaScript 中，变量的作用域决定了哪些代码可以访问这个变量。我们有全局变量和局部变量，以及 ES6 引入的块级作用域。

## 2. 函数

### 2.1 函数的概念和作用

在 JavaScript 中，函数是一组用来执行特定任务的代码块。我们可以在代码的任何地方调用函数，甚至可以在一个函数内部调用另一个函数。

### 2.2 函数的声明和调用

函数可以通过函数声明或函数表达式来定义，例如：

```
// 函数声明
function sayHello() {
  console.log('Hello, world!');
}

// 函数表达式
var sayHello = function() {
  console.log('Hello, world!');
};

```

调用函数很简单，只需要使用函数名后面跟上括号，例如：`sayHello();`

### 2.3 函数的参数和返回值

函数可以接受参数，参数是在函数定义时声明的，作为函数执行时的输入。函数也可以有返回值，作为函数执行的结果。

```
function add(a, b) {
  return a + b;
}

let sum = add(1, 2); // sum 现在是 3

```

### 2.4 函数作用域和闭包

在函数内部声明的变量只在函数内部可见，这就是函数作用域。闭包是 JavaScript 中的一个重要概念，它允许一个函数访问并操作函数外部的变量。

### 2.5 高级函数概念

在 JavaScript 中，我们还有一些高级的函数概念，包括箭头函数，回调函数，以及异步编程中的 Promise 和 async/await。

## 3. 变量和函数的命名规则和最佳实践

在编程中，为变量和函数选择有意义的名称是非常重要的。这不仅可以提高代码的可读性，也可以帮助你和其他开发者更好地理解代码的功能。

在 JavaScript 中，我们通常使用驼峰命名法来命名变量和函数。这意味着所有的单词都连在一起，每个单词的首字母都大写，除了第一个单词。例如：

```
let myVariable = 123;
function myFunction() {
  // ...
}

```

## 示例3：打个招呼

```html
<button onclick="hello()">打个招呼</button>
<script>
  var name = "我的名字";
  function hello() {
     alert(name);
  }
</script>
```

把上面这段代码复制到记事本中，保存为“Javascript-3.html”。

你可以把“我的名字”换成你自己的名字，或者任何一个人名。

在浏览器中打开这个文件，你会看到它产生的效果：

【图片3：示例3的效果】

在这个页面上，当你点击“打个招呼“这个按钮，浏览器弹出的对话框里就会显示你写的名字。

比较一下，这个示例跟上一个示例，有什么不同？

最大的不同是这个示例里多了两个新名词：

- `var`：变量
- `function`：函数

## 示例4：理解变量名和函数名

变量名和函数名只能用英文和数字、下划线来表示。但是很多人一看到英文字就头晕，然后就被吓住了，觉得不能理解了。

其实看变量名和函数名，不要去细抠英文单词的意思，要把这个名字当做一个整体来看。

变量名和函数名可不可以换呢？当然可以！

我们把上一个例子中的变量`name`换成`abc`，这个例子的效果仍然跟以前一样！

```txt
<button onclick="hello()">打个招呼</button>
<script>
  var abc = "我的名字";
  function hello() {
    alert(abc);  
  }
</script>
```

把上面这段代码复制到记事本中，保存为“Javascript-4.html”。

在浏览器中打开这个文件，你会看到它产生的效果：

【图片4：示例4的效果】

新的页面的效果跟上一个例子一模一样！

试试看：你可以把`var abc`中的`abc`换成其他字母，比如`a`、`a2`、`b123`……，看看效果是否还一样。

你会发现：

- 把`var abc`中的`abc`换成`a`、`a2`、`b123`……以后，只要后面`alert(abc)`中的`abc`也被换成同样的字母，那么页面效果就是一样的！
- 但如果忘记换`alert(abc)`中的`abc`，那这个页面就会出错了。

你还可以尝试把`function hello()`中的`hello`换成`xyz`，或者其他的字母，看看页面的效果是否仍然一样。

通过尝试，你会发现：

- 变量名和函数名是可以换的，只要把它所有出现的地方都换成同样的字母，就可以保证跟原来一样的效果了
- 如果一个变量名或者函数名看起来太复杂，你可以把它换成一个更简单、让你觉得更容易的名字。
- 但是有些字母是不能换的，比如`var`、`function`、`alert`，这些是Javascript里面固定的字，不能换，换了以后页面就会出错了。

```txt
【学习方法】学习IT，看到不懂的英文字不要发晕。英文字不过就是变量名或者函数名。用这一节所教的方法，把它替换为其他好懂的字母，比如`abc`，你就可以看懂了。
```

## 页面就是HTML和Javascript的组合

在一个页面上，HTML决定页面的内容和长相，Javascript决定页面的功能和动态效果。

换句话说，HTML提供页面的模板（内容和长相），Javascript提供页面的数据（变量）和对数据的操作（函数）。

模板和变量、函数组合起来，就是有用户界面（UI）的APP。

这一课讲的内容很简单，但是体现了几乎所有页面的基本特点：模板、变量和函数的组合。

不管多么复杂的页面，都是由这几种最基本的功能实现的。在学习的过程中，只要你紧紧抓住这几个关键点 —— 模板、变量和函数，那么任何一个页面你都能理解它背后的结构、理解它是怎么写出来的。

## 案例：计算器

在上一课“HTML”中，我们写了一个计算器的输入界面。但是，这个计算器仅有长相，不能做计算。

在这个案例中，我们把Javascript代码加入上一课所写的计算器中，这个计算器就可以用起来了。

```html
<button onclick="e()">C</button>
<button onclick="d()">=</button>
<input id="c">
<br>
<button onclick="b(1)">1</button>
<button onclick="b(2)">2</button>
<button onclick="b(3)">3</button>
<br>
<button onclick="b(4)">4</button>
<button onclick="b(5)">5</button>
<button onclick="b(6)">6</button>
<br>
<button onclick="b(7)">7</button>
<button onclick="b(8)">8</button>
<button onclick="b(9)">9</button>
<br>
<button onclick="b(0)">0</button>
<button onclick="b('+')">+</button>
<button onclick="b('-')">-</button>
<script>
  var a="";
  function b(x){
    a=a+x;
    document.getElementById("c").value=a;
  }
  function d(){
    a=eval(a).toString();
    document.getElementById("c").value=a;
  }
  function e(){
    a="";
    document.getElementById("c").value=a;
  }
</script>
```

现在这个计算器可以做加减法运算了！它的计算结果会显示在页面上的输入框里。

在这个页面中，我们自己写的变量和函数包括：

- `var a`：存储用户输入的算式或者计算结果
- `function b()`：接收用户点击的数字按钮或者“+”、“-”按钮，存储到`a`里面。
- `function d()`：用户点击“=”按钮之后，把算式`a`的结果计算出来。
- `function e()`：用户点击“C”按钮（清零按钮）之后，把`a`里的内容清除掉。

还有两个函数，是Javascript自己本来就有的函数：

- `eval(a)`：计算算式`a`，得出运算结果。
- `toString()`：把数字转变成字符串。字符串就是一段文字，是专门表示文字的数据类型。
- `document.getElementById("c").value=a`：这一段英文字虽然很长，但是不要懵圈，这段英文字其实只起了一个作用：找到`id`为“c”的输入框，让它的值等于`a`的值。这样，输入框里就会显示出输入的算式或者计算结果了。

## 本课总结

- 本课学习的重要概念：
  - Javascript：变量和函数
- 学习方法
  - 阅读参考手册不要卡住
  - 看到英文字不要懵圈

## 1. 训练学习方法：

1.1 预判。（主动的学习，不能被动的学习。）
1.2 你怎么知道你的程序是对的？你的方法必须是对路的！
- 比如：你怎么知道你的地基是对的？你的图必须经过审核！写程序，搞建筑，都是有章法的！
- 比如：我怎么知道我的查经是对的？——也是有章法（找到作者在说啥）”

1.3 我们现在学的是编程的章法！
- 靠谱的人写的是靠谱的东西！
- 编程最重要的章法是什么？就是变量和函数！

在VueJS里，data里面就是变量，method里面就是函数。

## 2. 变量、数组和对象

数组和对象是Javascript里较为复杂的两类数据类型。

数组用方括号[]表示，对象用花括号{}表示。

变量可以是数组，也可以是对象。

一个数组里可以有好多个元素。数组里面可以有对象，对象里面也可以有数组。

变量自己后面带着一大堆函数。

声明一个变量是字符串，字符串就自带一堆的函数，可以对字符串进行操作。

声明一个变量是数组，数组就自带一堆的函数，可以对数组进行操作。

## 3. 循环语句和事件

循环语句是在模版里使用的。循环语句、条件语句、都是Vue.js 的模版语法。

“事件”就是点击、输入等用户的动作。

## 4. 正确的学习方法：浸泡式学习！

- 每天沉浸在读文档里面，泡透了！
- 每天十分钟，30分钟，没有用，刚预热就凉凉了！

## 5. 怎么读文档？

- 文档里面最重要的，就是尝试一下！改一改，碰一碰！
- 碰到不明白的东西，需要的时候就去学一下！
- learning on demand

## 6. 重复一下重点：

变量后面自己带着一大堆函数；
增删改查vuetify也帮你写好了！
声明了一个变量，放个.，知道后面放啥就行。
写程序，从读人家的程序开始！
学习就是从不知道到知道，从无知到有知；

## 7. 资源

[点击这里下载本课的示范代码。](https://dl.openjianghu.org/training/download-code-it-training-level1-lesson04-2022-02-19.zip "点击这里下载本课的示范代码。")

本课用到的网页资料：

**菜鸟教程：VueJS**

- 教程：https://www.runoob.com/vue2/vue-tutorial.html

**菜鸟教程：Javascript**

- 教程：https://www.runoob.com/js/js-tutorial.html
- 数据类型：https://www.runoob.com/js/js-datatypes.html
- 字符串对象：https://www.runoob.com/jsref/jsref-obj-string.html
- 数组对象：https://www.runoob.com/jsref/jsref-obj-array.html

## 作业

- 阅读Javascript参考手册里的变量和函数这两节，在实例里面尝试一下。
- 阅读Javascript参考手册，理解什么是数据类型，Javascript有哪些数据类型。
- 阅读Javascript参考手册，了解什么是Javascript事件。记录下你不懂的地方，来问老师。