2013年7月23日 星期二

Javascript的正規表達式物件


Javascript的正規表達式物件 RegExp :

正規表達式是一種特殊定義的"樣本",通常被用來比對、搜尋,或是取代字串。簡單的樣本像是:/abc/,可以用來比對字串內是否含有"abc",複雜的像是:/ ^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/,可以用來比對是否為email字串。

正規表達是在javascript中是以物件的方式存在。建立正規表達式的方法有兩種:

RegExp(pattern [, flags])

/pattern/flags

pattern:正規表達式
範例:

var myreg = new RegExp("\\d+","g");

var myreg = /\d+/g;

第一種使用new來建立一個正規表達式物件,第二種則是使用正規表達式實字來建立物件。
屬性說明
global正規表達式中的"g"旗標是否被使用。唯讀屬性。
ignoreCase正規表達式中的"i"旗標是否被使用。唯讀屬性。
lastIndex指定下次比對開始位置的索引。
multiline正規表達式中的"i"旗標是否被使用。唯讀屬性。
source
正規表達式的樣本,唯讀屬性。
正規表達式物件的方法:
方法說明
exec()測試並傳回第一個比對成功之字串。
test()測試並傳回true或是false。
toString()傳回正規表達式字串。

參考: 正規表達式物件 RegExp

2013年6月21日 星期五

何謂Javascript

Javascript是什麼?

Javascript是一種腳本語言,所謂的腳本語言簡單的說就是你寫了一條指令,然後其執行環境就會執行這一條指令,不會事先經過其他的編譯。

這跟windows的執行檔之類的很不相同,windows的執行檔都是經過事先編譯的,可能直接編譯成機械語言,也可能是中介的編碼。

腳本語言不需要經過編譯,他會在被載入執行環境時才被解析。也就是說執行環境載入腳本語言,然後嘗試看懂要程式碼要做啥,並且執行程式碼。

目前Javascript最常被 "嵌入" 在網頁之中,所以她的執行環境就是各式各樣的瀏覽器了。

用嵌入這個詞其實是為了強調Javascript的特性,他很適合用來操作各種元素,當他被遷入到網頁中(或者可以說是在HTML中)時,他操作的就是網頁的元素。

網頁的元素有個規範,叫做DOM(文件物件模型),網頁中的一張圖片,或一個段落,都是網頁中的元素,而Javascript可以輕易地操作,變更,這些元素。

所以說在網頁上看到的效果,或是小工具,有些就是藉由Javascript來達成的。因為Javascript能改變這些網頁元素。

下面這範例就是利用Javascript來改變文字的顏色。
取自:維克的煩惱--使用javascrip改變文字顏色


Welcom to Vic's Blog

維克的煩惱是一個關於Javascript 與 網頁架設 等等的部落格,格主VicTsao是個悲情的工程師。虛度三十餘年,依然孤家寡人。

神馬Javascript

Javascript 是神馬?


2013年5月29日 星期三

Math 物件的屬性與方法整理

Math 物件的屬性與方法整理:
來自:數學物件 Math

