Python day54:JavaScript的导入、语法、数据类型、字符串、数组、字典的常用操作、选择器、页面交互流程

JS的导入

```python
定义：运行在浏览器上的前端脚本编程语言
    作用：处理前端数据、渲染页面、修改样式、完成交互、前后台数据通信
三种导入方式:
行间式：写在标签中的事件属性  
例：<!--<div id="dd" onclick="alert('hello js')"></div>-->
内联式：写在script标签中，script标签应该出现在body的最下方(可以将其放在body结束后)
例子：
<script>
    dd.onclick = function () {
       alert('hello js')    }
</script>-->
外联式：通过script标签的src属性，链接外部js文件
    例：<script src="js/js导入.js">
特别注意！
        // 一个script标签拥有src引入外部js文件后，就相当于单标签，所以内部的代码会被自动屏蔽
        即有了外联式，内联式将会被屏蔽！！！

```

## JS语法：

```python
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

```

## 数据类型：

```python
三、数据类型
     值类型
  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'
    // 常量声明时必须赋初值，且一旦赋值，不可改变
    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));
</script>



<script>
    // 二、变量与常量
    let num = 123;
    num++;
    console.log(num);

    const str = '123';
    // str = '456';  // 常量声明时必须赋初值，且一旦赋值，不可改变
    console.log(str);

```

三种输出信息的方式：

```python
 一、三种输出信息的方式
    控制台输出语句
    console.log('你丫真帅')

    弹出框提示信息
    alert('你丫确实帅')

    将内容书写到页面
    document.write('<h2 style="color: red">你丫帅掉渣</h2>')

```

## 运算符：

```python
自增自减
    console.log(n1);
  ++在前优先级最高，++在后优先级最低(比赋值符=还低)
  res = n1++;  // 先将n1的值赋值给res，自己再自增1
  res = ++n1;  // 先自己自增1, 再将n1的值赋值给res

逻辑运算符
    let x = 10;
    res = 0 && ++x;
    console.log(res, x);
    res = 100 || ++x;
    console.log(res, x);
    console.log(!!x);
三元运算符
    // 条件 ? 结果1 : 结果2
    res = 10 == '10' ?  '相等' : '不等';
    console.log(res);


```

## 流程控制

```python
顺序、分支、循环
 if (条件) {

    } else if (条件) {

    } else {

    }
拓展：随机数 [0, 1) => [m, n]
     [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   
 
循环
while (条件) {
        循环体
    }
do {

    } while (条件);
                             
for (循环变量初始化①; 循环条件②; 循环增量③) {
        循环体④;
    }
```

## 函数：

```python
函数的定义
    function 函数名(参数列表) {
        函数体;
        return 返回值
    }
    function：定义函数的关键字
    函数名：使用函数的依据，就是一个变量，可以赋值给其他变量，也可以存储在容器中，也可以作为函数的参数与返回值
    参数列表：都是按位置传，形参与实参个数不需要统一，但是一定是按位赋值 (你传你的，我收我的)
    函数体：完成功能的主体代码
    返回值：只能返回一个值
    
匿名函数
    function () {
        // 没有名字的函数就是匿名函数
    }
    
匿名函数自调用：一次性使用   
 (function (a, b) {
        console.log('匿名函数自调用:', a, b)
    })(10, 20, 30);
    
    let abc = 10;
    hhh.onclick = function () {
        console.log(abc);
    };})()   
    
```

## 四种变量

```python
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);  // 没有关键字声明的变量是全局变量，在函数内部声明的外部也可以用

```

## 字符串、数组、字典数据类型的应用：

```python
字符串
  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);

   不定长参数: ...变量名
    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);
    }//为什么这时候用dic.k不行？？？k是变量？
    
    特别注意：这里不是真正意义上的字典。而是object类型!!!
   
```

## JS的选择器：

```python
一、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);

```

## JS操作步骤



```python
 1）找目标标签
    let h1 = document.querySelector('h1');
 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')
    }
    
    表单内容
    let inp = document.querySelector('input');
    console.log(inp.value);
    inp.value = 67890;

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

## 键盘、鼠标事件：

```python
为某个标签绑定事件，去控制页面中任何一个标签（绑定事件中的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 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 + '下';
    };

```