.NET 開発基盤部会 Wiki

目次 †

↑

概要 †

SaaS開発で調べたJavaScriptについてのメモ。

↑

jQuery †

↑

セレクタ †

要素を選択する構文。
Googleで"jQuery セレクタ"などとググると大量にヒット。

↑

REST API (JSON) †

↑

JSON処理 †

以下が参考になる。

↑

イベント処理 †

イベント処理はイベントリスナーにイベントハンドラ（delegate）を設定する。

イベント処理は以下のようにjQuery で記述できる。

↑

初期処理 †

タグがロードされていないと処理できない初期処理はonLoadで処理する。

onLoadイベントは以下のように記述できる。

window.onload = function() {
  // ・・・処理・・・
};

addEventListener?を使う場合に使う文字列はload。

window.addEventListener("load", function() {
  // ・・・処理・・・
}, false);

loadは、画像などのリソースのロードが済んだ時点、
readyはDOMロード後なのでonLoadより早いタイミングで動き出す。

$(document).ready(function () {
  // ・・・処理・・・
});
↑

バック・グラウンド処理 †

setTimeoutやsetInterval、最新の「Web Workers」を使用可能。

↑

setTimeout †

指定された遅延の後に、コードの断片または関数を”一回だけ”実行する。

↑

setInterval †

指定された遅延の後に、コードの断片または関数を”繰り返し”実行し続ける。

↑

Web Workers †

↑

参考 †

↑

エフェクト †

↑

効果音 †

HTML5 Audio オブジェクトを JavaScript で制御する。

<script>
  var audio = document.getElementById("audio"); // audioの取得
  audio.play(); // mp3の再生
</script>
<body>
  <audio id="audio">
    <source src="xxxxx.mp3" preload="auto">
  </audio>
</body>
↑

複数の音源データの指定 †

↑

アニメーション †

↑

jQuery - Effects の .animate()メソッドを使用。 †

.animate() のメソッド・チェーンで実装可能。

以下は、ボタン押下時のアニメーション＋効果音。

$(function() {
  var audio = document.getElementById("audio"); // audioの取得
  $('.imgbutton').on('click', function() {
    audio.play(); // mp3の再生
    $(this).animate(
      {
        width: '100px',   // 小さくしたときのサイズ（幅）
        height: '110px'   // 小さくしたときのサイズ(高さ）
      },
      {
        duration: 50,    // 小さくするときにかかる時間（ms）
        complete: function() {
          $(this).animate(
          {
            width: '175px', // 大きくしたときのサイズ（幅）
            height: '220px' // 大きくしたときのサイズ（高さ）
          },
          {
            duration: 100,   // 大きくしたときかかる時間（ms）
            complete: function() {
            $(this).animate(
            {
              width: '150px', // 元のサイズ（幅）
              height: '165px' // 元のサイズ（高さ）
            },
            {
              duration: 100   // 元のサイズに戻るときにかかる時間（ms）
            });
          }
        });
      }
    });
  });
});
↑

拡大・縮小アニメーションの対処 †

↑

参考 †

↑

トレンド †

↑

今風 †

トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS