アラート確認&flag
- 今回はアラート確認とflagを使った処理をまとめました。
ポップアップウィンドウの表示
- アラート表示
alert(表示するもの);
"文字列" ex) alert("おはよう");//ダイレクトに入力した時
"変数名" ex) alert(cnt);//変数の中の値が表示される
"文字列"+変数名 ex) alert("cnt="+cnt)//jsで+は文字列を連結するときに使う
- JavaScriptの間違えやすいところ
a=1;
b=4;
c=a+b
___
alert("a+b="+a+b); // +が連結とみなされるため、(14)となってしまう
alert("a+b="+(a+b)); // 5
flagを立ててボタンを制御する
// グローバル変数定義
// html文書がロードされた瞬間に実行される
//変数の定義しかかけないエリア
alert("グローバル変数の定義");
var val;
val flag = 0;//ボタンが押されたあとに効かなくする※flag(フラグ)を立てる。最初は0を代入。
// オンロードイベント
// <body>に指定された各エレメントが表示され準備が整ったら実行される
window.onload = function (){
alert("オンロードイベントが起きました");
for(var i = 0; i < 2; i++){//jsの変数には$は記述しない
document.getElementById("tx" + (i + 1)).value = "";
}
}
function f1(){//ここはプログラムをコピーする項目で1番目のボタンの処理
if(flag == 1) return;//return命令のあとに数を記述しなくても良い。flagが0ならあとの処理を行い、1ならばあとの処理をしない。
flag = 1;//ボタンを押すとflagが1になる。
val = document.getElementById("tx1").value;//tx1の中身がvalに代入
document.getElementById("tx2").value = val;//tx2がvalに代入
document.getElementById("b1").value = "押さないで";//b1ボタンに押さないで
document.getElementById("b2").style.left = "300px";//文字数が変化するので隣のボタンとぶつからないように
alert("テキストボックスの内容がコピーされました。");
}
function f2(){//コメント内は簡略化した記述方法
document.getElementById("tx1").style.color = "orange";
document.getElementById("tx2").style.color = "purple";
document.getElementById("tx1").style.left = "200px";
document.getElementById("tx2").style.top = "120px";
}
別の記述方法(for文を使わない)
// グローバル変数定義
// html文書がロードされた瞬間に実行される
//変数の定義しかかけないエリア
alert("グローバル変数の定義");
var val;
var flag = 0;//ボタンが押されたあとに効かなくする※flag(フラグ)を立てる。最初は0を代入。
var t1,t2;
// オンロードイベント
// <body>に指定された各エレメントが表示され準備が整ったら実行される
window.onload = function (){
alert("オンロードイベントが起きました");
t1 = document.getElementById("tx1");
t2 = document.getElementById("tx2");
t1.value = "";
t2.value = "";
}
function f1(){//ここはプログラムをコピーする項目で1番目のボタンの処理
if(flag == 1) return;//return命令のあとに数を記述しなくても良い。flagが0ならあとの処理を行い、1ならばあとの処理をしない。
flag = 1;//ボタンを押すとflagが1になる。
val = t1.value;//tx1の中身がvalに代入
t2.value = val;
document.getElementById("b1").value = "押さないで";//b1ボタンに押さないで
document.getElementById("b2").style.left = "300px";//文字数が変化するので隣のボタンとぶつからないように
alert("テキストボックスの内容がコピーされました。");
}
function f2(){//コメント内は簡略化した記述方法
var t1 = document.getElementById("tx1");
var t2 = document.getElementById("tx2");
t1.style.color = "orange";
t2.style.color = "purple";
t1.style.top = "120px";
t2.style.left = "200px";
}