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

JavaScript-扫盲

news 2026/2/8 18:42:06

文章目录

1. 前言
2. 第一个 JavaScript 程序
3. javaScript 的基础语法
- 3.1 变量
- 3.2 数据类型
- 3.3 运算符
- 3.4 条件语句
- 3.5 数组
- 3.6 函数
- 3.7 作用域
- 3.8 对象
4. WebAPI
- 4.1 DOM 基本概念
- 4.2 常用 DOM API
- 4.3 事件
- 4.4 操作元素
- 4.5 网页版猜数字游戏
- 4.6 留言版

1. 前言

提问 java 和 javaScript 有啥关系呢？

答：他们的关系就是老婆和老婆饼的关系，简单来说就是没有关系 .

这里 javaScript 为啥叫这个名字，完全是蹭热度，当时 java 是非常火的，设计 javaScript 的大佬们就蹭热度取名为 javaScript .

JS 最初只是为了进行前端页面开发，后来 JS 也被赋予了更多的功能 , 可以用来开发左面程序，手机 app , 服务端的程序 .

关于 javaScript的诞生史： Javascript诞生记 - 阮一峰的网络日志 (ruanyifeng.com)

简单了解一下 javaScript 的由来，下面就来学习一下 .

另外需要了解： JS 是运行在浏览器上的。

比如 : chrome 里面专门有一个模块，就是 JS 引擎，就相当于 JVM 一样，能够解释执行 js 代码.

后来就有大佬把这部分代码单独拿出来了，封装成独立的程序了，称为 V8 引擎 (此时 JS 使用范围更广泛了)

最后说一下本文学习目标就开始 JS 的学习 .

ECMAScript(简称 ES): JavaScript 语法
DOM: 页面文档对象模型, 对页面中的元素进行操作（DOM API 是浏览器给 js 提供的操作页面元素的 api）
BOM: 浏览器对象模型, 对浏览器窗口进行操作（BOM 是浏览器提供给 js 的另一组操作浏览器窗口的 api）

另外：浏览器还提供了很多api 感兴趣可以自己去了解一下，这里只是扫盲 .

2. 第一个 JavaScript 程序

老规矩这里通过写一个 hello worl 来入门，我们的 javaScript 程序是通过 script 标签嵌入到 html 里面 .

在这里插入图片描述

上面使用的 alert 进行输出（弹框），让我们看到了程序输出，但是弹窗并不太好，很影响用户体验 .

补充：有些对话框一弹出来就会阻止用操作界面和其他部分叫做模态对话框

此时我们就可以使用 console.log 在控制台中打印日志

在这里插入图片描述

3. javaScript 的基础语法

3.1 变量

关于 js 变量，是不需要指定类型的， Java 中是需要指定的如： int a = 10 .

js 定义变量： var 变量名 = 初始值

图一：

在这里插入图片描述

图二：

在这里插入图片描述

3.2 数据类型

JS 中内置的几种类型 :

number : 数字，不区分整数和小数
boolean : true 真 / false 假
string ：字符串类型
undefined ：只有唯一的值 undefined 表示未定义
null ：只有唯一的值 null , 表示空值

上面 1 ， 2 ， 3 好理解 , 下面 4 ， 5 是 JS 独有的类型。

undefined : 可以作为一个类型，也可以表示唯一的值，值也是 undefined . 出现 undefined 表示这个变量没有被定义，或者这个变量定义了没有赋值的情况

null ：表示空值 , 它也是唯一的值，与 undefined 存在一定的区别 .

举个例子：开学了导员发个表格，让大家填写

表格：学号，姓名，班级，性别专业 …

有同学表示，这里少了个 “电话” 这样的列，这种情况 “电话” 就是 undefined .

如果表格上本来有 “电话” 这一列，但是同学纷纷都没填，此时 “电话” 就是 null

别的语言 undefined 很少见， null 很常见因为别的语言中，如果访问到某个东西没有定义，直接报错所以少见。

而 JS 中访问到某个东西没有定义，并不会报错而是返回一个 undefined ，这里 JS 就把别的语言中认为非法的行为合法化 .

