02.ECMAScript面向对象

作者: 艾特小师叔 | 来源:发表于2019-07-13 17:59 被阅读0次

Javascript入门

字符串

1.字符串的创建

1.1 字面量

            //方式一: 字面量
            var str = "我是字符串";
            var str1 = '我是15行';
            console.log(typeof str);
            console.log(typeof str1);

1.2 使用构造方法

            //方式二:  使用构造方法
            var str2 = new String("我是19行");
            var str3 = String("我是20行");
            console.log(typeof str2);

注意：使用字面量创建的字符串(方式一),是基本数据类型，使用构造方法创建的字符串是引用类型

2.字符串的属性 length 字符串长度

            //字符串中的属性: length  表示字符串的长度
            console.log(str.length);
            console.log(str2.length);

3.字符串中方法

3.1 根据下标获取指定字符 charAt(index)

3.2 拼接字符串 concat(str)

3.3 替换字符串 replace

3.4 截取字符串 slice(startIndex,endIndex)

3.5 截取字符串 substring(startIndex,endIndex)

3.6 字符串分割 split(str)

3.7 字符串写转小写 toLocaleLowerCase()

3.8 字符串转大写 toLocaleUpperCase()

            // 根据下标获取指定字符  charAt(index) 下标从0开始
            console.log("123456".charAt(1));
            // 拼接字符串 concat(str)
            console.log("Hello".concat(" World"));
            //替换字符串 replace 在Javascript中,replace 默认只会 一个
            console.log("aaabbbccc".replace("a","m"));
            //使用正则进行全局匹配 替换
            console.log("aaabbbccc".replace(/a/g,"m"));
            //截取字符串 slice(startIndex,endIndex) : [startIndex,endIndex )
            console.log("0123456".slice(0,2));
            //截取字符串 substring(startIndex,endIndex) : [startIndex,endIndex )
            console.log("0123456".substring(0,2));
            //字符串分割 split(str) : 按照指定字符 将字符串转化为数组
            var arr = "1-2-3-4".split("-");
            console.log(arr);
            //toLocaleLowerCase() : 将字符串大写转化为小写
            console.log("abcDm".toLocaleLowerCase());
            //toLocaleUpperCase() : 将字符串小写转化为大写
            console.log("abcDm".toLocaleUpperCase());

数组

1.数组的创建

创建方式一：字面量

            //方式一:字面量
            var str = "我是字符串";
            //在javascript 可以通过 字面量 中括号的形式创建数据
            var arr = [1,2,3,4];
            console.log(arr);

方式二：使用构造方法

            //方式二: 构造方法
            var arr1 = new Array(1,2,3,4,5);
            console.log(arr1);

注意点：

            //注意:1.在javascript 数组中可以存储任意类型,建议存储相同类型
            var arr = [1,"字符串",true,NaN];
            var arr = new Array(1,"字符串",true,NaN);
            console.log(arr);
            // 2.使用构造方法在创建数组时,若只有一个参数,此时表示数组的长度,若多个参数,则是数组的元素
            var arr = new Array(5);
            console.log(arr);
            //3. 在javascript中 数组不存在下标越界
            var arr = [0,1,2,3];
            console.log(arr[0]);
            console.log(arr[1]);
            console.log(arr[2]);
            console.log(arr[3]);
            console.log(arr[4]);
            // 4. 在Javascript中，数组时没有长度大小限制的 
            var arr = new Array(2);
            console.log(arr);
            arr[0] = 1;
            arr[1] = 2;
            arr[2] = 3;
            console.log(arr);

2.数组的属性:length

            //数组的length属性
            console.log(arr.length);

3.数组的访问：数组是通过下标进行访问，数组的下标初始值是0

            /**
             * 数组的访问: 数组是通过下标进行访问,第一下标值是  0
             */
            var arr = [0,1,2,3,4,5];
            for(var i = 0;i<arr.length;i++){
                console.log(arr[i]);
            }
            //数组的修改也是通过下标进行修改
            arr[0] = "我是第一个值";
            console.log(arr);
            //数组添加数组
            arr[arr.length] = "我是最后一个";
            console.log(arr);

4.数组中的方法

4.1 向数组的末尾添加一个或多个元素：push（obj）

            /**
             * 数组中的方法
             * push(obj):向数组末尾添加一个或多个元素
             */
            var arr = [1,2,3];
            arr.push(4);
            console.log(arr);
            arr.push(5,6,7,8);
            console.log(arr);

4.2 向数组前面添加一个或多个元素：unshift（obj）

            /**
             * 向数组前面添加一个或多个元素 unshift(obj)
             */
            var arr = [1,2,3,4,5];
            arr.unshift(0);
            console.log(arr);
            arr.unshift(-3,-2,-1);
            console.log(arr);

