JavaScript基础-CSDN博客

本文链接：https://blog.csdn.net/FXY_11/article/details/132055722

什么是JavaScript

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言

JavaScript特点

向HTML页面中添加交互行为

脚本语言，语法和Java类似

解释性语言，边执行边解释

JavaScript组成

✍ECMAScript

ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

🔥DOM文档对象模型

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为 对象树 ：

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件
换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准

DOM文档节点

节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。

比如：html标签、属性、文本、注释、整个文档等都是一个节点。

虽然都是节点，但是实际上它们的具体类型是不同的。

比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。

节点的类型不同，属性和方法也都不尽相同。

节点：Node——构成HTML文档最基本的单元。

常用节点分为四类：

文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

节点属性

DOM文档操作

文档对象代表您的网页,，如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。

下面是一些如何使用 document 对象来访问和操作 HTML 的实例。

查找 HTML 元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素。
document.getElementsByTagName(name)	通过标签名来查找元素。
document.getElementsByClassName(name)	通过类名来查找元素。
document.querySelector(CSS选择器)	通过CSS选择器选择一个元素。
document.querySelectorAll(CSS选择器)	通过CSS选择器选择多个元素。

DOM

DOM 全称是 Document Object Model，也就是文档对象模型。是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。

这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础,就是说为了能以编程的方法操作这个 HTML 的内容（比如添加某些元素、修改元素的内容、删除某些元素），我们把这个 HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如 <div></div> 这些标签都看做一个对象，每个对象都叫做一个节点（node），节点可以理解为 DOM 中所有 Object 的父类。

节点属性

element属性

删除和替换节点

style属性

HTML元素.style.样式属性＝"值"

className属性

HTML元素.className="样式名称"

获取元素的样式

HTML元素.style.样式属性;

HTML中元素属性

元素属性应用

总结

🔥BOM浏览器对象模型

BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等

浏览器对象模型（BOM）使 JavaScript 有能力与浏览器"对话"。

浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。

JS初体验🔥

1、行内式JS

<input type="button" value="点我试试" onclink="javascript:alert('Hello World')" />

可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性)，如： onclink
注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
可读性差，在 HTML 中编入 JS 大量代码时，不方便阅读
特殊情况下使用

2、内嵌式JS🔥

<script>
     alert('Hello World!');
</script>

可以将多行JS代码写到<script>标签中
内嵌 JS 是学习时常用的方式

外部JS🔥

<script src="my.js"></script>

利于HTML页面代码结构化，把单独JS代码独立到HTML页面之外，既美观，又方便
引用外部JS文件的script标签中间不可以写代码
适合于JS代码量比较大的情况

JS基本语法🔥

注释🔥

1、单行注释🔥

//  单行注释

快捷键ctrl + /

多行注释🔥

/*
	多行注释
*/

快捷键 shift + alt + a

vscode中修改快捷键方式：vscode➡ 首选项按钮➡ 键盘快捷方式 ➡ 查找原来的快捷键➡ 修改为新的快捷键➡ 回车确认

输入输出语句🔥

方法	说明	归属
alert(msg);	浏览器弹出警示框	浏览器
console.log(msg);	浏览器控制台打印输出信息	浏览器
prompt(info);	浏览看弹出输入框，用户可以输入	浏览器

alert() 主要用来显示消息给用户
console.log() 用来给程序员看自己运行时的消息

变量🔥

变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改
本质：变量是程序在内存中申请的一块用来存放数据的空间

变量初始化🔥

var是一个JS关键字，用来声明变量(variable变量的意思)。使用该关键字声明变量后，计算机会自动为变量分配内存空间。
age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

//声明变量同时赋值为18
var age = 18; 
//同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。

var age = 18, address ='火影村',salary = 15000;

声明变量特殊情况🔥

情况	说明	结果
var age; console.log(age);	只声明，不赋值	undefined
console.log(age)	不声明不赋值直接使用	报错
age = 10;console.log(age);	不声明只赋值	10

变量的命名规范🔥

1、由字母(A-Z,a-z)，数字(0-9)，下划线(_)，美元符号($)组成，如:usrAge,num01,__name

2、严格区分大小写。 var app; 和 var App; 是两个变量

3、不能以数字开头。

4、不能是关键字，保留字。例如：var,for,while

数据类型🔥

var age = 10; 			 //这是一个数字型
var areYouOk = '使得';	//这是一个字符串

在代码运行时，变量的数据类型是由 JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。
JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型

var x = 6;		//x为数字
var x = "Bill";	//x为字符串

JS 把数据类型分为两类：

基本数据类型(Number,String,Boolean,Undefined,Null)
复杂数据类型(Object)

JavaScript核心语法

基本数据类型🔥

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值，如21，0.21	0
Boolean	布尔值类型，如true，false ，等价于1和0	false
Undefined	var a; 声明了变量a但是没有赋值，此时a=undefined	undefined（未定义的）
string	字符串类型，如“张三”	“”
Null	var a = null;声明了变量a为空值	null

数字型Number

JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数）

var age = 12;		//整数
var Age = 21.3747;	//小数

数字型进制🔥

最常见的进制有二进制、八进制、十进制、十六进制

// 1.八进制数字序列范围：0~7
var num1 = 07; 		//对应十进制的7
var Num2 = 019;		//对应十进制的19
var num3 = 08;		//对应十进制的8


// 2.十六进制数字序列范围：0~9以及A~F
var num = 0xA;

在JS中八进制前面加0，十六进制前面加 0x

①数字型范围🔥

JS中数值的最大值：Number.MAX_VALUE
JS中数值的最小值：Number.MIN_VALUE

consol.log(Number.MAX_VALUE);
consol.log(Number.MIN_VALUE);

②数字型的三个特殊值🔥

alert(Infinity); 	//Infinity(无穷大)
alert(-Infinity); 	//-Infinity(无穷小)
alert(NaN);       	//NaN - Not a Number ,代表任何一个非数值

Infinity ，代表无穷大，大于任何数值
-Infinity ，代表无穷小，小于任何数值
Nan ，Not a Number，代表一个非数值

③isNaN🔥

这个方法用来判断非数字，并且返回一个值，如果是数字返回的是false，如果不是数字返回的是true

var userAge = 21;
var isOk = isNan(userAge);
console.log(isOk);		//false,21不是一个非数字

var userName = "andy";
console.log(isNan(userName));	//true,"andy"是一个非数字

字符串型String🔥

字符串型可以是引号中的任意文本，其语法为 “双引号” 和 "单引号’’

var strMsg = "我爱北京天安门~";		//使用双引号表示字符串
var strMsg = '我爱北京';			  //使用单引号表示字符串

因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号

①字符串引号嵌套🔥

JS可以用 单引号嵌套双引号，或者用 双引号嵌套单引号（外双内单，外单内双）

var strMsg ='我是一个“高富帅”' //可以用 ' ' 包含 " "
var strMsg2 ="我是'高富帅'" //可以用" "  包含  ''

②字符串转义符🔥

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

转义符都是 \ 开头的，常用的转义符及其说明如下：

转义符	解释说明
\n	换行符，n是newline
\ \	斜杠\
\ ’	’ 单引号
\ ‘’	‘’ 双引号
\ t	tab 缩进
\ b	空格，b是blank的意思

③字符串长度🔥

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度

//通过字符串的length属性可以获取整个字符串的长度
var strMsg = "我是高富帅！";
alert(strMsg.length);     //显示6

④字符串的拼接🔥

多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

注意：字符串 + 任何类型 =拼接之后的新字符串

//1 字符串相加
alert('hello' + ' ' + 'World');  //hello World

//2 数值字符串相加
alert('100' + '100'); //100100

//3 数值字符串+数值
alert('12'+12); //1212

//4 数值+数值
alert(12+12); //24

+ 号总结口诀：🌏数值相加，字符相连🌏

var  age = 18;
console.log('我今年'+age+'岁');
console.log('我今年'+age+'岁');  //引引加加，最终也是上面的形式

⑤字符串拼接加强🔥

console.log('Pink老师' + 18);			//只要有字符就会相连
var age = 18;
// console.log('Pink老师age岁了');		//这样不行,会输出 "Pink老师age岁了"

console.log('Pink老师' + age);		 // Pink老师18
console.log('Pink老师' + age + '岁啦');	// Pink老师18岁啦

我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
变量是不能添加引号的，因为加引号的变量会变成字符串
如果变量两侧都有字符串拼接，口诀==🌏“引引加加 ”，删掉数字🌏==变量写加中间

布尔型Boolean🔥

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

var flag = true;
console.log(flag + 1); // 2 true当加法来看当1来看，flase当0来看

undefined未定义🔥

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）

// 如果一个变量声明未赋值，就是undefined 未定义数据类型
var str;
console.log(str);				//undefined
var variable = undefined;
console.log(variable + 'Pink'); //undefinedPink
console.log(variable + 18); //NaN

1、undefined 和字符串相加，会拼接字符串

2、undefined 和数字相加，最后结果是NaN

空值null🔥

一个声明变量给 null 值，里面存的值为空

var space = null;
console.log(space + 'pink'); //nullpink
console.llog(space + 1); // 1

typeof🔥

typeof 可用来获取检测变量的数据类型

var num = 18;
console.log(typeof num) // 结果 number

