熱血漢誌 - 技術新鮮人到技術經理人，必懂的事

[].slice function on JavaScript 這幾天學習 CoffeeScript ，裡面有許多好玩的 syntax sugar ，當然 JavaScript 原生不會有這種產物，很明顯是沿用 Python, Ruby 語言的優雅之處。 裡面有個部分有個奇妙的使用方式，介紹如下， Coffee code awardMedals = (first, second, others...) -> gold = first silver = second rest = others 編譯後的 JavaScript code awardMedals = function() { var first, others, second; first = arguments[0], second = arguments[1], others = 3 <= arguments.length ? __slice.call(arguments, 2) : []; gold = first; silver = second; return rest = others; }; 裡面用到了有趣的 Array.slice ，用模擬的方式來實踐 others… 這樣的語法糖衣。 原理說明 原理是直接採用 Array.slice ，通常這個方法都是用在陣列裡面，不過在這邊是用來做傳參考參數的指定。 Array 這個原生 Object 可以直接使用 [] 來使用， others = (3 <= arguments.length) ? __slice.call(arguments, 2) : []; 從呼叫的方法 (function) 直接使用 arguments 取得所有帶進去 function 中的參數，傳進去的參數數目必需要大於限制，這邊是 3 ，接著才會將第三個以後傳入的參數做分割。 這邊使用了 call 這個方法，不太曉得的人可以，call 會直接執行此 slice 這個方法。 使用 call 這樣的方式執行，第一個傳遞進去的變數，就是 this ，需要告訴這個方法，呼叫者是誰 (傳說中的 JavaScript, what is this)。 後面就可以依...

form 在開發web的人一定都很熟悉他怎麼使用，但是當要form 裡面的資料使用 GET 或者 POST的時候，每個人作法不同。 這邊筆記一下如何使用 YUI & jQuery 做 form serialize 表單資料序列化。 程式說明 簡單的HTML表單： <form method="POST" id="sample-form"> <label for="firstname">First name:</label><input type="text" id="firstname" name="firstname" value="Caesar" > <label for="lastname">Last name:</label> <input type="text" id="lastname" name="lastname" value="Chi"> </form> 希望做表單資料序列化( form serialize )，希望有以下的產出。 firstname=Caesar&lastname=Chi jQuery 使用方法： 擷取到form 節點之後，再呼叫serialize 方法，會回傳字串(string) $("#sample-form").serialize() YUI 使用方法(適用於 YUI3.3.0 以下版本): 首先必須引入 io-form ，取得Y.io之後，使用 _serialize （理論上這應該是私有方法，沒辦法給外部使用，不過在3.3.0以前都可以使用此方法），裡面給予一個物件，其中一個屬性必須要為 id : form id，方法回傳之後就會取得字串。 Y.io._serialize({id: "sample-form"}); 線上範例 線上範例 完整原始碼 ...

在Html document 方法當中，在W3C Html5 裡面有提到幾個DOM create 方法，今天來探討一下 insertAdjacentHTML() 這個方法。 insertAdjacentHTML(position, text)，使用上類似於之前的append()，多加上了位置選擇，因此可以做到類似於 jQuery DOM Insertion 這些方式。 另外值得一提的部份就是text ，是可以直接以文字帶入，由insertAdjacentHTML產生為DOM Object，不需要類似之前先Create DOM，再執行append的方式。 // document.getElementById("insert-method").insertAdjacentHTML("beforeend", "<span>bar</span>"); 除了提一下insertAdjacentHTML這個方法之外，同時也探討一下innerHTML，到底跟insertAdjacentHTML有什麼差異。 在 insertAdjacentHTML() Enables Faster HTML Snippet Injection  這篇文章當中裡面有點出innerHTML的異同，如果只是需要使用append DOM的方式，強烈建議採用insertAdjacentHTML，而不要再使用innerHTML，怎麼說呢？ 通常會看到一種簡化append 的方式 // document.getElementById("inner-method").innerHTML += "<span>bar</span>"; 執行上當然沒有任何問題，不過在執行效率上會有差異，innerHTML會先將取得內部所有DOM tree，接著再將DOM object 執行serialize，最後才會<span>bar</span>這段文字接上。 可以在這邊直接看一下線上範例。 測試 在不同瀏覽器經過實際測試效果，可以看一下底下數據（經過500次loop）: Chrome ...

