Javascript Learn jQuery in 30 Days (11-20)

2020-10-222020
80.6% (295/366)
October
67.8% (21/31)
Week 43
43.2% (3/7)
Day 22 Thu
2.4% (0.5/24)

訪問者

total: 6291
today: 1
yesterday: 0
now: 7

↑

更新

MenuBar

day11 Modifying Effect Speeds
day12 Creating Custom Effect Methods
day13 Full Control With animate
day14 Homework Solutions
day15 The Obligatory Slider (First Stab)
day16 Prototypal Inheritance and Refactoring the Slider
day17 Your Questions Answered
day18 Quiz #2 – Effects
day19 $.each and Templating
day20 Say Hello to Handlebars

day11 Modifying Effect Speeds †

http://tutsplus.com/lesson/modifying-effect-speeds/

jQuery のデフォルトパラメータをいじる話
day05 Events 201 で、effiect のスピード指定のやり方を学んだ
- $('id').show(500); (500msで表示)
- $('id').show('fast'); (速く表示)
- $('id').show('slow'); (遅く表示)

fast, slow って何さ？

http://code.jquery.com/jquery-1.7.1.js を見ると

jQuery.extend( jQuery.fx, {
	tick: function() {
        ・・・
	speeds: {
		slow: 600,
		fast: 200,
		// Default speed
		_default: 400
	},

	step: {
		opacity: function( fx ) {
			jQuery.style( fx.elem, "opacity", fx.now );
		},

	_default: function( fx ) {
        ・・・
});

となっている。

jQuery.fx にパラメータが設定してあるっぽい
```
$.fx.speeds.slow = 2000;
```
とかしてデフォルト値を変更したり
```
$.fx.speeds.tortoise = 5000;
```
とかして新しいパラメータを作ったりできる。
大きなプロジェクトで、業務処理の中に即値を書きたくない(書かせたくない)場合には、jQuery 自体を拡張するやり方もあるよ

↑

day12 Creating Custom Effect Methods †

http://tutsplus.com/lesson/creating-custom-effect-methods/

[source] [reload]

jQuery のエフェクトを拡張する話

http://code.jquery.com/jquery-1.7.1.js を見ると

// Generate shortcuts for custom animations
jQuery.each({
	slideDown: genFx( "show", 1 ),
	slideUp: genFx( "hide", 1 ),
	slideToggle: genFx( "toggle", 1 ),
	fadeIn: { opacity: "show" },
	fadeOut: { opacity: "hide" },
	fadeToggle: { opacity: "toggle" }
}, function( name, props ) {
	jQuery.fn[ name ] = function( speed, easing, callback ) {
		return this.animate( props, speed, easing, callback );
	};
});

jQuery.each でパラメータを設定して、jQuery.fn の function をイベントハンドラに設定している

jQuery.fn にイベントハンドラを追加してやれば、slideDown や fadeIn と同じように使うことができる

$.fn.flash を作成して、slideToggle の代わりに指定する

$(document).ready(function(){
  // ----------------------------
  // 新しい Effect !!
  // ----------------------------
  // 1)  500ms かけて slideDown
  // 2)  300ms 何もしない
  // 3) 2000ms かけて slideUp
  // ----------------------------
  $.fn.flash = function( speed, easing, callback ) {
    var $this = $(this);
    return $this.slideDown(500, function() {
      $this.delay(300).slideUp(2000);
    });
  };

  formWindow.init($('#orderForm') , {
    effect : 'flash',
    speed : 1000
  });
});

var formWindow = {
  container : null,
 
  config: {
    effect: 'slideToggle',
    speed: 500
  },
 
  init : function(container, config) {
    this.container = container;
    if (config) {
      $.extend(this.config, config);
    }

    // ×ボタン
    $('<span> X </span>')
      .prependTo(container)
      .on('click', this.close)
      .addClass('btnClose');

    // Form表示ボタン
    $('<button></button>', {
      text: 'ORDER HERE!'
    })
      .insertAfter(container.before())
      .on('click', this.show);
  },

  show : function() {
    var obj = formWindow.container;
    var fnc = formWindow.config.effect;
    var arg = formWindow.config.speed;
    // javascript の reflection
    obj[fnc](arg);
  },

  close : function() {
    var obj = formWindow.container;
    var fnc = formWindow.config.effect;
    var arg = formWindow.config.speed;
    // javascript の reflection
    obj[fnc](arg);
  } 
}

↑

day13 Full Control With animate †

http://tutsplus.com/lesson/full-control-with-animate/

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson13</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
.box {
  top: 30px;
  left: 0px;
  width: 200px;
  position: absolute;
  background: lightgray;
}
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  var box = $('div.box');

  box.on('mouseover', function(){
    box
      .animate({
        top: "+=50",
        left: "+=50",
        width : "-=50",
        height : "-=50",
      }, 500)
      .animate({
        width : "+=50",
        height : "+=50",
        queue : false
      }, 500);
  });

  box.on('mouseout', function(){
    box
      .animate({
        top: 30,
        left: 0,
      }, 1000, 'swing');
  });
});
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
  ↓ Point Here !
  <div class="box">
    【箱】物を入れるための器。木、紙、皮革、金属、
    プラスチックなどで作り、身とふたとに分かれる。
    [英] a box； a case
  </div>
</body>
</html>

アニメーション : $('#id').animate(prop, speed, easing, callback)

prop	アニメーションのゴールとなる CSS を連想配列(JSON)で指定
speed	アニメーションのスピード (現在位置からゴールまでの所要 ms)
easing	アニメーション。jQeury には 'liner' と 'swing' が用意されている。省略時 'liner'
callback	アニメーション終了後の処理

第 n 引数以降を省略可能(2,3,4 を省略、3,4 を省略、4 を省略)

prop

大きさや位置などの数値の CSS しか指定できない。
背景色をグラデーションで変化させることはできない。

CSS の他に、アニメーションのパラメータを指定できる

duration	第二引数(spped) の代わり、'slow'、'nomal'、'fast'、ミリ秒を指定できる
easing	第三引数(easing) の代わり
complete	第四引数(callback) の代わり
step	アニメーションのフレーム描画毎に呼ばれる function(n)。n はアニメーションの進行状況(n=(0→1) もしくは n=(1→0))
queue	true : 前の animate が終わるまで待つ(デフォルト値)。false : 同時実行

obj.animate() は、obj を返すので、obj.animate().animate(); と書ける
CSS の値項目には、"+=10"、"-=10" というように、現在地からの差分を書ける
```
width: "+=10"
```
eq.
```
width: parseInt(box.css(width)) + 10
```
CSS の値項目には、"toggle" が使える (現在値が 0 なら 1、1 なら 0 になる)

実は、css(param, value) も連想配列で書ける

box.css('color','red').css('width','200px');

eq.

bos.css({
  color : 'red',
  width : '200px'
});

↑

day14 Homework Solutions †

http://tutsplus.com/lesson/jquery-animate-homework-solutions/

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson14</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
.box {
  top: 30px;
  left: 0px;
  width: 200px;
  position: absolute;
  background: lightgray;
}
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  var box = $('div.box');

  $.fn.looperMove = function(speed, fn) {
    return $(this)
      .animate({
        top: "+=50",
        left: "+=50",
        width : "-=50",
        height : "-=50",
        opacity : "toggle"
      }, speed || 500)
      .animate({
        width : "+=50",
        height : "+=50",
        opacity : "toggle"
      }, speed || 500, function(){
        $.isFunction(fn) && fn.call(this)
      });
  }

  box.on('mouseover', function(){
    box.looperMove(1000, function(){
      // console.log('looperMove ended')
    });
  });

  box.on('mouseout', function(){
    box
      .animate({
        top: 30,
        left: 0,
      }, 1000, 'swing');
  });
});
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
  ↓ Point Here !
  <div class="box">
    【箱】物を入れるための器。木、紙、皮革、金属、
    プラスチックなどで作り、身とふたとに分かれる。
    [英] a box； a case
  </div>
