>> JavaScript入門トップに戻る
今回は関数の作り方、実行方法について説明します。
関数の書き方は、
function 関数名(引数){
～処理～
}
と書きます。
C言語みたいに、型は指定する必要はないので、戻り値の型や引数の型を書く必要はありません。
なお、
return 値と書いて戻り値を返すことも出来ます。
次に関数の実行方法ですが、
関数内で関数を実行するには、
function abc(){
関数名(引数);
}
とC言語と同じように書くことで実行することができます。
では、「ボタンをクリックしたら実行する」などユーザの要求に応じて実行させるにはどうしたらよいでしょうか？
基本的に方法は二つあります。
まず、簡単なタグ内に直接指定する方法を紹介します。
まずこんなアラートを表示させる、msg関数を作りました。
↓のボタンを押してみてください。
あいうえお、と表示されましたよね？
このボタン要素のコードはこうなっています。
属性にonclickというものがありますよね？
この属性に値を指定すると、クリック時に値に指定された関数を実行することが出来ます。
msg関数は渡された文字列を、
alert関数という文字を表示させる関数に渡して、ポップアップで出力するものです。
buttonタグ内で、あいうえお、という文字列を渡しているのでそれが表示されているというわけです。
今回はonclickイベントでしたが、他にも色々あります。
これだけたくさんのものがあります。
説明に書かれているイベントが発生したときに該当の処理が実行されます。
イベントによっては、動作しない要素などがありますのでご注意下さい。
もう一つ、javascriptの関数でイベントを設定する方法があります。
●Chorome,Firefoxの場合
対象オブジェクト.addEventListener("イベント名",関数,優先設定)
●IEの場合、
対象オブジェクト.attachEvent("イベント名",関数)
●全てのブラウザ
対象オブジェクト.イベント名=関数
と書きます。
ブラウザによって設定する関数が違いますのでご注意下さい
addEventListenerの第一引数については、
イベント名が少し違って、上の表のonを除いたイベント名になります。
つまり、onLoadイベントなら、"load"と書きます。
第二引数は、関数名をそのまま書くだけです。
第三引数は、イベント発生時の関数の実行優先度を上げるか上げないかをtrueかfalseで指定します。
例えば、親オブジェクトの中に子オブジェクトがあり、全部にクリックイベントを設定していた場合、
全てのオブジェクトでイベントが発生しますが、trueを指定しているオブジェクトから優先して、
実行されるというわけです。
IEの場合はattachEventを使います。
イベント名は、上の表のままでｏｎが付いているのが正しいです。
最後に、全てのブラウザにも有効な設定ものせていますが、
このイベント名もonがついてるものが正しいです。
この方法でのコードの書き方は、イベント名に＝で関数を代入する形なので気をつけましょう。
このようにJavaScriptはブラウザによって色々と関数が違ったりして、
毎回ユーザがどのブラウザで閲覧しているのかをチェックする必要があります。
今回の場合だとよくこのような方法が用いられます。
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入門トップに戻る
関数について
関数の書き方は、
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がついてるものが正しいです。
この方法でのコードの書き方は、イベント名に＝で関数を代入する形なので気をつけましょう。
このように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入門トップに戻る
