前端三件套基础之JS！！！！-171主机测评

一、引言

这一期也是前端内容的最后一期了，作为后端人员目前会这些也可以了下一期我会为大家带来Spring Boot的基础内容，这一期也是先简单讲解一下JS的基础内容然后再带大家做个猜数字和留言板。

二、JS基础介绍

第一期也给大家提过JS相当于前端的行为，动作灵魂，是一个脚本语言，, 解释型或即时编译型的编程语⾔，我个人认为JS和Java这些还是很像的都要变量，方法这些东西虽然是作为开发web界面的脚本语言而出名但是也被用于许多非浏览器环境里面。JS是网景公司发布的最开始不叫JS但因为当时Java太火了所以为了蹭热度就命名为了为 JavaScript，但这两个之间区别还是很大。

三、JS的引入方式

那么在讲JS的基础语法之前先来说一下引入方式和CSS一样都有三种引入方式，分别是行内样式，内部样式，外部样式。老规矩先来看代码。

首先是行内样式

<!DOCTYPE html>
<html lang="zh-CN">
<body>
<!– 行内JS：直接写在onclick等属性中 –>
<button onclick="alert('这是行内JS')">点击</button>
</body>
</html>

和CSS是类似的，接下来两种和CSS也都是类似的。

然后是内部样式

<!DOCTYPE html>
<html lang="zh-CN">
<body>
<script>
// 内部JS，页面内直接书写
alert('这是内部JS');
</script>
</body>
</html>

最后是外部样式

<!DOCTYPE html>
<html lang="zh-CN">
<body>
<!– 引入外部js文件 –>
<script src="demo.js"></script>
</body>
</html>

alert('这是外部JS文件');

行内 JS 直接写在标签事件里，上手简单适合临时测试，但 HTML 与 JS 代码高度耦合、复用性差；内部 JS 写在当前页面的 script 标签中，不用新建文件，适合单页面小案例，缺点是无法跨页面复用；外部 JS 使用独立 js 文件引入，实现结构和脚本分离，支持多页面复用和浏览器缓存，便于后期维护，是实际项目的推荐写。当然我个人其实是更喜欢内部样式的owo

四、JS基础语法

首先是变量，JS没有Java那么多样的变量，JS只有三个分别是var：早期JS中声明变量的关键字, 作⽤域在该语句的函数内。let：ES6 中新增的声明变量的关键字, 作⽤域为该语句所在的代码块内。const：声明常量的，声明后不能修改有点像Java的final。现在一般都用let会多有点var有点老了。

值得一提的是JS是一门动态弱类型语言，变量可以存放不同类型的值，像这个样子

let name = 'zhangsan';
let age = 20;

随着程序的运⾏, 变量的类型可能会发⽣改变像这样

let a = 10; // 数字
a = "hehe"; // 字符串

4.1 JS变量命名规则

JavaScript 变量只能由字母、数字、下划线、美元符构成，不能以数字开头，禁止使用关键字，区分大小写；开发中建议使用小驼峰命名，命名要有含义。

4.2 数据类型

虽然js是弱数据类型的语⾔，但是js中也存在数据类型，js中的数据类型分为：原始类型和引⽤类型，具体有如下类型

数据类型说明取值 / 特点

number	数字类型	不区分整数和小数
string	字符串类型	值需要用单 / 双引号包裹
boolean	布尔类型	只有两个值：true（真）、false（假）
undefined	未定义类型	变量未赋值，唯一值为 undefined

使⽤typeof函数可以返回变量的数据类型

4.3 运算符

JS的运算符和Java是差不多的应该说语言的运算符都差不多

运算符分类运算符作用说明

算术运算符	+ – * / % ++ —	加减乘除、取余；++自增（值 + 1），–自减（值‑1）
赋值运算符	= += -= *= /= %=	赋值，复合赋值运算
比较运算符	> < >= <= == === != !==	判断大小、相等关系，返回布尔值
逻辑运算符	&& `	&&逻辑与（全部满足才为真）；`	!`	\|\|	逻辑或（一个满足即为真）；!` 逻辑非（取反）
三元运算符	条件 ? 值1 : 值2	简写 if 判断，条件成立取前者，否则取后者
位运算符	& \| ^ ~	按位与、按位或、按位异或、按位取反（操作二进制）
移位运算符	<< >> >>>	左移、有符号右移、无符号右移，对二进制位移