4.3 删除数组中最后面的元素pop()

            /**
             * 删除数组中  最后面的元素 pop
             */
            var arr = [1,2,3,4,5];
            arr.pop();
            console.log(arr);

4.4 删除数组中最前面的元素shift()

            /**
             * 删除数组中  第一个元素
             */
            var arr = [1,2,3,4];
            arr.shift();
            console.log(arr);

4.5 批量修改数组splice（startIndex，deleteCount，items）

**startIndex:数组操作的开始下标必填 **

deleteCount：删除的元素个数必填

items：元素项选填

            /**
             * 修改数组
             * splice（startIndex，deleteCount，items）
             */
            var arr = [1,2,3,4,5,6];
            // 从第一个元素开始,删除  2个元素  1,2  ---> 3 4 5 6
            arr.splice(0,2);
            console.log(arr);
            //从指定下标开始 删除指定个数 使用item 从开始下标处替换
            var arr = [1,2,3,4,5,6];
            arr.splice(0,2,"第一个","第二个","第三个");
            console.log(arr);

了解：

1.转义符 \

在Javascript中，一些符号都有自身的意义，此时若需要使用这个符号本身，则需要进行转义。

/**
             * 转义符： \
             */
            var str = "\" 毛爷爷说:革命尚未成功,同志们,还需好好学习,你们是89点钟的太阳,充满朝气\"";
            console.log(str);

2.字符串域

            /**
             * 字符串域  使用 `` 包裹的都是字符串
             */
            var str = `"好好学习,天天向上"`;
            console.log(str);

3.编码转码

数据提交方式一般有2种：一种是get 一种是post.

1.get提交的数据在地址栏中

2.post提交的数据在协议内部

若存在中文，且必须要使用get提交，可能会出现乱码，此时可使用JS进行编码然后进行传输。

3.1 编码 encodeURIComponent(str)

在Javascript中,若有汉字或特殊符号要在URL上进行传输，此时可使用encodeURIComponent进行编码。

            /**
             * 编码  encodeURIComponent(str)
             * 
             */
            var url = "http://www.baidu.com?s=";
            var keywords = encodeURIComponent("小丽");
            console.log(keywords);
            console.log(url+keywords);

3.2 解码decodeURIComponent（str）：

在Javascript中，若字符串存在编码，需通过decodeURIComponent进行解码

    var key = decodeURIComponent("%E5%B0%8F%E4%B8%BD");
    console.log(key);

注意点：

1.在Java中，可以通过URLEncoder类进行字符串编码

2.在Java中，可以通过URLDecoder类进行解码

函数

1.函数的定义

有特定功能的代码块，就是函数

2.函数的语法

2.1 关键 function

2.2 语法

function 函数名（参数）{

代码块;

return 返回值;

}

            /**
             * 函数的语法： function
             *   function 函数名 (参数){
                    代码块;
                    return 返回值;
                }
                注意：
                1.在Javascript中  函数是没有返回值类型
                2.在Javascript 中参数是没有类型的
                3. 在Javascript中 使用return 返回结果
                4. 在Javascript中 调用函数时,无需传入指定个数个参数
             */
            function f1(m,n){
                console.log(m);
                console.log(n);
                return m + n;
            }
            
            f1();
            f1(1);
            f1(1,2);
            var s = f1(1,2);
            console.log(s);

2.3 匿名函数和函数表达式

            /**
             * 匿名函数
             *  在Javascript中,若定义一个函数,不指定名称此时 就是匿名函数
             * 函数表达式 将匿名函数赋值给变量  这种是函数表达式
             */
            var m = function (){
                console.log("你好");
            }
            console.log(typeof m);
            console.log(typeof f1);

3.函数的使用

3.1.通过函数名称，传入响应的参数进行调用。

3.2.定义变量可以接收函数运算返回的结果

4.arguments 参数对象

arguments 表示当前函数运行的参数。

4.1 length : 实际参数的个数

4.2 arguments[下标]：根据下标获取实际参数值

4.3 calleee(参数)：callee 表示当前函数

5.Javascript中函数的注意点

5.1.在Javascript中函数是没有返回值类型
5.2.在Javascript 中参数是没有类型的

5.3.在Javascript中使用return 返回结果

5.4.在Javascript中调用函数时,无需传入指定个数个参数

对象

1.对象的定义

是一个包含属性和函数的特殊数据类型.

2.对象的创建

方式一：通过new关键字进行创建

            /**
             * 对象的创建 
             * 方式一： 通过new 关键字进行创建
             */
            //此时创建了一个空对象
            var o = new Object();
            console.log(o);
            //为o 对象新增了  name属性  且值 韩梅梅
            o.name = "韩梅梅";
            console.log(o);
            o.study = function(){
                console.log("我是第20行");
            }
            o.study();
            console.log(o);

