>> JavaScript入門トップに戻る

関数について

今回は関数の作り方、実行方法について説明します。
関数の書き方は、

function 関数名(引数){
~処理~
}

と書きます。
C言語みたいに、型は指定する必要はないので、戻り値の型や引数の型を書く必要はありません。
なお、
return 値と書いて戻り値を返すことも出来ます。

次に関数の実行方法ですが、
関数内で関数を実行するには、

function abc(){

関数名(引数);

}

とC言語と同じように書くことで実行することができます。

では、「ボタンをクリックしたら実行する」などユーザの要求に応じて実行させるにはどうしたらよいでしょうか?
基本的に方法は二つあります。
まず、簡単なタグ内に直接指定する方法を紹介します。
まずこんなアラートを表示させる、msg関数を作りました。

function msg(string){
	alert(string);
}

↓のボタンを押してみてください。

あいうえお、と表示されましたよね?
このボタン要素のコードはこうなっています。

<button onclick="msg('あいうえお');">テストボタン</button>

属性にonclickというものがありますよね?
この属性に値を指定すると、クリック時に値に指定された関数を実行することが出来ます。
msg関数は渡された文字列を、
alert関数という文字を表示させる関数に渡して、ポップアップで出力するものです。
buttonタグ内で、あいうえお、という文字列を渡しているのでそれが表示されているというわけです。

今回はonclickイベントでしたが、他にも色々あります。


イベント名 説明 対象要素
onClick クリック時 checkbox,button,radio,reset,submit、等他多数
onMouseOver マウスカーソルが上にきた時 div,img等多数
onBlur カーソル消失時 textarea,select、text、等他多数
onFocus フォーカス取得時 textarea,select、text、等他多数
onSelect テキスト選択時 text、textarea等、テキストを扱うもの
onChange フォーム内容変更時 textarea,select、text
onSubmit submitボタンによる処理実行時 form
onReset リセットボタン押下時 form
onLoad ページ読み込み時 body
onUnload ページクローズ時 body

これだけたくさんのものがあります。
説明に書かれているイベントが発生したときに該当の処理が実行されます。
イベントによっては、動作しない要素などがありますのでご注意下さい。

もう一つ、javascriptの関数でイベントを設定する方法があります。

●Chorome,Firefoxの場合
対象オブジェクト.addEventListener("イベント名",関数,優先設定)
●IEの場合、
対象オブジェクト.attachEvent("イベント名",関数)
●全てのブラウザ
対象オブジェクト.イベント名=関数

と書きます。
ブラウザによって設定する関数が違いますのでご注意下さい
addEventListenerの第一引数については、
イベント名が少し違って、上の表のonを除いたイベント名になります。
つまり、onLoadイベントなら、"load"と書きます。
第二引数は、関数名をそのまま書くだけです。
第三引数は、イベント発生時の関数の実行優先度を上げるか上げないかをtrueかfalseで指定します。
例えば、親オブジェクトの中に子オブジェクトがあり、全部にクリックイベントを設定していた場合、
全てのオブジェクトでイベントが発生しますが、trueを指定しているオブジェクトから優先して、
実行されるというわけです。

IEの場合はattachEventを使います。
イベント名は、上の表のままでonが付いているのが正しいです。

最後に、全てのブラウザにも有効な設定ものせていますが、
このイベント名もonがついてるものが正しいです。
この方法でのコードの書き方は、イベント名に=で関数を代入する形なので気をつけましょう。

このようにJavaScriptはブラウザによって色々と関数が違ったりして、
毎回ユーザがどのブラウザで閲覧しているのかをチェックする必要があります。
今回の場合だとよくこのような方法が用いられます。

if(window.addEventListener){
	~addEventListenerの処理を書く~
}else if(window.attachEvent){
	~attachEventの処理を書く~
}else{
	~全てのブラウザに有効な処理を書く
}


windowというオブジェクトからaddEventListenerとattachEventの関数を指定します。
これで、その関数が有効かどうかを調べることができます。
もし、最初のif文でtrueになるということは、そのブラウザはfirefoxかchromeということです。
IEだとfalseになるので、次のif文に行きます。
次のif文では、attachEvent関数が使えるブラウザならtrueになります。
これがtrueになるのはIEなので、IEだけattachEventの関数を実行することが出来ます。
elseはそれ以外の場合なので、他のブラウザは全部ここに引っかかって適切に処理されます。

このようにしてイベントを設定することができるわけです。
まだ、オブジェクトの取得方法等を説明していないので、よくわからなかったかもしれませんが、
覚えておいて下さい。

次回はif,switch,for,while文について説明します。

