#8 変数を使う

「変数」という便利な機能を使ってみましょう。

var 変数名 = 1;	/* 数値 */
var 変数名 = "CRI";	/* 文字列 */
var 変数名 = x+y;	/* 式 */

var hoge = 1;	// 1回目の宣言と代入

var hoge = 2;	// 2回目の宣言と代入（OK）
hoge     = 2;	// 再代入（OK）

let hoge = 1;	// 1回目の宣言と代入

let hoge = 2;	// 2回目の宣言と代入（エラー）
hoge     = 2;	// 再代入（OK）

const hoge = 1;	// 1回目の宣言と代入

const hoge = 2;	// 2回目の宣言と代入（エラー）
hoge        = 2;	// 再代入（エラー）

足し算してみる

<script>
$(function(){
  $('#calc').on('change', function(){             /* onメソッド changeイベント = #calc内の要素に変更されるイベントが発生したら */
    var numA = parseInt( $('.number_A').val() );  /* $(クラス名).val() でinput内の文字を取得できる */
    var numB = parseInt( $('.number_B').val() );  /* parseInt(文字) parseIntで文字が数値になる */
    $('#number_total').text(numA + numB);         /* textメソッドで対象のidに文字列を出力 */
  });
});
</script>

   +
   =
  

問題：上記を踏まえて、整数の円周を計算できる計算機を作ってみましょう。

<script>
$(function(){
  $('#calc_pi').on('change', function(){
    var num = parseInt( $('.number_C').val() );
    var pi  = (num * 3.14);
    $('#pi').text(pi.toFixed(2));
  });
});
</script>
<div id="calc_pi" style="margin-bottom:20px;">
  <span><input class="number_C" type="number" style="width:50px;"></span> cm × 3.14 = 
  <span id="pi"></span>cm
</div>

#9 関数を使う

自分で作った方法論や数式を使い回す

/*関数*/
function tax(price) {
  var tax = 0.08;                 /* 税率の初期設定 */
  var floatTax = price * tax;     /* 取得された値に設定された消費税率をかける */
  return Math.round(floatTax);    /* 四捨五入された値がreturnで出力 */
}

関数を作る場合はfunctionと宣言したあとにtaxなど自分で考えた関数名をいれます。
関数名のあとのカッコ()の中にいれる 引数ひきすうには、その関数内で使われる入るであろう値を総称する自分で考えた適当な名前をいれます。
どういうことかといえば、例は「price」という名前にしてますが、このpriceという場所は入力される値によって、100だったり150だったり1,000だったりします。
関数では具体的な数値を入れるのではなく 文字記号にしておいて、どんな数値が入ってきても対応できるようにしておきます。
最後に、入ってきた値が計算を経てどんな値になって帰ってくるかをreturnで指定します。※関数のreturnは基本的にはひとつのみです。

先程の消費税計算での引数とreturn

function tax ()
var TAX = 0.08;
var floatTax = * TAX;
　ちなみに現在のfloatTaxの値は、
return 四捨五入した値→

<script>
/* 消費税を計算するtax関数 */
function tax(price) {
  var TAX = 0.08;
  var floatTax = price * TAX;
  return Math.round(floatTax);
}

$(function(){
  $('#tax').on('change', function(){	/* ← 文字入力を検知したら起動 */
    var num = parseInt( $('.ex_price').val() );	/* ← inputタグに入力された値を変数numに代入 */
    var t   = tax(num);		/* ← tax関数で計算した値を変数tに代入 */
    $('.ex_tax').text(t);		/* ← <span class="ex_tax">に変数tの値を出力 */
  });
});
</script>

<div id="tax">
  <input class="ex_price"> 消費税:<span class="ex_tax"></span> 円
</div>

<span class="ex_tax">〜この部分〜</span>

/* 悪い例 */
$(function(){
  var TAX = 0.08;
  $('#tax').on('change', function(){
    var num      = parseInt( $('.ex_price').val() );
    var floatTax = num * TAX;
    var t        = Math.round(floatTax);
    $('.ex_tax').text(t);
  });
});
$(function(){
  var TAX = 0.08;
  $('#tax2').on('change', function(){
    var num      = parseInt( $('.ex_price2').val() );
    var floatTax = num * TAX;
    var t        = Math.round(floatTax);
    $('.ex_tax2').text(t);
  });
});

#10 コンソールでデータの確認

デバッグの第一歩console.log

function tax(price) {
  var TAX      = 0.08;
  var floatTax = price * TAX;  /* ←この部分 */
  return Math.round(floatTax);
}

たとえばこの関数をつくるときに、変数名を間違って出力できなかったとします。

function tax(price) {
  var TAX      = 0.08;
  var floatTax = price * FAX;  /* TAXの記述ミス */
  return Math.round(floatTax);
}