注意：此时创建的对象都是空对象，没有任何属性和方法，需要手动添加

方式二：通过字面量

            //字面量的方式
            /**
             * 语法：
             *  var 对象名 = {
                 属性名: 属性值
                 ......
             }
             注意:多个之间使用,号分隔
             */
            var obj = {
                name : '我是属性的值',
                age : 18,
                11:27,
                study: function(){
                    console.log("我是第29行");
                }   
            }
            console.log(obj.name);
            console.log(obj.age);
            obj.study();

注意: 属性值是固定的

方式三：构造函数创建

            //构造函数 创建对象
            function Student(name,age){
                this.name = name;
                this.age = age;
                this.study = function (){
                    console.log("好好学习,天天向上");
                }
            }
            var st1 = new Student("韩梅梅",18);
            console.log(st1.name +"  "+st1.age);
            var st2 = new Student("李磊",18);
            console.log(st2.name +"  "+st2.age);
            st2.study();

3.对象使用

1.对象通过.可以访问自己的属性和方法

2.对于特殊的属性也可以通过[属性名]进行访问

4.this关键字

this指的当前对象

1.若在方法中，则是调用当前方法的对象

2.若在构造函数中，则是当前创建的对象

3.全局属性都是window对象的属性

Date

        /**
         * Date 时间对象 
         */
        var date = new Date();
        //获取年份
        console.log(date.getFullYear());
        //获取月份  0 - 11
        console.log(date.getMonth()+1);
        //获取 日 
        console.log(date.getDate());
        //获取一周的某一天
        console.log(date.getDay());
        //获取小时
        console.log(date.getHours());
        //获取分
        console.log(date.getMinutes());
        //获取秒
        console.log(date.getSeconds());
        //获取毫秒
        console.log(date.getMilliseconds());
        //获取从1970年1月1日 到现在的毫秒数
        console.log(date.getTime());
        console.log(window);
        //document ---> 文档
        //document.write 向body中输出了一段字符串
        document.write("Today's date is "+new Date());
        document.write("<div><a href='http://www.baidu.com' style='color:red'>百度</a></div>")

案例：日历

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>日历案例</title>
        <style type="text/css">
            .box1{
                width: 300px;
                height: 300px;
                background-color: blue;
                position: relative;
                margin: auto;
            }
            p{
                text-align: center;
                color: azure;
                font-size: 20px;
                top: 30px;
                height: 50px;
                line-height: 50px;
            }
            .box2{
                width: 150px;
                height: 150px;
                background-color: green;
                position: absolute;
                bottom: 20px;
                left: 75px;
                text-align: center;
                line-height: 150px;
                font-size: 40px;
                font-weight: 900;
                color: aquamarine;
            }
        </style>
    </head>
    <body>
        
    <script type="text/javascript">
        var html = `<div class="box1"><p>today</p><div class="box2">day</div></div>`;
        var week = ["星期日","星期一","星期二","星期三","星期四",  "星期五","星期六"];   
        var date = new Date();
        var today = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+week[date.getDay()];
        html = html.replace("today",today);
        var day = date.getDate();
        html = html.replace("day",day);
        document.write(html);
    </script>
    </body>
</html>

定时器

1.周期性定时器:setInterval(fun,time)

            /**
             * setInterval(fun,time): 周期性的定时器
             * fun : 周期性执行的函数
             * time : 执行周期 单位  毫秒
             */
            /* setInterval(function(){
                console.log("我执行了");
            },1000); */
            function task (){
                console.log("我是18行");
            }
            setInterval(task,1000);

2.一次性的定时器:setTimeout(fun,time)

            /**
             * 一次性执行的setTimeout(fun,time)
             * fun : 执行的函数
             * time :延迟执行的时间
             */
            setTimeout(function(){
                console.log("我是第27行");
            },10000); 
            function task2(){
                console.log("我是第30行");
            }
            setTimeout(task2,10000);

3.清除定时器:clearInterval(obj)

            /**
             * clearInterval(timerObj):
             * 结束定时器
             * timerObj : 定时器对象
             */
            var m = 0;
            var timer = setInterval(function(){
                console.log("我是第35行");
                m++;
                if(m == 3){
                    //终止定时器
                    clearInterval(timer);
                }
            },1000);

Javascript调试

方式一：

1.按F12

2.找到JS代码---Source

[图片上传失败...(image-d7b7b4-1563350181418)]

3.在最最侧打断点

4.当鼠标移动到变量上时会显示变量值

5.通过右侧Watch 手动添加需要监视的变量

[图片上传失败...(image-edbb0-1563350181419)]

