前端学习week7——JavaScript基础

🕗 发布于 2024-11-22 02:49 前端学习 javascript

day01

1.3 我也可以独立（引用JS外部文件），JavaScript入门篇教程-慕课网

....

3.1 认识DOM，JavaScript入门篇教程-慕课网

...

4.1编程挑战，JavaScript入门篇教程-慕课网

实例实践

项目名称

物联网环境数据监控仪表盘

项目目标

构建一个基于 JavaScript 的动态仪表盘，用于显示感知层采集到的环境数据（例如温度、湿度、光照强度等），通过图表和动画展示实时更新的数据。

项目功能

数据模拟与采集：
- 模拟物联网设备实时采集的数据。
- 使用随机数或预设 JSON 数据流生成采集数据。
数据展示：
- 表格视图：展示历史数据记录。
- 图表视图：使用折线图、柱状图等显示趋势变化。
- 仪表盘视图：显示实时关键数据（如当前温度或湿度）。
实时更新：
- 模拟实时数据更新，每隔一定时间自动刷新图表和仪表盘。
交互功能：
- 选择显示特定类型数据（温度、湿度等）。
- 切换时间范围（如最近 1 小时、最近 24 小时的数据）。
响应式设计：
- 支持移动端与桌面端的访问。

技术选型

HTML + CSS：页面结构与样式。
JavaScript：动态数据处理与页面交互逻辑。
Chart.js 或 ECharts：用于数据可视化。
Mock.js（可选）：模拟物联网数据接口。
Fetch API / Axios：从数据接口获取实时数据。

我要实现这个项目，但你直接给这个代码给我，学习效果又太低了。你现在是一个拥有十年经验的前后端的工程师，你就将这个项目的技术点分成三部分，一步步引导我掌握这些技能，一步步引导我搞定这个项目。

总结

第一部分：构建基础结构，学习 HTML、CSS 和 JavaScript 的基本用法。
第二部分：实现核心功能，如动态数据模拟、图表绘制和交互逻辑。
第三部分：优化数据展示、整合外部接口，并提升用户体验。

你可以按这个框架一步步实现，每完成一部分就对技能点更加熟悉！随时问我，我会为你解决具体问题。

第一部分：基础搭建

目标：学会构建网页的基础结构，理解 HTML、CSS 和 JavaScript 的配合。

技术点

HTML & CSS 基础
- 学习如何用 HTML 构建页面布局。
- 使用 CSS 设计样式，掌握基础布局（如 Flexbox）。
- 为仪表盘划分区域（表格、图表、实时数据显示）。
JavaScript 操作 DOM
- 学习如何通过 JavaScript 操作页面元素（getElementById, querySelector）。
- 实现简单的数据展示逻辑（如在页面显示一个温度值）。

任务

任务 1：创建 HTML 页面
- 包含三个部分：导航栏、仪表盘区和数据记录表。
任务 2：用 CSS 美化布局
- 使用 Flexbox 将仪表盘和记录表区分开。
- 设置一个背景色和标题样式。
任务 3：用 JavaScript 添加动态数据
- 模拟数据（如随机生成温度值），并用 JS 动态插入到仪表盘中。

第二部分：功能实现

目标：掌握 JavaScript 的基本逻辑和库的使用，通过图表展示动态数据。

技术点

动态数据模拟
- 使用 setInterval 定时更新数据。
- 使用 JavaScript 的数组管理和渲染数据。
数据可视化
- 学习如何使用 Chart.js 或 ECharts。
- 创建一个简单的折线图来显示温度变化。
页面交互
- 使用事件监听器（addEventListener）实现按钮点击功能。
- 让用户选择显示的数据类型。

任务

任务 1：用随机数生成模拟数据
- 每隔 5 秒更新一次温度。
- 更新仪表盘显示，并追加到数据记录中。
任务 2：使用 Chart.js 绘制折线图
- 学习如何引入 Chart.js。
- 将温度变化绘制成折线图。
任务 3：添加交互功能
- 用下拉框让用户选择要查看的数据（温度、湿度等）。
- 切换不同时间范围（最近 1 小时、最近 24 小时）。

第三部分：优化与扩展

目标：掌握更复杂的数据展示和优化网页性能的技巧。

技术点

优化数据展示
- 使用 ECharts 的更多功能（柱状图、仪表盘样式）。
- 学习如何切换多个图表。
整合外部数据源
- 使用 fetch 或 axios 从 API 获取数据。
- 如果没有 API，可用 Mock.js 模拟后端数据。
响应式设计与性能优化
- 使用媒体查询实现移动端适配。
- 优化 setInterval 和数据渲染逻辑，提高效率。

