fanction

JavaScript

//関数の定義
function関数名(引数){命令}
//関数の呼び出し
関数名(引数);

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>標準体重</title>
<body>
<script>
  function sWeight(man, height){
  var weight;
  //計算を行う
    if(man){
    weight = (height-80)*0.7;
    }else{
    weight = (height-70)*0.6;
    }
    return weight; //値を返して関数を抜ける
  }
  
  
  var height;
  var weight;
  var man = 1;
  var woman = -1;
  
  
  //身長が180cmの男性の体重を求める
  weight = sWeight(1, 180);
  document.write('<p>','身長が180cmの男性の標準体重は',weight, 'kgです','</P>');
  
    //身長が160cmの女性の体重を求める
  weight = sWeight(1, 160);
  document.write('<p>', '身長が160cmの女性の標準体重は',weight, 'kgです', '</P>');
</script>
</body>
</html>

変数のスコープ

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>変数のスコープ</title>
<script>
  function test(){
   var num1 = 4;
       num2 = 5;
  }
</script>
</head>
<body>
<script>
  var num1, num2;
  num1 = 3;
  num2 = 6;
  test();
  document.write('<p>', num1, ' <p>');
  document.write('<p>', num2, ' <p>');
</script>
</body>
</html>

ボタンごとに関数を用意した場合

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>商品名、価格を引数とした場合</title>
</head>
<body>
<h1>税込価格を求める</h1>
<p>商品Ａ（1000円）<button onClick="tax('商品Ａ',1000)">税込価格</button></p>
<p>商品Ｂ（2000円）<button onClick="tax('商品Ｂ', 2000)">税込価格</button></p>
<p>商品Ｃ（3000円）<button onClick="tax('商品Ｃ', 3000)">税込価格</button></p>

<script>
  var taxIn;

  function tax(name, price){
  taxIn = price * 1.05;
  console.log(taxIn);
  alert(name + 'の税込価格は' + taxIn + '円です');
  }
</script>
</body>
</html>

文字列を数値に変換するNumber関数

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>switch文で月を判定する</title>
<body>
<script>
  var month;
  
  function season(){
   month = prompt('今月は？' , '1〜12を半角数字で');
   
   month = Number(month);
   switch(month){
   case 12:
   case 1:
   case 2:
    document.write('<h1>冬です</h1>');
  break;
  
   case 3:
   case 4:
   case 5:
    document.write('<h1>春です</h1>');
  break;
   
   case 6:
   case 7:
   case 8:
    document.write('<h1>夏です</h1>');
  break;
  
   case 9:
   case 10:
   case 11:
    document.write('<h1>秋です</h1>');
  break;
  
  default:
    document.write('<h1>1から12の値を入力してください</h1>');
  break;
  }
}
</script>
<h1>月別に季節を判別</h1>
<p>ボタンをクリックすると月を入力するウインドウが表示されます。</p>
<p><button onclick='season()'>月別に季節を判別する</button></p>
</body>
</html>