2013年2月26日 星期二

Javascript 的陣列物件-- Array

Array物件在Javascript物件中相當常用。
我把常用的幾個屬性跟方法整理如下..

陣列(Array)物件的屬性:

屬性說明
constructor傳回建立陣列物件原型的函式
length設定或返回陣列中元素的長度。

陣列(Array)物件的方法:

方法說明
concat()合併陣列,並傳回一個新的陣列
indexOf()在陣列中搜尋指定元素,並返回第一個符合的索引
join()將陣列物件中所有元素合併成一個字串
lastIndexOf()從陣列尾端開始搜尋指定元素,並返回第一個符合的索引
pop()將陣列中最後一個元素移除,並傳回該元素
push()在陣列尾端加入一個元素,並傳回陣列長度
reverse()反轉陣列中的元素順序
shift()移除陣列的第一個元素,
slice()選擇陣列的片斷,並傳回成為新的陣列。
sort()對陣列元素進行排序
splice()加入 和/或 移除陣列的元素
toString()將陣列轉為字串,並傳回該字串
unshift()在陣列前方加入新的元素,並傳回陣列長度。
valueOf()傳回陣列的初始值
filter過濾陣列元素
forEach()迭代整個陣列元素
every()測試所有陣列元素
some()檢查是否有任一陣列元素通過測試
map()迭代舊陣列元素產生新陣列
reduce()累計值處理
reduceRight()由右至左 累計值處理

array.join與字串合併

array.join()可以將陣列的元素合併成為字串,
也有許多人利用此方法來合併大量字串。
除此之外,要合併字串也可以使用原始的 + 運算子以及String.concat()來合併字串,
許多先進強烈建議使用array.join()來進行字串合併,
因為早期的想法認為,這是一個比較有效率的做法。
但這問題到現在其實可能已經有不同的結果,
近年瀏覽器對於+字串合併已經有許多優化,
對某些瀏覽器而言使用+運算子甚至快過使用array.join(),
除去舊版的瀏覽器,字串合併的效能似乎沒有太大的差距,
如果要合併的字串本身並不以陣列的方式存在,
似乎也沒必要特地把它放進陣列,然後再使用array.join()了。
當然,對於實際程式運作效能的最佳化,還是需要對每個程式做個別的分析。
參考:String.concat() 合併字串Array.join()將陣列元素合併成字串字串合併的效率問題

2013年2月23日 星期六

URI要編碼的目的

URI(Uniform Resource Identifier)中文稱之為 "統一資源標誌符" 。
URI可以被當成URL(統一資源定位符)或URN(统一资源名),或是兩個合起來。
間單的就是某個資源的位址,譬如說某個網頁的位址就是一個 URI。
URI有其格式規範,有其接受與不接受的字元,
在Javascript進行URI編碼的目的就是把不合法的字元,轉變成合法的字元。
使用不合法的URI字元可能會造成在網頁傳遞時取得的資料變成亂碼。
譬如AJAX的應用,在傳遞網址時,如果存在不合法字元,就要先進行編碼,
不然取得的結果很可能會變成亂碼。
有些瀏覽器在進行網址傳遞時,會自動進行編碼,但並非所有瀏覽器皆是如此,
因此自行編碼有其必要性。
在javascript中可進行URI編碼解碼的函式:
encodeURI()
decodeURI()
encodeURIComponent ()
decodeURIComponent()

參考:encodeURI() 為什麼URI要編碼
           escape,encodeURI與encodeURIComponent 的使用與差異

2013年2月17日 星期日

String物件

字串物件 String 是在Javascript 中是很常使用的。
我把他常用的屬性跟方法整理出來。

屬性說明
length  傳回字串的長度


方法 說明
anchor()建立一個HTML的錨點
big()用大字型來顯示字串
blink()用閃爍的字型來顯示字串,IE無效
bold()用粗體字來顯示字串
fixed()用等寬字型(fixed-pitch)來顯示字串
fontcolor()用指定顏色顯示字串
fontsize()用指定字型大小來顯示字串
italics()用斜體字來顯示字串
link()把字串變成有超連結的字串
small()用小字型來顯示字串
strike()顯示加上刪除線的字串
sub()用下標來顯示字串
sup()用上標來顯示字串
charAt()傳回索引值位置的字元
charCodeAt()傳回索引值位置的unicode編碼
concat()合併多個字串並傳回新的合併後字串
fromCharCode()把多個unicode轉成字串
indexOf()搜索並傳回指定子字串在字串中第一次出現的位置
lastIndexOf()由後往前搜索並傳回指定子字串在字串中第一次出現的位置
match()使用正規表達式來搜尋字串,傳回匹配功的字串陣列
replace()比對並替換字串,可以使用正規表達示
search()使用正規表達式來搜尋字串,傳回字串所在位置的索引值
slice()依起始索引與結束索引取得字串中的子字串
split()分割字串並傳回字串陣列
substr()依起始索引與長度取得字串中的子字串
substring()取得字串中的子字串
toLowerCase()把字串變成小寫
toUpperCase()把字串變成大寫
valueOf()傳回物件原始值(primitive value)


參考:字串物件 String

javascript onload 事件

onload 事件是在網頁載入完畢時會發出的事件
其中包括了HTML 中包含的 圖像檔 與 JS 檔 等資源。
onload事件的運用有幾種:
1. 在HTML表簽中使用onload=""
   譬如說<body onload="alert(Hi)"></body>
   這種作法,會將雙引號內的字串當成程式碼來執行。
2. 在javascript程式碼當中使用window.onload;
   譬如說:
   <script type="text/javascript">
   function funA(){alert("Hi");}
   window.onload=funA
   </script>
要注意的是使用onload或是window.onload是會互相覆蓋的,
所以不能重複定義。
為了避免這點,可以使用下面這方法:
   var oldonload = window.onload || function () {};
   window.onload = function () {
     oldload();
     // javascript code
   }
將原本onload保存起來,
然後在新的onload處理函式中呼叫原本的onload處理函式。

jQuery中有個.ready可以有點類似onload,他會監聽DOMContentLoaded事件,
能在瀏覽器下載其他資源前就先執行,而且不會互相覆蓋。
.ready 的使用方法:
■ $(document).ready(handler)
■ $().ready(handler) =&gt;官方網站不建議使用這個。
■ $(handler)

.ready可能會跟onload 或是 window.onload衝突,這點要注意。

參考onload的弔詭

2013年2月16日 星期六

Javascript 的for 迴圈

Javascript的for迴圈很基本很容易用,
但很也容易忘記中間是要用 ; 號還是 , 號來做間格。
畢竟每個語言都不太一樣,容易搞混。

for(var i=1; i<11; i++){
}

1. 用分號 ; 來做間隔。
2. 上面這例子的 for 迴圈中,雖然i在for()內宣告,
    但 i 其實不算是for迴圈內的區域變數。
    他跟for迴圈是處在相同的命名空間。
  所以說下面這例子, 會彈出個訊息視窗秀出11。
  for(var i=1; i<11; i++){
  }
  alert(i);
     有時候這點確實容易忽略,雖然也沒啥大礙。

參考:迴圈敘述 for 與 for in