GAJAX บทที่ 14
ผมได้กล่าวถึงความสามารถหลักๆของ GAJAX ไปแล้วในบทก่อนๆ แต่จริงๆแล้ว GAJAX ยังมี class หรือ ฟังก์ชั่นเพิ่มเติมที่สำคัญอีกหลายตัวด้วยกัน ซึ่งผมจะอธิบายทีละรายการดังนี้
function.bind เป็นคำสั่งเพิ่มเติมของฟังก์ชั่น เพื่อทำการเรียกฟังก์ชั่นให้ทำงาน ในกรณีที่การเรียกตามปกติไม่สามารถทำงานได้ โดยปกติจะใช้ภายใน Class ครับ
Array.indexOf สำหรับค้นหาข้อความภายในแอเรย์แบบมิติเดียว
ส่วนขยายเพิมเติมของ Object String
hexToRgb แปลงค่าสี #FFFFFF เป็น rgb(255, 255, 255)
ToRgb แปลง ค่าสี rgb(string) กลับเป็นเลขฐาน 16 เช่น 'rgb(255, 255, 255)' เป็น #FFFFFF
entityify แปลงอักขระพิเศษ เช่น & < > เป็น html
unentityify แปลง html กลับเป็นอัักขระพิเศษ เช่น & เป็น &
ส่วนขยายเพิมเติมของ Object document
document.getWidth อ่านความกว้างของ document
document.getHeight อ่านความสูงของ document
document.viewport .getscrollTop ตำแหน่งของ scrollbar ในแนวตั้ง
document.viewport .getscrollLeft ตำแหน่งของ scrollbar ในแนวนอน
elem สามารถเป็นได้ทั้ง ID Name หรือ Element เองก็ได้
ค่าคืนกลับจะได้เป็น property ของ GElement และ property ของตัว Element เองแบบอ่านอย่างเดียว
function $E(elem) ฟังก์ชั่นสำหรับการเข้าถึง Element ของ DOM อย่างย่อๆ เหมือนกับการใช้ document.getElementById()
elem สามารถเป็นได้ทั้ง ID Name หรือ Element หรือ Object GElement ก็ได้
ค่าคืนกลับจะได้เป็น Object ของตัว Element เหมือนการเรียกด้วย document.getElementById()
function.bind เป็นคำสั่งเพิ่มเติมของฟังก์ชั่น เพื่อทำการเรียกฟังก์ชั่นให้ทำงาน ในกรณีที่การเรียกตามปกติไม่สามารถทำงานได้ โดยปกติจะใช้ภายใน Class ครับ
<script type="text/javascript">
var i = 0;
var demo = function(){
document.title = i;
i++;
setTimeout(demo.bind(), 1000); // เรียกโดยใช้การ bind ฟังก์ชั่น
};
demo(); // เรียกครั้งแรก แบบปกติ
</script>
Array.indexOf สำหรับค้นหาข้อความภายในแอเรย์แบบมิติเดียว
<script type="text/javascript">
var demo = ['one', 'two', 'three'];
alert(demo.indexOf('two'));
</script>
ส่วนขยายเพิมเติมของ Object String
hexToRgb แปลงค่าสี #FFFFFF เป็น rgb(255, 255, 255)
ToRgb แปลง ค่าสี rgb(string) กลับเป็นเลขฐาน 16 เช่น 'rgb(255, 255, 255)' เป็น #FFFFFF
entityify แปลงอักขระพิเศษ เช่น & < > เป็น html
unentityify แปลง html กลับเป็นอัักขระพิเศษ เช่น & เป็น &
ส่วนขยายเพิมเติมของ Object document
document.getWidth อ่านความกว้างของ document
document.getHeight อ่านความสูงของ document
document.viewport .getWidth อ่านความกว้างของ document เฉพาะส่วนที่มองเห็นได้
document.viewport .getHeight อ่านความสูงของ document เฉพาะส่วนที่มองเห็นได้document.viewport .getscrollTop ตำแหน่งของ scrollbar ในแนวตั้ง
document.viewport .getscrollLeft ตำแหน่งของ scrollbar ในแนวนอน
ตัวอย่าง :
function $G(elem) ฟังก์ชั่นสำหรับการเรียกใช้งาน GElement อย่างย่อๆ เหมือนกับการเรียกด้วย new GElement()document.getWidth() =
document.getHeight() =
document.viewport.getWidth() =
document.viewport.getHeight() =
document.viewport.getscrollTop() =
document.viewport.getscrollLeft() =
elem สามารถเป็นได้ทั้ง ID Name หรือ Element เองก็ได้
ค่าคืนกลับจะได้เป็น property ของ GElement และ property ของตัว Element เองแบบอ่านอย่างเดียว
function $E(elem) ฟังก์ชั่นสำหรับการเข้าถึง Element ของ DOM อย่างย่อๆ เหมือนกับการใช้ document.getElementById()
elem สามารถเป็นได้ทั้ง ID Name หรือ Element หรือ Object GElement ก็ได้
ค่าคืนกลับจะได้เป็น Object ของตัว Element เหมือนการเรียกด้วย document.getElementById()
var gEl = new GElement('demoId'); // การเรียกใช้งาน GElement แบบปกติ
var gEl = $G('demoId'); // การเรียกใช้งาน GElement แบบสั้น
gEl.addEvent(....... // สามารถใช้งาน property ของ GElement ได้
alert(gEl.className); // สามารถอ่านค่า property ของ Element ได้
gEl.innerHTML = 'xxx'; // ไม่สามารถทำงานได้ เนื่องจาก property เป็นแบบอ่านอย่างเดียว
var el = document.getElementById('demoId'); // การเรียกใช้งาน Element แบบปกติ
var el = $E('demoId'); // การเรียกใช้งาน Element แบบปกติ
var el = $E(gEl ); // สามารถเรียกใช้งานจาก GElement ได้