（一）JS 基础篇—基础知识总结

最新推荐文章于 2024-09-04 20:18:34 发布

家父张二活

最新推荐文章于 2024-09-04 20:18:34 发布

阅读量1k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_47182519/article/details/120879745

版权

⛺️ 欢迎大家拜访我的：个人博客

⛽️ 前端加油站之【JavaScript】⛽️

在这里插入图片描述

内容	地址
（一）JS 基础篇—基础知识总结	⛳️ 【快来点点我 ~】
（二）JS 基础篇—函数与作用域	⛳️ 【快来点点我 ~】
（三）JS 基础篇—对象与内置对象	⛳️ 【客官别急，马上更新 ~】
（四）JS 进阶篇—DOM文档对象模型	⛳️ 【客官别急，马上更新 ~】
（五）JS 进阶篇—BOM浏览器对象模型	⛳️ 【客官别急，马上更新 ~】
（六）JS 高级篇—面向对象编程	⛳️ 【客官别急，马上更新 ~】
（七）JS 高级篇—ES6学习	⛳️ 【客官别急，马上更新 ~】

思维导图 ⏳

在这里插入图片描述

1. JavaScript 简介 ✂️

1.1 JavaScript 初识

1️⃣ JavaScript 是一种运行在客户端的脚本语言，是世界上最流行的语言之一；现在也可以基于 Node.js 技术进行服务器端编程
2️⃣ HTML用于控制网页的结构，CSS用于控制网页的外观，而 JavaScript控制着网页的行为
3️⃣ JavaScript 和 Java 虽然名字相似，但本质上是不同的

在这里插入图片描述

⚠️ 注意：

脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行

只加入 JavaScript 动态特效的网页并不是动态页面；静态页面和动态页面的区别在于：是否与服务器进行数据交互

1.2 浏览器执行 JavaScript 机制 🔥🔥

浏览器核心包括两部分：渲染引擎和 JS 引擎

🍉 渲染引擎：也称为浏览器 “内核”

用来解析 HTML 与 CSS，渲染网页代码
不同浏览器有不同的渲染引擎，比如 chrome 浏览器的 blink ，老版本的 webkit
页面生成以后，脚本操作和样式表操作，都会触发页面“重流”和“重绘”

🍉 JS 引擎：也称为 JS 解释器。

读取网页中的 JS 代码，对其处理后运行，比如 chrome 浏览器的 V8 引擎
JS 是一种解释型语言，也就是说，它不需要编译，由解释器实时运行。运行速度慢于编译型语言
为了提高运行速度，目前的浏览器都将JS进行一定程度的编译，生成类似字节码的中间代码，以提高运行速读
字节码不能直接运行，而是运行在一个虚拟机（Viryual Machine）上，一般也把虚拟机称为 JS 引擎（如V8引擎）

在这里插入图片描述

⚠️ 注意：

浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行

两者都是单线程运行。单线程的优势是开发方便，避免多线程下的死锁、竞争等问题，劣势是失去了并发能力。浏览器为了避免两个引擎同时修改页面而造成渲染结果不一致的情况，增加了另外一个机制：这两个引擎具有互斥性，也就是说在某个时刻只有一个引擎在运行，另一个引擎会被阻塞（可以简单理解为两个引擎共用一个线程）

1.3 JavaScript 的组成

JavaScript 作为一种专为与网页交互而设计的脚本语言，由三个不同的部分组成：

1️⃣ ECMAScript 语法：核心，由ECMA-262定义，提供核心语言功能

2️⃣ DOM文档对象模型：提供访问和操作网页内容的方法和接口

3️⃣ BOM浏览器对象模型：提供与浏览器交互的方法和接口

1.3.1 ECMAScript 语法

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

ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准

1.3.2 DOM 文档对象模型

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

1.3.3 BOM 浏览器对象模型

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

1.4 JavaScript 引入方式

我们首先要知道在哪里写 JavaScript 才行，想要在HTML中引入JavaScript，一般有3种方式。

