[[.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() のチェーンで実装可能。 以下は、ボタン押下時のアニメーション+効果音。 $(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) }); } }); } }); }); });