网页前端开发（基础进阶2）
前面学习了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可以在事件触发时，就立即调用一个函数，做出响应，被称为“事件绑定”或“注册事件”。
事件源：.addEventListener('事件类型'，事件触发时执行的函数)
1.事件源：哪个元素触发事件，就获取哪个元素
2.事件类型：触发事件的类型。如：鼠标点击 click
3.事件触发时，执行的函数
示例
<body>
..........
.........
<input id="bin" type="button" value="点击一下">
<script>
document.querySelector('#bin').addEventListener('click',()=>{
alert('测试')；
})
</script>
</body>
相关文章：
网页前端开发（基础进阶2）
前面学习了html与css，接下来学习JS（JavaScript与Java无关）。 web标准（网页标准）分为3个部分： 1.html主要负责网页的结构（页面的元素和内容） 2.css主要负责网页的表现（…...
简历制作要精而不简
不得不说，不管是春招，还是秋招，我们在求职时，第一步便是制作一份简历。不得不承认，好的简历，就像一块敲门砖，能让面试官眼前一亮，让应聘成功的概率增添一分。 对于一个初次求职者来…...
SPA-RL：通过Stepwise Progress Attribution训练LLM智能体
SPA-RL：通过Stepwise Progress Attribution训练LLM智能体 在大语言模型（LLM）驱动智能体发展的浪潮中，强化学习（RL）面临着延迟奖励这一关键挑战。本文提出的SPA-RL框架，通过创新的分步进度归因机…...
【深度学习】9. CNN性能提升-轻量化模型专辑：SqueezeNet / MobileNet / ShuffleNet / EfficientNet
SqueezeNet / MobileNet / ShuffleNet / EfficientNet 一、背景与动机 随着深度神经网络在图像识别任务上取得巨大成功，它们的结构越来越深、参数越来越多。然而在移动端或嵌入式设备中： 存储资源有限推理计算能力弱能耗受限 因此，研究者…...
Relational Algebra（数据库关系代数）
目录 What is an “Algebra” What is Relational Algebra? Core Relational Algebra Selection Projection Extended Projection Product（笛卡尔积） Theta-Join Natural Join Renaming Building Complex Expressions Sequences of Assignm…...
【C/C++】面试常考题目
面试中最常考的数据结构与算法题，适合作为刷题的第一阶段重点。 ✅ 分类 & 推荐题目列表（精选 70 道核心题） 一、数组 & 字符串（共 15 题） 题目类型LeetCode编号两数之和哈希表#1盛最多水的容器双指针#11三数…...
Chorme如何对于youtube视频进行画中画背景播放？
画中画可以让你小窗播放，然后浏览器放后台还可以做点别的事情。 B站直接可以选择小窗播放，游览器最小化就可以，但是youtube的小窗播放游览器一切换就不显示了。 其实是因为youtube的小窗播放不是真的小窗播放。要想真的实现需要在youtube视…...
017搜索之深度优先搜索——算法备赛
深度优先搜索 如果说广度优先搜索是逐层扩散，那深度优先搜索就是一条道走到黑。 深度优先遍历是用递归实现的，预定一条顺序规则（如上下左右顺序） ，一直往第一个方向搜索直到走到尽头或不满足要求后返回上一个叉路口按…...
从单机到集群，再到分布式，再到微服务
我会尽量详细讲解，从单机到集群，再到分布式和微服务每个层次的概念、特点和应用场景。同时也会探讨C是否适合做微服务项目。 一、从单机到集群，再到分布式，再到微服务——详细解析 1. 单机（Single Machine）…...
关于ios点击分享自动复制到粘贴板的问题
前言 Android 系统没有什么特别的要求，实现这个也比较容易。但ios在某些情况下就会出现问题。 如果ios是点击之后，请求接口，再把接口的内容赋值给粘贴板肯定行不通，会被ios系统拦截，导致赋值失败或者赋值为空。建议使…...
Hive的JOIN操作如何优化？
Hive的JOIN操作优化是提升查询性能的关键，尤其是在处理大数据量时。以下是详细的JOIN优化策略和实现方法： 一、MapJoin（小表广播优化） 核心原理 将小表全量加载到每个MapTask的内存中，避免Shuffle，直接在…...
React Native 实现抖音式图片滑动切换浏览组件-媲美抖音体验的滑动式流畅预览组件
写在前面 “如何让用户像刷抖音一样浏览我们的图片列表？” —— 这个需求背后隐藏着性能、体验和交互设计的多重挑战。本文将带你从零实现一个高性能的React Native图片浏览器，支持分页预加载、横向滑动预览、文字展示和缓存优化，打造媲美原…...
睿抗机器人开发者大赛CAIP-编程技能赛-历年真题 解题报告汇总 | 珂学家
前言 汇总 睿抗机器人开发者大赛CAIP-编程技能赛-历年真题 解题报告汇总 2024年 2024 睿抗机器人开发者大赛CAIP-编程技能赛-本科组 (国赛) 解题报告 2024 睿抗机器人开发者大赛CAIP-编程技能赛-本科组（省赛）解题报告 2024 睿抗机器人开发者大赛CAI…...
【c++】【数据结构】AVL树
目录 AVL树的定义AVL树的部分模拟实现平衡因子的引入平衡因子的向上调整旋转算法单旋算法右单旋左单旋 双旋算法左右双旋右左双旋 AVL树的定义 AVL树本质是一种搜索二叉树，传统的二叉搜索树我们都有所了解，其在理想情况下也就是接近满二叉树时拥有极高的…...
【原神 × 插入排序】刷圣遗物也讲算法：圣遗物评分系统背后的排序逻辑你真的懂吗？
📘 改编自：王争《数据结构与算法之美》 🎮 游戏演绎：米哈游《原神》 🧠 核心关键词：插入排序、排序算法、评分系统、属性评价、强化圣遗物、冒泡排序对比 🧭 引言：原神刷本=刷排序？ 玩《原神》的玩家每天日常是啥？体力用来刷圣遗物、精通头、暴击头、攻充沙………...
ORB-SLAM2学习笔记：ExtractorNode::DivideNode和ORBextractor::DistributeOctTree函数详解
一、ExtractorNode::DivideNode void ExtractorNode::DivideNode(ExtractorNode &n1, ExtractorNode &n2, ExtractorNode &n3, ExtractorNode &n4) {const int halfX = ceil(static_cast<float>(UR.x-UL.x)/2);const int halfY = ceil(static_cast<f…...
nt!MmMapViewInSystemCache函数分析PointerPte的填充
第一部分： 1: kd> kc # 00 nt!MmMapViewInSystemCache 01 nt!CcGetVacbMiss 02 nt!CcGetVirtualAddress 03 nt!CcMapData 04 Ntfs!NtfsMapStream 05 Ntfs!NtfsReadBootSector 06 Ntfs!NtfsMountVolume 07 Ntfs!NtfsCommonFileSystemControl 08 Ntfs!NtfsFspDis…...
)
3D Tiles高级样式设置与条件渲染(3)
二、基于地理距离的条件渲染 1.根据与特定点的距离设置样式 在某些应用中，我们可能需要根据建筑物与某个特定点（如地标建筑）的距离来设置样式。以下代码示例展示了如何根据建筑物与广州塔的距离来设置颜色和可见性： tiles3d.styl…...
通义灵码深度实战测评：从零构建智能家居控制中枢，体验AI编程新范式
一、项目背景：零基础挑战全栈智能家居系统 目标：开发具备设备控制、环境感知、用户习惯学习的智能家居控制中枢（PythonFlaskMQTTReact） 挑战点： 需集成硬件通信(MQTT)、Web服务(Flask)、前端交互(React) 调用天气AP…...
头歌之动手学人工智能-Pytorch 之优化
目录 第1关：如何使用optimizer 任务描述 编程要求 测试说明 真正的科学家应当是个幻想家；谁不是幻想家，谁就只能把自己称为实践家。 —— 巴尔扎克开始你的任务吧，祝你成功！ 第2关：optim.SGD 任务描述…...
基于谷歌ADK的智能客服系统简介
Google的智能体开发工具包（Agent Development Kit，简称ADK）是一个开源的、以代码为中心的Python工具包，旨在帮助开发者更轻松、更灵活地构建、评估和部署复杂的人工智能智能体（AI Agent）。ADK 是一个灵活的…...
（一）视觉——工业相机（以海康威视为例）
一、工业相机介绍 工业相机是机器视觉系统中的一个关键组件，其最本质的功能就是将光信号转变成有序的电信号。选择合适的相机也是机器视觉系统设计中的重要环节，相机的选择不仅直接决定所采集到的图像分辨率、图像质量等，同时也与整个系统的运…...
DAY 36 超大力王爱学Python
仔细回顾一下神经网络到目前的内容，没跟上进度的同学补一下进度。 作业：对之前的信贷项目，利用神经网络训练下，尝试用到目前的知识点让代码更加规范和美观。探索性作业（随意完成）：尝试进入nn.Mo…...
基于React + TypeScript构建高度可定制的QR码生成器
前言 在现代Web应用中，QR码已成为连接线上线下的重要桥梁。本文将详细介绍如何使用React TypeScript Vite构建一个功能强大、高度可定制的QR码生成器，支持背景图片、文本叠加、HTML模块、圆角导出等高级功能。 前往试试 项目概述 技术栈 前端框架:…...
DeepSeek进阶教程：实时数据分析与自动化决策系统
进阶教程：实时数据分析与自动化决策系统 1. 实时数据流处理架构 class StreamProcessor:def __init__(self):self.window_size = 60 # 滑动窗口大小(秒)self.analytics_engine = AnalyticsEngine() # 复用之前的分析引擎def process_kafka_stream(self, topic):"&quo…...
visual studio 2022 初学流程
本文采用总-分的形式讲述流程 1.前端外部可以使用的接口 ExternalDataWebService.asmx?opReportWaterForWayder 新建ExternalDataWebService.asmx 文件 <% WebService Language"C#" CodeBehind"~/App_Code/ExternalDataWebService.cs" Class…...
SRD-12VDC-SL-C 继电器接线图解
这个继电器可以使用12伏的直流电源控制250伏和125伏的交流电，也可以控制30伏和28伏的直流电，电流都为10安。 此继电器有5个引脚，各个的作用如下： 引脚4和引脚5为触点， 引脚1和引脚3为线圈引脚，接12伏的直…...
基于开源链动2+1模式AI智能名片S2B2C商城小程序的企业组织生态化重构研究
摘要：本文以互联网时代企业组织结构变革为背景，探讨开源链动21模式AI智能名片S2B2C商城小程序在推动企业从封闭式向开放式生态转型中的核心作用。通过分析传统企业资源获取模式与网络化组织生态的差异，结合开源链动21模式的裂变机制、AI智能名…...
前端面经 两栏布局
两栏布局 float实现 1.给父盒子加float:hidden实现BFC 2.给左盒子加浮动float:left 给宽度 flex布局 1父盒子 display:flex 2左盒子 固定宽度 3.右盒子 flex:1 三栏布局 法1：浮动实现 1 父盒子overflow:hidden 实现BFC 2左盒子:float:left 3右盒子 :floa…...
2，QT-Creator工具创建新项目教程
目录 1，创建一个新项目 demo_01.pro（项目配置文件） 类似 CMakeList.txt widget.h（头文件） main.cpp（程序入口） widget.cpp（源文件） widget.ui（界面设计文件） 1，创建一个新项目 依次选择： 设置路径： 选择编译器： 如果选择CMake, 就会生成cmakel…...