2013年10月17日 星期四

使用 JSFiddle 線上執行 HTML + JavaScript + CSS

相信在做網站開發的人員在開發新東西的時候,常會需要寫一些測試功能的小元件,如果特別為它在電腦上開一個 Project 實在太麻煩了,而且又常會把這些測試程式亂放,以後想要看自己寫的簡單範例還會找不到檔案呢!

JSFIDDLE 幫助網站開發者解決這些問題,它可以讓開發者在線上撰寫 Html、JavaScript 及 CSS,而且會將結果立即顯示出來,以下做個簡單的介紹:


JSFiddle主要有四個區塊,左上為 HTML;右上為 CSS;左下為 JavaScript;右下則為執行結果,而左方的欄位是做一些 Project 設定用的,HTML 欄位已經在<body></body>內了,因此不需要加 body 標籤,至於 CSS 及 JavaScript 它會自己做 Binding,因此也不需要特別寫匯入的語法,而如果有使用到 JQuery 記得左上方要記得選擇版本,以免執行看不到效果哦!

JSFiddle 要註冊後才可以儲存寫過的程式,如果自己 Project 命名分類的好,相信這也對 Code 的 Reuse 非常有幫助呀!

沒有留言:

張貼留言