6.通过右侧上方的功能按钮进行debug操作

[图片上传失败...(image-ccbb5f-1563350181419)]

方式二：

通过debugger关键字，进行强制debug操作。

DOM入门

1.DOM定义 Document Object Model

在我们HTML中，本质上也是一个DOM模型，HTML是根节点，下面涵盖多个子节点。

body节点就是在窗口中显示的内容。浏览器有内置对象：window,window对象下面有document属性

document就涵盖整个页面的DOM对象

2.DOM查找

2.1.根据ID查找： getElementById(id的值) 返回单个dom对象

2.2.根据class属性值查找：getElementsByClassName(class值) 返回dom集合

2.3.根据标签名查找： getElementsByTagName(标签名称) 返回dom集合

        //getElementById(id值): 根据ID查找标签 返回单个对象
            var div = document.getElementById("divId");
            console.log(div);
            //getElementsByClassName(class的值): 根据class属性查找标签
            var divs = document.getElementsByClassName("divClass");
            console.log(divs);
            for (var i = 0; i < divs.length; i++) {
                console.log(divs[i])
            }
            //getElementsByTagName(): 根据标签名称 获取 标签集合
            var divs = document.getElementsByTagName("div");
            console.log(divs);

3.DOM事件入门

DOM事件3要素：事件源、事件类型、事件程序

            /**
             * 事件：
             *  事件源 ：在哪发生
             *  事件类型： 什么事件
             *  事件程序： 函数
             */
            function fun1(){
                console.log("我是事件程序");
            }
            /**
             * 此时  button 是事件源
             * onclick: 事件类型
             * fun1 ：事件程序
             */

4.DOM内容操作

在HTML中，页面标签的内容：标签或者文本

4.1.innerHTML:用于获取或设置DOM的内容

4.2.innerText：用于获取或设置DOM的文本内容

            /**
             * DOM的内容操作
             * innerHTML: 获取DOM的内容或设置内容
             * innerText: 获取DOM的文本内容设置文本内容
             * 
             */
            var div = document.getElementById("divId");
            console.log(div);
            //innerHTML 子标签及子标签中的文本都会获取
            var child = div.innerHTML;
            console.log(child);
            //innerText 只获取文本内容
            var childText = div.innerText;
            console.log(childText);
            
            var div3 = document.getElementById("div3");
            //innerHTML 设置内容时,若是标签会处理为标签
            div3.innerHTML = "<a href='http://www.baidu.com'>百度</a>";
            //innerText 设置内容时,设置文本内容
            div3.innerText = "<a href='http://www.baidu.com'>百度</a>";
            /**
             * 注意点： innerHTML 和innerText 在设置内容时 都会覆盖DOM的内容
             */

注意： innerHTML 和innerText 在设置内容时都会覆盖DOM的内容

5.DOM的属性操作

方式一：DOM对象.属性名获取或设置属性

方式二：使用Javascript内置的属性操作方法：

获取属性值：getAttribute(属性名)

设置属性值： setAttribute(属性名,属性值)

删除属性： removeAttribute(属性名)

判断是否有该属性：hasAttribute(属性名)

/**
             * DOM的属性操作：
             *  一般而言，Javascript 操作DOM的属性，只需要
             * DOM对象.属性 进行获取属性值和设置属性值
             */
            var img = document.getElementById("img");
            //设置DOM属性值
            img.src = "img/tk.jpg";
            //获取DOM的属性值
            console.log(img.src);
            //获取DOM对象
            var input = document.getElementById("input");
            //通过DOM对象操作属性
            var v = input.value;
            console.log(v);
            //设置input  value属性值
            input.value="我是新的字符串";
            /**
             * 注意：在操作DOM的class属性，不能使用class  要使用className
             */
            function changeColor(){
                console.log("我真的被点击了!");
                var div2 = document.getElementById("div2");
                //div2.className = "box2";
                div2.setAttribute("class","box2");
            }
            //找到checkbox
            var ck1 = document.getElementById("ck1");
            //checked : 设置选中
            ck1.checked = true;
            //通过方法设置:
            /**
             * 获取属性值 ：getAttribute(属性名)
             * 设置属性值 ： setAttribute(属性名,属性值)
             * 删除属性： removeAttribute(属性名)
             * 判断是否有该属性：hasAttribute(属性名)
             */
            var img = document.getElementById("mv");
            //获取属性值
            var src = img.getAttribute("src");
            console.log(src);
            //设置属性值
            img.setAttribute("title","程序员鼓励师");
            //判断是否存在某个属性
            console.log(img.hasAttribute("src"));
            //删除指定属性
            img.removeAttribute("title");
            //注意:使用Javascript 内置的属性操作方法时,操作class属性无需使用className,应使用class