関数の基本
他のプログラム言語と同様、JavaScriptでも関数を作成することが可能です。特に、イベントハンドラを利用してJavaScriptを 実行する場合、イベントハンドラから関数を呼び出すケースが多くあります。ステップ03では、関数の作成方法および実行方法に ついて学習します。
3.1 関数とは…？
ステップ02ではイベントハンドラの値にJavaScriptを直接記述する方法を解説しました。しかし、実行するJavaScriptが複雑になってくると
、このような記述はあまり適しません。そこで、STEP01の「Sample1_1.html」のようにイベントハンドラの値に関数を指定してJavaScriptを実行
します。
関数は複数の命令文を１つにまとめたものであり、「Sample1_1.html」では以下のようになります。
▼Sample1_1.html（抜粋）
また、似たような処理を繰り返し実行する場合にも関数の作成が必須となります。たとえば、先ほどの例を関数を使わずに記述
した場合、全てのonClickイベントに複雑なJavaScriptを記述しなければいけません。これでは効率的なJavaScriptなど期待できません。
つまり、JavaScriptを習得するにあたり、関数は極めて重要な存在となるわけです。
なお、関数名の後にあるカッコ内には、関数の引数を記述します。引数の利用方法については、ステップ07で詳しく解説します。
3.2 関数の作成
それでは、さっそく関数を作成する方法を解説していきましょう。ステップ01でも解説したように、JavaScriptは<script type="text/JavaScript">～</script>の間の記述するのが基本です。よって、関数もscriptタグの間に記述します。
関数を作成する際は以下のように記述を行い、「････････」の部分に関数が呼び出された際に実行されるJavaScriptを記述します。これを関数の定義といいます。
function 関数名（）｛････････｝
関数名は半角英数字で自由に指定できますが、必ず最後に（）を付けるのを忘れないでください。もちろん、｛････････｝の内部にある改行は無視されるため、各文の最後に「；」（セミコロン）を記述する必要はありません。
（関数の指定例）
3.3 関数名に指定出来ない文字
先ほど関数名は自由に指定出来ると解説しましたが、予約語に指定されている文字は例外となります。以下に示した予約語を関数名に指定することはできません。また「alert」など、JavaScript（メソッド）になっている文字も関数名には適しません。
■予約語の一覧
| abstract | boolem | break | byte | case |
| catch | char | class | const | continue |
| comment | debugger | default | delete | do |
| dobule | else | enum | export | extends |
| false | final | finally | float | for |
| function | goto | if | implements | import |
| in | instanceof | int | interface | label |
| long | native | new | null | packge |
| private | protected | public | return | short |
| static | super | switch | synchronized | this |
| throw | throws | transient | true | try |
| typeof | var | void | while | with |
そのほか、関数名は以下のルールに従って指定する必要があります。
・関数名の最初の１文字は、大文字または小文字のアルファベットとなります。関数名を数字で始めることはできません。
・全角文字を関数名に使用することはできません。また、スペース、「，」（カンマ）、「？」（疑問符）などの記号を関数名に含めることもできません。
3.4 イベントハンドラから関数を呼び出す
最後に、イベントハンドラから関数を呼び出す方法を解説しておきましょう。関数で定義したJavaScriptを実行する場合、イベントハンドラ
名の値には"関数名（）"だけを記述します。この際も、最後に（）記述するのを忘れないでください。
イベントハンドラ名＝"関数名（）"
演習
（１）以下のようなHTMLファイルを下にあるテキストボックスに作成し、onClickイベントで関数「PhotoInfo()」 を実行してみましょう。
※この演習で使用する画像のURLは「images/risu.jpg」です。
※このホームページの実行結果は、ステップ02の演習（１）と全く同じになります。
※ここに直接入力できます。↓↓（テキストボックス）
→STEP02へ
→STEP04へ