前端3

四种变量的定义：普通变量let ，常量：const

var，没有关键字的变量名

但let 和const都无法在{}外再次命名

流程控制：

分支结构：

if (条件表达式)  {

代码块}

当条件表达式结果为true，会执行代码块，反之不执行

条件表达式可以为普通表达式

3.0，underfinded，null，‘“” ，NaN为假，其他均为真。

if 复杂语法：

if （条件） {

代码块1} else if (条件2）{

代码块2} else {

代码块3}

while 循环：

while (条件表达式） {

代码块1}

for循环：

for （循环变量a的初始值，条件表达式，增量） {

代码块}

函数：

function 函数名 （参数列表）{
代码块}

匿名函数：

// function fn() {
    //     console.log('fn run');
    //     return [un1,2]
    // }
    // let res = fn();
    // console.log(res);
    // let func = fn;
    // func();
    // function f(a,b) {
    //     console.log(a,b)
    // }
    // f(1,2);
    // let res = f(1,2);
    // console.log(res)
    // 匿名函数
    // function () {
        // 没有名字的函数就是匿名函数
    // }
    //需求需要一个函数地址，就可以传入一个匿名函数
    // function f(fn) {
    //     fn()
    // }
    // f(function () {
    //     console.log('传进去的匿名函数')
    // });
    //用变量接收匿名函数，第二种声明函数的方式
    // let f = function (a,b) {
    //     console.log('ffffff')
    // };
    // f();
    // 为事件提供方法体
    // hhh.onclick = function () {
    //    console.log('hello world')
    // }
    // 匿名函数自调用：一次性调用
    // (function (a,b) {
    //     console.log('匿名函数自调用:',a,b)
    // })(10,20,30);
    // let abc = 10;
    // hhh.onclick = function () {
    //     console.log(abc)

基本数据类型：

 // 字符串
    // 1)定义
    // let ss = 'abc123呵呵';
    // console.log(ss);
    // 2)索引
    // res = ss[0];
    // console.log(res);
    // 3)切片
    // res = ss.slice(4,7);
    // console.log(res);
    // 4)替换
    // res = ss.replace('abc','ABC');
    // console.log(res);
    // 5)拆分
    // res = ss.split('');
    // console.log(res);
    // 6)拼接
    // res = ss + "liuweizui6";
    // console.log(res);
    // 7)迭代
    // for (s of ss) {
    //     console.log(s);
    // }
    //数组
    // array ===> string
    let arr = [3,1,2,6,7,8];
    res = arr.join('');
    console.log(res);
    //迭代
    // for (a of arr) {
    //     console.log(a);
    // }
    //排序
    // arr.sort();
    // arr.reverse();
    // console.log(arr);
    // 增删改查
    // console.log(arr[5]);
    // arr[4] = 888;
    // console.log(arr[4]);

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

    //重点（增删改）
    //从索引几开始，改几位，改的数值
    // arr.splice(3,2);
    // console.log(arr);
    //不定长参数
    // function f(...a) {
    //     console.log(a);
    // }
    // f(1,2,3,4,5,6,7)
    //字典
    dic = {};
    dic['name'] = 'liuwei';
    console.log(dic);
    //增删改查
    //增
    dic.age = 18;
    dic.gender = '男';
    console.log(dic);
    //删,用delete 删除key值就ojbk
    delete dic.name;
    console.log(dic);
    //改
    dic.age = 20;
    console.log(dic);
    //查
    console.log(dic.gender);
    //字典的迭代
    for (k in dic) {
        console.log(k);
    }

事件：

// 鼠标事件
    let h1 = document.querySelector('h1');
    // onclick、ondblclick、onmouseover、onmouseleave、onmousemove、onmousedown、onmouseup
    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
    /*
    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;
    };

    
</script>


<!--
<script>
    // 表单内容
    let inp = document.querySelector('input');
    console.log(inp.value);
    inp.value = 67890;

    // console.log(inp.getAttribute('value'));
    // inp.setAttribute('value', '0000000000000');

</script>
-->

<!--
<script>
    // 1）找目标标签
    let h1 = document.querySelector('h1');

    // 2）获取样式、内容、属性
    let fontSize = h1.style.fontSize;
    console.log(fontSize);
    // 标签.style.属性名 只能获取行间式
    // getComputedStyle(ele_name, 伪类选择器通常用null填充) 能获取所有方式的样式(内联与外联叫计算后样式)
    let bgColor = getComputedStyle(h1, null).backgroundColor;
    console.log(bgColor);

    console.log(h1.innerText);
    console.log(h1.innerHTML);

    console.log(h1.getAttribute('id'));
    console.log(h1.getAttribute('owen'));


    // 3）修改样式、内容、属性
    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');

    if (Math.random() > 0.5) {
        img.setAttribute('src', 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=255676174,1347478056&fm=26&gp=0.jpg')
    } else {
        img.setAttribute('src', 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3706411226,1037337437&fm=26&gp=0.jpg')
    }

</script>
-->

<!--
<script>
    // 一、js选择器：js如何与html标签建立起联系
    // 1)
    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) 同css3选择器
    // querySelector就是获取一个
    // h1 = document.querySelector('#hhh');
    h1 = document.querySelector('body h1#hhh');
    console.log(h1);
    h21 = document.querySelector('#hhh ~ .hh2');
    console.log(h21);
    // querySelectorAll就是获取多个
    h2s = document.querySelectorAll('#hhh ~ .hh2');
    console.log(h2s);
    // 优势：通过id、class或标签，都可以快速定位到某一个或某几个
    h22 = document.querySelector('.hh2:nth-of-type(2)');
    console.log(h22);

</script>