[JavaScript知识库]2021-09-22

C算法
文章目录
1、JavaScript详细解析
1.1、JavaScript介绍
1.2、快速入门
引入js的方式一：内部方式
引入js的方式一：外部方式
1.3、开发环境搭建
1.4、快速入门总结
2、JavaScript基本语法
2.1、注释
2.2、输入输出语句
2.3、变量和常量
2.4、原始数据类型和typeof方法
2.4.1、原始数据类型
2.4.2、typeof
2.5、运算符
2.6、流程控制和循环语句
2.7、数组
2.8、函数
2.9、小结
3、JavaScript DOM
3.1、DOM介绍
3.2、Element元素的获取操作
3.3、Element元素的增删改操作
3.4、Attribute属性的操作
3.5、Text文本的操作
3.6、DOM小结
4、JavaScript 事件
4.1、事件介绍
4.2、事件操作
4.3、事件小结
5、JavaScript综合案例
5.1、案例效果介绍
5.2、添加功能的分析
5.3、添加功能的实现
5.4、删除功能的分析
5.5、删除功能的实现
6、JavaScript面向对象
6.1、面向对象介绍
6.2、类的定义和使用
6.3、字面量类的定义和使用
6.3、继承
6.4、小结
7、JavaScript内置对象
7.1、Number
7.2、Math
7.3、Date
7.4、String
7.5、RegExp
7.6、Array
7.7、Set
7.8、Map
7.9、Json
7.10、表单校验
7.11、小结
8、JavaScript BOM
8.1、Windows窗口对象
8.2、Location地址栏对象
8.3、案例-动态广告
8.4、小结
9、JavaScript封装
1、JavaScript详细解析
1.1、JavaScript介绍
JavaScript 是一种客户端脚本语言。运行在客户端浏览器中，每一个浏览器都具备解析 JavaScript 的引擎。

脚本语言：不需要编译，就可以被浏览器直接解析执行了。

核心功能就是增强用户和 HTML 页面的交互过程，让页面有一些动态效果。以此来增强用户的体验！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AbUjw3O0-1632119279795)(…\images\js\img\javaScript表格介绍.png)]在这里插入图片描述

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

1
2
3
在这里插入图片描述

1.2、快速入门
实现步骤
创建一个 HTML。
在标签下面编写一个
具体实现

document.getElementById(“btn”).οnclick=function () {
alert(“点我干嘛？”);
}
1
2
3
在html中引用外部js文件

1
1.3、开发环境搭建
Node.js:JavaScript 运行环境

VSCode：编写前端技术的开发工具

1.4、快速入门总结
JavaScript 是一种客户端脚本语言。

组成部分

ECMAScript、DOM、BOM
1
和 HTML 结合方式

内部方式：
1
2
2、JavaScript基本语法
2.1、注释
单行注释

// 注释的内容
1
多行注释

/*
注释的内容
*/
1
2
3
2.2、输入输出语句
输入框 prompt(“提示内容”);
弹出警告框 alert(“提示内容”);
控制台输出 console.log(“显示内容”);
页面内容输出 document.write(“显示内容”);
2.3、变量和常量
? JavaScript 属于弱类型的语言，定义变量时不区分具体的数据类型。

定义局部变量 let 变量名 = 值;

