同系列文章导读：【JavaWEB】文章导读

所有文章均在本博客首发，其他平台同步更新

如有问题，欢迎指正（评论区留言即可）

发表评论时请填写正确邮箱，以便于接收通知【推荐QQ邮箱】

  • JavaScript 是一种客户端脚本语言。运行在客户端浏览器中，每一个浏览器都具备解析 JavaScript 的引擎
  • 脚本语言：不需要编译，就可以直接被浏览器解析执行了
  • 核心功能就是增强用户和 HTML 页面的交互过程，让页面具有一些动态效果。以此来增强用户的体验

发展历史

  • 1995年，NetScape（网景）公司，开发的一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家来进行修改，后命名为JavaScript
  • 1996年，微软抄袭JavaScript 开发出JScript 脚本语言
  • 1997年，ECMA（欧洲计算机制造商协会），制定出客户端脚本语言的标准：ECMAScript，统一了所有客户端脚本语言的编码格式
  • JavaScript包含：ECMAScript、DOM、BOM

快速入门

  1. 创建一个HTML
  2. 在<body>标签下编写一个<script>标签
  3. 在<script>标签中编写代码
  4. 通过浏览器查看
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js快速入门</title>
</head>
<body>
    <button id="btn">按钮</button>
</body>
<!--引入js的方式一：内部方式-->
<!--<script>
    document.getElementById("btn").onclick = function (){
        alert("按钮被点击");
    }
</script>-->

<!--引入js的方式二：外部文件方式-->
<script src="js/my.js"></script>

</html>

两种引入方式：

方式一：内部方式。即直接在html文件的script标签中编写js代码

方式二：外部文件方式。在外部新建一个.js文件，通过script标签中的src属性引入

工具安装

  • Node.js：JavaScript运行环境
  • VSCode：编写前端技术的开发工具

基本语法

注释

  • 单行注释

    //注释的内容

  • 多行注释

    /*
    注释的内容
*/

输入输出

  • 输入框

    prompt("提示内容");

  • 弹出警告框

    alert("提示内容");

  • 控制台输出

    console.log("显示内容");

  • 页面内容输出

    document.write("显示内容");

// 输入框
prompt("请输入数据");

// 弹出警告框
alert("Hello");

// 控制台输出
console.log("控制台输出");

// 页面内容输出
document.write("Hello Js");
document.write("<br>");
document.write("Hello Js");

变量和常量

  • JavaScript 属于弱类型的语言，定义变量时不用区分具体的数据类型

  • 定义局部变量

    let 变量名 = 值;

  • 定义全局变量

    变量名 = 值;

  • 定义常量

    const 常量名 = 值;

// 定义局部变量
let name = "张三";
let age = 23;
document.write(name + "," + age + "<br>");

// 定义全局变量
{
    let l1 = "aa";
    l2 = "bb";
}
// document.write(l1);     //在这里遇到错误,不执行后续代码
document.write(l2 + "<br>");

// 定义常量
const PI = 3.1415926;
document.write(PI);

原始数据类型 和 typeof

原始数据类型

数据类型说明
boolean布尔类型，true或false
null声明null值的特殊关键字
undefined代表变量未定义(未赋值)
number整数或浮点数
string字符串
bigint大整数，例如：let num = 10n;

typeof 方法

  • typeof 用于判断变量的数据类型
let age = 18;
document.write(typeof(age));        //number
document.write(typeof(10)); //number
document.write("<br>");
document.write(typeof("aaa")); //string
document.write("<br>");
document.write(typeof(true)); //boolean
document.write("<br>");
document.write(typeof(null)); //object
document.write("<br>");
let n;
document.write(typeof(n)); //undefined
let a = 100n;
document.write(typeof(a)); //bigint

运算符

算数运算符

运算符说明
+加法运算
-减法运算
*乘法运算
/除法运算
%取余数
++自增
--自减

赋值运算符

运算符说明
=将等号右边的值赋值给等号左边的变量
+=相加后赋值
-=相减后赋值
*=相乘后赋值
/=相除后赋值
%=取余数后赋值