4.4 数组

JS的数组有两种创建方式，这里直接用代码介绍

//第一种
let arr = new Array();
//第二种
let arr = [];
let arr2 = [1, 2, 'haha', false]; // 数组中保存的内容可以任意混搭

JS的数组也是有很多方法的简单来说这些方法也就是读，增，改，删这四个操作，下面给大家列举一下方法

方法作用是否改变原数组返回值

push()	数组末尾添加一个 / 多个元素	✅是	新数组长度
pop()	删除数组最后一个元素	✅是	被删除的元素
unshift()	数组开头添加元素	✅是	新数组长度
shift()	删除数组第一个元素	✅是	被删除的元素
splice(start,count,val)	删除、替换、插入元素start 起始下标，count 删除个数，val 可选新增内容	✅是	被删除元素组成的数组
slice(start,end)	截取数组片段（左闭右开）	❌否	截取后的新数组
join('分隔符')	数组转为字符串	❌否	拼接完成的字符串
reverse()	反转数组顺序	✅是	反转后的原数组
sort()	数组排序（默认字符串排序）	✅是	排序后的原数组
concat()	拼接多个数组	❌否	合并后的新数组
indexOf(值)	查询元素下标，不存在返回-1	❌否	下标 / -1

使用数组方法时要分清是否修改原数组；splice可增删改，slice仅截取；sort默认是字符串排序；indexOf查找失败返回-1。

4.5 函数

JS的函数和Java这些也差不多语法格式就是这样

function 函数名(形参列表) {
函数体
return 返回值;
}
// 函数调⽤
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值

函数定义并不会执⾏函数体内容, 必须要调⽤才会执⾏. 调⽤⼏次就会执⾏⼏次，函数的定义和调⽤的先后顺序没有要求.，这⼀点和变量不同, 变量必须先定义再使⽤。下面来一段代码示例

function add(a, b) {
return a + b;
}
let res = add(10, 20);
console.log(res); //30

然后是无返回值的，默认返回 undefined

function test() {
console.log("没有return");
}
console.log(test()); // undefined

// 定义函数
function sayHello() {
console.log("Hello JS函数");
}
// 调用函数
sayHello();

console.log("Hello JS函数");相当于是打印和print差不多但要抓包才能看到。

4.6 对象

JS也是有对象这一概念的在 JS 中, 字符串, 数值, 数组, 函数都是对象. 每个对象中包含若⼲的属性和⽅法。

JavaScript 的对象和 Java 的对象概念上基本⼀致. 只是具体的语法表项形式差别较⼤，JS有三种方法来创建对象。

第一张可以使用{}来创建对象

let a = {}; // 创建了⼀个空的对象
let student = {
name: 'coke',
height: 175,
weight: 170,
sayHello: function() {
console.log("hello");
}
};

简单来说就是这几点：使⽤ { } 创建对象

属性和⽅法使⽤键值对的形式来组织.

键值对之间使⽤ , 分割. 最后⼀个属性后⾯的 , 可有可⽆

键和值之间使⽤ : 分割.

⽅法的值是⼀个匿名函数。

想使用对象的属性和方法和Java也很相似

// 1. 使⽤ . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使⽤ [ ] 访问属性, 此时属性需要加上引号
console.log(student['height']);
// 3. 调⽤⽅法, 别忘记加上 ()
student.sayHello();

第二种就是使⽤ new Object 创建对象

let student = new Object(); // 和创建数组类似
student.name = "坤哥";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();

第三种就是使用构造函数来创建

function 构造函数名(形参) {
this.属性 = 值;
this.⽅法 = function…
}
let obj = new 构造函数名(实参);

值得注意：

1.在构造函数内部使⽤ this 关键字来表⽰当前正在构建的对象.

2.构造函数的函数名⾸字⺟⼀般是⼤写的.

3.构造函数的函数名可以是名词.

4.构造函数不需要 return

5.创建对象的时候必须使⽤ new 关键字。

下面用构造函数来创建一个猫的对象

