Day54 js流程控制函数数据类型运用页面交互鼠标键盘事件

一运算符

let n1 = 5;
let n2 = 2;
let res = n1 / n2;
console.log(res); # 2.5

es = parseInt(res);
console.log(res); # 2

console.log(parseInt('12abc')); # 12
console.log(parseInt('12.5abc')); #12
console.log(parseFloat('12.5.1abc888')); #12.5
注意：parseInt(a)取a的整数部分，parseFloat(a)取a得小数；a必须以数字开头
2.// ++在前优先级最高，++在后优先级最低(比赋值符=还低)
// res = n1++; // 先将n1的值赋值给res，自己再自增1
// res = ++n1; // 先自己自增1, 再将n1的值赋值给res
3.逻辑运算符

4.三元运算符
// 条件 ? 结果1 : 结果2
res = 10 == '10' ? '相等' : '不等';
console.log(res);

二流程控制

1.随机整数（取值范围闭区间）

公式：parseInt(Math.random() * (max - min + 1)) + min

let num = parseInt(Math.random() * (40 - 10 + 1)) + 10;
console.log(num);

2.if分支结构

if (条件表达式) {
代码块;
}
// 1. 当条件表达式结果为true，会执行代码块；反之不执行
// 2. 条件表达式可以为普通表达式
// 3. 0、undefined、null、""、NaN为假，其他均为真

if (num >= 30) {
    console.log('数字超过30');
} else if (num >= 20) {
 console.log('数字超过20');
} else {
 console.log('数字超过10');
}

3.for循环

for (循环变量①; 条件表达式②; 循环变量增量③) {
代码块④;
}
// for循环执行的顺序：① ②④③ ... ②④③ ②，入口为①，出口为②，②④③就是循环过程

// 案例：
for (var i = 0; i < 5; i++) {
console.log(i);
}

// 结果：
0
1
2
3
4

4.while循环

while (条件表达式) {
    代码块;
}
// 条件满足执行代码块，条件不满足跳出循环

// 案例：
var i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

// 结果：
0
1
2
3
4

5.do 循环（首先先执行代码块，在判断条件是否跳出和执行）

do {

} while (条件);
`;

count = 0;
do {
 console.log('循环体一定会执行');
 count++;
} while (count < 3);

三函数和匿名函数

1.函数的定义：

函数的定义
function 函数名(参数列表) {
    函数体;
    return 返回值
}

2.注意：

function：定义函数的关键字
函数名：使用函数的依据，就是一个变量，可以赋值给其他变量，也可以存储在容器中，也可以作为函数的参数与返回值
参数列表：都是按位置传，形参与实参个数不需要统一，但是一定是按位赋值 (你传你的，我收我的)
函数体：完成功能的主体代码
返回值：只能返回一个值

3.例

function fn() {
    console.log('fn run');
    return [1, 2]
}
let res = fn();
console.log(res);
let func = fn;
func();

4.匿名函数（就是定义时不加函数名）

function () {
    // 没有名字的函数就是匿名函数
}
`;
// 需求需要一个函数地址，就可以传入一个匿名函数
function fn100(fn) {
 fn()
}
fn100( function () { console.log('传进去的匿名函数') } )

// 用变量接收匿名函数：第二种声明函数的方式
let f = function (a, b) {
 console.log('ffffffffff')
};
f();

// 为事件提供方法体
hhh.onclick = function () {
 console.log('hhh 被点击了')
};

// 匿名函数自调用：一次性使用
(function (a, b) {
 console.log('匿名函数自调用:', a, b)
})(10, 20, 30);

let abc = 10;

hhh.onclick = function () {
 console.log(abc);
};

四四种变量