不同类型的返回值

类型	例	结果
string	typeof “小白”	“string”
number	typeof 18	“number”
boolean	typeof true	“boolean”
undefined	typeof undefined	“undefined”
null	typeof null	“object”

运算符🔥

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号

JavaScript 中常用的运算符有：

算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符

算术运算符🔥

概念：算术运算使用的符号，用于执行两个变量或值的算术运算

运算符	描述	实例
+	加	10 + 20 =30
-	减	10 - 20 =-10
*	乘	10 * 20 =200
/	除	10 / 20 =0.5
%	取余数（取模）	返回出发的余数 9 % 2 =1

浮点数的精度问题🔥

浮点数值的最高精度是17位小数，但在进行算数计算时其精确度远远不如整数

var result = 0.1 +0.2; //结果不是0.3，0.30000000000000004
console.log(0.07 * 100); //结果不是7，而是7.000000000000001

所以不要直接判断两个浮点数是否相等

递增和递减运算符🔥

递增（++）

递减（- -）

放在变量前面时，我们称为前置递增(递减)运算符

放在变量后面时，我们称为后置递增(递减)运算符

注意：递增和递减运算符必须和变量配合使用。

①前置递增运算符🔥

++num num = num + 1

使用口诀:先自加，后返回值

var num = 10;
alert (++num + 10); // 21

先自加 10+1=11，返回11，此时num=11

②后置递增运算符🔥

num ++ num = num +1

使用口诀:先返回原值，后自加

var num = 10;
alert(10 + num++); // 20

③小结🔥

前置递增和后置递增运算符可以简化代码的编写，让变量的值 + 1 比以前写法更简单
单独使用时，运行结果相同，与其他代码联用时，执行结果会不同
开发时，大多使用后置递增/减，并且代码独占一行

比较(关系)运算符🔥

比较运算符是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值(true / false)作为比较运算的结果

运算符名称	说明	案例	结果
<	小于号	1 < 2	true
>	大于号	1 > 2	false
>=	大于等于号(大于或者等于)	2 >= 2	true
<=	小于等于号(小于或者等于)	3 <= 2	false
==	判等号(会转型)	37 == 37	true
!=	不等号	37 != 37	false
=== !==	全等要求值和数据类型都一致	37 === ‘37’	false

①===== 小结

符号	作用	用法
=	赋值	把右边给左边
==	判断	判断两边值是否相等(注意此时有隐士转换)
===	全等	判断两边的值和数据类型是否完全相同

console.log(18 == '18');		//true
console.log(18 === '18');		//false

逻辑运算符🔥

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值

逻辑运算符	说明	案例
&&	“逻辑与”，简称"与" and	true && false
\|\|	“逻辑或”，简称"或" or	true \|\| false
！	“逻辑非”，简称"非" not	！true

逻辑与：两边都是 true才返回 true，否则返回 false

逻辑或：两边都为 false 才返回 false，否则都为true

逻辑非：逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false

var isOk = !true;
console.log(isOk);  // false
//逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false

赋值运算符🔥

概念：用来把数据赋值给变量的运算符。

赋值运算符	说明	案例
=	直接赋值	var usrName = ‘我是值’
+= ，-=	加，减一个数后再赋值	var age = 10； age+=5；//15
*=，/=，%=	成，除，取模后再赋值	var age = 2; age*=5; //10

var age = 10;
age += 5;  // 相当于 age = age + 5;
age -= 5;  // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

运算符优先级🔥

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ – ！
3	算数运算符	*先 / 后 + -**
4	关系运算符	>, >= , < , <=,
5	相等运算符	，！=，=，！==
6	逻辑运算符	先 && 后 \|\|（先与后或）
7	赋值运算符	=
8	逗号运算符	，

一元运算符里面的逻辑非优先级很高

2.逻辑与比 逻辑或 优先级高

分支结构🔥

JS 语言提供了两种分支结构语句：JS 语句 switch语句

①if语句🔥

// 条件成立执行代码，否则什么也不做
if (条件表达式) {
    //条件成立执行的代码语句
}

②if else 语句🔥

// 条件成立，执行if里面代码，否则执行else里面的代码
if(条件表达式)
{
    //[如果]条件成立执行的代码
}
else
    {
        //[否则]执行的代码
    }

③if else if 语句🔥

if(条件表达式1)
{
  语句1;
}
else if(条件表达式2)
{
   语句2;
}
else if(条件表达式3)
{
  语句3;
}
else
{
   //上述条件都不成立执行此处代码
}

switch🔥

switch(表达式){
  case value1:
     //表达式等于 value1 时要执行的代码
     break;
  case value2:
     //表达式等于value2 时要执行的代码
     break;
  default:
     //表达式不等于任何一个value时要执行的代码
        
}