</body>
</html>

day13 の animation を jQuery の plugin として組み込む
$('#id').looperMove() と使えるようにする

day12 でやったように $.fn (jQeury.fn) に looperMove() を追加

$.fn.looperMove = function(speed, fn) {
  ...
}

plugin は、メソッドチェーン ( obj.a().b().c(); ) として使えるように、必ず $(this) を返すようにする

デフォルト値を適用するときの書き方1

speed || 500

これは、speed が undefined なら 500、そうでなければ speed を返す書き方。

-- (f() || g()) の評価手順 --
・f() を評価して F を得る 
・F は 値         → (f() || g()) の値は F (g() がなんであろうと、全体の評価結果は F になるので、g() は評価しない)
・F は undefined  → (f() || g()) の値は g() の評価結果 G

デフォルト値を適用するときの書き方2

$.isFunction(fn) && fn.call(this)

これは、fn が undefined でないとき fn を呼び出す書き方。この書きかは他の C 系の言語と比べても違和感ない。

-- (f() && g()) の評価手順 --
・f() を評価して F を得る 
・F は false → (f() && g()) の値は false (g() がなんであろうと、全体の評価結果は false になるので、g() は評価しない)
・F は true  → (f() && g()) の値は g() の評価結果 G

引数で与えられた function の実行方法

1 : animate の後処理として、fn が function か調べて実行する処理を追加【正式】

     .animate({
      ...
     }, speed || 500, function(){
       $.isFunction(fn) && fn.call(this)
     });

2 : fn.call(this) は fn(this) でもいい

     .animate({
      ...
     }, speed || 500, function(){
       $.isFunction(fn) && fn(this)
     });

3 : animate() にお任せ。どうせ animate() 内で undefined チェックしてから実行してるんでしょ

     .animate({
       width : "+=50",
       height : "+=50",
       opacity : "toggle"
     }, speed || 500, fn});

jQeury の検証系 function
- $.isFunction(obj) : boolean
- $.isArray(obj) : boolean
- $.isNumeric(obj) : boolean
- $.type(obj) : String
- $.isPlainObject?(obj) : boolean
- $.isEmptyObject?(obj) : boolean

↑

day15 The Obligatory Slider (First Stab) †

http://tutsplus.com/lesson/the-obligatory-slider/

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson15</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
* {
  margin: 0;
  padding: 0;  
}

.slider {
  width: inherit;
  height: 230px;
  overflow: scroll;
}

.slider ul {
  /*
  Javascript 無効時には、横に並べて表示する。
  $(document).ready() で幅を画像一枚分にし、はみ出た部分を表示しないようにする
  */
  width: 10000px;
  list-style: none;
}

.slider li {
  float: left; /* 左に回り込み指定 */
}

#slider-nav { 
  /*
  表示無効
  Javascript 無効時には、ボタンを表示しない。
  $(document).ready() で block (表示) に変更する
  */
  display: none;
  margin-left: 1em;
}

#slider-nav button {
  padding: 1em;
  margin-right: 1em;
  border-radius: 10px;
  cursor: pointer;
}
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  // $(document).ready() 時点の image
  //
  //         読み込み          onloadイベント
  // --------------------------------------
  // IE      済   (width > 0)  発生しない
  // Firefox 途中 (width > 0)  発生する
  // Safari  未   (width = 0)  発生する
  // Chrome  未   (width = 0)  発生する
  //
  $(window).on('load', initialize);  
});

function initialize() {
  var sliderArea = $('div.slider');
  var ul = sliderArea.children('ul');
  var li = ul.find('li');
  var img = ul.find('img');  
  var width = img[0].width;
  var totalWidth = width * img.length;

  sliderArea.css({
    'width' : width,
    'overflow' : 'hidden'
  });

  // 右に水星、左に冥王星をもう一つ追加
  // 右端の水星にスライド終了後、アニメーションなしで左の水星に移動
  // 左端の冥王星にスライド終了後、アニメーションなしで右の冥王星に移動
  ul.append($.clone(li[0]));
  ul.prepend($.clone(li[li.length - 1]));
  ul.css({
    "margin-left" : -1 * width
  })

  var buttonArea = $('#slider-nav');
  var buttons = buttonArea.children('button');
  buttonArea.show();
  buttons.on('click', function(){
    var $this = $(this);
    var direction = $this.data('dir');

    if (direction == 'next') {
      ul.animate({
        "margin-left" : "-=" + width
      }, function(){
        // 右端の水星(Javascript で足したもの)に来たら、左端へ
        if ( -1 * totalWidth > parseInt(ul.css('margin-left'))) {
          ul.css('margin-left', -1 * width);
        }
      });
    } else {
      ul.animate({
        "margin-left" : "+=" + width
      }, function(){
        // 左端の冥王星(Javascript で足したもの)に来たら、右端へ
        if (0 == parseInt(ul.css('margin-left'))) {
          ul.css('margin-left', -1 * totalWidth);
        }        
      });
    }
  });
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
<div class="slider">
  <ul>
    <li><img src="mercury.png" alt="mercury"/></li>
    <li><img src="venus.png" alt="venus"/></li>
    <li><img src="earth.png" alt="earth"/></li>
    <li><img src="mars.png" alt="mars"/></li>
    <li><img src="jupiter.png" alt="jupiter"/></li>
    <li><img src="saturn.png" alt="saturn"/></li>
    <li><img src="uranus.png" alt="uranus"/></li>
    <li><img src="neptune.png" alt="neptune"/></li>
    <li><img src="pluto.png" alt="pluto"/></li>    
  </ul>
</div>
<div id="slider-nav">
  <button data-dir="prev">Previous</button>
  <button data-dir="next">Next</button>
</div>
</body>
</html>

画像は http://www.publicdomainpictures.net/ のものを使った
jQuery の使い方に関しては特に新しいものは無し
Javascript が off でも表示できるようにする。$(document).ready() で、DOM を捜査して、Javascript が有効なときのエレメントを追加する
やっていること:
1. <ul><li><img></li><li><img></li>...</ul> を横に並べる
2. <ul>を囲む div の横幅を画像一枚分にする
3. <ul>の margin-left を変更することによって、div から見える領域を変える
Safari、Chrome (Webkit) では、$(document).ready() 時点で image が読み込まれていないことに注意
- Learn jQuery in 30 Days のサンプルコードは Safari、Chrome では動かない
- $(document).ready() は、HTML を DOM ツリーに展開し終わった後に呼ばれる。
  - IEは、この時点で image の読み込みも完了している
  - firefox では、読み途中
  - Safari、Chrome (Webkit) では、DOM ツリーができあがった後に image を読み込んでいる
  - firefox、Safari、Chrome では、画像の onload イベントが発生するが、IE では onload イベントは発生しない
  - jQuery を使っているからと言って、クロスブラウザでテストしなくて良いわけではなさそうですな
- image.width を使う処理は window.onload (レタリング終了) を待つ必要がある

↑

day16 Prototypal Inheritance and Refactoring the Slider †

http://tutsplus.com/lesson/prototypal-inheritance-and-refactoring-the-slider/

day15 を部品化
スライド部品をクラス化する。Javascript の prototype を使う
prototype について → Javascript prototype で勉強した

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson16</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
* {
  margin: 0;
  padding: 0;  
}

.slider {
  width: inherit;
  height: 230px;
  overflow: scroll;
}

.slider ul {
  /*
  Javascript 無効時には、横に並べて表示する。
  $(document).ready() で幅を画像一枚分にし、はみ出た部分を表示しないようにする
  */
  width: 10000px;
  list-style: none;
}

.slider li {
  float: left; /* 左に回り込み指定 */
}

#slider-nav { 
  /*
  表示無効
  Javascript 無効時には、ボタンを表示しない。
  $(document).ready() で block (表示) に変更する
  */
  display: none;
  margin-left: 1em;
}

#slider-nav button {
  padding: 1em;
  margin-right: 1em;
  border-radius: 10px;
  cursor: pointer;
}
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */

/* ▽▽▽ここからプロジェクトのライブラリ (mylib.js などにする)▽▽▽ */
function Slider(container) {
  this.container = container;

  $(window).on('load', $.proxy(this.initialize, this));  
}

Slider.prototype.initialize = function() {
  var ul = this.container.children('ul');
  var li = ul.find('li');
  var img = ul.find('img');

  var width = img[0].width;
  var totalWidth = width * img.length;

  this.container.css({
    'width' : width,
    'overflow' : 'hidden'
  });

  // 右に火星、左に冥王星をもう一つ追加
  // 右端の火星にスライド終了後、アニメーションなしで左の火星に移動
  // 左端の冥王星にスライド終了後、アニメーションなしで右の冥王星に移動
  ul.append($.clone(li[0]));
  ul.prepend($.clone(li[li.length - 1]));
  ul.css({
    "margin-left" : -1 * width
  })

  this.ul = ul;
  this.width = width;
  this.totalWidth = totalWidth;
}

Slider.prototype.next = function() {
  this.ul.animate({
    "margin-left" : "-=" + this.width
  }, $.proxy(function(){
    // 右端の火星(Javascript で足したもの)に来たら、左端へ
    if ( -1 * this.totalWidth > parseInt(this.ul.css('margin-left'))) {
      this.ul.css('margin-left', -1 * this.width);
    }
  }, this));
}

Slider.prototype.prev = function() {
  this.ul.animate({
    "margin-left" : "+=" + this.width
  }, $.proxy(function(){
    // 左端の冥王星(Javascript で足したもの)に来たら、右端へ
    if (0 == parseInt(this.ul.css('margin-left'))) {
      this.ul.css('margin-left', -1 * this.totalWidth);
    }
  }, this));
}
/* △△△ここまでプロジェクトのライブラリ (mylib.js などにする)△△△ */

$(document).ready(function(){
  var slider = new Slider($('div.slider'));

  var buttonArea = $('#slider-nav');
  var buttons = buttonArea.children('button');
  buttonArea.show();
  buttons.on('click', function(){
    var $this = $(this);
    var direction = $this.data('dir');
    if (direction == 'next') {
      slider.next();
    } else {
      slider.prev();
    }
  });
});
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
<div class="slider">
  <ul>
    <li><img src="mercury.png" alt="mercury"/></li>
    <li><img src="venus.png" alt="venus"/></li>
    <li><img src="earth.png" alt="earth"/></li>
    <li><img src="mars.png" alt="mars"/></li>
    <li><img src="jupiter.png" alt="jupiter"/></li>
    <li><img src="saturn.png" alt="saturn"/></li>
    <li><img src="uranus.png" alt="uranus"/></li>
    <li><img src="neptune.png" alt="neptune"/></li>
    <li><img src="pluto.png" alt="pluto"/></li>    
  </ul>
</div>
<div id="slider-nav">
  <button data-dir="prev">Previous</button>
  <button data-dir="next">Next</button>
</div>
</body>
</html>

↑

day17 Your Questions Answered †

http://tutsplus.com/lesson/your-questions-answered/

サイトに寄せられた質問への回答

↑

day18 Quiz #2 – Effects †

http://tutsplus.com/lesson/jquery-30-days-quiz-2/

↑

day19 $.each and Templating †

http://tutsplus.com/lesson/each-and-templating/

JSON オブジェクトをテンプレートを使って HTML にする
Ajax の Response を HTML として描画するときに使えるテクニック

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson19</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

div {
  float: left;
  border: solid 1px;
  border-color: darkred;
  margin: 1px;
}
/* ==================== STYLES ==================== */
    </style>
    <script id="planetTemplate" type="text/template">
<!-- ==================== TEMPLATE ==================== -->
<div>
  <img src="%%planet%%.png" alt="%%planet%%"/>
  <ul>
    <li>直径 : %%diameter%% km</li>
    <li>公転距離 : %%dist%% AU</li>
    <li>自転周期 : %%rotation%%</li>
    <li>公転周期 : %%revolution%%</li>
    <li>光度 : %%luminous%% 等星</li>
  </ul>
</div>
<!-- ==================== TEMPLATE ==================== -->
    </script>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