// if (true) {  // 块级作用域
//     let a = 10;
//     const b = 20;
//     var c = 30;
//     d = 40;
// }
{
 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呵呵';
let res;
console.log(ss);
// 2）索引
res = ss[0];
console.log(res);
// 3）切片
res = ss.slice(3, 6);
console.log(res);
// 4）替换
res = ss.replace('abc', 'ABC');
console.log(res);
// 5）拆分: string => array
res = ss.split('');
console.log(res);
// 6) 拼接
res = ss + ss;
console.log(res);
// 7) 迭代
for (s of ss) {
 console.log(s);
}

// 数组
// array => string
let arr = [3, 1, 2, 4, 5];
res = arr.join(''); // 默认, | '' | '自定义符合'
console.log(res);
// 迭代
for (a of arr) {
 console.log(a);
}
// 排序
// arr.sort();
// arr.reverse();
// console.log(arr);

// 增删改查
console.log(arr[4]);
arr[4] = 555;
console.log(arr[4]);

arr.push(100); // 尾增
arr.unshift(200); // 头增
console.log(arr);

arr.pop(); // 尾删
arr.shift(); // 头增
console.log(arr);

// 重点：增删改
console.log(arr);
// 开始操作的索引 操作的长度 操作后的结果(不定长0~n个)
arr.splice(2, 1, 222, 333, 444);
console.log(arr);
注意：当操作长度为0，时其他位置有值时为添加值；当前2个位置有值时为删除某值

// 不定长参数
function f(...a) {
 console.log(a)
}
f(1, 2, 3, 4, 5, 6)


// 字典
// 增删改查
dic = {};
// 增
dic['name'] = 'owen';
dic.age = 18;
// 改
dic.age = 20;
// 对象的删除
delete dic.age;
console.log(dic);
// 查
console.log(dic.name);

// 字典的迭代用 for in
for (k in dic) {
 console.log(k);
}

六 JS页面交互（重点）

1.getElement系列

// 1.通过id名获取唯一满足条件的页面元素
document.getElementById('id名');
// 该方法只能由document调用

// 2、通过class名获取所有满足条件的页面元素
document.getElementsByClassName('class名');
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空HTMLCollection对象 ([])

// 3.通过tag名获取所有满足条件的页面元素
document.getElementsByTagName('tag名');
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空HTMLCollection对象 ([])

例：

let h1 = document.getElementById('hhh');
console.log(h1);
console.log(hhh);  // id是标签的唯一标识，所以js通过id名可以直接拿到标签
// let h2s = document.getElementsByClassName('hh2');
let h2s = document.getElementsByTagName('h2');
console.log(h2s);
console.log(h2s[0]);

注意：获取多个标签时是一个列表

2. querySelect系列（推荐使用）

// 1.获取第一个匹配到的页面元素
document.querySelector('css3语法选择器');
// 该方法可以由document及任意页面对象调用

// 2.获取所有匹配到的页面元素
document.querySelectorAll('css3语法选择器');
// 该方法可以由document及任意页面对象调用
// 返回值为NodeList (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空NodeList对象 ([])

例：

<body>
    <div id="box" class="box"></div>
    <script>
       var box1 = document.getElementById('box');
        var box2 = document.querySelector('.box');
        // box1 === box2，就代表页面id为box，class为box的div标签
    </script>
</body>

3.获取样式内容属性

例：

// 1）找目标标签
let h1 = document.querySelector('h1');

// 2）获取样式、内容、属性
let fontSize = h1.style.fontSize;
console.log(fontSize);

3.注意： 标签.style.属性名 只能获取行间式
 该方法可以解决以上问题：
 getComputedStyle(ele_name, 伪类选择器通常用null填充) 能获取所有方式的样式(内联与外联叫计算后样式)
 let bgColor = getComputedStyle(h1, null).backgroundColor;
 console.log(bgColor);
4.
console.log(h1.innerText); #获取标签的内容
console.log(h1.innerHTML); #获取标签的内部所有内容包括嵌套标签

console.log(h1.getAttribute('id')); #获取id属性的值
console.log(h1.getAttribute('owen')); #获取owen属性的值
5.
 修改样式、内容、属性
 h1.style.color = 'red'; // js可以直接修改样式 - 修改的是行间式
 h1.style.borderRadius = '50%'; // css的 - 链接语法对应 js的 小驼峰命名法

 h1.innerText = '修改过后的内容';
 h1.innerHTML = '<i>修改过后的内容</i>';

 h1.setAttribute('owen', 'oooooooooooooooo');

 let img = document.querySelector('img');
 img.setAttribute('src', 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=255676174,1347478056&fm=26&gp=0.jpg')

鼠标事件

onclick：鼠标点击
ondblclick：鼠标双击
onmousedown：鼠标按下
onmousemove：鼠标移动
onmouseup：鼠标抬起
onmouseover：鼠标悬浮
onmouseout：鼠标移开
oncontextmenu：鼠标右键

2.例：
<body>
    <div class="box">绑定点击事件后可以完成点击交互</div>
    <script>
       var box = document.querySelector('.box');
       // 页面class为box的div被鼠标点击后会有弹出框
       box.onclick = function() {
           alert("box标签被点击了")
       }
    </script>
</body>

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就代表自身）

键盘事件

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');
// inp.onkeydown = function (ev) {
// console.log(ev.keyCode)
// }

表单事件

let inp = document.querySelector('input');
let h22 = document.querySelector('h2:nth-of-type(2)');
// onchange当input失去焦点才会触发 oninput 内容改变时触发
inp.oninput = function () {
 h22.innerText = this.value;
};