この場合、変数floatTaxには何も数値が入らないため、returnは何も出力されません。

console.log()をブラウザの開発ツールを使って確認

Macの場合は「⌘+option+i」WindowsはF12でブラウザの開発モードウィンドウが出てきます。
コンソールタブをクリックしてみましょう。

コンソールタブがでたところで、先程のエラーの見つけていきましょう。

consoleを表示させると、変数名が違う場合はエラー内容が表示されます。右側のxxx.php: 193:7というエラー箇所のリンクも張ってありますので、 間違った場所も確認しやすいです。

英語なのでとっつきにくいですが、翻訳ソフトなどで確認して見ましょう。
is not definedは「定義されていません」の意味です。
つまり、「FAXなんて名前の変数は、そもそもどこにも設定されてませんよ。」というエラーになります。

本題に戻って、floatTaxの値をconsole.log(引数);で確認してみましょう。まず、以下の内容を記述します。

   消費税:  円

$(function(){
  $('#tax_console').on('change', function(){
    var num      = parseInt( $('.ex_price_console').val() );
    var floatTax = num * 0.08;
    console.log(floatTax);   /* コンソールでfloatTax変数に入っている内容を表示させる */
    var t        = tax(num);
    $('.ex_tax_console').text(t);
  });
});

関数で指定していますが、関数に掛ける前に入力されたnumに0.08をかけてどうなるかをコンソールしてみます。 以下のinputに数値を入力してみましょう。

消費税: 円

すると、入力するたびにコンソール欄にこのように表示されます。

変数名の間違いなどはきちんとエラーがでるので大丈夫ですが、式の途中の変数の値がどうなっているのかを確認することで エラー解消に役立ちます。

#11 モーダルウィンドウを作ろう

モーダルウィンドウを作ってみましょう

<div class="modal-open">モーダル起動!</div>
<div class="modal-content">
  モーダルウィンドウの中身<br>
  モーダルウィンドウの中身
</div>

.modal-open{  /* モーダル起動のボタン */
  padding:20px;
  border: 1px solid #000;
  display:inline-block;
}
.modal-content { /* モーダル部分 */
  display: none;
  position: fixed;
  width: 80%;
  height:200px;
  padding: 10px 20px;
  color: #333;
  background: #ccc;
  overflow-y: auto;
  border-radius: 1em;
  z-index: 100;
}
.modal-overlay { /* 背景 */
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 99;
}

<script>
$(function() {
  $('クラス名').on('クリックメソッド', function(){				/* クラス名をクリックしたら */
    $('body').要素追加メソッド('<div class="modal-overlay"></div>');	/* bodyにオーバーレイの要素を追加 */
    $('クラス名1, クラス名2').フェードインメソッド('速度指定');			/* モーダルコンテンツ要素とオーバーレイ要素をフェードイン */

    $('クラス名').on('クリックメソッド', function(){					/* オーバーレイをクリックしたら削除する機能 */
      $('クラス名1, クラス名2').フェードアウトメソッド('速度指定',function(){	/* モーダルコンテンツ要素とオーバーレイ要素をフェードアウトし、*/
        $('クラス名').削除メソッド();						/* オーバーレイ要素を削除*/
      });
    });

    modalResize();				/* モーダル起動&リサイズしたら、再計算させる*/

    function modalResize(){			/* リサイズする独自関数を設定 */
      var w = $(window).width();		/* その時のウィンドウの横幅、高さを取得し、変数に入れる */
      var h = $(window).height();
      var cw = $('クラス名').outerWidth();	/* モーダルコンテンツの表示位置を取得し、変数に入れる */
      var ch = $('クラス名').outerHeight();
      $('クラス名').css({			/* 取得した数値をモーダルコンテンツにcssを付与 */
        'left' : ((w - cw)/2) + 'px',	/* cssのleftプロパティ */
        'top'  : ((h - ch)/2) + 'px'	/* cssのtopプロパティ */
      });
    }

  });
});
</script>

<script>
$(function() {
  $('.modal-open').on('click', function(){
    $('#contents').css('filter', 'none');
    $('body').append('<div class="modal-overlay"></div>');
    $('.modal-content, .modal-overlay').fadeIn('slow');

    $('.modal-overlay').on('click', function(){
      $('.modal-content, .modal-overlay').fadeOut('slow',function(){
        $('.modal-overlay').remove();
      });
    });

    modalResize();

    function modalResize(){
      var w = $(window).width();
      var h = $(window).height();
      var cw = $('.modal-content').outerWidth();
      var ch = $('.modal-content').outerHeight();
      $('.modal-content').css({
        'left' : ((w - cw)/2) + 'px',
        'top'  : ((h - ch)/2) + 'px'
      });
    }
  });
});
</script>