Javascript入门

学习目标

理解javascript：理解javascript是什么
理解编程语言的基本概念：包括变量、常量、数据类型、操作符、表达式和语句等。
理解控制流：学习如何使用 if 语句、switch 语句进行条件判断，以及如何使用 for 循环、while 循环进行循环操作。
理解函数：理解函数的定义和调用，包括函数参数、返回值，以及匿名函数和箭头函数的概念。
理解对象：理解 JavaScript 中的对象概念，包括对象的创建、属性的访问和修改，以及方法的定义和调用。
理解数组：理解数组的基本概念，包括数组的创建、元素的访问和修改，以及数组的遍历。
理解事件驱动编程：理解 JavaScript 中的事件和事件处理函数，学习如何使用事件进行交互式编程。
理解错误处理：学习如何使用 try-catch 语句进行错误处理，理解错误对象的基本概念。
理解 JavaScript 的异步编程：理解 JavaScript 的事件循环、回调函数、Promise 和 async/await 等异步编程概念。

1. 什么是JavaScript

JavaScript 是一种高级的、解释型的编程语言，主要应用于网页交互。JavaScript 是一种动态类型语言，支持面向对象、命令式和声明式（如函数式编程）风格。

有了JavaScript代码以后，当你点击网页或者在网页上输入内容时，网页就会根据你的操作实现你想要的效果了。

2. 编程语言的基本概念

2.1 变量和常量

在 JavaScript 中，我们使用 let 关键字声明变量，使用 const 关键字声明常量。变量的值可以改变，而常量的值不能改变。

let x = 10;
const y = 20;

2.2 数据类型

JavaScript 有七种数据类型：六种原始类型（Boolean、Null、Undefined、Number、String、Symbol）和 Object 类型。

2.3 操作符

JavaScript 提供了多种操作符，如赋值操作符（=）、算术操作符（+、-、*、/、%）、比较操作符（、!=、=、!==、>、<、>=、<=）等。

2.4 表达式和语句

表达式是一段可以计算出值的代码。语句则是执行某种操作的指令。

3. 控制流

3.1 条件语句

if 和 switch 是 JavaScript 中进行条件判断的语句。

if (x > y) {
    console.log('x is greater than y');
} else {
    console.log('x is not greater than y');
}
switch (x) {
    case 10:
        console.log('x is 10');
        break;
    default:
        console.log('x is not 10');
}

3.2 循环语句

for 和 while 是 JavaScript 中进行循环操作的语句。

for (let i = 0; i < 10; i++) {
    console.log(i);
}
let i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

4. 函数

函数是一段可以被重复调用的代码块。我们可以通过 function 关键字定义函数，通过函数名后跟括号（）调用函数。

function greet(name) {
    console.log('Hello, ' + name);
}
greet('Alice');

在 JavaScript 中，我们还可以使用匿名函数和箭头函数。

5. 对象

对象是 JavaScript 的数据类型之一，是一种复合类型，可以包含多个属性和方法。

let person = {
    name: 'Alice',
    age: 20,
    greet: function() {
        console.log('Hello, ' + this.name);
    }
};
person.greet();

6. 数组

数组是一种特殊的对象，用于存储多个值。我们可以通过索引访问数组的元素，通过 length 属性获取数组的长度，通过 push 和 pop 方法添加和删除元素。

let array = [1, 2, 3];
console.log(array.length); // 3
array.push(4);
console.log(array); // [1, 2, 3, 4]

7. 事件驱动编程

在 JavaScript 中，我们可以通过监听和处理事件来进行交互式编程。常见的事件有点击事件（click）、加载事件（load）、键盘事件（keydown、keyup）等。

document.getElementById('myButton').addEventListener('click', function() {
    console.log('Button clicked');
});

8. 错误处理

我们可以使用 try-catch 语句进行错误处理。

try {
    let x = y; // y is not defined
} catch (error) {
    console.log(error.message);
}

9. 异步编程

JavaScript 是单线程的，但它可以通过事件循环、回调函数、Promise 和 async/await 进行异步编程。

setTimeout(function() {
    console.log('Hello, world');
}, 1000);

示例1：简单到不能再简单的Javascript入门

让我们来看一个简单的JavaScript示例：

<script>
  alert("这是一个弹出对话框！");
</script>

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

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

【图片1：浏览器里的效果】

这个代码中，你需要了解的是：

<script>标签：这个标签表示它围住的内容是一段Javascript代码
alert("这是一个弹出对话框！");：这行代码会在浏览器中弹出一个对话框，显示了一句话："这是一个弹出对话框！"。

