http://tutsplus.com/lesson/the-twitter-api/
[source] [reload] |
<?php $fortune = array(); $fortune["date"] = date("Y/m/d H:i:s", time()); exec("fortune", $output); $fortune["fortune"] = $output; header("Content-Type: application/json; charset=utf-8"); echo $_GET['callback'] . "(" . json_encode($fortune) . ")"; ?>
CALLBACK_ID + "(" + JSON + ")"形式にする必要がある
<!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>
$.getJSON(url, arg, function( data ) { ... }
GET /pukiwiki/json.php?callback=jQuery171044545190918635724_1329927831810& arg1=val1&arg2=val2&_=1329927836180 HTTP/1.1
→ day 25
http://tutsplus.com/lesson/filtering-with-jquery-grep/
[source] [reload] |
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Lesson22</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 ==================== */ var arr = [8,6,9,14,135,96,7,128,99]; $(document).ready(function(){ $('button').on('click', function(){ var $this = $(this); var filter = $this.data('dir'); var displayArr = arr; switch(filter) { case 'even' : displayArr = $.grep(arr, function(element, idx) { return (element % 2 == 0); }); break; case 'odd' : displayArr = $.grep(arr, function(element, idx) { return (element % 2 == 0); }, true); break; default : break; } var display = ''; for (idx in displayArr) { display = display + displayArr[idx] + ','; } $('#result').html(display); }); }); /* ==================== SCRIPTS ==================== */ </script> </head> <body> <button data-dir="odd">Odd</button> <button data-dir="even">Even</button> <button data-dir="all">All</button> <div id="result"></div> </body> </html>
http://tutsplus.com/lesson/custom-events-and-the-observer-pattern/
[source] [reload] |
<!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>
[source] [reload] |
<!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>
(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 );
http://tutsplus.com/lesson/loading-pages-asynchronously/
[source] [reload] |
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Lesson24</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 ==================== */ $(document).ready(function(){ $('a').on('click', function( e ) { var href = $(this).attr('href'); $('#div-article').load(href + ' #article'); e.preventDefault(); }); }); /* ==================== SCRIPTS ==================== */ </script> </head> <body> <nav> <ul> <li><a href="lesson24-1.html">記事1</a></li> <li><a href="lesson24-2.html">記事2</a></li> </ul> </nav> <div id="div-article"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Lesson24-1</title> </head> <body> <h1>嘘新聞社</h1> <h2>2012年8月12日付</h2> <div id="article"> _| ̄|〇 もうだめぽ </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Lesson24-2</title> </head> <body> <h1>嘘新聞社</h1> <h2>2012年10月31日付</h2> <div id="article"> 〆ミ・д・,,ミ めもめも </div> </body> </html>
$('#div-article').load("news.html #article")
http://tutsplus.com/lesson/interacting-with-the-server-side/
[source] [reload] |
<?php header("Content-Type: html/text; charset=utf-8"); echo "Hello " . $_POST['name'] . "!"; ?>
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Lesson25</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 ==================== */ var url = "hello.php"; $(document).ready(function(){ $('form').on('submit', function(e) { $.post( url, $(this).serialize(), function(data) { // SUCCESS $('ul').prepend('<li> SUCCESS:' + data); },'text').error(function(data, textStatus){ // FAIL $('ul').prepend('<li> FAIL(' + status + "):" + data); }); e.preventDefault(); }); }); /* ==================== SCRIPTS ==================== */ </script> </head> <body> <form action="#"> name : <input type="text" name="name" value="AHO"/><br/> <button type="submit">Hello</button> </form> <ul></ul> </body> </html>
$.post( url, $(this).serialize(), function(data) { // イベントハンドラ(SUCCESS) $('ul').prepend('<li> SUCCESS:' + data); },'text').error(function(data, textStatus){ // FAIL $('ul').prepend('<li> FAIL(' + status + "):" + data); });
http://tutsplus.com/lesson/ajax/
http://tutsplus.com/lesson/php-and-jquery-part-2/
http://tutsplus.com/lesson/deferreds/?WT.mc_id=learnjquery
[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( async1(), asunc2(), async3() ) .done( function(obj1, obj2, obj3) { ... }) .fail( function(obj1, obj2, obj3) { ... });
[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>
http://tutsplus.com/lesson/head-first-into-plugin-development/
[source] [reload] |
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Lesson29</title> <style type="text/css"> /* ==================== STYLES ==================== */ .article { width : 600px; border : 1px solid darkred; color : darkslategray; background : lightyellow; font-size : 15px; } /* ==================== 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" src="fortune.jquery.js"></script> <script type="text/javascript"> /* ==================== SCRIPTS ==================== */ $(document).ready(function(){ var buttons = $('button'); // fortune のオプションを共通的に変更する $.fn.fortune.options.onComplete = function() { buttons.each(function(){ $(this).attr('disabled', false); console.log($(this)); }); } buttons.on('click', function(){ buttons.each(function(){ $(this).attr('disabled', true); }); var $this = $(this); switch($this.data('cmd')){ case '5times': // パラメータを1つ指定して実行 $('div.article').fortune(5); break; case 'param': // パラメータを複数指定して実行 $('div.article').fortune({ cycle: 10, transition: 'slideToggle', interval: 100 }); break; default: // デフォルトパラメータで実行 $('div.article').fortune(); break; } }); }); /* ==================== SCRIPTS ==================== */ </script> </head> <body> <button data-cmd="default">標準</button> <button data-cmd="5times">5回</button> <button data-cmd="param">パラメータ変更</button> <div class="article"></div> </body> </html>
// Object.create() に対応していないブラウザに対応する // Object.create() に対応していないブラウザの場合、 // Object を拡張して create function を作る if ( typeof Object.create != 'function' ) { Object.create = function( obj ) { function F() {}; F.prototype = obj; return new F(); }; } // plugin のテンプレート // // ・plugin は、自己実行 function で作成する。 // // ・$ は、別の用途で使われているかもしれないので // この function のローカルスコープにする。 // // ・window, document をローカルスコープに入れることで // パフォーマンスの向上を図る。 // // ・比較用の undefined 定数を準備する。 // (function( $, window, document, undefined ) { // plugin を実行するクラス var Fortune = { init: function( options, elem ) { var self = this; self.elem = elem; self.$elem = $(elem); if (options == undefined) { self.options = $.extend({}, $.fn.fortune.options); } else if (typeof options == 'number') { self.options = $.extend({}, $.fn.fortune.options, {cycle:options}); } else { self.options = $.extend({}, $.fn.fortune.options, options); } }, fetch: function() { var self = this; return $.getJSON(self.options.url); }, display: function() { var self = this; self.refresh(self.options.cycle); }, refresh: function(cycle) { var self = this; self.fetch().done(function(result){ var fortune = $.map( result.fortune , function(element, idx){ return " " + element + '<br/>'; }); // self.$elem の self.options.transition function を実行する self.$elem[self.options.transition](500, function(){ self.$elem.html('[' + cycle + ']<br/>'); for (idx in fortune) { self.$elem.append(fortune[idx]); } self.$elem[self.options.transition](500, function(){ if (cycle > 0) { setTimeout(function(){ self.refresh(cycle - 1); }, self.options.interval); } else { if ( self.options.onComplete && typeof self.options.onComplete == 'function' ) { // onComplete function を引数 self.elem で実行する self.options.onComplete.apply(self.elem); } } }); }) }); } }; // plugin $.fn.fortune = function( options ) { // fortune を表示するエレメントが複数の場合にも、 // それぞれ動くように each で実行。 // each は単数の場合にも使える。 return this.each(function(){ var fortune = Object.create( Fortune ); fortune.init( options, this ); fortune.display(); }); }; // plugin 設定 // ユーザプログラムからデフォルト設定を変更できるように // plugin 本体とは別のオブジェクトにする $.fn.fortune.options = { url: 'http://hondou.homedns.org/pukiwiki/json.php?callback=?', cycle: 3, transition: 'fadeToggle', interval: 3000, onComplete: null, }; })( jQuery, window, document);
http://tutsplus.com/lesson/jquery-30-days-quiz-3/
だいたいできたっぽい
http://tutsplus.com/lesson/goodbye/
どーも、ありがとさん。
← Day 21 以前 : Javascript Learn jQuery in 30 Days (11-20)