day21 The Twitter API †

http://tutsplus.com/lesson/the-twitter-api/

[source] [reload]

↑

サーバーサイド †

↑

クライアントサイド †

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson21</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
li {
  color : lightgreen;
}
.article {
  border : 1px solid darkred;
  color : darkslategray;
  background : lightyellow;
  font-size : 10px;
}
/* ==================== 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 ==================== */
var url = 'json.php?callback=?';
var arg = {
  "arg1" : "val1",
  "arg2" : "val2"
}
$(document).ready(function(){
  $('button').on('click', function() {
    $.getJSON(url, arg, function( data ) {

      var date = data.date;
      var fortune = $.map( data.fortune , function(element, idx){
        return idx + ":  " + element + '<br/>';
      });

      var newArticle = $('<div/>').addClass('article');
      for (idx in fortune) {
        newArticle.append(fortune[idx]);
      }

      var newEntry = $('<li/>').append(date).append(newArticle);

      newEntry.prependTo($('ul'));
    });
  });
});
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
  <button>GET MESSAGE</button>
  <ul></ul>
</body>
</html>
↑

通信内容 †

↑

エラー処理 †

→ day 25

↑

day22 Filtering with jQuery.grep †

http://tutsplus.com/lesson/filtering-with-jquery-grep/

↑

day23 Custom Events and the Observer Pattern †

http://tutsplus.com/lesson/custom-events-and-the-observer-pattern/

↑

独自の イベント を発行する †

[source] [reload]
day21 の焼き直し。
day21 では、ajax の response が返ってきたイベントハンドラ内で処理を行っていた。
ajax の response が返ってきたときに、'json.fortune.update' イベントを発行し、イベント処理は'json.fortune.update' のイベントハンドラで行うようにする。

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson23_1</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
li {
  color : lightgreen;
}
.article {
  border : 1px solid darkred;
  color : darkslategray;
  background : lightyellow;
  font-size : 10px;
}
/* ==================== 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 ==================== */
var url = 'http://hondou.homedns.org/pukiwiki/json.php?callback=?';

$(document).ready(function(){
  $('button').on('click', function() {
    $.getJSON(url, function( data ) {
      // document に json.fotune.update イベントを発生させる
      $(document).trigger('json.fortune.update', data);
    });
  });
});

// json.fotune.update イベント のハンドラ
$(document).on('json.fortune.update', function(e, data){
  var date = data.date;

  var newArticle = $('<div/>').addClass('article');
  newArticle.append(
    $.map( data.fortune , function(element, idx){
      return element;
    }).join('<br/>')
  );

  var newEntry = $('<li/>').append(date).append(newArticle);

  newEntry.prependTo($('ul'));
});
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
  <button>GET MESSAGE</button>
  <ul></ul>
</body>
</html>
↑

イベントを pub/sub フレームワークに拡張する †

[source] [reload]
独自のイベントを Wrap して、pub/sub フレームワークにする。
publisher が何かか起きたことを宣言すると、それを契機に publisher を監視している複数の subscriber が処理を開始する。
内容的にはイベントと同じだけど、UI を初めとする外部装置が契機の処理は「event / handler」、それ以外の処理状態の変化が契機の処理は「publish / subscribe」とすると人間にとって理解しやすい。

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson23_2</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
li {
  color : lightgreen;
}
.article {
  border : 1px solid darkred;
  color : darkslategray;
  background : lightyellow;
  font-size : 10px;
}
/* ==================== 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 ==================== */
// jQuery の拡張
(function( $ ) {
  var o = $( {} ); // 中身のない jQuery オブジェクト

  $.each({
    trigger: 'publish',
    on: 'subscribe',
    off: 'unsubscribe'
  }, function( key, val ) {
    // jQuery.${val} = function() { o.${key}(o , arguments) }
    jQuery[val] = function() {
      o[key].apply( o, arguments );
    };
  });
})( jQuery );

var url = 'http://hondou.homedns.org/pukiwiki/json.php?callback=?';

$(document).ready(function(){
  $('button').on('click', function() {
    // json.fotune.start メッセージを publish
    $.publish('json.fortune.start');

    $.getJSON(url, function( data ) {
      // json.fotune.end メッセージを publish
      $.publish('json.fortune.end', data);
    });
  });
});

// subscriber 1
$.subscribe('json.fortune.end', function(e, data){
  var date = data.date;

  var newArticle = $('<div/>').addClass('article');
  newArticle.append(
    $.map( data.fortune , function(element, idx){
      return element;
    }).join('<br/>')
  );

  var newEntry = $('<li/>').append(date).append(newArticle);

  newEntry.prependTo($('ul'));
});

// subscriber 2
$.subscribe('json.fortune.start', function(e){
  $('#spnBtn').css('display','none');
  $('#spnWait').css('display','inline');
});

// subscriber 3
$.subscribe('json.fortune.end', function(e, data){
  $('#spnBtn').css('display','inline');
  $('#spnWait').css('display','none');
});
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
  <span id="spnBtn" style="display:inline">
    <button>GET MESSAGE</button>
  </span>
  <span id="spnWait" style="display:none">
    <img src="ajax-loader.gif"/>
  </span>
  <ul></ul>
