[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp/index.php?FrontPage]]

-[[戻る>HTML/CSS/JavaScript]]

*目次 [#q148d6b5]
#contents

*概要 [#vd489801]
SaaS開発で調べたJavaScriptについてのメモ。

*jQuery [#h18c539e]
-jQuery 日本語リファレンス~
http://semooh.jp/jquery/
-7つのサンプルでjQueryを学ぼう！~
「jQueryが全く分からない人のため」の超初級者向け入門講座 | OZPAの表4~
http://ozpa-h4.com/2012/11/07/jquery-lecture/

*JSON処理 [#ff279ce5]
以下が参考になる。

-HTMLファイルからPOSTでJSONデータを送信する - Qiita~
http://qiita.com/kidatti/items/21cc5c5154dbbb1aa27f

*バック・グラウンド処理 [#d6ac8bf9]
setTimeoutやsetInterval、最新の「Web Workers」を使用可能。

**setTimeout [#s1aa8641]
-window.setTimeout - Web API インターフェイス | MDN~
https://developer.mozilla.org/ja/docs/Web/API/Window/setTimeout

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

**setInterval [#d7023a79]
-window.setInterval - Web API インターフェイス | MDN~
https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval

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

**Web Workers [#k70a53f3]
-ウェブ ワーカーの基本 - HTML5 Rocks~
http://www.html5rocks.com/ja/tutorials/workers/basics/

**参考 [#q5b3f503]
-JavaScriptの並列処理とWeb Workersについて - SkyVisualEditor & SuPICE Blog~
http://info.skyvisualeditor.com/blog/2015/150728_000990.php


*エフェクト [#k0f136b5]
**効果音 [#cf0fca98]
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>

**アニメーション [#se421493]
jQuery - Effects の .animate() のチェーンで実装可能。

***jQuery - Effects の .animate()メソッドを使用。 [#zb7490ef]
.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）
             });
           }
         });
       }
     });
   });
 });

***拡大・縮小アニメーションの対処 [#ldd91c24]
-横並びの要素の場合~
横並びの要素が拡大・縮小アニメーションの影響を受ける場合、~
要素を"[[float:left;>CSS#xec6ed76]]"のDIVで囲むと影響を受けなくなる。~
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS