JavaScript【 function 】 ~ 関数の作り方

colmun_main7977

関数は、プログラムで行う処理を記述して 一つのまとまりにしたもので、JavaScript では、function というキーワードを使って記述します。
今回は、プログラムの中核をなす関数の作り方を紹介します。

目次

 
1.関数とは
2.onClick で関数を呼び出す
3.onload イベントで関数を呼び出す

1.関数とは

 
関数は、プログラムで行う処理を記述して 一つのまとまりにしたものです。

例えば、実行ボタンをクリックした際に 入力値の合計額を計算するようなプログラムは、次のように組み立てます。

入力値を全て加算する関数を作成
 ↓
実行ボタンクリック時に、作成した関数を呼び出す

上記のように関数を作成すると、実行ボタンが複数の場所に設置された場合でも、各実行ボタンのクリック時に 同じ関数を呼び出せば良いことになります。
 
 
関数は、一連の処理を記述するものもありますが、サイトの中で共通する処理を記述した関数を作成して、必要な各場面で使い回すようなものもあります。

プログラムが大きくなると、同じ内容の処理をあちこちで行うことがありますが、その都度 同じ処理を記述すると、長くて読みづらいプログラムになってしまいます。

そのような場合には、同じ処理を 1 つの関数で定義して、必要に応じて その関数を呼び出すという形で記述すると、プログラムがシンプルで読みやすくなります。
また、処理内容に変更が生じた際にも、修正が 1 カ所で済むという 運用上のメリットもあります。

同じような処理が何度も出てくる場合は、関数の記述方法を工夫して、シンプルで運用し易いプログラムを考えることが重要です。
 
 
JavaScript では、function キーワード使って、関数を次のように記述します。

function 関数名(引数1,引数2,・・・){

  //処理内容

  return 返り値;

function キーワードに続けて、任意の関数名を記述します。

関数を呼び出す際に 関数で使用する値を渡したい場合は、カッコ内に 引数を指定します。
引数は数に制限がなく、複数の引数を指定する場合は、カンマ( , )で区切って指定します。

引数を指定しない場合は、関数名の後に 空のカッコを記述します。

また、関数を実行して処理を行った結果、呼び出し元に必要な値を返したい場合は、return というキーワードを使って、返り値を記述します。
特に返り値がない場合は、return の記述は不要です。

▲目次へ戻る

 

2.onClick で関数を呼び出す

 
function キーワードを使って作成した関数は、必要な場所で呼び出して使用します。

ボタンをクリックしたタイミングで JavaScript の関数を呼び出す場合は、HTML の input 要素内で、次のように記述します。

<input type=”button” onClick=”関数名( )”>

input 要素の OnClick 属性に、関数名を指定します。
 
 
下のサンプルは、ボタンがクリックされた時に アラートでメッセージを表示するプログラムです。

表示ボタンをクリックしてみて下さい。

  

 
ソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {
    alert("表示ボタンがクリックされました!");
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px;">
    <input type="button" value="表示" onClick="disp()">  
</div>

 
 
上のサンプルを少し変えて、引数のある関数を呼び出します。

各表示ボタンをクリックしてみて下さい。

   
   
     

 
ソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp(arg) {
    alert(arg + "ボタンがクリックされました!");
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px;">
    <div style="display:inline-flex;">
        <input type="button" value="表示1" onClick="disp('表示1')">   
        <input type="button" value="表示2" onClick="disp('表示2')">   
        <input type="button" value="表示3" onClick="disp('表示3')">     
    </div>
</div>

 
関数も、引数を 1 つ指定して定義しています。
「 arg 」は 引数名で、任意に名付けます。

そして、「 onClick=”disp2(‘表示1’)” 」として関数を呼び出しています。

「 表示1 」が引数として関数に渡す値です。
文字列のため、引用符で囲んで記述します。

ここでは、関数を指定するために ダブルコーテーション( ” )を使用しているので、シングルコーテーション( ‘ )で囲んでいます。
(ダブルコーテーションとシングルコーテーションが逆になってもOKです。)

▲目次へ戻る

 

3.onload イベントで関数を呼び出す

 
Webページを読み込むタイミングで JavaScript の関数を呼び出す場合は、onload イベントを使用します。

HTML の body 要素内で、次のように onload イベントを記述すると、Webページが表示される時に関数を呼び出すことができます。

<body onload=”関数名( )”>

 
また、script 要素内で、次のように onload イベントを記述しても、同様に関数を呼び出すことができます。

window.onload = function( ){

//処理内容

 
 
下のサンプルのテキストボックスには、Webページが表示された時の日時データが表示されています。

 

 
ソースコードは次の通りです。

<script type="text/javascript">
<!--
window.onload = function() {

    document.getElementById("dat").value = new Date();
}
//-->
</script>

<div style="background-color : #CCC;">
    <input type="text" id="dat"> 
</div>

 
日時データの取得については、JavaScript【 Date 】1をご参照下さい。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です