演示一下 :

在这里插入图片描述

下面快速过一遍 js 中的数字类型，字符串类型，字符串求长度，字符串拼接，因为与Java差不多 .

特殊数字值

Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.

-Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.

NaN: 表示当前的结果不是一个数字.

当我们对字符串进行 - 操作的时候就可以看到 NaN 这数字的值

字符串类型

js 的字符串和 java 的字符串是非常类似的 .

js 字符串可以通过 '' 定义也可以通过 " "进行定义

在这里插入图片描述

字符串求长度 :

在这里插入图片描述

字符串拼接：

这里字符串拼接就与 java 是一样的也是通过 + 进行拼接

在这里插入图片描述

关于 js 字符串提供了很多方都于 java 类似可以自己看看文档 JavaScript 字符串方法 (w3school.com.cn)

布尔类型 boolean

这里 js 中的 boolean 与java 中的 boolean 不同， js 中的Boolean 会当成 0 和 1 来处理 (与 c 语言类似) , java 中 boolean 取值为 true 和

false ，如果你敢拿 boolean 类型的变量进行加减他就敢报错 .

在这里插入图片描述

3.3 运算符

算数运算符 :

赋值运算符 & 复合赋值运算符 :

=
+=
*=
/=
%=

自增自减运算符

++ : 自增 1
-- ：自减 1

比较运算符:

<
>
<=
== 比较相等 (会进行隐式类型转化)
!=
=== 比较相等 (不会进隐式类型转化)
!==

javaScript 中的运算符和 java 用法基本相同，这里就不做过多介绍。

这里主要来看一下 == 和 === 的区别 :

图示：

在这里插入图片描述

逻辑运算符 :

用于计算多个 boolean 表达式的值

&&与 ：一假则加
|| 或 : 一真则真
! 非

位运算 :

& 按位与
| 按位或
~ 按位取反
^ 按位异或

移位运算 :

<< 左移
>> 有符号右移 (算术右移)
>>> 无符号右移 (逻辑右移)

3.4 条件语句

这里一块就与 java 是一样的 , 快速过一遍

if 语句 :

在这里插入图片描述

三目表达式 :

格式： 条件 ? 表达式 1 ：表达式 2

条件为真返回表达式 1 ，条件为假返回表达式 2

在这里插入图片描述

switch 语句

switch (表达式) {case 值1:语句1;break;case 值2:语句2:break;default:语句N;
}

循环语句

while 循环

在这里插入图片描述

这里 while 里面同样可以写 continue 和 break

continue ：立即结束这次循环 ,开启下次循环 .

break ：结束整个循环 .

for 循环

在这里插入图片描述

3.5 数组

创建一个数组

图一：

在这里插入图片描述

图二：

在这里插入图片描述

图三：

在这里插入图片描述

数组的遍历

在这里插入图片描述

给数组添加元素 (尾插) :

在这里插入图片描述

删除数组中的元素

在这里插入图片描述

3.6 函数

图一：

在这里插入图片描述

图二：第二种方法来定义函数

在这里插入图片描述

3.7 作用域

图示 :

在这里插入图片描述

3.8 对象

图一：

在这里插入图片描述

图二：

在这里插入图片描述

到此 js 的基础语法就看完了，这里 js 和 java 之间相关性是非常大的，最大的区别，动态类型 / 弱类型 .

基础语法过完，下来看看 js 提供的 api

4. WebAPI

上面我们看完 js 发现自己啥都干不了这里就很迷茫，更有一种感觉， js 和网页开发有啥关系？学了 js 之后能写出个啥网页？

其实我们想要写一个程序，光有语法是远远不够的，还需要掌握一些相关的 API .

WebAPI 都是浏览器给 js 代码提供的功能 (如果浏览器不同， api 的行为有可能存在差异) .

这里 api 差异在之前是前端程序猿心中最大的痛，为啥这么说？

放在 2017 年左右的时候，前端开发，主要工作，保证浏览器的兼容，写好的代码，不光要在 chrome 上正常工作，还得再 firefox 工作，还得再 IE上工作，还得再臭名昭著的 IE6（Windows px 上默认浏览器）上工作 .

