JavaScript(ECMAScript，DOM，BOM)

最新推荐文章于 2021-02-11 00:09:28 发布

辰伏

最新推荐文章于 2021-02-11 00:09:28 发布

阅读量159

点赞数

分类专栏： Web 文章标签： js javascript

本文链接：https://blog.csdn.net/m0_52627845/article/details/112790489

版权

Web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1. 入门

1.1 JavaScript介绍

JavaScript是一种客户端脚本语言，运行在客户端浏览器中，每一个浏览器都具备解析JavaScript的引擎
脚本语言：不需要编译，就可以被浏览器直接解析执行了
核心功能就是增强用户和HTML页面的交互过程，让页面有一些动态效果，以次来增强用户的体验
1995年，NetScape（网景）公司，开发的一门客户端脚本语言：LiveScript，后来，请SUN公司的专家来进行修改，后命名为：JavaScript
1996年，微软抄袭JavaSpript开发出JScript脚本语言
1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，统一了所有客户端脚本语言的编码方式

1.2 组成部分

ECMAScript
- JavaScript的核心，描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义)，ECMAScript是一套标准，定义了一种语言（比如JS）是什么样子。
DOM（文档对象模型）
- HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。
BOM（浏览器对象模型）
- 对浏览器窗口进行访问和操作

1.3 基本使用

内部方式

创建一个HTML
在<body>标签下面编写一个<script>标签
在<script>标签中编写代码

通过浏览器查看

<script>
    document.getElementById("btn").onclick=function () {
        alert("点我干嘛？");
    }
</script>

外部方式
- 定义独立的js文件，将代码编写在文件中
```
document.getElementById("btn").onclick=function () {
    alert("点我干嘛？");
}
```
- 在HTML文件的<body>标签下通过<script src=js文件路径>来引入js文件
  - 例:<script src="js/my.js"></script>
注意
- 在引入外部js的script标签中不能写其他的js代码了
- script标签必须有结束标签，不能是自闭合标签

1.4 开发环境搭建

Node.js：JavaScript运行环境
- 傻瓜式安装，下一步即可
- 安装完成之后，打开dos命令符窗口，输入node -v，出现npm的版本信息则说明安装成功
VSCode：编写前端技术的开发工具
- 傻瓜式安装，下一步即可

2. 基本语法

2.1 注释

单行注释
- //注释的内容
多行注释
- /* 注释的内容 */

2.2 输入输出语句

输入框
- prompt("提示内容")
弹出警告框
- alert("提示内容")
控制台输出
- console.log("显示内容")
页面内容输出
- document.write("显示内容")

2.3 变量和常量

JavaScript属于弱类型的语言，定义变量时不区分具体的数据类型
定义局部变量
- let变量名=值；
定义全局变量
- 变量名=值；
定义常量
- const常量名=值；

2.4 数据类型

数据类型分为

原始数据类型（基本数据类型）
扩展数据类型（引用数据类型）

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

Typeof方法

用于判断变量的数据类型

let age = 18; 
document.write(typeof(age)); // number

2.5 运算符

算术运算符
运算符说明
+ 加法运算
- 减法运算
* 乘法运算
/ 除法运算
% 取余数
++ 自增
– 自减
赋值运算符
运算符说明
= 将等号右边的值赋值给等号左边的变量
+= 相加后赋值
-= 相减后赋值
*= 相乘后赋值
/= 相除后赋值
%= 取余数后赋值
比较运算符
运算符说明
== 判断值是否相等
=== 判断数据类型和值是否相等
> 大于
>= 大于等于
< 小于
<= 小于等于
!= 不等于
逻辑运算符
运算符说明
&& 逻辑与，并且的功能
|| 逻辑或，或者的功能
！ 取反
三元运算符
- 格式
  - (比较表达式)?表达式1：表达式2;
- 执行流程
  - 如果比较表达式为true，则取表达式1
  - 如果比较表达式为false，则取表达式2

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

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

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

运算符	说明
`&&`	逻辑与，并且的功能
`\|\|`	逻辑或，或者的功能
`！`	取反

2.6 流程控制和循环语句

if语句

let month = 3;
if(month >= 3 && month <= 5) {
    document.write("春季");
}else if(month >= 6 && month <= 8) {
    document.write("夏季");
}else if(month >= 9 && month <= 11) {
    document.write("秋季");
}else if(month == 12 || month == 1 || month == 2) {
    document.write("冬季");
}else {
    document.write("月份有误");
}
document.write("<br>");

switch语句