function Cat(name, type, sound) {
this.name = name;
this.type = type;
this.miao = function () {
console.log(sound);
}
}
let mimi = new Cat('咪咪', '中华田园喵', '喵');
let xiaohei = new Cat('小黑', '波斯喵', '猫呜');
let ciqiu = new Cat('刺球', '金渐层', '咕噜噜');
console.log(mimi);
mimi.miao();

4.7 JQuery

jQuery 是一个轻量级、开源的 JavaScript 工具库，核心理念为 Write Less，Do More（写更少的代码，完成更多的功能）。它在原生 JavaScript 的基础上做了封装，简化 DOM 获取、元素操作、事件绑定、动画效果、Ajax 请求等复杂代码，同时解决早期不同浏览器之间的兼容问题，降低前端开发成本。

关于JQuery的引入这里就介绍一种本地引入：将 jQuery 文件下载到项目文件夹中使用。

在运行的时候就会自动下载了， jQuery的基础语法格式也是很简单

$(选择器).方法()

$：jQuery 的核心符号，等价于jQuery()

选择器：和 CSS 选择器用法一致，用来选中页面标签

为了让大家直观的感受一下jQuery带来的便利放一段jQuery和原生JS的比较

//原生JS
document.querySelector("div").style.color = "red";
//jQuery
$("div").css("color","red");

jQuery 四大核心特性

强大的选择器：支持 CSS 全部选择器，快速选中任意页面元素

隐式迭代：自动遍历匹配到的一组元素，不需要手动书写 for 循环

链式编程：同一个对象可以连续调用多个方法，代码更加简洁

丰富 API：内置显示隐藏、滑动、淡入淡出动画，封装极简的 Ajax 接口，同时拥有海量第三方插件

下面是简单的实例演示

$(function(){
$("button").click(function(){
$("div").hide(); //点击按钮隐藏盒子
})
})

给大家列一下jQuery的常见方法

方法功能说明是否修改元素示例代码

css()	获取 / 设置元素样式	✅修改	$('div').css('color','red')
show()	让隐藏的元素显示	✅修改	$('div').show()
hide()	隐藏元素	✅修改	$('div').hide()
slideDown()	下拉展开动画	✅修改	$('div').slideDown()
slideUp()	上拉收起动画	✅修改	$('div').slideUp()
fadeIn()	淡入显示	✅修改	$('div').fadeIn()
fadeOut()	淡出隐藏	✅修改	$('div').fadeOut()
html()	获取 / 修改元素内部 HTML 内容	✅修改	$('div').html('<b>文字</b>')
text()	获取 / 修改纯文本内容	✅修改	$('div').text('hello')
val()	获取 / 设置表单输入框的值	✅修改	$('input').val('123')
attr()	获取 / 设置标签属性	✅修改	$('img').attr('src','1.jpg')
append()	在元素内部末尾添加子元素	✅修改	$('ul').append('<li>新项</li>')
prepend()	在元素内部开头添加子元素	✅修改	$('ul').prepend('<li>头部</li>')
remove()	删除匹配的元素	✅修改	$('div').remove()
click()	绑定点击事件	不改变 DOM，绑定行为	$('button').click(function(){})
parent()	获取父元素	❌仅查询	$('span').parent()
children()	获取直接子元素	❌仅查询	$('ul').children()

在 Vue、React 等框架普及之后，新项目使用 jQuery 越来越少；但是很多老旧后台管理系统、传统网页项目依然大量使用，掌握它可以快速维护传统前端页面。

五、猜数字

这里就不做过多的解释了直接先上代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src=
"https://code.jquery.com/jquery-4.0.0.slim.min.js" integrity="sha256-8DGpv13HIm+5iDNWw1XqxgFB4mj+yOKFNb+tHBZOowc=" crossorigin="anonymous">

</script>
</head>
<body>
<button id="reset">重新开始一句游戏 </button><br/>
<span>输入要猜的数字</span>
<input type="text" id="guessNum">
<button id="guess">猜</button>
<span>已经猜了：</span><span id="count">0</span><br>
<span>结果：</span><span id="result"></span>
<style>
#result{
color: blue;
}
</style>
<script>
let count=0;
let number=Math.floor(Math.random()*100)+1;
console.log(number);
//猜数字实现
$("#guess").click(function(){
count++;
let guessNum=$("#guessNum").val();
$("#count").text(count);
if(number<guessNum){
$("#result").text("猜大了");
$("#result").css("color","red");

}else if(number>guessNum){
$("#result").text("猜小了");
$("#result").css("color","red");
}else{
$("#result").text("猜对了");
$("#result").css("color","green");
}
});
//重新开始游戏实现
$("#reset").click(function(){
number=Math.floor(Math.random()*100)+1;
console.log(number);
count=0;
$("#result").text("");
$("#count").text(count);
$("#guessNum").val("");

});
</script>

