javaSript
什么是js：
前台脚本编程弱语言，完成页面业务逻辑及页面交互
js作用:
1、可以自己生成页面数据
2、可以请求后台数据
3、可以接受用户数据 - 可以渲染给页面的其他位置；提交给后台
4、修改页面标签的 内容、样式、属性、事件(页面通过js可以完成与电脑的输入输出设备的交互)
学习方向：js代码书写位置、js基础语法、js选择器、js页面操作来学习
学习目的：完成页面标签与用户的人机交互以及前台数据处理的业务逻辑
书写位置
1.行间式: 写在标签的 事件属性 中
<div id="dd" onclick="alert('hello js')"></div>
2.内联式：写在script标签中，script标签应该出现在body的最下方(可以将其放在body结束后)
<script>
dd.onclick = function () {
alert('hello js')
}
</script>
3.外联式：通过script标签的src属性，链接外部js文件
<script src="js/js导入.js"> 一个script标签拥有src引入外部js文件后，就相当于单标签，所以内部的代码会被自动屏蔽
</script>
三种输出方式
1. 控制台输出语句
console.log('你丫真帅')
2.弹出框提示信息
alert('你丫确实帅')
3.将内容书写到页面
document.write('<h2 style="color: red">你丫帅掉渣</h2>')
变量与常量
let num = 123; 关键字变量赋值
num++;
const str = '123';
str = '456'; 常量声明时必须赋初值，且一旦赋值，不可改变
数据类型
值类型
1) 数字类型（只有整数）
let a = 123;
console.log(a, typeof(a));
a = 3.14;
console.log(a, typeof(a));
2) 布尔类型
let b = false;
console.log(typeof(b), b);
3) 字符串类型：'' "" ``
let c = `123
456
789`;
console.log(c, typeof(c));
4) 未定义类型：未初始化的变量
let d;
console.log(d, typeof(d));
引用类型
5) 数组（相当于list）：
let arr = [1, 2, 3];
console.log(arr, typeof(arr));
6) 对象（相当于dict）： 所有的key必须是字符串
let sex = '男';
let dic = {
name: 'Owen',
age: 17.5,
sex, value如果是变量，变量名与key同名，可以简写
};
console.log(dic, typeof(dic));
7) 函数类型
function fn() { }
console.log(fn, typeof(fn));
8) null类型
let x = null;
console.log(x, typeof(x));
弱语言类型
let aaa = 123;
let bbb = '123';
console.log(aaa == bbb); == 只做数据比较
console.log(aaa === bbb); === 做数据与类型比较
弱语言类型：会自己根据环境决定如何选择类型存储数据
console.log(1 + 2); // 3
console.log('1' + '2'); // 12
console.log(1 + '2'); // 12
console.log(1 - '2'); // -1
js运算符
算数运算符：
+（加法）、-（减法）、*（乘法）、/（除法，得到浮点型）、%取模(除完没除尽的整数)、++（自增）、--（自减）
js没有整数浮点数之分，所以要想浮点数转整数，通过 res = parseInt(任何数字开头，只拿整数数字);
res=parseFloat(任何数字开头，只拿到浮点型数字);
res = n1++; 先将n1的值赋值给res，自己再自增1
res = ++n1; 先自己自增1, 再将n1的值赋值给res
++在前优先级最高，++在后优先级最低(比赋值符，还低)
赋值运算符：
前提：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 |
比较运算符：
前提：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 |
逻辑运算符：
前提：n=5
| 运算符 | 描述 | 例子 | 结果 |
| ------ | ---- | ------------- | ------------------- |
| && | 与 | x=n>10&&++n | x=false,n=5（短路） |
| || | 或 | x=n<10||n-- | x=true,n=5（短路） |
| ! | 非 | x=!n | x=false,x=5 |
与短路：有一个为假，就短路
或短路：有一个为真，就短路
如果 ! 为真，!!就为假
三目运算符：
条件 ? 结果1 : 结果2（表达式成力取前面，不成立取后面）
res = 10 == '10' ? '相等' : '不等';
console.log(res);
js流程控制
if判断：
if (条件表达式) {
代码块;
}
==================================
if (表达式1) {
代码块1;
} else {
代码块2;
}
==================================
if (表达式1) {
} else if (表达式2) {
}
...
else if (表达式2) {
} else {
}
=================================
if (表达式1) {
if (表达式2) {
}
}
================================
while、for循环：
for (循环变量①; 条件表达式②; 循环变量增量③) {
代码块④;
}
for循环执行的顺序：① ②④③ ... ②④③ ②，入口为①，出口为②，②④③就是循环过程
案例：
for (var i = 0; i < 5; i++) {
console.log(i);
}
==================================
while (条件表达式) {
代码块;
}
================================
do { 代码块;
} while (条件);
先执行代码块，在执行条件
===============================
for…in迭代器：
得到的是索引
var arr = [1, 2, 3, 4, 5]
for (num in arr) {
console.log(num);
}
结果：0,1,2,3,4,
随机数推导过程：
Math.random()的随机数是 [0, 1)
[0, 1) * 11 => [0, 11) parseInt() => [0, 10] + 5 => [5, 15]
[0, 1) * (n - m + 1) => [0, n - m + 1) parseInt() => [0, n - m] + m => [m, n]
公式：parseInt(Math.random() * (max - min + 1)) + min
案例：let num = parseInt(Math.random() * (40 - 10 + 1)) + 10;
console.log(num);
函数
函数的关键字：
function
函数的函数名：
fn
是使用函数的依据，就是一个变量，可以赋值给其他变量，也可以存储在容器中，也可以作为函数的参数与返回值
函数的参数：
都是按位置传（没有关键字传参），形参与实参个数不需要统一，但是一定是按位赋值 (你传你的，我收我的)
通过...语法接收多个值
function fn (a, ...b) { //...变量必须出现在参数列表最后
console.log(a, b) // 100 [200 300]
}
fn(100, 200, 300)
函数的返回值：
function fn () {
return 返回值;
}
1.可以空return操作，用来结束函数
2.返回值可以为任意js类型数据
3.函数最多只能拥有一个返回值，如果多个，取最后一个，所以返回值用[]包裹，返回出来
函数之匿名函数
没有名字的函数就是匿名函数
function () {
}
使用场景：
1.需求需要一个函数地址，就可以传入一个匿名函数
function fn100(fn) {
fn()
}
fn100( function () { console.log('传进去的匿名函数') } )
2.用变量接收匿名函数（第二种声明函数的方式）
let f = function (a, b) {
console.log('ffffffffff')
};
f();
3.为事件提供方法体
hhh.onclick = function () { / hhh是标签id，所以可以直接引用
console.log('hhh 被点击了')
};
4.匿名函数自调用：一次性使用，并且产生了一个局部作用域，里面的属性外面无法访问
(function (a, b) {
console.log('匿名函数自调用:', a, b)
})(10, 20, 30);
四种变量
if (true) { // 块级作用域
let a = 10;
const b = 20;
var c = 30;
d = 40;
}
console.log(a); 有{}就不能被外界访问（推荐使用）
console.log(b); let和const有块级作用域，不允许重复定义
console.log(c); var没有块级作用域, 但有局部作用域，不能被外界访问，可以重复定义
console.log(d); 没有关键字声明的变量是全局变量，在函数内部声明的外部也可以用
数据类型的运用
字符串的运用：
1）定义：
let ss = '123abc呵呵';
2）索引
res = ss[0];
3）切片
res = ss.slice(3, 6);
4）替换
res = ss.replace('abc', 'ABC');
5）拆分: 字符串 => 列表
res = ss.split(''); 按空格/指定的拆
6) 拼接
res = ss + ss;
7) 迭代
for (s of ss) {
console.log(s);
}
数组的运用：
1）拼接
let arr = [3, 1, 2, 4, 5]; 列表转字符串
res = arr.join(''); 默认按，拼/按‘’拼一起/自定义拼
2）迭代
for (a of arr) {
console.log(a);
}
3）排序
arr.sort();
arr.reverse();
查
console.log(arr[4]);
增删改
开始操作的索引 操作的长度 操作后的结果(不定长0~n个)
arr.splice(2, 1, 222); 或者（2,1）删除
字典的运用：
增删改查
dic = {};
增
dic.age = 18;
改
dic.age = 20;
对象的删除
delete dic.age;
查
console.log(dic.name);
字典的迭代用 for in
for (k in dic) {
console.log(k);
}
js选择器
querySelect系列
1.通过id名获取唯一满足条件的页面元素
document.getElementById('id名');
2、通过class名获取所有满足条件的页面元素
document.getElementsByClassName('class名');
返回值是一个类数组结果的对象，使用方式同数组
3.通过tag名获取所有满足条件的页面元素
document.getElementsByTagName('tag名');
返回值是一个类数组结果的对象，使用方式同数组
querySelect系列
1.获取第一个匹配到的页面元素
document.querySelector('css3语法选择器');
2.获取所有匹配到的页面元素
document.querySelectorAll('css3语法选择器');
返回值是一个类数组结果的对象，使用方式同数组
事件的绑定
获取标签样式、内容、属性
let h1 = document.querySelector('h1');
只能获取行间式样式
标签.style.属性名
let fontSize = h1.style.fontSize;
getComputedStyle(ele_name, 伪类选择器通常用null填充) 能获取所有方式的样式(内联与外联叫计算后样式)
let bgColor = getComputedStyle(h1, null).backgroundColor;
获取标签的内容
console.log(h1.innerText);
console.log(h1.innerHTML);
获取标签的属性
console.log(h1.getAttribute('id'));
修改样式、内容、属性
修改样式
可以直接修改样式 - 修改的是行间式
h1.style.color = 'red';
css的 - 链接语法对应 js的 小驼峰命名法
h1.style.borderRadius = '50%';
修改内容
h1.innerText = '修改过后的内容';
h1.innerHTML = '<i>修改过后的内容</i>';
修改属性
h1.setAttribute('owen', 'oooooooooooooooo');
表单内容的查、改
let inp = document.querySelector('input');
console.log(inp.value); 查
inp.value = 67890; 改
// console.log(inp.getAttribute('value'));
// inp.setAttribute('value', '0000000000000');
鼠标事件
onclick、ondblclick、onmouseover、onmouseleave、onmousemove、onmousedown、onmouseup
单击 双击 悬浮 离开悬浮 鼠标在里面移动 鼠标按下 鼠标松开
let h1 = document.querySelector('h1');
h1.onclick = function (ev) {
console.log(ev); // 包含着鼠标的相关信息
console.log(ev.clientX, ev.clientY); // 鼠标点击点
console.log(ev.altKey, ev.ctrlKey, ev.shiftKey); // 特殊按键
};
案例：
h2 = document.querySelector('h2');
h2.onmouseover = function () {
h1.innerText = 'h2被悬浮了';
h1.style.color = 'green';
};
h2.onmouseleave = function () {
h1.innerText = 'h2被放开了';
h1.style.color = 'red';
};
let count = 1;
h2.onmousemove = function () {
++count;
h1.innerText = '鼠标在h2身上游走' + count + '下';
this.innerText = '鼠标在h2身上游走' + count + '下'; 为某个标签绑定事件，去控制页面中任何一个标签（绑定事件中的this就代表自身）
};
键盘事件
只要在窗口下，按下键盘就可以触发
onkeydown、onkeyup、onkeypress
let inp = document.querySelector('input');
inp.onkeydown = function (ev) {
console.log(ev.keyCode)
}
案例：
document.onkeydown = function (ev) {
console.log(ev.keyCode);
if (ev.keyCode == 37) {
console.log('你按了左键');
} else if (ev.keyCode == 38) {
console.log('你按了上键');
}
console.log(ev.altKey);
if (ev.ctrlKey && ev.keyCode == 13) {
console.log('留言');
}
表单事件
let inp = document.querySelector('input');
let h22 = document.querySelector('h2:nth-of-type(2)');
inp.oninput = function () { // onchange当input失去焦点才会触发 oninput 内容改变时触发
h22.innerText = this.value;
};