Javascriptレシピ②

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

###アラートのポップアップ表示

<input type='submit' value='wanko' onClick='alert('といぷー');'

クリックするとonClick関数が実行される。
alert()でも書ける。

###演算子

算術演算子

足し算　+
引き算　−
掛け算　*
割り算　/
あまり　%

代入演算子
a = a+5; 
a += 5;

a = a-5;
a -= 5;


同じ意味です。

単項演算子

a = 10 % 4;
a++; //3

a--; //2

###onload

onloadはイベントハンドラーです。
ページを読み込んだ後に実行する処理を決めることが出来ます。

window.onload = () => {
    alert('toypoo');
};

単一の要素に対してonloadは単一のイベントハンドラーしか設定できません。
複数指定したい場合はaddEventListenerを使いましょう。

###filterメソッド

配列オブジェクトから特定の条件の配列を新しく生成します。

配列の要素の値value
数値インデックスindex
配列要素を格納した配列オブジェクトを指定できます。

const date = [1,2,3,4,5];
const result =date.filter(value =>{
    return value % 2 ===1;
});

const wanko = ['toypoo','pome','siba'];
const dog = wanko.filte(value => {
    return value ==== 'toypoo';
});

###callback関数

callback関数は他の関数に引数として渡される関数です。
イベントハンドラに多く使われます。

const wanko = () => {
    //
}
pome(wanko);


const wanko = response => {
    const data = this.response;
    console.log('data.name');
}

const sayWanko(){
    const rewuest = new XMLHttpRequest();
    request.open('GET', 'http://',true);
    reques.responseType = 'josn';
    request.addEventListener('load', 
    wanko);
    request.send();
}

###foreachメソッド

配列への繰り返し処理が書けます。

const dogs = ['pome','toypoo','siba'];
dogs.foreach(dog => {
    console.log(dog);
});

配列に対しての処理です、dogという引数を受け取り配列の数分繰り返し処理を行ってくれます。
dogを引数にしていますが引数がaでも動きます。

const dogs = ['pome','toypoo','siba'];
dogs.foreach((dog,number) => {
    console.log(number + 1)+'匹目は'+dog);
});

引数が2つになりました。
第一引数に配列のデータ、第二引数にindex番号を受け取っています。
配列の一番目は0ですので+1してあげる必要があります。

##bind

関数に対してthisや引数を指定、
他の関数との結びつけが出来ます。

function wanko(){
    console.log(this);
}
const dog = say.bind('toypp');
dog();


function wanko(a,b,c){
    return a + b + c;
}
const sum = wanko.bind(null, 10, 10);
console.log(sum());

###onClick

マウスクリックに対しての処理をするイベントハンドラーです。

document.getElementById('button').onClick = () => {
    document.getElementById('text').innerHTML = 'わんこ';
};


document.getElementById('button').onClick = () => {
   this.classList.toggle('wanko');
};

###index

indexメソッドは文字列や配列に指定した文字があるか探して、あればその位置を変えしてくれます。

const arr = ['a','b'.'c'];
const index = arr.indexOf('b');
console.log(index);

先頭は０、存在しない場合は-１です。

第二引数に開始位置を指定することも出来ます。

###クラス

classを使うことでオブジェクト指向プログラミングが簡潔に書けます。

class Wanko {
    constructor(name) {
        this.name = name;
    }
    say() {
    console.log(this.name);
    }
}

const dog = new Wanko('toypoo');
dog.say();

newでWankoクラスのインスタスを生成するたびにconstructorによる初期化が行われます。

###replaceメソッド

replaceメソッドでは置換処理を行うことが出来ます。
文字列による置換と正規表現による置換が可能です。

const str 'わんこ<br>わんこ<br>わんこ';
const dog = str.replace(/<br>/g,'\n');
console.log(dog);