工欲善其事，必先利其器，一文搞懂JavaScript，再见已是前端人

初识JavaScript

JS是一种“解释性”的编程语言，和Java一样，需要运行在虚拟机上
JS运行的虚拟机统称为“JS引擎”

主流的浏览器	JS引擎
Chrome	V8（最主流）
Firefox	SpiderMonkey
IE	Chakra
Microsoft Edge（Windows默认浏览器）	ChakraCore
Safari （macOS默认浏览器）	SquirrelFish

JS的用处：

• 网页开发
• 服务器开发（使用Node.js，是一个基于Chrome V8引擎的JavaScript运行环境）
• 桌面程序开发（VScode就是基于JS开发的（基于Electron））
• 开发手机app

JS的内容：

• ECMAScript（ES）：JavaScript的语法
• DOM：文档对象模型 （HTML中的每个标签在JS中对应一个对象，通过JS操作这些对象，控制页面表现形式）
• BOM：浏览器对象模型 （浏览器在JS中提供一些对象，通过JS操作这些对象，控制浏览器的一些行为）

JavaScript的书写形式

• 行内式

<input type="button" value="按钮" onclick="alert('hello,world!')">

• 外部式
  写到单独的.js文件中

<script src="Guo.js"> </script>

• 内嵌式
  写到<script>标签中

    <script>
         alert('hello,world!')
    </script>

• 输入
  弹出一个输入框

prompt('请输入名字')

• 输出
  弹出一个对话框

alert('hello,world!')

• 打印
  在控制台打印（仅程序员可以看到）
  VScode中 log+Tab 快速输入console.log

console.log('hello,日志')

JS语法

JS中的变量都是动态类型的，
变量的类型是在程序运行时才确定的；变量的类型可以在程序运行时发生改变
Java中的变量都是静态类型的，
变量的类型在程序运行时，不能改变

• 创建变量
  不需要声明变量的类型，赋的值是啥类型，变量就是啥类型
  var定义变量时，一个变量可以被重复定义，以最后一个为准
  let定义变量时，一个变量被重复定义，运行时会报错

        var a = 'qust';
        let b = 'material';
        c = 1;
        //b的类型转换了
        b = 2022;

数据类型

• JS的几种类型

Number	数字，不分整数和小数
Boolean	true和false
String	" "也行，’ ‘也行，JS中字符串建议使用’ ’
Undefined	表示未定义的值
null	表示空值

• number
  特殊的数字值

        var max = Number.MAX_VALUE;
        console.log(max * 2)    // Infinity 无穷大，表示数字已经超过了JS能表示的范围
        
        console.log(-max * 2);  //-Infinity 负无穷大，表示数字已经超过JS能表示的范围
        
        console.log('hello' - 10);  //NaN 表示当前结果不是一个数字

• String
• 字符串拼接

        //字符串与字符串拼接
        let a = 'nice';
        let b = 'material';
        console.log(a + b);     //nicematerial
       
        //数字与字符串拼接
        let m = 6;
        let n = 'laker';
        console.log(m + n);    // 6laker

        //Boolean类型变量与字符串拼接
        let d = true;
        let e = 'laker';
        console.log(d + e);    //truelaker

• Boolean类型的变量参与计算时，true和false隐式类型转换为0和1处理

        let f = true;
        let g = 2;
        console.log(f + g);   //3

        let l = true;
        let k = false;
        console.log(l + k);   //1

• undefined

        // a未初始化
        let a;
        console.log(a);  // undefined
        
        console.log(b);  //运行时报错

        console.log(a + 'qust');   //undefinedqust
        
        console.log(a + 6);     //NaN

        console.log(a + true);  //NaN

• null

        let a = null;
        console.log(a);        //null
        
        console.log(a + 6);    //6
          
        console.log(a + 'qust');   // nullqust
        
        console.log(a + true);   //1

• 隐式类型转换
  JS支持隐式类型转换，是弱类型语言
  Java不支持隐式类型转换，是强类型语言
  强类型比弱类型要好，静态类型比动态类型要好，所以Java是世界上最好的语言
  
• Java中的运算符同样适用于JavaScript
  不同的是，JS中的运算符使用时，会存在隐式类型转换（除 === 和 !==）

        let a = '6';
        a += 2;       
        console.log(a);  //8

• 比较字符串时，无论是== 还是 === ，无论是 != 还是 !== ，比较的都是字符串的内容
  == 和 != 比较相等，会进行隐式类型转换
  === 和 !== 比较相等，不会进行隐式类型转换，比较类型和值（类型不同，直接返回）