行内式 JavaScript
内嵌式 JavaScript
外链式 JavaScript

实际上，JavaScript 的3种引入方式，跟 CSS 的3种引入方式（外部样式表、内部样式表、行内样式表）是非常相似的。

1.4.1 行内式 JS 🔥

行内式JavaScript，指的是在元素的 “事件属性” 中直接编写JavaScript或调用函数

🍉 在元素事件中编写 JavaScript

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="button" value="按钮" onclick="alert('点我试试~')"/>
</body>
</html>

当我们单击按钮后，浏览器会弹出弹窗，显示 alert() 内的内容

🍉 在元素事件中调用函数

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function alertMes() 
        {
   
            document.write("一个人静静坐在海边看海的时候，也好像是在看自己");
        }
    </script>
</head>
<body>
    <input type="button" value="按钮" onclick="alertMes()"/>
</body>
</html>

当我们单击按钮后，浏览器页面会显示 document.write() 内的内容

⚠️ 行内式 JS 注意：

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

✒️ 说明：

document.write()：在页面输出一个内容。

alert()：弹出一个对话框。

1.4.2 内嵌式 JS 🔥

内嵌式 JavaScript，指的是把 HTML 代码和 JavaScript 代码放在同一个文件中。其中JavaScript代码写在 <script> </script> 标签对内。

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

⚠️ 内嵌式 JS 注意：

⭕️ 可以将多行JS代码写到 <script> </script> 标签中
⭕️ 内嵌式 JavaScript 文件不仅可以在head中引入，也可以在body中引入。一般情况下，我们都是在head中引入
⭕️ 内嵌 JS 是我们学习时常用的方式

✒️ 说明：

<script> </script> 其实是一种简写形式，它等价于：

<script type="text/javascript">
    ..........
</script>

一般情况下，使用简写形式比较多。对于上面这种写法，我们也需要了解一下

1.4.3 外链式 JS 🔥🔥

外链式 JavaScript，指的是把 HTML 代码和 JavaScript 代码单独放在不同文件中，然后在HTML文档中使用 “script标签” 来引入JavaScript代码

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    // 1、在head中引入
    <script src="index.js"></script>
</head>
<body>
    // 2、在body中引入
    <script src="index.js"></script>
</body>
</html>

⚠️ 外链式 JS 注意：

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

✒️ 说明：

外部 JavaScript 是最理想的JavaScript 引入方式。在实际开发中，为了提升网站的性能和可维护性，一般都是使用外部JavaScript

引入外部 CSS 文件使用的是 “link标签” ，而引入外部 JavaScript 文件使用的是“script标签”，注意区分

外部 CSS 文件只能在 head 中引入；而外部 JavaScript 文件不仅可以在 head 中引入，还可以在 body 中引入

1.5 JavaScript 程序初体验

在学习 JavaScript 语法之前，先来例子让小伙伴们感受一下神奇的 JavaScript 是怎样一回事

下面这个例子实现的功能是：当页面打开时，会弹出对话框，内容为“欢迎光临萌萌小店”；当页面关闭时，也会弹出对话框，内容为“记得下次再来喔！”。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
   
            alert("欢迎光临萌萌小店");
        }
        window.onbeforeunload = function (event) {
   
            var e = event || window.event;
            e.returnValue = "记得下来再来喔！";
        }
    </script>
</head>
<body>
</body>
</html>

刚打开页面的时候，预览效果如图所示

在这里插入图片描述

当尝试单击右上角关闭页面时，此时预览效果如图所示

在这里插入图片描述
✒️ 说明：

上面代码在不同浏览器运行的效果有一点不一样，但是功能是一样的。对于这段代码，我们不懂没关系，这个例子只是让大家感性地认识一下JavaScript是怎样的，都可以做点什么，后面我们会慢慢学到 ~

2. 语法基础 ✂️

2.1 语法简介

和人类一样，计算机也有非常多的语言。例如 C、C++、Java 等。简单来说，JavaScript 就是众多计算机语言（也叫编程语言）中的一种。

在这里插入图片描述

跟人类语言类似，计算机语言也有一些共性，例如我们可以将 C 写的代码转化为 JavaScript 写的代码，这就像将英语翻译成中文一样，虽然语言不一样了，但是表达出来的意思是一样的

同时 各种计算机语言相互之间，也是有非常多共性的。当我们把JavaScript学完，再去学另外一门语言（如C、Java等），就会变得非常容易

学习任何一门人类语言，都得学这门语言的词汇、语法、结构等。同样的，想要学习一门编程语言，也需要学习类似这样的东西。只不过呢，这些在编程语言中不是叫词汇、语法、结构，而是叫变量、表达式、运算符等

在这里插入图片描述

我们主要学习JavaScript以下几个方面的语法。

变量与常量
数据类型
转义字符
类型转换
运算符
表达式与语句
注释

2.2 变量

变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改

在JavaScript中，变量指的是一个可以改变的量。也就是说，变量的值在程序运行过程中是可以改变的。

本质：变量是程序在内存中申请的一块用来存放数据的空间

2.2.1 变量命名规范 🔥🔥

变量的名字一般是不会变的，但是它的值却可以变。这就像人一样，名字一般都是固定下来，但是每个人都会改变，都会从小孩成长为青年，然后从青年慢慢变成老人。

在JavaScript中，给一个变量命名，我们需要遵循以下方面的原则：

1️⃣ 变量只能由字母(A-Z,a-z)，数字(0-9)，下划线(_)，美元符号($)组成。 如：usrAge，num01，__name

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

3️⃣ 变量不能以数字开头。

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

5️⃣ 遵循驼峰命名法。 首字母小写，后面单词的首字母需要大写。例如：myFirstName

6️⃣ 变量名须尽量取的有意义。 推荐翻译网站：有道爱词霸

⚠️ 注意：

系统关键字，指的是 JavaScript 本身“已经在使用”的名字，因此我们在给变量命名的时候，是不能使用这些名字的（因为系统要用）

保留字，指的是 JavaScript 本身“还没使用”的名字，虽然没有使用，但是它们有可能在将来会被使用，所以先保留自己用，不给你用

JavaScript 关键字和保留字如下表所示:

🍉 常见 JavaScript 关键字：

break	else	new	typeof
case	false	null	var
catch	for	switch	void
continue	function	this	while
default	if	throw	with
delete	in	true
do	instanceof	try

🍉 常见的 ECMA-262 标准的保留字：

abstract	enum	int	short
boolean	export	interface	static
byte	extends	long	super
chair	final	native	synchronized
class	float	package	throws
const	goto	private	transient
debugger	implements	protected	volatile
double	import	public

🍉 浏览器定义的保留字：

alert	eval	location	open
array	focus	math	outerHeight
blur	function	name	parent
boolean	history	navigator	parseFloat
date	image	number	regExp
document	isNaN	object	status
escape	length	onLoad	string

这里列举了 JavaScript 常见关键字和保留字，只是方便小伙伴们查询，并不是叫大家记忆。大家别傻乎乎地一个个去记忆。实际上，对于这些关键字，等学到了后面，自然而然就会认得。就算不认得，等需要的时候再回到这里查一下就行了

2.2.2 变量声明使用 🔥

在 JavaScript 中，如果想要使用一个变量，我们一般需要进行两步

第一步：变量的声明
第二步：变量的赋值

✍ 语法：

var 变量名 = 值;

在这里插入图片描述

1️⃣ 声明变量同时赋值操作

var age = 18; 
document.write(age); // 18

var 是一个 JS 关键字，用来声明变量(variable变量的意思)。使用该关键字声明变量后，计算机会自动为变量分配内存空间

age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

2️⃣ 同时声明多个变量时，只需要写一个 var，多个变量名之间使用英文逗号隔开