这里 IE 支持的 api 啥的和 chrome 差别巨大 .

时至今天浏览器市场再次 chrome 一家独大， edge 也是 chrome 内核， firefox 也快黄了，尤其是移动端快速发展 (安卓和 chrome 是自家人)

因此再写代码也就不咋需要考虑浏览器兼容性问题 .

4.1 DOM 基本概念

DOM 全称为 Document Object Model , 文档对象模型

文档：每一个 HTML 就是一个文档

对象： js里面的对象

合在一起：在 HTML 中，会把每个 HTML 标签，都视为一个 js 中可操作的对象，通过操作这个对象就可以影响到页面的显示.

这个就是文档对象模型 .

这里标签上显示啥，都可以通过 js 对象感知导， js 对象修改对应属性，能够影响到标签的展示 .

此时就可以通过 dom 让 js 代码来操作页面元素

DOM 树

引用：

一个页面的结构是一个树形结构称为DOM 树

页面结构如下 :

DOM 树结构形如 :

重要概念:

文档: 一个页面就是一个文档, 使用 document 表示.
元素: 页面中所有的标签都称为元素. 使用 element 表示.
节点: 网页中所有的内容都可以称为节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node
表示.
这些文档等概念在 JS 代码中就对应一个个的对象.
所以才叫 “文档对象模型” .

这里 DOM api 有很多，这里主要介绍几个最常用的 .

没有介绍的可以自己去文档查看： Web API 接口参考 | MDN (mozilla.org)

4.2 常用 DOM API

1. 选中页面元素 : querySelector （CSS 选择器）

图一：

在这里插入图片描述

图二： querySelectorAll

在这里插入图片描述

4.3 事件

事件就是针对用户的操作进行的一些响应 .

这里我们想要与用户交互，就需要知道用户干了啥，用户他做了一些动作，就会在浏览器中产生一些事件 . 我们的代码就需要针对事件做出反应 .

这里事件有很多种比如说 :

鼠标点击
鼠标双击
鼠标移动
键盘按下
调整浏览器窗口
…

关于事件我们还要知道事件的三个元素：

事件源：那个元素产生的事件
事件类型 : 点击，双击，移动，键盘按下 …
处理程序 : 事件发生之后，要执行那个代码（要执行的代码都是提前设定好的）

举个简单例子：

放学回家，一进屋，发现老妈坐在沙发上，手拿个鸡毛掸子，面色不善，

事件源：老妈

事件类型：手拿鸡毛掸子，面色不善

事件处理：赶紧再脑子里过一遍最近是不是做啥事情得罪他了，突然灵光一闪，是不是被发现藏在床底的不及格试卷，于赶快去请罪（以下内容自行脑补） .

前端页面中，针对事件也是要有不同的处理方式 . 都是最开始的时候就设定好的 (事件绑定)

演示：

在这里插入图片描述

4.4 操作元素

1. 获取 / 修改元素内容

在这里插入图片描述

2. 获取 / 修改元素属性

在这里插入图片描述

3. 获取 / 修改表单元素属性

在这里插入图片描述

4. 获取 / 修改样式

在这里插入图片描述

上述操作都是针对当前页面上已有的元素进行展开的，下面我们来通过 dom 来创建或删除一些元素

1.新增元素

在这里插入图片描述

2. 删除元素

在这里插入图片描述

罗列一下上面学的：

选中元素：querySelector / querySelectorAll
事件： onclick
修改元素内容 : innerHTML
修改元素内容属性 : 元素.属性
修改表单属性 : 元素.value ， 元素.type
元素样式 : 元素.style.样式名 = 值 ， 元素.className = css 类名
创建元素 crateElement
把元素放到 dom 树上 appendChild
删除元素 removeChild

下面来完成一个网页版的猜数字游戏，趁热打铁 .

4.5 网页版猜数字游戏

random 方法 JavaScript 随机 (w3school.com.cn)

floor 方法 JavaScript floor() 方法 (w3school.com.cn)

