1 2 3

JavaScript 初探

初次学习JavaScript,用JS写了一个计划表生成工具。

项目链接:计划表生成工具

JavaScript是一个神奇的语言。它既不像Java原生地支持类和继承,也不如Python声明变量方便,更兼闹出”===“这样的麻烦。但我依旧深知它的强大,尤其是在可视化这一方面,在接触qtwebengine的时候已经感受过一次了。目前,我学习JS的平台是W3Schools廖雪峰的网站

话说这是我自学JS以来写的第一个程序,求轻虐( ̄▽ ̄)

我的初衷

我的初衷是制作一个习惯统计工具,用来分析我在长期计划上的坚持能力。于是照例我对它做了一个需求分析。

习惯统计工具的需求分析:

  • 需要用户能够注册。即能够声明我是谁,并且把我和我的数据绑定。
  • 需要将数据存在文件里,而不是存在缓存文件里。
  • 需要按时间戳对生成的数据进行统计。
  • 需要对最终结果制作统计图表。

通过分析,我发现静态网页很难实现第一第二步。能不能实现我不敢下定论,但肯定有技术难度。目前,我只有一个由GitHub page托管的静态网页,因此我选择退而求其次。先学习生成一个单一的表格,来记录当天计划的执行情况。我把这个工具叫做计划表生成工具

需求分析

计划表生成工具好比是习惯统计工具的一个子系统。习惯统计工具面向的是连续多天,而计划表生成工具只面向单独一天。

计划表生成工具的需求分析:

  • 一个UI界面(前端)
  • 一个允许用户做输入、选择和修改操作的数据流(后端)
  • 一个最终显示的表格(前端)
  • 判断此工具是否easy to use,找到不好用的因素并改进 (测试)

此时我们的big picture就已经明确。战略定了,下面来定战术。

步骤分析

(一)添加计划

对于前端UI,首先我们需要一个textarea,用来接收每项计划的内容。还需要一个按钮,点下这个按钮时,将文本框内的信息添加到计划列表。为了便于存储,我为计划(item)设计了一个类。

这个类的声明如下:

var Items = {
    	name: "",
    	isCheck: "false",
		   isDelete: "false"
	};

可以看出这个类有三个值。它们分别表示该对象的名称,是否完成,以及是否删除。每次添加计划,用以下代码实例化这个类(items),生成一个对象(item):

var item = Object.create(Items);

(二)生成表格

这一步要把复选框(checkbox)和按钮(button)都和每一行的计划绑定。那么如何绑定呢?

要知道,用for loop遍历subArray的过程,就是生成表格内容的过程。所以,checkbox和button也都是在这次遍历中生成的。那么,我们就可以在它们的生成过程中,创建它们的id,并把id和计划对应起来。

具体到代码中,我用了i.toString(10)将循环数转成string类型,然后加到id上。于是,第一项计划对应的checkbox的id就是”cb0”, 对应的button的id就是”btn0”, 以此类推。

for (i = 0; i < subArray.length; i++) {
	var index = i+1;
	body += '<tr>';
	body += '<td>' + index.toString(10) + '</td>';
	body += '<td>' + '<input type="checkbox" id=\"cb' + i.toString(10) + '\" onclick="isChecked(this);">' + '</td>';
	body += '<td>' + '<input type="button" id=\"btn' + i.toString(10) + '\" onclick="isDeleted(this);">' + '</td>';
	body += '</tr>';
}

然后在勾选复选框或者删除的时候,只需要把前面的”cb”和”btn”去掉,剩下的数字i带入subArray(),得到的subArray(i)就表示着该checkbox或者button对应的计划。

(三)下载表格

这一步在我编程之前,还不知道用什么方法实现。最后被我查到了一段代码,它能在静态网页下生成文件并提供下载。

	function download(filename, text) {
		var element = document.createElement('a');
		element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
		element.setAttribute('download', filename);

		element.style.display = 'none';
		document.body.appendChild(element);

		element.click();

		document.body.removeChild(element);
	}

技术总结

总体来说,这三步都不困难。我花了大约8小时写这个project,其实还是吃亏在初学。前期两小时左右,在画图、规划、分析、简化功能……直到把野心降低到我能完成的程度。接着连续编了四小时的程序,整个项目就从无到有做出来了。然后又花了一些时间修改CSS,美化页面。第二天上午又花了近两小时,把Enter键变成“添加计划”的快捷键,并用Shift + Enter替代原本Enter键的功能。这是easy to use上的改进。

食用指南

点这里打开工具。

使用说明:

  1. 在文本框中输入你的计划,点击“添加计划”按钮,将你的计划添加至计划列表。
  2. 点击“生成表格”按钮,生成计划表。通过勾选表格中的复选框,告诉后台你的完成情况。
  3. 点击“下载表格”按钮,下载计划完成统计表。

输出结果:

#NameDone
1逛街
2刷leetcode×
3学雅思

操作演示:

演示

附录

主要函数和变量之间的关系:

textarea
|
addElement()

objArray
|
submit()

subArray
|
finalSheet()

final_sheet