当前位置：首页 > news >正文

JavaScript快速入门，满满干货总结，快速掌握JS语法，DOM，BOM，事件

news 2025/9/23 13:25:39

一. JavaScript、HTML、CSS简介

1.1 HTML简介和举例说明

1.2 CSS简介和举例说明

1.3 JavaScript 简介和举例说明

二. JavaScript 基本语法

2.1 变量类型和定义方式

2.2 逻辑运算符，比较运算符

2.3 流程控制，if，if...else...，while

2.4 函数定义和调用

2.5 全局变量和局部变量

2. 6 方法

三. 真正理解 JavaScript

3.1 JavaScript的组成部分

3.2 宿主介绍和举例说明

四. BOM和DOM

4.1 BOM、DOM概述及二者的关系

4.2 BOM详解

4.2 DOM对象

五. 事件

前言：HTML，CSS，JavaScript正是我们所熟知的前端三件套，而在这三者之中，JavaScript是重中之重。因为不管你是干前端，还是做后端或许都多多少少听说过Vue，Recat，ES5，ES6，typescript 等前端框架，但其实啊，这些框架归根究底，都是封装的 JavaScript 代码。所以，只要我们学会了JavaScript，任何一个前端框架我们都可以很快速的上手理解其中的语法和API。

此外，小编是主攻后端开发的，但作为一个后端开发，当然也需要对前端有所掌握，不过掌握的一定没有专业前端那么深入和彻底，如果文章中哪里出现错误，敬请各位小伙伴批评和指正哦！

那么话不多说，我们开始进入正文吧！

一. JavaScript、HTML、CSS简介

JavaScript是一个跨平台，面向对象的脚本语言。

划重点：跨平台，面向对象，脚本语言。前两个特性，学过Java的小伙伴们一定不陌生，因此，有Java基础的同学，学习JavaScript会相对来说比较轻松。再者，JavaScript是脚本语言，所以它是不需要编译，而是由浏览器直接执行的(这句话记住，后面要考哦！！！)。

本篇主要讲解JavaScript，但是我们又不得不将 JavaScript 与 HTML，CSS做比对。因为它们三者都是构成前端的重要元素，只是各自的分工有所不同。

1.1 HTML简介和举例说明

HTML主要组成前端页面的结构部分，举例如<title>标题，<head>网页头，<body>网页体等结构标签，应用于网页的整体结构；

如下图我写博客的界面所示，这里只是举个例子说明 <title>，<head>，<body>方便各位理解，不用较真哦。例如我们打开一个界面，就会显示我们这个界面的内容，它就可以理解为页面的标题<title>，然后下方还会显示网页链接，我们姑且把它称之为<head>头，再往下就是文章内容，就是我们的主体<body>，这三者就组成了我们的页面结构。

1.2 CSS简介和举例说明

CSS主要决定了网页中各种元素的表现，举例如元素选择器元素名称 "{color: red;}" 、id选择器 "#id属性值{color: red;}" 、class选择器 ".class属性值{color: red;}" ，使用选择器可以对我们页面中的各种元素设置不同种类的样式，例如设置字体为xxx颜色，设置标签为xxx样式；

如下图所示，可以看到，在界面中有的字体是正常黑色，有的是加粗黑色，有的是红色，有的还会有特殊格式，这些个是，都是可以通过CSS选择器来进行控制的。

1.3 JavaScript 简介和举例说明

JavaScript主要控制网页的行为，使网页变的可交互。举例如按钮被点击，鼠标移动上去，按下键盘等对应的数据会发生什么样的动作，都是由JavaScript来进行控制的。

如下图，下方最醒目的三个按钮选项，都是可以进行点击与页面进行交互的，点击不一样的按钮，产生不一样的行为和后果，都是由JavaScript去进行一手操控的，这就是JavaScript最重要的一个特点——"控制用户与界面的交互"。

二. JavaScript 基本语法

2.1 变量类型和定义方式

JavaScript中常用的变量类型分为变量类型，数值类型(不区分整数和小数)，字符串类型，布尔类型；而且定义变量均使用 "var" 关键字，一个通用；不像Java中"int"，"folat"，"boolean"，"String"等不同的变量不同的关键字，JavaScript会自动识别我们定义的变量类型。"var" 就是单词 "variable" 的缩写，翻译为变量。

// 变量类型定义方式
var 变量名 = 变量值;// 数值类型定义方式,javaScript中不区分整数和小数
var int1 = 10；
var float1 = 10.5;
var double1 = "10.9";// 字符串类型定义方式
var str = "abcdefg";// 布尔类型定义方式
var flag = true;
var flag2 = false;// 定义数组Array类型
var arr = [1,2,3];// 定义Map类型
var map = new Map([["name","jack"],["age","20"]]);//定义Set类型
var set = new Set([1,3,5,"abc",true]);

2.2 逻辑运算符，比较运算符

&&：两个都为真结果为真
||：一个为真结果为真
！：取反
=：赋值
==：等于（类型不一样，值一样，，会判断为true）

