ปฎิเสธไม่ได้ว่าการทำงานกับ Javascript จะต้องเข้าไปยุ่งเกี่ยวกับ DOM อย่างแน่นอน code อย่าง

document.getElementById('id');
// or
document.getElementsByTagName('tag-name');

จะต้องถูกเรียกใช้อย่างแน่นอน
แต่ถ้ามีวิธีที่ง่ายกว่าล่ะ !!!

Selector - Id

$('id')
// $('header');

ตัวอย่าง

$('header').hide();
$('header').show();
// or can set to variable
var header = $('header');
header.hide();

ใน Prototype function hide/show/toggle เป็นอีก function ที่ใช้บ่อยมาก ซึ่งมันจะไปสั่งให้ DOM ก้อนน้ันๆ ทำการเปลี่ยนค่า display ของ style นั่นแหละ ดีกว่าทีี่จะต้องไปใช้ .style.display = value;

จริงๆ สามารถเรียกได้อีกอย่างคือ การเรียกผ่าน Element class

Element.hide('id');

ก็ได้

Selector - Tag name(CSS Selector)

$$('tag-name')
// $$('div#footer');
// $$('li.nav');

มันจะ return มาเป็น array

$$('li.nav').first().hide();
$$('a').invoke('hide');

invoke ไว้ใช้สำหรับการสั่งให้ทุก element ใน array เรียก function ที่เราใส่ไป
หรือจะ loop ในแต่ละ element ก็ได้

$$('a').each( function(element) { element.hide; element...; ...;} )

ประกาศแบบ inline ก็ได้
block หน้าตาแบบนี้ดูคุ้นๆ แฮะ นึกไม่ออกว่าเหมือนภาษาอะไร ;p
มาดูหน้าตาอย่างอื่นต่อ

$$('div#header a, div#footer a')
$$('a[title=back]')
$$('div[id]')

ไม่ว่าจะโลภมาก อยากเลือกที่ละหลายๆ tag หรือว่าจะเลือกโดย attribute หรือแม้กระทั่ง เลือกเฉพาะ tag ที่ประกาศเฉพาะ attribute ก็ทำได้

ข้อมูลจาก api ของ Prototype ครับ

ปล. ยังไม่จบนะครับ

ช่วงนี้ดูเหมือนผมจะได้ใช้ Prototype เป็นตัวตายตัวแทนของ javascript เสียแล้ว เลยเอามาเขียนเสียหน่อย

จริงๆ มันก็คือ javascript นี่แหละ แต่มีการเตรียม library อะไรต่างๆ นานา ไว้ให้ อีกอย่างนึงที่ผมว่าเจ๋งคือ มันมี function ที่ดูง่ายๆ อย่าง $() หรือ $$() เป็นต้น หรือแม้กรทั่งการใช้ block แนวๆ Ruby ก็มีให้เห็น ใครเป็นแฟน Ruby อยู่ คงจะชอบใจ

มุมมองการเขียน ก็เป็นการเขียนเชิง Prototype (ซึ่งเป็นที่มาของการตั้งชื่อว่า Prototype นี่แหละ) ซึ่งไม่ต่างอะไรจากการมองเชิง Object-oriented เท่าไหร่ เรื่องความแตกต่าง ยังจะเอาไว้ก่อน เดี๋ยวกันจะกลายเป็น Prototype vs Object-oriented ไปเสียก่อน ซึ่งจริงๆ แล้ว Javascript เอง ก็เป็นภาษาเชิง Prototype ในตัวเองอยู่แล้ว(OO ด้วย)

จุดที่แข็งที่สุดของ Prototype นี้ เห็นจะหนีไม่พ้น library ที่เตรียมไว้ใช้งานกับ DOM หลากหลายชนิด เช่น $() หรือ $$() ที่ว่าไปข้างบน หรือ

  1
  2
  3

Element.hide('comments'); 
var div_height = Element.getHeight(my_div);
Element.addClassName('contactform', 'pending');

อีกส่วนนึงที่ลืมไปไม่ได้คือ AJAX
โดยใช้งานผ่าน Ajax.request เช่น

  1
  2
  3
  4
  5
  6
  7
  8
  9

new Ajax.Request('/some_url',
  {
    method:'get',
    onSuccess: function(transport){
      var response = transport.responseText || "no response text";
      alert("Success! \n\n" + response);
    },
    onFailure: function(){ alert('Something went wrong...') }
  });

ยังไม่หมด ยังต่อ JSON ได้อีก

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18

$H({name: 'Violet', occupation: 'character', age: 25 }).toJSON();
//-> '{"name": "Violet", "occupation": "character", "age": 25}'


var Person = Class.create();
Person.prototype = {
  initialize: function(name, age) {
    this.name = name;
    this.age = age;
  },  
  toJSON: function() {
    return ('My name is ' + this.name + 
      ' and I am ' + this.age + ' years old.').toJSON();
  }
};
var john = new Person('John', 49);
Object.toJSON(john);
//-> '"My name is John and I am 49 years old."'

library ยังมีอีกเพียบครับ ต้องลอง!!

ถ้าใครเคยใช้ Scriptaculous หรือ Rico หรือ Ajax ของ Rails เอง ก็จะต้องผ่านตากับ Prototype มาแน่นอน เพราะมันต้องใช้ Prototype เป็นฐานการทำงาน ส่วนในอุตสาหกรรมจริงๆ ดูได้ที่นี่

ข้อมูลจาก Prototype Tips and Tutorials

ปล. มาโฆษณาชวนเชื่อครับ ส่วน howto คงไว้คราวหน้าครับ