HOME   続く

 

プログラムの製作5

 

 

JavaScriptの命令、htmlタグの説明

使用した命令等の意味を説明致します。

<で始まるのは、htmlタグ、他はJavaScriptの命令になります。

 

<input type="button" value="追加" onclick="tsuika()">

ボタン。クリックすると関数tsuika()を実行します。

 

&nbsp;

htmlではスペースを入れても無視されます。スペース半角1文字を空けたいときは&nbsp;とします。

 

<iframe name="myFrame" height=400 width=350 frameborder="1"></iframe>

フレームmyFrameを高さ400ピクセル 幅350ピクセルで作成します。

フレームを作ると、ボタンとデータを表示する場所を別にすることができます。

 

<script type="text/javascript">

これ以降のJavaScriptが有効になります。<script>でも可。

 

var hi= new Array();

変数を使用するとき var の後ろに変数名を書きます。

文字、数値など区別しません。文字を入れれば、文字。

varを記入しないと、グローバル変数 (すべての関数の中で利用できる)となります。

関数の外では、varを記入してもグローバル変数となります。

new Array();は 配列であることを意味します。

文の終わりに ; を記入します。

 

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

関数sread()を実行します。

 

function kensaku(){ }

関数kensaku()を定義します。{ }の中に実行する内容を記載します。

 

kstr = prompt("検索する文字を入力してください","");

文字をキーボードから入力し、変数kstrにいれます。

 

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

kstrが空白またはnull(キャンセルが入力)のとき、関数を終了する。

||は「または」を意味する。

returnは関数を終了する。

 

for (var i in tx){ }

配列txのすべての要素について繰り返す。

{ } の中で、tx[i] として配列を利用できる。

 

if (tx[i].indexOf( kstr , 0 )>=0){  }//文字を見つけた

tx[i]0文字目以降に文字列kstrがあるか調べる。あったら{ }を実行。 

 

myFrame.document.getElementById('0001').innerHTML ='<p>aaa</p> '

フレームmyFrameの中に記載したhtml文書で、id '0001'を見つけ、'<p>aaa</p> 'に置き換える。

文字列は ' または "で挟む。

 

'<div id='+ dddd(i)+' style="color:blue;">'+ hi[i] + ' ' +tx[i] +'</div>'

htmlの表現。 iddddd(i) (関数ddddに変数iを渡して作成された文字 例'0001')として、色をblueで、配列 hi[i] tx[i]をつないだもの。

+ は文字列をつなぐ意味。

 

flg = confirm(tx[i] +"\n次を検索しますか?");

tx[i] +"\n次を検索しますか?" を表示し、キーボードより はい いいえを選択させる。

'\n' は改行を意味する。

 

if (flg == false) return;//終了

上で 「いいえ」が押されたら関数を終了する。

==は 一致の判断。=では不可。ifの条件は( )で囲むこと。 

 

alert(kstr+'は見つかりませんでした');

kstrの内容 'は見つかりませんでした' を表示する。

 

myFrame.document.getElementById('0002').addEventListener( "click" , henko , false );

フレームmyFrameの中に記載したhtml文書で、id '0002'を見つけ、クリックしたらhenkoを実行するよう設定する。

 

Number(event.target.id); //idを数値化

event.target.idはクリックしたhtml文書のidが入る。

Number('0123') は 文字列 '0123' を数値 123に変換する。

 

hi[i]=hizeke();//現在の時間

関数hizeke()を実行し、戻り値を配列hi[i]に入れる。

 

tx.push(str);

配列txの最後に変数strを追加する。

 

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();

現在の日付、時間の取得。変数year,month,day,hour, minuteが作成される。 

 

return a;

関数を終了し 戻り値 aを返す。

 

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

数値 a "00"のフォーマットに変換する。

moji.slice(-2)は文字列mojiの後ろから2文字を取る。

 

txt += hi[i] ;//配列をつなぐ 

文字列txtの後ろに文字列hi[i]をつなげる。

txt = txt + hi[i]; と同じ。

 

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

文字列txtの最後の1文字を取り去る。

txt.substr(2,3) は 文字列txt2文字目(0文字目が先頭)から3文字を切り取る。

txt.length は 文字列txtの文字数。

 

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

ローカルストーリッジに"メモ" として場所を作り、その中に文字列txtを書き込みます。

ローカルストーリッジはアプリごとに場所が確保されます。アプリごとに2Mバイト程度利用できます。

もちろんスマホの電源を消しても消去されません。

スマホの操作で消去できます。(注意!)

 

hi=[]; //配列消す

配列を初期化します。登録した内容が消去されます。

 

txt = localStorage.getItem("メモ");//ローカルストレージ読み込み

ローカルストーリッジの"メモ"から読み込み、変数txtにいれます。

 

htx = txt.split("\n"); //\nで区切り配列へ

文字列txt'\n'(改行コード)で分割し、配列htxに記入します。

htx[0] htx[1] ... に記入されます。

 

myFrame.document.open();

myFrame.document.write('aaa');

myFrame.document.close();

フレーム myFramehtml文書を表示します。'aaa'が表示されます。

フレームを作成しない場合、myFrame.は不要です。

myFrame.document.open();でフレーム内のすでに表示された文書は消去されます。

 

setTimeout('kensaku()',100);//0.1秒後 検索

関数kensaku() 0.1秒後に実行します。

JavaScriptでは 何秒待つという命令はありません。

setTimeoutを利用します。

 

以上で使用した命令等の説明を終わります。

 

最後に、作成したプログラムをアプリ化する方法を説明致します。

アプリ化すると、メールで友達に送付したり、ストアで配信できるようになります。

Monaca というサービスを利用します。(非営利であれば無料で利用できます)

 

HOME   続く