Webデザイン・マーケティング課 授業30日目

1〜3時間目 javascript（jQuery）演習
オリジナル教材

今日は、関数とイベントに関してがほとんど。

■関数に関して

行いたい処理をまとめて書いておいて、任意のタイミングで実行することが出来る。
この後に説明するイベントと合わせて使うことが多い。

関数は、
1.関数を定義する
2.関数を実行する

この二つの手順でできている。また、定義する方法がJavascriptの場合何パターンかある。

//関数kansu1を定義
function kansu1() {
    console.log('関数1です');
}

//関数kansu2を変数を使う形で定義
const kansu2 = function () {
    console.log('関数2です');
}

//関数kansu3をアロー関数で定義
const kansu3 = () => {
    console.log('関数3です');
}

上記はいずれも関数の定義方法。最近は、一番最後のアロー関数を使う人が多い印象。

//kansu1を実行
kansu1();

//kansu2を実行
kansu2();

//kansu3を実行
kansu3();

関数の実行は、定義方法とは関係なく全部同じ。

・引数について

関数には、引数というデータを渡すことが出来る。この引数を関数の中で演算に使うことが出来る。

//関数taxinを定義。引数に1.1をかけて開発者ツールに出力
const taxin = (kakaku) => {
    console.log(kakaku * 1.1);
}

//関数taxinを実行。引数に1000を入れる。
taxin(1000);

taxin(数字);
こんな感じで実行すると、数字に1.1をかけてくれる関数。
関数taxin内では、kakakuという変数に数字が代入される。このkakakuという変数はなんでも良い。

const taxin = (kakaku) => {
    console.log(kakaku * 1.1);
}

const taxin = (abc) => {
    console.log(abc * 1.1);
}

上記二つの関数はどちらも同じ。

・戻り値について

関数で演算したデータを呼び出し元に戻すことが出来る。

const large_num = (num1, num2) => {
    let larger;
    if (num1 > num2) {
        larger = num1;
    } else {
        larger = num2;
    }
    return larger;
}

上記は二つの引数を持ち、どちらか大きい方を呼び出し元に返す。

const num = large_num(120,300);
console.log(num);
->300

こんな風に、呼び出し元に値を返したい時にreturnを使う。
なおreturnはプログラムを終わらせるという意味があるので、かならず関数の最後に記述する。じゃないと、return以降の記述は実行されない。

■イベントについて

ユーザーの動作のタイミングに合わせて処理を実行させる事。
〇〇したら、xxxをする。
ボタンをクリックしたら、yyyをする。
「xxxをする」の部分は、関数で指定する。（この関数はよくリスナー関数と呼ばれる）

//関数btn_clickを定義
const btn_click = () => {
    console.log('ボタンがクリックされました');
}

//idがbtnのボタン要素を変数btnに代入
let btn = document.querySelector('#btn');

//btnにイベントとリスナー関数を設定
btn.addEventListener('click', btn_click);

まずリスナー関数を定義する。
クリックイベントを設定したい要素を変数に取得する。
その後イベントの種類とリスナー関数を設定する。

・無名関数について

イベントに設定できる、名前のない関数のこと。
通常イベントは、リスナー関数を定義してから設定するが、この方法だとあらかじめ関数を定義する必要がない。

//idがbtnのボタン要素を変数btnに代入
let btn = document.querySelector('#btn');

//btnにイベントとリスナー関数を設定
//リスナー関数は、あらかじめ定義するのではなく、無名関数で指定
btn.addEventListener('click', () => {
    //追加されるp要素を作成
    let html = document.createElement('p');
    //作った要素に文字を書く
    html.innerHTML = 'クリックされた';

    //要素を追加したい場所のHTMLを取得
    let target = document.querySelector('#content');
    //要素を追加したい場所に、追加したい要素を出力
    target.appendChild(html);
});

イベントリスナーを定義する時に、以下の様に定義する。

addEventListener('click',()=>{処理内容})

こう書くと無名関数で書ける。名前をつける必要がないので楽に記述できるが、他に呼び出す方法がない（名前がないから）ので、関数自体を使いまわすことは出来ない。

■真偽値

真偽値は、文字列や数値と違い、使える値があらかじめ決まっている。

• true

• false

以上のどちらかの値しか使えない。

if文の条件に使うことがおおい。

//変数checkにtrueを代入
let check = true;

//idがbtnの要素を変数に代入
let btn = document.querySelector('#btn');

//btnにイベントとリスナー関数を設定
//リスナー関数は無名関数
btn.addEventListener('click', () => {

    //条件にcheckを使ったif文を書く
    //条件が成り立つ方に、check=falseを、
    //条件が成り立たない方に、check=trueを代入
    if (check) {
        check = false;
        //クラスを付け加えるには、一度変数にhtml要素を代入し、
        //変数名.classListに値を代入する
        let target = document.querySelector('#text');
        target.classList = 'show';
    } else {
        check = true;
        let target = document.querySelector('#text');
        target.classList = '';
    }
});

こんな感じのコードを書くと、一つのボタンをクリックするたびに処理をif文で分けることが出来る。今回は、該当のHTMLにクラスを付けることで表示非表示を切り替えている。

■jQueryについて

jQueryは、javascriptのライブラリ（ちょっと簡単に書ける様にしたもの）。
まずは、googleのCDNでjQueryを読み込み、セレクタとメソッドの説明をした。

$(セレクタ).メソッド();

セレクタに対して、メソッドをする。
こんな感じになるのが、基本的な文法。

セレクタは、CSSと同じ。メソッドは、とりあえず今日はtext()のみ試してみた。

■まとめ

ひとまずjavascriptのオリジナル教材は一通り終わった。
この教材は、実戦向きというよりどちらかというと文法をしっかり覚えるということに注力しているので、今後は少しづつ実戦向けのコードを書いていこう。