* html + css + js 实现网页内容结构 ， 表现 ， 行为的分离
    * html + css = 静态网页
    * html + css + js = 动态网页 dhtml
    * javaee 动态网页

1) javascript : 基于对象和事件驱动的脚本语言，是一种编程语言
    * 编程语言： 变量，判断，循环 实现动态功能效果
    * 基于对象： 语法与java面向对象语法类似，但没有完全实现面向对象的特征
    * 事件驱动： js可以编写许多功能(函数，方法)，可以不需要其他函数调用
                 可以通过浏览器的一些操作(点击，移动鼠标，按下键盘)触发js函数功能 (事件驱动)
    * 脚本语言： js不能独立执行，需要配合html，运行在浏览器上。
    
    * java源代码不能直接运行，需要通过编译产生字节码文件(检测语法)，通过 jvm加载并运行程序
    * js是一种解释性语言，没有编译过程，运行过程中边运行边解释(语法错误，逻辑错误10/0)
    
2) js组成：
    * ECMAScript js引擎 语法标准
    * DOM document object model 通过js操作html
    * BOM browser object model  通过js操作浏览器(刷新浏览器，关闭浏览器，打开新浏览器，前进，后退)

3) js编写
    a) 在html网页的<script>中嵌入编写js代码
        <script type="text/javascript">
            alert('我是一个js应用');
        </script>
    b) 将上述<script>中的代码原封不动的复制到.js结尾的文件中，使用<script>标签引入html
    
    * 补充：
        * 引入和嵌入不能使用同一个<script>
        * 引入时，<script>的起始和结束必须完善

