JavaScript学习笔记 ----基础篇

---

参考学习教程

---

JavaScript的输出

JS 没有提供任何用于打印和显示的函数，如果我们要打印显示东西需要借助

JavaScript注释

    <script>
        // 这是JS的单行注释
        console.log("单行注释")
        /*
        * 这是JS的多行注释
        *
        * */
        console.log("多行注释")
        /*
        这也是JS的多行注释
         */
        console.log("多行注释")
        /**
         * 函数注释 --- 这是一个求和函数
         * @param a
         * @param b
         * @returns {*}
         */
        function sum(a,b) {
            if(typeof (a) == "number" && typeof (a) == typeof (b))
                return a + b;
            else
                throw new TypeError("传入的数据类型错误：期望传入两个Number类型数据")
        }
        console.log(sum(1,"2"))
    </script>

JavaScript 数据类型

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等

JavaScript 函数

JavaScript 对象

<script>
    // JavaScript 对象
    var Student = {
        name:'',
        age:0,
        address:'',
        phone:'',
        sex:'',

        rename: function (name) {
           try{
               if (typeof(name) == 'string')
                   this.name = name;
               else
                   throw TypeError("数据类型错误，获得类型："+typeof(name)+"，期望类型：string")
           }catch (e) {
               console.log(e)
           }
        }

    }
        Student.name = '张三';
    console.log(Student.name)
        Student.rename(123)
    console.log(Student.name+"-----error")
        Student.rename('李四')
    console.log(Student.name)

</script>

JavaScript数组

<script>
    var car = ['宾利','奔驰',['国产之光','五菱宏光'],'法拉利'];
    var cars = new Array('宾利','奔驰');
    console.log(car)
    console.log(cars)
</script>

数组方法：

<script>
    var car = ['宾利','奔驰',['国产之光','五菱宏光'],'法拉利'];
    var cars = new Array('宾利','奔驰');
    console.log(car)
    console.log(cars)
    console.log(car.toString())
    //删除最后一个元素
    console.log(car.pop())
    console.log(car)
    //在最后添加一个元素
    console.log(car.push("兰博基尼"))
    console.log(car)
    //删除首个元素
    console.log(car.shift())
    console.log(car)
    //在头部插入一个元素
    console.log(car.unshift("劳斯莱斯"))
    console.log(car)
    //删除元素（会留有空间，不改变数组长度）
    console.log(delete car[2])
    console.log(car)
    //拼接数组
    //从2开始，往后删除1个，并把两个数组元素插入进去
    console.log(car.splice(2,1,'宝马','雅迪'))
    console.log(car)

    //删除元素
    //从第1个元素删除到第二个元素截至
    console.log(car.slice(1,2))
    console.log(car)

    car.forEach(function (value, index, array) {
        console.log(value+index)
    })
</script>

JS事件

事件可以是浏览器或用户做的某些事情，通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序

<span id="box">
    测试事件
</span>

<script>
    var box = document.getElementById("box")
    box.onclick = function () {
        console.log("box onClick()")
    }
    box.style.cssText = "background-color: #009E94"
</script>

DOM事件

JavaScript 正则表达式

正则表达式是构成搜索模式（search pattern）的字符序列。
当您搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容。
正则表达式可以是单字符，或者更复杂的模式。
正则表达式可用于执行所有类型的文本搜索和文本替换操作。

语法
/pattern/modifiers;		········    /模式/修饰符
eg. var patt = /tom/i;

模式：

修饰符：

<script>
    var patten = /tom/i;
    var text = "my name is tom and her name is lily"
    var n = text.search(patten)
    console.log("tom的位置在:"+n)
</script>
<script>
    var patten = /tom/g;
    var text = "my name is tom and her name is lily tom age 19."
    var n = text.replace(patten,"aaa")
    console.log(n)
</script>
<script>
    var patten = /[0-9]+/g;
    var patten2 = 'a'
    var text = "my name 123 is tom and 4 56 her 77 88 9 9 name is lily tom age 19."
    var n = text.replace(patten,patten2)
    console.log(n)
</script>
<script>
    var patten = /n+/g;
    var patten2 = 'a'
    var text = "my name 123 is tom an+d 4 56 her 77 88 9 9 name is lily tom age 19."
    var n = text.split(patten)
    n.forEach(function (value, index, array) {
        console.log(value)
    })

</script>

<script>
    var patten = /name/g;

    var text = "my name 123 is tom an+d 4 56 her 77 8name8 9 9 name is lily name tom age 19."

    console.log(patten.test(text))
    // result = true
</script>
<script>
    var patten = /[1]{1}[0-9]{10}/g;

    var text = "my name 123 is tom an+d 4 1926160107556 her 77 8na15020219121me8 9 9 name is lily name tom age 19."
    var result = function () {
        var result = [];
        var res;
        while((res = patten.exec(text))!=null){
            result.push(res)
        }
        return result;
    }
    console.log(result())
</script>

字符串方法:

search() 方法

使用表达式来搜索匹配，然后返回匹配的位置。

