java_01_01_js

Posted 2020-10-02

1、js的String对象
    * 属性：length，字符串的长度

    * 方法
    ** 与html相关的方法
        *** bold()：加粗字符串
        *** fontcolor(): 设置字体的颜色
        *** fontsize()：设置字体的大小
        *** link(): 把字符串设置成超链接
        *** sub(): 下标
        *** sup()：上标

    ** 与java相似的方法
        *** charAt(): 返回指定位置的字符
        **** 代码 字符的位置从0开始，使用这个方法的使用，如果位置超过了字符串，显示空字符串
        //charAt方法
        var str = "abcd";
        document.write(str.charAt(4));

        *** concat()：连接字符串
        **** 代码
        var str1 = "java";
        document.write(str.concat(str1));

        *** indexOf()：检索字符串
        **** 代码  如果字符存在，返回位置；如果不存在返回的是-1
        var str2 = "ABCDEFG";
        document.write(str2.indexOf("T"));

        *** substr()：两个参数 比如 substr(1,3)
            - 第一个参数：从哪个位置开始，字符串的开始位置是0
            - 第二个参数：从哪个位置开始，向后取几位字符

        *** substring()：两个参数 比如 substring(1,3)
            - 第一个参数：从哪个位置开始，字符串的开始位置是0
            - 第二个参数：到哪个位置结束，但是不包含结束的位置 [1,3)
        **** 代码
        //substr和substring方法
        document.write("<hr/>");
        var str3 = "abcdefg";
        document.write("substr: "+str3.substr(1,3));  // bcd
        document.write("<br/>");
        document.write("substring: "+str3.substring(1,3)); // bc  [1,3)

2、js的Array对象
    * 创建数组（三种方式）
    ** var arr1 = [1,2,3];
    ** var arr2 = new Array(4);
    ** var arr3 = new Array(5,6,7);

    * 属性：length，数组的长度
    ** //length属性
    var arr1 = [1,2,3,4];
    document.write(arr1.length);

    * 方法
    ** concat()：连接数组
    *** 代码
    //concat()方法
    document.write("<hr/>");
    var arr2 = [6,7,8];
    document.write(arr1.concat(arr2));

    ** join(): 根据指定的分割符进行分割
    *** 代码
    //join方法
    document.write("<hr/>");
    var arr3 = ["AA","BB","CC"];
    document.write(arr3);
    document.write("<br/>");
    document.write(arr3.join("-"));

    ** push()：向数组的末尾添加元素，返回添加之后的长度
    *** 代码
    //push方法
    document.write("<hr/>");
    var arr4 = ["tom","jack","mary"];
    document.write("before: "+arr4);
    document.write("<br/>");
    document.write("length: "+arr4.push("zhangsan"));
    document.write("<br/>");
    document.write("after: "+arr4);

    *** 如果使用push方法添加的是一个数组，把数组当成一个整体（元素）添加进去
    //使用push添加数组
    document.write("<hr/>");
    var arr5 = ["A","B","C"];
    var arr6 = ["T","Q","W"];
    document.write("before: "+arr5);
    document.write("<br/>");
    document.write("length: "+arr5.push(arr6));
    document.write("<br/>");
    document.write("after: "+arr5);
    for(var i=0;i<arr5.length;i++) {
        alert(arr5[i]);
    }

    ** pop() 删除并返回数组的最后一个元素
    *** 代码
    //pop()方法
    document.write("<hr/>");
    var arr7 = ["zhangsan","lisi","wangwu"];
    document.write("before: "+arr7);
    document.write("<br/>");
    document.write("return: "+arr7.pop());
    document.write("<br/>");
    document.write("after: "+arr7);

    ** reverse() 颠倒数组中元素的顺序。
    *** 代码
    //reverse() 颠倒数组中元素的顺序。
    document.write("<hr/>");
    var arr8 = [10,20,30];
    document.write(arr8);
    document.write("<br/>");
    document.write(arr8.reverse());