switch(month){
    case 3:
    case 4:
    case 5:
        document.write("春季");
        break;
    case 6:
    case 7:
    case 8:
        document.write("夏季");
        break;
    case 9:
    case 10:
    case 11:
        document.write("秋季");
        break;
    case 12:
    case 1:
    case 2:
        document.write("冬季");
        break;
    default:
        document.write("月份有误");
        break;
}
document.write("<br>");

for语句

for(let i = 1; i <= 5; i++) {
    document.write(i + "<br>");
}

while语句

let n = 6;
while(n <= 10) {
    document.write(n + "<br>");
    n++;
}

2.7 数组

数组的使用和java中的数组基本一致，但是在JavaScript中的数组更加灵活，数据类型和长度都没有限制
定义格式
- let 数组名 = [元素1，元素2...];
- let 数组名 = new Array();
添加元素
- 数组名[索引] = 值;
- 数组名.push(元素);
索引范围
- 从0开始，最大到数组长度-1
数组长度
- 数组名.length
数组高级运算符…
- 数组复制
- 合并数组
- 字符串转数组

2.8 函数

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

定义格式

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

可变参数

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

匿名函数

function(参数列表){
    方法体;
}

注意

函数不调用就不会执行
js中的函数没有重载的概念，只有覆盖的概念
在调用方法时，只判断函数名，和参数没有关系

3. DOM

3.1 介绍

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

3.2 Element元素的操作

方法名	说明
getElementById(id属性值)	根据id获得一个元素
getElementsByTagName(标签名称)	根据标签名称获得多个元素
getElementsByName(name属性值)	根据name属性获得多个元素
getElementsByClassName(class属性值)	根据class属性获得多个元素
子元素对象.parentElement属性	获取当前元素的父元素
createElement(标签名)	创建一个新元素
appendChild(子元素)	将指定子元素添加到父元素中
removeChild(子元素)	用父元素删除指定子元素
replaceChild(新元素，旧元素)	用新元素替换子元素

3.3 Attribute属性的操作

方法名	说明
setAttribute(属性名，属性值)	设置属性
getAttribute(属性名)	根据属性名获取属性值
removeAttribute(属性名)	根据属性名移除指定的属性
style属性	为元素添加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性的操作</title>
    <style>
        .aColor{
            color: blue;
        }
    </style>
</head>
<body>
    <a>点我呀</a>
</body>
<script>
    //1. setAttribute()    添加属性
    let a = document.getElementsByTagName("a")[0];
    a.setAttribute("href","https://www.baidu.com");

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

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

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

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

</script>
</html>

3.4 Text文本的操作

属性名	说明
innerText	添加文本内容，不解析标签
innerHTML	添加文本内容，解析标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本的操作</title>
</head>
<body>
    <div id="div"></div>
</body>
<script>
    //1. innerText   添加文本内容，不解析标签
    let div = document.getElementById("div");
    div.innerText = "我是div";
    //div.innerText = "<b>我是div</b>";

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

</script>
</html>

4. 事件

4.1 介绍

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

4.2 常用的事件

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

4.3 了解的事件

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

4.4 绑定事件

方式一
- 通过标签中的事件属性进行绑定
- <button id="btn" onclick="执行的功能"></button>
方式二
- 通过DOM元素属性绑定
- document.getElementById("btn").onclick = 执行的功能

5. 自定义对象

5.1 介绍

在JavaScript中同样也有面向对象，思想与Java中的类似

5.2 定义和使用对象

定义对象格式

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

使用类的格式

let 对象名 = new 类名(实际变量值);
对象名.方法名();

5.3 字面量定义类和使用

定义格式

let 对象名 = {
    变量名 : 变量值,
    变量名 : 变量值,
    ...
    
    方法名 : function(参数列表){
        方法体;
        return 返回值;
    },
    ...
};

使用格式

对象名.变量名
对象名.方法名(实际参数);

5.4 继承

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

6. 基本对象

6.1 Number

方法名	说明
parseFloat()	将传入的字符串浮点数转为浮点数
parseInt()	将传入的字符串整数转为整数
isNaN()	判断传入的值是不是NaN

NaN
- not a number ：不是一个数字，非数字的类型

6.2 Math

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

6.3 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()	返回本地日期格式的字符串

6.4 String

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

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

成员方法

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

6.5 RegExp(正则对象)

正则表达式
- 是一种对字符串进行匹配的规则
构造方法
构造方法说明
RegExp(规则) 根据指定规则创建对象
let reg = /^规则$/ 直接赋值
成员方法
成员方法说明
test(匹配的字符串) 根据指定规则验证字符串是否符合

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

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

规则

