プログラムの製作5
JavaScriptの命令、htmlタグの説明
使用した命令等の意味を説明致します。
<で始まるのは、htmlタグ、他はJavaScriptの命令になります。
|
<input type="button" value="追加" onclick="tsuika()"> |
ボタン。クリックすると関数tsuika()を実行します。
htmlではスペースを入れても無視されます。スペース半角1文字を空けたいときは とします。
|
<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の表現。 idをdddd(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) は 文字列txtの2文字目(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(); |
フレーム myFrameにhtml文書を表示します。'aaa'が表示されます。
フレームを作成しない場合、myFrame.は不要です。
myFrame.document.open();でフレーム内のすでに表示された文書は消去されます。
|
setTimeout('kensaku()',100);//0.1秒後 検索 |
関数kensaku()を 0.1秒後に実行します。
JavaScriptでは 何秒待つという命令はありません。
setTimeoutを利用します。
以上で使用した命令等の説明を終わります。
最後に、作成したプログラムをアプリ化する方法を説明致します。
アプリ化すると、メールで友達に送付したり、ストアで配信できるようになります。
Monaca というサービスを利用します。(非営利であれば無料で利用できます)