<script>
    var patten = /tom/i;
    var text = "my name is tom and her name is lily"
    var n = text.search(patten)
    console.log("tom的位置在:"+n)
</script>

replace() 方法

返回模式被替换处修改后的字符串。

<script>
    var patten = /tom/g;
    var text = "my name is tom and her name is lily tom age 19."
    var n = text.replace(patten,"aaa")
    console.log(n)
</script>

split()

把字符串分割为字符串数组。

<script>
    var patten = /n+/g;
    var patten2 = 'a'
    var text = "my name 123 is tom an+d 4 56 her 77 88 9 9 name is lily tom age 19."
    var n = text.split(patten)
    n.forEach(function (value, index, array) {
        console.log(value)
    })
</script>

test()

它通过模式来搜索字符串，然后根据结果返回 true 或 false。

<script>
    var patten = /name/g;

    var text = "my name 123 is tom an+d 4 56 her 77 8name8 9 9 name is lily name tom age 19."

    console.log(patten.test(text))
    // result = true
</script>

exec()

它通过指定的模式（pattern）搜索字符串，并返回已找到的文本
eg.查找文本中的电话号码

<script>
    var patten = /[1]{1}[0-9]{10}/g;

    var text = "my name 123 is tom an+d 4 1986160107556 her 77 8na15020219151me8 9 9 name is lily name tom age 19."
    var result = function () {
        var result = [];
        var res;
        while((res = patten.exec(text))!=null){
            result.push(res)
        }
        return result;
    }
    console.log(result())
</script>

Demo

替换所有数字

<script>
    var patten = /[0-9]+/g;
    var text = "my name 123 is tom and 4 56 her 77 88 9 9 name is lily tom age 19."
    var n = text.replace(patten,"aaa")
    console.log(n)
</script>

JavaScript 异常

捕获异常

try 语句使您能够测试代码块中的错误。
catch 语句允许您处理错误。
throw 语句允许您创建自定义错误。
finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。

eg.

<script>
    try{
        var s = alers;
    }catch (e) {
        console.log(e)
        console.log("异常名称"+e.name)
        console.log("异常信息"+e.message)
    }finally {
        console.log("alers变量未定义")
    }
</script>

原生错误类型

Error实例对象是最一般的错误类型，
在它的基础上，JavaScript 还定义了其他6种错误对象。
>>

对象	错误类型
SyntaxError	解析代码时发生的语法错误
ReferenceError	引用一个不存在的变量时发生的错误,将一个值分配给无法分配的对象，比如对函数的运行结果赋值
RangeError	值超出有效范围时发生的错误
TypeError	变量或参数不是预期类型时发生的错误
URIError	URI 相关函数的参数不正确时抛出的错误
EvalError	函数没有被正确执行时，会抛出EvalError错误,该错误类型已经不再使用了，只是为了保证与以前代码兼容，才继续保留

自定义错误类型

//<script>
class MyError extends Error{
    constructor(message) {
        super();
        this.message = message || "这是一个自定义错误"
        this.name = "MyError"
    }
}
try{
    throw new MyError("我错了")
}
catch (e) {
    console.log(e)
}
try{
    throw new MyError()
}
catch (e) {
    console.log(e)
}
//</script>

DOM操作

获取DOM元素

document.getElementById(元素ID)
document.getElementsByName(元素name属性)
document.getElementsByClassName(元素的class属性)
document.getElementsByTagName(元素标签)

元素指针

	父元素.firstElementChild  --------  获取父元素内的第一个元素
	父元素.lastElementChild  --------  获取父元素内的最后一个元素
			----------- 他们 firstChild | lastChild 不一样，
			他们两个可能获取到开发者的注释或则空的文本，和预期效果有出入
    父元素.childNodes  --------------  获取父元素内所有子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS补充</title>

</head>
<body>
<div id="userinfo">
    <h1>用户注册</h1>
    <form name="myform">
        <pre>
            <input type="text" name="username"/>
            <input type="text" name="password"/>
            <input type="text" class="in1"/>
            <input type="text" class="in1"/>
            <input type="text" class="in1"/>
        </pre>
    </form>
</div>
</body>
<script src="index2.js"></script>
</html>

onload = function () {
    var userinfo = document.getElementById('userinfo')
    console.log("firstChild",userinfo.firstChild)
    console.log("firstElementChild",userinfo.firstElementChild)
    console.log("lastElementChild",userinfo.lastElementChild)
    console.log("lastChild",userinfo.lastChild)
    console.log(userinfo.childNodes)
}

创建DOM节点

document.createElement(元素标签) ------  创建元素节点
document.createTextNode(文本内容) -----  创建文本节点

添加DOM元素

父元素.appendChild(节点) -----------向节点的子节点末尾添加节点
insertBefore(已知节点，添加的节点) --在已知节点前添加新节点
replaceChild(新节点，旧节点)--------替换原来的节点

删除DOM元素

父元素.removeChild(要删除的节点)----移除子节点
节点.remove()				-------移除自身