Tag: javascript

javasacript-i18n-core vA.1

2022 年 02 月 11 日

過年期間有人詢問「javascript-i18-core」怎麼不見了，是因為之前將「程式試煉所」換了底層框架，所以舊網頁都先下架，需要找時間再「慢慢地」弄回來，也因此順手就先將 javascript-i18n-core 更新版本。新版本 A.1 最主要是多了 pass object 替換變數和 auto translate 功能。 https://code.essoduke.org/i18n https://github.com/essoduke/javascript-i18n-core Quick start import i18n from './i18n.js'; i18n.set({ 'resource': '/i18n.json', 'locale': 'en' }).init(function () { // do something }); Usage // general let foo = i18n._("key"); // pass by object const user = { 'name': 'John', 'age': 10 }; let foo = […]

技術文章, 資訊科技

jQuery tinyMap v3.2 release

2015 年 06 月 17 日

essoduke chang

google maps, javascript, jquery, plugin

前一陣子釋出了 v3.2 版本，也順便更新了套件網站，除了讓網站讀取更為順暢，也將使用文件做了大幅度更動。 GitHub jQuery tinyMap v3.2 最主要的更新有：不再需要手動引入 Google Maps API 以及 markerclusterer 函式庫了。可自訂路徑規劃各中繼點的圖示。支援原生 directions 參數。支援原生 kml 參數。支援原生 markerCluster 參數。支援 Places API。更有彈性的 clear 清除方法。全新的 get 方法，讓獲取圖層更彈性及簡單。(v3.2.3) 修正錯誤。 get 方法使用範例 // 取得所有圖層 var layers = $(selector).tinyMap('get'); // 取得指定圖層 var layer = $(selector).tinyMap('get', 'marker'); // 取得多個圖層 var layer = […]

技術文章

javascript-i18n-core v1.1 released.

2014 年 04 月 03 日

essoduke chang

i18n, javascript, 多國語言, 本地化

javascript-i18n-core 可以輕鬆在專案內加入 javascript 的本地化。 v1.1 版更新了語系檔嵌套的支援。舊語法只能使用一對一的字串，對於管理維護不太方便： { "hello world": "你好，世界。" } 新版本則支援嵌套方式。 { "hello": { "world": "世界", "%1 kitty ", "%1 的凱蒂" } } 使用上如同以往，除了嵌套需以 . 來呼叫（也就是語系檔的 KEY 除了嵌套之外不能使用）。 i18n._('hello.world'); i18n._('hello.%1 kitty', 'my');

技術文章, 軟體分享

jQuery tinyMap – 輕鬆建立 Google Maps 的 jQuery Plugin

2013 年 07 月 30 日

essoduke chang

api, google, javascript, jquery, map, plugin

jQuery tinyMap 是一款可以輕鬆在網頁上建立 Google Map 的 Plugin。最新版本: 2.7.0 (2014-05-22) jQuery tinyMap – 輕鬆建立 Google Maps 的 jQuery Plugin GitHub – jQuery tinyMap

技術文章

Google Maps 座標工具 1.2 Beta

2012 年 05 月 21 日

essoduke chang

google, javascript, maps

有網友來信要求輸出清單增加可複製單項的功能，不過考慮到跨瀏覽器的問題，所以用了偷吃步的方式達成；一方面可以少掛幾個檔案，另一方面程式就不用配合修改。再來，考量到這個工具年久失修，當時也只是手邊工作需要而試作，索性這次整個用 Google Maps API V3 重新改寫並釋出為 Beta 服務。這次更新了：介面採用全畫面地圖操作、隱藏式座標清單輸出 JSON、CSV 及 QueryString 格式支援 W3C Geolocation API 支援 IE8+, Google Chrome, Safari, Opera

喃喃自語, 黑特爆發

你敢自稱是網頁設計師？

2011 年 10 月 19 日

essoduke chang

css, framework, html, javascript, jquery, php

之前在 Mobile01 就有這個主題討論串「設計師就設計師為什麼要叫美工呢?」，本人理所當然地戰下去… 不說結論，單以最簡單的網頁設計來說，和我合作過的不下十人，只是每個幾乎都沒底子；難道真的只要會 Photoshop 合成圖庫、Dreamweaver 拉 HTML 就可以自稱設計師？

