プログラムの製作3
3.修正もできる。
修正したいメモをクリックしたら、そのメモが修正できるようにします。
まず、クリックしたらプログラムが起動するよう修正する必要があります。
プログラムを作りtest2.htmに追加します。
tsuika()は実行しませんので//をつけてコメントにします。
|
<script type="text/javascript"> var hi= new Array(); var tx= new Array(); sread(); //ローカルストレージを配列へ読み込み //tsuika(); //メモを入力し、配列に追加 hoji(); //配列表示 clickset();//クリック設定 function clickset(){ for (var i in hi){ document.getElementById(dddd(i)).addEventListener( "click" , henko , false ); } } function henko(){ alert('変更するid='+event.target.id) } //メモを入力し、配列に追加 function tsuika(){ |
Chrome を立ち上げ、URLの入力欄に
\C:\prog\test2.htm
と入力します。
表示された行をクリックすると、henko()が実行されます。
henko()ではクリックされたidが表示されます。idは配列の添え字を意味します。
henko()を下記のように修正します。
コメントを修正入力し、配列hi txを変更します。
|
<script type="text/javascript"> var hi= new Array(); var tx= new Array(); sread(); //ローカルストレージを配列へ読み込み //tsuika(); //メモを入力し、配列に追加 hoji(); //配列表示 clickset();//クリック設定
function clickset(){ for (var i in hi){ document.getElementById(dddd(i)).addEventListener( "click" , henko , false ); } } // クリックしたメモを修正し配列を変更 修正 function henko(){ // alert('変更するid='+event.target.id) var i=Number(event.target.id); //idを数値化 var str=tx[i];//現在のメモ str = prompt("メモを変更してください",str);//現在のメモを表示&修正 if (str==""||str==null) return; //入力なく終了 hi[i]=hizeke();//現在の時間 tx[i]=str;//変更したメモ document.getElementById(dddd(i)).innerHTML =('<div id='+ dddd(i)+'>'+ hi[i] + ' ' +tx[i] +'</div>'); //変更内容を画面に表示 } //メモを入力し、配列に追加 function tsuika(){ |
Chrome を立ち上げ、URLの入力欄に
\C:\prog\test2.htm
と入力します。
2行目をクリックします。
メモを修正すると、画面も修正されます。(配列も修正される)
4.検索もできる。
検索したい文字を入力したら、その行を検索し、その行の色を変えるプログラムを作成します。
kensaku()を作成し、test2.htmに追加します。
|
<script type="text/javascript"> var hi= new Array(); var tx= new Array(); sread(); //ローカルストレージを配列へ読み込み //tsuika(); //メモを入力し、配列に追加 hoji(); //配列表示 clickset();//クリック設定 kensaku();//検索実行 function kensaku(){ var kstr = prompt("検索する文字を入力してください",""); if (kstr==""||kstr==null) return; //入力なく終了 for (var i in tx){ if (tx[i].indexOf( kstr , 0 )>=0){ //文字を見つけた document.getElementById(dddd(i)).innerHTML =('<div id='+ dddd(i)+' style="color:blue;">'+ hi[i] + ' ' +tx[i] +'</div>'); //検索結果を青色で表示 return;//終了 } } alert(kstr+'は見つかりませんでした'); } function clickset(){ |
\C:\prog\test2.htm を実行します。
なぜかデータが表示されません。
Javascript ではデータの表示が遅れることがあるようです。
kensaku();//検索実行
を 0.1秒後に実行するよう、次のように変更します。
setTimeout('kensaku()',100);//0.1秒後 検索
今度は表示されました。
「生年」という文字を検索してみます。
検索した行が青色で表示されました。完成です。
以上で基本的な機能4つを作成しました。
これから、これらの機能を実行するボタンの配置、データ表示ウインドウの設置など、システムを完成させます。