情報マネジメント戦略Ⅱ 第七回～第七回データをhtmlで表示～

第7回ですね。

プログラミング演習2（Webプログラミング2）でHtml,JavaScriptは実施しているものと思います。

※JavaScriptは、良い評価をもらうには、結構頑張らないとですかね？
※講義の内容をそのまま出すだけなら、コピペでいけそうですね。

第七回課題概要
- ～内容編～
講義の内容を動かそう
独自色を出す
- 課題の考察
- ボタンを増やす
提出
- パワポです！
まとめ

第七回課題概要

～内容編～

以下の流れのようですね。

データを作成
データをJavaScriptのファイルに保存
htmlでデータ表示
課題の発展として各自独自色を出す

講義の内容を動かそう

1.データ作成

データ作成・・・教授のyoutube動画と資料をもとに、Excelでデータを作りましょう。
画像作成・・・グラフ用の画像を作成しておきましょう

2.データをJavaScriptのファイルに設定

1.のyoutubeを見ながらデータ作成した際に、「logdata.js」を作成したかと思います。

以下のような感じになりましたかね？

var dataset=&#91;
{'date':'1619103600000','type':'4'},
{'date':'1619103600000','type':'1'},
{'date':'1619103600000','type':'2'},
{'date':'1619103600000','type':'1'},
{'date':'1619103600000','type':'1'},

～～～(略)～～～

{'date':'1627657200000','type':'4'},
{'date':'1627657200000','type':'1'},
{'date':'1627657200000','type':'1'},
{'date':'1627657200000','type':'4'},
{'date':'1627657200000','type':'1'}];

var dataset=[

{'date':'1619103600000','type':'4'},

{'date':'1619103600000','type':'1'},

{'date':'1619103600000','type':'2'},

{'date':'1619103600000','type':'1'},

～～～(略)～～～

{'date':'1627657200000','type':'4'},

{'date':'1627657200000','type':'1'},

{'date':'1627657200000','type':'4'},

{'date':'1627657200000','type':'1'}];

3.htmlファイルの作成

JavaScriptのコードは、htmlファイルに記載する感じですかね。

サンプル

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>[情報マネジメント戦略2]第7回課題</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="logdata.js">
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function showhistogram(argv)
{

    var argv;
    var i;
    for(i=0; i<datelist.length; i++)
    {
        (argv==0)&&(document.images[i].height = parseInt((epo[datelist[i]]/max)*100));
    }
    return 0;
}
</SCRIPT>
</HEAD>

<BODY>
学籍番号<BR>
氏名<BR>
http://ryoma-style.com/<BR>
<HR>
<DIV onClick="showhistogram(0)">show</DIV>
<HR>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

var i, j;
var max = 0;

//
var epo=new Object();
var datelist=new Array();

for(i = 0; i<dataset.length; i++)
{
    (epo[dataset[i].date]) || (epo[dataset[i].date] = 0);
    epo[dataset[i].date]++;
    (max < epo[dataset[i].date]) && (max = epo[dataset[i].date]); //カッコ
}

datelist=Object.keys(epo);
datelist.sort();

//
document.write('<TABLE BORDER="1">');
document.write('<TR>');

for(i = 0; i<datelist.length; i++)
{
    document.write('<TH>');

    var tar = new Date(eval(datelist[i]));
    document.write(tar.getMonth()+1);
    document.write('/');
    document.write(tar.getDate());
    document.write('</TH>');
}
document.write('</TR>');

document.write('<TR VALIGN="BOTTOM" ALIGN="CENTER" HEIGHT="100">');
for(i = 0; i < datelist.length; i++)
{
    document.write('<TD><IMG SRC="bar.png" width="50" height="0"></TD>');
}

document.write('</TR>');
document.write('</TABLE>');
</SCRIPT>
</BODY>
</HTML>

<!DOCTYPE html>

<HTML>

<HEAD>

<TITLE>[情報マネジメント戦略2]第7回課題</TITLE>

</SCRIPT>

function showhistogram(argv)

{

var argv;

var i;

for(i=0; i<datelist.length; i++)

{

(argv==0)&&(document.images[i].height = parseInt((epo[datelist[i]]/max)*100));

}

return 0;

}

</SCRIPT>

</HEAD>

<BODY>

学籍番号<BR>

氏名<BR>

http://ryoma-style.com/<BR>

<HR>

<HR>

var i, j;

var max = 0;

var epo=new Object();

var datelist=new Array();

for(i = 0; i<dataset.length; i++)

{

(epo[dataset[i].date]) || (epo[dataset[i].date] = 0);

epo[dataset[i].date]++;

(max < epo[dataset[i].date]) && (max = epo[dataset[i].date]); //カッコ

}

datelist=Object.keys(epo);

datelist.sort();

document.write('<TABLE BORDER="1">');

document.write('<TR>');

for(i = 0; i<datelist.length; i++)

{

document.write('<TH>');

var tar = new Date(eval(datelist[i]));

document.write(tar.getMonth()+1);

document.write('/');

document.write(tar.getDate());

document.write('</TH>');

}

document.write('</TR>');

document.write('<TR VALIGN="BOTTOM" ALIGN="CENTER" HEIGHT="100">');

for(i = 0; i < datelist.length; i++)

{

document.write('<TD><IMG SRC="bar.png" width="50" height="0"></TD>');

}

document.write('</TR>');

document.write('</TABLE>');

</SCRIPT>

</BODY>

</HTML>

4.表示

ここまでに以下のファイルができたかと思います。

MEMO

・bar.png
・logdata.html
・logdata.js

●htmlをダブルクリックして開きましょう

●Showをクリックしてみましょう

独自色を出す

課題の考察

各自考えて色々機能ををつけてみましょう

MEMO

・グラフの色を変えてみる
・土日の色を変えてみる
・データを合計してみる
・特定の曜日だけ表示してみる

ボタンを増やす

例えばね・・・

<HR>
<DIV onClick="showhistogram(0)">show</DIV>
<DIV onClick="showhistogram(1)">type1</DIV>
<DIV onClick="showhistogram(2)">type2</DIV>
<DIV onClick="showhistogram(3)">type3</DIV>
<DIV onClick="showhistogram(4)">type4</DIV>
<DIV onClick="showhistogram(5)">type5</DIV>
<HR>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function showhistogram(argv)
{    //授業の通り
    if(argv == 0) {
	//Show
    } else if(argv == 1) {
	//処理1
    } else if(argv == 2) {
	//処理2
    } else if(argv == 3) {
	//処理3
    } else if(argv == 4) {
	//処理4
    } else if(argv == 5) {
	//処理5
    }
}