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