มาดูโครงสร้างง่ายๆ ของการเขียนโปรแกรมเชิง prototype ก่อน

Module

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12

var Site = {
  footerStatus:"showed",
  showFooter = function() { // showFooter = function(var1,var2,...)
    $('#footer').show();
    this. footerStatus = "show";
  },
  hideFooter = function(){
    $('#footer').hide();
    this. footerStatus = "hide";
  }
  // you can use .toggle() as well.
}

ยังดีว่าผมยังเคยเขียนเชิง prototype กับ ActionScript มาก่อน ไม่งั้นคงจะแอบงงอยู่บ้าง สำหรับคนไม่คุ้น ดูกันจริงๆ มันก็ไม่ต่างจากการเขียนเชิง Object-oriented สมัยใหม่สักเท่าไหร่หรอก พอถูไถไปได้บ้าง ไม่ยากๆ

ในตัวอย่าง ก็แยกให้เป็น module ซะเลย เป็นการแบ่งหน้าที่ของ module อย่างชัดเจน จุดที่ผมลืมบ่อยๆ เห็นจะเป็น comma ที่เป็นตัวแบ่ง function ครับ ลืมตลอด =='
เวลาเรียกใช้งานก็ง่ายๆ

Class

อีกหนึ่งส่วนสำคัญของการเขียนโปรแกรมเลย :)

อย่าลืม include prototype.js มาก่อนนะ ไม่งั้นเรียก Class ไม่เจอ

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

var Animal = Class.create();
Animal.prototype = {
  initialize: function(){
    this.alive = true;
    this.full = false;
  },
  eat: function(food){
    if(food == "sticky-rice"){
      this.full = true;
      alert(this.full);
      return this.full;
    }
    return false;
  }
}
var myPet = new Animal();
myPet.eat("pizza");
myPet.eat("sticky-rice");  // alert "true"

Extend

การต่อเติมก็สำคัญ :)

  1
  2
  3
  4
  5
  6
  7
  8

Object.extend(Animal.prototype, {
    dieNow: function() {
      this.alive = false;
      alert(this.alive);
    }
  }
);
myPet.dieNow(); // alert "false"

addMethods

ก็ไว้เพิ่ม method(หรือใครจะเรียก function) ให้กับ Dom element ในหน้าเว็บ

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10

Element.addMethods({
  say: function(element, word){
    if(!word)
      alert(element.innerHTML);
    else
      alert(word);
  }
});
$('footer').say();
$('footer').say("hello");

argument ตัวแรก ถูกบังคับให้เป็น element ของ Dom ตัว parameter ที่เราส่งไปเลยเป็น argument ตัวที่สอง

เบาะๆ แค่นี้ก่อน ผมง่วง =='

ข้อมูลจาก video ของปี๊บโด้ด

ปฎิเสธไม่ได้ว่าการทำงานกับ 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 คงไว้คราวหน้าครับ

วันนี้มีภาษาใหม่มาว่าให้ฟังอีกแล้ว มันคือ haXe มาดูกันดีกว่า ว่า haXe มันเป็นยังไง

haXe เป็นภาษา OO ระดับสูง(high-level) โดยที่มันจะช่วยให้โปรแกรมเมอร์ในการพัฒนา website และ web application ซึ่ง haXe ได้ถูกออกแบบมาเพื่อให้ง่ายกับการโยกย้ายการทำงานแบบข้าม platforms โดย haXe compiler จะสนับสนุน platforms ดังต่อไปนี้

• JavaScript: เราจะสามารถ generate ไฟล์ .js จาก class ของ haXe เรายังสามารถเข้าถึง DHTML API ได้เหมือนๆ กับที่เราใช้ crossbrowser อย่าง Xml, Date หรือ XmlHttpRequest... แล้ว haXe ยังเป็นหนึ่งในภาษาที่สามารถพัฒนา AJAX ได้อีกด้วย
• Flash: haXe สามารถ compile ตัว swf สำหรับ flash player 6-9 ภาษานี้ยังมีสุดยอด feature และยังเป็นภาษาที่ strict และ dynamic ในเวลาเดียวกัน การใช้ haXe ในการเพิ่มตัวงานยังได้เอาไปเปรียบเทียบกับ ActionScript ด้วย ตัว Flash APIs ก็ไม่มีการเปลี่ยนแปลงใน haXe ดังนั้น สำหรับใครที่มีความคุ้นเคยกับ ActionScript แล้ว ก็ไม่มีปัญหามาก และการเอา code ที่ทำไว้แล้วใน Flash มาใช้ใน haXe ก็ไม่มีปัญหาอะไร
• Neko: haXe ยังสามารถ compile ตัว bytecode ซึ่งสามารถ run ได้บน Neko Virtual Machine ตัวโปรแกรมของ haXe ยังสามารถ run ได้บน Apache (โดยการใช้ mod_neko) ซึ่งเราสามารถพัฒนาตัว server-side ของเราได้โดยใช้ haXe นี่แหละ ตัว haXe ยังเข้าถึง Neko libraies อย่าง filesystem, network, databases... และอีกตรึม ตั้งแต่มันถูกต่อเติมจาก library ที่เพิ่มเข้ามา มันยังสามารถพัฒนา app ที่ใช้บน desktop ได้อีกด้วย

haXe Features

syntax ของ haXe จะคล้ายๆ กับ Java/JavaScript/ActionScript มัน Based on ECMAscript ถ้าใครใช้ภาษาพวกนี้ก็สบายไป เพราะมีความคุ้นเคยอยู่ก่อนแล้ว ส่วนเรื่องของตัวบรรณาธิกร(มันคือ text editor ขอใช้คำไทยสวยๆ หน่อย) ก็ยังใช้ได้ตามที่ตัวเองชอบ หรือจะใช้ IDE ก็ไม่เกี่ยง

ตัว tpye system ก็เป็นชนิดที่แน่นอน มันจะช่วยให้ตัว compiler ตรวจจับ error ได้ในขณะ compile-time แต่ในขณะเดียวกัน มันก็ยังทำตัวเป็น dynamically typed language คือเราไม่จำเป็นจะต้องประกาศ data type ในทุกๆ ครั้งไปในขณะที่เราจะเอา security ของ strictly typed language

ตัว Library หลัก เช่น Date, XML หรืออื่นๆ ถูกกำหนดให้เหมือนๆ กันใน platforms ทุกๆ อัน ซึ่งมันจะทำให้เราสามรถ reuse class ต่างๆ ได้อย่างสบายๆ

haXe ยังง่ายต่อการต่อเติม: เรายังสามารถเพิ่ม library ของเราได้อีก โดยที่เราสามารถระบุไปได้ว่าให้มันใช้กับ platform ไหน

มันยังมี Remoting library ซึ่งเป็นการเตรียม serialization ของ platform ต่างๆ รวมไปถึง RPC ด้วย ซึ่งเราจะสามารถเรียก method ต่างๆ ข้าม platform ได้(อันนี้เจ๋งงง)

มันยังสามารถพัฒนา application บน Desktop โดยใช้ SWHX

และ haXe ยังเป็น Open Source software ที่มี community ที่รวบรวม programmer ที่กำลังทำ haXe อยู่อีกด้วย

Conclusion

haXe เป็น Toolbox(ในเว็บเขาใช้คำนี้) สำหรับ web developers เริ่มที่ตัว compiler นั้น รองรับ platform ต่างๆ ตามที่เราเห็นเหมาะสม โดยที่เราไม่จำเป็นจะต้องมาเรียนรู้ภาษาใหม่ๆ ถึงแม้ว่า haXe จะสามารถใช้ได้บน client หรือ server ที่ทำให้สิ่งต่างๆ ง่ายขึ้น แต่มันก็ยังอาจจะถูกใช้บน client หรือ server อย่างใดอย่างหนึ่งอีกด้วย ก็แล้วแต่เรา ว่าเราคิดว่าอย่างไหนมันเหมาะสม

เพิ่มเติมได้ที่ Documentation
Language Reference
Community

ข้อมูลจาก http://www.haxe.org/intro

แก้ไขล่าสุด วันที่ 17 กรกฏาคม 2550 เวลา 21.54 น.