Hello world: 8月 2013

2013年8月28日星期三

利用 Google Api 產生 QR Code

Google 本身有一個繪製圖表的 API 可以在各種統計報表的時候看到，那這個 API 當然也可以拿來生成 QRCode 囉～

調用網址：https://chart.googleapis.com/chart?cht=qr

這邊寫一個簡單的範例，將網址轉換成 QRCode

window.open("https://chart.googleapis.com/chart?cht=qr&chs=120x120&choe=UTF-8&chld=H|0&chl=" + location.href)

轉至：http://knowlet3389.blogspot.tw/2013/08/js-google-api-qrcode.html

2013年8月24日星期六

This morning more than 30 trucks filled with 5-cent coins arrived at Apple’s headquarters in California. Initially, the security company that protects the facility said the trucks were in the wrong place, but minutes later, Tim Cook (Apple CEO) received a call from Samsung CEO explaining that they will pay $1 billion dollars for the fine recently ruled against the South Korean company in this way.
今早超過 30 台的卡車裝滿著 5 分美元硬幣到達 Apple 的加州總部。最初保全公司以為這些卡車開錯地方了，但沒過多久，Apple 的 CEO 庫克 ( Tim Cook ) 就接到一通 Samsung CEO 的來電，說南韓總公司指示用這種方式支付近期的裁定罰款 10 億元美金。

The funny part is that the signed document does not specify a single payment method, so Samsung is entitled to send the creators of the iPhone their billion dollars in the way they deem best.
有趣的地方是，合約上並沒有指定須使用哪一種支付方式。所以 Samsung 有權使用他們認為最好的支付方式去支付罰款。

This dirty but genius geek troll play is a new headache to Apple executives as they will need to put in long hours counting all that money, to check if it is all there and to try to deposit it crossing fingers to hope a bank will accept all the coins.
這個骯髒玩笑可給 Apple 高層頭疼了，因為他們需要花大量的時間去盤點硬幣。

Lee Kun-hee, Chairman of Samsung Electronics, told the media that his company is not going to be intimidated by a group of “geeks with style” and that if they want to play dirty, they also know how to do it.
Samsung 會長李健熙告訴媒體，他們公司是不會被這種怪胎風格嚇倒的，如果蘋果想要玩這種骯髒的手段，他們也知道要怎麼做的。

You can use your coins to buy refreshments at the little machine for life or melt the coins to make computers, that’s not my problem, I already paid them and fulfilled the law. A total of 20 billion coins, delivery hope to finish this week.
你可以用你的硬幣去買飲料在機器上過一生，或者燒掉硬幣去製造電腦，這些都不是我的問題，我已經支付罰款並履行法律。總共有20億個硬幣，希望在這個周末可以完成移交

Let’s see how Apple will respond to this.
對於 Apple 要怎麼回應呢，就讓我們看下去...

原文：http://news-hound.net/samsung-pays-apple-1-billion-sending-30-trucks-full-of-5-cent-coins/

Cheat Engine : 如何製作與載入CEM(Cheat Engine Memory)

製作CEM：

1.開啟 CE(Cheat Engine)
2.開啟楓之谷到 Play 畫面 (不要點擊 Play )
3.點擊 Select a process to
4.選擇 MapleStory.exe
5.點擊 Memory View
6.點擊 File / Save memory region(區域) 或直接按 Ctrl + S
7.在From下面填寫00400000，To下面填寫01000000，按下Add，再按Save。
8.將名稱命名為該新楓之谷版本，以利分辨。存檔即可。

載入CEM：

1.開啟 CE(Cheat Engine)
2.點擊 Select a process to
3.選擇 Open File
4.在空白處按右鍵新增「文字文件」，並命名新版本
5.點擊 Memory View6.點擊 File / Load memory region(區域) 或直接按 Ctrl + O
7.找到你要用的CEM點擊開啟
8.會跑出一個視窗，如果上面的框框是00000000-006FFFFF以上，就直接按ok！如果不是，就在Address那邊打00400000，然後按Edit！

參考來源：

KNowlet 技術の休閒 - 製作與開啟CEM(Cheat Engine Memory)
http://knowlet3389.blogspot.tw/2012/07/cemcheat-engine-memory.html
外掛聯合國 - 製作CEM、載入CEM教學
http://bbs.wgun.net/thread-146582-1-1.html

jQuery : 初新者的第一步 ( Getting Start )

This is a basic tutorial, designed to help you get started using jQuery. If you don't have a test page setup yet, start by creating the following HTML page:
這個教程將協助你開始使用 jQuery。如果你沒有一個測試的網頁，那你可以透過下列的程式碼建立一個測試網頁。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
// Your code goes here
</script>
</body>
</html>

