ywork2020.com

Title

自作の関数を作成する

目次 (INDEX)

functionとは

ここで説明する function とは次の語句からなる javascript の関数です。
function
読み: ファンクション
意味: 関数

目次に戻る

function の概要

function とは数学的にいう関数そのものであり、 また違う視点では、コンピュータープログラムのサブルーチンの役割を担っています。

このページでは数学的にいう関数について説明していこうと思います。 もしも、サブルーチンとして情報が欲しい場合は、 function (ファンクション制御文) のページが参考になります。 また、 関数とは のページもお役に立てると思います。

さて、数学の関数とはどのようなものだったでしょうか。 「 x の値にともなって y の値が、ただ一つに決まるとき y は x の関数である 」 というものだったと思います。

このページでは上記のような簡単な言葉で説明している数学的関数を動作するサンプルとして見てみようと思います。

目次に戻る

サンプルコードと実行結果

ここでは、funcX10 という名前の関数を作成しています。 処理内容としては、引数 x に与えた数値を 10 倍にして返すというものです。

サンプルコード: HTML
<body>
	<div><input id="idInNun" value="0" type="number"> 値を変更してみてください。</div>
	<script>...</script>
</body>
サンプルコード: script
<script>
	let elmInput = document.getElementById("idInNun");
	function funcX10(x){
		y = x * 10;
		return y
	}
	elmInput.addEventListener("change", function(){
		console.log(funcX10(this.value));
	},false);
</script>
  • 03-06: function funcX10( x ){ 関数の処理 } (funcX10 という名前の関数を自作しています。処理内容は 引数である x に 10 を掛けた値を返すというものです。)
  • 08: console.log( funcX10( this.value ) ) (コンソールに funcX10( this.value ) の結果を表示しています。この場合の this とは elmInput のことであり、元を辿れば idInNun の識別子をもつ要素、つまり input 要素のことです。)
実行結果:
値を変更してみてください。
console:

目次に戻る