js基础知识（暂时完结）
前言：由于打算学习ctf的web方向，所以开始补技术缺陷，已经更完html和css(更到够用就完结了，其余的以后再
继续，还需要js,mysql,以及php，今天就先开始js)
1 初识 javascript
1.1 js历史
看到js的历史时总能让我想起初二的那个暑假，距今天也有五年了，那时候第一次接触编程，学习的便是java，虽
然最后也没有继续学下去，但今天看见js的历史总能想起那段刚接触编程的时光，挺令人怀念。好了，停止感怀，
开始进入正题。
js是由布兰登艾奇再1995年利用10天完成涉及的，最后与sun公司合作后正式命名为javascript，简称js,虽然
javascript和java看起来很像，但从代码角度看这两个是没有什么关联的。
1.2 javascript是什么
1 js是世界上最流行的语言之一，是运行在客户端的脚本语言，而php则是服务器段的脚本语言。
2 js是解释性语言，不需要编译，在运行过程中由js解释器逐行解释并执行，不想c++等其余语言，需要先编译再运
行，所以不存在js编译器
3 现在也可以基于node.js技术进行服务器端编程，js最初产生的目的是伪类做表单动态校验，但随着实际的使
用，目前可以利用js进行网页特效，服务端开发（node.js）桌面程序，app，控制引荐-物联网，游戏开发等功能
html或者css是标记遇见。是用来决定网页外观，的js可以实现业务逻辑和也买你控制。相当于人的各种动作
1.3 浏览器执行js
浏览器由两部分组成，渲染引擎和js引擎。
渲染引擎： 是用来解析html和css的，俗称内核，比如谷歌浏览器的bink,老版本的webkit
js引擎： 也称js解释器，用来读取网页中的js代码，对其处理后运行，比如chrome浏览器的v8
浏览器并不会本身执行js代码，二十通过内置的js引擎来执行js代码，js引擎执行代码时进行逐行解释每一句源码，
转换为机器语言，然后由计算机去执行，所以javascript语言归为脚本语言。
1.4 js的组成
js由三部分组成，分别是javascript语法（ecmascript），页面文档对象模型(dom)，浏览器对象模型(bom)
1.4.1 ECMAScript
ECMAScript 是由ecma国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上的应
用广泛，它往往被称为js或者JScript,但实际上后两者是ECMAScript语言的实现和扩展。
javascript是由网景公司发明的，Jscript是由微软公司发明的，二者区别不大。
ECMAscript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
1.4.2 DOM -文档对象模型
文档对象模型就是对页面中各种元素进行操作，是w3c组织推荐的处理可扩展标记语言的标准编程接口，通过dom
提供的接口 ，可以对页面上各种匀速进行操作，大小，位置，颜色等。
1.4.3 BOM-浏览器对象模型
BOM是之浏览器对象模型，它提供了独立于内容的，可以与浏览器窗口进行互动的对象结构。通过BOM可以从操
作浏览器敞口，比如弹出框，控制浏览器的跳转，获取分辨率等。
1.5 js初体验
js有三种书写位置，分别为行内，内嵌和外部。类比css的几种模式。
1.5.1 行内式
行内式写法就是将js内容写到元素属性中，例如onclick属性，可以在点击onclick所在的元素时执行onclik的属性
值，即js代码，具体实现如下
<input value="text" type="button" onclick="alert('1')//弹出1" />
执行的结果是点击text按钮后页面弹出1
1.5.2 内嵌式
js的内嵌式和css的内嵌式类似，css是在head标签中使用<style>标签来容纳css代码，而js则是在head标签中使
用<script>来容纳代码。具体实现如下
<script>
alert('2');//弹出2
</script>
我们需要注意的是<script>标签的位置，<scritch> 标签可以放在<head> 内，也可放在 <body> 标签的最后
但由于放在前面会阻止dom的解析和渲染，所以一般把他放在后面。由于html是从上往下解析的，所以对于获取
网页元素的操作，如果<script> 标签在想要获得元素的前面，则会获取不到，所以放在后面更好一点。
1.5.3 外部式
与css的外部式类似，js的外部式也是调用js文件，调用的条件为在<script> 标签中添加src属性，src的属性值为
js文件的路径。具体实现如下
<script src="a.js"> </script>
引用外部js文件的script标签中间不可以写代码，格式规定
1.6 js注释
js的注释和c++完全相同，所以就不多加叙述了。
1.7 js输入输出语句
js中常见的输出语句有以下几种
1 alert(”你的内容“) ;浏览器弹出警示框，内容为你的内容
还有一种写法是windows.alter("内容")；这种写法和上卖弄的写法相同，没有什么区别
2 prompt(“提示内容”); 该函数用于输入内容，在弹出的警示框中输入内容
输入的内容将作为函数返回值，故实际利用该函数上输入并且存储输入内容。
3 console.log(“你的内容”)；该内容在网页控制台中可见
注意： 所有的输出内容必须放在双引号或者单引号中，不能单独放在括号中，函数的显示也不像c++直接显示
数字，而是以字符形式显示。 js中的单双引号没有什么实质性区别。
4 document.write( )函数
利用此函数，直接向html输出流写内容
当我们输出多个内容时，可以用+连接起来
var mystr="hello world!";
document.write(mystr+"123");
输出时两个都可以输出
当然也可以像c一样使用%s或者%d来输出，逗号后加变量名即可
例如
var hello = 'hello';
var one = 1;
console.log('%s world', hello)
console.log('%d + 1 = 3', one)
我们也可以在括号中输出标签，但需要用引号括起来，例如
document.write("</br>")
这样便输出了一个换行符
5 document.getElementByld("id")
利用此函数，我们可以更改对应id的标签内的html内容
具体的使用如下
document.getElementById("id").innerHTML = "段落已修改。";
由于id在js中以字符串形式存在，所以id要用双引号隔开。
由于此函数属于dom，所以将<script> 标签放在head中将接受不到数据。
1.8 变量
1.8,1 变量的声明
由于默认看博客的人至少学过一门编程语言，所以就不会写的很详细
首先我们要明白，js是一门动态类型语言，而c++，java是一门静态类型语言，对于动态类型语言来说。编程的时
候无需显示指定类型，运行的时候才知道每个变量的类型，而像c++等语言则需要提前声明。
对于二者的优缺点
静态类型在编译后会利用一直类型的优势，利用内存地址加偏移量的方法存取内存，而动态类型会将数据当作字符
串存下来，存取时使用字符串匹配
具体的变量定义方法
var a=1;
a=3;
注意:
1 这其中的var是定义变量的意思,但我们需要注意， 如果变量赋值的时候，忘了写var命令，这条
语句也是有效的在js中，不像c++一样必须声明变量类型才能赋值，不声明直接给值也行，但可能会无意间产生全
局变量，所以不推荐，还是加上var比较好。
2 js是动态类型语言，也就是说，变量的类型没有限制，可以随时更改类型。比如
var a='a';
a=1;
a并没有一个固定的数据类型，所以可以给很多种类型值。
3 js不像c++,一个变量只能声明一次，可以多次声明，只不过后续的声明无效罢了。
4 多个变量的声明同时赋值和c++相同，直接逗号隔开即可
1.8.2 变量提升
js的引擎工作方式为：先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的
变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。
所以对于：
prompt(a);
var a=1;
在引擎中实际的运行顺序为：
var a;
prompt(a);
a=1;
这种情况下在prompt( )函数中a是还没有被声明的。
1.8.3 变量的命名规范
变量名由如下几个元素构成：
大小写字母，数字，下划线，美元符号。
对变量名有如下几个要求：·
js中变量名要严格区分大小写，比如app 和App是两个变量。
不能以数字开头，比如18age就是错误的变量名。
不能是关键字，例如var for，while。
变量名必须有意义
遵守驼峰命名法，首字母小写，后面单词的首字母需要大写
1.9 字面量（常量）
js中的字面量分为数字，字符串，数组，对象，函数。其实就是c++中的常数，具体的应用在以后会涉及。
2.0 关键字
js中也存在一些关键字，如下.
以下是 JavaScript 中最重要的保留关键字（按字母顺序）：
| abstract | else | instanceof | super |
|---|---|---|---|
| boolean | enum | int | switch |
| break | export | interface | synchronized |
| byte | extends | let | this |
| case | false | long | throw |
| catch | final | native | throws |
| char | finally | new | transient |
| class | float | null | true |
| const | for | package | try |
| continue | function | private | typeof |
| debugger | goto | protected | var |
| default | if | public | void |
| delete | implements | return | volatile |
| do | import | short | while |
| double | in | static | with |
2.1 简单数据模型
js中的简单数据模型有
2.1.1 number 数字型
包含整形和浮点型即number数据类型就是c++中 int floot double 三种数据类型的合集
利用Number.MAX_VALUE 这个预定义的值可以获得number的最大值，大约在1.7976 e+308
用Number.MIN_VALUE 可以获得最小值，大约为5e-324
数字类型包含三个特殊值
分别是 ：Infinity ：代表无穷大，大于任何数值
-Infinity ： 代表无穷小，小于任何数值
NAN ： 代表一个非数值
在学习数字类型时我们要用到一个函数，IsNaN( )用来判断一个变量是否为非数字类型，如果传入数字，则返回
false，如果传入的是NAN,也就是非数字，则会返回true, 记住null属于数字类型，所以在函数内传入 null和""会返
回false
doucument.write（isNAN("A")）;
2.1.2 boolean
没啥说的,就是c++中bool类型,true 等于1 false等于0 ，0为错误，非0为正确。
2.1.3 string
字符串类型，和c++相同，记住“ 和‘没有区别,在js中不需要加特殊的区分。
js可以用单引号嵌套双引号，也可以双引号嵌套单引号，二者没有什么区别，要符合单引号对单引号，双引号对双
引号
通过字符串的length属性可以获得字符串的长度
具体的使用如下：
var a="wiasd";
doucment.write(a.length);
利用此操作可以输出字符串长度。
用+连接字符串和字符串，或者字符串和变量可以将两部分链接起来
其凭借方式为字符串+任何类型=凭借之后的新字符串。
凭借会把字符串相加的仍和类型转换为字符串，再拼接为一个新的字符串
具体使用：
alert("hello"+12);
//输出结果为hello12
alert(“12”+11);
//输出结果为1211
var a=1;
alert("11"+a);
//输出结果为111
2.1.4 undefined 和null
在变量声明后但未给值时，变量的值默认便是undefined
null 可以给变量声明为空值。
var a=null;
这样可以给a给空值。
一个声明变量给null时，里面的内容值为空
2.2 获取检测变量的数据类型
利用typeof可用来获取检测变量的数据类型
具体用法如下
alter(typeof 12);
var na=1;
alter(typeof na);
输出结果为
number 和 string
2.3 数据类型转换
就和名字一样，就是纯粹的数据类型转换
2.3.1 转换为字符串
转换为字符串有三种方式
1 使用toString() 属性
具体使用如下：
var na =1;
alert(na.toString());
2 使用String( )函数进行强制类型转换
具体的使用如下：
var na = 1;
alert(String(na));
3 利用加号拼接字符串,与字符串一同拼接的数据都会被转换为字符串输出。
2.3.2转换为数字型
有四种方法可以将数据转化为数字型
1 parseInt( )函数，注I是大写的，具体的实现如下：
alert(parseInt("1"));
输出结果为1；需要注意的是我们的转换仅仅只能将字符串表示的数字转换为int类型的数字，当我们传入非
数字类型字符串时，会返回NAN.当我们传入非整数的数字字符串时，也就是小数的字符串形式，会直接省去小
数，直接转换为整型。
2 parseFloat()函数，将string类型转换为浮点数数值类型，具体的使用如下：
alert(parseFloat("1.1"));
输出结果为1.1该函数与parseInt() 函数的区别就在于，他可以识别小数的字符串形式，将其转换为浮点数类
型，和c++的浮点数性质相同。
3 Number() 强制类型转换函数
作用，将string类型转为number数据类型，可以理解成该函数是上述两函数的总和。
具体使用：
alert(Number(1.5));
输出结果为1.5;
4 利用算数运算进行隐式转换
当我们使用＋号将字符串和数字连接时，会将数字转换为字符串，与之类似，当我们使用- * / 将数字与字符串
形式的数字相连接时，也会将字符串直接转换为number后与数字进行运算，得到的结果将是运算后的值。
具体的应用如下：
alert("12" - 1);
输出结果为11；说明在进行运算时，js自动转换了数据类型
注意： 我们可以发现，js的类型转换与c++存在区别，在c++中，我们将字符串转换为数字，是以对应的ascll码形
式转换，而这里则是纯转换为对应的数字。
2.3.3 转换为boolean形
使用函数 Boolean()来进行转换
转换规则为：代表空，否定的值会被转换为false，如"" , 0, null, NAN , undefined
其余值都会被转换为ture
2.4 运算符
由于运算符和c++的没有区别，就不详细写了，写几个容易忘的点
1 ++a 是先自加，再传值。a++是先传值，再自加。
2 js和c++等号稍有不同，在c++中
== 可以用来判断两边的值是否相等，会存在隐式转换，就和我在上文提出的字符串转数
字的类型转化一样,先说一下c++的转换机制
c++的==号比较或其他运算过程中过程中首先会判断两侧的数据类型是否相同，如果不同，则会先转换为相同再进
行比较，但要记住，char类型与int型进行比较时，会将char以ascll码的形式转换为int类型再进行比较，由于
string类型无法转换为ascll码，所以string类型无法与int类型无法比较大小，int与double运算那会将int转换为
double,char与string运算会将char转换为string.
在js中== 代表着判断，两侧数据类型可一致，可不一致，只要值相同即可，当不一致时，存在类型转换，也是将
string转化为number类型，但需要注意的是js的转换不是往ascll码类型转换，而是往字符串所对应的数字转换。
例如
alert('1' == 1);
输出结果为true.
在js中我们使用=== 来判断全等，这时就不仅仅要求两边的值相同了，还要求数据类型相同，例如
alert('1' === 1);
返回的结果是false
2.5 逻辑运算符
js中的逻辑运算符和c++相同，都是&& || ! 三种，没什么新的地方好叙述的。
2.6 赋值运算符
js中的赋值运算符和c++也相同，就是+= /= %= -=
2.7 分支流程控制
由于完全和c++相同，也不加赘述了
2.8 循环控制
和c++也没有什么区别，唯一的区别在于把 int i=1 换成了 var i =1,其余相同
2.9 js中的数组
2.9.1数组的声明
js中的数组声明有两种方式
- var 数组名 = new Array( );
具体的操作如下:
var a = new Array();
利用Array( )函数，new一个新数组
- var 数组名 = [内容1，内容2，内容3]；
具体实现如下：
var a;
a = [1, 2, 3];
alert(a[1]);
输出结果为 2；是不是看着很眼熟，我们来看看c++的初始化数组方式
int a[2]={1,2};
js由于变量提升的原因，声明数组和整体的初始化可以分开进行，但c++不行，整体初始化必须在数组声明时进行。
由于js是动态开空间，所以不用提前声明空间大小。
而且js中的数组可以同时容纳不同类型的值
使用.length 属性可以获得数组的大小，即元素数量
2.9.2 通过修改数组length长度新增数组元素
我们可以通过更改数组length的长度对数组空间限制，可以增加也可以减少，无论增加还是减少都是从数组的最后
的元素进行的。
var a = [1, 2, 3];
a.length = 2;
alert(a[2]);
输出结果为undefined,说明最后的数组内容已经被删除了，如果我们扩张数组，新增添的数组空间虽然存在，但
是为空。
3.0 函数
3.1 函数的声明
js的函数和c++也基本相同，就是声明时有点区别
具体如下：
function dfs(){
//函数内容
}
这就是一个无返回值的函数
js中，不添加返回值时默认返回的是undefined
3.2 函数中参数的传递
形参： 函数运行中收到的参数
实参： 传递给函数的参数
在js中，我们接受实参时不需要表明参数的数据类型；
具体使用如下
function dfs(a, b) {
return a + b;
}
alert(dfs(1, 2));
输出结果为3
3.3 函数形参和实参不匹配问题
分好几种情况
1 实参个个数多于形参个数
只取到形参的个数
2 实参个数小于形参的个数，多的形参定义为undefined，输出结果为NAN
3.4 函数的返回值
与c++也相同，但有一点需要记住，即当返回多个值并用逗号隔开时，只会传回最后的值。
3.5 arguments 的使用
这可以说是js在函数中唯一的一个异于c++的内容
当我们不确定有多少个参数传递时，可以用arguments来获取，在js中，arguments实际上是当前函数的一个内置
队形，所有的函数都内置了一个arguments对象，储存了传递的所有实参,这是相对于c++的进步之处
arguments 具有length 属性，按索引方式储存数据，但不具有push pop等方法，可以理解成简化的数组
function dfs() {
var a = 0;
for (var i = 0; i < arguments.length; i++) {
a += arguments[i];
}
return a;
}
alert(dfs(1, 2, 3, 4));
输出结果为10；
注意： 由于js是解释性编程语言，所以可以将调用函数的程序放在声明函数程序之前
3.6 自定义函数的方式
自定义函数有两种形式，第一种是命名函数，就是我们最常用的方式，第二种是匿名函数，具体的操作如下
var dfs= function (){
//函数内容
}
dfs();
调用时直接使用自定义的函数名即可。
3.7 作用域
作用域，就是变量的作用范围，在同一作用域下的变量可以正常修改和调用，不同作用域间不能随意调用修改，同
一作用域下不能起同一变量名
js分为全局域和局部域，与其他语言不同的是，js没有块级作用域，当我们用java时
if(true){
int num = 123;
system.out.print(num); // 123
}
system.out.print(num); // 报错
由于num跨出了if构建的块级作用域调用，所以会报错
当我们使用js时
if (1) {
var num = 123;
alert(num);
}
//var num = 1;
alert(num);
此时会弹出两次123
块级作用域是什么？
由{ }包含，除了函数作用域以外的都是块级作用域，典型的有if或for语句中内容存放的作用域。
函数作用域则是由{}容纳的，包含函数内容的作用域，js在es6之前没有块级作用域
3.8 预解析与代码执行
js代码是由浏览器中是js解析器来执行的js解析器在运行js代码时分两部，预解析和代码执行
预解析： 在当前作用域下，js代码执行之前，浏览器会默认把带有var和function声明的变量在内存中提前进行声
明或者定义。这也解释了为什么函数的调用可以放在声明之前了。
代码执行： 代码执行会从上到下执行js语句，预解析和先把变量和函数的声明在代码执行之前完成
所以预解析也叫变量提升，函数提升，变量或函数的赋值不会提升，
关于函数声明表达式带来的问题，我们看一下代码
fn();
var fn = function() {
console.log('想不到吧');
}
结果会报错”fn is not a function"，为什么会这样呢
首先由于预解析，会进行变量提升，我们声明的fn变量发生提升，注意，只将声明提前而没有将赋值提前
然后进行代码执行，执行fn()函数，发现fn函数未进行声明，故会报错。
我们再采用命名函数的方式测试一下
fn();
function fn() {
alert(1);
}
此时能正常输出，原因是以命名函数方式进行函数初始化会进行函数提升，将函数声明提前到最前，进行预解析，所以函数的调用可以放在声明的前面。
3.9 对象
对象的定义： 在js中，对象是一组无序相关属性和方法的集合，所有的食物都是对象，例如子字符串，数值，数
组，函数等，对象是由属性和方法构成的。
属性：你可以理解成描述对象性质的变量
方法：可以理解成动向进行的活动，即函数。
为什么我们需要对象：
用于保存一个事物的完整信息，伪类更好的存储一组数据，对象应运而生。对象中没想数据设置了属性名称，可以
语义清晰的访问。
4.0 创建对象的三种方式
4.0.1 利用字面量创建对象
在对象中包含了属性和方法，
采取键值对的形式表示
具体方法如下:
var node={
name:1,
vl:2
};
我们需要注意，不同的属性或方法之间用,隔开，最后要在花括号结尾带上分号，这是和c++中不同的地方
关于属性或者函数的调用，有一下两种方式
var node = {
name: 1,
vl: 2
};
node.name = 1;
alert(node['name']);
一个是和c++一样，通过.来调用属性或方法，第二种是通过['属性名']的方式实现对属性值的调用，注意，在调
用时属性名必须加引号。
调用方法的方式：和c++相同，故不多加描述
注意，属性是对象的一部分，而变量不是对象的一部分，变量是单独存储数据的容器，变量单独声明赋值，单独存
在，对象里面的变量称为属性，不需要声明，用来描述对象的特征。
4.0.2 利用new Object 创建对象
通过内置的构造函数Object( )可以创建一个空的对象，对于这个空对象，定义属性和方法的方式和直接访问相同，
具体如下：
var node=new Object();
node.name=1;
node.dfs= function(){
//函数内容
}
4.0.3 利用构造函数创造对象
构造函数是一种特殊的函数，主要用来初始化对象，即未对象成员变量赋初始值，它总与new运算符一起使用，我
们可以把对象中的一些公共属性和方法抽取出来，封装在函数中
封装方式：
function Fas() {
this.name;
this.dfs = function () {
alert(1);
//函数内容；
}
}
var node = new Fas();
node.dfs();
使用构造函数，更像c++中我们创造了一个结构体，利用这个结构体定义一个对象，如果我们想要对象里面的属性
具有值，可以传给构造函数具体的属性值，从而完成初始化。
具体的操作如下
function Fas(a) {
this.name = a;
this.dfs = function () {
//alert(1);
//函数内容；
}
}
var node = new Fas(1);
alert(node.name);
此时会弹出1 ，复合我们的设定
注意: 1 构造函数约定首字母大写
2 函数内部和方法前需要this，和c++相同
3 构造函数不需要return返回结果
4 当我们创造对象时，必须用new来调用构造函数
5 写构造函数本质上就是构造了一个类，利用此方法创建对象，我们称之为对象的实例化
new 的作用:
1 在构造函数代码开始执行之前，创建一个空对象
2 修改this的指向，将this指向创建出来的空对象
4.0.4 遍历对象
具体实现如下
function Fas() {
this.name = 1;
this.id = 2;
this.vl = 3;
}
var node = new Fas();
for (var i in node) {
console.log(i);
console.log(node[i]);
}
使用for循环可以对对象的属性进行遍历
i是属性名变量，是以字符串形式显示
node[i]参考上文的访问对象方式，是对象的属性值。
4.1 内置对象
js中对象分为三大类：内置对象 自定义对象 浏览器对象
前两种是js基础内容，输入ECMAScript 第三个浏览器对象是js独有的
内置对象是js语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或者是基本而必要的功能，即属
性和方法
js中提供了多个内置对象：Math Date Array String 等
由于js中内置对象比较多，所有我们要先学会查阅文档
通过MDN 和W3C MDN提供了有关开放网络技术的信息，包括HTML,CSS和万维网以及HTML5应用的api
4.1.1Math对象
Math不是一个构造函数，所有的属性和方法都是静态的，所以我们不需要使用new来调用，可以直接使用属性和
方法
常见属性：
1 Math.E 欧拉常数，也就是自然对数的底数，约等于2.718
2 Math.LN2 2的自然对数
3 Math.LOG2E 以2为底的E的对数
4 Math.PI 圆周率，一个圆的周长和直径之比，约等于2.13159
5 Math.SQRT1_2 根号2分之一
常见方法：
以下的x代之参数
1 Math.abs(x) 返回一个数的绝对值
2 Math.acos(x) 返回一个树的反余弦值
3 Math.acosh(x) 返回一个数的反双曲余弦值
4 Math.cbrt(x) 返回一个数的立方根
5 Math.max(x1,x2) 返回给定一组设置的最大值
6 Math.min(x1,x2) 与最大值相反，求最小值。
7 Math.randon( ) 随机数方法，可以返回一个小数，范围为0-1左闭右开
等等还有很多函数和属性就不再赘述了，等用到再去使用
4.1.2 Date对象
Date对象和Math对象不一样，他是一个构造函数，所以我们需要实例化后才可使用
var da = new Date();
alert(da);
Sun Jul 30 2023 14:47:10 GMT+0800 (香港标准时间)
网页会根据你的地址返回当前的时间
如果我们在Date函数中传递时间参数，就可以显示所查奴如的时间，不写就显示当前时间
参数的书写方式有字符串型，或者数字型
如果使用数字型,格式如下：Date(1000,2,02)
如果使用字符串型
var da = new Date('2019-5-1 8:8:8');
alert(da);
日期格式化方法：
getFullYear() 获取当年
getMonth() 获取当月
getDate( )获取当天日期
getday() 获取星期几(周日0到周六6)
getHour()获取当前小时
getMinutes() 获取当前分钟
getSeconds( )获取当前秒钟
valueof()：获取从1970 年 1 月 1 日 0 时 0 分 0 秒 到当前时间的毫秒数，一秒等于一千毫秒
getTime()： 作用和valueof()相同
使用如下方式，可以取得同样的效果
var dat1= +new Date();
alert(dat1);
4.1.3 数组对象
isstanceof 运算符，可以判断一个对象是否属于某种数据类型
具体的使用如下
var a = new Array();
alert(a instanceof Array);
返回值为true
具有相同作用的还有Array的isArray方法
具体的使用如下
var a = new Array();
alert(Array.isArray(a));
返回结果为true
几个常用方法：
push( 参数) 在末尾添加一个或多个元素，返回值为数组新的长度
具体使用如下
var a = new Array();
a[0]=1;
alert(a.push(2));
返回的结果为2，说明数组中有两个元素
pop( ) ：删除数组最后一个元素，把数组长度减一，无参数，返回值为删除的元素
var a = new Array();
a[0]=1;
alert(a.pop());
输出结果为1
unshift(参数) ：向数组的开头添加元素，并返回添加后的长度
shift() 删除数组的第一个元素，数组长度减1，返回值我=为数组的第一个元素
数组常见的方法：
reverse( ) 作用：将数组中的元素顺序颠倒，返回值为颠倒后的数组
var a = new Array();
a[0]=1;
a[1]=2;
a.reverse();
alert(a[0]);
返回结果为2
sort()方法，作用为将数组按照字典序排序，返回值仍是新数组
var a = new Array();
a[0]=1;
a[1]=2;
a[3]=0
a.sort();
alert(a[0]);
默认为升序排序，返回值为1
类似于c++中的cmp函数，js中的比较函数也可以更改排序的顺序，只不过写的位置比较独特
var a = new Array();
a[0]=1;
a[1]=2;
a[3]=0;
a.sort(function (a,b){ return b-a;});
alert(a[0]);
这样写可以实现降序排序，将b-a改为a-b可以实现升序排序
indexOf(元素) 方法，可以返回某个指定元素在数组中第一次出现的位置。如果不存在就返回-1
具体使用如下
var a = new Array();
a[0]=1;
a[1]=2;
a[2]=0;
alert(a.indexOf(0));
返回值为2；
lastIndexOf(元素) 可以返回某个指定元素在数组中最后一次出现的位置。如果不存在就返回-1
具体使用如下
var a = new Array();
a[0]=1;
a[1]=1;
a[2]=1;
alert(a.lastIndexOf(1));
返回值为2
toString( ) 将数组转换为字符串，逗号分隔每一项
var a = new Array();
a[0]=1;
a[1]=1;
a[2]=1;
document.write(a.toString());
返回结果为1，1，1, 不影响原数组
join(‘分隔符’) 可以将数组转化为用分隔符隔开的字符串
具体使用如下：
var a = new Array();
a[0]=1;
a[1]=1;
a[2]=1;
document.write(a.join(0));
输出结果为10101，不影响原数组
4.1.4 字符串对象
字符串具有不可变性，既当我们给一个一定有值的字符串变量重新赋值时，原来的内容并不会消
失，而是开辟了一个新空间，由于字符串具有不可变性，所以正在大量拼接字符串时会有效率问题
字符串的方法：
indexOf( ) 和数组中的用法相同
当我们输入字符串时，会返回搜索的字符串在原字符串中第一次出现的首字母的位置。
var a = 'abc';
alert(a.indexOf('bc'));
返回值为1 即bc中b的位置。
lastindexO( )和数组中的方法相同，没有什么实际区别
charAt(位置) 该方法可以输出对应位置的字符
replace()方法，可以替换指定字符串中的部分
var str="Visit Microsoft! Visit Microsoft!";
var n=str.replace("Microsoft","Runoob");
split(分隔符) 该方法可以将字符串根据特定的分割符切分为一个数组
var str = 'a,b,c,d';
console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d
toUpperCase( ): 该方法可以将字符串全部转化为大写
toLowerCase() 该方法可以将字符串全部转化为小写。
4.2 web api和js关联性
4.2.1 js的组成
我们在前说过，js由ECMAScript,DOM和BOM三部分组成
前文所有的内容都属于ECMAScript,而dom和bom属于Webapi部分
4.3 API 和Web API
4.3.1 API
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数，目标是提供
应用开发人员基于某软件或硬件得以反复问一组例程的能力，而又无需访问其源代码
其实api就是接口，我们直接使用就行，不用关注内部如何实现
4.4 API和WEBAPI
Web API是浏览器提供的一套操作浏览器功能和页面元素的api
由于web api 很多，所以我们将其称为webapis
4.5DOM
4.5.1 什么是dom
文档对象模型，简称dom，是w3c组织推荐的处理html或者xml的标准编程接口
w3c已经定义了一系列的DOM接口，通过DOM接口可以改变网页内容，结构和样式
4.5.2 dom树
由于dom提供了对整个文档的访问模型，将文档当成一个树形结构，树的每一个节点表示一个
html标签或者标签每部的文本项，dom树结构精确的描述了html文档中标签间的关联性，将HTML
或者xml文档转化为dom树的过程称为解析，html文档被解析后，转换为dom树，因此可以通过对
dom的操作实现对文档内容的更改
dom树有如下几个元素：
文档(document)：一个页面就是一个文档
元素(element)：文档中的所有标签都是元素，元素可以看成对象
节点(node) 文档中的所有内容都是节点(标签，属性，文本，注释等
dom把以上内容都看作对象
4.5.3 获取页面元素
有以下几种方法获取页面元素
1 根据id获取
2 根据标签名获取
3 通过html5新增方法获取
4 特殊元素获取
先来看根据id获取
document.getElementById('na');
通过该方法可以控制以na为id的元素，将id放在后面的括号中即可控制
通过标签名控制：
document.getElementsByTagName('p');//括号中放的是标签名
通过该方法可以控制所有的p标签，我们只需要把标签名用引号括起来放在后面的括号中即可
该方法返回的也是类数组对象，所以使用时要指明数组元素
通过html新增方法获取：
1
document.getElementsByClassName('na')//括号中放的是类名
通过此方法可以获取所有以na为类名的元素
但由于class不具有唯一性，所以是按数组获取的，实际使用如下
var btn=document.getElementsByClassName("name")[0];
btn.onclick=function (){
alert("1");
}
后面那个[0] 就是获取的是Class类名下的第一个元素
2
document.querySelector('.na')//括号中放的是选择器
通过此方法可以返回匹配选择器指定的第一个元素，注意是第一个
3
document.querySelectorAll('.na')
通过此方法可以控制选择器中的所有内容
同样也是以类数组获取的，需要指定对应元素
特殊元素获取：
document.body;
通过该方法可以返回body元素
document.documentElement;
通过该方法可以获得html元素
4.6 事件基础
4.6.1 事件概括
js使我们有能力创建动态页面，而事件是可以被js侦测到的行为
网页中的每个元素都可以产生某些可以出发js的时间，例如，我们可以在用户点击某个按钮时生成一
个时间，人背后去执行某些操作
4.6.2 事件三要素
1 事件源(谁)
2 事件类型(什么事件)
3 事件处理程序(做啥)
现在举一个例子
var btn=document.getElementById('nam');
btn.onclick=function (){
alert('弹出选项');
}
该例子由三部分组成
获取事件源，注册事件，编写事件处理程序
4.6.3 常见的鼠标事件
onclick 鼠标点击左键出发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获取鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标下按从触发
事件后必须放函数
4.7 操作元素
4.7.1 更改html标签内容
JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素
里面的内 容 、属性等。注意以下都是属性
var btn=document.getElementById('nam');
console.log(btn.innerHTML);
- element.innerText 会去除html标签，同时如果内容有空格和换行也会去掉（非标准）
- element.innerHTML 包括html标签，同时如果内容有空格和换行会保留（W3C标准）
innerText不识别html标签，内部标签会直接进行显示
innerHTML会识别引号中的标签，这就是二者最大的区别，其次，若选定的标签内部有html标签，
innerText会去掉html标签，去除空格和换行，innerHTML会保留html标签，也会保留空格和换行
innerText是非标准，innerHTML是非标准的。
4.7.2 更改元素属性内容
通过以下方法可以更改属性
<input id="nam" value="text" type="button" />
<img height="20px" width="20px"
src="https://img1.baidu.com/it/u=360882079,3625305487&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1691773200&t=80e3e724de9e3b3afa2f9e03f5eec3f6">
var a = document.querySelector("img");
var b = document.getElementById("nam");
b.onclick = function () {
a.src = '新的图片路径';
}
通过此方法可以在js中控制元素的属性
注意，表单里面的默认值是通过表单的属性value值来呈现的，所有更改表单内容要更改属性内容。
4.7.3 更改样式属性
我们使用css可以控制元素的样式属性，但如何利用js来修改这些样式属性呢？
方法如下：
var b = document.getElementById("nam");
b.onclick = function () {
b.style.color = 'blue';
}
js修改完颜色时，产生的是行内样式，优先度要比内嵌样式有限度要更高一点
4.7.4 更改类名
var b = document.getElementById("nam");
b.onclick = function () {
b.className = 'na';
}
通过此方法我们可以更改元素的类名
className会直接更改原先的类名，会直接覆盖。
4.7.5 多次修改
如果一次要修改多个同一标签的元素，该怎么办呢？
方法如下
var btn = document.querySelectorAll('input');
for (var i = 0; i < btn.length; i++) {
btn[i].onmouseover = function () {
this.value = 'n';
}
}
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
注意，此处只能用this指代本身对象，不能使用btn[i]
原因如下：通过循环，给每一个input标签注册了一个onmouseover事件，当事件触发时，会执行后面的函数，当
我们事件触发时，循环已经结束，所以自然无法使用btn[i] 来控制属性，只能使用this来在触发事件时指代本身
对象
4.7.6 查看属性的新方法
alert(document.querySelector("input").getAttribute("value"));
通过此方法可以获取对应元素的属性，属性名写在后面的括号中。
当我们使用自定义属性时，只能使用该方法获取属性
注意，使用该方法只能查看对应的属性，无法修改属性
h5还新增了查看自定义属性的方式：
alert(document.querySelector('input').dataset['nam']);
注意：此方法只能查看自定义属性，不能查看非自定义的属性
此时的自定义属性设置为data-nam dataset将自定义属性存储为数组
当然也可以这样查看
alert(document.querySelector('input').dataset.nam);
如果我们定义的自定义属性名由多个短横线连接，此时需要使用驼峰命名法
比如data-list-name
我们在实际操作时为
element.dataset.listName; 这种方式
4.7.7 修改属性内容
我们可以直接element.属性='新内容' 进行修改，但自定义属性无法进行修改
可以用以下的方式进行修改
document.querySelector('input').setAttribute("value", 'te');
alert(document.querySelector("input").getAttribute("value"));
此方法可以修改自定义属性，也可也修改非自定义属性
4.7.8 自定义属性的规范
自定义属性是为了保存并使用数据，将某些值放在自定义属性中
但我们如何分辨一个属性是否为自定义属性呢？h5规定自定义属性要以data-开头
根据此特点就能区分自定义属性和非自定义属性了
4.8 节点操作
4.8.1 为什么学节点操作
节点操作就是一种便捷的控制html的元素以及属性的功能，比先前的dom提供的方法获取元素要方便很多
所以我们要使用节点操作
节点操作的本质操作是 父级，子级，兄级。
4.8.2 节点概述
网页中所有内容都是接待你，在dom中，节点使用node来表示。
html dom树中的所有节点均可以通过javascript进行访问，所有的html元素都可以被修改，也可以创建或者删除
一般的，系欸但至少用用nodeType nodeName nodeValue 这三个基本属性
对于元素节点，nodeType 值为 1
对于属性节点 nodeType 为 2
文本节点 为3 ，注意，文本节点包含空格和换行。
但实际过程中实际操作的是元素节点，其他节点使用较少
4.8.3 父级节点
dom树把节点划分为不同的层级关系，常见的是父子兄层级关系
父级节点我们使用parentNode进行表示
通过此操作获取父节点，而不是祖父等其他节点。
如果找不到父节点，则返回为null
var a=document.querySelector("input");
var b=a.parentNode;
4.8.4 子节点
子节点使用childNodes 表示
注意，得到所有的子节点包含元素节点和文本节点
由于一个节点只能拥有一个父亲，但可以拥有多个儿子，所以使用childNodes获取的是一个数组对象，儿子节点
按顺序从上到下从0开始编号,要注意文本节点的存在，只要存在空格或换行，就是存在一个文本节点，一个子节点
中可能拥有多个文本节点
<div><a></a> <img> </div>
var a = document.querySelector("div");
var b = a.childNodes;
console.log(b[0]);
按此操作既可获得a标签
使用nodeType属性可以获得对应节点的nodeName
例如
var a = document.querySelector("div");
var b = a.childNodes;
console.log(b[0].nodeType);
由于元素节点的节点类型用1表示，所以输出结果为1；
我们还存在一个非标准的方法获取所有的子元素节点
var a = document.querySelector("div");
var b = a.children;
console.log(b[0]);
使用children 可以获取所有的子元素节点，注意是子元素节点，不包含属性节点和文本节点
同样返回的也是数组类型。
获取第一个子节点
element.fistChild
获取最后一个子节点：
element.lastChild
获取第一个元素子节点
element.firstElenmentChild
获取最后一个子元素节点
element.lastElenmentChild
但是最后两个方法存在兼容性问题，只能在ie9以上使用
所以一般使用children获得子元素伪数组，
利用length属性-1获得最后一个子元素节点，利用0获得第一个子元素节点
4.8.5 兄弟节点
使用nextSibling表示下一个兄弟节点
var a = document.querySelector("input");
var b = a.nextSibling;
console.log(b);
注意，换行是文本节点，包含元素节点和文本节点
使用previousSibling获取上一个兄弟节点
var a = document.querySelector("input");
var b = a.previousSibling;
console.log(b);
获取下一个兄弟元素节点
nextElementSibling
获得上一个兄弟元素节点
previousElementSibling
这两个操作也存在兼容性问题，只能在ie9以上使用，想要解决这个问题，
需要封装一个兼容性函数
4.8.6 创建节点和添加节点
使用
document.createElement('tagName')
来动态创建元素节点
使用node.appendChild(child)来添加节点
我们给一个节点创建并添加一个节点的操作如下
var a = document.createElement("a");
var b=document.querySelector('div');
b.appendChild(a);
使用该操作给div 节点创建了一个a标签的子节点。
添加节点操作添加的节点会放在所有子节点的最后面
所以也被称为追加元素。
如果我们想把添加的子节点放在某个子节点的前面，可以使用
node.insertBefore(child,指定元素)
4.8.7 删除节点
使用
node.removeChild(child)来进行删除子节点操作,返回删除的节点
var a = document.createElement("a");
var b = document.querySelector('div');
b.removeChild(a);
4.8.8 复制节点
使用
node.cloneNode()
来复制节点
var a = document.createElement("a");
a.cloneNode();
var b = document.querySelector('div');
b.appendChild(a);
使用该方法克隆并添加节点
如果cloneNode( )方法的传入值为空或则和false,为浅复制，只会复制标签，不会复制内容
想要深复制，则要传入true.