看到alert这个英文单词，不要被它吓住。学习IT不是背英文单词，只要你知道它可以实现的效果，就够了。

本来是普通的文字，但是写成这样以后，就可以让网页实现你想要的效果。

这就是Javascript的用途：让你的页面按照你的指令动起来。

比较一下，Javascript和上节课中的HTML有什么不同？

HTML决定了页面上文字、图片等内容显示出来的格式与布局
Javascript本身的内容不会直接显示在网页上，但它可以实现网页的动态效果。

示例2：把Javascript代码和HTML结合起来

<button onclick="alert('Hello!')">点击我</button>

尝试一下

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

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

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

现在页面上显示了一个按钮“点我”，当你点击这个按钮，浏览器里就会弹出一个对话框，显示了一句话："这是一个弹出对话框！"。

这跟上一个示例有什么不同？

这个例子中多了一个用HTML写的按钮：<button>点我</button>
这个例子中的Javascript代码alert('这是一个弹出对话框！')是写在<button>的onclick属性里的。
onclick表示当你点击这个按钮之后，接下来要做的事情。在这个例子中，就是弹出一个对话框。

我们知道了：

Javascript可以HTML结合起来，共同实现这个页面的功能
HTML决定页面上会显示什么内容、每个内容会长成什么样
Javascript决定了页面上的功能，在你点击页面的时候会发生什么事

本课总结

1. javascript是干什么的呢？

是操控HTML页面的。
操控，就是把html里面的字读出来，或者把别的地方传来的信息显示出来！

例子：淘宝，百度页面，都是html页面。
原理：你点击搜索，就是javascript把你输入的东西传到了百度的服务器，然后抓了大一堆的东西传了回来！

Javascript就是把数据传来传去。

2. 看文档的方法：用到啥就看啥！

我们的教学方法：我们在课堂上学习的是学习方法，而不是单学内容。

“上课”不等于“学习！”

3. 程序员必备技能

找一个东西，复制一下，粘贴一下，修改一下！（效法和传承就是复制粘贴）
程序员就是库的搬运工！

4. 正确的学习方法

学习的过程都是从不知道到知道！（混个脸熟！）
你如果脑子里光想着不知道的东西，那么你没有办法学习。（着眼于你会的）
先弄清楚概念，如果概念不清就去操作，就是糊涂虫。(不管做啥，概念不清全完蛋！)

5. 编程：就是变量+函数。

定义一个变量：var XXX，变量代表它里面的值。变量里面的值是可以变的。
函数：用function来表示，用来对变量进行操作。

比如：变量像Word文档里面保存的文字，函数就是对word文档里的文字进行操控。

数据就是变量，变量就是数据。

在网页里面，凡是在页面上点一下的操作都是函数；显示出来的都是数据。

6. 数据的操作：

数据包括四种基本操作：增，删，改，查。英文简称叫做CRUD。所有的数据类型都可以进行增删改查这四种基本操作。

所有的程序是变量和函数组成的。

变量就是数据，函数就是算法；把这两件事整明白就是编程。

7. 作业

对vuetify的文档混个脸熟，浏览UI组件，练习复制和粘贴！

8. 资源

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

本课用到的网页资料：

菜鸟教程：

HTML标签按钮：https://www.runoob.com/tags/tag-button.html
HTML标签输入框：https://www.runoob.com/tags/tag-input.html
Javascript 变量：https://www.runoob.com/js/js-variables.html
Javascript 函数：https://www.runoob.com/js/js-function-definition.html

Vuetify：

安装 - CDN：https://vuetifyjs.com/zh-Hans/getting-started/installation/#cdn-768475286cd5
数据表格 - 基本：https://vuetifyjs.com/zh-Hans/components/data-tables/
数据表格 - CRUD操作：https://vuetifyjs.com/zh-Hans/components/data-tables/#crud-64cd4f5c

## 学习目标

1. **理解javascript**：理解javascript是什么
2. **理解编程语言的基本概念**：包括变量、常量、数据类型、操作符、表达式和语句等。
3. **理解控制流**：学习如何使用 if 语句、switch 语句进行条件判断，以及如何使用 for 循环、while 循环进行循环操作。
4. **理解函数**：理解函数的定义和调用，包括函数参数、返回值，以及匿名函数和箭头函数的概念。
5. **理解对象**：理解 JavaScript 中的对象概念，包括对象的创建、属性的访问和修改，以及方法的定义和调用。
6. **理解数组**：理解数组的基本概念，包括数组的创建、元素的访问和修改，以及数组的遍历。
7. **理解事件驱动编程**：理解 JavaScript 中的事件和事件处理函数，学习如何使用事件进行交互式编程。
8. **理解错误处理**：学习如何使用 try-catch 语句进行错误处理，理解错误对象的基本概念。
9. **理解 JavaScript 的异步编程**：理解 JavaScript 的事件循环、回调函数、Promise 和 async/await 等异步编程概念。

