前言
根据视频和PPT整理
JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程
视频对应资源(在视频简介里面)
链接：【https://gitee.com/xiaoqiang001/java-script.git】
视频对应资源(百度网盘)
链接：【https://pan.baidu.com/s/1q952v5mnFGR9IFjHlyn7Wg】
提取码：1234
1. JavaScript 简介
1.1 JavaScript 是什么
JavaScript 是一种运行在客户端的脚本语言 （Script 是脚本的意思）
脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
js 现在也可以基于 Node.js 技术进行服务器端编程
1.2 JavaScript 的作用
- 表单动态校验（密码强度检测） （ JS 产生最初的目的 ）
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
1.3 HTML/CSS/JS 的关系
HTML页面的结构(骨架)，CSS页面的样式(外观)，JavaScript页面的交互(行为)。
1.4 浏览器执行 JS
浏览器分成两部分：渲染引擎和 JS 引擎
- 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的webkit
- JS 引擎：也称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8
浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。
JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。
1.5 JS 的组成
ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
2. JavaScript 的书写位置
注意：
JavaScript 每行结束可以写分号也可以不写分号
JS 有3种书写位置，分别为行内、内嵌和外部。
2.1 行内式 JS
- 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
- 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
- 可读性差， 在html中编写JS大量代码时，不方便阅读；
- 引号易错，引号多层嵌套匹配时，非常容易弄混；
- 特殊情况下使用
<body> <!-- οnclick="alert('Hello JavaScript')" --> <!-- 双引号中的代码为js代码 --> <!-- 避免引号冲突，js代码使用单引号 --> <input type="button" value="按钮" onclick="alert('Hello JavaScript')"> </body>
2.2 内嵌JS
可以将多行JS代码写到 script 标签中
<body> <script> alert('Hello JavaScript') </script> </body>
2.3 外部 JS文件
- 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
- 引用外部 JS文件的 script 标签中间不可以写代码（写了不生效）
- 适合于JS 代码量比较大的情况
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="./03-外部JS.js"></script> </body> </html>
alert('Hello JavaScript!!!!!')
<body> <script src="./03-外部JS.js"> alert('123123') </script> </body>
script 标签中间代码不生效
3. JavaScript 注释
3.1 单行注释
快捷键：ctrl + /
<body> <script> // 单行注释 </script> </body>
3.2 多行注释
快捷键： alt + shift + a
<body> <script> /* 多行注释 多行注释 多行注释 */ </script> </body>
快捷键修改：
vscode => 左下角按钮 => 键盘快捷方式 => 查找 原来的快捷键 => 修改为新的快捷键 => 回车确认
3. JavaScript 输入输出语句
| 方法 | 说明 | 归属 |
| alert(‘弹出警示框要显示的内容’) | 浏览器弹出警示框 | 浏览器 |
| console.log(‘要在控制台打印输出的信息’) | 浏览器控制台打印输出信息 | 浏览器 |
| prompt(‘提示信息’) | 浏览器弹出输入框，用户可以输入 | 浏览器 |
alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。
3.1 alert
<body> <script> alert('弹出警示框要显示的内容') </script> </body>
3.2 console.log
<body> <script> console.log('控制台显示的内容') </script> </body>
打开浏览器的控制台：
- F12
- 鼠标右键 => 检查
- 笔记本电脑 (键盘左下角) Fn => F12
3.3 prompt
<body> <script> prompt('请输入信息') </script> </body>
4. 变量
4.1 什么是变量
变量就是一个存放数据的容器，会在内存中开辟一块空间来存放数据，这个存放数据的空间就是变量。(好比，酒店就是计算机的内存空间，酒店的房间就是一个又一个的变量，住在酒店中的人就是一个又一个的数据)。
由上面的类比我们可以得到，每个变量都有自己的名字(酒店房间号，这样子才可以在内存找到变量中数据)，变量中的数据可以更改(酒店房间内居住的人会变动)。
