@ JavaScript

function:ユーザ定義関数

関数(function)とは、一度の定義でプログラムから何度も実行や呼び出しが行える JavaScript のソースコードのことです。
他の言語では、手続きやサブルーチンと呼ばれています。

関数の定義と呼び出し

関数を定義するには function 文を使います。書式は以下のとおりです。定義した 関数(function)は、()(関数呼び出し演算子)を使って実行します。
または、イベントハンドラに実行したい関数をセットして実行します

function 関数名(仮引数){
  ステートメント
}
関数名(実引数); //関数の実行

function_01.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
function sayHello() {
  alert("hello!");
}
sayHello();
</script>
</head>

<body>
</body>

</html>

function_02.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
div {
  font-size: 50px;
  line-height: 1.5;
  padding: 100px 0;
  cursor: pointer;
  text-align: center;
}
</style>
</head>

<body>
  <div id="target">Click me!</div>
<script>
function sayHello() {
  alert("Hello!");
}
document.getElementById("target").onclick = sayHello;
</script>
</body>

</html>

関数リテラル

JavaScript では、関数を定義するのに関数リテラルが使えます。関数リテラルは匿名関数を定義する式です。関数リテラルの式は function 文の書式とほぼ同じです。function 文は、構文上文であり、関数名が必要です。これに対して、関数リテラルは、構文上は式であり、関数名が不要です。

関数リテラルでは匿名関数を生成しますが、書式上は関数名を指定してもかまいません。この場合、関数のスコープ内でのみ関数名が有効になり、関数のそとではその関数名で呼び出すことはできません。

function_03.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
var sayHello = function() {
  alert("hello!");
}
sayHello();
</script>
</head>

<body>
</body>

</html>

即時関数

即時関数は関数を定義すると同時に実行するための構文です。
JavaScriptには他の言語にあるようなブロックスコープがありません。あるのはグローバルスコープと関数スコープだけです。 言い換えると、関数は任意にスコープを作るための唯一の手段だと言えます。

function_04.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
(function() {
  alert("OK!");
})();
</script>
</head>

<body>
</body>

</html>

実引数(argument)と仮引数(parameter)

関数(function)は実行時に実引数(argument)を使って値を渡すことができます。ファンクション名の後ろの () の中に仮引数(parameter)を定義します。このようにしておくと、function() を呼び出す際、() 内で実引数として渡したものが仮引数に渡されます。この仮引数は 関数(function)の実行が終わるまで有効です。

function_05.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
div {
  font-size: 50px;
  line-height: 1.5;
  padding: 100px 0;
  cursor: pointer;
  text-align: center;
}
</style>
<script>
function sayHello(str) {
  alert(str);
}
</script>
</head>

<body>
  <div onclick="sayHello('Hello!');">Click me!</div>
</body>

</html>

呼び出し元に値を返す

return文を使うことで呼び出し元に値を返すことができます。

function_06.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
body {
  font-size: 50px;
  line-height: 1.5;
  padding: 100px 0;
  text-align: center;
}
</style>
<script>
function sayHello() {
  return ('Hello!');
}
document.write(sayHello());
</script>
</head>

<body>
</body>

</html>