表达式	说明
[a]	只能是a
[abc]	只能是abc中的某一个
[1]	只能是1
[123]	只能是123中的某一个
[a-z]	可以是a到z中的某一个
[A-Z]	可以是A到Z中的某一个
[0-9]	可以是0到9中的某一个

数量词
表达式说明
* 0次或者多次
+ 1次或者多次
？ 0次或者一次
{m} m次
{m,n} 至少m次，最多n次
{m,} 至少m次
{,n} 最多n次
预定义字符
表达式说明
\d 单个数字字符[0-9]
\w 单个单词字符[a-zA-Z_0-9]
\s 单个空白字符
示例代码

表达式	说明
*	0次或者多次
+	1次或者多次
？	0次或者一次
{m}	m次
{m,n}	至少m次，最多n次
{m,}	至少m次
{,n}	最多n次

表达式	说明
\d	单个数字字符[0-9]
\w	单个单词字符[a-zA-Z_0-9]
\s	单个空白字符

<script>
    //1，验证手机号
    //规则：第一位1，第二位358，第三到十一位必须是数字，总长度11
    let reg1 = /^[1][358][0-9]{9}$/;
    document.write(reg1.test("18688888888")+"<br/>");

    //2，验证用户名
    //规则：字母、数字、下划线组成，总长度4-16
    let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
    document.write(reg2.test("zhangsan"));
</script>

6.6 Array

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

6.7 Set

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

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

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

6.8 Map

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

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

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

6.9 JSON

JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式
它是基于ECMAScript规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据
简洁和清晰的层次结构使得JSON成为理想的数据交换语言，易于人阅读和编写，同时也易于计算机解析和生成，并有效的提升网络传输效率
常用方法
成员方法说明
strinngify(对象) 将指定对象转换为json格式的字符串
parse(字符串) 将指定json格式的字符串解析成对象
代码示例

成员方法	说明
strinngify(对象)	将指定对象转换为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 + "<br>");

    //2.将JSON格式字符串解析成JS对象
    let weather2 = JSON.parse(str);
    document.write("城市：" + weather2.city + "<br>");
    document.write("日期：" + weather2.date + "<br>");
    document.write("温度：" + weather2.wendu + "<br>");
    document.write("湿度：" + weather2.shidu + "<br>");
</script>

注意

所有的键必须使用双引号括起来
所有的值如果是数字类型则可以不加双引号

7. 表单校验案例

步骤分析
- 为表单绑定提交事件
- 获取填写的用户名和密码
- 判断用户名是否符合规则
- 判断密码是否符合规则
- 如果有一个条件不符合，则弹出提示消息，重新输入
- 如果所有的条件都满足，则提交表单

代码实现

<body>
    <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>
    document.getElementById("regist").onsubmit = function(){
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;
        
        let reg1 = /^[a-zA-Z]{4,16}$/;
        if(!reg1.test(username)){
            alert("用户名不符合，请输入4到16为纯字母");
            return false;
        }
        
        let reg2 = /^[0-9]{6}$/;
        if(!reg2.test(password)){
            alert("密码不符合，请输入6位数字密码");
            return false;
        }
        
        return true;
    }
</script>

8. BOM

8.1 介绍

BOM(Browser Object Model)
- 浏览器对象模型
将浏览器的各个组成部分封装成不同的对象，方便我们进行操作
- Navigator：浏览器对象
- Window：窗口对象
- Location：地址栏对象
- History：历史记录对象
- Screen：显示器屏幕对象

8.2 Window窗口对象

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

8.3 Location地址栏对象

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

模拟注册成功后的跳转

<body>
    <p>
        注册成功！<span id="time">5</span>秒之后自动跳转到首页
    </p>
</body>
<script>
	let num = 5;
    function showTime(){
        num--;
        
        if(num <= 0){
            location.href = "跳转页面地址";
        }
        let span = document.getElementById("time");
        span.innerHTML = num;
    }
    
    //设置循环定时器，每一秒执行一次showTime方法
    setInterval("showTime()",1000);
</script>

辰伏

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript(ECMAScript，DOM，BOM)

JavaScript1. 入门1.1 JavaScript介绍JavaScript是一种客户端脚本语言，运行在客户端浏览器中，每一个浏览器都具备解析JavaScript的引擎脚本语言：不需要编译，就可以被浏览器直接解析执行了核心功能就是增强用户和HTML页面的交互过程，让页面有一些动态效果，以次来增强用户的体验1995年，NetScape（网景）公司，开发的一门客户端脚本语言：LiveScript，后来，请SUN公司的专家来进行修改，后命名为：JavaScript1996年，微软抄袭Java
复制链接

扫一扫

专栏目录