CoffeeScriptでDOMを扱ってみる - 初心者がRailsを勉強するブログ

前回の記事でCoffeeScriptの文法を見たので、今回はDOMをいじってみましょう。

まずは、htmlを用意します。
めんどくさいので、CSSもjsから書いてしまいます。ご了承ください。
ガチのjsを書くのはめんどくさいので、jQuery先生のお世話になります。

HTML

<!doctype html>
<html>
<head>
  <title>CoffeeScriptで遊ぶ</title>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="coffee.js"></script>
  <script src="js.js"></script>
</head>
<body>
  <div id="first">
    <h1>first div</h1>
    <p>first div</p>
  </div>

  <div id="second">
    <h1>second div</h1>
    <p>second div</p>
  </div>

  <div id="third">
    <h1>third div</h1>
    <p>third div</p>
  </div>
</body>
</html>

今回は、以下の実装を行います。
・divの中のpタグをホバーで表示切り替えする
・divをクリックしたら、idをアラートする

まずは、js.jsにjsで書いてみます。

javascript

$( function() {
  // divを変数に入れとく
  var divs = $( "div" );

  // pタグを非表示にして、divの外に出す
  $( "p" ).css({
    display: "none",
    position: "absolute",
  });

  // divを横に並べる
  $( "body" ).css({
    display: "flex",
  });

  // divを見やすい形にする
  divs.css({
    border: "1px solid blue",
    backgroundColor: "gold",
    borderRadius: "3px",
    margin: "1em",
  });

  // divにイベントハンドラを書く
  $.each( divs, function() {
    // ホバーでpを出し入れする
    $( this ).hover( function() {
      // マウスオーバーでpを表示
      $( this ).find( "p" ).css( "display", "block" );
    }, function() {
      // マウスリーブでpを非表示
      $( this ).find( "p" ).css( "display", "none" );
    });

    // クリックしたらidをアラートする
    $( this ).on( "click", function() {
      alert( $( this ).attr( "id" ) + "がクリックされた" );
    });
  });
});

動作確認の時は、一応、coffee.jsのscriptタグをコメントアウトしましょう。
こんな感じになりました。

f:id:carmelokarimero:20140119084053p:plain

divにカーソルを乗せるとこんな感じ。

f:id:carmelokarimero:20140119084430p:plain

クリックすると、

f:id:carmelokarimero:20140119084508p:plain

思った通りになりました。
では、CoffeeScriptで同じものを書きます。
ファイル名をcoffee.coffeeにします。

CoffeeScript

$ ->
  # divを変数に入れとく
  divs = $("div")

  # pタグを非表示にして、divの外に出す
  $("p").css {
    display: "none",
    position: "absolute",
  }

  # divを横に並べる
  $("body").css "display", "flex"

  # divを見やすい形にする
  divs.css {
    border: "1px solid blue",
    backgroundColor: "gold",
    borderRadius: "3px",
    margin: "1em",
  }

  # divにイベントハンドラを書く
  $.each divs,  ->
    $(this).hover ->
      # マウスオーバーでpタグを表示
      $(this).find("p").css "display", "block"
    , ->
      # マウスリーブでpタグを非表示
      $(this).find("p").css "display", "none"

    # クリックしたらidをアラートする
    $(this).on "click", ->
      alert "#{$(this).attr 'id'}がクリックされた"