javascriptの第一歩

今までrailsで写経したjsは使ったことあるのですが、昨日初めて自分で0から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を実行
    }
  });
  • 未入力状態 f:id:snsn19910803:20160916153729p:plain

  • 半角の数字を入力した時 f:id:snsn19910803:20160916153744p:plain

  • 半角数字以外 f:id:snsn19910803:20160916153752p:plain

ちなみに

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

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

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

これだけ!!

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

= javascript_include_tag "hoge"

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