比较运算符

运算符说明
==判断值是否相等
===判断数据类型和值是否相等
>大于
>=大于等于
<小于
<=小于等于
!=不等于

逻辑运算符

三元运算符

  • 格式：(比较表达式) ? 表达式1 : 表达式2;

  • 执行流程

    • 如果比较表达式为true，则取表达式1
    • 如果比较表达式为false，则取表达式2

注意事项

  1. 字符串类型的数字进行运算时，会自动进行类型转换

    在+时为拼接，与数字乘除时就是乘除的结果

  2. ==比较时，只比较具体的数据值是否相等，忽略数据类型

    ===比较时，会先比较数据类型是否相等，再去比较值是否相等

流程控制和循环

  • if语句
  • switch语句
  • for循环
  • while循环
和Java中完全一致

数组

  • 数组和Java中的数组基本一致，但是在JavaScript 中的数组更加灵活，数据类型和长度都没有限制

  • 定义格式

    let 数组名 = [元素1,元素2,...];

  • 索引范围

    从0开始，最大到数组长度 - 1

  • 数组长度

    数组名.length

  • 数组高级运算符...

    数组复制

    合并数组

    字符串转数组

// 定义数组
let arr = [10, 20, 30];
arr[3] = 40; // js中数组长度是可变的
// 遍历数组
for (let i = 0; i < arr.length; i++) {
    document.write(arr[i] + "<br>");
}
document.write("============<br>");

// 数组的高级运算符
// 复制数组
let arr2 = [...arr];
for (let i = 0; i < arr2.length; i++) {
    document.write(arr2[i] + "<br>");
}
document.write("============<br>");
// 合并数组
let arr3 = [40, 50, 60];
let arr4 = [...arr2, ...arr3];
for (let i = 0; i < arr4.length; i++) {
    document.write(arr4[i] + "<br>");
}
document.write("============<br>");
// 将字符串转成数组
let arr5 = [...
            "study"
           ];
for (let i = 0; i < arr5.length; i++) {
    document.write(arr5[i] + "<br>");
}

函数

  • 函数类似于Java 中的方法，可以将一些代码进行抽取，以达到复用的效果

  • 定义格式

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

  • 可变参数

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

  • 匿名函数

    function(参数列表){
    方法体;
}
// 无参无返回值
function println() {
    document.write("Hello JS<br>");
}
// 调用方法
println();

// 有参有返回值
function getSum(num1, num2) {
    return (num1 + num2);
}
let result = getSum(10, 20);
document.write(result + "<br>");

// 可变参数
function getSum(...params) {
    let sum = 0;
    for (let i = 0; i < params.length; i++) {
        sum += params[i];
    }
    return sum;
}
let sum = getSum(10, 20, 30, 40);
document.write(sum + "<br>");

// 匿名函数
let fun = function() {
    document.write("匿名函数<br>");
}
fun();

函数也可以像Java中一样通过参数不同来构成重载

匿名函数主要用途是配合事件使用

DOM

  • DOM(Document Object Model)：文档对象模型
  • 将HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作

  • Document：文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象

Element 元素的操作

获取元素

方法名说明
getElementById(id属性值)根据id获得一个元素
getElementsByTagName(标签名称)根据标签名称获取多个元素
getElementsByName(name属性值)根据name属性获得多个元素
getElementsByClassName(class属性值)根据class属性获得多个元素
子元素对象.parentElement获取当前元素的父元素
// 根据id获取元素对象
let div1 = document.getElementById("div1");
// alert(div1);

// 根据元素名称获取元素对象,返回数组
let divs = document.getElementsByTagName("div");
// alert(divs.length);

// 根据class属性值获取元素对象,返回数组
let cls = document.getElementsByClassName("cls");
// alert(cls.length);

// 根据name属性获取元素对象,返回数组
let names = document.getElementsByName("username");
// alert(names.length);

// 获取当前元素的父元素
let body = div1.parentElement;
alert(body);