數學(Math)物件的屬性:
Math的屬性是一些常用的數學常數,如下表:
屬性說明近似值
Math.E數學常數,是自然對數函數的底數。有時稱它為歐拉數(Euler's number)。2.718281
Math.LN22的自然對數。0.693
Math.LN1010的自然對數。2.302
Math.LOG2E底數為2的e的對數。1.443
Math.LOG10E底數為10的e的對數。0.434
Math.PI圓周率3.14159
Math.SQRT1_20.5(1/2)的平方根。0.707
Math.SQRT22的平方根。1.414

數學(Math)物件的方法:
Math方法全部都是靜態方法,如下表:
函式說明
abs()傳回絕對值。
acos()傳回反餘弦值。
asin()傳回反正弦值。
atan()傳回反正切值。
atan2()傳回從X軸到某個點(x,y)的角度(弧度)。
ceil()傳回大於或等於給定數值(輸入參數)的最小整數。
cos()傳回數值的餘弦。
exp()傳回e的乘冪數。
floor()傳回小於或等於給定數值(輸入參數)的最大整數。
log()傳回數字的自然對數(loge,在數學上常寫成ln)。
max()傳回最大的數值。
min()傳回最小的數值。
pow()傳回指定乘冪數的基底運算式值。
random()傳回介於0~1間的亂數。
round()傳回四捨五入到最接近的整數。
sin()傳回數值的正弦。
sqrt()傳回平方根。
tan()傳回數值的正切。

2013年4月24日 星期三

Javascript的日期物件方法整理


Date 物件的屬性與方法整理:
來自:日期物件 Date

日期(Date)物件的屬性:

屬性說明
constructor傳回建立陣列物件原型的函式。
prototype指向物件的原型。

日期(Date)物件的方法:

方法說明
getDate()傳回日期中的日,每個月的幾號。
getDay()傳回一星期中的第幾天(0~6)。0是星期天,1是星期一。
getFullYear()傳回年
getHours()傳回小時
getMilliseconds()傳回毫秒數
getMinutes()傳回分鐘
getMonth()傳回月份
getSeconds()傳回秒數
getTime()傳回重1970年1月1日0時0分0秒到date時間經過的毫秒數。
getTimezoneOffset()傳回UTC時間與當地時間差(分)
getUTCDate()根據UTC時間,傳回日期中的日,每個月的幾號。
getUTCDay()根據UTC時間,傳回一星期中的第幾天(0~6)。0是星期天,1是星期一。
getUTCFullYear()根據UTC時間,傳回年。
getUTCHours()根據UTC時間,傳回小時。
getUTCMilliseconds()根據UTC時間,傳回毫秒數。
getUTCMinutes()根據UTC時間,傳回分。
getUTCMonth()根據UTC時間,傳回月份。
getUTCSeconds()根據UTC時間,傳回秒。
getYear()廢棄,請使用getFullYear()。
parse()把日期字串轉換成由1970年1月1日0時0分0秒算起的毫秒數。
setDate()設定日期物件中的日。
setFullYear()設定日期物件中的年。
setHours()設定日期物件中的小時。
setMilliseconds()設定日期物件中的毫秒數。
setMinutes()設定日期物件中的分。
setMonth()設定日期物件中的分。
setSeconds()設定日期物件中的分。
setTime()藉由設定1970年1月1日0時0分0秒算起的毫秒數來設定日期。
setUTCDate()根據UTC時間,設定日期物件的日。
setUTCFullYear()根據UTC時間,設定日期物件的年。
setUTCHours()根據UTC時間,設定日期物件的小時。
setUTCMilliseconds()根據UTC時間,設定日期物件的毫秒。
setUTCMinutes()根據UTC時間,設定日期物件的分。
setUTCMonth()根據UTC時間,設定日期物件的月。
setUTCSeconds()根據UTC時間,設定日期物件的秒。
setYear()廢棄,請使用setFullYear()。
toDateString()將日期中的一部分轉成字串。(包含 星期幾 月日年)
toGMTString()廢棄,請使用 toUTCString()。
toISOString()根據ISO標準傳回日期字串。
toJSON()傳回格式化為JSON date的日期字串。
toLocaleDateString()使用當地時間,將日期中的一部分轉成字串。
toLocaleTimeString()使用當地時間,將時間中的一部分轉成字串
toLocaleString()使用當地時間,將日期物件轉成字串。
toString()將日期物件轉成字串。
toTimeString()將日期物件中的時間部分轉成字串。
toUTCString()根據UTC將日期物件轉為字串。
UTC()根據UTC傳回由1970年1月1日0時0分0秒算起的毫秒數。
valueOf()傳回Date物件的初始值。
now()傳回由1970年1月1日0時0分0秒算起到現在時間的毫秒數。

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