JavaScript」カテゴリーアーカイブ

JavaScript関連

QUnit#002 テスト開発駆動(TDD)って?[JavaScript,テスト]

まずテスト開発駆動(※以下TDD)についてをおさらいです。
TDDはプログラムの開発手法の一つで、以下の略称です。

  • TEST(テスト)
  • DRIVEN(ドリブン:駆動)
  • DEVELOPMENT(デベロップメント:開発)

つまり

  • TEST(テスト)をきっかけに、
  • DRIVEN(ドリブン:駆動)し始める、
  • DEVELOPMENT(デベロップメント:開発)。

といったところでしょうか、
続きを読む

QUnit#001 JavaScriptの品質を上げることの重要性とか[JavaScript,テスト]

あいかわらずWebサイトの制作に絡んでおりますが、最近はめっきりJavaScriptを扱うことがどんどん多くなってきました。

  • パララックスなどのスクロールを使ったアニメーション表現
  • 複雑なロジックでの見積コンテンツ
  • 診断コンテンツ
  • Ajax主体のショッピングサイト
  • etc..

Flashの衰退に伴って複雑なプログラムも少なくないのが現状です。JavaScriptを開発していてよく使うデバッグツールとしては、
続きを読む

JavaScriptテンプレートエンジンJsRenderの使い方メモ[jsRender,jQueryTemplate]

JsRenderの使い方メモ

テンプレート埋め込みタグ

<script id="itemTemplate" type="text/x-jsrender">
	<div class="item">
		<img class="item1" src="images/top/{{>type}}1.png" alt="{{>label}}" />
		<img class="item2" src="images/top/{{>type}}2.png" alt="{{>label}}" />
		<img class="item3" src="images/top/{{>type}}3.png" alt="{{>label}}" />
		<img class="item4" src="images/top/{{>type}}4.png" alt="{{>label}}" />
		<img class="item5" src="images/top/{{>type}}5.png" alt="{{>label}}" />
		<img class="item6" src="images/top/{{>type}}6.png" alt="{{>label}}" />
		<img class="item7" src="images/top/{{>type}}7.png" alt="{{>label}}" />
	</div>
</script>

{{>val}}は、エスケープあり {{:val}}は、エスケープ無し

条件分岐

{{if is_new !== 1}}
    <div>New!</div>
{{/if}}

繰り返し

<ul id="target"></ul>

<script id="sampleTemplate" type="text/x-jsrender">
{{for array}}
    <li>{{:#data}}</li>
{{/for}} 
</script>

<script>
var array = [123,456,789];
var outputHtml = $("#sampleTemplate").render(array);
</script>

参考URL
http://borismoore.github.com/jsrender/demos/step-by-step/03_converters-and-encoding.html

jQueryMobileでAjaxのページ読み込み時のイベント[jQueryMobile]

jQueryMobileでページがロードされたとき、DOMが出来上がったときのイベントがとれなかった、たしかに考えると、Ajaxで読み込んだ場合どうなるのかよく分かってなかった。以下に要点まとめ

ヘッダ(<head>)は全ページ同じにすべし

まず、jQueyrMobileは基本Ajaxで読込するので、jQeuryとかのライブラリとか、全ページ<head>内で読み込んで居るととんでもなくわけわかんなくなる。
ダブりで読んだりが大変!

そこで、1ページめは普通に読み込んで2ページ目移行(Ajax遷移するばあい)は、<head>の方の読込は無視らしい。

つまり、直リンクで色んなページに来る可能性があるから、全ページ<head>にいろいろ書いておくべし&同じ内容にしていないと、(ページごとで読み込むファイルがちがうとか)面倒なことになるので同じにしとくべしです。

 ページ読み込み時のイベントの設定

またページ読み込み時のイベントもいつもと違う。

$(function(){ });とかでもイベントが発生しないので、Ajax読み込み後のイベントを取る必要がある。

$(document).live( ‘pageinit’,function(event){
//hogehoge fuga
});

とすればOK