[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript
目录
一 特色
二 收获编辑
三 什么是web?
四 网站的工作流程
五 web网站的开发模式编辑
六 web开发课程学习安排
七、初始web前端
八 HTML、CSS
8.1 什么是HTNL\CSS(w3cschool)
8.2 HTML快速入门
8.3 VS Code开发工具
8.3.1 插件
8.3.2 主题（改变颜色）
8.3.3 设置
8.4 基础标签&样式
8.4.1 标题排版
8.4.1.1分析：
8.4.2.2 编码开始：
8.4.2.3 总结编辑
8.4.2 标题样式1- css样式控制
8.4.2.1 分析
8.4.2.2 编码开始
8.4.2.3 总结
8.4.3 标题样式2- css样式控制
8.4.3.1 分析编辑
8.4.3.2 编码开始
8.4.4 超链接
8.4.4.1 分析
8.4.4.2编码开始
8.4.4.3 总结
8.4.5 正文排名
8.4.5.1 分析
8.4.5.2 编码开始
8.4.5.3 总结
8.4.6 页面布局
8.4.6.1 分析
8.4.6.2 编码开始
8.4.6.3 总结
8.5 表格标签
8.5.1 表格
8.5.2 编码开始
8.5.3 总结
8.6 表单标签
8.6.1 表单标签
8.6.1.1 分析 编辑
8.6.1.2 编码开始
8.6.1.3 总结
8.6.2 表单项标签
8.6.2.1 分析
8.6.2.2 编码开始
8.6.2.3 总结
九 JavaScript
9.1 什么是JavaScript
9.2 js引入方式
9.3 js基础语法
9.3.1 书写语法&& 输出语句
9.3.2 变量
9.3.2.1 全局 var
9.3.2.2 局部 let
9.3.2.3 常量 const
9.3.3 数据类型
9.3.4 运算符
9.3.5 流程控制语句
9.4 js函数
9.5 js对象
9.5.1 Array数组
9.5.2 String字符串
9.5.3 JSON
9.5.4 BOM
9.5.5 DOM
9.5.5.1 DOM
9.5.5.2 案例
9.6 js事件监听
9.6.1 事件绑定
9.6.2 常见事件
9.6.3 案例
前言：跟着老师学开发，本课程主要以后端开发为主，加油.前端包含html、css、javascript
一 特色
二 收获
三 什么是web?
四 网站的工作流程
五 web网站的开发模式
六 web开发课程学习安排
七、初始web前端
八 HTML、CSS
8.1 什么是HTNL\CSS(w3cschool)
8.2 HTML快速入门
8.3 VS Code开发工具
8.3.1 插件
1 Chinese (Simplified) Language Pack for Visual Studio Code（中文语言包）2 Code Spell Checker3 HTML CSS Support4 JavaScript(ES6) code code snippets5 Mithril Emmet6 Path Intellisense7 Vue 3 Snippets8 VueHelper9 Auto Close Tag10 Auto Rename Tag11 Beautify （停止维护了）12 Bracket Pair Colorizer（提示已内置于vscode 有人推荐Bracket Pair Colorizer 2）13 open in browser14 Vetur15 IntelliJ IDEA Keybindings=====自己16 Duplicate action # 右击文件复制8.3.2 主题（改变颜色）
8.3.3 设置
改变字体大小等
8.4 基础标签&样式
8.4.1 标题排版
8.4.1.1分析：
8.4.2.2 编码开始：
选择自己设置的文件夹VSCODEWORK,
新建一个文件01.新浪新闻-标题排版.html
输入 ！ + Enter 一键生成初始化标签
加注释，ctrl + / 同IDEA (前面装插件实现的)
<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集为UTF-8 --><meta charset="UTF-8"><!-- 设置浏览器兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
<body><!-- img标签：src： 图片的资源路径width： 宽度 (px ,像素； % ，相对于父元素的百分比)height： 高度 (px ,像素； % ，相对于父元素的百分比)height： 高度 --> <!-- 路径的指定方式：1 绝对路径：1.1 绝对磁盘路径1.2 绝对网络路径：https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png2 相对路径：./ ：当前目录 ./ 可以省略../ ： 上一级目录 --><img src="img/news_logo.png"> 新浪政务 > 正文<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1><hr>2023年08月15日 23:30 新华社<hr></body>
</html>
8.4.2.3 总结
8.4.2 标题样式1- css样式控制
8.4.2.1 分析
8.4.2.2 编码开始
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>访谈：底气 新思想夯实大国粮仓</title><!-- 方式二：内嵌样式 --><style>h1 {/* color: red; *//* color: rgb(255, 0, 0); *//* color: #ff0000; */color: #4D4F53;}</style><!-- 方式三：外联样式 --><!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body><img src="img/news_logo.png"> 新浪政务 > 正文<!-- 方式一：行内样式 --><!-- <h1 style="color: red;">访谈：底气 新思想夯实大国粮仓</h1> --><!-- 与上面方式二配合 --><h1>访谈：底气 新思想夯实大国粮仓</h1> <!-- 使用方式三 --><!-- <h1>访谈：底气 新思想夯实大国粮仓</h1> --><hr>2023年08月15日 23:30 菠菜社<hr></body>
</html>
8.4.2.3 总结
8.4.3 标题样式2- css样式控制
8.4.3.1 分析
8.4.3.2 编码开始
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>访谈：底气 新思想夯实大国粮仓</title><!-- 方式二：内嵌样式 --><style>h1 {/* color: red; *//* color: rgb(255, 0, 0); *//* color: #ff0000; */color: #4D4F53;}/* 元素选择器 *//* span {color: #968d92;} *//* 类选择器 *//* .cls {color: #968d92;} *//* ID选择器 */#time {color: #968d92;font-size: 13px; /*设置字体大小 */</style><!-- 方式三：外联样式 --><!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body><img src="img/news_logo.png"> 新浪政务 > 正文<!-- 方式一：行内样式 --><!-- <h1 style="color: red;">焦点访谈：底气 新思想夯实大国粮仓</h1> --><!-- 与上面方式二配合 --><h1>焦点访谈：底气 新思想夯实大国粮仓</h1> <!-- 使用方式三 --><!-- <h1>访谈：底气 新思想夯实大国粮仓</h1> --><hr><span class="cls" id="time">2023年08月15日 23:30</span> <span>菠菜社</span><hr></body>
</html>
8.4.3.3 总结
8.4.4 超链接
8.4.4.1 分析
8.4.4.2编码开始
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>访谈：底气 新思想夯实大国粮仓</title><!-- 方式二：内嵌样式 --><style>h1 {/* color: red; *//* color: rgb(255, 0, 0); *//* color: #ff0000; */color: #4D4F53;}/* 元素选择器 *//* span {color: #968d92;} *//* 类选择器 *//* .cls {color: #968d92;} *//* ID选择器 */#time {color: #968d92;font-size: 13px;}a {color: black;text-decoration: none; /* 设置文本为一个标准的文本 */}</style><!-- 方式三：外联样式 --><!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body><img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文<!-- 方式一：行内样式 --><!-- <h1 style="color: red;">焦点访谈：底气 新思想夯实大国粮仓</h1> --><!-- 与上面方式二配合 --><h1>访谈：底气 新思想夯实大国粮仓</h1> <!-- 使用方式三 --><!-- <h1>访谈：底气 新思想夯实大国粮仓</h1> --><hr><span class="cls" id="time">2023年08月15日 23:30</span> <span> <a href="http://www.news.cn/2023-07/25/c_1129767980.htm" target="_blank">菠菜社</a></span><hr></body>
</html>
8.4.4.3 总结
8.4.5 正文排版
8.4.5.1 分析
8.4.5.2 编码开始
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气 新思想夯实大国粮仓</title><!-- 方式二：内嵌样式 --><style>h1 {/* color: red; *//* color: rgb(255, 0, 0); *//* color: #ff0000; */color: #4D4F53;}/* 元素选择器 *//* span {color: #968d92;} *//* 类选择器 *//* .cls {color: #968d92;} *//* ID选择器 */#time {color: #968d92;font-size: 13px;}a {color: black;text-decoration: none; /* 设置文本为一个标准的文本 */}p {text-indent: 35px; /* 设置首行缩进 */line-height: 40px; /* 设置行高 */}#plast {text-align: right; /* 对齐方式 */}</style><!-- 方式三：外联样式 --><!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body><img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文<!-- 方式一：行内样式 --><!-- <h1 style="color: red;">焦点访谈：中国底气 新思想夯实大国粮仓</h1> --><!-- 与上面方式二配合 --><h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1> <!-- 使用方式三 --><!-- <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1> --><hr><span class="cls" id="time">2023年08月15日 23:30</span> <span> <a href="http://www.news.cn/2023-07/25/c_1129767980.htm" target="_blank">央视网</a></span><hr><!-- 正文 --><!-- 视频 --><video src="video/1.mp4" controls width="950px"></video><!-- 音频 --><!-- <audio src="audio/1.mp3" controls></audio> --><p><strong>央视网消息</strong>（焦点访谈）：党中央始终把解决粮食安全问题作为治国理政的头等大事，重农抓粮一系列政策举措有力有效，我国粮食产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？</p><br><p>人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。</p><img src="img/1.jpg"><p>今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。</p><img src="img/2.jpg"><p>国务院发展研究中心农村经济研究部部长叶兴庆：“我们研究粮食安全的人有一个概念，1000亿斤是一个台阶，这就是说我们用十年时间使粮食产量上了一个半台阶。这是在化肥和农药开始减量的情况下取得的，是在极端天气事件多发、频发的情况下取得的，是在从事农业生产的人口减少的条件下取得的，这在中国粮食生产发展历史中是一个了不起的成就。”</p><p>国家仓廪充实，为经济社会行稳致远夯实了根基。14亿人口要吃饭，这是中国最大的国情。党的十八大以来，书记四次出席中央农村工作会议并发表重要讲话，对“三农”工作和粮食生产、粮食安全作出一系列重要指示。2013年12月召开的中央农村工作会议上，书记把“确保我国粮食安全”放在首位。</p><img src="img/3.jpg"><p>中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。在以同志为核心的党中央坚强领导下，亿万中国人民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“国之大者”，把中国人的饭碗牢牢端在自己手中，夯实中国式现代化基础。</p><p id="plast">责任编辑： 王树淼 SN242</p></body>
</html>
8.4.5.3 总结
8.4.6 页面布局
8.4.6.1 分析
8.4.6.2 编码开始
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气 新思想夯实大国粮仓</title><!-- 方式二：内嵌样式 --><style>h1 {/* color: red; *//* color: rgb(255, 0, 0); *//* color: #ff0000; */color: #4D4F53;}/* 元素选择器 *//* span {color: #968d92;} *//* 类选择器 *//* .cls {color: #968d92;} *//* ID选择器 */#time {color: #968d92;font-size: 13px;}a {color: black;text-decoration: none; /* 设置文本为一个标准的文本 */}p {text-indent: 35px; /* 设置首行缩进 */line-height: 40px; /* 设置行高 */}#plast {text-align: right; /* 对齐方式 */}#center {width: 65%;/* margin: 0% 17.5% 0% 17.5% ; 外边距 上 右 下 左 */margin: 0 auto; /* 外边距 上 下 0 左右自动计算 */}</style><!-- 方式三：外联样式 --><!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body><div id="center"> <img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文<!-- 方式一：行内样式 --><!-- <h1 style="color: red;">焦点访谈：中国底气 新思想夯实大国粮仓</h1> --><!-- 与上面方式二配合 --><h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1><!-- 使用方式三 --><!-- <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1> --><hr><span class="cls" id="time">2023年08月15日 23:30</span> <span> <a href="http://www.news.cn/2023-07/25/c_1129767980.htm"target="_blank">央视网</a></span><hr><!-- 正文 --><!-- 视频 --><video src="video/1.mp4" controls width="950px"></video><!-- 音频 --><!-- <audio src="audio/1.mp3" controls></audio> --><p><strong>央视网消息</strong>（焦点访谈）：党中央始终把解决粮食安全问题作为治国理政的头等大事，重农抓粮一系列政策举措有力有效，我国粮食产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？</p><br><p>人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。</p><img src="img/1.jpg"><p>今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。</p><img src="img/2.jpg"><p>国务院发展研究中心农村经济研究部部长叶兴庆：“我们研究粮食安全的人有一个概念，1000亿斤是一个台阶，这就是说我们用十年时间使粮食产量上了一个半台阶。这是在化肥和农药开始减量的情况下取得的，是在极端天气事件多发、频发的情况下取得的，是在从事农业生产的人口减少的条件下取得的，这在中国粮食生产发展历史中是一个了不起的成就。”</p><p>国家仓廪充实，为经济社会行稳致远夯实了根基。14亿人口要吃饭，这是中国最大的国情。党的十八大以来，书记四次出席中央农村工作会议并发表重要讲话，对“三农”工作和粮食生产、粮食安全作出一系列重要指示。2013年12月召开的中央农村工作会议上，书记把“确保我国粮食安全”放在首位。</p><img src="img/3.jpg"><p>中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。在以同志为核心的党中央坚强领导下，亿万中国人民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“国之大者”，把中国人的饭碗牢牢端在自己手中，夯实中国式现代化基础。</p><p id="plast">责任编辑： 王树淼 SN242</p></div></body>
</html>
8.4.6.3 总结
8.5 表格标签
8.5.1 表格
8.5.2 编码开始
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表格</title><style>td {text-align: center; /* 单元格内容居中展示 */}</style>
</head>
<body><table border="1px" cellspacing="0" width="600px"><tr><th>序号</th><th>品牌Logo</th><th>品牌名称</th><th>企业名称</th></tr><tr><td>1</td><td> <img src="img/huawei.jpg" width="100px"> </td><td>华为</td><td>华为技术有限公司</td></tr><tr><td>2</td><td> <img src="img/alibaba.jpg" width="100px"> </td><td>阿里</td><td>阿里巴巴集团控股有限公司</td></tr></table></body>
</html>8.5.3 总结
8.6 表单标签
8.6.1 表单标签
8.6.1.1 分析 
8.6.1.2 编码开始
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表单</title>
</head>
<body><!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.--> <form action="" method="post">用户名: <input type="text" name="username">年龄: <input type="text" name="age"><input type="submit" value="提交"></form></body>
</html>8.6.1.3 总结
8.6.2 表单项标签
8.6.2.1 分析
8.6.2.2 编码开始
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表单项标签</title>
</head>
<body><!-- value: 表单项提交的值 -->
<form action="" method="post">姓名: <input type="text" name="name"> <br><br>密码: <input type="password" name="password"> <br><br> 性别: <input type="radio" name="gender" value="1"> 男<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>爱好: <label><input type="checkbox" name="hobby" value="java"> java </label><label><input type="checkbox" name="hobby" value="game"> game </label><label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>图像: <input type="file" name="image"> <br><br>生日: <input type="date" name="birthday"> <br><br>时间: <input type="time" name="time"> <br><br>日期时间: <input type="datetime-local" name="datetime"> <br><br>邮箱: <input type="email" name="email"> <br><br>年龄: <input type="number" name="age"> <br><br>学历: <select name="degree"><option value="">----------- 请选择 -----------</option><option value="1">大专</option><option value="2">本科</option><option value="3">硕士</option><option value="4">博士</option></select> <br><br>描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br><input type="hidden" name="id" value="1"><!-- 表单常见按钮 --><input type="button" value="按钮"><input type="reset" value="重置"> <input type="submit" value="提交"> <br>
</form></body>
</html>8.6.2.3 总结
九 JavaScript
9.1 什么是JavaScript
9.2 js引入方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-引入方式</title><!-- <script>alert("Hello JS");//定义弹出框</script> -->
</head>
<body><!-- 内部脚本 --><!-- <script>alert("Hello JS");//定义弹出框</script> --><!-- 外部脚本 --><script src="js/demo.js"></script>
</body>
</html><!-- <script>alert("Hello JS");//定义弹出框
</script> -->9.3 js基础语法
9.3.1 书写语法&& 输出语句
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-基本语法</title>
</head>
<body><script>// alert("js"); // 单行注释 window.alert("Hello JS"); //弹出框document.write("Hello JS"); //写入HTML页面console.log("Hello JS"); //浏览器控制台</script>
</body>
</html>9.3.2 变量
9.3.2.1 全局 var
9.3.2.2 局部 let
9.3.2.3 常量 const
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-变量</title>
</head>
<body><script>//定义变量// var a = 0;// a = "A";// alert(a);// 特点 1 : 作用域比较大 全局变量 // 特点 2 ：var 定义的是一个全局变量， 还可以重复声明// {// var a = 0;// var a = "A";// }// alert(a);// let 定义的是一个局部变量， 不可以重复声明// {// let a = 0;// a = "A";// alert(a);// }//const 定义的是一个常量const pi = 3.14;//pi = 3.15;alert(pi);</script>
</body>
</html>9.3.3 数据类型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-数据类型</title>
</head>
<body></body>
<script>//原始数据类型alert(typeof 3); //numberalert(typeof 3.14);//numberalert(typeof "A"); //stringalert(typeof 'Hello');//stringalert(typeof true);//booleanalert(typeof false);//booleanalert(typeof null);//objectvar a ;alert(typeof a);//undefined?</script>
</html> 
9.3.4 运算符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-运算符 流程控制</title>
</head>
<body></body>
<script>// var age = 20;// var _age = "20";// var $age = 20;// alert(age == _age); //true// alert(age === _age); //false// alert(age === $age); //true// 类型转换 - 其他类型转为数字// alert(parseInt("12")); //12// alert(parseInt("1222A45")); //1222// alert(parseInt("A45")); //NaN// if(0){// alert("If");// }// 类型转换 - 其他类型转为boolean// if(0){ //false// alert("0 转换为false");// }// if(NaN){ //false// alert("NaN 转换为false");// }// if(-1){ //true// alert("除0和NaN其他数字都转为 true");// }// if(""){ //false// alert("空字符串为 false, 其他都是true");// }// if(null){ //false// alert("null 转化为false");// }// if(undefined){ //false// alert("undefined 转化为false");// }/*false：0 NaN""nullundefined*/</script>
</html>9.3.5 流程控制语句
9.4 js函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-函数</title>
</head>
<body></body>
<script>//定义函数-1// function add(a,b){// return a + b;// }//定义函数-2var add = function(a,b){return a + b;}//函数调用var result = add(10,20);alert(result);</script>
</html>9.5 js对象
JavaScript 和 HTML DOM 参考手册
本文主要讲三类（基础对象、浏览器对象、dom对象）
9.5.1 Array数组
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-Array</title>
</head>
<body></body>
<script>//定义数组// var arr = new Array(1,2,3,4);// var arr = [1,2,3,4];// console.log(arr[0]);// console.log(arr[1]);//特点: 长度可变 类型可变// var arr = [1,2,3,4];// arr[10] = 50;// console.log(arr[10]);// console.log(arr[9]);// console.log(arr[8]);// arr[9] = "A";// arr[8] = true;// console.log(arr);var arr = [1,2,3,4];arr[10] = 50;// for (let i = 0; i < arr.length; i++) {// console.log(arr[i]);// }// console.log("==================");//forEach: 遍历数组中有值的元素// arr.forEach(function(e){// console.log(e);// })// //ES6 箭头函数: (...) => {...} -- 简化函数定义// arr.forEach((e) => {// console.log(e);// }) //push: 添加元素到数组末尾// arr.push(7,8,9);// console.log(arr);//splice: 删除元素arr.splice(2,2);console.log(arr);</script>
</html>9.5.2 String字符串
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-String</title>
</head>
<body></body>
<script>//创建字符串对象//var str = new String("Hello String");var str = " Hello String ";console.log(str);//lengthconsole.log(str.length);//charAtconsole.log(str.charAt(4));//indexOfconsole.log(str.indexOf("lo"));//trimvar s = str.trim();console.log(s);//substring(start,end) --- 开始索引, 结束索引 (含头不含尾)console.log(s.substring(0,5));</script>
</html>9.5.3 JSON
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-JSON</title>
</head>
<body></body>
<script>//自定义对象// var user = {// name: "Tom",// age: 10,// gender: "male",// // eat: function(){// // alert("用膳~");// // }// eat(){// alert("用膳~");// }// }// alert(user.name);// user.eat();//定义jsonvar jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';alert(jsonstr.name); // 无法获取数据//json字符串--js对象var obj = JSON.parse(jsonstr);alert(obj.name);//js对象--json字符串alert(JSON.stringify(obj));</script>
</html>9.5.4 BOM
Window
Location
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-BOM</title>
</head>
<body></body>
<script>//获取// window.alert("Hello BOM");// alert("Hello BOM Window");//方法//confirm - 对话框 -- 确认: true , 取消: false// var flag = confirm("您确认删除该记录吗?");// alert(flag);//定时器 - setInterval -- 周期性的执行某一个函数// var i = 0;// setInterval(function(){// i++;// console.log("定时器执行了"+i+"次");// },2000);//定时器 - setTimeout -- 延迟指定时间执行一次 // setTimeout(function(){// alert("JS");// },3000);//locationalert(location.href);location.href = "https://www.itcast.cn";</script>
</html>9.5.5 DOM
9.5.5.1 DOM
演示案例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM演示</title>
</head><body><div style="font-size: 30px; text-align: center;" id="tb1">课程表</div><table width="800px" border="1" cellspacing="0" align="center"><tr><th>学号</th><th>姓名</th><th>分数</th><th>评语</th></tr><tr align="center" class="data"><td>001</td><td>张三</td><td>90</td><td>很优秀</td></tr><tr align="center" class="data"><td>002</td><td>李四</td><td>92</td><td>优秀</td></tr><tr align="center" class="data"><td>003</td><td>王五</td><td>83</td><td>很努力,不错</td></tr><tr align="center" class="data"><td>004</td><td>赵六</td><td>98</td><td>666</td></tr></table><br><div style="text-align: center;"><input id="b1" type="button" value="改变标题内容" onclick="fn1()"><input id="b2" type="button" value="改变标题颜色" onclick="fn2()"><input id="b3" type="button" value="删除最后一个" onclick="fn3()"></div>
</body><script>function fn1(){document.getElementById('tb1').innerHTML="学员成绩表";}function fn2(){document.getElementById('tb1').style="font-size: 30px; text-align: center; color: red;"}function fn3(){var trs = document.getElementsByClassName('data');trs[trs.length-1].remove();}
</script></html>
获取元素代码 【重点】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM</title>
</head><body><img id="h1" src="img/off.gif"> <br><br><div class="cls">传智教育</div> <br><div class="cls">黑马程序员</div> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body><script>//1. 获取Element元素//1.1 获取元素-根据ID获取// var img = document.getElementById('h1');// alert(img);//1.2 获取元素-根据标签获取 - div// var divs = document.getElementsByTagName('div');// for (let i = 0; i < divs.length; i++) {// alert(divs[i]);// }//1.3 获取元素-根据name属性获取// var ins = document.getElementsByName('hobby');// for (let i = 0; i < ins.length; i++) {// alert(ins[i]);// }//1.4 获取元素-根据class属性获取// var divs = document.getElementsByClassName('cls');// for (let i = 0; i < divs.length; i++) {// alert(divs[i]);// }//2. 查询参考手册, 属性、方法var divs = document.getElementsByClassName('cls');var div1 = divs[0];div1.innerHTML = "传智教育666";</script>
</html>9.5.5.2 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM-案例</title>
</head><body><img id="h1" src="img/off.gif"> <br><br><div class="cls">传智教育</div> <br><div class="cls">黑马程序员</div> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body><script>//1. 点亮灯泡 : src 属性值var img = document.getElementById('h1');img.src = "img/on.gif";//2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font>var divs = document.getElementsByTagName('div');for (let i = 0; i < divs.length; i++) {const div = divs[i];div.innerHTML += "<font color='red'>very good</font>"; }//3. 使所有的复选框呈现选中状态var ins = document.getElementsByName('hobby');for (let i = 0; i < ins.length; i++) {const check = ins[i];check.checked = true;//选中}</script>
</html>9.6 js事件监听
9.6.1 事件绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-事件-事件绑定</title>
</head><body><input type="button" id="btn1" value="事件绑定1" onclick="on()"><input type="button" id="btn2" value="事件绑定2">
</body><script>function on(){alert("按钮1被点击了...");}document.getElementById('btn2').onclick = function(){alert("按钮2被点击了...");}</script>
</html>9.6.2 常见事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-事件-常见事件</title>
</head><body onload="load()"><form action="" style="text-align: center;" onsubmit="subfn()"><input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()"><input id="b1" type="submit" value="提交"><input id="b1" type="button" value="单击事件" onclick="fn1()"></form> <br><br><br><table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()"><tr><th>学号</th><th>姓名</th><th>分数</th><th>评语</th></tr><tr align="center"><td>001</td><td>张三</td><td>90</td><td>很优秀</td></tr><tr align="center"><td>002</td><td>李四</td><td>92</td><td>优秀</td></tr></table></body><script>//onload : 页面/元素加载完成后触发function load(){console.log("页面加载完成...")}//onclick: 鼠标点击事件function fn1(){console.log("我被点击了...");}//onblur: 失去焦点事件function bfn(){console.log("失去焦点...");}//onfocus: 元素获得焦点function ffn(){console.log("获得焦点...");}//onkeydown: 某个键盘的键被按下function kfn(){console.log("键盘被按下了...");}//onmouseover: 鼠标移动到元素之上function over(){console.log("鼠标移入了...")}//onmouseout: 鼠标移出某元素function out(){console.log("鼠标移出了...")}//onsubmit: 提交表单事件function subfn(){alert("表单被提交了...");}</script>
</html>9.6.3 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-事件-案例</title>
</head>
<body><img id="light" src="img/off.gif"> <br><input type="button" value="点亮" onclick="on()"> <input type="button" value="熄灭" onclick="off()"><br> <br><input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()"><br> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏<br><input type="button" value="全选" onclick="checkAll()"> <input type="button" value="反选" onclick="reverse()"></body><script>//1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclickfunction on(){//a. 获取img元素对象var img = document.getElementById("light");//b. 设置src属性img.src = "img/on.gif";}function off(){//a. 获取img元素对象var img = document.getElementById("light");//b. 设置src属性img.src = "img/off.gif";}//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblurfunction lower(){//小写//a. 获取输入框元素对象var input = document.getElementById("name");//b. 将值转为小写input.value = input.value.toLowerCase();}function upper(){//大写//a. 获取输入框元素对象var input = document.getElementById("name");//b. 将值转为大写input.value = input.value.toUpperCase();}//3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclickfunction checkAll(){//a. 获取所有复选框元素对象var hobbys = document.getElementsByName("hobby");//b. 设置选中状态for (let i = 0; i < hobbys.length; i++) {const element = hobbys[i];element.checked = true;}}function reverse(){//a. 获取所有复选框元素对象var hobbys = document.getElementsByName("hobby");//b. 设置未选中状态for (let i = 0; i < hobbys.length; i++) {const element = hobbys[i];element.checked = false;}}</script>
</html>相关文章：
[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript
目录 一 特色 二 收获编辑 三 什么是web? 四 网站的工作流程 五 web网站的开发模式编辑 六 web开发课程学习安排 七、初始web前端 八 HTML、CSS 8.1 什么是HTNL\CSS(w3cschool) 8.2 HTML快速入门 8.3 VS Code开发工具 8.3.1 插件 8.3.2 主题（改变颜色&…...
Python自动化小技巧18——自动化资产月报(word设置字体表格样式，查找替换文字)
案例背景 每月都要写各种月报，经营管理月报，资产月报.....这些报告文字目标都是高度相似的，只是需要替换为每个月的实际数据就行，如下： (打码是怕信息泄露.....) 可以看到，这个报告的都是高度模板化&…...
FFmpeg5.0源码阅读——VideoToobox硬件解码
摘要：本文描述了FFmpeg中videotoobox解码器如何进行解码工作，如何将一个编码的码流解码为最终的裸流。 关键字：videotoobox,decoder,ffmpeg VideoToolbox 是一个低级框架，提供对硬件编码器和解码器的直接访问。 它提供视频…...
IDEA 中Tomcat源码环境搭建
一、从仓库中拉取源代码 配置仓库地址、项目目录；点击Clone按钮，从仓库中拉取代码 Tomcat源码对应的github地址： https://github.com/apache/tomcat.git 二、安装Ant插件 打开 File -> Setting -> Plugins 三、添加Build文件 &…...
MATLAB | 七夕节用MATLAB画个玫瑰花束叭
Hey又是一年七夕节要到了，每年一次直男审美MATLAB绘图大赛开始hiahiahia，真的这些代码越写越不知道咋写，又不想每年把之前的代码翻出来再发一遍，于是今年又对我之前写的老代码进行了点优化组合，整了个花球变花束&#…...
嵌入式开发之configure
1 前述 在Linux的应用或者驱动开发过程中，编写makefile是无法避免的问题，但是由于makefile的各种规则，或显式，或隐式，非常多，不经常写的话，很难写出一个可用的makefile文件。为了“偷懒”&…...
深入浅出Pytorch函数——torch.nn.Module
分类目录：《深入浅出Pytorch函数》总目录 Pytorch中所有网络的基类，我们的模型也应该继承这个类。Modules也可以包含其它Modules,允许使用树结构嵌入他们，我们还可以将子模块赋值给模型属性。 语法 torch.nn.Module(*args, **kwargs)方法 …...
【100天精通python】Day38：GUI界面编程_PyQt 从入门到实战（中）_数据库操作与多线程编程
目录 专栏导读 4 数据库操作 4.1 连接数据库 4.2 执行 SQL 查询和更新： 4.3 使用模型和视图显示数据 5 多线程编程 5.1 多线程编程的概念和优势 5.2 在 PyQt 中使用多线程 5.3 处理多线程间的同步和通信问题 5.3.1 信号槽机制 5.3.2 线程安全的数据访问 Q…...
STM32--TIM定时器（3）
文章目录 输入捕获简介频率测量输入捕获通道输入捕获基本结构PWMI的基本结构输入捕获模式测量PWM频率和占空比代码 编码器接口正交编码器工作模式接口基本结构TIM编码接口器测速代码： 输入捕获简介 输入捕获IC(Input Capture)，是处理器捕获外部输入信号…...
爬虫框架- feapder + 爬虫管理系统 - feaplat 的学习简记
文章目录 feapder 的使用feaplat 爬虫管理系统部署 feapder 的使用 feapder是一款上手简单，功能强大的Python爬虫框架 feapder 官方文档 文档写的很详细，可以直接上手。 基本命令： 创建爬虫项目 feapder create -p first-project创建爬虫 …...
设计模式详解-享元模式
类型：结构型模式 实现原理：尝试重用现有的同类对象，如果未找到匹配的对象，则创建新对象 目的：减少创建对象的数量以减少内存占用和提高性能。 解决的问题：大量的对象可能造成的内存溢出问题 解决方法&a…...
BDA初级分析——用SQL筛选数据
一、用SQL对数据分组 GROUP BY Group by，按...分组 作用:根据给定字段进行字段的分组，通常和聚合函数配合使用，实现分组的分析 写法:select ...from ...group by 字段名 (也可以是多个字段) GROUP BY的逻辑 SELECT gender,COUNT(user_id) …...
（成功踩坑）electron-builder打包过程中报错
目录 注意：文中的解决方法2，一定全部看完，再进行操作，有坑 背景 报错1： 报错2： 1.原因：网络连接失败 2.解决方法1： 3.解决方法2： 3.1查看缺少什么资源文件 3.2去淘…...
【STM32】 工程
🚩 WRITE IN FRONT 🚩 🔎 介绍："謓泽"正在路上朝着"攻城狮"方向"前进四" 🔎🏅 荣誉：2021|2022年度博客之星物联网与嵌入式开发TOP5|TOP4、2021|2022博客之星TO…...
Git概述
目录 一、什么是Git 二、什么是版本控制系统 三、Git和SVN对比 SVN集中式 SVN优缺点 Git分布式 Git优缺点 四、Git工作流程 四个工作区域 工作流程 五、Git下载与安装 一、什么是Git 很多人都知道，林纳斯托瓦兹在1991年创建了开源的Linux，从…...
ubuntu 编译安装nginx及安装nginx_upstream_check_module模块
如果有帮助到你，麻烦点个赞呗～ 一、下载安装包 # 下载nginx_upstream_check_module模块 wget https://codeload.github.com/yaoweibin/nginx_upstream_check_module/zip/master# 解压 unzip master# 下载nginx 1.21.6 wget https://github.com/nginx/…...
近 2000 台 Citrix NetScaler 服务器遭到破坏
Bleeping Computer 网站披露在某次大规模网络攻击活动中，一名攻击者利用被追踪为 CVE-2023-3519 的高危远程代码执行漏洞，入侵了近 2000 台 Citrix NetScaler 服务器。 研究人员表示在管理员安装漏洞补丁之前已经有 1200 多台服务器被设置了后门&#x…...
MySQL MVCC的详解之Read View
文章目录 概要一、基于UNDO LOG的版本链1.1、行记录结构1.2、了解UNDO LOG1.3、版本链 二、Read View2.1、判定机制 三、参考 概要 在上文中，我们提到了MVCC（Multi-Version Concurrency Control)多版本并发控制，是通过undo log来实现的。那具…...
基于springboot+vue的考研资讯平台(前后端分离)
博主主页：猫头鹰源码 博主简介：Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容：毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…...
学习网络编程No.3【socket理论实战】
引言： 北京时间：2023/8/12/15:32，自前天晚上更新完文章，看了一下鹅厂新出的《扫毒3》摆烂至现在，不知道是长大了，还是近年港片就那样，给我的感觉不是很好，也可能是国内市场对港片不…...
Linux学习之ssh和scp
ls /etc/ssh可以看到这个目录下有一些文件，而/etc/ssh/ssh_config是客户端配置文件，/etc/ssh/sshd_config是服务端配置文件。 cat -n /etc/ssh/sshd_config | grep "Port "可以看一下sshd监听端口的配置信息，发现这个配置端口是22…...
录制游戏视频的软件有哪些？分享3款软件！
“有录制游戏视频的软件推荐吗？最近迷上了网游，想录制点自己高端操作的游戏画面，但是不知道用什么软件录屏比较好，就想问问大家，有没有好用的录制游戏视频软件。” 在游戏领域，玩家们喜欢通过录制游戏视频…...
每日一题——螺旋矩阵
题目 给定一个m x n大小的矩阵（m行，n列），按螺旋的顺序返回矩阵中的所有元素。 数据范围：0≤n,m≤10，矩阵中任意元素都满足 ∣val∣≤100 要求：空间复杂度 O(nm) ，时间复杂度 O(nm)…...
前端面试的性能优化部分（12）每天10个小知识点
目录 系列文章目录前端面试的性能优化部分（1）每天10个小知识点前端面试的性能优化部分（2）每天10个小知识点前端面试的性能优化部分（3）每天10个小知识点前端面试的性能优化部分（4）每天…...
SAP BTEs 业务交易事件/增强（Business Transaction Event）
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 目录 前言 一、BTEs是什么？ 二、使用步骤 1.查找BTE event 2.处理FM 总结 前言 SAP BTEs是一种新型的增强方式，可以通过事务代码FIFB打开&#…...
leetcode做题笔记90. 子集 II
给你一个整数数组 nums ，其中可能包含重复元素，请你返回该数组所有可能的子集（幂集）。 解集 不能 包含重复的子集。返回的解集中，子集可以按 任意顺序 排列。 思路一：回溯 int comp(const void* a, cons…...
“开发和运维”只是一个开始，最终目标是构建高质量的软件工程
随着技术的飞速发展，软件行业不断寻求改进和创新的方法来提供更高质量的产品。在这方面，DevOps已经展现出了巨大的潜力。通过打破开发和运维之间的壁垒，DevOps将持续集成、持续交付和自动化流程引入到软件开发中，使团队能够更快地…...
自学C#，要懂得善用MSDN
很多初学者学习编程，都会通过看别人写的教程、或者录制的视频，来学习。 这是一个非常好的途径，因为这个是非常高效的。 但是这样，存在两个问题： 1、教程不够全面：任何再好的教程，都无法囊括所…...
mac上如何压缩视频大小？
mac上如何压缩视频大小？由于视频文件体积庞大，常常会占据我们设备的大量存储空间。通常情况下，我们选择删除视频以释放内存，但这将永久丢失它们。然而，有一种更好的方法可以在不删除视频的情况下减小内存占用ÿ…...
git merge规则
参考文档：https://juejin.cn/post/7129333439299321887 丹尼尔：Hi，蛋兄，周杰伦都出新专辑了，你咋还不更新啊，真的打算半年一更啊？ 蛋先生：好像确实是这样，要不࿰…...
【周末闲谈】关于“数据库”你又知道多少？
个人主页：【😊个人主页】 系列专栏：【❤️周末闲谈】 系列目录 ✨第一周 二进制VS三进制 ✨第二周 文心一言，模仿还是超越？ ✨第二周 畅想AR 文章目录 系列目录前言数据库数据库的五大特点数据库介绍数据库管理系统&a…...
C++ 对象生成：构造函数
对象生成：构造函数 一、构造函数特性二、三种构造函数1.无参构造函数2.有参构造函数3.拷贝构造函数 一、构造函数特性 C编译器提供了构造函数供程序生成对象这是一个与类同名的函数，参数可以有多种形式（重载）没有返回类型声明一般…...
RFID如何在汽车混流生产中进行车辆跟踪？
在汽车混流生产中，RFID技术可以对每个车辆进行唯一标识，从而实现车辆生产全程跟踪。实时确定车辆的位置、状态和生产过程，生产管理系统就能够对生产流程进行实时监控和管理，及时发现和解决问题，提高生产效率和质量。 焊…...
差值结构的复合底部
( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 让网络的输入只有3个节点，AB训练集各由6张二值化的图片组成，让A 中有3个点，B中有1个点，且不重合，统计迭代次数并排序。 其中有20组数据 让迭代次数与排斥能成反比，排…...
在Docker 上使用 Nginx 配置https及wss
预先创建挂载文件 /mydata/nginx/conf/nginx.conf /mydata/nginx/cert /mydata/nginx/conf.d /mydata/nginx/html /mydata/nginx/logs运行并且挂载容器 docker run -p 80:80 -p 443:443 --name nginx01 --restartalways \ -v /mydata/nginx/conf/nginx.conf:/etc/nginx/ngi…...
git回退操作
1. 在工作区回退： 此时文件没有经过任何提交 git checkout -- filename2. git add之后回退 git reset HEAD3. git commit 之后回退 git reset --hard commit_id(前4位)其中，commit_id可通过git log查看，例如： qzcryqz MINGW6…...
C++系列-类和对象-静态成员
类和对象-静态成员 静态成员静态成员变量静态成员函数 静态成员 静态成员就是在成员变量或者是成员函数前面加上static关键字。 静态成员变量 所有对象共享同一份数据在编译阶段分配内存类内声明，类外初始化可以通过对象或者类名进行访问。静态成员变量也具有访问…...
SAP MM学习笔记26- SAP中 振替转记（转移过账）和 在库转送（库存转储）2- 品目Code振替转记 和 在库转送
SAP 中在库移动 不仅有入库（GR），出库（GI），也可以是单纯内部的转记或转送。 1，振替转记（转移过账） 2，在库转送（库存转储） 1ÿ…...
【Python机器学习】实验13 基于神经网络的回归-分类实验
文章目录 神经网络例1 基于神经网络的回归(简单例子)1.1 导入包1.2 构造数据集（随机构造的）1.3 构造训练集和测试集1.4 构建神经网络模型1.5 采用训练数据来训练神经网络模型 实验：基于神经网络的分类(鸢尾花数据集)1. 导入包2. 构造数据集3.…...
【数据结构】二叉树的链式结构的实现 -- 详解
一、前置说明 在学习二叉树的基本操作前，需先要创建一棵二叉树，然后才能学习其相关的基本操作。为了降低大家学习成本，此处手动快速创建一棵简单的二叉树，快速进入二叉树操作学习。 typedef char BTDataType;typedef struct Binar…...
【C语言】什么是结构体内存对齐？结构体的大小怎么计算？
目录 1.结构体内存对齐 对偏移量的理解： 2.结构体的大小计算 2.1结构体中只有普通的数据类型的大小计算 2.2 结构体中有嵌套的结构体的大小计算 3.修改默认对齐数 4.为什么存在内存对齐? 这篇文章主要介绍结构体内存对齐和如何计算大小。 在学习结构体内存…...
【Redis】Redis中的布隆过滤器
【Redis】Redis中的布隆过滤器 前言 在实际开发中，会遇到很多要判断一个元素是否在某个集合中的业务场景，类似于垃圾邮件的识别，恶意IP地址的访问，缓存穿透等情况。类似于缓存穿透这种情况，有许多的解决方法…...
接口测试 —— Jmeter 参数加密实现
Jmeter有两种方法可以实现算法加密 1、使用__digest自带函数 参数说明： Digest algorithm：算法摘要，可输入值：MD2、MD5、SHA-1、SHA-224、SHA-256、SHA-384、SHA-512 String to be hashed：要加密的数据 Salt to be…...
Linux c语言字节序
文章目录 一、简介二、大小端判断2.1 联合体2.2 指针2.3 网络字节序 一、简介 字节序（Byte Order）指的是在存储和表示多字节数据类型（如整数和浮点数）时，字节的排列顺序。常见的字节序有大端字节序（Big En…...
批量将excel中第5列中内容将人名和电话号码进行分列
使用Python可以使用openpyxl库来实现批量将Excel中第5列的内容分列为人名和电话号码的操作。下面是示例代码： import openpyxl def split_names_and_phone_numbers(file_path, sheet_name): # 加载Excel文件 workbook openpyxl.load_workbook(file_path) …...
WPF DataGrid columns表头根据数据集动态动态生成Demo
思路是这样的，数组集合装表头的信息，遍历这个集合，遍历过程中处理一下数据，然后就把每表头信息添加到dataGrid2.Columns.Add(templateColumn); 1，页面Xaml代码： <DataGrid x:Name"dataGrid" …...
1339. 分裂二叉树的最大乘积
链接： 1339. 分裂二叉树的最大乘积 题解： /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* …...
【C++】Stack和Queue
欢迎来到Cefler的博客😁 🕌博客主页：那个传说中的man的主页 🏠个人专栏：题目解析 🌎推荐文章：题目大解析3 目录 👉🏻Stack Constructor👉🏻Stack …...
Maven之tomcat7-maven-plugin 版本低的问题
tomcat7-maven-plugin 版本『低』的问题 相较于当前最新版的 tomcat 10 而言，tomcat7-maven-plugin 确实看起来很显老旧。但是，这个问题并不是问题，至少不是大问题。 原因 1：tomcat7-maven-plugin 仅用于我们（程序员&…...
在项目中如何解除idea和Git的绑定
在项目中如何解除idea和Git的绑定 1、点击File--->Settings...(CtrlAltS)--->Version Control--->Directory Mappings--->点击取消Git的注册根路径： 2、回到idea界面就没有Git了： 3、给这个项目初始化 这样就可以重新绑定远程仓库了&#x…...