3.3-Web前段开发-JavaScript（AI)

什么是JavaScript

JS核心语法

变量&常量

数据类型

什么是JavaScript

Web标准也称网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Consortium，万维网联盟）负责制定。

三个组成部分：

HTML：负责网页的结构（页面元素和内容）。

CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。

JavaScript：负责网页的行为（交互效果）。

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为，实现页面的交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。

组成：

ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。

BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。

DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。

ECMA： ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言 ECMAScript，这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的（ES2024是最新版本）。

JS核心语法

JS引入方式

内部脚本：将JS代码定义在HTML页面的 <script></script>中(<body>的底部)

外部脚本：将JS代码定义在JS文件中，通过<script src=""></script>标签引入

JS书写规范

结束符：每行结尾以分号结尾，结尾分号可有可无

变量&常量

变量/常量

特点：JS是弱类型语言，变量可以存放不同类型的值

声明：

let：声明变量

const：声明常量，一旦声明，常量的值不能改变

注意：

在早期的js中，声明变量还可以使用var，但是并不严谨(不推荐)

输出语句

window.alert() ：弹出警告框 (使用频次较高)

console.log() ：写入浏览器控制台 (使用频次较高)

document.write() ：向HTML的body内输出内容

数据类型

JavaScript的数据类型分为：基本数据类型和引用数据类型（对象）。

基本数据类型：

number：数字（整数、小数、NaN(Not a Number)）

boolean：布尔。true，false

null：对象为空。JavaScript是大小写敏感的，因此null、Null、NULL是完全不同的

undefined：当声明的变量未初始化时，该变量的默认值是 undefined

string：字符串，单引号、双引号、反引号皆可，推荐使用单引号

模板字符串语法：

` `（反引号，英文输入模式下按键盘的tab键上方波浪线 ~ 那个键）

内容拼接变量时，使用 ${} 包住变量

复制代码

  <script>
    let name = 'Tom';
    let age = 18;    console.log('大家好, 我是新入职的' + name + ', 今年' + age + '岁了, 请多多关照');
    console.log(`大家好, 我是新入职的${name}, 今年${age}岁了, 请多多关照`);
  </script>

函数

介绍：函数（ function ）是被设计用来执行特定任务的代码块，方便程序的封装复用。

定义：JavaScript中的函数通过function关键字进行定义，语法为：

调用：函数名称(实际参数列表)

匿名函数

匿名函数是指一种没有名称的函数，可以通过两种方式定义：函数表达式和箭头函数。

自定义对象

定义格式

调用格式

JS自定义对象语法?

let 对象 = {属性名: 属性值, 属性名: 属性值, 方法名: function(){...}}

let 对象 = {属性名: 属性值, 属性名: 属性值, 方法名(){...}}

json

概念：JavaScript Object Notation，JavaScript对象标记法 (JS对象标记法书写的文本 ) 。

由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

JSON格式特点?

json格式的文本所有的key必须使用双引号引起来

JSON对象的两个方法?

JSON.parse : 将json字符串转为js对象

JSON.stringify: 将js对象转为json字符串

DOM

DOM操作

DOM操作核心思想：将网页中所有的元素当做对象来处理。（标签的所有属性在该对象上都可以找到）

操作步骤：

获取要操作的DOM元素对象

操作DOM对象的属性或方法（查文档或AI）

获取DOM对象

根据CSS选择器来获取DOM元素，获取匹配到的第一个元素：document.querySelector('选择器')

根据CSS选择器来获取DOM元素，获取匹配到的所有元素： document.querySelectorAll('选择器')

注意：得到的是一个NodeList节点集合，是一个伪数组（有长度、有索引的数组）

什么是DOM ?

文档对象模型，JS提供的专门用来操作网页内容的

如何获取DOM对象 ?

document.querySelector('选择器')

document.querySelectorAll('选择器')

其他方式(了解)：

document.getElementById('id')

document.getElementsByTagName('div')

document.getElementsByClassName('cls')

事件监听

什么是事件？什么是事件监听？

事件：HTML事件是发生在HTML元素上的 "事情"。比如：

按钮被点击

鼠标移动到元素上

按下键盘按键

事件监听：JavaScript可以在事件触发时，就立即调用一个函数做出响应，也称为事件绑定或注册事件。

事件监听

事件源.addEventListener('事件类型',要执行的函数)

常见事件

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新版本的语法)
        //获取到所有的tr标签
         let trs = document.querySelectorAll("tr");
         //为每一个tr标签添加事件监听
        for(let i=0; i<trs.length; i++){
            trs[i].addEventListener("mouseenter", function(){//m ouseenter鼠标进入
                this.style.backgroundColor = "#f2e2e2";
            })
            trs[i].addEventListener("mouseleave", function(){// mouseleave鼠标离开
                this.style.backgroundColor = "#fff";
            })
        }
        
    </script>
</body>
</html>