パラメータとパラメータの使用

パラメータの使用

パラメータは、関数の実行段階でパラメータの値を受け入れ、関数にパラメータを指定して値を渡す役割を果たす.

を用いて、単純な複数の関数を1つに縮小することができる.

パラメータ:パラメータ、引数:パラメータ

例

<!--HTML-->
<div id="text"> text </div>
<button onclick="hello()">Hello</button>
<button onclick="bye()">Bye</button>

//JS
function hello() {
	document.getElementById('text').innerHTML = "Hello";
}
function bye() {
	document.getElementById('text').innerHTML = "Bye";
}

HelloボタンとByeボタンを押すと、テキストをそれぞれHelloとByeのコード

に変換できます.

の2つの関数を用いてそれぞれ機能を実現した.

パラメータ削減コードの使用

<!--HTML-->
<div id="text"> text </div>
<button onclick="text('Hello')">Hello</button>
<button onclick="text('Bye')">Bye</button>

//JS
function text(here) {
	document.getElementById('text').innerHTML = here;
}

パラメータhereを引数として指定し、'Hello'と'Bye'をそれぞれ得、指定した引数を関数内部のhereに代入する.

を使用して、元の2つの関数を1つの関数に縮小し、パラメータを変更するだけで使用できる関数を再構築します.

例(複数のパラメータを使用)

<!--HTML-->
<div id="text1"> text </div>
<div id="text2"> text </div>
<div id="text3"> text </div>
<div id="text4"> text </div>
<button onclick="change('text1','Changed text1')">Change</button>
<button onclick="change('text2','Changed text2')">Change</button>
<button onclick="change('text3','Changed text3')">Change</button>
<button onclick="change('text4','Changed text4')">Change</button>

<!--
첫번째 매개변수는 함수내에서 따옴표가 없으므로, 
인수를 작성할때는 따옴표를 작성해야 오류가 발생하지 않는다.
-->

//JS
function change(elementId, changeText) {
	document.getElementById(elementId).innerHTML = changeText;
}

パラメータごとにHTML要素のidと変更するテキストの変数elementIdとchangeTextを指定します.

因数で、取得する要素のidと変更するテキストを指定できます.

の場合、div要素の数と等しい関数が必要ですが、複数のパラメータと引数を使用して1行の関数で解決できます.