Archive for the ‘Javascript’ Category

Javascript 的 length 屬性是依據瀏覽器的顯示編碼去計算字數

星期五, 十二月 18th, 2009

也就是說,使用者看到幾個字,length 屬性就回傳幾個字。

比方說有個 textarea 欄位(id="msg")裡有輸入「測試abc」,而該 html 頁面是宣告成 charset=big5,而瀏覽器的顯示編碼也是 big5,
因此看起來就是兩個中文字、三個英文字, document.getElementById(‘msg’).value.length 的回傳值也就是 5。
如果自行調整瀏覽器的顯示編碼,改成是 iso-8859-1 或是 utf-8,
原本的兩個中文在這種情況下會變成四個亂碼,看起來就是七個字元,而此時的 document.getElementById(‘msg’).value.length 的回傳值就是 7。

可以點選右側連結實際測試看看:http://weblog.gilbert.tw/public/js.length.html

PS. 不管 html 本身宣告是何種 charset,使用者都可以自行調整瀏覽器的顯示編碼,因此本文的標題才沒寫成 Javascript 的 length 屬性是依據 html 的 charset 去計算字數。

jQuery 1.3.2 釋出

星期五, 二月 20th, 2009

剛逛 jQuery 官方,發現又有新版本釋出,剛好解決一個剛剛才在 1.3.1 發現的問題。

$("#table tr:not(:first) td:not(:nth-child(1))").click(function(){});

這段 code 的目的是希望在表格的第一列與第一行以外的儲存格,點擊滑鼠時可以執行特定的函式。但在 jQuery 1.3.1 卻不能運作,而在 jQuery 1.2.6 卻可以。

而後將程式碼改成:

$("#table tr:not(:first) td:not(:first)").click(function(){});

:nth-childe(1) 換成 :first,在 jQuery 1.3.1 又恢復正常。

這個狀況跟 http://dev.jquery.com/ticket/4158 這個問題是一樣的,在 jQuery 1.3.2 已經解決了!

順便附上 jQuery 1.3.2 修正的 bugs: http://dev.jquery.com/report/33

jQuery 1.3.x 不支援 [@attr] 語法

星期五, 二月 20th, 2009

這幾天把 jQuery 從 1.2.6 升級到 1.3.1 之後,就發現程式中有些地方不能正常運作,會跑出 Javascript Error。

費了點工夫才從官網上找到 change log(真難找…),才發現從 jQuery 1.3 開始,selector 的 [@attr] 語法已經被取消了,直接寫成 [attr] 就可以了,不用多加一個 @。

例如:

$('input[@type="checkbox"]).click(function(){});

在 1.2.6 可以正常運作,但在 1.3.x 要改成

$('input[type="checkbox"]).click(function(){});

才可以。

官網的說明: http://docs.jquery.com/Release:jQuery_1.3 (在 UPGRADING 這節的 Changes 那邊)

snow.js 雪花效果

星期一, 十二月 8th, 2008

聖誕節快到了,為了應景客戶希望網站上增加雪花效果。
參考網址:

http://www.dynamicdrive.com/dynamicindex3/snow.htm

http://www.dynamicdrive.com/dynamicindex3/snownoimages.htm

使用上只要注意將 script 放在 body 區塊內就行了。

Javascript 使用 parseInt() 時務必指定進位基數

星期六, 九月 27th, 2008

parseInt() 的第二個參數是指定進位基數,若不指定,parseInt 會依據第一個參數自動判斷。
如果開頭是 0x 或 0X,則視為 16 進位;若開頭是 0,則視為 8 進位;其餘則視為 10 進位。

var e = '1234';
alert(parseInt(e));       // 1234
var f = '01234';
alert(parseInt(f));       // 668, 八進位制的 1234 轉成十進位是 668
alert(parseInt(f, 10));  // 1234, 指定成十進位。

因此在使用 parseInt() 時,除非真的要使用到預設的自動判斷機制,否則請指定進位基數,免得造成自己的困擾。

Ref 1: JavaScript網頁設計師手札
Ref 2: JavaScript parseInt() Function

Javascript 字串轉數值

星期六, 九月 27th, 2008

方法一: Number constructor function

var e = '123';
e = Number(e);   // 123

方法二: parseInt() 或 parseFloat()

var e = '123.45abc';
var e1 = parseInt(e, 10);  // 123
var e2 = parseFloat(e);    // 123.45

若無法轉換成數值時,會回傳 NaN (Not A Number)。

var f = 'abc123';
var f1 = Number(f);         // NaN
var f2 = parseInt(f, 10);  // NaN
var f3 = parseFloat(f);    // NaN

Ref: JavaScript網頁設計師手札

Javascript – 數值轉字串

星期六, 九月 27th, 2008

方法一: String constructor function

var e = 123;
e = String(e);

方法二: toString method

var e = 123;
e = e.toString();

方法三: string concatenation

var e = 123;
var ee = e + '';

Ref: JavaScript網頁設計師手札

window.open() Syntax Generator

星期二, 五月 22nd, 2007

window.open() 的參數老是記不清楚,乾脆寫個簡單的小程式來產生 script:

Javascript – window.open() Syntax Generator
Javascript – window.open() 語法產生器

參考資料: http://www.w3schools.com/

prototype.js 官網改版及 v1.5.1_rc2 釋出

星期六, 四月 7th, 2007

記得幾個月前上 prototype.js 官網還是只是 v1.4.0
版面也是簡簡單單的一兩個頁面
今天想去抓 prototype.js 檔給新 Project 用(懶得從電腦裡找 :p)
赫然發現官網竟然大幅改版,而且現在 stable 版本是 v1.5.0,並且連 v1.5.1_rc2 都出現了 :o
另外還有提供說明文件,這真是太棒了!
有用 prototype.js 的人快去官網看看吧!

官方網站: http://www.prototypejs.org/
檔案下載: http://www.prototypejs.org/download
說明文件: http://www.prototypejs.org/api

Javascript – 指定變數的預設值

星期三, 九月 27th, 2006

看 prototype.js 時發現的一個方法,可以利用 || 來指定變數的預設值。

var bb = aa || ‘default value’;

如果變數 aa 不存在,則變數 bb 會設定成 default value。