Ming Apps

Posts Tagged ‘javascript

HTML5 canvas提供了一個很好的機會,

讓大家可以在canvas上畫畫(如筆者在右手邊展示的Chinese Calligraphy 毛筆字 )。

但在iPad/iPhone/Android等智能手機上,

在熒幕上用手指點移的時候,

通常只會向上向下移動整個頁面,

結果在mobile畫不了畫。

那怎辦呢?

就是加入以下的source code,

便可以停止手機瀏覽器本身的移動(Elastic scolling),

並進行你想要的動作。

// prevent elastic scrolling
document.body.addEventListener('touchmove',function(event){
event.preventDefault();
},false); // end body:touchmove

rewardjs-header

Link: http://rewardjs.com/

過了一年的實習,

結果就Debug了一年哈~

可惜,

Debug的能力看來在這一年返回學習生涯浪費了~

今次為大家介紹的是,

Debug可以贏大獎!

iPad2, Xbox, 好多好多獎品!

暫時要大家懂得為jQuery UI debug~

一至五每日debug最多的,

一星期debug最多的,

一個月內debug最多的

各有各獎品~

是誰想到這個debug大計的呢?

很有趣的concept~

加油啊各位~

jQuery logo

為何1.6會出得這樣快呢?

Google CDN: http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js

Microsoft CDN: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js

這次的Version最明顯的更新,

莫過於Data, Attr和Val三個functions的速度快了許多,

其中Attr的function快了近兩倍!

.

令外對我較吸引的更新是Relative CSS,

意思是可以在不同的style attribut上直接加上你所需要的數值,

例如:


$("div").css("right", "+=28px");

還有更多的效果,Performance Improvements和Bug Fixed,

jQuery, 教人如何不愛你? :P

NOWJS!

Posted on: 2011/04/25

網址: http://nowjs.com/

ming apps nowjs logo

今天一口氣出了三篇Blog!

這個nowjs 是以Javascript(又是Javascript!)的技術,

設計不同的WebApps~

最重要的是Server Side和Client Side的處理都變得更輕鬆了~

看到以下的Create a chatroom in 12 lines of javascript的影片更是嚇倒了筆者哈~

筆者朋友曾經說過在一個Project中,

可以只需利用JS,不用在Web server開Socket,

便可以處理到兩個Browser之間的同步互動!

但做法很奇怪呢,

還是HTML5 websocket好吧?

噢看來筆者的Programming Language Study List上又多了個JS Framework了~

標籤: ,

jQuery logo
原文網址: http://blog.jquery.com/2011/03/31/jquery-152-released/

 

大家已經可以利用Google CDN及Microsoft CDN 載入jQuery 1.5.2:

Google CDN: https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
Microsoft CDN: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js

 

jQuery是我實習時第一種接觸到的javascript library/framework,

使用起來極其方便,

大部份function可以chain起來,

更了解更多AJAX和callback的使用。

 

jQuery 的update速度不錯,

筆者上年實習的時候剛出1.4,

那時還說運算速度上有很大的提升。

 

今次一看,原來在今年1月尾推出了jQuery 1.5,

3月31號剛推出了 jQuery 1.5.2!

Version 1.5與之前version有兩大分別,

一個是Ajax Rewrite,另一個是Deferred Object.

 

jQuery新增了一個jqXHR的Object,

當大家開始Ajax call,

return object正是jqXHR,

它可算是一個cross browser platform的XMLHttpRequest Object(superset of the XMLHTTPRequest object) ,

大家可以當正常Ajax call之外,

還有Statuscode(404! page not found!),

還有很多可以參考

 

Deferred Object又是是甚麼呢?

Deferred Object原意是在function中實現callback function,

亦支援chainable functions,

是first in first out的形式,

按先後次序進行function call.

 

大家可以到: http://jsfiddle.net/hN5Eb/1/ 測試一下Deferred Object是甚麼。

$.when( x(), y(), z()) 可以輸入多個function按次序進行這些function,

大家便可以跟據Event不同的情況作出相應動作,

例如大家可在進行中run其他function(Deferred.then),

完成callback(Deferred.done)等多個default function.

 

Ajax方面亦都包含了deferred object,

大家可以看看原來jquery的ajax call是:

$.post("test.php",{func:"getNameAndTime"},
function(data){
alert(data.name); // John
console.log(data.time); //  2pm
}, "json");

但現在你則可以利用deferred object寫成 :

// $.get, an ajax request, is asynchronous by default.
var req = $.get('foo.htm')
.success(function( response ){
// do something with the response
})
.error(function(){
// do something if the request failed
});

// this might execute before the $.get() above is complete
doSomethingAwesome();

// something additional to execute upon success,
// which might, or might not,
// have fired by now.  With $.ajax deferreds built-in, it doesn't matter.
req.success(function( response ){
// do something more with the response
// this will fire when success normally fires, or fire immediately
// if prior success callbacks have already fired
});

Success, error,或者 complete handler 已經可以不只一個,

而且可以以先後次序方式,自己管理callback 次序。

 

大家可以從上面的example看到,

callback已經可以在AJAX request,

甚至係其他function完結(Deferred.done)後,

進行你的callback.

從前的ajax callback總是要密密麻麻在function(data)中進行,

這種寫法看來是更加簡潔和具直覺性,

是個相當好的「Reordering」哈哈~

 

絕對建議大家到呢一個jQuery tutorial on deferred object,

了解更多deferred object的使用。

 

或者筆者遲些將其翻譯成中文吧~


%d 位部落客按了讚: