跳到主要內容

發表文章

目前顯示的是 五月, 2013的文章

Mobile 開發可以多利用的HTML5新事件

1.判斷使用者是否在線上有更明確、簡單的事件可用
wwindow.addEventListener("online", function() {
  console.log("online.");
});

window.addEventListener("offline", function() {
  console.log("offline.");
});

2.多用touch event 取代滑鼠 event,特別是 touchstart 跟 onclick 的反應時間有些差距
3.觸碰筆跡的新事件
onpointerdown, onpointerup, onpointermove, onpointerover,
onpointerout, onpointerenter, onpointerleave.

4.調整為全螢幕顯示
過去常用的作法
window.scrollTo(0,1);

可以使用的新方法
[element].requestFullscreen();
[element].currentFullScreenElement();
document.cancelFullscreen();
document.fullscreenEnabled();
document.isFullScreen();

5.瀏覽器的事件處理流程如下圖,Mobile開發可以多注意關於載入順序的部分

找回遺失的Android手機

再一天感謝科技的力量 今天到了公司才發現手機不再身上
不過一直想不起來到底有沒有帶出門 = =|||
回家後才確定手機掉了 orz

雖然查遍網路上的資料發現滿多軟體有做手機遺失相關的
不過最後是靠著救世神器Google定位找回來
畢竟再怎麼說衛星定位也沒有其他家做得更好了吧
查看記錄才發現原來今天我的手機已經搭著公車做了好幾趟的循環旅行

最後靠著 攔下公車 > 殺上去 > 撥打電話 > 找到手機 > 殺下車 精簡的連續動作
終於讓他又回來QQ
分享一下給大家知道手機掉了要怎麼找回來Orz

追記(2013/10):
現在Google新增加了Android 裝置管理員這項服務
只要手機的系統是Android 2.2以上就能支援,整合了包含定位等服務,找手機更方便

CSS 基礎與選擇器使用

參考文章:如何撰寫有效率的CSS選擇器(CSS Selector)
那些 CSS 偽元素可以幫你做的 10 個效果

CSS用來制定HTML元素的顯示外觀
在Web上的功能大致可區分為 HTML - 資料集合、JavaScript - 操作控制、CSS - 外觀指定
跟JavaScript一樣,CSS能以內部撰寫或引入外部連結使用
內部撰寫會需要在<head>元素裡撰寫<style>標籤,然後把CSS的內容寫在裡面
如:
<style>
    p { font-size:16px; }
</style>

你可能會發現把<style>標籤放到<body>裡也可以執行,但實務上非常不建議如此
原因是如果先讓瀏覽器讀取CSS,你可以快速地看到CSS的效果套用在HTML上
另一個原因則是每當瀏覽器在<body>裡讀取到<style>標籤後就會重新繪製畫面,以確保符合CSS要求
重新繪製畫面對效能上會有很大的影響

外部連結則需要在<head>元素裡撰寫<link>標籤
href屬性指定了CSS檔的位置,rel屬性則標示了檔案和頁面的關係,如下示範:
<link rel=stylesheet href="css/base.css" />

CSS的語法結構是選取器 { 屬性:設定值;} ,註解形式則為 /* here */
以 p { font-size:16px; } 為例,這行指定了所有的p元素都必須套用16px的字體大小設定

JavaScript - 使用Regular Expression讓 replace() 做到 replace all

如同一般程式語言的replace() method一樣
JavaScript的replace()也只會取代第一個符合的字串
如果要做到 replaceAll() 的效果必須透過正規表示法來指定全域,如:
str.replace(new RegExp("&#44;","gm"),",");

RegExp的第二個參數g、m分別下了兩種搜尋規則
g - global match   m - working over multiple lines
這裡還能指定一種沒用在上述例子的 i - ignore case
設定完RegExp的搜尋規則便能達到目的

LZW 壓縮演算法

LZW衍生自LZ77演算法,為一方便實作且受到廣泛運用的壓縮演算法
在較早期因專利保護的關係,另一個現在也常用的演算法GZip被提出來取代LZW的使用
不過現在LZW在世界各國的專利大約都在2003、2004年左右過期

LZW主要運用在文字及影像的壓縮處理上
他的實作方式是建立一個字典來記錄出現過的文字(字元)
例如:[AA: 258, AAA: 270, AAB: 264, AB: 256 ....]
字典在壓縮完後就被拋棄,解壓縮時則會在運算時依相同規則再建立一本字典
所以當重複的文字或字元較多時會有比較好的效率,反之則有可能幾乎沒效果
這個特性同樣適用在影像上,對於具有大範圍相同顏色的影像有較好的效果
這個演算法的特色是實現簡單,但因為不會對內容作分析,所以不見得是壓縮比最好的演算法
以下為JavaScript的LZW演算法實作

基礎演算法想法

演算法簡單來說就是處理問題的方法
問題必須限定於能在有限次數內得出有效解
想辦法提升解答的效率就是演算法的精神
針對各種需求例如搜尋、排序等,分別有對其最有效率的演算法

而各種演算法的設計原則大概可基於以下幾個概念