</body>
</html>

效果就是这样的感觉界面不太好看，没有用CSS去修饰

打开的时候会随机生成一个数字然后我们去猜，会告诉我们猜的结果像这个样子

六、留言板

也是直接给代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif;
}
body {
background-color: #f5f7fa;
padding: 40px;
}
.contaainer {
width: 500px;
margin: 0 auto;
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 10px;
}
.grey {
color: #999;
font-size: 14px;
text-align: center;
margin-bottom: 25px;
}
.row {
display: flex;
align-items: center;
margin-bottom: 18px;
}
.row span {
width: 70px;
color: #555;
}
.row input {
flex: 1;
height: 38px;
padding: 0 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 15px;
}
#submit {
width: 100%;
height: 42px;
border: none;
background-color: #409eff;
color: white;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: background 0.2s;
}
#submit:hover {
background-color: #66b1ff;
}
.contaainer > div:not(.row) {
margin-top: 12px;
padding: 10px 14px;
background-color: #ecf5ff;
border-radius: 6px;
color: #333;
}
</style>
</head>
<body>
<div class="contaainer">
<h1>留言板</h1>
<p class="grey">
输入和点击提交，会将信息显示再下方
</p>
<div class="row">
<span>谁：</span> <input type="text" name="" id="form">
</div>
<div class="row">
<span>对谁：</span> <input type="text" name="" id="to">
</div>
<div class="row">
<span>说什么：</span> <input type="text" name="" id="say">
</div>
<input type="button" value="提交" id="submit" onclick="submit()">
</div>
<script src=
"https://code.jquery.com/jquery-4.0.0.slim.min.js" integrity="sha256-8DGpv13HIm+5iDNWw1XqxgFB4mj+yOKFNb+tHBZOowc=" crossorigin="anonymous">
</script>
<script>
function submit(){
let form=$("#form").val();
let to=$("#to").val();
let say=$("#say").val();
if(form.trim()===""|| to.trim()===""|| say.trim()===""){
return;
}
let html="<div>"+form+"对"+to+"说 "+say+"</div>";
$(".contaainer").append(html);
$("#form").val("");
$("#to").val("");
$("#say").val("");
}
</script>
</body>
</html>

效果界面也是不太好看的，但我还是用CSS修饰了一下的也没有猜数字那么难看

输入完后就会在下面出现像这样

七、总结

到这里，我们前端 JS 基础内容就全部结束了。作为后端开发者，我们不需要像前端工程师一样深耕各种框架和复杂特效，只需要掌握 JavaScript 的基础语法、核心逻辑、简单 DOM 操作以及 jQuery 使用，就完全足够支撑我们后续的后端页面开发、接口联调、简单页面编写工作。

本次内容我们从 JS 的三种引入方式入手，分清了行内、内部、外部 JS 的优缺点和使用场景；接着学习了变量、命名规范、基础数据类型、各类运算符，夯实了 JS 的语法基础；然后掌握了数组的增删改查常用方法、自定义函数的定义与调用、JS 对象的三种创建方式，理解了 JS 面向对象的简单思想。

最后我们学习了 jQuery 基础，明白了它是对原生 JS 的封装，简化了 DOM 操作、事件绑定和样式修改，代码更加简洁高效。同时通过猜数字小游戏和简易留言板案例，把前面学的变量、判断、循环、数组、函数、jQuery 操作全部实战落地，做到学以致用。

总的来说，JavaScript 作为前端的核心脚本语言，是前后端交互的关键。掌握这些基础，能让我们后续写页面、调接口、调试代码更加轻松。前端基础到此告一段落，接下来我们就正式进入后端核心内容，开始学习 Spring Boot 框架吧ovo

前端三件套基础之JS！！！！

一、引言

二、JS基础介绍

三、JS的引入方式