- 追加された行はこの色です。
- 削除された行はこの色です。
[[.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]
**セレクタ [#aa5414f4]
要素を選択する構文。~
Googleで"jQuery セレクタ"などとググると大量にヒット。
-Selectors - jQuery 日本語リファレンス~
http://semooh.jp/jquery/api/selectors/
*REST API (JSON) [#b10ddab5]
**JSON処理 [#ff279ce5]
以下が参考になる。
-HTMLファイルからPOSTでJSONデータを送信する - Qiita~
http://qiita.com/kidatti/items/21cc5c5154dbbb1aa27f
*イベント処理 [#e311f48f]
イベント処理はイベントリスナーにイベントハンドラ（delegate）を設定する。
-イベントリファレンス - Web 技術のリファレンス | MDN~
https://developer.mozilla.org/ja/docs/Web/Reference/Events
-EventTarget.addEventListener - Web API インターフェイス | MDN~
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
イベント処理は以下のようにjQuery で記述できる。
-Events - jQuery 日本語リファレンス~
http://semooh.jp/jquery/api/events/
-jQuery： イベントに応じて処理を実行するには？（イベントメソッド） - Build Insider~
http://www.buildinsider.net/web/jqueryref/015
**初期処理 [#a4d8cbca]
タグがロードされていないと処理できない初期処理はonLoadで処理する。
onLoadイベントは以下のように記述できる。
window.onload = function() {
// ・・・処理・・・
};
addEventListenerを使う場合に使う文字列はload。
window.addEventListener("load", function() {
// ・・・処理・・・
}, false);
loadは、画像などのリソースのロードが済んだ時点、~
readyはDOMロード後なのでonLoadより早いタイミングで動き出す。
$(document).ready(function () {
// ・・・処理・・・
});
-ready(fn) - jQuery 日本語リファレンス~
http://semooh.jp/jquery/api/events/ready/fn/
-$(document).ready() と $(window).load() の違い | こととこネット~
http://blog.cototoco.net/work/201308/window-onload-%E3%81%A8jqurydocument-ready-%E3%81%AE%E9%81%95%E3%81%84/
*バック・グラウンド処理 [#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>
***複数の音源データの指定 [#b28f8192]
-HTML JavaScriptでAudioタグを使用し複数の音源データを指定が出来ません... - Yahoo!知恵袋~
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11157174196
><audio> タグを別にして、別の id で管理する。
**アニメーション [#se421493]
***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で囲むと影響を受けなくなる。~
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