增删改操作

方法名说明
createElement(标签名)创建一个新元素
appendChild(子元素)将指定子元素添加到父元素中
removeChild(子元素)用父元素删除指定子元素
replaceChild(新元素,旧元素)用新元素替换子元素
// 创建新的元素
let option = document.createElement("option");
// 为option添加文本内容
option.innerText = "深圳";

// 将子元素添加到父元素中
let select = document.getElementById("s");
select.appendChild(option);

// 通过父元素删除子元素
// select.removeChild(option);

// 用新元素替换老元素
let newOption = document.createElement("option");
newOption.innerText = "杭州";
select.replaceChild(newOption, option);

Attribute 属性的操作

方法名说明
setAttribute(属性名,属性值)修改、添加属性
getAttribute(属性名)根据属性名获取属性值
removeAttribute(属性名)根据属性名移除指定的属性
style属性为元素添加样式
className属性为元素添加class属性，常用于指定样式
let a = document.getElementsByTagName("a")[0];

// 添加属性
a.setAttribute("href", "http://www.baidu.com");

// 获取属性
let value = a.getAttribute("href");
// alert(value);

// 删除属性
a.removeAttribute("href");

// 添加样式
// a.style.color = "red";

// 添加指定样式
a.className = "aColor";

文本的操作

属性名说明
innerText添加文本内容，不解析标签
innerHTML添加文本内容，解析标签
let div = document.getElementById("div");
// 添加文本内容,不解析标签
div.innerText = "<b>我是div</b>";

// 添加文本内容,解析标签
div.innerHTML = "<b>我是div</b>";

事件

  • 事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行

事件类型

常用的事件

事件名说明
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onclick鼠标单击事件
ondblclick鼠标双击事件
onblur元素失去焦点
onfocus元素获得焦点
onchange用户改变域的内容

了解的事件

事件名说明
onkeydown某个键盘的键被按下
onkeypress某个键盘的键被按下或按住
onkeyup某个键盘的键被松开
onmousedown某个鼠标按键被按下
onmouseup某个鼠标按键被松开
onmouseover鼠标被移动到某个元素之上
onmouseout鼠标从某元素移开

绑定事件

  • 方式一：通过标签中的事件属性进行绑定

    <button id = "btn" onclick="执行的功能"></button>

    <body>
    <img src="img/01.webp" id="img" />
    <br>
    <button id="up" onclick="up()">上一张</button>
    <button id="down" onclick="down()">下一张</button>

</body>

<script>
    // 显示第一张图片的方法
    function up() {
        let img = document.getElementById("img");
        img.setAttribute("src", "img/01.webp");
    }

    // 显示第二张图片的方法
    function down() {
        let img = document.getElementById("img");
        img.setAttribute("src", "img/02.webp");
    }
</script>

  • 方式二：通过DOM元素属性绑定

    document.getElementById("btn").onclick = 执行的功能

    // 显示第一张图片的方法
function up() {
    let img = document.getElementById("img");
    img.setAttribute("src", "img/01.webp");
}

// 显示第二张图片的方法
function down() {
    let img = document.getElementById("img");
    img.setAttribute("src", "img/02.webp");
}

// 为上一张按钮绑定单击事件
let upbtn = document.getElementById("up");
upbtn.onclick = up;

// 为下一张按钮绑定单机事件
let downbtn = document.getElementById("down");
downbtn.onclick = down;

综合案例

添加功能

  1. 创建行元素
  2. 创建列元素，并将输入的数据添加进去
  3. 将列元素添加进行
  4. 创建a标签
  5. 将a添加进列
  6. 将行添加到表格里面