## 1. 什么是JavaScript

JavaScript 是一种高级的、解释型的编程语言，主要应用于网页交互。JavaScript 是一种动态类型语言，支持面向对象、命令式和声明式（如函数式编程）风格。

有了JavaScript代码以后，当你点击网页或者在网页上输入内容时，网页就会根据你的操作实现你想要的效果了。

## 2. 编程语言的基本概念

### 2.1 变量和常量

在 JavaScript 中，我们使用 `let` 关键字声明变量，使用 `const` 关键字声明常量。变量的值可以改变，而常量的值不能改变。

```
let x = 10;
const y = 20;

```

### 2.2 数据类型

JavaScript 有七种数据类型：六种原始类型（Boolean、Null、Undefined、Number、String、Symbol）和 Object 类型。

### 2.3 操作符

JavaScript 提供了多种操作符，如赋值操作符（=）、算术操作符（+、-、*、/、%）、比较操作符（==、!=、===、!==、>、<、>=、<=）等。

### 2.4 表达式和语句

表达式是一段可以计算出值的代码。语句则是执行某种操作的指令。

## 3. 控制流

### 3.1 条件语句

`if` 和 `switch` 是 JavaScript 中进行条件判断的语句。

```
if (x > y) {
    console.log('x is greater than y');
} else {
    console.log('x is not greater than y');
}

switch (x) {
    case 10:
        console.log('x is 10');
        break;
    default:
        console.log('x is not 10');
}

```

### 3.2 循环语句

`for` 和 `while` 是 JavaScript 中进行循环操作的语句。

```
for (let i = 0; i < 10; i++) {
    console.log(i);
}

let i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

```

## 4. 函数

函数是一段可以被重复调用的代码块。我们可以通过 `function` 关键字定义函数，通过函数名后跟括号（）调用函数。

```
function greet(name) {
    console.log('Hello, ' + name);
}

greet('Alice');

```

在 JavaScript 中，我们还可以使用匿名函数和箭头函数。

## 5. 对象

对象是 JavaScript 的数据类型之一，是一种复合类型，可以包含多个属性和方法。

```
let person = {
    name: 'Alice',
    age: 20,
    greet: function() {
        console.log('Hello, ' + this.name);
    }
};

person.greet();

```

## 6. 数组

数组是一种特殊的对象，用于存储多个值。我们可以通过索引访问数组的元素，通过 `length` 属性获取数组的长度，通过 `push` 和 `pop` 方法添加和删除元素。

```
let array = [1, 2, 3];
console.log(array.length); // 3
array.push(4);
console.log(array); // [1, 2, 3, 4]

```

## 7. 事件驱动编程

在 JavaScript 中，我们可以通过监听和处理事件来进行交互式编程。常见的事件有点击事件（click）、加载事件（load）、键盘事件（keydown、keyup）等。

```
document.getElementById('myButton').addEventListener('click', function() {
    console.log('Button clicked');
});

```

## 8. 错误处理

我们可以使用 `try-catch` 语句进行错误处理。

```
try {
    let x = y; // y is not defined
} catch (error) {
    console.log(error.message);
}

```

## 9. 异步编程

JavaScript 是单线程的，但它可以通过事件循环、回调函数、Promise 和 async/await 进行异步编程。

```
setTimeout(function() {
    console.log('Hello, world');
}, 1000);

```

## 示例1： 简单到不能再简单的Javascript入门

让我们来看一个简单的JavaScript示例：

```
<script>
  alert("这是一个弹出对话框！");
</script>
```

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

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

【图片1：浏览器里的效果】

这个代码中，你需要了解的是：

- `<script>`标签：这个标签表示它围住的内容是一段Javascript代码
- `alert("这是一个弹出对话框！");`：这行代码会在浏览器中弹出一个对话框，显示了一句话："这是一个弹出对话框！"。

看到`alert`这个英文单词，不要被它吓住。学习IT不是背英文单词，只要你知道它可以实现的效果，就够了。

本来是普通的文字，但是写成这样以后，就可以让网页实现你想要的效果。

这就是Javascript的用途：让你的页面按照你的指令动起来。

