ほぼ初めてのJS

今までrailsで写経したjsは使ったことあるのですが、昨日初めて自分で０からjs書いたので備忘録。

今回はviewに直書きしました
イメージはフォームに西暦を入れて異なるフォームに移った時に現在の西暦からフォームに書いた西暦の引き算イベントが発生するものです。
例えば、text_fieldに2011と入力してフォームから離れると2016 - 2011が実行され5がviewに表示されるというものです。

hoge.html.slim

= form_for @company_setting, :url => { action: :update }, :method => :put do |f|
  h3.title.is-bold = t('.financial_period')


  br
    = f.text_field :closing_first_year, id: 'first_year'   #ここがイベント着火元

    span#calclation       #このidに結果が表示される

javascript:

  # 決算1期目の年を入力して 他のフォームに移動すると今期が何期目なのか自動計算される
  $('#first_year').change(function() {
    var now        = new Date();
    var year       = now.getFullYear();
    var first_year = $('#first_year').val();

    if ($.isNumeric($('#first_year').val())) {
      $('#calclation').text(year - first_year);
    } else {
      $('#calclation').text('取得できません');  #半角数字以外の値を受け取った場合はelseを実行
    }
  });

• 未入力状態
  

• 半角の数字を入力した時
  

• 半角数字以外
  

ちなみに

var first_year = document.getElementById('first_year').value;

と

var first_year = $('#first_year').val();

は同じ意味とのこと！後者の方が簡潔に書けるので良い！

なお今回はviewファイルで直にjsを書いたが、
例えばapp/assets/javascripts/hoge.jsを作ってそこに書いていくと
viewに
ruby
= javascript_include_tag "hoge"

って書けばhoge.jsが使われるので、汎用的な機能は個別にjsファイルとして作って書いていった方がいいとのこと。