「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
SaaS開発で調べたJavaScriptについてのメモ。
要素を選択する構文。
Googleで"jQuery セレクタ"などとググると大量にヒット。
以下が参考になる。
イベント処理はイベントリスナーにイベントハンドラ(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」を使用可能。
指定された遅延の後に、コードの断片または関数を”一回だけ”実行する。
指定された遅延の後に、コードの断片または関数を”繰り返し”実行し続ける。
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>
<audio> タグを別にして、別の id で管理する。
.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) }); } }); } }); }); });