比较一下，Javascript和上节课中的HTML有什么不同？

- HTML决定了页面上文字、图片等内容显示出来的格式与布局
- Javascript本身的内容不会直接显示在网页上，但它可以实现网页的动态效果。

## 示例2：把Javascript代码和HTML结合起来

[jh-code-view title="事件" id="C20000"/]

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

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

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

现在页面上显示了一个按钮“点我”，当你点击这个按钮，浏览器里就会弹出一个对话框，显示了一句话："这是一个弹出对话框！"。

这跟上一个示例有什么不同？

- 这个例子中多了一个用HTML写的按钮：`<button>点我</button>`
- 这个例子中的Javascript代码`alert('这是一个弹出对话框！')`是写在`<button>`的`onclick`属性里的。
- `onclick`表示当你点击这个按钮之后，接下来要做的事情。在这个例子中，就是弹出一个对话框。

我们知道了：

- Javascript可以HTML结合起来，共同实现这个页面的功能
- HTML决定页面上会显示什么内容、每个内容会长成什么样
- Javascript决定了页面上的功能，在你点击页面的时候会发生什么事

## 本课总结

## 1. javascript是干什么的呢？

- 是操控HTML页面的。
- 操控，就是把html里面的字读出来，或者把别的地方传来的信息显示出来！

例子：淘宝，百度页面，都是html页面。
原理：你点击搜索，就是javascript把你输入的东西传到了百度的服务器，然后抓了大一堆的东西传了回来！

Javascript就是把数据传来传去。

## 2. 看文档的方法：用到啥就看啥！

我们的教学方法：我们在课堂上学习的是学习方法，而不是单学内容。

“上课”不等于“学习！”

## 3. 程序员必备技能

- 找一个东西，复制一下，粘贴一下，修改一下！（效法和传承就是复制粘贴）
- 程序员就是库的搬运工！

## 4. 正确的学习方法

- 学习的过程都是从不知道到知道！（混个脸熟！）
- 你如果脑子里光想着不知道的东西，那么你没有办法学习。（着眼于你会的）
- 先弄清楚概念，如果概念不清就去操作，就是糊涂虫。(不管做啥，概念不清全完蛋！)

## 5. 编程：就是变量+函数。

- 定义一个变量：var XXX，变量代表它里面的值。变量里面的值是可以变的。
- 函数：用function来表示，用来对变量进行操作。

比如：变量像Word文档里面保存的文字，函数就是对word文档里的文字进行操控。

数据就是变量，变量就是数据。

在网页里面，凡是在页面上点一下的操作都是函数；显示出来的都是数据。

## 6. 数据的操作：

数据包括四种基本操作：增，删，改，查。英文简称叫做CRUD。所有的数据类型都可以进行增删改查这四种基本操作。

所有的程序是变量和函数组成的。

变量就是数据 ，函数就是算法；把这两件事整明白就是编程。

## 7. 作业

对vuetify的文档混个脸熟，浏览UI组件，练习复制和粘贴！

## 8. 资源

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

本课用到的网页资料：

**菜鸟教程：**

- HTML标签 按钮 ：https://www.runoob.com/tags/tag-button.html
- HTML标签 输入框 ：https://www.runoob.com/tags/tag-input.html
- Javascript 变量：https://www.runoob.com/js/js-variables.html
- Javascript 函数：https://www.runoob.com/js/js-function-definition.html

**Vuetify：**

- 安装 - CDN：https://vuetifyjs.com/zh-Hans/getting-started/installation/#cdn-768475286cd5
- 数据表格 - 基本：https://vuetifyjs.com/zh-Hans/components/data-tables/
- 数据表格 - CRUD操作：https://vuetifyjs.com/zh-Hans/components/data-tables/#crud-64cd4f5c

Javascript入门

学习目标

1. 什么是JavaScript

2. 编程语言的基本概念

2.1 变量和常量

2.2 数据类型

2.3 操作符

2.4 表达式和语句

3. 控制流

3.1 条件语句

3.2 循环语句

4. 函数

5. 对象

6. 数组

7. 事件驱动编程

8. 错误处理

9. 异步编程

示例1： 简单到不能再简单的Javascript入门

示例2：把Javascript代码和HTML结合起来

本课总结

1. javascript是干什么的呢？

2. 看文档的方法：用到啥就看啥！

3. 程序员必备技能

4. 正确的学习方法

5. 编程：就是变量+函数。

6. 数据的操作：

7. 作业

8. 资源

示例1：简单到不能再简单的Javascript入门