document.getElementById("add").onclick = function() {
    // 创建行元素
    let tr = document.createElement("tr");
    // 创建列元素
    let nameTd = document.createElement("td");
    let ageTd = document.createElement("td");
    let genderTd = document.createElement("td");
    let deleteTd = document.createElement("td");
    // 将列添加到行
    tr.appendChild(nameTd);
    tr.appendChild(ageTd);
    tr.appendChild(genderTd);
    tr.appendChild(deleteTd);
    // 获取数据
    let name = document.getElementById("name").value;
    let age = document.getElementById("age").value;
    let gender = document.getElementById("gender").value;
    // 创建文本元素
    let nameText = document.createTextNode(name);
    let ageText = document.createTextNode(age);
    let genderText = document.createTextNode(gender);
    // 将文本元素添加到列
    nameTd.appendChild(nameText);
    ageTd.appendChild(ageText);
    genderTd.appendChild(genderText);
    // 创建超链接元素以及要显示的文本和href属性
    let a = document.createElement("a");
    let aText = document.createTextNode("删除");
    a.setAttribute("href", "JavaScript:void(0)");
    a.setAttribute("onclick", "drop(this)");
    a.appendChild(aText);
    // 将超链接添加到列
    deleteTd.appendChild(a);
    // 将行添加到表格
    let table = document.getElementById("tb");
    table.appendChild(tr);
}

删除

  1. 获取被删除列的父元素td
  2. 通过td找到父元素tr
  3. 通过tr找到父元素行
  4. 删除对应的行
// 为删除标签添加单机事件属性
// 定义删除的方法
function drop(obj) {
    // 获取tr元素
    let tr = obj.parentElement.parentElement;
    // 获取table元素
    let table = tr.parentElement;
    // 通过table删除tr
    table.removeChild(tr);
}

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例-动态表格</title>
    <style>
        table {
            border: 1px solid;
            margin: auto;
            width: 600px;
        }
  
        td,
        th {
            text-align: center;
            border: 1px solid;
        }
  
        div {
            text-align: center;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" name="name" id="name" placeholder="请输入姓名" autocomplete="off">
        <input type="text" name="age" id="age" placeholder="请输入年龄" autocomplete="off">
        <input type="text" name="gender" id="gender" placeholder="请输入性别" autocomplete="off">
        <input type="button" value="添加" id="add">
    </div>

    <table id="tb">
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
            <td>
                <a href="JavaScript:void(0);" onclick="drop(this)">删除</a>
            </td>
        </tr>
        <tr>
            <td>李四</td>
            <td>24</td>
            <td>男</td>
            <td>
                <a href="JavaScript:void(0);" onclick="drop(this)">删除</a>
            </td>
        </tr>
    </table>
</body>

<script>
    document.getElementById("add").onclick = function() {
        // 创建行元素
        let tr = document.createElement("tr");
        // 创建列元素
        let nameTd = document.createElement("td");
        let ageTd = document.createElement("td");
        let genderTd = document.createElement("td");
        let deleteTd = document.createElement("td");
        // 将列添加到行
        tr.appendChild(nameTd);
        tr.appendChild(ageTd);
        tr.appendChild(genderTd);
        tr.appendChild(deleteTd);
        // 获取数据
        let name = document.getElementById("name").value;
        let age = document.getElementById("age").value;
        let gender = document.getElementById("gender").value;
        // 创建文本元素
        let nameText = document.createTextNode(name);
        let ageText = document.createTextNode(age);
        let genderText = document.createTextNode(gender);
        // 将文本元素添加到列
        nameTd.appendChild(nameText);
        ageTd.appendChild(ageText);
        genderTd.appendChild(genderText);
        // 创建超链接元素以及要显示的文本和href属性
        let a = document.createElement("a");
        let aText = document.createTextNode("删除");
        a.setAttribute("href", "JavaScript:void(0)");
        a.setAttribute("onclick", "drop(this)");
        a.appendChild(aText);
        // 将超链接添加到列
        deleteTd.appendChild(a);
        // 将行添加到表格
        let table = document.getElementById("tb");
        table.appendChild(tr);
    }

    // 为删除标签添加单机事件属性
    // 定义删除的方法
    function drop(obj) {
        // 获取tr元素
        let tr = obj.parentElement.parentElement;
        // 获取table元素
        let table = tr.parentElement;
        // 通过table删除tr
        table.removeChild(tr);
    }
</script>

</html>

面向对象

在Java中我们学习过面向对象，核心思想是万物皆对象。在JavaScript中同样也有面向对象。思想类似

类的定义和使用

  • 定义格式

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

  • 使用格式

    let 对象名 = new 类名(实际变量值);
对象名.方法名();
// 定义Person类
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // show方法
    show() {
        document.write(this.name + "," + this.age + "<br>");
    }
    // eat方法
    eat() {
        document.write("吃饭...<br>");
    }
}

