More than 3 years have passed since last update.

Javascriptレシピ①

Last updated at 2019-12-22Posted at 2019-12-18

Javascriptの簡単なメモです。
アプリ制作に応用できる基本レシピですので、参考にされたい方はどうぞ。

関数の書き方

function wanko(){
         }

wankoという関数名をつけて関数宣言しています。
おなじみですね。

const wanko = function(){
      }

const wanko = () => {
      }

無名関数というやつです。
関数はデータの方として存在しているのでこのような書き方が可能になります。

Functionオブジェクトのオンストラクタを使った書き方もあるのですが、ほぼ間違いなく使わないので省略します。

const p = document.createElement('p');
p.textContent = 'wanko';
documen.body.appendChild(p);

これを関数にすると


function toypoo(){
    const p = document.createElement('p');
    p.textContent = 'wanko';
    documen.body.appendChild(p);
}

コード自体はdocument.createElment(p)でp要素を作成
p要素のtextContentをwankoに
bodyにp要素を付与しています。

toypooという関数が出来ましたね、toypoo();で呼び出せます。

ボタン
このように書くとボタンを押したらtoypoo関数が呼び出されます。

HTMLファイルが読み込まれたらwankoと表示します。


window.onload = function(){
    console.log('wanko');
}

window.addEventListner('load', function(){
    console.log('wanko');
})

Javascriptでは引数を複数指定できます。

function wanko(pome,toypoo){

    }

//引数にpomeとtoypooを指定することで関数内でpomeとtoypooが使えるようになります。

wanko(1,2);

//それぞれpomeとtoypooに対応しています。

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

引数にcallback関数を指定しているので2秒経過後に引数に指定した関数が実行されます。

function wanko(toypoo, pome){

    return toypoo+pome;
}

if(wanko(7,5) > 3){

 console.log('wan');
}  else {
       console.log(wanwan);
}

returnで返り値を戻すことで普通の値として関数を使えるようになりました。

続く