アラート確認&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";
}