2.3 流程控制，if，if...else...，while

        // if 控制代码块var number = 10;if(number > 10){console.log("大于10");}// if...else if...else控制代码块var number = 10;if(number > 10){console.log("大于10");}else if(number == 10){console.log("等于10")}else{console.log("小于10")}// while 循环控制代码块var num2 = 20;var age = 18;while(num2 < 30){age = age + 1;num2 = num2 + 1;}console.log(age);// "for 临时变量名 of 集合变量名"遍历获取集合中的变量，如下便利map集合和set集合// 便利map集合var map = new Map([["name","jack"],["age","20"]]);for(let x of map){console.log(x)}// 便利set集合var set = new Set([1,3,5,"abc",true]);for(let x of set){console.log(x)}

2.4 函数定义和调用

JavaScript中常用的函数的定义方式有两种。

方式一：function 函数名(参数列表){...方法体}

方式二：var 变量名 = function 函数名(参数列表){...方法体}

        // 定义求和函数，调用者调用时传入参数function add(number1,number2){return number1 + number2;}var number = 0;
// 定义判断最大值函数，函数返回一个最大的值var large = function bigNumber(number1,number2){if(number1 > number2){return number1;}else{return number2;}}
// 调用bigNumber函数number = bigNumber(10,11);

2.5 全局变量和局部变量

在JavaScript中，变量也有全局变量和局部变量之分，这一点和Java是一样的。

如上3.4中所示，变量number定义在函数之外，是全局变量，在其他函数中依然可以使用；而number1，number2定义咋函数之内，是局部变量，只能在函数bigNumber内使用；

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数范围内找到，就会向外查找，如果没有在全局作用域中找到，就会报错ReferenceError

2. 6 方法