图一：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>猜数字</title>
</head><style>.one {background: aqua;}
</style>
<body><div>请输入要猜的数字:</div>
<br/>
<input type="text"><button>提交</button>
<br/><br/><span>当前猜的次数 : </span> <span id="guessCount">0</span><br/><br/>
<!-- 使用这个 div 显示结果 : -->
<span>结果: </span> <span class="result"></span><button class="a">重置: </button><script>// 1. 生成一个 1 - 100 随机整数let toGuess = Math.floor(100 * Math.random()) + 1console.log(toGuess)// 2. 进行猜数字操作let button = document.querySelector('button')let input = document.querySelector('input')let resultDiv = document.querySelector('.result')let guessCount = document.querySelector('#guessCount');let a = document.querySelector('.a');button.onclick = function () {// 3. 取出输入框的内容if (input.value === '') {// 用户啥都没有输入alert('请输入要猜的数字')return;}let inputNum = parseInt(input.value)// 4. 比较一下大小关系//更新 猜的次数let ret = parseInt(guessCount.innerHTML);guessCount.innerHTML = ret + 1;if (inputNum < toGuess) {// 低了resultDiv.innerHTML = '低了'resultDiv.style.color = 'aqua'} else if (inputNum > toGuess) {// 高了resultDiv.innerHTML = '高了'resultDiv.style.color = 'orange'} else {//猜对了resultDiv.innerHTML = '恭喜你猜对了'resultDiv.style.color = 'red'alert('当前使用: ' + guessCount.innerHTML + '次')}}a.onclick = function(){// 此时重置直接刷新页面即可:location.reload();}</script></body></html>

刷新页面: location.reload() - Web API 接口参考 | MDN (mozilla.org)

页面效果 :

在这里插入图片描述

这里有兴趣，可以写一些样式啥的让页面好看些，也可以添加一些逻辑，比如输入的数字大于 100 ，输入的数字小于 0 等。

下面再来写一个代码案例

4.6 留言版

页面：

在这里插入图片描述

需求：如果用户没有在输入框输入东西点击提交，弹出提示框，输入后点击提交，下面显示 xx 对 xx 说 xx

