前端三件套基础之JS！！！！- 惊觉

一、引言

这一期也是前端内容的最后一期了，作为后端人员目前会这些也可以了下一期我会为大家带来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 文件下载到项目文件夹中使用。

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

在运行的时候就会自动下载了， 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

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/2501_93705143/article/details/164430920

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