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

网页前端开发（基础进阶2--JS）

article 2025/6/5 11:20:49

前面学习了html与css，接下来学习JS（JavaScript与Java无关）。

web标准（网页标准）分为3个部分：

1.html主要负责网页的结构（页面的元素和内容）

2.css主要负责网页的表现（元素的外观，位置等页面样式）

3.js主要负责网页的行为（交互效果）

JavaScript是跨平台，脚本语言（不用编译，直接运行的语言）

JS主要负责控制网页的行为，实现网页的交互效果。

JS的组成（3个部分）

1.ECMAScript：规定了JS基础语法的核心知识，包含：变量，数据类型，流程控制，函数，对象。

2.BOM：浏览器对象模型，用于操作浏览器，如：页面弹窗，地址栏操作。

3.DOM：文档对象模型，用于操作html文档，改变标签内容，改变标签样式。

JS的核心语法

1.JS的引入方法

（1）使用内部脚本：将JS代码定义在html页面中。

JS代码位于<script> </script>标签之间

在html文件中，可在任意地方，放置任意的<script> </script>标签

建议在html文件中，将<script> </script>标签放置在<body>的最下方

示例：

<body>

        ..........

.........

        <script>

                alert（‘hello world’）//弹出一个提示栏，显示hello world

        </script>

</body>

（2）使用外部脚本：新建text.js文件

在text.js文件中写入 alert（‘hello world’）//弹出一个提示栏

在html文件中，引用js文件。<script src=“js/text.js”> </script>

示例：

在text.js文件

alert（‘hello world’）

在html文件中

<body>

..........

.........

<script src=“js/text.js”> </script>

</body>

2.JS的基础语法

（1）声明变量

JS中使用let声明变量，JS是若类型语言，同一变量可存放不同类型的值。

<body>

        ..........

.........

        <script>

let a=20;

a="hello";

                alert（a）//弹出一个提示栏，显示hello

const PI=3.14;//使用const定义变量，定义后变量不可改变

PI=3.2；//报错

        </script>

</body>

（2）数据类型

JS的数据类型分为两种：基本数据类型和引用数据类型(对象)。

基本数据类型有5种，number（数字类型，包含整数，浮点数。NaN），boolear（布尔类型，只有true和false），null（为空），undefined（未初始化），string（字符串类型,推荐使用‘ ’单引号）。

使用typeof可获取变量的数据类型。

<body>

        ..........

.........

        <script>

let name='Tom';

                let age=20;

console.log('你好，我是'+name+',我今年'+age+'岁了。')

                console.log(`你好，我是${name},我今年${age}岁了。`)//可使用` `反引号，对字符串进行拼接，使用${ }。

alert(typeof name); //获取变量name的数据类型，为string（字符串）。

        </script>

</body>

（3）函数 function

函数：执行特定任务的代码块，方便程序的封装复用。

JS中函数的定义

function My(参数1，参数2){

..............
}

示例：

<body>

        ..........

.........

        <script>

  function add(a，b){

                return a+b;
                }

let result=add(10,20);

                console.log(result)

        </script>

</body>

特殊的函数：匿名函数

方法1：

let add=function（a，b）{

return a+b；
        }

方法2：

        let add=（a，b）=>{

return a+b；
        }

（4）自定义对象

定义格式

let user={

        name='Tom'，

        age=20，

gender=‘男’，

sing：function（）{

                        alert(‘我的名字是’+this.name);

                }

}

调用格式：

console.log(user.name);

user.sing();

（5）json

json用于数据载体，用来存储数据。

特点：层次分明，结构简单

JS对象

{

name=“Tom”,

age=20,

gender="男"

}

json文本

{

"name"=“Tom”,

"age"=20,

"gender"="男"

}

JS对象->json文本使用JSON.stringify()进行转换

json文本->JS对象使用JSON.parse()进行转换

示例1

let person={

name=“Tom”,

age=20,

gender="男"

}

alert(person) //弹出框，只能弹出[Object,Object,Object]

alert(JSON.stringify(person)) //弹出框，弹出{"name"=“Tom”,"age"=20,"gender"="男"}

示例2

let personJ='{"name"=“Tom”,"age"=20,"gender"="男"}'

alert(JSON.parse(personJ).name) //弹出Tom

JS的事件监听

事件：HTML事件是发生在HTML元素上的事情。如：按钮被点击，鼠标移动到元素上，按下键盘的按钮。

事件监听：JavaScript可以在事件1-触发时，就立即调用一个函数，做出响应，被称为“事件绑定”或“注册事件”。