var planets = [
  { 
    planet : 'mercury',
    diameter : '4878',
    dist : '0.387',
    rotation : '58.65日',
    revolution : '87.97日',
    luminous : '-2.4'
  },{ 
    planet : 'venus',
    diameter : '12104',
    dist : '0.723',
    rotation : '243.0日',
    revolution : '224.7日',
    luminous : '-4.7'
  },{ 
    planet : 'earth',
    diameter : '12756',
    dist : '1.00',
    rotation : '23.93時間',
    revolution : '365.26日',
    luminous : ''
  },{ 
    planet : 'mars',
    diameter : '6787',
    dist : '1.524',
    rotation : '1.026日',
    revolution : '686.98日',
    luminous : '-3.0'
  },{ 
    planet : 'jupiter',
    diameter : '142800',
    dist : '5.203',
    rotation : '9.8時間',
    revolution : '11.86年',
    luminous : '-2.8'
  },{ 
    planet : 'saturn',
    diameter : '120660',
    dist : '9.539',
    rotation : '10.2時間',
    revolution : '29.46年',
    luminous : '-0.5'
  },{ 
    planet : 'uranus',
    diameter : '51118',
    dist : '19.18',
    rotation : '17.9時間',
    revolution : '84年',
    luminous : '5.3'
  },{ 
    planet : 'neptune',
    diameter : '49528',
    dist : '30.06',
    rotation : '19.1時間',
    revolution : '164.8年',
    luminous : '7.8'
  },{ 
    planet : 'pluto',
    diameter : '2320',
    dist : '39.53',
    rotation : '6.4日',
    revolution : '248.5年',
    luminous : '13.6'
  }
];

$(document).ready(function(){
  var template = $.trim($('#planetTemplate').html());
  var flagment = '';

  $.each( planets, function( index, obj ){
    flagment += 
      template
        .replace(/%%planet%%/ig, obj.planet)
        .replace(/%%diameter%%/ig, obj.diameter)
        .replace(/%%dist%%/ig, obj.dist)
        .replace(/%%rotation%%/ig, obj.rotation)
        .replace(/%%revolution%%/ig, obj.revolution)
        .replace(/%%luminous%%/ig, obj.luminous);
  });

  $('body').append(flagment);
});
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
</body>
</html>

テンプレートは <script language="text/template"> で記述する
配列の形で渡された JSON オブジェクトを $.each(obj, callback(index, obj)) で HTML にする
テンプレートに書かれている置換文字列を $('#id').replace(regex, string) で置換する
- regex (正規表現 REGular EXpression) は、それ自体 Javascript のオブジェクトのなので '' で囲まない
- $ は jQuery が使っているので、プレースホルダーに ${} は使えない
DOM 操作は重い。作成する HTML は、作成中は文字列として扱い、最後に DOM ツリーに追加する。

↑

day20 Say Hello to Handlebars †

http://tutsplus.com/lesson/say-hello-to-handlebars/

1 から 10 まで jQuery にこだわる必要は無い
テンプレートエンジンとしては、Handlebars ( http://handlebarsjs.com/ ) の方が優れている
- day21 では、テンプレートへの JSON オブジェクトの適用を jQuery の置換で行った
- Handlebars では変数名( name: 'atsushi' )とプレイスホルダのキー( {{name}} )が同じ場合は自動的に割り付けられる
Handlebars では、テンプレート中に繰り返しや条件分岐などを記述できる
(さすがにここまでくると、クライアントサイドの Javascript ではなく、サーバーサイド (JSP,JSF や PHP) でやりたいなぁ・・・)

← Day 10 以前 : Javascript Learn jQuery in 30 Days (01-10)
→ Day 21 以降 : Javascript Learn jQuery in 30 Days (21-30)

HTML

Javascript Learn jQuery in 30 Days (11-20)

目次

訪問者

更新

最新の10件

人気の10件

MenuBar

day11 Modifying Effect Speeds †

day12 Creating Custom Effect Methods †

day13 Full Control With animate †

day14 Homework Solutions †

day15 The Obligatory Slider (First Stab) †

day16 Prototypal Inheritance and Refactoring the Slider †

day17 Your Questions Answered †

day18 Quiz #2 – Effects †

day19 $.each and Templating †

day20 Say Hello to Handlebars †