JavaScript二 Li.067

JavaScript 面向对象, 类的定义和使用

定义格式

class 类名{
    constructor(变量列表){
        变量赋值;
    }
    方法名(参数列表){
        方法体;
        return 返回值;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类的定义和使用</title>
</head>
<body>

</body>

<script>
    class Person{
        constructor(name,age) {
            this.name = name
            this.age = age
        }

        // show method
        show(){
            document.write(this.name+" "+this.age+"<br/>");
        }

        eat(){
            document.write("吃饭<br>");
        }
    }

    let p = new Person("张三",23)
    p.show()
    p.eat()
</script>
</html>

字面量定义类和使用

let 对象名 = {
    变量名 : 变量值,
    变量名 : 变量值,
    ...

    方法名 : function(参数列表){
        方法体;
        return 返回值;
    }
    ...
};

使用格式
- 对象名.变量名
- 对象名.方法名();

<script>
    let person = {
        name : "张三",
        age : 23,
        hobby : ["听课","学习"],
        show : function (){
            document.write(this.name+" "+this.age+"<br>")
        },

        eat : function (){
            document.write("吃饭")
        }
    }
    document.write(person.name+person.age+person.hobby[0]+","+person.hobby[1]+"<br/>")
    person.eat()
</script>

继承

继承: 让类与类产生子父类的关系,子类可以使用父类有权限的成员
继承关键字: extends
顶级父类: Object

<script>
    class Person{
        constructor(name,age) {
            this.name = name
            this.age = age
        }

        // show method
        show(){
            document.write(this.name+" "+this.age+"<br/>");
        }
    }

    class Worker extends Person{
        constructor(name,age,salary) {
            super(name, age);
            this.salary = salary
        }
        show(){
            document.write(this.name+this.age+this.salary)
        }
    }

    var w = new Worker("张三",23,10000)
    w.show()
</script

JavaScript 内置对象

Number

方法名       说明
parseFloat() 将传入的字符串浮点数转为浮点数
parseInt()   将传入的字符串整数转为整数

<script>
    // 1. parseFloat() 将传入的字符串浮点数转为浮点数
    document.write(Number.parseFloat("2.333"))
    document.write("<br>")
    document.write(Number.parseFloat("2.333")+2)
    document.write("<br>")

    // 2. parseInt() 将传入的字符串整数转为整数
    document.write(Number.parseInt("100"))
    document.write("<br>")
    document.write(Number.parseInt("100")+20)
    document.write("<br>")
    document.write(Number.parseInt("1100ab"))
    document.write("<br>")

</script>

Math

方法名 说明
ceil(x) 向上取整
floor(x) 向下取整
round(x) 把数四舍五入为最接近的整数
random() 随机数,返回的是0.0-1.0之间范围(含头不含尾)
pow(x,y) 幂运算的x的y次方

<script>
    // ceil(x) 向上取整
    document.write(Math.ceil(4.4))
    document.write("<br>")

    // floor(x) 向下取整
    document.write(Math.floor(4.4))
    document.write("<br>")

    // round(x) 把数四舍五入为最接近的整数
    document.write(Math.round(4.1))
    document.write("<br>")
    document.write(Math.round(4.6))
    document.write("<br>")

    // random() 随机数,返回的是0.0-1.0之间范围(含头不含尾)
    document.write(Math.random())
    document.write("<br>")

    // pow(x,y) 幂运算的x的y次方
    document.write(Math.pow(2,3))
</script>

Date

构造方法                                                  说明
Date()                                                    根据当前时间创建对象
Date(value)                                               根据指定毫秒值创建对象
Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根据指定字段你出去对象(月份是0-11)

成员方法         说明
getFullYear()    获取年份
getMonth()       获取月份
getDate()        获取天数
getHours()       获取小时
getMinutes()     获取分钟
getSeconds()     获取秒数
getTime()        返回距1970年1月1日至今的毫秒数
toLocaleString() 返回本地日期格式的字符串

<script>
    // Date()                                                    根据当前时间创建对象
    let d1 = new Date()
    document.write(d1)
    document.write("<br>")

    // Date(value)                                               根据指定毫秒值创建对象
    let d2 = new Date(20000)
    document.write(d2)
    document.write("<br>")

    // Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根据指定字段你出去对象(月份是0-11)
    let d3 = new Date(2022,9,3,4,5,6)
    document.write(d3)
    document.write("<br>")


    // getFullYear()    获取年份
    document.write(d3.getFullYear())
    document.write("<br>")

    // getMonth()       获取月份
    document.write(d3.getMonth())
    document.write("<br>")

    // getDate()        获取天数
    document.write(d3.getDate())
    document.write("<br>")

    // getHours()       获取小时
    document.write(d3.getHours())
    document.write("<br>")

    // getMinutes()     获取分钟
    document.write(d3.getMinutes())
    document.write("<br>")

    // getSeconds()     获取秒数
    document.write(d3.getSeconds())
    document.write("<br>")

    // getTime()        返回距1970年1月1日至今的毫秒数
    document.write(d3.getTime())
    document.write("<br>")

    // toLocaleString() 返回本地日期格式的字符串
    document.write(d3.toLocaleString())
    document.write("<br>")

</script

String 内置对象

构造方法 说明
String(value) 根据指定字符串创建对象
let s="字符串" 直接赋值

成员方法 说明
length属性           获取字符串长度
charAt(index)        获取指定索引处的字符
indexOf(value)       获取指定字符串出现的索引位置,换不到为-1
substring(start,end) 根据指定索引范围截取字符串(含头不含尾)
split(value)         根据指定规则切割字符串,返回数组
replace(old,new)     使用新字符串替换老字符串

<script>
    //     String(value) 根据指定字符串创建对象
    let s1 = new String("Hello")
    document.write(s1)
    document.write("<br>")

    //     let s="字符串" 直接赋值
    let s2 = "World"
    document.write(s2)
    document.write("<br>")

    //     成员方法 说明
    //     length属性           获取字符串长度
    let s3 = "What is you name!"
    document.write(s3.length)
    document.write("<br>")

    //     charAt(index)        获取指定索引处的字符
    document.write(s3.charAt(10))
    document.write("<br>")

    //     indexOf(value)       获取指定字符串出现的索引位置,换不到为-1
    document.write(s3.indexOf("a"))
    document.write("<br>")

    //     substring(start,end) 根据指定索引范围截取字符串(含头不含尾)
    document.write(s3.substring(0,4))
    document.write("<br>")

    //     split(value)         根据指定规则切割字符串,返回数组
    let s5arr = s3.split("\\s")
    for(ss of s5arr){
        document.write(ss)
    }
    document.write("<br>")

    //     replace(old,new)     使用新字符串替换老字符串
    let s6 = "What is youuuu name!"
    document.write(s6.replace("uu","s"))
    document.write("<br>")

</script>

RegExp
正则表达: 是一种对字符串进行匹配的规则

构造方法         说明
RegExp(规则)     根据指定规则创建对象
let reg=/^规则$/ 直接赋值

成员方法           说明
test(匹配的字符串) 根据指定规则验证字符串是否符合

规则

表达式 说明
[a]    只能是a
[abc]  只能是abc中的某一个
[1]    只能是1
[123]  只能是123中的某一个
[a-z]  只能a到z中某一个
[A-Z]  只能A到Z中某一个
[0-9]  只能0到9中某一个
{5}    只能出现5次
{4,6}  只能出现4到6次

<script>
    // RegExp(规则)     根据指定规则创建对象
    let regx1 = new RegExp("[1][358][0-9]{9}")
    document.write(regx1.test(13510002000))
    document.write("<br>")
    document.write(regx1.test(12510002000))
    document.write("<br>")

    // let reg=/^规则$/ 直接赋值
    let regx2 =/^[\\_0-9a-zA-Z]{4,16}$/
    document.write(regx2.test("_sdkfj."))
    document.write("<br>")
    document.write(regx2.test("_dkjf23"))
    document.write("<br>")

</script>

Array

成员方法       说明
push(元素)     添加元素到数组的末尾
pop()          删除数组末尾的元素
shift()        删除数组最前面的元素
includes(元素) 判断数组是否包含给定的值
reverse()      反转数组中的元素
sort()         对数组元素进行排序

<script>
    // push(元素)     添加元素到数组的末尾
    let arr = [4,2,3,5,1]
    arr.push(8)
    for(let a of arr){
        document.write(a+" ")
    }
    document.write("<br>")

    // pop()          删除数组末尾的元素
    arr.pop()
    for(let a of arr){
        document.write(a+" ")
    }
    document.write("<br>")

    // shift()        删除数组最前面的元素
    arr.shift()
    for(let a of arr){
        document.write(a+" ")
    }
    document.write("<br>")

    // includes(元素) 判断数组是否包含给定的值
    document.write(arr.includes(5))
    document.write(arr.includes(10))
    document.write("<br>")

    // reverse()      反转数组中的元素
    arr.reverse()
    for(let a of arr){
        document.write(a+" ")
    }
    document.write("<br>")

    // sort()         对数组元素进行排序
    arr.sort()
    for(let a of arr){
        document.write(a+" ")
    }
    document.write("<br>")

</script>

Set
JavaScript中的Set集合, 元素唯一, 存取顺序一致

构造方法 说明
Set()    创建Set集合对象

成员方法     说明
add(元素)    向集合中添加元素
size属性     获取集合长度
keys()       获取迭代器对象
delete(元素) 删除指定元素

<script>
    // Set()    创建Set集合对象
    let s = new Set();

    // add(元素)    向集合中添加元素
    s.add("a")
    s.add("b")
    s.add("c")
    s.add("c")

    // size属性     获取集合长度
    document.write(s.size)
    document.write("<br>")

    // keys()       获取迭代器对象
    var st = s.keys();
    for(let i=0; i<s.size ; i++){
        document.write(st.next().value + " ")
    }
    document.write("<br>")

    // delete(元素) 删除指定元素
    s.delete("a")
    for(let sa of s){
        document.write(sa+" ")
    }
    document.write("<br>")

</script>

Map
- JavaScript的Map集合, key唯一, 存取顺序一致

构造方法 说明
Map()    创建Map集合对象

成员方法       说明
set(key,value) 向集合中添加元素
size属性       获取集合长度
get(key)       根据key获取value
entries()      获取迭代器对象
delete(key)    根据key删除键值对

<script>
    // Map()    创建Map集合对象
    let map = new Map()

    // set(key,value) 向集合中添加元素
    map.set("张三",23)
    map.set("王五",25)
    map.set("王五",26)

    // size属性       获取集合长度
    document.write(map.size)
    document.write("<br>")

    // get(key)       根据key获取value
    document.write(map.get("张三"))
    document.write("<br/>")

    // entries()      获取迭代器对象
    let st = map.entries()
    for(let i = 0; i< map.size ; i++){
        document.write(st.next().value+" ")
    }
    document.write("<br/>")



    // delete(key)    根据key删除键值对
    document.write(map.delete("张三"))
    document.write("<br/>")

    st = map.entries()
    for(let i = 0; i< map.size ; i++){
        document.write(st.next().value+" ")
    }
    document.write("<br/>")

</script>

JSON
- JSON(JavaScript Obect Notation): 是一种轻量级的数据交换格式
- 基于ECMAScript 规范的一个子集, 采用完全独立于编程语言的文本格式来存储和表示数据
- 乘法和清晰的层次结构舍不得JSON成为理想的数据交换语言. 易于人阅读和编写, 同时也晚于计算机解析和生成, 并有效提升网络传输效率.

成员方法       说明
stringfy(对象) 将指定对象黑的为json格式字符串
parse(字符串)  将指定json格式字符串解析成对象

<script>
    // 定义天气
    let weather = {
        city : "北京",
        date : "2088-08-08",
        wendu : "10~23",
        shidu : "22%"
    };

    // 1. 天气转换成JSON格式的字符串
    let str = JSON.stringify(weather)
    document.write(str)
    document.write("<br/>")

    // 2. 将JSON格式字符串解析成JS对象
    let weather2 = JSON.parse(str)
    document.write(weather2.city+" "+weather2.date+" "+weather2.wendu+" "+weather2.shidu)
    document.write("<br/>")

</script>

表单校验

<script>

    let dd = document.getElementById("regist")
    dd.onsubmit = check

    function check(){
        let username = document.getElementById("username").value

        let password = document.getElementById("password").value

        let nameRegx = /^[a-zA-Z]{4,16}$/
        let passwordRegx = /^[\d]{6}$/

        if( !nameRegx.test(username)){
            alert("用户名4-16位字母")
            return false
        }

        if(! passwordRegx.test(password)){
            alert("密码6位数字")
            return false
        }

        return true;
    }
</script>

BOM

BOM(Browser Object Model) 浏览器对象模型
将浏览器的各个组成部分封装成不同的对象, 方便我们进行操作

Window 窗口对象

定时器
- 唯一标识setTimeout(功能,毫秒值):设置一次性定时器.
- clearTimeout(标识):取消一次性定时器
- 唯一标识setInterval(功能,毫秒值):设置循环定时器
- clearInterval(标识):取消循环定时器
加载事件
- window.onload:在页面加载完毕后触发此事件的功能

<script>
    // 定时器
    function fun(){
        alert("该起床了")
    }


    // 设置一次性定时器
    let d1 = window.setTimeout("fun()",2000)
    window.clearTimeout(d1)

    // 设置循环定时器
    let d2 = window.setInterval("fun()", 3000)
    window.clearInterval(d2)


    // 加载事件
    window.onload = function (){
        let div = document.getElementById("div")
        alert(div)
    }
</script>

Location 地址栏对象

href 属性
- 就是浏览器的地址栏, 我们可以通过为该属性设置的新的URL, 使浏览器读取并显示新的URL的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location地址栏对象</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>
</head>
<body>
    <p>
        注册成功!<span id="time">5</span>秒之后自动跳转到首页...
    </p>
</body>
<script>

    let num = 5;
    function show(){
        num--;
        if(num<=0){
            location.href = "01-windows窗口对象.html"
        }

        let span = document.getElementById("time");
        span.innerHTML = num
    }

    window.setInterval("show()",1000)

</script>
</html>

图片显示

<body>

    <img src="dayanmiao3.png" id="img" alt="da" height="400px" style="display: none">
    <div class="login-form-wrap">
        <h1>黑马程序员</h1>
        <form class="login-form" action="#" id="regist" method="get" autocomplete="off">
            <label>
                <input type="text" id="username" name="username" placeholder="Username..." value="">
            </label>
            <label>
                <input type="password" id="password" name="password" placeholder="Password..." value="">
            </label>
            <input type="submit" value="注册">
        </form>
    </div>
</body>
<script>

    function hideImg(){
        let imgId = document.getElementById("img");
        imgId.setAttribute("style","display:none")
    }
    let sd1 = window.setTimeout(function(){
        let imgId = document.getElementById("img");
        imgId.setAttribute("style","display:block")
    },3000)
    let sd2 = window.setTimeout("hideImg()",6000)
</script>

封装

my.js

function getById(id){
    return document.getElementById(id);
}

function getByName(name){
    return document.getElementsByName(name);
}

function getByTag(tag){
    return document.getElementsByTagName(tag)
}

<script>
    // 效果是一样的
    let div2 = getById("div1")
    alert(div2)

    let arr2 = getByName("div2")
    alert(arr2.length)


    // let div1 = document.getElementById("div1")
    // alert(div1)
    //
    // let arr = document.getElementsByName("div2")
    // alert(arr.length)
</script>

JavaScript 面向对象, 类的定义和使用#

字面量定义类和使用#

继承#

JavaScript 内置对象#

表单校验#

BOM#

Window 窗口对象#

Location 地址栏对象#

图片显示#

封装#

JavaScript 面向对象, 类的定义和使用

字面量定义类和使用

继承

JavaScript 内置对象

表单校验

BOM

Window 窗口对象

Location 地址栏对象

图片显示

封装