JavaScript自習

こんばんは

プログラミングの自習記録をつけようと思っていたんですが本屋について書くのが楽しくそちらで、ひと記事書いてしまいました。

イベントハンドラー

JavaScriptで記述された、マウスの動きといった動作・操作に対して特定の処理を与えるための命令のことである。

何かアクションした際にイベントを発生させるんですよね。
HTMLでonclick="○○()"という記述をして、それをJSの関数で呼びおこすみたいなイメージですね。

ちなみに下記が主な一覧

click以外は正直見た事ない・・・

イベントリスナー

ハンドラーと用途としては恐らく同じ・・・
違いとしてハンドラーの処理は基本的に1回しか使えないが、イベントリスナーは引数を変える事で、ハンドラーより処理できるバリエーションが多いとの事

対象要素.addEventListener( 種類, 関数, false )

第1引数:イベントの種類を指定
第2引数:関数を指定
第3引数:false

関数設定方法に3パターンついて

1.外部の関数を設定

処理が複雑で外部の関数を使う際はこちら

対象要素.addEventListener(種類, a, false);


function a() {
 
 //ここに処理を記述する
 
}

2.無名関数を設定
第2引数へそのまま関数を記述している。オーソドックスな形式

対象要素.addEventListener(種類, function() {
 
 //ここに処理を記述する
 
}, false);

3.アロー関数

対象要素.addEventListener(種類, () => {
 
 //ここに処理を記述する
 
});

例

var btn = document.getElementById('btn');

btn.addEventListener('click',() =>{
    cosole.log("ok");
    )
}

コールバック関数

・他の関数に引数として渡す関数
・特定の処理を意図したタイミングで実行できる

以下は、コールバック関数func1を、func2の引数として渡しています。

function testFunc(callback) {

 setTimeout(function() {
   console.log('A');
   callback();
 }, 2000)

}

function myCallback() {

     console.log('B');

}

testFunc(myCallback);

testFuncで実行の指示がでているAが実行された2秒後にmyCallbackで指示しているBが出ます。

初期化

エラーを防ぐ場合などによく使用されます。

条件分岐やfor文、配列で以下のような記述を見かけた事あると思います。

var flag = 0;
var item_data = [];

ちなみに

var flag;

にするとundefindが定義されます。

フォームページの入力欄などで正常に情報を入力できていない際にアラートを出す処理で条件分岐を使うんですが、最初にフラッグを明確にする事で条件分岐が楽になります。

例えばflagを0で定義していたら、下記みたく

if(!flag ==0)

①0
②0ではない

と2つの条件分岐で済む。

自分で言うのもなんですが、間違っている事を書いている気がします（笑）
ただアウトプットすれば、誰かが指摘などしてくれる事もあるのでとりあえず発信はしていこうと思います。

終