//1.定义局部变量
let name = “张三”;
let age = 23;
document.write(name + “,” + age +"
");
1
2
3
4
定义全局变量 变量名 = 值;

//2.定义全局变量
{
let l1 = “aa”;
l2 = “bb”;
}
//document.write(l1);
document.write(l2 + “
”);
1
2
3
4
5
6
7
定义常量 const 常量名 = 值;

//3.定义常量
const PI = 3.1415926;
//PI = 3.15;
document.write(PI);
1
2
3
4
2.4、原始数据类型和typeof方法
2.4.1、原始数据类型
在这里插入图片描述

2.4.2、typeof
typeof 用于判断变量的数据类型

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

1
2
2.5、运算符
算数运算符
在这里插入图片描述

赋值运算符
在这里插入图片描述

比较运算符
在这里插入图片描述

逻辑运算符
在这里插入图片描述

三元运算符

三元运算符格式

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

执行流程

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

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

2.6、流程控制和循环语句
if 语句

//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("
");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
switch 语句

//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("
");for 循环
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
for循环

//for循环
for(let i = 1; i <= 5; i++) {
document.write(i + “
”);
}
1
2
3
4
while 循环

//while循环
let n = 6;
while(n <= 10) {
document.write(n + “
”);
n++;
}
1
2
3
4
5
6
2.7、数组
数组的使用和 java 中的数组基本一致，但是在 JavaScript 中的数组更加灵活，数据类型和长度都没有限制。

定义格式

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

let arr = [10,20,30];
1
索引范围

从 0 开始，最大到数组长度-1
数组长度
数组名.length
for(let i = 0; i < arr.length; i++) {
document.write(arr[i] + “
”);
}
document.write("==============
");
1
2
3
4
数组高级运算符…

数组复制

//复制数组
let arr2 = […arr];
//遍历数组
for(let i = 0; i < arr2.length; i++) {
document.write(arr2[i] + “
”);
}
document.write("==============
");
1
2
3
4
5
6
7
合并数组

//合并数组
let arr3 = [40,50,60];
let arr4 = […arr2 , …arr3];
//遍历数组
for(let i = 0; i < arr4.length; i++) {
document.write(arr4[i] + “
”);
}
document.write("==============
");
1
2
3
4
5
6
7
8
字符串转数组

//将字符串转成数组
let arr5 = […“heima”];
//遍历数组
for(let i = 0; i < arr5.length; i++) {
document.write(arr5[i] + “
”);
}
1
2
3
4
5
6
2.8、函数
函数类似于 java 中的方法，可以将一些代码进行抽取，达到复用的效果

定义格式

function 方法名(参数列表) {
方法体;
return 返回值;
}
1
2
3
4
可变参数

function 方法名(…参数名) {
方法体;
return 返回值;
}
1
2
3
4
匿名函数

function(参数列表) {
方法体;
}
1
2
3
2.9、小结
注释：单行// 多行/**/
输入输出语句：prompt()、alert()、console.log()、document.write()
变量和常量：let、const
数据类型：boolean、null、undefined、number、string、bigint
typeof 关键字：用于判断变量的数据类型
运算符：算数、赋值、逻辑、比较、三元运算符
流程控制和循环语句：if、switch、for、while
数组：数据类型和长度没有限制，let 数组名 = [长度/元素]
函数：类似方法，抽取代码，提高复用性
3、JavaScript DOM
3.1、DOM介绍
DOM(Document Object Model)：文档对象模型。
将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。
在这里插入图片描述
3.2、Element元素的获取操作
具体方法
在这里插入图片描述

代码实现

代码实现

代码实现

代码实现

常用的事件

事件名 说明
onblur 元素失去焦点，在对象失去焦点时发生
onchange 域的内容被改变时发生
onclick 当用户点击某个对象时调用的事件句柄
ondblclick 当用户双击某个对象时调用的事件句柄
onfocus 元素获得焦点时发生
onsubmit 确认按钮被点击时发生
onreset 重置按钮被点击，事件会在表单中的重置按钮被点击时发生
了解的事件

在这里插入图片描述

4.2、事件操作
绑定事件

方式一

通过标签中的事件属性进行绑定。

1
方式二

通过 DOM 元素属性绑定。

document.getElementById(“btn”).onclick = 执行的功能
1
4.3、事件小结
事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行。
常用的事件 onload onsubmit onclick ondblclick onblur onfocus onchange
绑定事件方式
方式一：通过标签中的事件属性进行绑定。
方式二：通过 DOM 元素属性绑定。
5、JavaScript综合案例
5.1、案例效果介绍
在“姓名、年龄、性别”三个文本框中填写信息后，添加到“学生信息表”列表（表格）中。
在这里插入图片描述

5.2、添加功能的分析
为添加按钮绑定单击事件。
创建 tr 元素。
创建 4 个 td 元素。
将 td 添加到 tr 中。
获取文本框输入的信息。
创建 3 个文本元素。
将文本元素添加到对应的 td 中。
创建 a 元素。
将 a 元素添加到对应的 td 中。
将 tr 添加到 table 中。
5.3、添加功能的实现

<style>
    table{
        border: 1px solid;
        margin: auto;
        width: 500px;
    }

    td,th{
        text-align: center;
        border: 1px solid;
    }
    div{
        text-align: center;
        margin: 50px;
    }
</style>

<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>

删除功能分析
为每个删除超链接添加单击事件属性。
定义删除的方法。
获取 table 元素。
获取 tr 元素。
通过 table 删除 tr。
5.5、删除功能的实现
//二、删除的功能
//1.为每个删除超链接标签添加单击事件的属性
//2.定义删除的方法
function drop(obj){
//3.获取table元素
let table = obj.parentElement.parentElement.parentElement;
//4.获取tr元素
let tr = obj.parentElement.parentElement;
//5.通过table删除tr
table.removeChild(tr);
}
1
2
3
4
5
6
7
8
9
10
11
6、JavaScript面向对象
6.1、面向对象介绍
在 Java 中我们学习过面向对象，核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。思想类似。
1
在这里插入图片描述

6.2、类的定义和使用
结构说明
在这里插入图片描述

代码实现

在这里插入图片描述

代码实现

继承关键字：extends

顶级父类：Object

把相关的数据和方法组织为一个整体来看待，从更高的层次来进行系统建模，更贴近事物的自然运行模式。

类的定义

class 类{} 字面量定义

类的使用

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

继承

让类和类产生子父类关系，提高代码的复用性和维护性。

子类 extends 父类

Object 顶级父类

7、JavaScript内置对象
7.1、Number
方法介绍
在这里插入图片描述
代码实现

代码实现

构造方法
在这里插入图片描述

成员方法

在这里插入图片描述

代码实现

构造方法
在这里插入图片描述

成员方法
在这里插入图片描述

代码实现

方法说明

构造方法&成员方法
在这里插入图片描述

规则
在这里插入图片描述

代码实现

代码实现

方法说明
在这里插入图片描述

代码实现

方法说明
在这里插入图片描述

代码实现

它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和 生成，并有效的提升网络传输效率。
在这里插入图片描述
方法说明

在这里插入图片描述

代码实现

代码实现

8.1、Windows窗口对象
定时器
唯一标识 setTimeout(功能，毫秒值)：设置一次性定时器。
clearTimeout(标识)：取消一次性定时器。
唯一标识 setInterval(功能，毫秒值)：设置循环定时器。
clearInterval(标识)：取消循环定时器。
加载事件
window.onload：在页面加载完毕后触发此事件的功能。
代码实现

-->

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

在这里插入图片描述

代码实现

注册成功！5秒之后自动跳转到首页...

**封装：**将复杂的操作进行封装隐藏，对外提供更加简单的操作。

获取元素的方法

document.getElementById(id值)：根据 id 值获取元素
document.getElementsByName(name值)：根据 name 属性值获取元素们
document.getElementsByTagName(标签名)：根据标签名获取元素们
代码实现

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

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

function getByTag(tag) {
return document.getElementsByTagName(tag);
}
1
2
3
4
5
6
7
8
9
10
11
我们之前的操作都是基于原生 JavaScript 的，比较繁琐。 JQuery 是一个前端框架技术，针对 JavaScript 进行了一系列的封装，使得操作变得非常简单！ 期待吧……

CSDN热榜javascripthtmlnode.js
来自专栏
java前端技术
java小白自学java 3篇文章 3人订阅

发布于2021-09-20
著作权归作者所有
相关推荐更多
javascript内存管理详细解析
weixin_38631729 0 下载
javascript操作referer详细解析
weixin_38653296 0 下载
javascript遍历控件实例详细解析
weixin_38593823 0 下载
比较详细的关于javascript 解析json的代码
weixin_38731123 0 下载
Javascript中各种trim的实现详细解析
weixin_38697328 0 下载
JavaScript自定义日期格式化函数详细解析
weixin_38644599 0 下载
深入解析JavaScript_什么最重要?算法!!
深入解析JavaScript 博客核心内容: 1、JavaScript中字符串的常见操作 2、JavaScript中数组的常见操作 3、JavaScript中日期的相关操作 4、JavaScript中函数的相关操作 5、JavaScript中的BOM对象 6、HTML DOM对象中的节点查找(全局查找以及局部…
JavaScript(基础详细讲解)_怪咖i!的博客
JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。 JavaScript特点…
javascript详解(很详细,很简单)_javascript源码解析,javascript…
javascript详解(很详细,很简单)javascript详解(很详细,很简单)javascrijavascript源码解析更多下载资源、学习资料请访问CSDN下载频道.
javaScript预解析详细讲解_LTZWL的博客
javaScript预解析详细讲解 1.什么是预解析: 在代码执行前执行的程序。 2.预解析解析什么内容: 1.var声明变量 2.声明式函数 function fun(){} ;(不是赋值函数) 3.如何解析 1.var声明变量的解析:…
《JavaScript小白教程(详细解析JavaScript)第一章》_南…
如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值,浏览器中使用 F12 来启用调试模式, 在调试窗口中点击"Console" 菜单。 <!DOCTYPEhtml>a=5;b=6;c=a+b;console.log?; 程序中调试是测试,…
JavaScript的讲解_趁年轻不如拼一拼
JavaScript是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备、是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的…
JavaScript对内存分配及管理机制详细解析
weixin_38736562 0 下载
javascript垃圾收集机制与内存泄漏详细解析
weixin_38674627 0 下载
wavparse:在javascript中解析wav音频文件-源码
仆儿 0 下载
javaScript学习笔记（一）js基础
sswqzx 10万+ 阅读 72 评论