// 使用类
let p = new Person("张三", 23);
p.show();
p.eat();

字面量类的定义和使用【常用】

  • 定义格式

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

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

  • 使用格式

    对象名.变量名
对象名.方法名();
let person = {
    name: "张三",
    age: 23,
    hobby: ["听课", "学习"],

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

继承

  • 继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员
  • 继承关键字：extends
  • 顶级父类：Object
// 定义Person类
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }


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

// 定义worker类，继承Person类
class Woker extends Person {
    constructor(name, age, salary) {
        super(name, age);
        this.salary = salary;
    }

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

// 使用Worker
let w = new Woker("张三", 23, 10000);
w.show();
w.eat();

内置对象

Number

方法名说明
parseFloat()将传入的字符串浮点数转为浮点数
parseInt()将传入的字符串整数转为整数
// parseFloat
document.write(Number.parseFloat("3.14") + 10 + "<br>");

// parseInt
document.write(Number.parseInt("100") + 10 + "<br>");

document.write(Number.parseInt("200abc"));      // 200
从数字开始转换，直到不是数字为止

Math

方法名说明
ceil(x)向上取整
floor(x)向下取整
round(x)把数四舍五入为最接近的整数
random()随机数，返回的是0.0~1.0之间范围（左闭右开）(浮点数)
pow(x,y)幂运算x的y次方
// 向上取整
document.write(Math.ceil(1.1) + "<br>");    // 2

// 向下取整
document.write(Math.floor(1.9) + "<br>");    // 1

// 四舍五入
document.write(Math.round(1.1) + "<br>");    // 1
document.write(Math.round(1.5) + "<br>");    // 2

// 随机数
document.write(Math.random() + "<br>");        // 随机小数

// 幂运算
document.write(Math.pow(2, 3) + "<br>");    // 8

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()返回本地日期格式的字符串
// 构造方法
// 根据当前时间创建对象
let d1 = new Date();
document.write(d1 + "<br>"); // Sat Mar 26 2022 11:01:25 GMT+0800 (中国标准时间)

// 根据指定毫秒值创建对象
let d2 = new Date(10000);
document.write(d2 + "<br>"); // Thu Jan 01 1970 08:00:10 GMT+0800 (中国标准时间)

// 根据指定字段创建对象
let d3 = new Date(2022, 2, 26, 11, 00, 00); // 3月，这里要写2
document.write(d3 + "<br>");


// 成员方法
// 获取年份
document.write(d3.getFullYear() + "<br>"); // 2022

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

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

// 返回本地日期格式的字符串
document.write(d3.toLocaleString() + "<br>"); // 2022/3/26 11:00:00

String

构造方法

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

成员方法

成员方法说明
length属性获取字符串长度
charAt(index)获取指定索引处的字符
indexOf(value)获取指定字符串出现的索引位置，找不到为-1
substring(start,end)根据指定索引范围截取字符串（左闭右开）
split(value)根据指定规则切割字符串，返回数组
replace(old,new)使用新字符串替换老字符串
// 构造方法创建字符串对象
let s1 = new String("h,e,l,l,o");
document.write(s1 + "<br>"); // h,e,l,l,o
// 直接赋值
let s2 = "Hello";
document.write(s2 + "<br>"); // Hello

// 属性
// length
document.write(s2.length + "<br>"); // 5

// 成员方法
// 获取指定索引处的字符
document.write(s2.charAt(1) + "<br>"); // e
// 获取指定字符串出现的索引位置
document.write(s2.indexOf("l") + "<br>"); // 2
// 根据指定索引范围截取字符串（左闭右开）
document.write(s2.substring(1, 3) + "<br>"); // el
// 根据指定规则切割字符串，返回数组
document.write(s1.split(",")[4] + "<br>"); // o
// 使用新字符串替换老字符串
let s3 = s2.replace("llo", "LLLLL");
document.write(s3 + "<br>");    //HeLLLLL

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次

小练习