事件源：.addEventListener('事件类型'，事件触发时执行的函数)

1.事件源：哪个元素触发事件，就获取哪个元素

2.事件类型：触发事件的类型。如：鼠标点击 click

3.事件触发时，执行的函数

示例1

<body>

        ..........

.........

<input id="bin" type="button" value="点击一下">

        <script>

document.querySelector('#bin').addEventListener('click',()=>{

alert('测试')；

})

        </script>

</body>

示例二

鼠标移动，表格背景颜色改变

<body>

        ..........

.........

        <script>

let trs=document.querySelectorAll('br'); //获取所有tr标签元素

for(let i=0;i<trs.length;i++){

trs[i].addEventListener('moluseenter'.function(){ //鼠标进入

this.style.backgroundColor='#f2e2e2';        //将颜色改为粉色

                        });



                        trs[i].addEventListener('moluseleave'.function(){ //鼠标离开

this.style.backgroundColor='#fff';        //将颜色恢复为白色

                        });

                }

        </script>

</body>

JS常见事件

1.鼠标事件

click 鼠标单击

moluseenter 鼠标进入

moluseleave 鼠标离开

2.键盘事件

keydown 按键按下

keyup 键盘抬起

3.焦点事件

focus 聚焦组件

blur 离焦组件

4.表单事件

input 用户输入

submit 表单提交触发

网页前端开发（基础进阶2--JS）

前面学习了html与css，接下来学习JS（JavaScript与Java无关）。 web标准（网页标准）分为3个部分： 1.html主要负责网页的结构（页面的元素和内容） 2.css主要负责网页的表现（…...

编程日记 2025/6/5 11:20:49

Go 即时通讯系统：客户端与服务端 WebSocket 通信交互

客户端和服务端的交互客户端与服务端建立连接客户端：客户端通过浏览器或者其他应用程序发起一个 HTTP 请求到服务端的 /socket.io 路径。在请求中会携带用户的 UUID 作为参数（通过 c.Query("user") 获取）。 // router/socket.…...

编程日记 2025/6/3 22:45:52

2025年5月AI科技领域周报（5.19-5.25）：大模型多模态突破具身智能开启机器人新纪元

2025年5月AI科技领域周报（5.19-5.25）：大模型多模态突破具身智能开启机器人新纪元目录 2025年5月AI科技领域周报（5.19-5.25）：大模型多模态突破具身智能开启机器人新纪元一、本周热点回顾1. 百度发布全球首…...

编程日记 2025/6/5 5:52:46

某航后缀混淆逆向与顶像风控分析

文章目录 1. 写在前面2. 接口分析3. 加密分析4. 风控分析【🏠作者主页】：吴秋霖【💼作者介绍】：擅长爬虫与JS加密逆向分析！Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致…...

编程日记 2025/6/4 11:48:08

[Protobuf]常见数据类型以及使用注意事项

[Protobuf]常见数据类型以及使用注意事项水墨不写bug 文章目录一、基本数据类型1、字段2、字段的修饰规则二、自定义数据类型1、message类型2、enum类型3、Any类型4、oneof类型5、map类型三、小工具1.hexdump2.decode 四、注意事项一、基本数据类型 protobuf 支持多种基础…...

编程日记 2025/6/4 11:20:01

【C/C++】面试基础题目收集

C 软件开发面试中常见的刷题题目通常可分为以下几大类：数据结构与算法、系统编程、面向对象设计、C 语言特性、并发编程等。 🧠 一、数据结构与算法（力扣/牛客经典题） 掌握 STL 和底层结构实现能力： 📌 数…...

编程日记 2025/6/6 6:57:45

模拟实现线程池(线程数目为定值)和定时器

前言昨天学习关于定时器的相关知识。今天花时间去模拟实现了一个定时器，同时也去模拟实现了一个线程池(线程数目为定值)。我感觉我收获了很多，对于线程的理解加深了。跟大家分享一下~ 线程池和定时器(这个是主要)的实现代码线程池 import java.ut…...

编程日记 2025/6/3 22:00:39

数据结构之队列实验

引言在计算机科学中，进制转换是基础但重要的操作。例如将一个十进制数转换为二进制或八进制表示时，我们通常使用“短除法”——即不断用目标进制去除当前数，记录余数，直到商为0为止。这种方法得到的是低位先产生的结果&#x…...

编程日记 2025/6/5 5:16:15

Java求职者面试题详解：计算机网络、操作系统、设计模式与数据结构