方法就是把函数放到对象的里边，JavaScript中的对象最常用的就是属性和方法。

        var zhangsan={name: '张三',birth: 2002,age: function () {//Date().getFullYear()获取今年年份，减去出生年份即为年龄var nowYear=new Date().getFullYear();return nowYear-this.birth;}}// 获取并打印名称console.log(zhangsan.name)// 获取并打印年龄console.log(zhangsan.age())

三. 真正理解 JavaScript

3.1 JavaScript的组成部分

OK，上面我们简单了解了JavaScript，过了一遍基本语法，函数方法定义等，也许小伙伴们认为JavaScript就是console.log、if...else...之类的编程代码。

如果这样想你就错了，在 ECMA(欧洲计算机制造协会)-262中有规定，真正的JavaScript语言，其实包含代码和宿主两部分，我们大多数开发人员都更多的关心代码，对于宿主环境的概念则比较迷糊，其实用大白话来讲，宿主环境就是跑代码的地方。

我们常见跑JavaScript代码的地方，一个就是我们上面提到的浏览器，由浏览器直接执行(看，这句话是不是考到啦)；另一个，就是node，简要关系图如下所示。

3.2 宿主介绍和举例说明

ECMA-262规范规定，宿主环境必须提供代码的基准实现以及与环境交互必须的扩展。这样说专业名词也许不是很容易听懂，我们一起来看个例子。

（1）代码的基准实现：

同样一句console.log("hello JavaScript")，在浏览器中执行，会打印在开发者工具的控制台，如下图所示

但如果在 node 中执行，会打印在终端，二者虽然环境不同，但都实现并输出了我们编写的代码，这就是代码的基准实现。

（2）与环境交互必须的扩展

在 node 中，我们可以通过引入 fs 模块，访问本地的文件系统，进行文件读写操作，但这个操作在浏览器中却不行；

上述node的办法虽然在浏览器中行不通，但是我们却有另一种办法。我们可以通过 document 对象(下面马上要说的DOM和BOM)来操作并获取网页中的元素。这里先简单理解，到下面我再详细说明。

总结上面两点，我们姑且先不说 node ，此时就会发现，document 对于JavaScript 至关重要，它是JavaScript语言和浏览器宿主环境交互必要的扩展条件。如下图所示，最左边是我们的浏览器，最右边是JavaScript语言，二者就可以通过document(DOM)和BOM进行交互(不理解也没事，下一小节专门来讲)获取并操作网页中各个元素，可以这么来说，DOM和BOM就是JavaScript语言将浏览器作为宿主环境在浏览器上运行时所存在的概念，是浏览器内置的功能，而并非JavaScript的功能。

那么DOM和BOM到底是什么呢？它有哪些需要我们学习的语法知识呢？往下看，我们来深入探究。

四. BOM和DOM

4.1 BOM、DOM概述及二者的关系

BOM，BOM全称 Browser Object Model，译为浏览器对象模型。通俗一点来说，小伙伴们可以直接将它理解为整个浏览器，而DOM全称 Document Object Model，译为文档对象模型，它代表浏览器页面中展示的内容。一个指代浏览器，一个指代浏览中的内容；此时二者的关系显而易见了，BOM是包含DOM的。

那么既然BOM是包含DOM的，又为什么在网上很多人都喜欢拿二者相提并论呢？

原因很简单：因为在开发的过程中，几乎90%的工作量都体现在绘制页面，页面文本内容上，而 document 正是负责浏览器页面上所展示的内容，是我们经常打交道的对象，因此将它单独拿出来一点也不为过。

4.2 BOM详解

BOM是浏览器对象，其核心是window(翻译为窗口)，它是一个双重角色，既是浏览器与JavaScript交互的一个接口，又是一个Global全局对象。BOM提供了一组API，允许开发者通过JavaScript与浏览器进行交互。浏览器上，网页中任何一个对象都是BOM，也可以说是window的子属性或子对象，所以就可以通过 "window." 的方式进行调用获取。

如下图所示，都是window的子对象，当我们想操作浏览器的各个组成部分时，可以通过window对象来获取它们和它们的子属性。

Document：文档对象，document == window.document 结果就是true，document对象下面细说；
History：历史记录对象，通过window.history获取此对象，可以实现对路由跳转的控制；
Location：地址栏对象，通过window.location获取此对象后，也可以链接到其他URL；
Navigator：浏览器信息对象：其中包含大量关于Web浏览器的信息，在检测浏览器和操作系统上非常有用；
Screen：屏幕对象，通过window.screen获取此对象后，可以获取屏幕的各种属性；

4.2 DOM对象

在浏览器中，一个页面就是一个xxx.HTML文件。在HTML文件中，会有不同种类的标签，且部分标签还有父子关系，如下图所示，HTML主要由<head>和<body>构成，二者下面还有子标签<meta>、<h1>、<p>，子标签的下方还有子标签，画出来就是一个树，HTML是顶级父节点。

DOM对象主要包含以下三种

Element：元素对象，如<html>，<body>，<p>等标签都是元素节点对象；
Text：文本对象(向用户展示的内容)，如<li>文本内容</li>，是展示给用户的文本元素对象；
Attribute：属性对象，如<a></a>超链接标签的链接属性href="程序猿ZhangSir-CSDN博客"；

可以说，HTML文档是由DOM节点元素对象构成的集合。

这里我们只要记住，document 对象可以等效替代HTML即可。即 document对象节点 = HTML父节点，document 也是所有元素标签的父节点对象即可，任意一个HTML文件中的标签，我们都可以通过 document 对象来获取，获取的方式如下代码所示

// document 基本语法如下所示，常用的就是下面三种，其实就跟CSS选择器类似，学过CSS的很容易理解
// 1. 标签选择器,通过标签获取我们要操作的元素，"Tag"就是标签的意思，这行代码意思就是获取h1标签对象
var h1=document.getElementsByTagName('h1');
// 2. ID选择器，每个元素我们都可以为其设置ID，通过ID就可以获取并操作指定的元素对象
var p2=document.getElementById('p2');
// 3. Class类选择器，每个元素不仅不可设置ID，也可以设置Class属性，
//               通过Class我们同样可以获取并操作指定的元素
var p3=document.getElementsByClassName('p3');

五. 事件

事件其实可以简单的理解为用户与浏览器或文档进行交互时发生的各种效果，比如我打开某个新的网页，按下某个"提交"、"修改"、"将鼠标悬停在某个地方"、等一系列操作，每一下点击或鼠标的移动，都有可能会让浏览器生成不一样的新内容或进行一个新的界面，这个过程就是一个事件的发生。

这里我就不再详细进行说明，小编自己在网上搜索学习的时候，找到了一片宝藏博文，总结的非常详细，大家可以跳转学习。

JS事件最全详解-CSDN博客文章浏览阅读2.8k次，点赞23次，收藏47次。方法用于向指定元素添加事件处理程序（事件句柄handler参数1：事件名称必须。字符串，指定事件名。注意: 不要使用 “on” 前缀。例如，使用click,而不是使用onclick。参数2function必须。指定要事件触发时执行的函数。注意：事件对象会作为第一个参数传入函数。参数3useCapture可选。布尔值，指定事件是否在捕获或冒泡阶段执行。true- 事件处理程序（事件句柄）在捕获阶段执行false默认。事件处理程序（事件句柄）在冒泡阶段执行事件对象的类型取决于特定的事件。例如，click。_js事件https://blog.csdn.net/qq_44741577/article/details/135979584?ops_request_misc=&request_id=&biz_id=102&utm_term=js%E4%BA%8B%E4%BB%B6&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-135979584.142^v100^pc_search_result_base4&spm=1018.2226.3001.4187

一. JavaScript、HTML、CSS简介

1.1 HTML简介和举例说明

1.2 CSS简介和举例说明

1.3 JavaScript 简介和举例说明

二. JavaScript 基本语法

2.1 变量类型和定义方式

2.2 逻辑运算符，比较运算符

2.3 流程控制，if，if...else...，while

2.4 函数定义和调用

2.5 全局变量和局部变量

2. 6 方法

三. 真正理解 JavaScript

3.1 JavaScript的组成部分

3.2 宿主介绍和举例说明

四. BOM和DOM

4.1 BOM、DOM概述及二者的关系

4.2 BOM详解

4.2 DOM对象

五. 事件

相关文章：