</body>
</html>
↑

day24 Loading Pages Asynchronously †

http://tutsplus.com/lesson/loading-pages-asynchronously/

[source] [reload]

↑

day25 Interacting with the Server-Side †

http://tutsplus.com/lesson/interacting-with-the-server-side/

[source] [reload]

↑

day26 PHP and jQuery: Part 1 †

http://tutsplus.com/lesson/ajax/

↑

day27 PHP and jQuery: Part 2 †

http://tutsplus.com/lesson/php-and-jquery-part-2/

↑

day28 Deferreds †

http://tutsplus.com/lesson/deferreds/?WT.mc_id=learnjquery

↑

Deferred †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson28</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
/* ==================== 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 ==================== */
function async(cmd) {
  var dfd = $.Deferred();

  setTimeout(function(){
    if (cmd == 'success') {
      dfd.resolve('success');
    } else {
      dfd.reject('fail');
    }
  }, 2000);

  return dfd.promise();
}

function getNow() {
  var date = new Date();
  var hour = date.getHours();
  var min  = date.getMinutes();
  var sec  = date.getSeconds();

  return (hour < 10 ? '0' : '') + hour + ':'
    + (min < 10 ? '0' : '') + min + ':'
    + (sec < 10 ? '0' : '') + sec;
}

function log(msg) {
    var ul = $('ul');

    var li = $('<li></li>');
    li.html(getNow() + ' : ' + msg);
    ul.prepend(li);
}

$(document).ready(function(){
  $('button').on('click', function(){
    var $this = $(this);
    var cmd = $this.data('cmd');

    log('<font color=\"red\">async called</font>');
    async(cmd)
      .done(function(obj){
        log('done:  retval=' + cmd);
      })
      .fail(function(obj){
        log('fail:  retval=' + cmd);
      })
      .always(function(obj){
        log('always: retval=' + cmd);
      });
  });
});

/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
  <button data-cmd="success">Success</button>
  <button data-cmd="fail">Fail</button>
  <ul></ul>
</body>
</html>
↑

$.when() †

↑

ajax系 の function は Deferred を返す †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson28</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
/* ==================== 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 ==================== */
function getNow() {
  var date = new Date();
  var hour = date.getHours();
  var min  = date.getMinutes();
  var sec  = date.getSeconds();

  return (hour < 10 ? '0' : '') + hour + ':'
    + (min < 10 ? '0' : '') + min + ':'
    + (sec < 10 ? '0' : '') + sec;
}

function log(msg) {
    var ul = $('ul');

    var li = $('<li></li>');
    li.html(getNow() + ' : ' + msg);
    ul.prepend(li);
}

function callHello(){
  return $.post('hello.php', {name:"AHO"});
}

function callFortune(){
  return $.getJSON('json.php?callback=?')
}

$(document).ready(function(){
  $('button').on('click', function(){

    log('<font color=\"red\">async called</font>');

    $.when(callHello(), callFortune())
      .done(function(obj1, obj2){
        log('done:  retval1=' + obj1[0]);
        log('done:  retval2=' + obj2[0].fortune);
      })
      .fail(function(obj1, obj2){
        log('fail:  retval1=' + obj1[0]);
        log('fail:  retval2=' + obj2[0]);
      });
  });
});

/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
  <button>Call</button>
  <ul></ul>
</body>
</html>
↑

day29 Head First Into Plugin Development †

http://tutsplus.com/lesson/head-first-into-plugin-development/

[source] [reload]

↑

day30 Course Review †

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

quiz3.png

だいたいできたっぽい

↑

day31 Goodbye †

http://tutsplus.com/lesson/goodbye/

goodbye.png

どーも、ありがとさん。

← Day 21 以前 : Javascript Learn jQuery in 30 Days (11-20)

HTML

添付ファイル: filejson1.png 2225件 [詳細] filexmlhttpreq.png 2140件 [詳細] filequiz3.png 2141件 [詳細] filejson3.png 2118件 [詳細] filejson2.png 2128件 [詳細] filegoodbye.png 2137件 [詳細] fileajax-loader.gif 2077件 [詳細] filelesson29.html 3199件 [詳細] filefortune.jquery.js 2511件 [詳細] filelesson28-2.html 3276件 [詳細] filelesson28-1.html 3278件 [詳細] filelesson25.html 3435件 [詳細] filelesson24.html 3192件 [詳細] filelesson24-2.html 1373件 [詳細] filelesson24-1.html 1402件 [詳細] filelesson23_2.html 3351件 [詳細] filelesson23_1.html 3399件 [詳細] filelesson22.html 3373件 [詳細] filelesson21.html 3211件 [詳細]
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2012-05-06 (日) 02:25:25 (4607d)
Short-URL: http://at-sushi.com/pukiwiki/pukiwiki.php?cmd=s&k=679c2832a2
ISBN10
ISBN13
9784061426061