JavaWeb前端02(JavaScript)
前言
一直在学习B站黑马程序员苍穹外卖。现在已经学的差不多了,但是我学习一直是针对后端开发的,前端也没太注重去学(他大部分都给课程资料嘻嘻🤪),但我还是比较感兴趣,准备先把之前学JavaWeb(黑马程序员新推出的哦,视频讲的非常好😗可以去看看)时跳过的前端内容学一下,然后再用苍穹外卖前端内容补上。
学习了HTML、CSS的基础内容,我们知道HTML负责网页的结构,而CSS负责的是网页的表现。 而要想让网页具备一定的交互效果,具有一定的动作行为,还得通过JavaScript来实现。
🙌来简单概括一下JavaScript
JavaScript(简称:JS) 是一门跨平台、面向对象的脚本语言,是用来控制网页行为的,实现人机交互效果。JavaScript 和 Java 是完全不同的语言,不论是概念还是设计。但是基础语法类似。
- 组成:
- ECMAScript: 规定了JS基础语法核心知识,包括变量、数据类型、流程控制、函数、对象等。
- BOM:浏览器对象模型,用于操作浏览器本身,如:页面弹窗、地址栏操作、关闭窗口等。
- DOM:文档对象模型,用于操作HTML文档,如:改变标签内的内容、改变标签内字体样式等。
来看看怎么用?JS引入方式:
js代码也是书写在html中的,那么html中如何引入js代码呢?主要通过下面的2种引入方式:
来看实现:
- 内部脚本,将Js代码定义在HTML页面中
来看看代码:
<!-- 生成文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集 --><meta charset="UTF-8"><!-- 设置网页在移动设备上的显示方式 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-引入方式</title>
</head>
<body><script>//内部脚本alert('内部脚本');</script>
</body>
</html>
- 外部脚本, 将JS代码定义在外部 JS文件中,然后引入到 HTML页面中
在文件中定义Js文件夹,创建demo.js
写入要操作的弹出框:
alert('javasqp');
<!-- 生成文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集 --><meta charset="UTF-8"><!-- 设置网页在移动设备上的显示方式 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-引入方式</title>
</head>
<body><script src="js/demo.js"></script>
</body>
</html>
Js基础语法
1.输出语句:
- window.alert(…) 警告框
- document.write(…) 在HTML输出内容
- console.log(…) 写入浏览器控制台
2.变量/常量
JS中主要通过 let 关键字来声明变量的。
- JS是一门弱类型语言,变量是可以存放不同类型的值的。
<script>//变量let a = 20;a = "Hello";alert(a);
</script>
需要使用const关键字。一旦声明,常量的值就不能改变 (不可以重新赋值)。
<body><script>//常量const PI = 3.14;PI = 3.15;alert(PI);</script>
</body>
3.函数
函数表达方式有两种:
第一种:
先看代码:
<body><script>function add(a, b){return a + b;}let result = add(10,20);alert(result);</script>
</body>
就好像我们平时学习的编程语言一样,用名称来声明一个函数,并调用
第二种:
那我们也可以不为函数指定名字,那这一类的函数,我们称之为匿名函数。
<script>// function add(a, b){// return a + b;// }// let result = add(10,20);// alert(result);var add = function (a,b){return a + b;}var add = (a,b) => {return a + b;}let result = add(10,20);alert(result);</script>
3.自定义对象
在学习这部分的时候,可以把它看作Java中的对象来学,先来看代码:
<script>//自定义对象let user = {name: "Tom",age: 10,gender: "男",sing: function(){console.log("悠悠的唱着最炫的民族风~");}}console.log(user.name);user.eat();
<script>
4.DOM:
DOM的核心思想:将网页的内容当做对象来处理,标签的所有属性在该对象上都可以找到,并且修改这个对象的属性,就会自动映射到标签身上。
DOM操作步骤:
- 获取DOM元素对象
- 操作DOM对象的属性或方法 (查阅文档)
常见操作:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-DOM</title>
</head>
<body><h1 id="title1">11111</h1><h1>22222</h1><h1>33333</h1><script>//1. 修改第一个h1标签中的文本内容//1.1 获取DOM对象// let h1 = document.querySelector('#title1');//let h1 = document.querySelector('h1'); // 获取第一个h1标签let hs = document.querySelectorAll('h1');//1.2 调用DOM对象中属性或方法hs[0].innerHTML = '修改后的文本内容';</script></script>
</body>
</html>
JS事件监听语法
形式: 事件源.addEventListener(‘事件类型’, 要执行的函数);
常见事件源:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS事件</title>
</head>
<body><input type="button" id="btn1" value="点我一下试试1"><input type="button" id="btn2" value="点我一下试试2"><script>document.querySelector("#btn1").addEventListener("click",function(){alert("点击了按钮1");});document.querySelector("#btn2").addEventListener("click",function(){alert("点击了按钮2");});</script>
</body>
</html>
最后来具体写一个案例来看看Js在项目中的具体实现吧
还是来看看前端的页面来了解功能:
通过JS为上述的表格中数据行添加事件监听, 实现鼠标进入后, 背景色#f2e2e2; 鼠标离开后, 背景色需要设置为#fff; (JS新版本的语法)
来看看代码吧:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Tlias智能学习辅助系统</title><style>/* 导航栏样式 */.navbar {background-color: #b5b3b3; /* 灰色背景 */display: flex; /* flex弹性布局 */justify-content: space-between; /* 左右对齐 */padding: 10px; /* 内边距 */align-items: center; /* 垂直居中 */}.navbar h1 {margin: 0; /* 移除默认的上下外边距 */font-weight: bold; /* 加粗 */color: white;/* 设置字体为楷体 */font-family: "楷体";}.navbar a {color: white; /* 链接颜色为白色 */text-decoration: none; /* 移除下划线 */}/* 搜索表单样式 */.search-form {display: flex;flex-wrap: nowrap;align-items: center;gap: 10px; /* 控件之间的间距 */margin: 20px 0;}.search-form input[type="text"], .search-form select {padding: 5px; /* 输入框内边距 */width: 260px; /* 宽度 */}.search-form button {padding: 5px 15px; /* 按钮内边距 */}/* 表格样式 */table {width: 100%;border-collapse: collapse;}th, td {border: 1px solid #ddd; /* 边框 */padding: 8px; /* 单元格内边距 */text-align: center; /* 左对齐 */}th {background-color: #f2f2f2;font-weight: bold;}.avatar {width: 30px;height: 30px;}/* 页脚样式 */.footer {background-color: #b5b3b3; /* 灰色背景 */color: white; /* 白色文字 */text-align: center; /* 居中文本 */padding: 10px 0; /* 上下内边距 */margin-top: 30px;}#container {width: 80%; /* 宽度为80% */margin: 0 auto; /* 水平居中 */}</style>
</head>
<body><div id="container"><!-- 顶部导航栏 --><div class="navbar"><h1>Tlias智能学习辅助系统</h1><a href="#">退出登录</a></div><!-- 搜索表单区域 --><form class="search-form" action="/search" method="post"><label for="name">姓名:</label><input type="text" id="name" name="name" placeholder="请输入姓名"><label for="gender">性别:</label><select id="gender" name="gender"><option value=""></option><option value="1">男</option><option value="2">女</option></select><label for="position">职位:</label><select id="position" name="position"><option value=""></option><option value="1">班主任</option><option value="2">讲师</option><option value="3">学工主管</option><option value="4">教研主管</option><option value="5">咨询师</option></select><button type="submit">查询</button><button type="reset">清空</button></form><!-- 表格展示区 --><table><!-- 表头 --><thead><tr><th>姓名</th><th>性别</th><th>头像</th><th>职位</th><th>入职日期</th><th>最后操作时间</th><th>操作</th></tr></thead><!-- 表格主体内容 --><tbody><tr><td>令狐冲</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td><td>讲师</td><td>2021-06-15</td><td>2024-09-16 15:30</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>任盈盈</td><td>女</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td><td>咨询师</td><td>2021-07-20</td><td>2024-09-17 09:00</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>向问天</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>班主任</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>任我行</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>教研主管</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>田伯光</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td><td>班主任</td><td>2021-06-15</td><td>2024-09-16 15:30</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>不戒</td><td>女</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td><td>班主任</td><td>2021-07-20</td><td>2024-09-17 09:00</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>左冷禅</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>班主任</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>定逸</td><td>女</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>班主任</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>东方兄弟</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>讲师</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>金庸</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>咨询师</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr></tbody></table><!-- 页脚版权区域 --><footer class="footer"><p>江苏传智播客教育科技股份有限公司</p><p>版权所有 Copyright 2006-2024 All Rights Reserved</p></footer></div><script>//通过JS为上述的表格中数据行添加事件监听, 实现鼠标进入后, 背景色#f2e2e2; 鼠标离开后, 背景色需要设置为#fff; (JS新版本的语法)// 1. 获取所有的trlet trs = document.querySelectorAll('tbody tr');for(let i = 0; i < trs.length; i++){trs[i].addEventListener('mouseenter', function(){//鼠标进入事件this.style.backgroundColor = '#f2e2e2';});trs[i].addEventListener('mouseleave', function(){//鼠标出去事件this.style.backgroundColor = '#fff';});}</script>
</body>
</html>
-
获取元素:document.querySelectorAll(‘tbody tr’) 使用了DOM方法 querySelectorAll 来选择文档中所有的 tr 元素,这些元素是 tbody 的子元素。这是一种基于CSS选择器来选取页面元素的方式,属于DOM操作的一部分。
-
添加事件监听器:对于每个选中的 tr 元素,代码都为其添加了两个事件监听器,分别是鼠标进入 (mouseenter) 和鼠标离开 (mouseleave) 事件。这是通过调用DOM元素的方法 addEventListener 实现的。当这些事件被触发时,会执行相应的回调函数,从而改变当前行的背景颜色。
-
修改样式:在事件处理函数内部,通过 this.style.backgroundColor 直接修改了元素的样式属性。这里的 this 指向的是当前处理事件的 tr 元素,而直接通过 style 属性来修改样式也是DOM操作的一种形式。
小白啊!!!写的不好轻喷啊🤯如果觉得写的不好,点个赞吧🤪(批评是我写作的动力)
…。。。。。。。。。。。…
…。。。。。。。。。。。…