当前位置: 首页 > news >正文

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种引入方式:

来看实现:

  1. 内部脚本,将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>
  1. 外部脚本, 将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操作的一种形式。

小白啊!!!写的不好轻喷啊🤯如果觉得写的不好,点个赞吧🤪(批评是我写作的动力)

…。。。。。。。。。。。…

…。。。。。。。。。。。…请添加图片描述

http://www.dtcms.com/a/337838.html

相关文章:

  • Python常用的GUI模块
  • 软考 系统架构设计师系列知识点之杂项集萃(129)
  • illustrator插件大全 免费插件介绍 Ai设计插件集合 (4)
  • 东软8位MCU使用问题总结
  • 深度学习必然用到的概率知识
  • 视觉语言导航(6)——Speaker-Follower模型 数据增强 混合学习 CLIP 3.1后半段
  • GISBox平台的三维城市模型自动化生成系统
  • 《Python学习之第三方库:开启无限可能》
  • 决策树:机器学习中的强大工具
  • 一些常见的聚类算法原理解析与实践
  • 【OLAP】trino安装和基本使用
  • BadNets: Identifying Vulnerabilities in the Machine Learning Model Supply Chain
  • 机器学习之数据预处理(一)
  • 深度学习-计算机视觉-微调 Fine-tune
  • 【MongoDB】多种聚合操作详解,案例分析
  • Java文件操作/IO
  • RabbitMQ高级特性——TTL、死信队列、延迟队列、事务、消息分发
  • 【展厅多媒体】互动地砖屏怎么提升展厅互动感的?
  • python基于机器学习进行数据处理与预测(火灾的三因素回归问题)
  • 探索机器学习:从核心概念到实战应用
  • 精通sqlmap tamper:WAF绕过实战技巧剖析
  • 磁流变液迟滞性能的机器学习软件设计
  • MySQL实战优化高手教程 – 从架构原理到生产调优
  • 突破成长瓶颈:产品运营能力体系化提升技巧
  • 大数据毕业设计选题推荐:基于Hadoop+Spark的城镇居民食品消费分析系统源码
  • 28、企业安防管理(Security)体系构建:从生产安全到日常安保的全方位防护
  • 【秋招笔试】2025.08.16科大讯飞秋招机考真题
  • 从虚拟到现实:数字孪生赋能智能制造
  • 跨设备文件共享优化:cpolar 提升 PicoShare 访问速度方案
  • Nextcloud 私有云部署:cpolar 内网穿透服务实现安全远程文件访问