ywork2020.com

Title

関数を制御文として利用する

目次 (INDEX)

functionとは

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

目次に戻る

function 制御文の概要

ここでは、function を制御文としてとらえた場合の使い方などについて発言しています。

本来、function とは関数のことであり、 関数とは、「 x の値にともなって y の値が、ただ一つに決まる 」 ときの x と y の関連性を意味する言葉です。

数学では上記のような x と y の数値的な捉え方が関数だと言ってしまえるかもしれませんが、 プログラムの観点からみると、前述したような数値としての戻り値を求めるにだけにとどまらず、プログラムのサブルーチンとしての 役割を担っていると考えることが自然です。

目次に戻る

サブルーチンとは

サブルーチンとは、連続した一連のプログラム処理を ひとまとめ にしたものであり、 これを私が違う言葉で表現するなら 「 プログラムセット 」 と呼びます。

このサブルーチンとしての処理には、普通の関数のように処理した 「 値をリターンする 」 のではなく、 値をリターンはしないけれど、「 実行処理の結果をリターンする 」 もののことを指しています。

このサブルーチンと関数のことについては、 関数とは のページでも述べていますので、そちらも参考にしてください。

目次に戻る

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

ここでは、ボタンのクリックイベントに関数をアタッチしています。

この関数は、関数の呼び出し元要素をアニメーションしながら左右に移動する処理を実装しています。

サンプルコード: CSS
<style>
	.clsButton{
		position: relative;
		left: 0;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<div>
		<input class ="clsButton" type="button" value="run animation">
	</div>
	<div>
		<input class ="clsButton" type="button" value="run animation">
	</div>
	<script>...</script>
</body>
サンプルコード: script ( jQuery )
<script>
	function funcMove(){
		$(this).animate({"left":"50%"}, 200);
		$(this).animate({"left":"0"}, 800);
	}
	$(".clsButton").click(funcMove);
</script>
  • 02-05: function 関数名(){ 実行処理 } (この 実行処理 の部分をサブルーチンと言っています。つまり、ここでは 03, 04 行目のコードをまとめてサブルーチンと言っているわけです。)
  • 上記のように何らかのイベントに関連付けされた関数は、数学的な関数というよりはイベントによって制御され、実行されるプログラムセットと考える方が分かりやすいと思います。
実行結果:

目次に戻る