大致代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>html, body {height : 100%;background-image: url('../imgs/阳台.png');/*禁止平铺*/background-repeat: no-repeat;/**/background-size: cover;}/*  * 统配符选择器 是选中页面中所有的样式 *//* 消除浏览器的默认样式 */* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 600px;margin: 20px auto;}h1 {text-align: center;margin: 20px 0}p {text-align: center;color: #666;margin: 20px 0}.row {/* 弹性布局 */display: flex;height: 40px;/* 水平方向居中 */justify-content: center;/* 垂直方向居中 : */align-items: center;}.row span {width: 80px}.row input {width: 300px;height: 30px}.row button {width: 380px;height: 30px;color: red;background-color: skyblue;/*    去掉边框 */border: none;/* 圆角矩形 */border-radius: 5px;}.row button:active {background-color: green;}</style>
</head><body><div class="container"><h1>留言板</h1><p>输入内容后点击提交 , 信息会显示到下方表格中</p><div class="row"><span>谁: </span><input text="text"></div><div class="row"><span>对谁: </span><input type="text"></div><div class="row"><span>说: </span><input type="text"></div><div class="row"><button id = "submit">提交</button></div><div class="row"><button id = "revert">撤销</button></div></div><script>// 实现 提交操作 , 点击提交按钮 , 就能把用户输入的内容提交到 页面上像是// 点击的时候 获取到三个输入框的文本内容 , 然后 创建一个 新的 div.row 把内容// 构造到这个 div 即可let containerDiv = document.querySelector('.container');let inputs = document.querySelectorAll('input');let button = document.querySelector('#submit');button.onclick = function(){// 1. 获取三个 输入框的内容let from = inputs[0].value;let to = inputs[1].value;let msg = inputs[2].value;if(from === '' || to === '' || msg === ''){alert("输入框不能为空")return;}// 2. 构造 新 divlet rowDiv = document.createElement('div');// 给新创建的 div 添加一个 classrowDiv.className = 'row';rowDiv.innerHTML = from  + '对' + to + ' 说: ' + msg// 3. 将 div 挂到 dom 树上containerDiv.appendChild(rowDiv);// 清空之前的输入框内容for(let input of inputs){input.value = '';}}let revertButton = document.querySelector('#revert');revertButton.onclick=function(){// 删除最后一条消息 :// 选中所有的 row ,找出最后一个 row ,进行删除 (通过 submit 按钮添加了一个新的 row ,此时撤销就是删除这个row)let rows = document.querySelectorAll('.row');containerDiv.removeChild(rows[rows.length-1]);}</script></body></html>

上面的代码拥有的小问题：

在这里插入图片描述

修改代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>html, body {height: 100%;background-image: url('../imgs/阳台.png');/*禁止平铺*/background-repeat: no-repeat;/**/background-size: cover;}/*  * 统配符选择器 是选中页面中所有的样式 *//* 消除浏览器的默认样式 */* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 600px;margin: 20px auto;}h1 {text-align: center;margin: 20px 0}p {text-align: center;color: #666;margin: 20px 0}.row {/* 弹性布局 */display: flex;height: 40px;/* 水平方向居中 */justify-content: center;/* 垂直方向居中 : */align-items: center;}.row span {width: 80px}.row input {width: 300px;height: 30px}.row button {width: 380px;height: 30px;color: red;background-color: skyblue;/*    去掉边框 */border: none;/* 圆角矩形 */border-radius: 5px;}.row button:active {background-color: green;}</style>
</head><body><div class="container"><h1>留言板</h1><p>输入内容后点击提交 , 信息会显示到下方表格中</p><div class="row"><span>谁: </span><input text="text"></div><div class="row"><span>对谁: </span><input type="text"></div><div class="row"><span>说: </span><input type="text"></div><div class="row"><button id = "submit">提交</button></div><div class="row"><button id = "revert">撤销</button></div></div><script>// 实现 提交操作 , 点击提交按钮 , 就能把用户输入的内容提交到 页面上像是// 点击的时候 获取到三个输入框的文本内容 , 然后 创建一个 新的 div.row 把内容// 构造到这个 div 即可let containerDiv = document.querySelector('.container');let inputs = document.querySelectorAll('input');let button = document.querySelector('#submit');button.onclick = function(){// 1. 获取三个 输入框的内容let from = inputs[0].value;let to = inputs[1].value;let msg = inputs[2].value;if(from === '' || to === '' || msg === ''){alert("输入框不能为空")return;}// 2. 构造 新 divlet rowDiv = document.createElement('div');// 给新创建的 div 添加一个 classrowDiv.className = 'row message';rowDiv.innerHTML = from  + '对' + to + ' 说: ' + msg// 3. 将 div 挂到 dom 树上containerDiv.appendChild(rowDiv);// 清空之前的输入框内容for(let input of inputs){input.value = '';}}let revertButton = document.querySelector('#revert');revertButton.onclick=function(){// 删除最后一条消息 :// 选中所有的 row ,找出最后一个 row ,进行删除 (通过 submit 按钮添加了一个新的 row ,此时撤销就是删除这个row)let rows = document.querySelectorAll('.message');// 解决找不到 类为 message 元素 删除报错问题if(rows === null || rows.length === 0){return;}containerDiv.removeChild(rows[rows.length-1]);}</script></body></html>

到此 js 的扫盲就结束了 .

JavaScript-扫盲

文章目录1. 前言2. 第一个 JavaScript 程序3. javaScript 的基础语法3.1 变量3.2 数据类型3.3 运算符3.4 条件语句3.5 数组3.6 函数3.7 作用域3.8 对象4. WebAPI4.1 DOM 基本概念4.2 常用 DOM API4.3 事件4.4 操作元素4.5 网页版猜数字游戏4.6 留言版1. 前言提问 java 和 java…...

编程日记 2023/5/15 9:08:10

bpftrace -e BEFIN {printf("hello world!\n");}获取调用 vfs_read 函数的进程id, 每2s打印一次 bpftrace -e kprobe:vfs_read {ID pid;} interval:s:2 {printf{"ID:%d\n", ID);}用户态调试 bpftrace -e uprobe:/*/a.out:and {printf("ID:%d\n&qu…...

编程日记 2023/5/15 9:07:45

DELL-Vostro-5468电脑 Hackintosh 黑苹果efi引导文件

原文来源于黑果魏叔官网，转载需注明出处。硬件型号驱动情况主板DELL-Vostro-5468处理器Intel Core i3-7100U 2.40 GHz, 3M Cache已驱动内存Samsung 8GB DDR4-2133MHz已驱动硬盘TOPMORE CAPRICORNUS NVMe 1TB已驱动显卡Intel HD Graphics 620已驱动声卡Realtek ALC2…...

编程日记 2023/5/15 9:07:26

阶段二11_面向对象高级_学生管理系统案例2

主要内容： 添加学生 static关键字一.添加学生时判断id是否存在 0.思路图片： 04/图片/2_添加学生判断id存在的问题分析.png 1.思路实现详细步骤： StudentController【客服接待】 /** 接收到学生id后，判断该id在数组中是否存在这…...

编程日记 2023/5/15 9:07:05

spring源码篇(3)——bean的加载和创建

spring-framework 版本：v5.3.19 文章目录bean的加载bean的创建总结getBean流程createBean流程doCreateBean流程bean的加载 beanFactory的genBean最常用的一个实现就是AbstractBeanFactory.getBean()。以ApplicationContext为例，流程是: ApplicationCon…...

编程日记 2023/5/15 9:06:33

Spring 中事务的传播级别

Spring 中事务的传播级别 REQUIRED(默认)：默认的隔离级别，如果当前存在一个事务，就加入该事务，如果当前没有事务，就创建一个新的事务。 REQUIRED_NEW：不管当前是否存在事务，都创建一个新的事物…...

编程日记 2023/5/15 9:06:12

ECharts可视化库--常用组件

目录一.series系列二.常见组件 1.标题title 2.图例legend 3.工具栏toolbox 4.提示框tooltip 5.坐标轴 xAxis yAsix 6.series系列上一篇已经介绍了ECharts库的导入工作和绘制基本的图标，今天我们来了解一下常用的组件，如果对数据可视化感兴…...

编程日记 2023/5/14 18:03:49

openpnp - 设备开机后, 吸嘴校验失败的解决方法

文章目录openpnp - 设备开机后, 吸嘴校验失败的解决方法概述重新校验吸嘴ENDopenpnp - 设备开机后, 吸嘴校验失败的解决方法概述设备开机后, 默认会校验吸嘴座上已经安装的2个吸嘴. 如果开机校验吸嘴失败, 就需要用向导重新校验失败的吸嘴. 具体是哪个吸嘴校验失败, 可以看…...

编程日记 2023/5/14 16:02:13

【Linux学习】基础IO——软硬链接 | 制作动静态库

🐱作者：一只大喵咪1201 🐱专栏：《Linux学习》 🔥格言：你只管努力，剩下的交给时间！ 基础IO🍓软硬链接🌲软链接🌲硬链接🍓动静态库&…...

编程日记 2023/5/15 9:05:59

如何分辨on-policy和off-policy

on-policy的定义：behavior policy和target-policy相同的是on-policy，不同的是off-policy。 behavior policy：采样数据的策略，影响的是采样出来s,a的分布。 target policy：就是被不断迭代修改的策略。如果是基于深度…...

编程日记 2023/5/15 9:05:38

第三讲：ambari编译后的安装包制作流程说明

一、概述前两讲，我们已经将 Ambari 源码编译成功。现在我们想将 Ambari 编译后的 rpm 包，都放到 yum 本地仓库中，这样 Ambari 与 HDP 在安装部署时，就直接使用的我们自己编译的安装包了。 Ambari 的 rpm 包，有这么几类： ambari-server rpmambari-agent rpmambari metr…...

编程日记 2023/5/15 9:05:16