4) 基本语法：
    (4.1) 变量： 
        * 是一个容器，可以装载数据
        * 当前行产生了数据，需要在后面的代码行中使用，就需要将数据先装入变量。
        * 变量使用就2种 装数据，取数据。
        
        * 要想使用变量，需要先声明(定义)变量 ： 类型 名称 ;
        
        * 弱类型变量：
            * js中的变量是弱类型变量
            * 在定义变量时，无法确定变量未来装载数据的类型
            * 使用var关键字定义
                var i ;  // String i ; int i ; double i ;
                
            * 扩展：
                弱类型变量具体类型有变量装载的数据决定，装入整形，变量类型就是整形。
                弱类型变量可以装载任意类型的数据
                    var i = 10 ;
                    i = "duyi" ;
                    i = true ;
    (4.2) 数据类型 (6种)
        1. 数字类型 ： number
            * 包括整形和浮点型
            * var i = 10 ;
            * var i = 3.14 ;
        2. 字符串类型： string
            * js没有字符和字符串之分
            * 字符串可以使用单引号或双引号包含
            * var s = "duyi" ;
            * var s = 'duyi' ;
        3. 布尔类型：  boolean
            * 只有true、false 2个值
        4. 对象类型：  object
            * null也是一种的特殊的对象值(对象的引用不存在)
            * 产生对象
                var obj = new Object();  创建了一个没有属性和功能的对象
                var obj = {} ;             创建了一个没有属性和功能的对象    
            * 自定义属性
                * 使用对象的属性时，如果没有就自动创建。
            * 使用对象属性
                * obj.uname = 'duyi' ;
                * alert(obj.uname ) ;//弹框 显示obj.uname属性值
            
            * 扩展：创建对象的同时初始化属性
                var obj = {
                    uname:'dmc',
                    age:17,
                    sex:'男'
                };
        5. 值未定义类型：undefined
            * 只有1个值 undefined
            * 定义了一个变量/属性，但没有赋值，默认值就是undefined
        
        6. 函数类型： function
            * 方法也是一个独立的数据
            * 后面详细讲
        
        * 扩展： 使用typeof关键字 获得变量数据的类型
            var i = 10 ;
            console.log(typeof i ) 浏览器控制台打印结构 [类似于 System.out.println();]
            
    (4.3)运算符
        1. 算数运算符： + - * / % ++ -- 
            5/2 -> 2.5
        2. 赋值运算符： = += -= *= 
        3. 比较运算符： > < == !=  === !==
            * == 与 === 区别
            * == 忽略类型比较
            * === 带类型比较
        4. 逻辑运算符： ! && ||
            * 只有短路与和短路或
            * & | 就表示位运算
        5. 条件运算符(三目，三元) ： boolean结果?值1:值2
    (4.4) 分支判断
        * if判断条件不仅仅可以是boolean结果，也可以是其他类型的结果
        * 0表示false，非0表示true    if( i != 0 )  --> if(i)
        * null表示false                if( obj != null) --> if(obj)
        * undefined表示false
        
        * switch与java类似。
    
    (4.5) 循环
        * while和do-while语法逻辑与java相同
        * 循环的判断题条件与if一样，除了boolean结果，也可以是其他类型
        
        * for循环注意i初始化
            for(var i=0;i<10;i++){}
            
        * 扩展： for-in循环
            * 可以循环遍历数组中的元素，也可以循环遍历对象的属性(类似于反射机制)
            for(int num : nums){}
            for( i in array){
                //array表示遍历的数组，i表示每次遍历获得的数组下标，可以根据下标获得数组的值
                console.log(i+','+array[i]);
            }
            for( p in obj){
                //obj表示遍历的对象，p表示每次遍历获得的对象属性名，可以根据属性名获得属性值
                console.log(p+','+obj[p]);  //user['uname'] === user.uname
            }
    (4.6) 数组    
        * 可以存储一组数据
        * 创建数组
            1. var array = new Array();     //创建一个长度为0的数组
            2. var array = [] ;                //创建一个长度为0的数组
        * 数组的使用
            * array[0] = 10 ;  赋值时，如果原来没有该位置，就开辟这个位置，且length=1
            * array[1] = 10 ;
            * array[10] = 10 ; 为小标为10的元素赋值成功，length=11 ,其中[2]...[9]位置的元素值undefined
        * 扩展：初始化
            * var array = new Array(10);   //创建10个长度的数组，10个元素默认值为undefined
            * var array = new Array(1,2,3,4); //设置初始元素
            * var array = [1,2,3,4] ;       //设置初始元素
        * 数组属性
            array.length 获得数组元素的长度。
        * 数组方法：
            array.push(); 向数组的末尾增加一个元素 (java中使用list集合造了栈Stack-Vector-List.push())
            array.pop();  移除数组中最后一个元素  (push + pop = 栈)
            concat(array2) ; 连接两个数组元素
            join('+'); 将数组中的元素使用指定符号组成字符串
            reverse(); 数组反转
    (4.7) 字符串
        * 与java类似，有许多字符串操作的方法
        * 常用方法： var str = "duyi is good" ;
            str.length ; 字符数量(属性)
            str.indexOf()
            str.lastIndexOf()
            str.substring()
            str.replace('a','A')
            str.split(',')
            str.startsWith()
            str.endsWith()
            str.toLowerCase()
            str.toUpperCase()
            str.concat()  
            str.charAt()
    (4.8) 日期
        * var date = new Date();获得日期对象，存储当前系统日期
        date.getTime();    自1970-01-01 获得毫秒数
        date.setTime(); 设置一个新日期的毫秒数
        date.getFullYear(); 2021
        date.getMonth() ;   月索引 4+1=5
        date.getDate() ;    14日
        date.getDay()  ;    星期索引，从星期日开始(0)
        date.getHours();    13点
        date.getMinutes();  54分
        date.getSeconds();  30秒
    (4.9) Math
        Math.abs() 绝对值
        Math.min(n1,n2) 返回最小的数
        Math.max(n1,n2) 返回最大的数
        Math.pow(m,n) 返回m的n次幂
        Math.ceil()  向上取整
        Math.floor() 向下取整
        Math.random() 产生[0.0-1.0)随机数
            Math.random()*10 ==> [0,10)
            Math.random()*5+5 ==>[5,10)
        Math.round()  四舍五入
    (4.10) 其他常用的方法
        parseInt(3.14) 将浮点数转换成整数 3
        parseInt("120") 将符合数字格式的字符串转换成的数字  120
            "120"+1="1201" , parseInt("120")+1=121
            * 注意：  parseInt("120abc") 将数字开头的字符串中，开头的数字部分转换成数字  120
                      只能开头。如果不是以数字开头的字符串，转换后获得NaN 表示"不是一个数字"
        parseFloat("3.14a")将符合浮点数格式的字符串转换成浮点数 3.14
        eval() 将符合某种格式的字符串按照那种格式转换或执行
            eval('1+2+3'); -->6
            var arr = eval('[1,2,3,4,5]'); ---> 转换成数组
                      
    (4.11)函数：
        * 表示一个行为，一个动作，一个操作，一个功能 。 类似于java的方法。
        * 创建函数(3种)
            方式1： 
                function sum(num1,num2){
                    return num1+num2 ;
                }
                
                * 不用像java一样指定返回类型,可以根据需求，使用return返回所需要的数据即可。
                * 参数列表的变量无序使用var修饰
            方式2：
                var sum = function(num1,num2){
                    return num1+num2 ;
                }
                * 当前函数被称为匿名函数
                * 函数也是一种数据类型，所以函数就是函数类型的数据
                    * 既然函数是一个数据，就可以存入变量
                * 变量名即为函数名。
            方式3：
                var sum = new Function("num1","num2","return num1+num2 ");
        * 调用函数
            fn1();
            fn2(10,20);
            var result = fn3();
            var result = fn4(10,20);
        
        * 扩展： 预编译问题(提升)
            浏览器执行js是，会对函数和变量的声明有一个提升声明操作
            //可以调用
            a();
            function a(){}
            -----
            //不可以调用
            //知道有一个叫a变量，但不知道变量的值，所以无法调用
            a();
            var a = function(){};
            
            * 扩展： 使用let关键修饰变量，阻止提升
                //可执行
                console.log(x);
                var x ;
                ---
                //不可执行
                console.log(x);
                let x ;
                
        * 扩展：函数传参
            * 在java中，定义方法时参数列表有几个变量，调用方法时就需要传递对应数量的实参
            * 在js中，传递参数的实参数量可以与函数形参数量不一致
                function sum(num1,num2){}
                sum(10,20)
                    * num1=10,num2=20
                sum(10);
                    * num1=10,num2=undefined
                sum(10,20,30,40)
                    * num1=10,num2=20,?=30,?=40
                    * 每一个函数都内置了一个arguments数组对象(不用定义，直接使用)
                    * 该数组对象装载所有的参数
                    * 可以通过遍历获取
        * 扩展： 变量的作用域
            * 在函数中定义的变量，称为局部变量。只能在函数中使用
            * 在函数外定义的变量，称为全局变量，所有函数中都可以使用。
            * 在函数中直接初始化，未使用var定义的变量，也是全局变量
                function f1(){
                    i = 20 ;
                    console.log(i);
                }

                function f2(){
                    console.log(i);
                }
        
        * 扩展：函数类型的参数和返回值
            * js的数据类型中有一种类型：函数类型
            * 函数类型的数据就是：函数
            * 函数也是一种数据
            * 调用函数时可以传递整形数据，字符串类型的数据，能不能传递函数类型的数据呢？     能
            * 调用函数后，可以返回整形数据，字符串类型的数据，能不能返回函数类型的数据呢？  能
            * 函数类型的参数如何使用。 函数类型的返回值如何使用
                //var f1 = 值 ;
                var f1 = function(){ console.log('duyi') };
                var n1 = 10 ;

                function f2(param){
                    //如果传递的是一个函数
                    //param存储的就是一个函数
                    //和f1存储一个函数是不是一个概念？
                    //f1中存储的函数怎么使用，f1相当于函数名  f1();
                    //param中存储的函数，param相当于函数名 param();
                    
                    param();

                    return f1 ;
                }

                var f3 = f2(f1);
                //f3变量存储的就是返回来的函数，f3相当于函数名 f3();
                f3();
        * 扩展：自调用函数
            * 定义函数同时就执行函数，不需要单独的调用代码。
                (
                    function f1(num){
                        console.log('duyi is good');
                        console.log(num);
                    }
                )(10);
        * 扩展：函数作为构造函数+this关键字创建对象 
            //像一个模板
            function Car(cno,cname,color,price){
                this.cno = cno ;
                this.cname = cname ;
                this.color = color ;
                this.price = price ;
            }
            // var car1 = {cno:1003,cname:'qq',color:'red',price:60000};
            // var car2 = {cno:1004}
            var car1 = new Car(1001,'bmw','red',300000); //此时构造器中的this关键字表示car1
            var car2 = new Car(1002,'benz',black',400000);//此时构造器中的this关键字表示car2
            
            * 注意： this就表示创建的对象
            
            * 注意： 构造对象时，如果属性的类型是一个函数类型，那么这个属性就是方法
                var car = {
                    cname:'bmw',
                    getCname:function(){
                        return this.cname ;
                    }
                }
                ---
                function Car(cno,cname,color,price){
                    this.cno = cno ;
                    this.cname = cname ;
                    this.color = color ;
                    this.price = price ;
                    this.getCname = function(){
                        return this.cname ;
                    }
                }
            
            * 注意： 对象的原型链
                * 使用构造器创建了2个对象
                * 2个对象中获得的方法属性值是不同的
                    var f1 = car1.getCname ;
                    var f2 = car2.getCname ;

                    console.log(f1 == f2);
                * 从功能而言，2个对象的相同方法做的是一样的式，执行的是相同的函数代码
                * 如果相同的代码产生了2份，耗内存。
                * 可以使用对象的原型链实现单例函数处理(类似于java的static)
                    Car.prototype.getCname = function(){
                        return this.cname ;
                    }

5) 事件：
    * 通过操作浏览器或浏览器中的内容触发一个js函数调用。
    * 事件分类
        a) 浏览器事件
            * 需要配合后面js-bom
            * 打开浏览器
            * 关闭浏览器
        b) 鼠标事件
            * onclick 鼠标左键单击事件
                * 在某一个(按钮)标签上，按一下鼠标就会触发点击事件，就可以调用指定的函数
                * 浏览器内部使用观察者模式实现事件响应
                <button οnclick="t1()" οndblclick="t2()">按钮1</button>
                <button >按钮1</button>
            * ondblclick 鼠标左键双击事件
            * oncontextmenu 鼠标右键单击事件
            * onm ousedown 鼠标按下
            * onm ouseup 鼠标抬起
            * onm ousemove 鼠标移动
            * onm ouseover 鼠标移入某块区域
            * onm ouseout 鼠标移出某块区域
            * onm ousewheel 鼠标滚轮事件
        c) 键盘
            * 一般都是针对于可以输入，可选择的表单标签
            * onkeydown 键盘按键按下
            * onkeyup 键盘按键抬起
        d) 表单标签
            * onfocus 表单组件获得焦点事件
            * onblur 表单组件失去焦点
            * onselect 选择组件内容 
            * onchange 改变组件内容
            * onsubmit 表单组件提交请求时触发事件(一般在请求前验证请求数据是否合法)
                * 从操作而言，点击按钮才开始提交的
                * 但从编码而言，最终提交的不是按钮，是<form>表单
                * 这个提交事件是属于表单的
                * 在事件函数中通过返回值true、false来继续请求或终止请求
            * 注意：
                * 上述事件在标签中有对应的事件属性
                * 在浏览器内部处理事件的机制
                    * 浏览器通过请求获得网页内容 (请求服务器，请求本地)
                    * 浏览器就会加载并处理网页内容
                    * 在处理过程中，会发现当前这个标签设置了一个事件属性(onsubmit)
                        * 第一件事，将该标签装入对应的观察者集合中
                        * 第二件事，根据事件属性的值，生成一个函数
                            οnsubmit="t2()" 
                            从html角度而言，"return t2()" 是一个字符串值
                            浏览器内部 new Function("return t2()"); === function xx(){ return t2() };
                    * 当浏览器中在该标签上触发指定的事件时，马上就会通知观察者，观察者就会调用指定的函数
                    * 所以如果t2这个函数返回了一个false，这个false返回给了内部创建的函数，而没有返回给浏览器
                    * 最终需要在内部函数中再返回一次，返回给浏览器。
