1.入力
2.出力
3.分岐
4.繰り返し
この4つを意識していく事が大事です。
今回は、主に「関数」と「イベント」について解説していきます。
さらに、いよいよjQueryに入っていきます。
1.jQueryの準備
まず、jQueryを使える様にします。jQueryのファイルを読み込む事で、jQueryが使える様になります。
今回は、googleで使えるCDNを利用しています。
Hosted Libraries | Google Developers
jqueryのcdnの記述をコピーします。
今回は、ver3.xを使います。
HTMLファイルのhead要素の中にペーストします。
これで、jQueryの文法を使う事が可能になります。
jQueryを読み込んだ行の下に、scriptタグを記述します。
この中にコードを書いていきます。
2.jQueryの基本的な書き方
jQueryは、以下の記述の内側に書いていきます。
$(function(){
//ここにjQueryの文法でコードを書く
});この$(function(){ })の中にコードを書く事で、一度HTMLを読み込んで、javascriptを実行する準備が整った後に、コードを実行してくれます。
要するに、例えば、「bodyタグに何かクラスをつけたい」という様な命令をjQueryで書いたとしても、bodyタグをブラウザが読み込む前に実行してしまっては、bodyタグにクラスをつけられません。
$(function(){ })の中にjQueryのコードの文法でスクリプトを記述した場合、きちんと該当のタグなどのHTMLが読み込まれて、準備OKになった段階でスクリプトをスタートさせてくれます。
3.関数について
3-1.基本的な関数を作る
それでは、jQueryの準備ができたので、いよいよ関数を作っていきます。関数とは、ある一定の処理をまとめて書いておくことの出来る機能です。
関数を作ることを、定義すると表現します。
また、一度書いておけば、使いたい時に好きな様に実行する事が出来ます。
関数の定義の仕方は、以下の様な感じです。
function 関数名([引数]){
処理
}関数名は、好きな名前でOKです。引数は省略可能です。引数自体の説明は後で行います。
では、簡単な関数を定義して実行してみます。引数はとりあえず省略します。
今回は、関数の定義は、$(function(){ })の外に、
関数の実行は$(function(){ })の中に記述していきます。
$(function(){
});
function kansu (){
console.log("関数を実行します");
}kansuという関数を定義しました。処理の内容は、console.logで文字を出力しているだけです。処理の内容は、今までとほぼ変わりませんが、関数の定義の文法としては問題ありません。
ですが、この状態で、ブラウザで見てみても、なにも起こりません。
関数は、定義だけしても何も起こらず、関数の実行をする必要があります。
関数の実行の仕方は、以下の通りです。
関数名([引数]);
引数は、省略可能です。（説明は後で）
では、以下の様にコードを書き換えてみます。
$(function(){
kansu();
});
function kansu (){
console.log("関数を実行します");
}
//>「関数を実行します」が出力される
$(function(){ })の中で、kansu();を記述すると、
「関数kansuを実行してください。」という意味になり、function kansu(){ }の中身が実行されます。
結果、console.logが実行されます。
※今の時点で、関数の有用性を理解するのは非常に難しいです。なぜなら、ファイルを読み込むのと同時に関数を実行している事になるので、関数を定義せず、そのまま処理を記述した場合と、結果が全く同じだからです。
イベントの説明になったら、関数の有用性がわかると思いますので、ひとまずそういうものだと思っておいてください。
3-2.引数について
今まで省略してきた引数に関して説明します。なるべくわかりやすく日本語で説明すると、
関数の実行時に、定義された関数に、渡すことのできる値の事です。
具体的な例で考えていきます。
先ほど作った関数kansuは、「関数を実行します」という言葉をconsoleに出力します。
引数を使うと、関数の実行時に指定した言葉をconsoleに出力する様にする事ができます。
$(function () {
kansu("引数でコンソール");
});///////////////////
function kansu(mes) {
console.log(mes);
}kansuを実行する時に、引数として「引数でコンソール」という文字列を、定義されたkansuに渡す事ができます。
kansuに渡されたデータは、mesという名前の変数に置き替わり、console.log(mes)で、出力されます。
以上の様な流れの処理になります。
尚、mesは好きな名前で大丈夫です。つまり、以下の様な関数の定義方法でも問題ありません。
function kansu(abc){
console.log(abc);
}また、複数の引数を渡すことも出来ます。
関数名(引数1,引数2,,,,,,);
function 関数名( hiki1 , hiki2,,,,,, ){
console.log(hiki1);
console.log(hiki2);
}以上の様に、引数を複数使いたい場合は、各々順番に半角のカンマで繋いで記述します。
3-3.戻り値について
前述の関数kansuは、consoleを出力するだけが処理内容でした。
ですが、場合によっては、関数に処理させた結果を、使いたい場合があります。
例えば、二つの数値の値を受け取り、平均を出してくれる様な関数を用意した時に、その関数が作った平均の値を取得する方法が戻り値を使ったプログラムです。
引数とは、データの向きが逆になります。
関数の実行元 --> 定義された関数（引数の流れ）
関数の実行元 <-- 定義された関数（戻り値の流れ）
$(function(){
var tensuu = heikin(40,60);
console.log("平均点は、" + tensuu);
});
function heikin(num1,num2){
var re = (num1 + num2) / 2;
return re;
}
//>「平均点は、50」が出力
少し処理の流れが複雑になってきました。整理して考えましょう。
1.$(funciton(){ })内で、変数tensuuを定義。関数heikin(40,60)を実行
2.関数heikinの中で、変数reが定義される。値として、num1に40が、num2に60が代入された後、その二つを足して２で割った値（平均のこと）を代入。
3.関数heikinの中で、変数reを、戻り値としてreturnする。
4.$(funciton(){ })内の、変数tensuuに関数heikinから、戻り値として戻ってきた50を代入
5.console.logで「平均点は、tensu」を出力
以上の様な流れです。
プログラムがどの様に処理されるのか、その流れを捉える事が大事です。
4.イベントについて
イベントとは、ユーザーの動作に合わせて処理を実行させる仕組みのことです。
日本語にした時に、「〇〇したら」と略される物がイベントだと思って、概ね差し支えありません。
例えば、
「クリックしたら」
「マウスを動かしたら」
「マウスオーバーしたら」
「マウスが離れたら」
「スクロールしたら」
「画面サイズを変えたら」
などなど
イベントには様々な物があります。
では、「ボタンをクリックしたら、文字を出力する」というプログラムを作っていきます。
$(セレクタ).on(イベント名,処理内容);
以上の様な内容になります。
セレクタは、cssセレクタが使えます。
イベント名には、今回はclickが入ります。
処理内容には関数を指定します。
HTML
<body>
<button></button>
<div></div>
</body>
JS
$(function(){
$("button").on("click",btnClick);
});
function btnClick(){
$("div").append("<p>クリックされた</p>");
}
「buttonタグをクリックしたら、関数btnClickを実行してください」という内容になります。
また、関数btnClickは、divタグに「<p>クリックされた</p>」というHTMLを追加しています。
よって、ボタンをクリックするたびに、「クリックされた」という文字が画面に表示されていきます。
尚、上記のコードは、以下の様に書き換えることも可能です。
$(function(){
$("button").on("click",function(){
$("div").append("<p>クリックされた</p>");
})
});
関数btnClickの代わりに、function〜が入ります。
この方法だと、btnClickを別途定義する必要がなくなります。よって関数の名前を考える必要がありません。
上記の書き方のfunction〜の事を、「無名関数」と呼びます。
ただし、この書き方だと、同じ内容を別の処理で使いまわす事が出来ません。（無名な関数なので、関数を呼び出せない。）
イベントの設定をする際は、やりたい内容が他でも使いまわす必要があるのかないのかを見極めて、通常の関数を使うか、無名関数を使うかを選択します。
4.まとめ
今回は、関数とイベントに関しての話が中心でした。
関数だけしか知らないと、何のためにあるか解りにくいですが、ユーザーの動作が動く条件である、イベントと合わせて考えると解りやすいと思います。
以下、on(イベント名,処理)の、イベント名の内、よく使うものを列挙します。
| イベント名 | よく使う対象（セレクタ） | 意味 |
|---|---|---|
| resize | window | 画面がリサイズされたら |
| scroll | window | 画面がスクロールされたら |
| keydown | window | キーボードが押されたら |
| click | 各要素 | 〇〇がクリックされたら |
| mouseover | 各要素 | マウスが乗ったら |
| change | selectタグなど | selectタグが変更されたら |
