JavaWeb前端02（JavaScript）-EW帮帮网

前言

一直在学习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. 获取所有的tr
        let 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操作的一种形式。

小白啊！！！写的不好轻喷啊🤯如果觉得写的不好，点个赞吧🤪（批评是我写作的动力）

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

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

JavaWeb前端02（JavaScript）

前言

🙌来简单概括一下JavaScript

来看看怎么用？JS引入方式：

Js基础语法

JS事件监听语法

最后来具体写一个案例来看看Js在项目中的具体实现吧

网站公告

今日签到

热门文章

最新发布