  • 需求一：验证手机号

    第一位1，第二位358，第三到十一位必须是数字，总长度11位

  • 需求二：验证用户名

    字母、数字、下划线组成。总长度4~16位

// 验证手机号
let reg1 = /^[1][358][0-9]{9}$/; // 最后控制次数的9只控制[0-9]这个规则
document.write(reg1.test("13612341234") + "<br>");

// 验证用户名
let reg2 = /^[a-zA-Z_0-9]{4,16}$/; // 可以由大小写、数字、字母、下划线组成
document.write(reg2.test("zhang_san1234"));

Array

成员方法说明
push(元素)添加元素到数组末尾
pop()删除数组末尾的元素
shift()删除数组最前面的元素
includes(元素)判断数组是否包含给定的值
reverse()反转数组中的元素
sort()对数组元素进行排序
let arr = [1, 2, 3, 4, 5];

// 添加元素到数组末尾
arr.push(6);
document.write(arr + "<br>");

// 删除数组末尾的元素
arr.pop();
document.write(arr + "<br>");

// 删除数组最前面的元素
arr.shift();
document.write(arr + "<br>");

// 判断数组是否包含给定的值
document.write(arr.includes(2) + "<br>");

// 反转数组中的元素
arr.reverse();
document.write(arr + "<br>");

// 对数组元素进行排序
arr.sort();
document.write(arr + "<br>");

Set

  • JavaScript 中的Set集合，元素唯一，存取顺序一致
  • 构造方法
构造方法说明
Set()创建Set集合对象
  • 成员方法
成员方法说明
add(元素)向集合中添加元素
size属性获取集合长度
keys()获取迭代器对象
delete(元素)删除指定元素
// 创建集合对象
let s = new Set();
// 添加元素
s.add("a");
s.add("b");
s.add("c");
s.add("c");

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

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

// 删除指定元素
document.write("<br>" + s.delete("c") + "<br>");
let st2 = s.keys();
for (let i = 0; i < s.size; i++) {
    document.write(st2.next().value + "  ");
}

Map

  • JavaScript 中的Map集合，key唯一，存取顺序一致
  • 构造方法
构造方法说明
Map()创建Map集合对象
  • 成员方法
成员方法说明
set(key,value)向集合中添加元素
size属性获取集合长度
get(key)根据key获取value
entries()获取迭代器对象
delete(key)根据key删除键值对
// 创建Map集合对象
let map = new Map();

// 添加元素
map.set("张三", 23);
map.set("李四", 24);
map.set("李四", 25);

// 获取长度
document.write(map.size + "<br>");

// 根据key获取value
document.write(map.get("李四") + "<br>"); //25，key唯一，因此后面的值会覆盖掉前面的

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

// 根据key删除键值对
document.write(map.delete("李四") + "<br>");
let et2 = map.entries();
for (let i = 0; i < map.size; i++) {
    document.write(et2.next().value + "<br>");
}

JSON

  • JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式
  • 它是基于ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据
  • 简洁清晰的层次结构使得JSON成为理想的数据交换语言。易于人的阅读和编写，同时也易于计算及解析和生成，并有效的提升网络传输效率

常用方法

成员方法说明
stringify(对象)将指定对象转换为json格式字符串
parse(字符串)将指定json格式字符串解析成对象
// 定义天气对象
let weather = {
    city: "北京",
    date: "2088-08-08",
    wendu: "10°~23°",
    shidu: "22%"
};

// 将天气对象转换为json格式的字符串
let str = JSON.stringify(weather);
document.write(str + "<br>");

// 将json格式字符串转换为JS对象
let weather2 = JSON.parse(str);
document.write("城市：" + weather2.city);

表单校验案例