>> 【if,switch,for,while文について】に進む
>> JavaScript入門トップに戻る
●更新履歴
2016/08/16 Java入門ページにページを幾つか追加
2016/04/08 Java入門ページ作成
2016/03/09 メニューレイアウト変更。ブラウザキャッシュのクリアをお願い致します。
2016/03/09 PDOトランザクション、自動コミットモードをオフ追加
2016/03/09 PDO 例外処理 try catch追加
2016/03/09 PDO update文実行追加
2016/03/09 PDO delete文実行追加
2016/03/09 PDO insert文実行追加
2016/03/09 PDO selectでデータを取得、fetchAll、queryメソッド追加
2016/03/09 PDO bindValueとbindParamの違い追加
2016/03/09 PDO prepare プリペアドステートメントの使い方追加
2016/03/04 ソースコードをクリップボードにコピーする機能を追加
2016/03/04 C言語、C++のページのソースコードを一部修正
2014/01/31 C言語関数一覧ページに11ページほど追加
2014/01/31 C言語関数一覧ページに30ページほど追加
2014/01/30 C言語関数一覧ページ作成中
2013/07/01 レイアウト変更に伴いブラウザキャッシュのクリアをお願いします。
2013/07/01 MySQL入門ページ作成
2013/07/01 PHP入門ページにSQLite学習項目追加
2013/06/25 ドメイン変更、レイアウトを一部変更
2013/03/14 レイアウトを一部変更
2012/08/13 C言語よくある課題・宿題ページ開設!
2012/08/13 シューティングゲーム作成第33章追加!
2012/08/11 ドメイン変更&サーバ移設完了
2012/04/21 シューティングゲームプログラミング第2,3章の内容を修正
2012/04/19 シューティングゲームプログラミング第2章の内容を修正
2012/04/03 Googleカスタム検索を設置!
2012/04/03 シューティングゲームプログラミング第32章追加!
2012/04/03 シューティングゲームプログラミング第31章追加!
2012/03/31 サイトをリニューアルしました!
2012/03/25 シューティングゲームプログラミング第30章追加!
2012/03/19 シューティングゲームプログラミング第29章追加!
2012/03/16 シューティングゲームプログラミング第28章追加!
2012/02/27 シューティングゲームプログラミング第27章追加!
2012/02/03 シューティングゲームプログラミング第26章追加!
2012/01/31 シューティングゲームプログラミング第25章追加!
2012/01/20 シューティングゲームプログラミング第23,24章追加!
2012/01/11 シューティングゲームプログラミング第22章追加!
2012/01/05 トップページ、ゲームプログラミング関連のトップページのデザインを変更
2012/01/04 シューティングゲームプログラミング第21章追加!
2012/01/01 シューティングゲームプログラミング第20章追加!
2011/12/25 シューティングゲームプログラミング第19章追加!
2011/12/22 シューティングゲームプログラミング第18章追加!
2011/12/18 シューティングゲームプログラミング第17章追加!
2011/12/17 シューティングゲームプログラミングページOPEN!
2011/11/21 ゲームプログラミングページOPEN!
2011/11/21 サイトデザインを大幅に変更
2011/11/17 TOPページのデザインを変更。相互リンクページに、複数サイト追加。
2011/11/06 WINAPI学習ページ(33~36章)追加
2011/11/05 WINAPI学習ページ(20~32章)追加
2011/10/27 WINAPI学習ページ(14~19章)追加
2011/10/21 WINAPI学習ページ(13章)追加
2011/10/21 サイトマップ、連絡ページ追加
2011/10/17 WINAPI学習ページ(6~11章)追加
2011/10/16 WINAPI学習ページ(1~5章)追加
2011/10/13 全体のレイアウト変更
2011/10/07 PHP学習ページ(8~11章)追加
2011/10/06 PHP学習ページ(1~7章)作成
2011/10/06 JavaScriptリファレンスページ作成
2011/10/05 C言語学習ページ発展編(10~14章)追加
2011/10/04 C言語学習ページ発展編(1~9章)追加。
2011/10/03 HTML/CSSリファレンスのページ追加。(個々の詳細ページは作成中)
2011/09/30 HTML学習ページ(8章)追加
2011/09/29 JavaScript学習ページ(12~17章)追加
2011/09/28 JavaScript学習ページ(1~11章)追加
2011/09/27 HTML学習ページ(4~7章)追加
2011/09/26 C言語学習ページ(27章)追加、C++学習ページ(17章)、HTML学習ページ(1~3章)追加
2011/09/25 C言語学習ページ(23~26章)を追加
2011/09/24 C++学習ページ(9~16章)追加
2011/09/23 C++学習ページ(3~8章)追加
2011/09/22 C言語の学習ページ(22章)とC++学習ページ(1~2章)追加
2011/09/21 C言語の学習ページ(15章~21章)を追加
2011/09/20 C言語の学習ページ(10章~14章)を追加
2011/09/19 サイト作成(随時更新予定)