頁面上很多靜態檔案，使瀏覽器等待檔案下載，導致頁面短暫性的的當機，畫面整個卡住，滑鼠連點擊的動作都無法執行，因此許多人會使用動態方式加載靜態檔案，諸如javascript, css, img...等。 針對Javascript, CSS檔案，特別介紹這套 SeaJS ，有別于之前介紹的 NodeJS ，兩者都屬於遵從 commonJS 規範編寫而成，但是 SeaJS 主要針對前端Javascript , CSS下載時，使用nonblocking的方式，同時可以使用callback來執行接下來要處理的事情。 通常一般頁面處理，讀取靜態檔案方式如下： <script src="/js/jquery.min.js"></script> <script src="/js/jquery.easing-1.3.pack.js"></script> <script src="/js/jquery.mousewheel-3.0.4.pack.js"></script> <script src="/js/jquery.fancybox-1.3.4.js"></script> <link rel="stylesheet" href="/js/jquery.fancybox-1.3.4.css"/>

Today, I want to use jQuery making a animation for webpage, First I check animate fuction on ref book. I clearly know how use it, there are two main function for animate. 1. $().animate({ "style1":"value1" , "style2":"value2" }, Time); Time: it can be three type, String => "slow", "fast", "normal". Integer=>10000 2. $().stop(); it can immedaitely stop animation. Let's do some experieces, I bulit a simple page. You can hover UP and DOWN for a article sliding UP or DOWN. Les't do it. HTML CODE: <div id="all"> <div id="up">往上</div> <div id="showTab"> <div id="data"> About This script is intended for forms where the user needs to upload an image to a Web site. The image is displayed on the page for previewing before uploading. The display will be resized if needed so as not to break the page layout. Valid file types are set in the scri...

沒想到jQuery居然沒有支援reset這一個方法 因此爬文爬了一下，找一下正規w3c的用法 發現可以用這樣子的語法來實現。 $("form").each(function(){ this.reset(); }); 蠻方便也很簡單。

jQuery裡面有許多不同的特效，我是先把整個基本教學介紹看完之後，開始著手Ajax的部份。今天先來介紹一下load，如果傳值的話都是使用POST的方式取得值 方法一： $("#feeds").load("feeds.html"); //在網頁裡面 //裡面會直接載入feeds.html的內容 方法二： 網頁執行的步驟是先將choices陣列值傳到test.php中，並且將資料顯示在objectID的div層級當中。 $("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } ); //網頁面 //顯示資料 方法三： $("#feeds").load("test.php", {limit: 25}, function(){ alert("The last 25 entries in the feed have been loaded"); }); 網頁中如果有 會跳出彈跳視窗，同時會將limit=25用post傳到test.php當中。

最近剛碰jQuery想寫一些東西留以後自己可以細查，廢話不多說以下就是jQuery的教學，今天要教的是網站上的一個範例，大家如果想要看原文的東西可以 點此 。 在開始使用之前大家必須要到jQuery的網站中下載jQuery的載入檔，一般都是建議下載current release version， 請點此 ，當然下載之後就是要引入網頁中啦，程式碼如下 <!--"jquery-1.3.2.min.js 必須要指向自己網站資料夾的位置"--> <script type="text/javascript" src="jquery-1.3.2.min.js"> </script> 其中前半部份在教授jQuery的過濾器，和他的分類器，如果像以前的JavaScript就必需要寫成這樣子的格式 <javascript> document.getElementById("id_name").value; // or document.getElementByName("html_name").href; </javascript> 但是如果在jQuery中使用這樣子的方式即可 <javascript> $("id_name").dosomething(); //當然，這個方法是沒辦法實際使用在jQuery上面 </javascript> 前面當然有許多方法可以用，但是今天要介紹如何使用jQuery直接實做一個範例 首先將底下的檔名存成rate.php <?php define('STORE', 'ratings.dat'); //將檔案寫入 function put_contents($file,$content) { $f = fopen($file,"w"); fwrite($f,$content); fclose($f); } if(isset($_REQUEST["rating"])) { $rating = $_REQUEST["...