LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

JavaScript 21天入门:练手项目之我的任务管理(二):搭建项目框架

admin
2024年10月29日 22:14 本文热度 382

接前一天的内容。

需求已经清楚了,就一起要搭建项目的框架。

考虑到目前没有讲过任何前端框架,为了简化学习,这次示例里不采用任何框架。

项目的结构如下:

taskmgr/ ├── css/ │   └── styles.css ├── js/ │   └── script.js └── index.html 

创建 HTML 页面

在本地某个路径下,比如说 C:\learning:

  • 新建一个文件夹taskmgr,然后使用 VS Code 打开此文件夹。

  • 在 VS Code 中新建一个文件 index.html。

  • 在 index.html 文件中,输入!,得到默认的 HTML 代码。

  • 修改 title 为 “我的任务管理”。

  • 在 body中粘贴以下代码:

    <h1>我的任务管理</h1> <input type="text" id="task-input" placeholder="输入新任务" /> <button id="add-task-btn">添加任务</button> <ul id="task-list"></ul> 

这样,我们就有基本的 HTML 代码,它显示的效果如下。

💡 希望你还记得这里 Live Server 扩展的使用,它在 VS Code 的右下方,如果你还没有安装,参考 HTML 入门里的教程安装此插件。

添加 CSS 文件

接下来,我们添加 CSS 文件并链接到网页中。

  • 在 VS Code 中新建文件夹 css,并在此文件夹下新建文件styles.css

  • 在 styles.css中添加以下代码:

    /* 简单的CSS样式 */ body {   font-family: Arial, sans-serif;   margin: 20px; }  .task {   display: flex;   justify-content: space-between;   margin-bottom: 10px; }  .task.completed {   text-decoration: line-through; } 
  • 在 index.html 文件的 head 标签下添加 css 的链接。

<link rel="stylesheet" href="./css/styles.css" type="text/css" /> 

这之后,文件结构如下:

页面效果并没有太大变化,就不截图了。

添加 JavaScript 文件

最后来添加一个 JavaScript 文件。

  • 在 VS Code 中新建文件夹 js,并在此文件夹下新建文件script.js

  • 在 script.js中添加以下代码用于暂时验证我们的添加是工作的,这部分代码在后面去除。

    const taskList = document.getElementById('task-list'); taskList.innerText = '暂时没有任务。'; 
  • 在 index.html 文件的 body 标签最后添加 js 的链接。

    <body>   <!-- 此处是其它代码,以下引用放在最后-->   <script src="./js/script.js"></script> </body> 

这样之后文件结构如下:

刷新页面的话,会看到下方多了一行文字 “暂时没有任务。”,表明 JS 代码工作了。

总结

好了,如果你按照前面的步骤一步一步完成了,那么你就拥有了练手项目的基本结构。

基于这个结构,明天就可以开始完成功能。

今天的内容相对简单,回顾了之前的 HTML 页面的创建和引用 CSS、JavaScript 文件。

如果这一块还有不熟悉的,可以回头复习一下 HTML 和 CSS 基础。

一起期待明天吧。


该文章在 2024/10/30 15:12:07 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved