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

一、引言

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

二、JS基础介绍

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

三、JS的引入方式

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

首先是行内样式

html 复制代码

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

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

然后是内部样式

html 复制代码

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

最后是外部样式

html 复制代码

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

javascript 复制代码

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

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

四、JS基础语法

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

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

javascript 复制代码

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

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

javascript 复制代码

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的数组有两种创建方式，这里直接用代码介绍

javascript 复制代码

//第一种
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这些也差不多语法格式就是这样

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

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

javascript 复制代码

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

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

4.6 对象

JS也是有对象这一概念的在 JS 中, 字符串, 数值, 数组, 函数都是对象. 每个对象中包含若⼲的属性和⽅法。
JavaScript 的对象和 Java 的对象概念上基本⼀致. 只是具体的语法表项形式差别较⼤，JS有三种方法来创建对象。
第一张可以使用{}来创建对象

javascript 复制代码

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

简单来说就是这几点：使⽤ { } 创建对象
属性和⽅法使⽤键值对的形式来组织.
键值对之间使⽤ , 分割. 最后⼀个属性后⾯的 , 可有可⽆
键和值之间使⽤ : 分割.
⽅法的值是⼀个匿名函数。
想使用对象的属性和方法和Java也很相似

javascript 复制代码

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

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

javascript 复制代码

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();

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

javascript 复制代码

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

值得注意：
1.在构造函数内部使⽤ this 关键字来表⽰当前正在构建的对象.
2.构造函数的函数名⾸字⺟⼀般是⼤写的.
3.构造函数的函数名可以是名词.
4.构造函数不需要 return
5.创建对象的时候必须使⽤ new 关键字。
下面用构造函数来创建一个猫的对象

javascript 复制代码

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 文件下载到项目文件夹中使用。

javascript 复制代码

<script src="jquery.min.js"></script>

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

javascript 复制代码

$(选择器).方法()

$：jQuery 的核心符号，等价于**jQuery()**
选择器：和 CSS 选择器用法一致，用来选中页面标签
为了让大家直观的感受一下jQuery带来的便利放一段jQuery和原生JS的比较

javascript 复制代码

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

jQuery 四大核心特性

强大的选择器：支持 CSS 全部选择器，快速选中任意页面元素
隐式迭代：自动遍历匹配到的一组元素，不需要手动书写 for 循环
链式编程：同一个对象可以连续调用多个方法，代码更加简洁
丰富 API：内置显示隐藏、滑动、淡入淡出动画，封装极简的 Ajax 接口，同时拥有海量第三方插件

下面是简单的实例演示

javascript 复制代码

$(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 越来越少；但是很多老旧后台管理系统、传统网页项目依然大量使用，掌握它可以快速维护传统前端页面。

五、猜数字

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

html 复制代码

<!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去修饰

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

六、留言板

也是直接给代码

html 复制代码

<!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