二、JavaScript基本介绍

## JavaScript介绍
### 一、JS是什么？
#### 1.JavaScript
是一种运行在客户端(浏览器)的编程语言，实现人机交互。
区别于html和css是标记语言
#### 2.JavaScript作用
1. 网页特效（监听用户行为让网页做出反馈）
2. 表单验证（验证邮箱密码等合法性（验证表单数据））
3. 数据交互（获取后台数据，渲染到前端页面）
4. **服务端编程(node.js)**
#### 3.JavaScript组成
```mindmap
# JavaScript
- ECMAScript(语言语法基础)
- Web APIs
    - DOM(页面文档对象)
    - BOM(浏览器对象)
```

**ECMAScript：**
规定了js基础语法。
变量、分支语句、循环语句、对象等

**Web APIs：**
DOM 操作文档（页面元素移动、大小、添加删除等）
BOM 操作浏览器（页面弹窗、检测窗口宽度高度、存储数据到浏览器等）

[JavaScript学习百科权威站点](https://developer.mozilla.org/zh-CN/)
### 二、JavaScript 书写位置
**CSS书写位置**
```mindmap
  # CSS 的书写位置
- 行内样式表
- 内部样式表
- 外部样式表
```
**CSS书写位置**与CSS样式一模一样
```mindmap
  # JavaScript 的书写位置
- 行内js
- 内部js
- 外部js
```
**1. 内部javascript**

直接写在html文件里，用script标签包住
==规范：==script标签要写在 `</body>` 上面

```html
<body>
<script>
...
</script>
</body>
```

>w **注意事项**
>
> 尽量将`<script>`代码放在 html 文件底部附近，因为浏览器按照html文件代码顺序加载，如果放在上面，可能js要操作的元素并没有加载导致报错

**2. 外部javascript**
代码保存在以.js后缀名的文件里
==语法：==通过script标签，引入到html页面中。
例：

```html
<body>

<script src="./test.js"></script>
</body>
```
>w **注意事项**
>
> 外部引入js时，`<script>`和`</script>`中间代码会被忽略，不执行！

**3. 内联javascript**
代码写在标签内部，vue框架会用到这种结构
例：

```html
<body>
    <button onclick="*lert('测试信息')">测试js</button>
</body>
```

>i **原教程地址**
>
> [https://www.bilibili.com/video/BV1Y84y1L7Nn?spm_id_from=333.788.videopod.episodes&vd_source=c100ab2751a833d9f3b692cfcc425669&p](https://www.bilibili.com/video/BV1Y84y1L7Nn?spm_id_from=333.788.videopod.episodes&vd_source=c100ab2751a833d9f3b692cfcc425669&p)