3、js的Date对象
    * 创建Date对象 var date = new Date();

    * 方法
    ** toLocaleString()：把时间转换成本地格式的时间
    *** 代码
    var date = new Date();
    document.write(date.toLocaleString());

    ** 得到当前的年  getFullYear() 从 Date 对象以四位数字返回年份
        //得到当前的年
        document.write("<hr/>");
        document.write(date.getFullYear());
    
    ** 得到当前的月 getMonth() 从 Date 对象返回月份 (0 ~ 11)
        ** 返回值 0-11，得到准确的月份 +1
        document.write(date.getMonth()+1);
    
    ** 得到当前的星期 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)
        *** 如果当前的时间是星期日，通过这个方法得到值是0
    
    ** 得到当前的天 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
        //得到当前的天
        document.write("<hr/>");
        document.write(date.getDate());
    
    ** 得到当前的小时  getHours()

    ** 得到当前的分钟  getMinutes()

    ** 得到当前的秒   getSeconds()
    *** document.write(date.getHours()+" - "+date.getMinutes()+" - "+date.getSeconds());

    ** 得到毫秒数： getTime() 返回 1970 年 1 月 1 日至今的毫秒数
        *** document.write(date.getTime());  防止页面的缓存

4、js的Math对象
    * 在Math里面的方法是静态方法，直接使用Math.方法名称调用

    ** ceil(x) 对一个数进行上舍入。
        * 只要小数点后面有值，+1
    ** floor(x) 对一个数进行下舍入。
        * 小数点后面无论是几，舍去
    ** round(x) 把一个数四舍五入为最接近的整数

    **var m = 10.4;
    document.write(Math.ceil(m));  // 11
    document.write("<br/>");
    document.write(Math.floor(m)); // 10
    document.write("<br/>");
    document.write(Math.round(m)); // 11

    ** random()：得到随机数
        *** document.write(Math.ceil(Math.random()*10));

5、js的全局函数
    * 方法不属于任何一个对象，这些方法使用，直接写方法名称来使用
    
    * 方法
    ** eval()：比如字符串是一个js代码，使用这个方法执行js代码
    ***     var str = "alert(‘abc‘);";
        //alert(str);
        eval(str);
    
    ** encodeURI(): 对字符串进行编码
    ** decodeURI()：对编码之后的字符串进行解码
    ***     var str1 = "aacc测试中文";
        var encode1 = encodeURI(str1);
        document.write(encode1);
        document.write("<hr/>");
        var decode1 = decodeURI(encode1);
        document.write(decode1);

    ** isNaN():判断是否是数字
        ** 返回的值是true和false
        *** 如果是一个数字，返回false
        *** 如果不是一个数字，返回true

    ** parseInt()： 转换成数字

