GAJAX บทที่ 14

ผมได้กล่าวถึงความสามารถหลักๆของ GAJAX ไปแล้วในบทก่อนๆ แต่จริงๆแล้ว GAJAX ยังมี class หรือ ฟังก์ชั่นเพิ่มเติมที่สำคัญอีกหลายตัวด้วยกัน ซึ่งผมจะอธิบายทีละรายการดังนี้

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 ในแนวนอน

ตัวอย่าง :

document.getWidth() =

document.getHeight() =

document.viewport.getWidth() =

document.viewport.getHeight() =

document.viewport.getscrollTop() =

document.viewport.getscrollLeft() =

function $G(elem) ฟังก์ชั่นสำหรับการเรียกใช้งาน GElement อย่างย่อๆ เหมือนกับการเรียกด้วย new GElement()
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 ได้