var age = 18, address ='火影村',salary = 15000;
// 以上代码相当于
var age = 18;
var address ='火影村';
var salary = 15000;

3️⃣ 同一变量重复赋值时，原来值会被覆盖，只得到最后一次复制的结果

var age = 18;
age = 20;
document.write(age); // 20

2.2.3 特殊变量声明 🔥🔥

// 1. 只声明 不赋值
var age; 
console.log(age); // 结果：undefined
// 2. 不声明 不赋值 直接使用
console.log(age); // 结果：程序报错
// 3. 不声明 只赋值
age = 10;
console.log(age); // 结果：10

2.2.4 常量介绍

在 JavaScript 中，常量指的是一个不能改变的量。也就是说，常量的值从定义开始就是固定的，一直到程序结束都不会改变

在 JavaScript 中，我们可以把常量看成是一种特殊的变量，之所以特殊，是因为它的值是不会变的。一般情况下，常量名全部大写，别人一看就知道这个值很特殊，有特殊用途，如：var DEBUG = 1

程序是会变化的，因此变量比常量有用得多。常量在JavaScript 中初学阶段用得比较少，我们简单了解常量是这么一回事就行了，不需要过于深入

2.3 数据类型

JavaScript 是一种弱类型或者说动态语言。 这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定

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

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

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

2.3.1 数据类型分类 🔥🔥

JS 把数据类型分为两类：

简单（基本）数据类型： Number，String，Boolean，Undefined，Null
复杂（引用）数据类型： Object，Array

基本数据类型分类介绍：

简单数据类型	说明	默认值
Number	数字型，包含整数型和浮点型；如：21，0.21	0
String	字符串型；如：“张三”	”“
Boolean	布尔值型；如：true，false，等价于1和0	false
Underfind	var a; 申明变量但未复值则等于Underfind	underfind（未定义的）
Null	var a = nul; 声明变量但a为空值	null

JS 数据类型其他分类方法了解：

在这里插入图片描述

2.3.2 数字型 Number

在 JavaScript 中数字是最基本的数据类型。

JavaScript 中的数字是不区分“整型（int）”和“浮点型（float）”的；数字类型既可以用来保存整数值，也可以保存小数(浮点数）

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 num4 = 0xA;		//对应十进制的 10

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

② 数字型范围

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

consol.log(Number.MAX_VALUE); // 1.7976931348623157e+308
consol.log(Number.MIN_VALUE); // 5e-324

③ 数字型特殊值

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

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

④ 非数字型 NaN 🔥

因为NaN代表非数值，所以 isNaN代表是数值；我们可以通过这个方法用来判断非数字，并且返回一个值，如果是数字返回的是false，如果不是数字返回的是true

在这里插入图片描述

var userAge = 21;
var isOk = isNaN(userAge);
console

最低0.47元/天解锁文章

家父张二活

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
（一）JS 基础篇—基础知识总结

编写表情：❤️ ✨ ⭐️ ❗️ ❓❕ ❔ ✊ ✌️ ✋ ✋ ☝️ ☀️ ☔️ ☁️ ❄️ ⛄️ ⚡️ ⛅️ ☎️ ☎️ ⌛️ ⏳ ⏰ ⌚️ ➿✉️ ✉️ ✂️ ✒️ ✏️ ⚽️ ⚾️ ⛳️☕️ ⛪️⛺️ ⛲️ ⛵️ ⛵️ ⚓️ ✈️ ⛽️ ⚠️ ♨️ 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣ 0️⃣◀️ ▶️⏬ ⏫⏪ ⏩ ⬇️ ⬅️➡️ ⬆️ ⤵️ ⤴️ ↩️ ↪️ ℹ️ ↙️ ↘️ ↖️ ↗️ ↔️ ↕️ ♿️ ㊙️ ㊗️ Ⓜ️ ⛔️ ✳️ ❇️ ✴️ ♈️ ♉️ ♊️ ♋
复制链接

扫一扫

专栏目录