6) DOM : 文档对象模型
    * 作用： 通过操作js对象，间接影响html内容，效果。
    * dom原理：见图
    * 浏览器中内置document对象，所有标签对应的标签对象都会按照标签的子父关系存储在document中。
        * 可以从document中获得要操作的标签对象
        * 可以通过标签对象操作对应的标签
    
    (6.1) 标签整体操作
        a) 创建标签对象
            var div = document.createElement("div");
                * 新创建的表现并没有显示在浏览器上，因为没有指定其显示的位置(子父关系)
        
        b) 放置标签对象
            parentElement.appendChild(childElement); 
                * 将子标签对象放置在父标签对象的末尾
                * 子标签也会显示在父标签的结尾
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        就是ul的结尾
                    </ul>
                * 扩展: 
                    document.body 获得body标签对应的对象    
            parentElement.insertBefore(newElement , oldElement);
                * 扩展： 在html中触发事件函数时，可以通过传递this表示当前的标签对象
                    <button οnclick="t1(this)">增加一个input标签</button>
            * 注意： 不是只能放置新创建标签，可以放置任何能得到的标签
        
        c) 删除标签对象
            parentElement.removeChild(childElement);
        
        d) 获得标签对象
            var e = document.getElementById(id); 
                * 根据标签id属性值，找到第一个符合条件的标签对象
            
            var eArray = document.getElementsByTagName(tagName);
                * 根据标签的名字，找到所有符合条件的标签
                * 扩展：
                    parentElement.getElementsByTagName(tagName);
                        * 在指定的父级标签中，找到符合条件的子标签。
                        <body>
                            <a></a>
                            <div>
                                <a></a>
                            </div>
                        </body>
            
            var eArray = document.getElementsByClassName(className);
                * 根据标签class属性值，找到所有符合条件的标签。
                
            var eArray = document.getElementsByName(name) ;
                * 根据标签的name属性值，找到所有符合条件的标签 （表单标签）
                
            * 扩展：document.querySelector(css选择器)   --> jquery
            -----
            * 已经找到了一个标签对象 （sourceElement）
            var eArray = sourceElement.children ;
                * 获得已知标签的所有子标签对象
                
            var e = sourceElement.parentNode ;
                * 获得已知标签的父级标签对象
                
            var e = sourceElement.nextElementSibling;
                * 获得已知标签的下一个兄弟标签对象
                
            var e = sourceElement.previousElementSibling;
                * 获得已知标签的上一个兄弟标签对象
            
            -----
            * 特殊情况
            selectElement.options
                <select>
                    <option></option>
                    <option></option>
                </select>
            table.rows
            table.cells
            row.cells
            document.body
            
    (6.2) 标签个体操作
        a) 操作标签属性
            i) 绝大多数情况下，标签有什么属性，标签对象就有什么属性
                <input name="" value="" />
                ---
                input.name , input.value 
            ii) 有些标签属性和标签对象属性不一致
                <input class="" />
                ---
                input.className=""
            iii) 有些标签没有，但标签对象有的属性
                div.tagName  获得标签名，获得的都是大写字母 div.tagName == 'DIV'
                div.innerHTML 获得标签内容    “<a>百度</a>”
                div.innerText 获得标签内的文本内容 “百度”
                    <div>
                        <a>百度</a>
                    </div>
            iv) 有些标签属性值和标签对象属性值不同
                <input readonly="readonly" disabled="disabled" checked="checked" selected="selected" />
                ---
                input.readOnly=true/false
            v) 有些标签属性对应的标签对象属性需要使用驼峰命名法
                <input readonly="">
                ---
                input.readOnly=true
                
        b) 操作标签事件
            * 从html设置事件而言，事件类似于标签的一个属性，只不过属性值是一个函数
                <input name="" value="" οnclick="t1()" />
                ---
                input.name , input.value
                input.onclick = function(){
                    //coding
                }
                ===>
                new Function("t1()");
                ===>
                function (){
                    t1();
                }
            
            * 扩展： 事件绑定
                * 可以在一个标签上增加多个相同的事件：事件绑定
                * btn.addEventListener('click',function(){ coding... });
            * 了解： 阻止事件冒泡，阻止事件的默认行为
        c) 操作标签样式
            * 样式不能直接使用标签对象处理
            * 需要通过标签对象获得一个样式对象
                var style = div.style ;  获得了标签的行内样式属性,可以设置行内样式也可以获得行内样式
                var style = getComputedStyle(div); 获得的样式对象只能获得所有样式不能设置样式
            * 通过这个样式对象处理样式
                i) 大多数情况下，css有的属性，样式对象也有
                    div{width:100px;height:100px;color:red;}
                    ---
                    style.width , style.height , style.color 
                ii) 有些css样式属性由多个单词使用-组合而成：background-color,margin-top,border-bottom-width
                    对应的样式对象属性就是去掉-，多个单词符合驼峰命名法
                    style.backgroundColor , style.marginTop , style.borderBottomWidth
