校园电子告示板(三)校园电子告示板(三)

校园电子告示板(三)校园电子告示板(三)

未进行登入前。

校园电子告示板(三)校园电子告示板(三)

用户成功登入后。

有关超文件标示语言 enotice.html 的注释,解构如下:

校园电子告示板(三)校园电子告示板(三) 行数 2 :这是网页显示语言的设定,如讯息中包含中文,必需加上这行「 en-HK 」。
行数 3 :设定网页每隔三分钟( 180 秒)会重新整理,电子告示板的讯息可以不断更新。
行数 6-10 :在网页显示学校名称,及使用较早前在 www.timeanddate.com 产生出的标示语言,显示当天的日期。
行数 14-15:加入按钮「 Authorize 」及「 Sign Out 」,方便用家进行身份确定,以拿取相关 google 试算表的资料。
行数 17 : JavaScript 的开始标籤,结束标籤在行数 100 。
行数 18-19 :将在较早前开启 Google 试算表 API 的时候,所产生的 CLIENT ID 及 API key 複製在 给。
行数 44 :「 Sign Out 」按钮的 style.display 设定为「 none 」,在进行身份确定后,便不会显示该按钮。 校园电子告示板(三)校园电子告示板(三) 行数 59 :将在较早前开启 Google 试算表的 Spreadsheets ID 複製 中。
行数 60 :指示出储存资料的工作表名称 message ,及储存格的位置 A2 至到 E 栏,网页会在这个範围的储存格中找寻资料。
行数 63 :建立一个新的日期物件,名称为「 d 」,并设定为当天的日期。
行数 64-66 :抽取日期「 d 」的日( dd )、月( mm )及年( yy )的资料,并以数字方式表示出来。
行数 67 :建立变量「 dayOfToday 」,将当天的日期以「日/月/年」的方式表示出来,当中的日和月将会以两个位数字表示,例如 2018 年 3 月 7 日表示方式是 07/03/2018 。 slice ( -2 )的方法可提取字符串中倒数第二个至最后一个字符。
行数 68-69 :建立 teacher_array 及 mess_array 两个阵列 Array ,分别储存负责老师的名字及讯息内容。
行数 74-82 :在 Google 试算表中已储存资料的每一列,检查 Date 栏位中的日期是否代表今天的日期( row[1]==dayOfToday ),如果这个条件成立, 系统便会将该列的讯息 row[2] 和负责老师的名字 row[3] 複製度 mess_array 及 teacher_array 中。
行数 83-87 :完成了複製今天的信息和负责老师的名字到阵列后,便使用 innerHTML 将阵列中的资料显示出来。在这句式中使用了一个计数器 k 、模数运算子 % 及阵列的长度( .length ),便可以将阵列中的资料循环地显示出来。
行数 88 :使用 setInterval ,设定每个讯息中间相隔的时间,「 1,000 」代表一秒 。总结

Google 的教育服务在学校普及化,相信只要动动脑筋,并配合在 Google 平台中的各种不同工具,老师和学生也可以研发不同的专案,强化学校的学与教,优化学校的行政工作。另外,在此感谢圣公会圣马利亚堂莫庆尧中学的李天民老师,在这一个电子告示板的专题中,给予本人许多宝贵的意见。



相关推荐