• 逻辑运算符
  && || !计算多个Boolean表达式的值
  Java中是返回true或false
  JS中是返回表达式的值（不一定是true和false）

类型
Number	非0为真，0为假
String	非空字符为真，’ ’ 空字符为假
undefined	为假
null	为假

        let a = 6;
        let b = 7;
        let d = a||b;
        console.log(d);

        let x = null;  // let x;
        x = x||0;         
        console.log(x);     //0

条件/循环语句

与Java相同

数组

• 创建数组
  JS数组中的元素可以是不同类型的

        //1.
        let array1 = new Array();
        //2.
        let array2 = [1,"forever",null,true] 

• 获取元素
  如果下标越界，不会报错，返回undefined
• 新增元素
  会“动态扩容”的

        let array = [1,"forever",null,true];
        array[100] = 100;           // array长度变为101,其中下标为4~99处均为undefined
        console.log(array[50]);      //undefined
        console.log(array);
      

尾插

        array.push("青稞");

• 删除元素

        let array = [1,"forever",null,true];
        array.splice(2,1);  //第一个参数是下标为2的位置开始删除(包含下标2)，第二个参数是删除长度为1
        //删除后，后面的元素向前占据删除元素的位置

• 数组的遍历

        for(let i = 0; i < array.length; i++){
            console.log(array[i]);
        }

        for(let j in array){
            console.log(array[j]);
        }

        for(let value of array){
            console.log(value);
        }

• 为数组添加属性
  JS中数组本质上就是一个对象，JS代码运行过程中，我们可以为这个对象添加/删除属性，并不是数组动态扩容，数组长度不变，下标不变

       //添加属性，数组长度不变
        array[-2] = 8;          //属性名: -2 属性值: 8
        console.log(array[-2]);
        
        array['qust'] = 66;
        console.log(array['qust']);  //属性名: qust 属性值:66

函数

        function 函数名（参数列表）{
                 函数体
        }

        console.log(add("hello", "world"));
        console.log(add(4, "love"));
        function add(x, y) {
            return x + y;
        }

• 函数定义和函数调用 无前后顺序（与变量不同，变量必须先定义在调用）
• 参数无类型
• 实参和形参的个数可以不匹配
  实参比形参少，多出来的形参的值就是undefined；实参比形参多，多出来的实参就没了
• JS中一个函数可以兼多个参数不同的情况，JS不需要重载语法

        function print(x, y){
            console.log(x);
            console.log(y);
        }
        print(1);   // 1 undefined
        print(1,2,3);  // 1 2

回调函数

函数不立即调用，在未来的某个时机去调用

       div.onclick = function(){
       
       }

函数表达式

JS中的函数可以像变量一样赋值的，与普通变量没什么区别
函数表达式就是定义了一个匿名函数，然后赋值给一个变量

        //1.
        let add = function(x, y){
            return x + y;
        }
        console.log(add(1, 2));
        //2.
        function test(x, y){
            return x - y;
        }
        let add2 = test;
        console.log(add2(1, 2));

• 作用域
  let 定义的变量，作用域为“块级作用域”（{}中）
  var定义的变量，作用域为“函数作用域”（某个函数中生效，不局限于{}中）
  没有let、也没有var修饰的变量，是全局变量

        //var
        function test(){
            {
                var a = 6;
            }
            console.log(a);
        }
        test();        //6
 

        //a
        function test(){
            {
                a = 6;
            }
        }
        test();
        console.log(a);     //6

• 作用域链
  函数定义可以嵌套
  内层函数可以访问外层函数的局部变量

        function add(){
            let b = 9;
            function add2(){
                console.log(b);
            }
            add2();     
        }
        add();    //9

对象

JS的对象是不依赖类的

• 直接创建对象
• 对象的属性和方法使用键值对的形式组织
• 属性与属性之间,分割，可有可无
• 方法的值是一个匿名函数

        //创建空对象
        let college = {}
        
        let student = {
            name: 'Westbrook',
            age: 32,
            team: 'laker',
            type: 'force',
            sayHello: function(){
                console.log('forever');
            }
        }

• 使用构造函数创建对象，可以批量创建对象
  构造函数的函数名首字母大写的

        function Team(name, location){
            this.name = name;
            this.location = location;
            this.play = function(){
                console.log('开打开打');
            }
        }
        let laker = new Team('湖人', '洛杉矶');
        let jazz = new Team('爵士', '盐湖城');
        let sun = new Team('太阳', '菲尼克斯');
        console.log(laker);
        console.log(jazz);
        console.log(sun);

new的执行：
在内存中创建一个空的对象{ }
this指向这个对象
执行构造函数中的代码，给对象创建属性和方法
返回这个对象（没有return，new代劳）

• 使用属性和方法

        let student = {
            name: 'Westbrook',
            age: 32,
            team: 'laker',
            type: 'force',
            sayHello: function(){
                console.log('forever');
            }
        }
        console.log(student.name);
        console.log(student.team);
        student.sayHello();

        console.log(student['name']);
        console.log(student['type']);

• 新增属性
  JS的对象的属性和方法在运行过程中可以新增和删除

        student.oldteam:'雷霆';

DOM API

• WebAPI 包括了 DOM+BOM
  DOM 文本对象模型
  DOM API 操作页面结构的一些函数
• 每一个页面就是一个DOM树，就是一个文档（document）
• 所有的标签都称为元素（element），一个标签就对应一个对象
• 事件就是用户的操作，以点击（onclick）为主，通过这个属性操作相对应的对象（HTML元素），JS主要就是用来为这些对象的onclick属性赋值的

获取元素的对象

• 获取单个对象，如有重复，取第一个 querySelect（’ 选择器 '）

• 多个对象放在一个数组中 querySelectAll（’ 选择器 '）
  0下标是第一个对象、1下标是第二个对象

• console.log(对象)打印HTML语句

• console.dir(对象) 打印对象，可以看到对象的属性

    <div class="container">
        <div class="one">齐风陶韵，生态淄博</div>
        <div class="two">孙子故里，生态滨州</div>
    </div>
    <script>

       //获取单个对象，如有重复，取第一个
       let one = document.querySelector('.one');
        
       //获取多个对象  伪数组
       let two = document.querySelectorAll('.two');

        //log打印HTML语句
        console.log(one);
        //dir打印对象，可以看到对象的属性
        console.dir(one);
     </script>

操作元素

操作元素的前提是创建对象

修改元素内容

    <div>齐风陶韵，生态淄博</div>

    <div>
        <span>齐风陶韵，生态淄博</span>
        <span>孙子故里，生态滨州</span>
    </div>

开始标签和结束标签之间的部分是内容，内容可以是文本，也可以是嵌套的标签

• innerHTML 可以得到内部结构
• innerText 只能得到文本内容，得不到HTML内部结构

   <div>
       <span>西北工业</span>
       <span>长安大学</span>
   </div>
   <script>
       let lick = document.querySelector('div');
       console.log(div.innerHTML);  //<span>西北工业</span>
                                    //<span>长安大学</span>
       console.log(div.innerText);   //西北工业 长安大学

       //修改文本内容，会把标签<span>当成文本内容  
       //页面为   <span>陕西科大</span>
       div.innerText = '<span>陕西科大</span>';
       //修改HTML结构
       //页面为   陕西科大
       div.innerHTML = '<span>陕西科大</span>';

       //HTML结构均为  
       //<div>
       //    <span>陕西科大</span>
       //</div>
   </script>

案例

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color:aqua;
            text-align: center;
            line-height: 200px;
        }
    </style>
    <script>
        let div = document.querySelector('div');

        div.onclick = function(){
            if(div.innerHTML == "公诚勇毅"){
                div.innerHTML = "考得上！";
            }else{
                div.innerHTML = "公诚勇毅";
            }
        }
    </script>

修改元素属性

    <img id="one" src="火箭威少.jpg" alt="二哥" title="火箭威少">
    <script>
        let img = document.querySelector('#one');
        //获取元素的属性  用 .
        console.log(img.title);
        
        img.onclick = function(){
            img.src = '威少.png';
            img.alt = '神龟';
            img.title = '雷霆威少';
        }
    </script>

修改表单元素属性

实现显示密码效果

    <input id="password"  type="password"> 
    <input id="button"  type="button" value="显示密码" >
    <script>
        let password = document.querySelector('#password');
        let button = document.querySelector('#button');
        button.onclick = function(){
            if(button.value == '显示密码'){
                password.type = 'text';
                button.value = '隐藏密码';
            }else{
                password.type = 'password';
                button.value = '显示密码';
            }
        }
    </script>

全选/取消全选

    <input type="checkbox" class="city">徐州
    <input type="checkbox" class="city">淮安
    <input type="checkbox" class="city">盐城
    <input type="checkbox" class="city">连云港
    <input type="checkbox" class="city">宿迁
    <input type="checkbox" class="all">全选
    
    <script>
        let all = document.querySelector('.all');
        let city = document.querySelectorAll('.city');
        all.onclick = function(){
            for(let i = 0; i < city.length; i++){
                city[i].checked = all.checked;
            }
        }

        for(let i = 0; i < city.length; i++){
            city[i].onclick = function(){
                all.checked = checkCity();
            }
        }
       //判断city中的元素是否都被选中
        let checkCity = function(){
            for(let i = 0; i < city.length; i++){
                if(!city[i].checked){
                    return false;
                }
            }
            return true;
        }
        //city[i].onclick 是给元素添加属性的，点击操作发生时则对应属性发挥作用
        //错误代码  
        // if(all.checked){
        //     for(let i = 0; i < city.length; i++){
        //         city[i].onclick = function(){
        //             all.checked = false;
        //         }
        //     }
        // }
   </script>

点击计数

    <input type="button" id="jian" value="-">
    <input type="text" id="text" value="0">
    <input type="button" id="jia" value="+">
    <script>
        //计数
        let text = document.querySelector('#text');
        let Bjia = document.querySelector('#jia');
        let Bjian = document.querySelector('#jian');
        Bjia.onclick = function(){
            let value = parseInt(text.value);
            value++;
            text.value = value;
        }
        Bjian.onclick = function(){
            let value = parseInt(text.value);
            value--;
            text.value = value;
        }
    </script>

修改样式属性

由于JS中变量没有脊柱命名法，所以CSS中的变量如 font-size 在JS中写作 fontSize，background-color 写作 backgroundColor

• 行内样式操作
  优先级最高

    <div>他朝若是同淋雪，此生也算共白头</div>
    <script>
        let div = document.querySelector('div');
        div.style.color = 'red';
        div.style.backgroundColor = 'green';
    </script>

案例

    <div>他朝若是同淋雪，此生也算共白头</div>
    <script>
        let div = document.querySelector('div');
        div.onclick = function(){
            let size = parseInt(div.style.fontSize);
            size += 100;
            div.style.fontSize = size + 'px';
        } 
    </script>

• 类名样式操作
  有时候样式比较复杂，涉及多个属性的修改，通过style属性设计就得一个一个属性的设计，会非常麻烦，通过类名样式操作，可以一次性修改多个样式属性
  通过修改元素的类名来修改元素的样式

    <style>
        .light {
            background-color:aqua;
        }
        .dark{
            background-color: blueviolet;
        }
    </style>
    <div class="light">他朝若是同淋雪，此生也算共白头</div>
    <script>
        let div = document.querySelector('div');
        div.onclick = function(){
            if(div.className == 'light'){
                div.className = 'dark';
            }else{
                div.className = 'light';
            }
        }
     </script>

操作节点

新增节点

• 创建节点

    <script>
        let div = document.createElement('div');
        div.innerHTML = '枣庄';
        div.className = 'ShanDong';
        div.style.fontSize = '20px';
        console.log(div);
    </script>

插入节点

迁户口操作

• 元素可以看做一个数组，其子元素可以表示为 父元素.children[ ]
• 插入到所有子元素的后面 appendChild()
• 将新增节点插入到指定子元素前面 insertBefore(新增,已存在子元素)

    <div class="container">
        <div class="HeNan">商丘</div>
        <div class="JiangSu">徐州</div>
    </div>
    <script>
        let div = document.createElement('div');
        div.innerHTML = '枣庄';
        div.className = 'ShanDong';
        div.style.fontSize = '20px';
        console.log(div);

        //插入到所有子元素的后面
        let container = document.querySelector('.container');
        container.appendChild(div);


        //将新增节点插入到指定子元素前面
        // let JiangSu = document.querySelector('.JiangSu');
    
        //注意div的子元素的另一种表现方式
        let JiangSu = container.children[1];
        container.insertBefore(div,JiangSu);


        //再插入一次，迁户口操作，操作的是同一个对象，只是移动了位置，不会再添加一个标签的
        let HeNan = container.children[0];
        container.insertBefore(div,HeNan);
    </script>

删除节点

let 删除的元素 = 父元素.removeChild(子元素)

    <div class="container">
        <div class="HeNan">商丘</div>
        <div class="JiangSu">徐州</div>
    </div>
     <script>
        let container = document.querySelector('.container');
        let JiangSu = container.children[1];
        let removed = container.removeChild(JiangSu);
    </script>

学习网站：
JS参考手册