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 กลับเป็นอัักขระพิเศษ เช่น &amp; เป็น &

ส่วนขยายเพิมเติมของ  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 ได้

ผู้เขียน goragod โพสต์เมื่อ 07 เม.ย. 2552 เปิดดู 16,729 ป้ายกำกับ GAJAXAJAXJavascript
^