//function宣言での関数の作成
function 関数名(引数){
 //実行する関数の内容
　return returnする変数;
}
//function式での関数の作成（無名関数)
型 関数名　= function(引数){
 //実行する関数の内容
　return returnする変数;
}

例：

//function宣言での関数の作成
function Name(num) {
 //実行する関数の内容
   return 2*num;
}

//function式での関数の作成
const funcName = function(num){
   return 2*num; 
}

　・function：関数を定義する時に使用する。

　・引数：関数で使用する変数の値や、オブジェクトなど。(引き渡す値がある場合に入れる。)

　・return：返り値、関数で実行した値を戻す。(戻す値などがある場合に入れる)

３. 関数の使用

//引数を渡し、戻り値がある場合。 
変数 = 関数(引数);

//引数を渡して、関数を実行する。
関数名(引数);

//引数を渡し、戻り値がある場合。 
変数 = 関数();

//関数を実行する場合
関数();

例：

let Num = Name(2);

・2という数値をNameという関数に引数として渡す。

・その計算結果でreturnで戻された値をNumという変数に入れている。

4. プログラムの作成(2倍にする関数の作成と実行)

<!DOCTYPE html>
<html lang="ja">
  <head>
  	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2倍</title>
  </head>
  
  <body>
	<p> NUM入力 <input type="text" size="15" value="300" id ="Num"></p>
	<p> 2倍の算結果_関数 <input type="text" size="15"  id = "ans"></p>
	<p> 2倍の算結果_関数式 <input type="text" size="15"  id = "ans2"></p>
	

	<script>
/**	************************************************************** */
/**
 *	2倍にする関数
 *	@param	num		: 数値
 *	@return			: 2倍の値
 */
/**	************************************************************** */		
		let Dou2 = function(num){
			return 2*num;
			}
	
		//Num1の値を取得
		let lnum1 = parseInt(document.getElementById("Num").value);
		//ansのidを取得
		let lans = document.getElementById("ans");
		//ans2のidを取得
		let lans2 = document.getElementById("ans2");

		//Double関数の実行
		lans.value = Double(lnum1);
		//Dou2の関数実行
		lans2.value = Dou2(lnum1);

/**	************************************************************** */
/**
 *	2倍にする関数
 *	@param	num		: 数値
 *	@return			: 2倍の値
 */
/**	************************************************************** */
		function Double(num){
			return 2*num;
		}
		
/*		こっちだとエラーになる。
		let Dou2 = function(num){
			return 2*num;
			}
*/
	</script>
  </body>
</html>

実行結果

ーーーーーーーーーーーーーーー

NUM入力

2倍の算結果_関数

2倍の算結果_関数式

ーーーーーーーーーーーーーーー

5. 無名関数の作成(定義)方法

function(){
　//実行する関数の内容
　return returnする変数;
}

例：

function () {
  return 2*num;
}

　・これは、良くHTMLでイベントが発生した時に、実行したい動作を書くのによく使われる。

6. プログラムの作成(クリック時に2倍に計算する)

<!DOCTYPE html>
<html lang="ja">
  <head>
  	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2倍</title>
  </head>
  
  <body>
	<p> NUM入力 <input type="text" size="15" value="300" id ="Num2"></p>
	<p> 足し算結果 <input type="text" size="15"  id = "ans2"></p>
	<p> 計算実行  <input type="button" size="10"  id = "button"></p>
	

	<script>
		//変数宣言
		let lnum2;
		
		//ansのidを取得
		let lansid2 = document.getElementById("ans2");
		let lbuttonid = document.getElementById("button");
		
		//ボタン押下時実行(取得したNumの値を2倍にして、出力)
		lbuttonid.addEventListener("click",function(){
			//Num2の値を取得
			lnum2 = parseFloat(document.getElementById("Num2").value);
			lansid2.value = lnum2*2;
		})
	</script>
  </body>
</html>