- 追加された行はこの色です。
- 削除された行はこの色です。
[[.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で囲むと影響を受けなくなる。~