JS基础
一、JavaScript语言介绍
1、概念
- 浏览器脚本语言
- 可以编写运行在浏览器上的代码程序
- 属于解释型、弱语言类型编程语言
2、组成
- ES语法：ECMAScript、主要版本ES5和ES6
- DOM：文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展标志语言的标准编程接口。
- BOM：浏览器对象模型（Browser Object Model），提供了独立与内容的、可以与浏览器窗口进行互动的对象结构；且有多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
二、3种存在位置
1、行间式：存在于行间事件中
- ① 行间式代码块书写在一个个事件名全局属性中，没有script这样的一个全局属性
- ② 在某一个标签的某一个时间属性值中，出现的this代表该标签
- ③ 该标签对象this可以访问该标签的任意全局属性（eg：style），然后再间接访问具体需要操作的对象（eg：style.color）
<div id="body" onmouseover="this.style.color = 'red'" onmouseleave="this.style,color = 'blue'">这是一个拥有行间式js的divdiv>
2、内联式：存在于页面script标签中
- ① 可以通过标签的 id(唯一标识),在 js代码块 中访问到该标签(js的选择器)
- ② js代码块中语法采用的是小驼峰命名法,属性的值都是用字符串形式赋值
- ③ 在js任意地方，均有this对象，this对象不指向任意标签时，指向的是window对象
<body id="body">
<script type="text/javascript">
body.style.backgroundColor = 'pink';
script>
body>
内联式js出现的位置
1. 依赖性js库 ====> 出现在head的最后
2. 功能性js脚本 ====> 出现在body标签后面，body和html之间的位置
3、外联式
- ① 通过script标签的src属性链接外部js文件
- ② 使用外联的script（拥有src属性）标签，会屏蔽掉标签内部的js代码块
- ③ js属于解释性语言,所有加载顺序会影响执行结果 ==> 内联式的 script 标签出现的位置
<script src="js/01.js">script>
body.style.fontSize = "50px";
三、JS语法规范
1. 注释
2. 语法
① 以分号(;)标识语句的结束
② 以作用域({})标识附属关系
③ 定义变量
声明关键词 变量名 = 变量值
四、变量的定义
1、ES5定义变量
var num = 10;
num = 10；
console.log(num);
2、ES6定义变量
let num = 10;
const NUM = 10;
3、变量（标识符）的命名规范
- 有字母，数字，_ ，$组成，不能以数字开头（可以包含中文字符）
- 区分大小写
- 不能出现关键字及保留字
- 提倡什么属性规范: 小驼峰, 支持_连接语法
|
|
|
|
|
| abstract |
arguments |
boolean |
break |
byte |
| case |
catch |
char |
class* |
const |
| continue |
debugger |
default |
delete |
do |
| double |
else |
enum* |
eval |
export* |
| extends* |
false |
final |
finally |
float |
| for |
function |
goto |
if |
implements |
| import* |
in |
instanceof |
int |
interface |
| let |
long |
native |
new |
null |
| package |
private |
protected |
public |
return |
| short |
static |
super* |
switch |
synchronized |
| this |
throw |
throws |
transient |
true |
| try |
typeof |
var |
void |
volatile |
| while |
with |
yield |
|
|
五、三种弹出框
alert("")
var info = prompt("请输入内容：")
var res = confirm("")
六、四种调试方式
- alert()
- Console.log()
- Document.write()
- debug断点 | 浏览器断点调试
七、数据类型
1、值类型
var a = 10;
console.log(a, typeof a);
console.log(typeof a == "number");
var a = '10';
console.log(a, typeof a)
console.log(typeof a == 'string')
var a = true;
console.log(a, typeof a)
console.log(typeof a == "boolean")
var a = undefined;
console.log(a, typeof a)
console.log(typeof a == 'undefined')
console.log(a == undefined)
2、引用类型
var a = function(){};
console.log(a, typeof a)
console.log(typeof a == 'function')
var a = {};
console.log(a, typeof a)
console.log(typeof a == 'object')
console.log(a instanceof Object)
3、具体的对象类型
var a = null;
console.log(a, typeof a)
console.log(typeof a == 'object')
console.log(a == null)
var a = new Array(1, 2, 3, 4, 5);
console.log(a, typeof a)
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof Array)
var a = new Date();
console.log(a, typeof a)
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof Date)
var a = new RegExp();
console.log(a, typeof a)
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof RegExp)
4、类型转换
var a = 10 or true
String(a)
a.toString()
var a = true or '10'
Number(a)
+ a
parseFloat()
parseInt()
var a = 10 or '10'
Boolean(a)
5 + null
"5" + null
"5" + 1
+"5" + 1
"5" - 1
八. 运算符
1. 算数运算符
前提：n = 5
| 运算符 |
描述 |
例子 |
x结果 |
n结果 |
| + |
加法 |
x=n+2 |
7 |
5 |
| - |
减法 |
x=n-2 |
3 |
5 |
| * |
乘法 |
x=n*2 |
10 |
5 |
| / |
除法 |
x=n/2 |
2.5 |
5 |
| % |
取模(余数) |
x=n/2 |
1 |
5 |
| ++ |
自增 |
x=++n |
6 |
6 |
| x=n++ |
5 |
6 |
| -- |
自减 |
x=--n |
4 |
4 |
| x=n-- |
5 |
4 |
2、赋值运算符
前提：x=5，y=5
| 运算符 |
例子 |
等同于 |
运算结果 |
| = |
x=y |
|
5 |
| += |
x+=y |
x=x+y |
10 |
| -= |
x-=y |
x=x-y |
0 |
| *= |
x*=y |
x=x*y |
25 |
| /= |
x/=y |
x=x/y |
1 |
| %= |
x%=y |
x=x%y |
0 |
3、比较运算符
前提：x=5
| 运算符 |
描述 |
比较 |
结果 |
| == |
等于 |
x==“5” |
true |
| === |
绝对等于 |
x===“5” |
false |
| != |
不等于 |
x!=“5” |
fales |
| !== |
不绝对等于 |
x!==“5” |
true |
| > |
大于 |
x>5 |
false |
| < |
小于 |
x<5 |
false |
| >= |
大于等于 |
x>=5 |
true |
| <= |
小于等于 |
x<=5 |
true |
4、逻辑运算符
前提：n=5
| 运算符 |
描述 |
例子 |
结果 |
| && |
与 |
x=n>10&&++n |
x=false,n=5（短路） |
| || |
或 |
x=n<10||n– |
x=true,n=5（短路） |
| ! |
非 |
x=!n |
x=false,x=5 |
5. 三目运算符
var a = 10, b = 20;
var res = a < b ? a : b;
console.log(res);
res = a < b ? b : a;
console.log(res);
a < b ? console.log("表达式结果为true") : console.log("表达式结果为false")
6. ES6语法结构赋值
let [a, b, c] = [1, 2, 3];
let [a, ...b] = [1, 2, 3];
let {key: a} = {key: 10}
let [a,b,c] = 'xyz'