for循环🔥

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句

for(初始化变量;条件表达式;操作表达式)
{
   //循环体
}

双重for循环🔥

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

for(外循环的初始;外循环的条件;外形循环的操作表达式){
    for(内循环的初始;内循环的条件;内循环的操作表达式){
        需执行的代码;
    }
}

内层循环可以看做外层循环的语句
内层循环执行的顺序也要遵循 for 循环的执行顺序
外层循环执行一次，内层循环要执行全部次数

while循环🔥

while(条件表达式){
  //循环体代码
}

执行思路：

先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码

执行循环体代码

循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束

注意：

使用 while 循环时一定要注意，它必须要有退出条件，否则会称为死循环

while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

do while循环🔥

do {
  //循环体代码-条件表达式为true的时候重复执行循环一代码
}while(条件表达式);

执行思路：

先执行一次循环体代码
再执行表达式，如果结果为true，则继续执行循环体代码，如果为false，则退出循环，继续执行后面的代码
先执行再判断循环体，所以dowhile循环语句至少会执行一次循环体代码

continue 关键字🔥

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。

例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子

for (var i = 1; i <= 5; i++) {
 if (i == 3) {
     console.log('这个包子有虫子，扔掉');
     continue; // 跳出本次循环，跳出的是第3次循环 
  }
  console.log('我正在吃第' + i + '个包子呢');
}

break关键字🔥

break 关键字用于立即跳出整个循环

例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的也不吃了

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整个for 循环，跳到整个for下面的语句
   }
   console.log('我正在吃第' + i + '个包子呢');
 }

数组🔥

数组(Array)是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式

//普通变量一次只能存储一个值
var num = 10;
//数组一次可以存储多个值
var arr =[1,2,3,4,5];

创建数组🔥

JavaScript 中创建数组有两种方式：

利用 new 创建数组
利用数组字面量创建数组

①利用 new 创建数组🔥

var 数组名 = new Array();
var arr = new Array(); //创建一个新的空数组

注意 Array()，A要大写

函数概述

函数是由一连串的子程序（语句的集合）所组成的，可以被外部程序调用，向函数传递参数之后，函数可以返回一定的值。

通常情况下，JavaScript代码是自上而下执行的，不过函数体内部的代码则不是这样。如果只是对函数进行了声明，其中的代码并不会执行，只有在调用函数时才会执行函数体内部的代码。

这里要注意的是JavaScript中的函数也是一个对象，使用typeof检查一个函数对象时，会返回function。

函数创建

使用 函数对象 来创建一个函数（几乎不用）

语法格式：

var 函数名 = new Function("执行语句");

示例代码：

var fun = new Function("console.log('这是我的第一个函数');");

使用 函数声明 来创建一个函数（比较常用）

语法格式：

function 函数名([形参1,形参2,...,形参N]) {
    语句...
}

示例代码：

function fun(){
    console.log("这是我的第二个函数");
}

使用 函数表达式 来创建一个函数（比较常用）

语法格式：

var 函数名  = function([形参1,形参2,...,形参N]) {
    语句....
}

示例代码：

var fun  = function() {
    console.log("这是我的第三个函数");
}

函数调用

对于无参函数调用：

// 函数声明
var fun = function () {
    console.log("哈哈，我执行啦！");
}

// 函数调用
fun();

对于有参函数调用：

// 函数声明
var sum = function (num1, num2) {
    var result = num1 + num2;
    console.log("num1 + num2 = " + result);
}

// 函数调用
sum(10, 20);

作用域

作用域指一个变量的作用的范围，在JS中一共有两种作用域：

全局作用域
函数作用域

声明提前

变量的声明提前：使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值），但是如果声明变量时不使用var关键字，则变量不会被声明提前
函数的声明提前：使用函数声明形式创建的函数 function 函数名(){} ，它会在所有的代码执行之前就被创建，所以我们可以在函数声明前来调用函数。使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用

全局作用域

直接编写在script标签中的JavaScript代码，都在全局作用域
全局作用域在页面打开时创建，在页面关闭时销毁
在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由浏览器创建，我们可以直接使用
在全局作用域中：
创建的变量都会作为window对象的属性保存
创建的函数都会作为window对象的方法保存
全局作用域中的变量都是全局变量，在页面的任意的部分都可以访问的到

String对象

在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象

String()：可以将基本数据类型字符串转换为String对象
Number()：可以将基本数据类型的数字转换为Number对象
Boolean()：可以将基本数据类型的布尔值转换为Boolean对象
但是注意：我们在实际应用中不会使用基本数据类型的对象，如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的结果，在这一章节中，我们重点介绍String()对象的属性和方法。