7) BOM
    * 浏览器对象模型
    * js引擎内置了一个对象window对象 --- bom对象
    
    (7.1) window子对象
        a) window.document
        b) window.location 获取/设置浏览器url
            * 通过location改变url，从而实现发送新的请求
            * window.location.href = 'http://www.baidu.com'
        c) window.history 获取浏览器url访问记录，一般用来实现后退，前进等功能
            * window.history.go(-1);
        d) window.event 事件对象 
            * 在触发事件时会产生事件对象
            * event对象的获得存在浏览器兼容问题
                * 有些浏览器(IE,Chrome)可以通过window.event直接获得事件对象
                * 有些浏览器(FF)触发事件函数时，以参数形式传递event对象
                function t3(event){
                    var e = event || window.event ;
                    console.log(e);
                    coding...
                }
            i)   可以通过event获得触发鼠标事件时的 坐标(x,y)
                * 以浏览器左上角为0,0原点
                * event.clientX , eventClientY
            ii)  可以通过event对象获得键盘事件时的按键码(一般我们需要知道回车操作：13)
                * event.keyCode 获得按键码
            iii) 可以通过event对象阻止冒泡，阻止默认行为
                * 取消冒泡：e.cancelBubble=true ;
                * 取消默认行为： 只需要在函数中return false就可以了。
    (7.2) window常用的方法
        注意： 所有window的使用都可以省略window.
            * document,event,location
        a) window.alert(); 显示提示框
        b) window.confirm(); 显示询问框
            * 会根据选择的“确认”或“取消”返回一个boolean
        c) window.open(); 发送请求，在一个新窗口显示
            * open('http://www.baidu.com');
            * 可以像超链接一样，请求的内容在指定的窗口展示
                open(url,target) ;
                open('http://www.baidu.com","_self/_blank/_parent");
            * open(url,"_blank","width=500,height=500,left=100,top=100")
        d) 定时器
            var timer = window.setTimeout(function(){
                //延迟1000毫秒执行(一次)
            },1000);
                * timer称为定时器对象，可以用来阻止定时器
            window.clearTimeout(timer);
            
            
            var timer = window.setTimeout(function(){
                //每隔1000毫秒执行(n次)
            },1000);
            window.clearInterval(timer);
    (7.3)
        * 在js中我们所谓的全局变量和函数其实也是有所属，属于window对象
            function t1(){
                var i = 10 ; //i变量属于t1函数，只能在t1函数中使用
            }
            var obj = {i:10} ; //此时i称为obj对象的属性 obj.i, 表示i属于obj对象
            var obj = {eat:function(){}} ;//此时function函数称为obj对象方法，属于obj对象
            -----------
            var i = 10 ;     //此时i称为全局变量，所有的函数都可以使用，不在属于某一个函数
            function t2(){} //t2,t3函数也不属于某一个对象，我们认为是一个独立的功能
            function t3(){}
            
            * 其实这些全局变量和我们认为的独立函数也属于某一个对象，window
            
            i , t2()
            window.i , window.t2()
    (7.4) window事件
        window.onload = function(){}
        * 浏览器初始化事件，当浏览器加载完毕网页内容时，就会触发当前的事件函数

以上便是javascript必知必会内容，是java后端学习网页展示的基础，大家有什么问题可以在评论区提问，感觉有帮助的可以点个赞和关注，谢谢大家