「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -[[戻る>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/ **セレクタ [#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/ -JavaScriptの並列処理とWeb Workersについて - SkyVisualEditor & SuPICE Blog~ http://info.skyvisualeditor.com/blog/2015/150728_000990.php **Promise [#j2209b5b] ***参考 [#hc8af65d] -JavaScript | MDN --Promise~ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise --Using promises~ https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises -Qiita --今更だけどPromise入門~ https://qiita.com/koki_cheese/items/c559da338a3d307c9d88 --Promiseについて0から勉強してみた~ https://qiita.com/toshihirock/items/e49b66f8685a8510bd76 *エフェクト [#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で囲むと影響を受けなくなる。~ *Polyfill [#me2ddef5] モダンブラウザで普通に出来て、レガシーブラウザで出来ない機能を、 -既存の技術で(あるいはそれらの組み合わせで)同等のものを提供する手法 -その機能をサポートしていないWebブラウザで機能を実装するコード -HTML5 Web標準を実装するJavaScriptライブラリ **ライブラリ [#rc823260] -es5.js~ ECMAScript5 (ES5) と見比べて、不足している実装 -web.js~ Web標準バンドル --HTML --DOM --Fetch --URL --XMLHttpRequest --CSS Object Model --Timing Events -polyfill.js~ es5.js と web.js の組み合わせで出来ている。 -typedarray.js~ バイナリデータ(映像、音声など)を効率良く扱うための Typed Arrayの実装 **参考 [#uf36a62f] -Polyfill - Wikipedia~ https://en.wikipedia.org/wiki/Polyfill -Polyfill - 用語集 | MDN https://developer.mozilla.org/ja/docs/Glossary/Polyfill -HTML5 Cross Browser Polyfills · Modernizr/Modernizr Wiki~ https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills -inexorabletash/polyfill: JavaScript Polyfills, Shims and More~ https://github.com/inexorabletash/polyfill -jQuery から卒業するための第1歩を polyfills から学ぼう - ばうあーろぐ~ http://girigiribauer.com/archives/1233/ *参考 [#k43384ff] **トレンド [#d2a644b2] -人気上昇中のJavaScriptライブラリを調べてみた - Build Insider --【2014年版】~ http://www.buildinsider.net/web/popularjslib/2014 --【2015年版】~ http://www.buildinsider.net/web/popularjslib/2015 --【2016年版】~ http://www.buildinsider.net/web/popularjslib/2016 -【使い方まで徹底解説】おすすめJavascriptライブラリ厳選10選!~ 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト~ http://www.sejuku.net/blog/4559#Bootstrap **今風の書き方 [#ff6801b9] -古い感じがしてかっこわるいと思うコードの書き方10例|Webpark~ http://weboook.blog22.fc2.com/blog-entry-272.html --1. フレームを使っている --2. centerタグを使っている --3. レイアウトにテーブルを使っている --4. タグが大文字 --5. 改行を連続して使っている --6. 全角スペースで横の間隔を調整している --7. リストを使っていない --8. bodyタグに要素を指定している --9. ワンポイントの画像にimgタグを使っている --10. border等を一括で指定していない -旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 - Qiita --Section1 ~すぐにでも現代っぽく出来るワンポイントまとめ~~ http://qiita.com/gaogao_9/items/ec2b867d6941173fd0b1 --Section2 ~CommonJSモジュールと仲良くなろう~~ http://qiita.com/gaogao_9/items/190f4b52d6876f0b8d8a --Section3 ~Browserifyをマスターしよう~~ http://qiita.com/gaogao_9/items/0b4bf5cd6416347b3b52 --Section4 ~Gulpで処理を自動化しよう~~ http://qiita.com/gaogao_9/items/d4e23de821d0fd78c13d --Section5 ~ES2015文法を覚えよう(前編)~~ http://qiita.com/gaogao_9/items/18b20ad9b76c9c81b5fa