カナコム　岩崎システム教育

HOME 前　次

プログラムの製作2

2.追加入力すると、保存される

プログラムを作ります。

キーボードからメモを入力し、配列の最後に追加します。

現在の日時をYYYY/MM/DD HH:MMのフォーマットで作るのが厄介です。

//メモを入力し、配列に追加

function tsuika(){

var str = prompt("メモを入力してください","");

if (str==""||str==null) return; //入力なく終了

hi.push(hizeke());

tx.push(str);

}

//現在の日時を　YYYY/MM/DD HH:MMのフォーマットで作成

function hizeke(){

var hiduke=new Date(); var year = hiduke.getFullYear();var month = hiduke.getMonth()+1;var day = hiduke.getDate();

var hour = hiduke.getHours();var minute = hiduke.getMinutes();

var hi= year+"/"+ dd(month) +"/"+ dd(day) +" "+ dd hour) +":"+ dd(minute) ;

// 00フォーマット

function dd(a){

return ("00"+a).slice(-2);

}

参考　命令の覚え方

Javascriptでは大文字、小文字も区別して入力が必要です。また間違えても、どこが間違っていると教えてくれません。(別の場所でエラーが発生する場合が多い)

ミスを防ぐために、記憶に頼らず、下記のような命令の一覧表を作っておき、これを貼り付けて修正していきます。

この命令一覧表は、勉強する中で理解した命令を貼り付けて作成します。

上で作成した日付関係の処理も貼り付けてありました。

このプログラムをtest2.htmに追加します。

ローカルストレージを配列へ読み込み、今回製作したプログラムを実行し、配列の内容を表示します。

var hi= new Array();

var tx= new Array();

sread(); //ローカルストレージを配列へ読み込み

tsuika(); //メモを入力し、配列に追加

hoji(); //配列表示

//メモを入力し、配列に追加

function tsuika(){

var str = prompt("メモを入力してください","");

if (str==""||str==null) return; //入力なく終了

hi.push(hizeke());

tx.push(str);

}

//現在の日時を　YYYY/MM/DD HH:MMのフォーマットで作成

function hizeke(){

var hiduke=new Date(); var year = hiduke.getFullYear();var month = hiduke.getMonth()+1;var day = hiduke.getDate();

var hour = hiduke.getHours();var minute = hiduke.getMinutes();

var hi= year+"/"+ dd(month) +"/"+ dd(day) +" "+ dd hour) +":"+ dd(minute) ;

// 00フォーマット

function dd(a){

return ("00"+a).slice(-2);

}

function swrite(){

　(このプログラムには間違っている箇所があります。)

Chrome を立ち上げ、URLの入力欄に　

\C:\prog\test2.htm

と入力します。

何も表示されません。

プログラムがどこか間違っていると思われます。

ファンクション f12を押すと、Chromeのデバック画面が表示されます。

Console画面にエラーの行が表示され、test2.htm:27 をクリックするとSources画面に下記表示されます。

間違っているところを探し、修正し、test2.htmを上書き保存します。

　　dd hourの(を忘れました。function の最後の }を忘れました。

　　戻り値の設定　return hi;　を忘れました。

function if for などを使用するとき時は、tabを入力し、段落を右にずらし、処理の範囲を明確化します。

var hi= new Array();

var tx= new Array();

sread(); //ローカルストレージを配列へ読み込み

tsuika(); //メモを入力し、配列に追加

hoji(); //配列表示

//メモを入力し、配列に追加

function tsuika(){

var str = prompt("メモを入力してください","");

if (str==""||str==null) exit; //入力なく終了

hi.push(hizeke());

tx.push(str);

}

//現在の日時を　YYYY/MM/DD HH:MMのフォーマットで作成

function hizeke(){

var hiduke=new Date(); var year = hiduke.getFullYear();var month = hiduke.getMonth()+1;var day = hiduke.getDate();

var hour = hiduke.getHours();var minute = hiduke.getMinutes();

var hi= year+"/"+ dd(month) +"/"+ dd(day) +" "+ dd(hour) +":"+ dd(minute) ;

return hi;

}

// 00フォーマット

function dd(a){

return ("00"+a).slice(-2);

}

function swrite(){

赤丸のところを押し、再読み込みします。

「メモを入力してください」と表示されました。

基本的なエラーは無くなり、プログラムが実行されたことを意味します。

テスト追加と入力してみます。

1行空いてしまいました。

Chromeのデバック機能を利用し、原因を調べます。

14をクリックして、ブレークポイント(実行中止)を設定します。

再読み込みすると、14行で停止します。

Watch に追加し、　hi.length (配列hiの件数)を表示します。

4と表示されました。

デモデータ3件しか登録しておりません。4は異常です。

原因は sread() で1件余計に配列に記録していることです。さらに、この原因はswite()でローカルストーリッジに書き込むとき、最後に　"\n" がついているためとわかりました。

データの最後に"\n"がつくのを不可とし、swite()を下記のように修正します。

\nは　エスケープシーケンスと呼ばれ、改行コードを意味し、2文字ではなく1文字です。

function swrite(){

var txt="";

for (var i in hi){

txt += hi[i] + tx[i] +"\n"; //配列をつなぐ　改行\nで区切り

}

txt=txt.substr(0,txt.length-1); //最後の1文字をとる

localStorage.setItem("メモ" , txt); //ローカルストレージへの書き込み

}

test1.htm のswite()も修正、実行し、ローカルストレージの内容を正しく修正します。

その後　test2.htm を実行します。

正しく表示されました。

配列を swrite() でローカルストーリッジに書き込めば完成となります。

HOME 前　次