6、js的函数的重载
    * js里面不存在函数重载
    * 在js的函数里面有一个数组是 arguments
    ** arguments数组用于存储向方法里面传递的参数
    ** 使用arguments模拟重载的效果
        //模拟重载的效果
        function add1() {
            var sum = 0;
            //遍历数组
            for(var i=0;i<arguments.length;i++) {
                sum += arguments[i];
            }
            return sum;

    * js里面存在重载吗？    
    ** js里面不存在重载
    ** 但是可以通过函数里面arguments数组模拟重载的效果

7、js的bom对象
    * bom：browser object model，浏览器对象模型
    * 在bom里面提供了一些对象，使用这些对象可以操作

    * navigator：得到浏览器的一些信息
        document.write(navigator.appName);

    * screen：得到屏幕信息
        document.write(screen.width+" "+screen.height);

    * location：使用属性href，第一个功能：得到当前请求的地址；第二个功能：设置请求的地址
        ** 第一个功能：document.write(location.href);
        ** 第二个功能：location.href = "hello.html";
        *** 知识引入，在表单输入项里面，button，<input type="button" value="href" onclick="js的方法"/>
        *** 在button上面属性 onclick，表示是鼠标点击事件 onclick="js的方法"

    * history：得到请求的地址的历史
        ** 创建三个页面
        ** //到上一个页面
        function forward1() {
            history.back();
        }

        //到下一个页面    
        function next1() {
            history.forward();
        }

        ** 还有一个方法实现相同的效果 go()
        history.go(-1);
        history.go(1);
    
    * window（****）：窗口对象，是一个顶层对象
    ** 方法
    *** alert()：在页面弹出一个框
    *** confirm()：确认框
        //confirm方法
        var flag = window.confirm("确认删除?");
        //alert(flag);
        if(flag) {
            alert("删除成功");
        } else {
            alert("删除失败");
        }
    
    *** prompt(): 输入框
        window.prompt("please input:","10");
    
    *** open(): 打开一个新窗口
        * window.open("打开页面url地址","","窗口特征");
        * window.open("hello.html","","width=200,height=100");

    *** close()：关闭窗口

    *** 两个很重要的方法（用于定时器效果）
    **** setInterval("js代码",毫秒数): 表示在一定的时间内，重复执行js代码
        *** window.setInterval("alert(‘12345‘);",3000);

    *** setTimeout("js代码",毫秒数)：表示在一定时间之后，执行js代码一次
        *** window.setTimeout("alert(‘abc‘);",4000);
    
    *** clearInterval() 取消由 setInterval() 设置的 timeout。
        window.clearInterval(id1);
    *** clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
        window.clearTimeout(id2);


8、js的dom对象
    * document object model: 文档对象模型
    ** 文档：标记型文档 html xml
    ** 对象：对象里面有属性和方法
    *** 使用js的dom里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作

    ** 如果想要对标记型文件进行操作，首先解析标记型文档
    *** 第一步：需要把标记型文档里面的所有内容都封装成对象
        ** 标签 、 属性、 文本内容都封装成对象
    
    *** 使用dom解析html过程（画图分析过程）
    ** 根据html的层级结构在内存中分配一个树形结构
    ** dom里面提供了很多的对象，使用这些对象可以对html进行操作
    ** document对象：整个文档
    ** element对象：标签对象（元素对象）
    ** 属性对象
    ** 文本对象
    ** Node节点对象，这个对象是其他对象的父对象

9、DHTML的介绍
    * 不是一种技术，是很多技术的简称

    * html： 封装数据的作用
    * css：使用属性和属性值添加样式
    * ECMAScript: 专门js的语句和语法
    * dom：对标记型文档进行操作

10、document对象
    * document对象代表整个文档
    **通过document对象可以得到html中标签对象

    ** 方法
    *** getElementById(): 可以通过id得到标签的对象
    *** 如果想要得到标签里面的属性的值：标签对象.属性名称
    ****     //得到的是input标签对象
        var input1 = document.getElementById("testid");
        //得到input标签里面的value的值
        alert(input1.value);
    
    *** getElementsByName(): 通过name的值得到所有标签，返回的是一个数组,
    **** 遍历数组得到每一个标签对象，通过标签对象名称.属性名称, 得到属性值
    ****     var inputs1 = document.getElementsByName("testname");
        //alert(inputs1.length);
        //遍历数组
        for(var i=0;i<inputs1.length;i++) {
            //获取每一个input对象
            var input1 = inputs1[i];
            //得到每一个input的value值
            alert(input1.value)
        }

    **** 如果要得到的标签只有一个，如果也是通过name属性得到，返回的也是一个数组，而不是一个对象
    **** 可以直接通过数组的下标获取标签对象，通过标签对象名称.属性名称, 得到属性值
    **** var inputs2 = document.getElementsByName("username")[0].value;

    *** getElementsByTagName(): 根据标签名称得到标签的对象，返回的是一个数组,
    **** 遍历数组得到每一个标签对象，通过 标签对象名称.属性名称, 得到属性值
    ****     //getElementsByTagName，返回是数组
        var inputs3 = document.getElementsByTagName("input");
        alert(inputs3.length);
        //遍历数组
        for(var a=0;a<inputs3.length;a++) {
            //得到每一个input标签对象
            var input3 = inputs3[a];
            //得到value的值
            alert(input3.value);
        }
    **** 如果要得到的标签只有一个，如果也是通过name属性得到，返回的也是一个数组，而不是一个对象。
    **** 可以直接通过数组的下标获取标签对象，通过 标签对象名称.属性名称, 得到属性值
    **** var inputs4 = document.getElementsByTagName("input")[0]; //返回数组
    
    *** write方法：向页面输出内容，输出html代码



11、debug调试（断点调试模式）
    * 首先设置断点，双击左边，出现蓝色的点
    * 运行程序，不要使用run as，而要使用debug as运行
    * 单步执行 快捷键 F6

    * 去掉断点


12、内容补充
    * list的遍历常用三种方式：普通for循环，迭代器，增强for
    * set的遍历两种：迭代器，增强for
    * map的遍历两种：第一种得到所有的key，通过key得到value；第二种得到key和value的关系

    * 可变参数 public void get1(int...nums){}
    ** 在方法的参数列表中只能有一个可变参数，可变参数放到参数列表的最后

    * 泛型 List<Integer> list = new ArrayList<Integer>();
        Map<String,String> map = new HashMap<String,String>();
    
    * 自动拆装箱
    ** 装箱：把基本数据类型转化成包装类
    ** int：Integer
    ** char：Character

 

1、案例：在末尾添加节点
    * 步骤
    第一步：创建li标签
        document.createElement("标签名称");
    第二步：创建文本
        document.createTextNode("文本内容");
    第三步：把文本放到li下面
        li.appendChild(node);
    第四步：把li放到ul下面
        ul.appendChild(node)
    * 代码
    function add1() {
        //创建li标签
        var li1 = document.createElement("li");
        //创建文本
        var tex1 = document.createTextNode("DDD");
        //把文本添加到li下面
        li1.appendChild(tex1);
        //把li添加到ul的下面
        //获取到ul标签
        var ul1 = document.getElementById("ulid");
        ul1.appendChild(li1);
    }

2、Element对象（标签对象）
    * 首先要得到标签对象

    * 获取属性：getAttribute(name)方法。
        * //getAttribute(name)方法：得到属性的值
        var input1 = document.getElementById("textid");
        //alert(input1.value);
        alert(input1.getAttribute("value"));

    * 设置属性：setAttribute(name,value)方法。
        * //setAttribute(name,value)方法
        alert(input1.getAttribute("name"));
        input1.setAttribute("name","textname");
        alert(input1.getAttribute("name"));

    * 删除属性：removeAttribute(name)方法。
        * alert(input1.id);
        input1.removeAttribute("id");
        alert(input1.id);
        * 不能删除value的值

    * 得到标签下面的子标签的操作
        ** childNodes属性，得到标签下面的子标签，浏览器的兼容性很差，所以一般不使用这个属性
        ** 获取标签下面的子标签的唯一有效方法，是使用getElementsByTagName()方法
        //getElementsByTagName()方法
        var lis1 = ul1.getElementsByTagName("li");
        alert(lis1.length);

3、Node对象
    * Node节点对象，是其他对象的父对象
    * 属性
        * 在dom解析时候，需要把html的所有部分都封装成对象，包含标签 属性 文本
        
        * nodeName
        * nodeType
            ** 如果标签对象 1
            ** 如果属性对象 2
            ** 如果文本对象 3
        * nodeValue

        ** 标签对应的属性的值
        var div1 = document.getElementById("div1");
        alert(div1.nodeName);  // DIV (大写的标签名称)
        alert(div1.nodeType);  // 1
        alert(div1.nodeValue); // null

        ** 属性对象对应的node里面的三个属性的值
        var id1 = div1.getAttributeNode("id");
        alert(id1.nodeName); //id 属性名称
        alert(id1.nodeType); // 2
        alert(id1.nodeValue); //div1 属性的值

        ** 文本对象对应的node里面的三个属性的值
        var tex1 = div1.firstChild;
        alert(tex1.nodeName);  //#text
        alert(tex1.nodeType);  // 3
        alert(tex1.nodeValue); //文本内容

        * parentNode：获取父节点
        ** //获取到li的标签
        var li1 = document.getElementById("li1");
        //得到父标签ul
        var ul1 = li1.parentNode;
        alert(ul1.id);

        * 父节点，子节点，同辈节点

    * 方法
    ** appendChild()：
    *** 添加到末尾
    *** 特点：类似剪切黏贴的效果

    ** insertBefore(newNode,oldNode): 可以在某个节点之前插入
    ** 方法里面有两个参数：第一个参数要添加的节点，第二个参数是在谁之前添加
    ***     /*
        1、得到在谁之前添加的节点 li4
        2、创建节点
            * 创建标签 li
            * 创建文本
            * 把文本添加到标签下面
        3、得到ul标签
        4、通过ul标签进行添加 insertBefore(newNode,oldNode)
        */

    ** removeChild()：删除节点
    *** 首先不能自己删除自己，通过父节点删除
    *** /*
        1、得到要删除的标签
        2、得到删除节点的父节点
        3、通过父节点删除 removeChild()
        */
    
    ** replaceChild(newNode,oldNode)方法:替换节点
    ** 有两个参数：第一个替换成的节点，第二个被替换的节点
    ** /*
        1、得到要替换的节点
        2、创建新的节点
            * 创建标签
            * 创建文本
            * 把文本添加到标签下面
        3、获取父节点
        4、通过父节点进行替换
     */

     ** cloneNode(boolean)方法:复制节点
     *** 参数：是否复制子节点
     ***     //得到ul标签
        var ul1 = document.getElementById("ul1");
        var ul21 = ul1.cloneNode(true)
        //放到div里面
        var divv = document.getElementById("divv");
        divv.appendChild(ul21);
    
4、Node方法的总结
    * 获取标签对象
    ** getElementById("id的值")
    ** getElementsByName("name的值")：返回数组
    ** getElementsByTagName("标签名称")：返回数组

    * 查找标签的子标签的唯一有效方法是 getElementsByTagName("标签名称");

    * appendChild方法：在末尾添加节点，类似剪切黏贴效果
    * insertBefore() replaceChild() removeChild(): 通过父节点操作

5、innerHTML属性
    * 浏览器几乎都支持该属性，但不是 DOM 标准的组成部分。
    * 实现的功能：
    ** 第一个：获取标签里面的文本内容
        *** //得到div标签
        var div11 = document.getElementById("div11");
        alert(div11.innerHTML);
        
    ** 第二个：向标签里面设置内容（文本内容，html代码）
        ** var div12 = document.getElementById("div12");
        //div12.innerHTML = "张三李四王二赵六";
        //向div里面设置表格 <table border=‘1‘><tr><td>123456</td></tr></table>
        div12.innerHTML = "<table border=‘1‘><tr><td>123456</td></tr></table>";
    **  var tab = "<table>";
        tab += "<tr>";
        tab += "</tr>";
        tab += "</table>";

6、案例：动态显示时间
    * 得到当前的时间 var date = new Date();  date.toLocaleString();
    * 步骤
        /*
        1、得到当前的时间
            new Date(); 使用toLocaleString方法
        2、使用定时器向div里面每一秒写一次时间 setInterval("方法",1000);
            * 首先得到div
            * 使用innerHTML属性写时间
        */

7、案例：全选练习
    * 页面 复选框和按钮
    ** 复选框name值必须要一样
    ** 如果判断是否被选中，通过checked属性进行判断
    ***通过属性checked，这个checked==true 表示复选框是选中的，如果checked==false 表示复选框是没有选中
    
    * 步骤
    （1）全选和全不选的操作
    /*
    1、得到要全选的复选框
        * 通过name得到这些复选框 使用方法 getElementsByName()
    2、返回的数组，遍历数组，得到每一个复选框
    3、把每一个复选框属性checked值设置成true | false
    */    

    （2）反选的操作
    /*
    1、得到要全选的复选框
        * 通过name得到这些复选框 使用方法 getElementsByName()
    2、返回数组，遍历数组，得到每一个复选框
    3、判断当前的复选框是选中还是不选中，
        * if语句 checked==true 选中，把checked的值设置成false
        * 如果checked==false 不选中，把checked值设置成true
    */

    （3）使用复选框实现全选和全不选的操作
    /*
    1、判断全选和全不选的复选框的状态
        * 首先得到复选框
        * 使用checked属性进行判断 选中 true 不选中 false
    2、如果是选中，调用全选的方法
    3、如果没有选中，调用全不选的方法
    */

8、案例：下拉列表的左右选择
    * 创建页面
    * 实现思路：
    ** 如果判断是否是选中：使用属性selected进行判断，如果selected==true表示选中状态，selected==true表示没有选中状态
    ** appendChild： 类似剪切黏贴的效果
    ** 把左边的option的标签加到右边的select下面
        *** 首先获取左边选中的option
        *** 获取右边select标签，在select使用方法appendChild
    
    （1）实现选择添加到右边
    /*
    1、得到左边的select标签
    2、得到select1下面的option的标签 使用方法getElementsByTagName方法
    3、返回的是数组，遍历数组，得到每一个option标签
    4、判断是否是选中的状态
        * 使用if语句，使用属性selected进行判断，true是选中，false没有选中
    5、如果是选中状态，添加到右边
        * 获取select2的标签（右边的标签）
        * 在select2的标签执行appendChild方法完成添加
    */

    （2）实现全部添加到右边
    /*
    1、得到左边的select标签
    2、得到select1下面的option的标签 使用方法getElementsByTagName方法
    3、返回的是数组，遍历数组，得到每一个option标签
    4、得到select2的标签
    5、在select2里面执行appendChild方法完成添加
    */

    （3）实现选择添加到左边
    /*
    1、得到右边select标签
    2、得到select下面的option
    3、返回的是数组，遍历数组，得到每一个option
    4、判断每一个option是否是选中的状态
    5、如果是选中的状态，添加到左边
        * 得到左边的select标签
        * 在左边的select标签执行appendChild方法
    */

    （4）实现全部添加到左边
    /*
    1、得到右边select标签
    2、得到select下面的option
    3、返回的是数组，遍历数组，得到每一个option
    4、得到左边的select标签
    5、执行appendChild方法完成添加到左边
    */

    *** 写js的方法名称时候，不要使用单个的单词：add、select
    * add_1()  add1()
    * 不要这样写：_add1();

9、案例：省市联动
    * 创建页面：有两个下拉框，左边下拉框里面有内容，右边空
    * 实现步骤
    /*
    ** 最终结果：点击左边的国家，把国家对应的城市添加到右边的select里面
    实现的步骤：
    ** 使用到事件 onchange事件，改变事件
    ** onchange="add1(this.value);得到当前选择的值
    ** 拿到传过来的值，和数组里面的第一个值进行比较
        *** 首先遍历数组，因为是一个二维数组，每次遍历之后的结果就是一个数组
        *** 获取到遍历之后的数组的第一个值，和传过来的值进行比较

    ** 如果比较的值相同，把第一个值后面的内容添加到第二个select里面
        *** 得到第一个值后面的所有的值，遍历数组，但是遍历需要从1开始
    
    ** 把这个值放到select2里面
        *** 得到select2
        *** 要向select2里面添加的是option标签，但是需要创建（三步）
        *** 把option标签添加到select2下面使用appendChild方法
    
    ** 遇到问题：
    第一个选择国家，在第二个下拉框里面可以正常显示国家的城市，但是第二次在点击一个国家之后，会把第二个国家的城市
    在第一个国家城市后面做一个追加

    ** 解决方法：
    *** 只有调用方法的时候，把右边的下拉框清空（删除右边的select里面的option就可以了）
    *** 使用removeChild方法删除，通过父节点（得到s2）
    */

10、案例：动态生成表格
    * 创建页面：两个输入框和一个按钮（事件）
    * 实现步骤
    /*
    1、得到输入框里面的值
    2、根据输入的值创建表格
        * 生成行 <tr> 使用for循环生成行
        ** 生成列：在tr里面 <td> 使用for循环生成单元格
        * 在最外面要<table>
    3、把生成的表格的代码写到div里面（使用innerHTML属性）
    */
    * 代码片段
    //生成表格的代码
    var tab = "<table border=‘1‘ bordercolor=‘blue‘>";
    //生成行
    for(var i=1;i<=h;i++) {
        tab += "<tr>";
        //循环列
        for(var j=1;j<=lie;j++) {
            tab += "<td>AAAAAAAAAAA</td>";
        }
        tab += "</tr>";
    }
    tab += "</table>";

11、junit单元测试
    * 针对一个方法进行的测试
    * 在java里面默认没有junit的，如果想要使用junit，需要引入支持jar包
    * 但是在myeclipse开发工具中，自带了jar，拿过来直接使用

    * jnnit包含 3.x  4.x  使用4.x
    ** 使用单元测试，写一个单元测试的方法，方法有书写规范， public void get1() { }

    * 使用注解 @Test：表示对方法进行单元测试
    ** 运行单元测试 选择这个方法，点击JUnit Test完成单元测试，当出现绿色的条时候，表示测试通过，但是出现红棕色的条
    表示测试失败