The src attribute in the <script> element must point to a copy of jQuery. Download a copy of jQuery from the Downloading jQuery page and store the jquery.js file in the same directory as your HTML file.
在<script>中的src屬性必須指向至jQuery的檔案。下載完jQuery的檔案後，須把jquery.js這個檔案，儲存在與HTML檔案相同的目錄之下。

在Document載入完成時，才執行程式碼 (Launching Code on Document Ready)

To ensure that their code runs after the browser finishes loading the document, many JavaScript programmers wrap their code in an onload function:
為了確保程式碼在Browser完成載入時才執行，許多的JavaScript程式設計師會把他們的程式碼放在onload這個function中

window.onload = function() {
alert( "welcome" );
}

Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event:
但是放在onload理面的程式碼並不會等所有的圖片完成下載後才執行。當你有需要在載入完成之後才執行的程式碼，可以利用jQuery提供的ready事件

$( document ).ready(function() {
// Your code here
});

For example, inside the ready event, you can add a click handler to the link:
舉個例子，在ready事件中，你可以替超連結增加click的事件處理

$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "Thanks for visiting!" );
});
});

Save your HTML file and reload the test page in your browser. Clicking the link should now first display an alert pop-up, then continue with the default behavior of navigating to http://jquery.com.
現在儲存你的HTML檔並且在Browser中重新整理你的測試頁面。當你點擊網頁中的連結時，你會發現它會先彈出alert視窗，然後繼續執行Browser的預設動作連結至 http://jquery.com

For click and most other events, you can prevent the default behavior by calling event.preventDefault() in the event handler:
對於click和其他大多數的事件，你可以藉由在事件處理中呼叫event.preventDefault()來防止它執行預設動作

$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "As you can see, the link no longer took you to jquery.com" );
event.preventDefault();
});
});

完整的範例 (Complete Example)

The following example illustrates the click handling code discussed above, embedded directly in the HTML <body>. Note that in practice, it is usually better to place your code in a separate JS file and load it on the page with a <script> element's src attribute.
下面的範例是上面所討論的完整程式碼，直接把click事件處理嵌入HTML的<body>中即可。
在實作的時候需注意：我們通常把JavaScript程式碼獨立在單獨的JS檔，並透過<script>的src屬性載入，可增加程式碼日後的維護性

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "The link will no longer take you to jquery.com" );
event.preventDefault();
});
});
</script>
</body>
</html>

增加和移除HTML Class ( Adding and Removing an HTML Class )

Important: You must place the remaining jQuery examples inside the ready event so that your code executes when the document is ready to be worked on.
TIP : 當document完成載入後，你的程式碼就會被執行，所以你必須將你的jQuery範例放到ready中

Another common task is adding or removing a class.
另一個普通的目標是增加或移除Class
First, add some style information into the <head> of the document, like this:
首先，增加一些style設定到你的HTML檔的<head>中，如下：

<style>
a.test {
font-weight: bold;
}
</style>

Next, add the addClass() call to the script:
接著，替你的元件呼叫addClass()：

$( "a" ).addClass( "test" );

All a elements are now bold.
現在所有的超連結(a)元件就都會套用在第一步設定的style了
To remove an existing class, use removeClass():
而我們可以透過呼叫removeClass()來移除已設定Class的元件：

$( "a" ).removeClass( "test" );

特效處理 (Special Effects)

jQuery also provides some handy effects to help you make your web sites stand out. For example, if you create a click handler of:
jQuery也提供一些特效處理讓你的網站與別人不一樣。下面的例子是觸發超連結click事件的特效處理：

$( "a" ).click(function( event ){
event.preventDefault();
$( this ).hide( "slow" );
});

then the link slowly disappears when clicked.
當你點擊這個超連結的時候，你就會發現超連結緩慢的消失了。

Callback 與函數 (Callbacks and Functions)
Unlike many other programming languages, JavaScript enables you to freely pass functions around to be executed at a later time. A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. Callbacks are special because they patiently wait to execute until their parent finishes. Meanwhile, the browser can be executing other functions or doing all sorts of other work.
JavaScript不像許多其他程式語言，它允許你自由的傳遞函數以便在以後的時間被執行。callback可以將一個function當做參數傳遞到另一個function中執行，當父function執行完成後才會呼叫執行callback函數。callback特別的地方在於它會等待父function完成後才執行。在等待父function完成的同時，browser可以執行其他的function或作各種其他的工作。
To use callbacks, it is important to know how to pass them into their parent function.
使用callback時，重點在於知道如何將它們傳遞到它所屬的父function

