highlight.js 未內建複製到剪貼簿功能，上網逛了一圈，大家一致推崇 clipboard.js。試用心得頗佳，輕鬆上手但威力強大，採純 JavaScript(不需 Flash，IE9+ 可用)，特整理筆記分享推薦。
註: 為防大家沒注意到我有加上「點選圖示複製程式碼」功能，錄了一段示範：(圖示的大小及位置會太低調嗎? XD)
完整程式範例如下：Live Demo
原始文章出自於此
2018年3月15日 星期四
JavaScript 將輸入欄位內容複製到剪貼簿
部落格原本用的程式碼顏色標示(Syntax Highlight)套件是十年前的產物，早就跟不上程式語言演進腳步，上篇文章起網站悄悄改版，改用支援 176 種語法及 76 種樣式並持續更新的 highlight.js。(列入評估的另一選項 prism.js 也很出色，頗難抉擇，最後選定 Github 觀注度較高的 highlight.js。延伸閱讀：Top 5 : Best code syntax highlighter javascript plugins | Our Code World)
highlight.js 未內建複製到剪貼簿功能，上網逛了一圈，大家一致推崇 clipboard.js。試用心得頗佳，輕鬆上手但威力強大，採純 JavaScript(不需 Flash，IE9+ 可用)，特整理筆記分享推薦。
註: 為防大家沒注意到我有加上「點選圖示複製程式碼」功能，錄了一段示範：(圖示的大小及位置會太低調嗎? XD)
在此示範整合
clipboard.js 兩種最常見做法：另設複製按鈕、點擊欄位本身複製。使用方法很簡單，網頁引用
clipboard.js，在要觸發複製動作的元素(按鈕或是<input
type="text">或<textarea>本身)加上 data-clipboard-target="#selector"
指向複製內容的來源。使用 new ClipboardJS(selector) 為觸發動作元素加上複製功能，selector
是複製觸發元件選擇器，為求省事此處用 [data-clipboard-target]，實務上多半會賦與它們共用的 class
樣式以利快速選取。除此之外，還有將複製文字寫成屬性(data-clipboard-text)、改成剪下到剪貼簿(data-clipboard-action="cut")、掛載事件等進階用法，詳情可參考官網首頁，網站介紹很淺顯易懂，此處就不多贅述。
完整程式範例如下：Live Demo
原始文章出自於此
highlight.js 未內建複製到剪貼簿功能，上網逛了一圈，大家一致推崇 clipboard.js。試用心得頗佳，輕鬆上手但威力強大，採純 JavaScript(不需 Flash，IE9+ 可用)，特整理筆記分享推薦。
註: 為防大家沒注意到我有加上「點選圖示複製程式碼」功能，錄了一段示範：(圖示的大小及位置會太低調嗎? XD)
完整程式範例如下：Live Demo
原始文章出自於此
2018年2月7日 星期三
輕鬆做出美觀的自適應 RWD 表格(Table)﹍jQuery 輕量外掛
最近的案子處理行動版的表格效果時，發現以前的「Blogger 插入表格最佳流程 + 自適應寬度」，這個方式若用在商業網站，將沒有任何質感可言，甚至可以用簡陋來形容。
於是找了一下自適應 RWD 表格有沒有比較美觀，而且又簡便的處理方式。有發現幾個功能強大的外掛，但操作稍嫌複雜。
本篇要介紹的方案，比較能夠無腦套用，且現成的樣式、配色就很美觀，不用另外修改或研究 CSS 語法。
簡易外掛 Basic Table
本篇要介紹的 jQuery 超輕量外掛 Basic Table，檔案很小，其實不必找外連空間，js/css 直接塞範本就好：
原始介紹文章出自於此
於是找了一下自適應 RWD 表格有沒有比較美觀，而且又簡便的處理方式。有發現幾個功能強大的外掛，但操作稍嫌複雜。
本篇要介紹的方案，比較能夠無腦套用，且現成的樣式、配色就很美觀，不用另外修改或研究 CSS 語法。
簡易外掛 Basic Table
本篇要介紹的 jQuery 超輕量外掛 Basic Table，檔案很小，其實不必找外連空間，js/css 直接塞範本就好：
原始介紹文章出自於此
2018年1月28日 星期日
Javascript 學習指南 2018
2017年10月6日 星期五
自適應 RWD 多層下拉選單實作﹍Bootstrap 外掛 SmartMenus
所有網站架設要處理的區塊中，導覽列的下拉選單是最麻煩的一部份，如果需要「多層下拉選單」的話，難度就比較高，可參考「Blogger 多層下拉選單實作」。
而行動裝置使用率大幅攀升後，導覽列非常需要有自適應 RWD 效果，手機上才能同步呈現下拉選單這麼複雜的功能。因此製作 RWD 導覽列含多層下拉選單，我認為是架設網站的過程，難度最高的一部份。
所以在這篇「如何從 Blogger 範本網站挑到理想的版型，且不會出錯」，我強烈建議挑選範本時，導覽列的功能要放最高權重。
而如果你熟悉 HTML/CSS 的話，有機會可以自製 RWD 多層下拉選單，不用跟別人撞衫，而且並不困難，因為國外已經開發了非常完整的免費外掛，以下就來看如何實作。
原始介紹文章出自於此
而行動裝置使用率大幅攀升後，導覽列非常需要有自適應 RWD 效果，手機上才能同步呈現下拉選單這麼複雜的功能。因此製作 RWD 導覽列含多層下拉選單，我認為是架設網站的過程，難度最高的一部份。
所以在這篇「如何從 Blogger 範本網站挑到理想的版型，且不會出錯」，我強烈建議挑選範本時，導覽列的功能要放最高權重。
而如果你熟悉 HTML/CSS 的話，有機會可以自製 RWD 多層下拉選單，不用跟別人撞衫，而且並不困難，因為國外已經開發了非常完整的免費外掛，以下就來看如何實作。
原始介紹文章出自於此
2017年8月25日 星期五
jQuery日期選擇
過去網頁表單要輸入日期不容易，往往得另外裝個外掛，例如基於 jQuery 的套件 datepicker。
而現在的瀏覽器使用 HTML5 已成為標準，Input 標籤內建就有簡易的選擇日期功能，只要加入屬性 type="date" 就可使用，不必另裝外掛。
不過最近處理一個需求，需要輸入一段日期區間，也就是要選取頭尾 2 個日期，例如 2017/8/1 ~ 2017/9/1。不用外掛的話要做到這件事挺麻煩，版面效果也不佳。
本篇就來介紹一下這個強大的 Date Range Picker 外掛，以 jQuery、Bootstrap 為基礎而發展出來，不但功能完善，介面也十分美觀。
http://www.daterangepicker.com/
原始介紹文章出自於此
而現在的瀏覽器使用 HTML5 已成為標準，Input 標籤內建就有簡易的選擇日期功能，只要加入屬性 type="date" 就可使用，不必另裝外掛。
不過最近處理一個需求，需要輸入一段日期區間，也就是要選取頭尾 2 個日期，例如 2017/8/1 ~ 2017/9/1。不用外掛的話要做到這件事挺麻煩，版面效果也不佳。
本篇就來介紹一下這個強大的 Date Range Picker 外掛，以 jQuery、Bootstrap 為基礎而發展出來，不但功能完善，介面也十分美觀。
http://www.daterangepicker.com/
原始介紹文章出自於此
2017年6月22日 星期四
2016年2月4日 星期四
我要成為前端工程師！給 JavaScript 新手的建議與學習資源整理
今年有越來越多企業開始跟我們接洽企業內訓的事，想請我幫他們培訓前端工程師，但你知道一個好的前端工程師絕對不是兩三個月可以養成的，需要多年的努力與磨練才會有點成績。而這幾年可謂前端正夯，
有為數不少的人開始大規模的往前端開發移動，而我被問到最多的問題就是「請問 JavaScript 要怎麼學？」或「請問 JavaScript
該怎樣入門？」諸如此類的問題。大家都知道，對於一門程式技術來說，「會寫」與「會教」是兩個截然不同的領域，會寫 JavaScript
的人到處都是，但是會教的人就相對少很多了。我這幾年教授 JavaScript 開發實戰課程已經超過 15 梯次，在將近 500
位學員裡面，我所看到的大部分學員都是對 JavaScript
不勝理解，普遍處於一種一知半解、模糊不清的狀態。另一方面，我在公司內部也帶過不少工程師，總是有人會想學習 JavaScript
但不知道如何入門的情況，這讓我陷入深思，該如何幫助一個人學習 JavaScript 從入門到精通呢？本篇文章將說說我個人的一些想法與建議。
一般來說，有人問我怎樣學習 JavaScript 的時候，我都會建議他們先買一本犀牛書回來看，但這本書有 1,096 頁啊！
這本書就算你買得回來，但真的有心看完的人又有多少呢？我所看到的狀況是，大家第一時間先被這本書的厚度給嚇傻了，都把這本書當成「參考書」了，也就是反正先買回來擺著，等出問題再來翻翻看就好，反正程式邏輯不管甚麼語言都一樣啦，我只要寫得出來就好了，寫不出來就先找 Google 大神啊，不然就搜尋 Stack Overflow 看看有沒有類似的解答！真正悲劇的是，通常你都找的到解答！
其他詳細內容請看原始介紹文章
渴望學習
先別說 JavaScript 如何從入門到精通，我們就先來談談我所看到的實務情況，我看到許多正積極前往前端工程發展的人，無不渴望學習、無不渴望進步，但學習路徑為何？沒人說得 準！每個人都是獨立的個體，有著不同的學習速度與理解。當然，如果你願意投資自己，跑去各家教育訓練機構報名課程，讓專業講師教你逐步上手當然很棒，但並 非所有人都有這個機會或意願做這件事，畢竟學費不便宜。大部分的 JavaScript 開發人員，其實都是靠著自己的熱情與興趣自主學習而成的。一般來說，有人問我怎樣學習 JavaScript 的時候，我都會建議他們先買一本犀牛書回來看，但這本書有 1,096 頁啊！
這本書就算你買得回來，但真的有心看完的人又有多少呢？我所看到的狀況是，大家第一時間先被這本書的厚度給嚇傻了，都把這本書當成「參考書」了，也就是反正先買回來擺著，等出問題再來翻翻看就好，反正程式邏輯不管甚麼語言都一樣啦，我只要寫得出來就好了，寫不出來就先找 Google 大神啊，不然就搜尋 Stack Overflow 看看有沒有類似的解答！真正悲劇的是，通常你都找的到解答！
其他詳細內容請看原始介紹文章
2015年5月7日 星期四
Highchart 執行環境配置
# 5个最顶级jQuery图表类库插件-Charting plugin
功能實在太強大了, 繪製的圖美美的, 非常 Professional. 這是一家來自挪威的小而美軟體公司 Highsoft AS 的產品, 利用 jQuery 與 HTML5 技術推出一系列資料視覺化工具 (Data Visualization Tools), 目前有五套 :
Higharts 採用 CC (Creative Commons) 創用授權, 只要遵循此要求, 對於個人及非營利用途, 可自由免費使用. 商業用途則每個網站收費 $90 元美金, 詳見 :
# https://shop.highsoft.com/highcharts.html
Highchrts 相關書籍目前有四本 :
# Learning Highcharts, Packt 出版
# Highcharts Cookbook, Packt 出版
# Highcharts Essentials, Packt 出版
# Beginning JavaScript charts with jqPlot, D3, and Highcharts, Apress 出版
前三本 Packt 的都是 Highcharts 專書, 而第四本 Apress 的主要是介紹 jqPlot 與 D3, 而 Highcharts 只是在第 18 章前面簡介一下如何從 jqPlot 過渡到 Hicharts 而已.
使用 Highcharts 需先布置執行環境, 設定樣式表與函式庫來源. 若是本地網路使用, 請先下載 Highcharts :
# http://www.highcharts.com/download
原始介紹文章出自於此
功能實在太強大了, 繪製的圖美美的, 非常 Professional. 這是一家來自挪威的小而美軟體公司 Highsoft AS 的產品, 利用 jQuery 與 HTML5 技術推出一系列資料視覺化工具 (Data Visualization Tools), 目前有五套 :
- Hightcharts : 用於繪製一般統計圖表
- Hightstock : 用於繪製金融資訊圖表
- Highmaps : 用於繪製地理圖表 (新產品)
- Highslide JS : 用於圖片視頻展示
- Highcharts Cloud : Highcharts 雲端內容提供平台 (免費試用中)
Higharts 採用 CC (Creative Commons) 創用授權, 只要遵循此要求, 對於個人及非營利用途, 可自由免費使用. 商業用途則每個網站收費 $90 元美金, 詳見 :
# https://shop.highsoft.com/highcharts.html
Highchrts 相關書籍目前有四本 :
# Learning Highcharts, Packt 出版
# Highcharts Cookbook, Packt 出版
# Highcharts Essentials, Packt 出版
# Beginning JavaScript charts with jqPlot, D3, and Highcharts, Apress 出版
前三本 Packt 的都是 Highcharts 專書, 而第四本 Apress 的主要是介紹 jqPlot 與 D3, 而 Highcharts 只是在第 18 章前面簡介一下如何從 jqPlot 過渡到 Hicharts 而已.
使用 Highcharts 需先布置執行環境, 設定樣式表與函式庫來源. 若是本地網路使用, 請先下載 Highcharts :
# http://www.highcharts.com/download
原始介紹文章出自於此
2015年3月16日 星期一
Google Maps API 測試
要在網頁中顯示一張 Google 地圖, 首先需匯入 Google Maps API :
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
這裡 sensor=false 表示此為一般電腦, 不是行動裝置, 不使用感應器.
其次, 必須在網頁中放置一個 DIV 元素當作畫布, 並指定畫布大小 :
<div id="canvas" style="width:500px; height:400px"></div>
為了以 Javascript 操控地圖的繪製, 必須給予獨一的 id, 此處我們使用 jQuery 來操作畫布元素.
var canvas=$("#canvas")[0];
注意, $("#canvas") 所取得的是畫布的 jQuery 包裹物件, 必須呼叫 get() 或用陣列元素 0 取得其 DOM 物件才能為 Google Maps API 所用.
要繪製谷歌地圖必須先建立地圖中心點的座標物件與地圖物件. 首先傳入緯度與經度給 Goolge Maps API 的 LatLng() 方法來建立座標物件 :
var latlng=new google.maps.LatLng(22.66, 120.35);
這裡傳入的參數是高雄澄清湖中心的經緯度 : 北緯 22 度 66 秒, 東經 120 度 35 秒. 第一個參數為緯度, 第二個參數為經度.
其次是呼叫 Goolge Maps API 的 Map() 方法建立地圖物件, 此方法須傳入網頁中的畫布物件, 以及一個選項物件當參數 :
var opt={zoom:14, center:latlng, mapTypeId:"roadmap"};
這個選項物件實體主要指定了地圖的放大倍數 zoom 為 14 倍, 中心點座標 center 為所建立之座標物件, 以及地圖類型為道路地圖 "roadmap" (API 中定義了一個字串常數 google.maps.MapTypeId.ROADMAP, 事實上其值為一個字串 "roadmap", 即道路地圖).
這樣就可以呼叫 Map() 方法建立地圖物件了 :
var map=new google.maps.Map(canvas, opt);
最後, 將座標物件與地圖物件傳給 Marker() 方法就會繪製地圖了 :
var marker=new google.maps.Marker({position:latlng, map:map});
其他更多詳細教學內容請到原始文章閱讀
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
這裡 sensor=false 表示此為一般電腦, 不是行動裝置, 不使用感應器.
其次, 必須在網頁中放置一個 DIV 元素當作畫布, 並指定畫布大小 :
<div id="canvas" style="width:500px; height:400px"></div>
為了以 Javascript 操控地圖的繪製, 必須給予獨一的 id, 此處我們使用 jQuery 來操作畫布元素.
var canvas=$("#canvas")[0];
注意, $("#canvas") 所取得的是畫布的 jQuery 包裹物件, 必須呼叫 get() 或用陣列元素 0 取得其 DOM 物件才能為 Google Maps API 所用.
要繪製谷歌地圖必須先建立地圖中心點的座標物件與地圖物件. 首先傳入緯度與經度給 Goolge Maps API 的 LatLng() 方法來建立座標物件 :
var latlng=new google.maps.LatLng(22.66, 120.35);
這裡傳入的參數是高雄澄清湖中心的經緯度 : 北緯 22 度 66 秒, 東經 120 度 35 秒. 第一個參數為緯度, 第二個參數為經度.
其次是呼叫 Goolge Maps API 的 Map() 方法建立地圖物件, 此方法須傳入網頁中的畫布物件, 以及一個選項物件當參數 :
var opt={zoom:14, center:latlng, mapTypeId:"roadmap"};
這個選項物件實體主要指定了地圖的放大倍數 zoom 為 14 倍, 中心點座標 center 為所建立之座標物件, 以及地圖類型為道路地圖 "roadmap" (API 中定義了一個字串常數 google.maps.MapTypeId.ROADMAP, 事實上其值為一個字串 "roadmap", 即道路地圖).
這樣就可以呼叫 Map() 方法建立地圖物件了 :
var map=new google.maps.Map(canvas, opt);
最後, 將座標物件與地圖物件傳給 Marker() 方法就會繪製地圖了 :
var marker=new google.maps.Marker({position:latlng, map:map});
其他更多詳細教學內容請到原始文章閱讀
訂閱：
文章 (Atom)