day-54前端

javaSript

什么是js：

　　前台脚本编程弱语言，完成页面业务逻辑及页面交互

js作用:

1、可以自己生成页面数据
2、可以请求后台数据
3、可以接受用户数据 - 可以渲染给页面的其他位置；提交给后台
4、修改页面标签的内容、样式、属性、事件(页面通过js可以完成与电脑的输入输出设备的交互)

学习方向：js代码书写位置、js基础语法、js选择器、js页面操作来学习

学习目的：完成页面标签与用户的人机交互以及前台数据处理的业务逻辑

书写位置

1.行间式: 写在标签的事件属性中

2.内联式：写在script标签中，script标签应该出现在body的最下方(可以将其放在body结束后)

dd.onclick = function () {
alert('hello js')
}
</script>

3.外联式：通过script标签的src属性，链接外部js文件

三种输出方式

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

函数的函数名：

　　是使用函数的依据，就是一个变量，可以赋值给其他变量，也可以存储在容器中，也可以作为函数的参数与返回值

函数的参数：

　　都是按位置传（没有关键字传参），形参与实参个数不需要统一，但是一定是按位赋值 (你传你的，我收我的)

通过...语法接收多个值

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)
}

案例：

表单事件

let inp = document.querySelector('input');
let h22 = document.querySelector('h2:nth-of-type(2)');

inp.oninput = function () {　　　　　　　　// onchange当input失去焦点才会触发 oninput 内容改变时触发
　　h22.innerText = this.value;
};