任务

任务 1：使用仪表盘图
- 通过 ECharts 创建一个直观的仪表盘视图。
任务 2：整合外部数据
- 模拟从传感器或外部接口获取环境数据。
任务 3：添加响应式设计
- 让网页在不同设备上有良好显示效果。

script.js

// 选取仪表盘和表格
const tempBox = document.querySelector('.dashboardbox1 p');
const lightBox = document.querySelector('.dashboardbox3 p');
const dataLogTable = document.querySelector('#data-log tbody');

// Chart.js 相关变量
const tempChartCtx = document.getElementById('tempChart').getContext('2d');
const lightChartCtx = document.getElementById('LighChart').getContext('2d');
const humidityGauge = document.getElementById('humidityGauge');

// 保存每个图表的数据和时间标签
const tempData = [];
const lightData = [];
const timeLabels = [];

// 初始化折线图函数
function createChart(ctx, label, color) {
  return new Chart(ctx, {
    type: 'line',
    data: {
      labels: timeLabels, // 共用时间标签
      datasets: [{
        label: label,
        data: [], // 动态更新
        borderColor: color,
        borderWidth: 2,
        fill: false,
        tension: 0.1,
      }],
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true,
        },
      },
    },
  });
}

// 创建折线图
const tempChart = createChart(tempChartCtx, 'Temperature (°C)', 'rgb(255, 99, 132)');
const lightChart = createChart(lightChartCtx, 'Light Intensity (Lux)', 'rgb(255, 205, 86)');

// 初始化湿度仪表盘（ECharts）
const humidityChart = echarts.init(humidityGauge);
const humidityOption = {
  tooltip: { formatter: '{a} <br/>{b}: {c}%' },
  series: [
    {
      name: 'Humidity',
      type: 'gauge',
      min: 0,
      max: 100,
      splitNumber: 10,
      axisLine: { lineStyle: { width: 10 } },
      pointer: { length: '70%', width: 5 },
      detail: { formatter: '{value}%', fontSize: 20 },
      data: [{ value: 0, name: 'Humidity' }],
    },
  ],
};
humidityChart.setOption(humidityOption);

// 随机数据生成函数
function generateRandomData(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// 更新仪表盘、图表和表格数据
function updateDashboardAndLog() {
  const temperature = generateRandomData(15, 30); // 温度
  const humidity = generateRandomData(40, 90); // 湿度
  const light = generateRandomData(100, 1000); // 光照

  // 更新仪表盘
  tempBox.textContent = `Temperature: ${temperature}°C`;
  lightBox.textContent = `Light Intensity: ${light} Lux`;
  humidityOption.series[0].data[0].value = humidity; // 更新湿度仪表盘值
  humidityChart.setOption(humidityOption); // 更新湿度仪表盘

  // 获取当前时间
  const timestamp = new Date().toLocaleTimeString();
  timeLabels.push(timestamp);
  tempData.push(temperature);
  lightData.push(light);

  // 限制数据点数量（保持最近 10 个数据）
  if (timeLabels.length > 10) {
    timeLabels.shift();
    tempData.shift();
    lightData.shift();
  }

  // 更新图表数据
  tempChart.data.labels = timeLabels;
  tempChart.data.datasets[0].data = tempData;
  lightChart.data.labels = timeLabels;
  lightChart.data.datasets[0].data = lightData;
  tempChart.update();
  lightChart.update();

  // 更新表格
  const newRow = document.createElement('tr');
  newRow.innerHTML = `
    <td>${timestamp}</td>
    <td>${temperature}</td>
    <td>${humidity}</td>
    <td>${light}</td>
  `;
  dataLogTable.appendChild(newRow);

  // 限制表格行数
  if (dataLogTable.rows.length > 10) {
    dataLogTable.deleteRow(0);
  }
}

// 定时更新数据（每 5 秒）
setInterval(updateDashboardAndLog, 5000);

// 初次调用
updateDashboardAndLog();

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IoT environmental data monitoring dashboard</title>
  <link rel="stylesheet" href="./styles/styles.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

</head>

<body>
  <!-- 导航栏 -->
  <header>
    <h1>IoT Environmental Data Monitoring Dashboard</h1>
    <p>Welcome to my IoT environmental data monitoring dashboard!</p>
    <nav>
      <a href="#dashboard">Dashboard</a> |
      <a href="#data-tables">Data Tables</a>
    </nav>
  </header>


  <!-- 仪表盘区 -->
  <section id="dashboard" class="Dashboard_area">
    <h2>This is Dashboard Area</h2>
    <hr>
    <p>Dashboard area</p>
    <label for="timeRange">Select Time Range:</label>
    <select id="timeRange">
      <option value="1h">Last 1 Hour</option>
      <option value="24h">Last 24 Hours</option>
    </select>
    <div class="dashboard-box">
      <div class="dashboardbox1">
        <canvas id="tempChart" width="400" height="335"></canvas>
        <p>Temperature: --°C</p>
      </div>


      <div class="dashboardbox2">
        <div id="humidityGauge"></div>
        <!-- <p>Humidity: --%</p> -->
      </div>

      <div class="dashboardbox3">
        <canvas id="LighChart" width="400" height="335"></canvas>
        <p>Light Intensity: -- Lux</p>
      </div>
    </div>
  </section>



  <!-- 数据记录表 -->
  <!-- 数据记录表 -->
  <section id="data-tables" class="Data_Logging_Tables">
    <h2>Data Logging Table</h2>
    <hr>
    <table id="data-log">
      <thead>
        <tr>
          <th>Timestamp</th>
          <th>Temperature (°C)</th>
          <th>Humidity (%)</th>
          <th>Light Intensity (Lux)</th>
        </tr>
      </thead>
      <tbody>
        <!-- 数据行将由 JavaScript 动态添加 -->
      </tbody>
    </table>
  </section>


  <footer>
    <p>&copy; 2024 IoT Dashboard. All rights reserved.</p>
    <p>Connect with me:</p>
    <a href="https://github.com/yourusername" target="_blank">GitHub</a> |
    <a href="https://space.bilibili.com/507838758?spm_id_from=333.788.0.0" target="_blank">Bilibili</a>
  </footer>

</body>

</html>

<!-- 在 index.html 的底部引入 -->
<script src="script.js"></script>

style.css
/* styles.css */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #f4f4f4;
}

header {
  text-align: center;
  background-color: #007acc;
  color: white;
  padding: 20px 0;
}

header h1 {
  margin: 0;
  font-size: 2.5em;
}

header nav {
  margin-top: 10px;
}

header nav a {
  display: inline-block;
  padding: 8px 15px;
  /* 增加内边距 */
  background-color: white;
  /* 背景色 */
  color: var(--primary-color);
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
  /* 平滑的过渡效果 */
}

header nav a:hover {
  background-color: var(--primary-color);
  color: white;
}


:root {
  --primary-color: #007acc;
  --secondary-color: #f4f4f4;
  --text-color: #333;
}

body {
  color: var(--text-color);
  background-color: var(--secondary-color);
}

header {
  background-color: var(--primary-color);
}


.Dashboard_area {
  text-align: center;
  padding: 20px;
  background-color: #e6f7ff;
  /* 更清爽的仪表盘背景色 */
  margin: 5px auto;
  width: 80%;
  max-width: 1000px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.dashboard-box {
  background: rgb(244, 244, 248);
  display: flex;
}

.dashboard-box div {

  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.dashboard-box p {
  font-size: 1.5em;
  font-weight: bold;
  margin: 10px 0;
}


/* .dashboardbox1 {
  background: rgb(251, 246, 246);
  width: 80%;
} */
.dashboardbox1 {
  background: rgb(251, 246, 246);
  width: 90%;
  /* 增大容器宽度 */
  padding: 20px;
  /* 增加内边距 */
  margin: 20px auto;
  /* 上下间距 */
  display: flex;
  flex-direction: column;
  /* 纵向排列内容 */
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* 添加阴影 */
}

/* .dashboardbox2 {
  background: rgb(251, 246, 246);
  width: 80%;
} */

.dashboardbox2 {
  background: rgb(251, 246, 246);
  width: 90%;
  /* 增大容器宽度 */
  padding: 20px;
  /* 增加内边距 */
  margin: 20px auto;
  /* 上下间距 */
  display: flex;
  flex-direction: column;
  /* 纵向排列内容 */
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* 添加阴影 */
}

#humidityGauge {
  width: 400px;
  /* 增大宽度 */
  height: 300px;
  /* 增大高度 */
  margin: 20px auto;
  /* 居中 */
}

.dashboardbox2 p {
  font-size: 1.2em;
  /* 调整字体大小 */
  font-weight: bold;
  margin-top: 10px;
}


/* .dashboardbox3 {
  background: rgb(251, 246, 246);
  width: 80%;
} */
.dashboardbox3 {
  background: rgb(251, 246, 246);
  width: 90%;
  /* 增大容器宽度 */
  padding: 20px;
  /* 增加内边距 */
  margin: 20px auto;
  /* 上下间距 */
  display: flex;
  flex-direction: column;
  /* 纵向排列内容 */
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* 添加阴影 */
}

.Data_Logging_Tables {
  text-align: center;
  background-color: #fff5e6;
  /* 数据记录表部分用柔和的暖色 */
  margin: 20px auto;
  padding: 20px;
  width: 80%;
  max-width: 1000px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th,
td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

th {
  background-color: #007acc;
  color: white;
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f4f4f4;
}

tr:hover {
  background-color: #f1f1f1;
}


@media (max-width:1200px) {

  .dashboard-box,
  .data-box {
    flex-direction: column;
    /* 小屏幕下改为纵向排列 */
    align-items: center;
  }

  .dashboard-box div,
  .data-box div {
    width: 90%;
    /* 调整宽度以适应小屏幕 */
    margin-bottom: 20px;
    /* 增加间距 */
  }
}


footer {
  text-align: center;
  padding: 10px 0;
  background-color: #333;
  color: white;
}

footer a {
  color: #66b2ff;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

下一个学习目标。

3. Vue.js 基础

Vue 核心概念：了解 Vue 的响应式系统、组件、指令（如 v-if、v-for、v-model 等）。
Vue 项目管理：学习 Vue CLI 或 Vite，掌握项目创建、管理和打包。
推荐学习顺序：Vue 基础 → 组件化开发 → Vue Router（页面跳转）→ Vuex/Pinia（状态管理）。
目标：能够构建单页面应用并理解 Vue 的核心思想。

原文地址：https://blog.csdn.net/weixin_61387486/article/details/143842630

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Java反射getAnnotations() 和 getDeclaredAnnotations() 的区别和用法
下一篇：如何拆解问题

自动化测试基础知识总结
自动化测试是软件测试活动中一个重要分支和组成部分，随着软件行业发展，市场对软件周期及软件质量要求越来越高，催生出来各种开发模式，比如常见开发模式敏捷开发，同时对我们测试人员提更高的要求，此时，产生自动
阅读更多2024-11-22
buuoj WEB做题笔记
buuctf靶场web类做题笔记
阅读更多2024-11-22
Python蓄水池算法详解与应用案例
蓄水池算法（Reservoir Sampling）是一种用于处理大规模数据流的随机抽样算法。该算法能够在不知道数据流大小的情况下，从数据流中均匀随机地抽取固定大小的样本。每个元素被选中的概率相等，保证
阅读更多2024-11-22
自然语言处理:第六十二章 KAG 超越GraphRAG的图谱框架
一个对大型语言模型（LLMs）友好的知识表示框架。SPG属性被划分为知识和信息领域，也称为静态和动态领域，它们分别与具有强模式约束的决策专长和具有开放信息表示的文档检索索引知识兼容。归功于在构建更有效
阅读更多2024-11-22
闲聊？泳池清洁机器人？
本章就来聊聊泳池清洁机器人行业。"博主本身就身在这个行业~~"，这个行业的前景还是不错的(为什么这么说？)。据统计，目前全球有3692万个泳池，每年呈持续增长态势。预计到2026年
阅读更多2024-11-22
vue学习11.21
v-model:value,也可以写为v-model，默认收集value值。如果写成data:()=>,就变成全局windows的对象了，原型上有的东西，模板上可以直接用，可以直接{{ }}输出
阅读更多2024-11-22
Python数据分析NumPy和pandas（四十、Python 中的建模库statsmodels 和 scikit-learn）
作为建模过程的一部分，可以在一个数据集上拟合模型，然后基于另一个数据集(可能是之前数据集的一部分作为测试集，也可能是后面操作后得到的数据集)评估模型。非数值数据可以通过多种不同的方式转换为模型设计矩阵
阅读更多2024-11-22
深入探索JMeter bin目录中的Properties文件：优化性能测试的关键
是JMeter中的一种机制，用于存储和管理配置信息和参数设置。Properties文件是一种键值对的集合，可以在整个测试计划中共享和使用。它们通常以“.properties”为扩展名，并使用简单的文本
阅读更多2024-11-22
Jmeter中的断言（二）
假设我们需要测试一个Web应用，并验证两个请求的响应数据是否相同。假设我们有一个简单的测试计划，包含一个线程组和一个HTTP请求，并希望验证登录请求的 HTML 响应数据中。假设我们有一个简单的测试计
阅读更多2024-11-22
【实战】使用YOLO11进行驾驶疲劳检测及警报【附源码与详细说明】
【实战】使用YOLO11进行驾驶疲劳检测及警报【附源码与详细说明】
阅读更多2024-11-22