沒有引數的Callback (Callback without Arguments)

If a callback has no arguments, you can pass it in like this:
如果callback沒有任何參數，那你可以像下面這樣傳遞：

$.get( "myhtmlpage.html", myCallBack );

When $.get finishes getting the page myhtmlpage.html, it executes the myCallBack function. Note that the second parameter here is simply the function name (but not as a string and without parentheses).
當get完成傳遞至myhtmlpage.html時，接著會執行myCallBack function
注意：第二個參數在這裡是簡單的funcation名稱 ( 但不是一個字串，且沒有攜帶任何參數 )

攜帶引數的Callback (Callback with Arguments)

Executing callbacks with arguments can be tricky.
攜帶引數執行的Callback可能會有點棘手
Wrong ( This code example will not work) :
錯誤的範例 ( 這個範例不會被正常執行 )

$.get( "myhtmlpage.html", myCallBack( param1, param2 ) );

The reason this fails is that the code executes myCallBack( param1, param2 ) immediately and then passes myCallBack's return value as the second parameter to $.get. We actually want to pass the function myCallBack, not myCallBack( param1, param2 )'s return value (which might or might not be a function). So, how to pass in myCallBack and include its arguments?
上述例子失敗的原因是因為程式碼會立即執行myCallBack( param1, param2 )，然後將myCallBack的回傳值代入$.get的第二個參數。我們實際上是想要傳遞myCallBack整個function，不是myCallBack的回傳值(回傳值可能是或可能不是一個function)。所以，要如何傳遞myCallBack與它的參數呢？

Right
正確的範例
To defer executing myCallBack with its parameters, you can use an anonymous function as a wrapper. Note the use of function() {. The anonymous function does exactly one thing: calls myCallBack, with the values of param1 and param2.
要延緩執行myCallBack與其參數，你可以將其包裝在匿名的function中。注意：匿名function中將會呼叫myCallBack並代入param1和param2的值

$.get( "myhtmlpage.html", function() {
myCallBack( param1, param2 );
});

When $.get finishes getting the page myhtmlpage.html, it executes the anonymous function, which executes myCallBack( param1, param2 ).
當get完成傳遞至myhtmlpage.html時，將會執行這個匿名function，進而執行myCallBack( param1, param2 )

參考來源

jQuery - 如何開始運作jQuery
http://learn.jquery.com/about-jquery/how-jquery-works/
This world My World - 引數?! 參數??!! 什麼鬼啊!!
http://thisworldmyworld.blogspot.tw/2009/12/blog-post_08.html

jQuery : 認識 jQuery ( What is jQuery ? )

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
jQuery 是個快速、輕巧且功能豐富的 JavaScript library。它提供容易使用且相容於多個Browser的 API，讓 HTML 的事件處理、建立動畫效果與 Ajax 等操作變的更簡單。 jQuery 透過多功能性與可擴充性的組合已經改變數百萬人撰寫 JavaScript 的方式。

jQuery 的入門門檻
上面已經有提到 jQuery 是 JavaScript 的 library，若您是個完全未接觸過網頁程式語言的玩家，那建議您應該先學會：

HTML
基礎的JavaScript

簡單的操作範例 ( A Brief Look )

Dom的操作 ( DOM Traversal and Manipulation )

Get the <button> element with the class 'continue' and change its HTML to 'Next Step...'
取得 "continue" Class 的 button 元件，並把此元件的 html 屬性值改為 "Next Step"

$( "button.continue" ).html( "Next Step..." )

事件的處理 ( Event Handling )

Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-container is clicked.
當在 id 為 "button-container" 中點擊任何的 button 時，把已經在 CSS 設定 display:none 隱藏且 id 為 "banner-message" 的元件顯示出來

var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
hiddenBox.show();
});

Ajax

Call a local script on the server /api/getWeather with the query parameter zipcode=97201 and replace the element #weather-temp's html with the returned text.
呼叫在 Server 端 /api/getWeather 的 Script 並傳送參數 zipcode = 97201。當取得 Server 回應時，把回應的文字，設定為 id "weather-temp" 的 html 屬性值

$.ajax({
url: "/api/getWeather",
data: {
zipcode: 97201
},
success: function( data ) {
$( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
}
});

參考來源

jQuery 官方網站
http://jquery.com/
Visual jQuery
http://visualjquery.com/
維基百科 - jQuery
https://zh.wikipedia.org/wiki/JQuery

2013年8月28日 星期三