Java求职者面试题详解：计算机网络、操作系统、设计模式与数据结构第一轮：基础概念问题 1. 请解释什么是HTTP协议？ HTTP（HyperText Transfer Protocol）是一种用于传输超文本的协议，它定义了客户端和服务…...

编程日记 2025/6/5 8:52:45

每日八股文6.1

每日八股-6.1 Go1.Sync.map的底层实现2.结构体的tag如何获取？3.Go实现单例模式（使用sync.Once）4.Go实现单例模式（不使用sync.Once）5.make和new的区别6.Go项目引用包为什么用_以及包的init()函数7.如何判断一个结构体是…...

编程日记 2025/6/6 2:32:29

【Ubuntu】摸鱼技巧之虚拟机环境复制

前言提示：所有的操作都需要关闭虚拟机如何快速在其它电脑布置，linux环境，如果我们有一个环境直接拷贝就有时间摸鱼呀。 1.直接复制简单粗暴不做赘述，如果不会复制，那么请右击鼠标压缩复制 2.克隆虚拟机 2.1 …...

编程日记 2025/6/5 13:23:21

室内VR全景助力房产营销及装修

在当今的地产行业，VR全景已成为不可或缺的应用工具。从地产直播到楼市VR地图，从效果图到水电家装施工记录，整个地产行业的上下游生态中，云VR全景的身影无处不在。本文将探讨VR全景在房产营销及装修领域的应用，并介绍众…...

编程日记 2025/6/5 4:40:00

jenkins集成gitlab实现自动构建

jenkins集成gitlab实现自动构建前面我们已经部署了Jenkins和gitlab，本文介绍将二者结合使用项目源码上传至gitee提供公网访问：https://gitee.com/ye-xiao-tian/my-webapp 1、创建一个群组和项目 2、添加ssh密钥 #生成密钥 [rootgitlab ~]# ssh-keyge…...

编程日记 2025/6/6 4:04:30

【C语言练习】070. 编写代码处理C语言中的异常情况

070. 编写代码处理C语言中的异常情况 070. 编写代码处理C语言中的异常情况C语言异常处理的基本思路返回值检查示例errno使用示例setjmp/longjmp示例最佳实践建议1. 使用返回值检查错误2. 使用全局变量记录错误状态3. 使用回调函数或信号处理程序4. 使用`setjmp`和`longjmp`示例…...

编程日记 2025/6/5 6:42:43

Java基本数据类型、抽象类和接口、枚举、时间类、String类全面介绍

JAVA基本数据类型知识总结基本数据类型（Primitive Types） 类型占用字节默认值范围示例byte10-128 ~ 127byte a 100;short20-32,768 ~ 32,767short b 2000;int40-2 ~ 2-1int c 100000;long80L-2⁶ ~ 2⁶-1long d 10000000000L;float40.0f~7位小数f…...

编程日记 2025/6/4 4:22:10

Spring Boot微服务架构（八）：开发之初就引入APM工具监控

使用 APM（Application Performance Management）工具监控 Spring Boot 应用，可以帮助开发者实时追踪性能瓶颈、分析调用链路、监控资源使用情况，并快速定位故障。以下是详细的步骤和常用工具的选择指南： 一、常用 A…...

编程日记 2025/6/5 13:28:13

大规模真实场景 WiFi 感知基准数据集

一段话总结本文提出CSI-Bench，首个大规模真实场景WiFi感知基准数据集，覆盖26个室内环境、35名用户、16种商用设备，包含461小时有效数据，支持跌倒检测、呼吸监测、定位、运动源识别等单任务及用户身份、活动、 proximity联合标注的多任务学习。通过标准化评估协议和基线模…...

编程日记 2025/6/5 4:13:42

Python实现HPSO-TVAC优化算法优化支持向量机SVC分类模型项目实战

说明：这是一个机器学习实战项目（附带数据代码文档），如需数据代码文档可以直接到文章最后关注获取。 1.项目背景在当今数据驱动的时代，支持向量机（SVM）作为一种经典的机器学习算法，…...

编程日记 2025/6/5 4:49:23

ck-editor5的研究 (3)：初步使用 CKEditor5 的事件系统和API

前言在上一篇文章中—— ck-editor5的研究（2）：对 CKEditor5 进行设计，并封装成一个可用的 vue 组件 ，我已经把 CKEditor5 封装成了一个通用vue组件，并且成功在nuxt中运行，并具备一定的通用性&…...

编程日记 2025/6/4 23:47:00

使用ReactNative加载HarmonyOS Svga动画

这是一款使用ReactNative 加载HarmonyOS Svga动画的播放器插件三端Svga动画统一使用点击这里版本：v1.1.5 react-native-ohos-svgaplayer [!TIP] Github 地址安装与使用 npm npm install react-native-ohos-svgaplayer yarn yarn add react-native-ohos-svgaplayer下面…...

编程日记 2025/6/6 0:28:25

WPS快速排版

论文包括（按顺序）：封面（含题目）、摘要、关键词、Abstract（英文摘要）、Keywords、目录、正文、参考文献、在读期间发表的学术论文及研究成果，致谢题目（黑小一加粗&…...

编程日记 2025/6/3 22:29:22

Java实现命令行图书管理系统（附完整源码）

一、项目概述本文将介绍如何使用Java实现一个基于命令行的图书管理系统。系统支持管理员和普通用户两种角色，提供图书的增删改查、借阅归还等功能。项目采用面向对象设计原则，代码结构清晰，适合Java初学者学习。二、系统功能架构 graph T…...

编程日记 2025/6/5 16:33:49

使用Docker-NVIDIA-GPU开发配置:解决 Docker NVIDIA 运行时错误方法

问题描述运行 Docker 命令时，系统提示 docker: Error response from daemon: unknown or invalid runtime name: nvidia，表明 Docker 无法识别 NVIDIA 运行时。这一错误通常出现在使用 --runtime=nvidia 和 --gpus 参数时，意味着 NVIDIA 容器运行时未正确安装或配置。NVID…...

编程日记 2025/6/5 4:00:05

如何更好的理解云计算和云原生？

本文介绍什么是云计算、什么是云原生、怎么理解云相关概念，如有问题，欢迎指正。一、云计算定义：云计算是通过互联网（即“云”）按需提供计算资源（如服务器、存储、数据库、网络、软件等）的服…...

编程日记 2025/6/4 7:52:43

【数据结构】顺序表和链表详解(上)

前言：上期我们介绍了算法的复杂度，知道的算法的重要性同时也了解到了评判一个算法的好与坏就去看他的复杂度(主要看时间复杂度)，这一期我们就从顺序表和链表开始讲起。文章目录一，顺序表1，线性表2，顺序表…...

编程日记 2025/6/5 2:29:59

唯创WT2606B TFT显示灵动方案，重构电子锁人机互动界面，赋能智能门锁全场景交互!

在智能家居的浪潮中，门锁搭载显示屏已成为行业创新的焦点。据行业数据显示，2023年全球智能门锁出货量中，搭载显示屏的型号占比已突破40%，且年复合增长率达25%。而2024年国内智能门锁销量突破2200万套，预计2025年市场规…...

编程日记 2025/6/4 17:36:44

WPF的UI交互基石：数据绑定基础

数据绑定基础 1 Binding的Path属性2 ElementName绑定3 DataContext的作用4 绑定模式（Binding Mode）5 实用技巧集合1. 默认值处理2. 设计时数据3. 绑定验证4. 多级路径监控 6 常见错误排查数据绑定是WPF的核心特性之一，它实现了界面&#xff…...

编程日记 2025/6/3 21:19:24

智能穿戴新标杆：SD NAND （贴片式SD卡）与 SOC 如何定义 AI 眼镜未来技术路径

目录一、SD NAND：智能眼镜的“记忆中枢”突破空间限制的存储革命性能与可靠性的双重保障二、SOC芯片：AI眼镜的“智慧大脑”从性能到能效的全面跃升多模态交互的底层支撑三、SD NANDSOC：11＞2的协同效应数据流水线的高效协同端侧…...

编程日记 2025/6/5 4:47:19

TCP/IP四层模型

TCP/IP四层模型 TCP/IP四层模型将网络通信分为四个层次： 1. 网络接口层：负责计算机与网络硬件间的数据传输，在物理网络上发送/接收数据帧（如以太网、Wi-Fi协议）。 2. 互联网层（网络层）&…...

编程日记 2025/6/4 11:18:10

深入浅出Nacos：微服务架构中的服务发现与配置管理利器

在当今的软件开发领域，随着微服务架构的普及，如何有效地进行服务治理和服务配置管理成为了开发者面临的重要挑战之一。阿里巴巴开源的 Nacos（Dynamic Naming and Configuration Service）应运而生，旨在帮助开发者更轻松地构建云原生应用。本文将详细介绍 Nacos 的核心功能、…...

编程日记 2025/6/4 12:19:03