  1. 为表单绑定提交事件（true提交，false不提交）
  2. 获取用户名和密码
  3. 判断用户名是否满足条件（4到16位纯字母）
  4. 判断密码是否满足条件（6位纯数字）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单校验</title>
    <style>
        div {
            width: 500px;
            margin: auto;
            text-align: center;
        }
  
        form label {
            display: block;
        }
  
        #submit {
            width: 150px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div>
        <h1>表单校验</h1>
        <form action="#" id="regist" method="get" autocomplete="off">
            <label>
                <input type="text" id="username" name="username" placeholder="请输入用户名" />
            </label>
            <br>
            <label>
                <input type="password" id="password" name="password" placeholder="请输入密码" />
            </label>
            <br>
            <input type="submit" id="submit" value="注册" />
        </form>
    </div>
</body>
<script>
    // 为表单绑定提交事件
    document.getElementById("regist").onsubmit = function() {
        // 获取用户名和密码
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;

        // 判断用户名和密码是否符合规则
        let nameReg = /^[a-zA-Z]{4,16}$/;
        let passReg = /^[0-9]{6}$/;

        if (!nameReg.test(username)) {
            alert("用户名不符合规则，请输入4到16位纯字母");
            return false;
        }

        if (!passReg.test(password)) {
            alert("密码不符合规则，请输入6位纯数字");
            return false;
        }

        // 提交表单
        return true;
    }
</script>

</html>

BOM

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

window窗口对象

定时器

  • 唯一标识 setTimeout(功能,毫秒值)：设置一次性定时器

    clearTimeout(标识)：取消一次性定时器

  • 唯一标识 setInterval(功能,毫秒值)：设置循环定时器

    clearInterval(标识)：取消循环定时器

加载事件

  • window.onload：在页面加载完毕后触发此事件的功能
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Window窗口对象</title>
</head>
<script>
    // 定时器
    function fun() {
        alert("定时器执行了");
    }

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

    // 设置循环定时器
    let d2 = setInterval("fun()", 3000);
    // 取消循环定时器
    clearInterval(d2);

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

<body>
    <div id="div">dddd</div>
</body>


</html>

因为html代码是从上往下执行的，如果不绑定窗口加载事件，直接把JavaScript代码写在body上面就无法获取body内的元素

（因为加载js代码时body内的内容还没有加载）

location 地址栏对象

href属性

  • 就是浏览器的地址栏。我们可以通过为该属性设置新的URL，使浏览器读取并显示新的URL和内容
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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 showTime() {
        num--;
        if (num <= 0) {
            // 跳转首页
            location.href = "http://www.baidu.com";
        }
        let span = document.getElementById("time");
        span.innerText = num;
    }

    // 设置循环计时器，每秒执行showTime方法
    setInterval("showTime()", 1000);
</script>

</html>

动态广告案例

  • div内代码

    <img src="01.webp" id="ad" style="display: none;"/>

  • css样式中，控制元素是否显示

    display:none 不显示

    display:block 显示

  • 设置定时器，3秒后显示广告图片
  • 设置定时器，3秒后隐藏广告图片
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态广告</title>
</head>

<body>
    <img src="01.webp" id="ad" style="display: none;" />
</body>

<script>
    // 设置定时器，3秒后显示广告图片
    setTimeout(function() {
        let img = document.getElementById("ad");
        img.style.display = "block";
    }, 3000);

    // 设置定时器，3秒后隐藏广告图片
    setTimeout(function() {
        document.getElementById("ad").style.display = "none";
    }, 6000);        // 注意：这里是6000
</script>

</html>

推荐阅读：【JavaWEB】JQuery基础

END
本文作者： 文章标题：【JavaWEB】JavaScript快速入门
 本文地址：https://www.jiusi.cc/archives/44/
 版权说明：若无注明，本文皆九思のJava之路原创，转载请保留文章出处。
最后修改：2022 年 04 月 19 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