技術文章, 資訊科技

javascript Internationalization (i18n) v1.0

2011 年 06 月 15 日

essoduke chang

i18n, javascript

將上次試作的版本做了修改，主要是將字串從核心程式檔案中依照語系獨立出來；語系檔則使用 XMLHttpRequest 非同步方式（async）讀取，所以第一次呼叫時會稍微延遲，這部份再想辦法改善。 View the Demo 已知問題： IE9 的自訂日期「i18n.datetime(date)」會產生 undefined 的錯誤。轉換的來源格式必須是 YYYY/MM/DD 測試平台: Google Chrome 10, IE8, Firefox 4

技術文章

jQuery Plugin Weather

2011 年 05 月 18 日

essoduke chang

javascript, jquery, 程式設計

測試上一版的 deferred object，搭配 worldweatheronline.com API。 $('#weather').weather({ key: 'API key', //worldweatheronline.com API Key query: 'kaohsiung,taipei', //英文城市名稱，使用半形逗號可列出多個位置 html: true/false, //是否輸出 html，預設 true unit: 'C/F', //溫度單位 C 攝氏, F 華氏，預設 'C' lang: 'en/tw', //語系 en 英文, tw 中文，預設 'tw' success: function (resp) {} //回傳氣象物件 }); Demo

技術文章

[更新] jQuery 台灣郵遞區號套件 1.4

2011 年 04 月 27 日

essoduke chang

javascript, jquery, twzipcode, zipcode, 郵遞區號

jQuery 台灣郵遞區號套件更新至 1.4：修改原始碼以符合 jslint.com 驗證修改參數名稱 areaName => districtName, zipName => zipcodeName, areaSel => districtSel, zipSel => zipcodeSel, zipReadonly => readonly 修正當指定元素名稱時，若名稱內包含 [] 會發生錯誤的情形。加入 destroy, reset, serialize 等方法更新 Creative Commons License 至 3.0 $(function(){ $('#zipcode-1').twzipcode(); $('#zipcode-2').twzipcode({ zipcodeSel: 830, readonly: false }); $('button').click(function(){ var result = $('#' + $(this).val()).twzipcode($(this).text()); if ('serialize' === $(this).text()) […]

技術文章

Clone object using jQuery.extend() in javascript

2011 年 03 月 08 日

essoduke chang

javascript, jquery

在 Javascript 中，如何複製物件？一般情況下都會想使用 = 的方式來複製，不過可能會得到以下結果： var obj = {'a': 1, 'b': 2}; var new_obj = obj; new_obj.c = 3; //result obj = {'a': 1, 'b': 2, 'c': 3};

技術文章

JSLint: Missing ‘new’ prefix when invoking a constructor

2011 年 01 月 19 日

essoduke chang

javascript, jslint

這個錯誤或許能說是 JSLint 的 Bug 吧？ var TestCode = function () { return false; }; alert(TestCode()); /* * Problem at line 5 character 8: Missing 'new' prefix when invoking a constructor. */ LINT 基本上是預期所有函式名稱的首字是大寫字母，這也是正規的程式設計風格所建議的。但不知道為什麼，若是檢測的程式碼片段中有呼叫首字母為大寫的函數名稱，就會出現 Missing ‘new’ prefix when invoking a constructor 這個錯誤。既然設計風格是提倡首字母大寫的習慣，但是卻會檢測出錯誤，所以我懷疑這是 JSLint 的 Bug。不過使用小寫也不是什麼錯誤，所以只要將函式名稱的首字母改為小寫就能修正 :p

技術文章

Google Maps API v3 畫圓

2010 年 09 月 28 日

essoduke chang

api, google, javascript, map

Google Maps API 之前的畫圓方式通常需要自己根據座標去計算每一個點的位置再劃線串接，不過在 v3 之後直接提供一個 Circle 類別可以很輕鬆地就畫出： var circle = new google.maps.Circle({ center: Latlng clickable: true/false, radius: number, map: map, strokeColor: string, strokeWidth: number, strokeOpacity: number, fillColor: string, fillOpacity: number }); DEMO: http://app.essoduke.org/yt/

技術文章, 資訊科技

jQuery 台灣郵遞區號外掛 v1.2

2010 年 03 月 24 日

essoduke chang

javascript, jquery, twzipcode, 郵遞區號

台灣郵遞區號外掛 / Taiwan Zip Code Plugin of jQuery 這個版本修正了在 IE6 下，鄉鎮市區清單只會出現一個的問題：也順便把清單過長的現象給解決了 ※ 感謝呆呆怡和 Kenneth 的回報

技術文章, 資訊科技, 軟體分享

我的常用 js 函式庫

2010 年 02 月 26 日

essoduke chang

javascript, 程式設計

※ 2010-03-02 補充： Object prototype 改寫會導致 jQuery 出現異常，所以必須將 Object.prototype.isArray 註解或刪掉。請參考：Prototyping Object in Javascript breaks jQuery? – StackOverflow 整理了一支我常用於網站開發的 js 函式庫，也包含了對字串、日期、陣列物件的 Prototype 增強函數，採 MIT 授權釋出，歡迎任意使用。源碼：lib.common.js（16 KB）壓縮：lib.common-min.js（9 KB） Prototype: String var url = 'http://essoduke.org/?s=測試'; var x = 'Test 測試'; var y = 'HTML'; var z = '&;lt;strong&;gt;HTML</strong>'; /* trim: 移除字串前後空白 */ x.trim(); // result: […]

技術文章, 軟體分享

jQuery 台灣郵遞區號外掛 v1.1 update

2009 年 10 月 29 日

essoduke chang

javascript, jquery, plugin, twzipcode, zipcode, 郵遞區號

這次更新主要是改寫了原有的結構變得更簡潔、效能更好，並修改下列幾項：可不需先建立 HTML 表單，由程式直接產生並直接指定表單元件名稱。加入 Css 的支援參數說明 countyName: 指定縣市下拉清單名稱 (String) /* 若不指定則預設名稱為 zip_county[] */ areaName: 指定鄉鎮市區下拉清單名稱 (String) /* 若不指定則預設名稱為 zip_area[] */ zipName: 指定郵遞區號輸入框名稱 (String) /* 若不指定則預設名稱為 zip_code[] */ countySel: 縣市預設值 (String) areaSel: 鄉鎮市區預設值 (String) css: [‘County ClassName’, ‘Area ClassName’, ‘Zip ClassName’] (Array) 自訂元件名稱範例 // Javascript $('#container').twzipcode({ countyName: 'county', areaName: 'area', zipName: 'zip' }); // […]

技術文章, 軟體分享

將國際化（i18n）導入 javascript

2009 年 10 月 26 日

essoduke chang

i18n, javascript

更新: 已釋出 1.0 版本使用 Google Code: javascript-i18n-core Live Demo: http://app.essoduke.org/i18n/ 若您的瀏覽器不支援 Object Frame 顯示，請點選上列的展示連結。以往進行 javascript 多國語言的開發總是比較麻煩，所以就著手進行了這方面的嘗試；因為 Javascript 判別 HTTP_ACCEPT_LANGUAGE 會有失誤的問題，所以偵測語系交由後端程式負責，並將此參數以 inline 方式傳入 js。安裝使用 ///以正體中文語系為例 //無參數字串 i18n._('Current Datetime: '); //輸出「目前時間：」 //傳入單一參數 i18n._('I have %1 books', 10); //輸出「我有 10 本書」 //傳入多個參數 i18n._('I have %1 books and %2 pens', 10, 20); //輸出「我有 10 本書和 20 […]

技術文章

Javascript hash object 更新

2009 年 10 月 11 日

essoduke chang

hash, javascript

上次封裝的 javascript hash object: MD5, SHA-1, SHA-256 因為沒有優化導致體積過於龐大，所以再更新了一次，體積足足從原本未壓縮的 38KB 銳減 59% 來到 15KB。這次也將原本的 JSON 格式改寫成更接近類別的寫法（區分 Private, Public），並通過 JSLint 檢測，效能上差異微小，新版本約略只比舊版執行時間快了 1%… XD 源碼：lib.hash.js（14.79KB）壓縮：lib.hash.min.js（7.16KB）測試：lib.hash.html 用法部份有兩種作法，一種是宣告新物件： var hash = new Hash; var md5 = hash.md5('YOUR STRING'); 另一種是修改源碼： /* Line 12 of lib.hash.js */ var Hash = function() { ... /* 改為 */ var Hash = […]

技術文章, 軟體分享

Javascript hash object: MD5, SHA-1, SHA-256

2009 年 08 月 11 日

essoduke chang

hash, javascript

從 Paj’s Home 整理出這三種 hash 並偽封裝成物件以方便使用：下載：http://app.essoduke.org/blog/hash.js（38KB） Usage: hash.md5('STRING'); // MD5 hash.sha1('STRING'); // SHA-1 hash.sha256('STRING'); // SHA-256

技術文章

JSONP 實做：使用 Google Ajax Search

2009 年 07 月 14 日

essoduke chang

ajax, javascript, jquery, json

範例網頁：JSONP 實做：使用 Google Ajax Search ※ 詭異的是，我使用 $.get 都只能收到 400 Bad Request，只能用 $.ajax 才能正常。 $.ajax({ url: 'http://ajax.googleapis.com/ajax/services/search/web', data:{ 'key': gsearch.key, 'v': '1.0', 'q': encodeURIComponent(k), // + '+site:essoduke.org' 搜尋網站, 'rsz': 'large', 'hl': 'zh-TW', 'start': s }, dataType: 'jsonp', success: gsearch.fetch }); 參考資料：開發人員指南 – Google AJAX 搜尋 API – Google Code 基礎搜尋物件 – Google AJAX Search […]

技術文章

Windows Media Player for Web

2009 年 07 月 03 日

essoduke chang

javascript, jquery

※剛剛發現我的 Firefox 不能正常運作，大概是 Plugin 的關係。 http://app.essoduke.org/mplayer Feature / 特色相容 IE/Firefox 瀏覽器使用 JSON 格式媒體列表可顯示媒體名稱、時間軸、已播放/媒體時間可音量控制、重複播放、拖曳播放清單 Defect / 缺點 Opera / Safari 無法正常使用未加入隨機播放功能 Point / 重點摘要雖然已經有了支援各瀏覽器的播放語法，不過我還是針對了非 IE 瀏覽器建立 embed 標籤。播放器使用 Javascript 產生，並且將所有事件都寫成物件化，整個播放器就是一個物件。時間軸採用 setInterval 的方式每秒查詢目前的播放時間，換曲時要用 clearInterval 不然久了 IE 會當掉… XD Firefox 監控 PlayStateChange 事件要使用 OnDSPlayStateChangeEvt function。播放清單要雙擊左鍵才會換曲！大概就醬了

技術文章, 資訊科技

[jQuery] 自動替表單元素加入 label for 屬性

2009 年 06 月 02 日

essoduke chang

javascript, jquery

通常在設計網頁時如果有包含表單元素，大多會使用 Label 標籤來定義說明，但是每個表單元素和 Label 標籤都要加上 id 和 for 屬性顯得有點麻煩，所以下列函式就是用來替這些元素自動補上 for 和 id 屬性。範例：http://beboss.idv.tw/autolabel.php 目前只抓取 label 前後的表單元素，若 label 和表單元素之間有其他標籤則無作用，交給大家去解決吧 XD $(function(){ AutoLabel(); }); var AutoLabel = function(){ $('label').each(function(n){ //get the next object var $obj = $(this).next(); //append id and for attributes into elements switch( $obj.attr('type') ){ case 'text': case 'password': case 'radio': case 'checkbox': […]

技術文章, 資訊科技

jQuery FlyDOM 樣板系統範例

2009 年 04 月 09 日

essoduke chang

css, html, javascript, jquery, json

範例連結：jQuery FlyDOM 樣板系統範例這個範例將伺服器端定位為資料提供者，所有的排版、定位等都交給使用者端來運算，也因為如此，所以特地試做了「檢視方式」清單，效果還不錯，只是還有幾個小問題要解決。除了三種樣式作成樣板物件之外，包括分頁選擇也都獨立成樣板，伺服器端的頁數資料我也是用 JSON： //css 的值就是各頁數的樣式類別 [{'page':'1', 'css':'selected'}, {'page':'2', 'css':''}] 為了讓總筆數和「目前顯示」資料能正確使用並減少伺服器存取的次數，我把這個項目也列入資料產出的 JSON 並放到最後，所以每次查詢資料就會有這項資訊可以使用，不用再額外撈一次： [{'id':'1', 'player':'Paul Konerko'....}, ......, {'records':'18', 'display':'1-9'}] ※ 資料使用 MLB 2009-04-07 白襪對皇家例行賽的打者成績，直接建立成 JSON 所以無法進行刪除，而修改也沒完成，反正只是 FlyDOM 的範例嘛… 這是預設的「詳細資料」樣式。檢視方式的下拉選擇清單，只需要簡單的定位就能完成。圖示檢視，這個順便用了 jQuery UI 做了拖曳排序的效果。清單檢視參考資料： jQuery Plugin – FlyDOM: Create DOM on the Fly jQuery: The Write Less, Do More, JavaScript Library […]

技術文章, 資訊科技

Google Map 座標工具

2009 年 03 月 19 日

essoduke chang

api, google, javascript, map

因為這個案子的需要，所以就做了 Google Map 座標工具，靈感來自於 Interactive Polyline Encoder Utility，但是沒有加入劃線功能，只多了輸出 JSON 的選項。 ※支援 Firefox 3/Opera 9.6，IE6/IE7 在拖曳上似乎有問題… Google Map 座標工具先點選要標記的位置（可連續點選、拖曳）右側的清單上就會出現該點的座標，也可以點選清單內的座標，左側地圖就會顯示出對應的標記；輸出 JSON 的作用是方便後續的應用，包括存入資料庫…等等。改天再補上 Google Maps API 的使用心得… 延伸閱讀 Google Maps Google Maps API

技術文章

jQuery: 重新繫結事件並傳入參數

2009 年 02 月 17 日

essoduke chang

javascript, jquery

狀況：Click event 是直接寫入 <a>，所以使用 unbind 並無法解除這個事件，如果需要在這個函數內重新給定參數並且再次呼叫該怎麼做？ //javascript function abc(x, y){ alert(x + ', ' + y); } //html test 首先要使用 removeAttr 來清除 onclick event： $(selector).removeAttr('onclick'); 再來，利用 bind 可傳入 data object 的特性解決傳遞參數，並使用匿名函數來呼叫： $(selector).bind('click', {x: 'New X', y: 'New Y'}, function(e){ abc(e.data.x, e.data.y); }); 最後，發揮 jQuery 的特長寫成一列： $(selector).removeAttr('onclick').bind('click', {x: 'New X', y: 'New Y'}, function(e){ abc(e.data.x, e.data.y); […]

技術文章, 資訊科技, 軟體分享

jQuery 台灣郵遞區號外掛

2009 年 02 月 13 日

essoduke chang

javascript, jquery, twzipcode, zipcode, 郵遞區號

※已發布 twzipcode 1.4.1 版會想要做這種無聊的外掛，起因是目前手上的案子，原本用了傳統的 DOM 做了一組單一頁面適用一組的 js，之後突然有兩組的需求，前天又變成四組，一氣之下就著手寫了這個 Plugin 來用 XD 下載位置（10KB） Badongo XUN6 範例：jQuery 台灣郵遞區號外掛安裝 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="twzipcode.min.js"></script> 用法： javascript $('#container').twzipcode({ county: 'county', //縣市清單 ID area: 'area', //鄉鎮市區清單 ID zipcode: 'zipcode', //郵遞區號輸入框 ID countySel: '高雄縣', //縣市預設值 areaSel: '那瑪夏鄉' //鄉鎮市區預設值 }); HTML <div id="container"> <select id="county"><option value="">縣市</option></select> <select id="area"><option value="">鄉鎮市區</option></select> <input […]

技術文章, 資訊科技

台灣三碼郵遞區號 JSON 版

2009 年 01 月 21 日

essoduke chang

javascript, jquery, json, twzipcode, zipcode, 郵遞區號

最近有個案子有做到三碼郵遞區號填寫的部份，而中華郵政網站上提供的只有 Word, Excel 和 TXT 格式，索性就自己造檔，轉成 JSON 格式可讀性比較高、維護也方便，而且許多伺服端語言都有 JSON Library 可以使用。 zipcode.js 可以使用下列方法來個別取出： //縣市 for (var county in zipcode) { ... } //鄉鎮市區 for (var area in zipcode[county] { ... } 範例應用：那怎麼應用在 3+2 格式？最後兩碼讓訪客自己填就好了啊…XD — 本來是想寫成 jQuery 的 Plugin，不過好像沒必要 :p

喃喃自語

Flash Satay 語法轉換器再次更新

2008 年 12 月 09 日

essoduke chang

flash, html, javascript, jquery, xhtml

這次加入了 Yahoo! Video 及 Google Video 的支援，以及可即時播放轉換後的語法，並增加全螢幕的 param 選項。 ※ Yahoo! Video 在 Firefox 下不支援 transparent，所以預設將不能勾選透明背景。以後的更新可能只有影片網站的支援了…

資訊科技, 軟體分享

Flash Satay 語法轉換器更新

2008 年 12 月 08 日

essoduke chang

flash, html, javascript, jquery, xhtml

因為之前轉換器的主機拆下來清灰塵之後就懶得組裝回去，所以這個轉換器就消失了，趁著今天閒閒改寫一下程式碼，並且除了 YouTube 之外還加入 Vimeo 的轉換。在 param 選項部份，除了預設的 allowscriptaccess 為 always 以外，可以再選擇是否顯示影片選單、wmode 透明等，其餘 param 之後再視情況增加了。 Flash Satay Converter 沙嗲語法轉換器使用方法一樣：選擇來源影片的網站填入影片網址（播放頁面的網址，不是 embed 的內容）比方說：http://tw.youtube.com/watch?v=Q3J8gBUXrK0 修改播放器的寬高勾選額外選項，如：影片選單、wmode 透明點選右側轉換按鈕複製下方的轉換結果

技術文章, 資訊科技

jQuery 實用入門（二）表單篇

2008 年 08 月 17 日

essoduke chang

javascript, jquery

網頁 Form 表單可以有很多 Javascript 應用，比如說表單驗證、聚焦提示、防錯誤措施等等，而這些功能通常可以經由 jQuery 簡化程式寫法，以下就是本期案例。案例頁面讀取完成即聚焦於第一個表單元件，並加入聚焦提示，送出時驗證是否都有填寫資料，若無則浮現提示文字，表單送出後將 submit 按鈕停用。這個案例使用了 jQuery 的語法串接特色: 將多個函式串接為一行，大大節省程式行數。

技術文章, 資訊科技

jQuery 實用入門（一）

2008 年 08 月 15 日

essoduke chang

javascript, jquery

什麼是 jQuery？ jQuery 是一個快速又簡潔的 JavaScript 程式庫，簡化了讓你在 HTML 文件裡面尋找 DOM物件、處理事件、製作動畫和處理 Ajax 互動的過程，簡單地來說，jQuery 是一套足以改變傳統撰寫 JavaScript 的超酷函式庫方式。雖然如此簡單，不過對於剛接觸的人要立即入門應用還是會有些摸不著頭緒，而網路上眾多範例都是屬於進階、甚至高階技巧，所以我會盡量將這陣子接觸到並實際應用於專案內的實用案例寫成一系列文章，而第一篇就鎖定在網頁元素的操作，希望對於入門者有所幫助。剛開始的準備當然就是下載最新版本的 jQuery 並引入網頁的 head 區段，並準備好方便編輯 HTML 源碼的編輯器，我推薦 PSPad，一套支援中文、FTP 編輯以及高亮度語法的免費文書編輯程式。 <head> <script type="text/javascript" src="jquery.js"></script> </head> 基礎：網頁元素控制我合作過不少網頁設計師，對於網頁通常都是慣用 Adobe Dreamweaver 來規劃設計，所以對於 HTML 原始碼通常都一知半解，但是要活用 jQuery 就必須了解這些標籤元素和屬性的基本作用。舉個最常在 DW 源碼內出現的 id 屬性，多數使用 DW 的設計師都不清楚這個 id 有什麼用途？簡單來說，id 就是所謂的 identity（識別）也就是該元素的唯一識別名稱，單一網頁的一個 id 只能出現一次，為的就是方便使用 DOM 的方式來控制這些元素。