Art is long life is never

XML กับ jQuery ความลงตัวที่หาที่ไหนไม่ได้

posted on 15 Dec 2007 14:35 by pommatt in javascript

XML กับ jQuery ความลงตัวที่หาที่ไหนไม่ได้

วันนี้จะมาขอพูดถึงเรื่องการทำงานของ jQuery กับ XML จริงๆ แล้วตัวของ Jquery สามารถทำงานกับรูปแบบเอกสารได้หลายชนิด คือ
1. HTML
2. XML
3. JSON
4. Script

ซึ่งผมมองว่าทุกตัว jQuery สามารถทำได้ดีพอๆกัน เลยว่าจะอธิบายให้หมด (ยกเว้น HTML) แต่เนื่องด้วย…. เวลาอันน้อยนิดของผม ขอเอาเป็นรูปแบบยอดฮิตก่อนละกัน นั่นก็คืออะไรน่าจะเดากันออก XML เพื่อนเลิฟไง ^_^

ซึ่งในการคืนค่าจาก Ajax บางครั้ง เราอาจจะต้องใช้งาน XML กันบ้าง แน่นอนว่า Javascript ตามปกติเราก็พอจะทำกันได้บ้าง แต่ว่ากว่าจะ อ่านกว่าจะไต่ node กว่าจะแปลงล่างกลับมาเป็น html โคดก็ปาไปเกือบ 100 บรรทัด ทีนี้ลองเปลี่ยนมาใช้ jQuery กันบ้าง ว่าจะง่ายกว่ายังไง

ในที่นี้ตัวอย่าง XML ที่ผมจะเอามาทดสอบด้วยคือ XML ที่เป็นรูปแบบ sitemap ที่ Google อณุญาติให้เราใช้ทำการ submit ละกันครับ

ไฟล์ sitemap.xml

http://www.domainsample.com/chemical
2007-11-21
weekly
0.5

http://www.domainsample.com/admin
2007-11-21
weekly
0.5

http://www.domainsample.com/articles
2007-11-21
weekly
0.5

http://www.domainsample.com/alternative-energy-sources
2007-11-21
weekly
0.5

http://www.domainsample.com/acne-chemical-peel-scar
2007-11-21
weekly
0.5

ซึ่งจาก XML ด้านบนผมจะลองเอา jQuery ไปอ่านออกมาไว้ในหน้าเอกสาร html

readsitemap.html

jQuery

$(function() {
$.get('data/sitemap.xml', function(xml) {
$(xml).find('url').each(function() {
var txt = $(this).find('loc').text();
$('

').html( txt ).appendTo('#sitemap');
});
});
});

Your sitemap

เอาล่ะทีนี้เราลองมาดูโคดทีละ บรรทัดกันเลย

ส่วนี้เป็นการเรียกไฟล์ xml ออกมาครับ ให้วิ่งไปให้ถูก path เป็นพอ เอากลับมาเป็น data เก็บไว้ในตัวแปร xml
$.get('data/sitemap.xml', function(xml)

ต่อมาเป็นการหาข้อมูลใน tag “url” ขึ้นมาวนลุปโดยใช้คำสั่ง each ซึ่งจากตรงนี้เราอาจจะเขียนแบบนีก็ได้ $(’url’, xml)……
$(xml).find('url').each(function() {

ต่อมาเป็นการไต่ node ต่อจาก url -> loc แล้วใช้คำสั้ง text() เอาค่าออกมา
var txt = $(this).find('loc').text();

สุดท้ายได้ค่ากลับมาแล้วเอามาเก็บลงใน li ก่อนที่จะไป append เข้าใน tag ที่มี id เป็น sitemap
$('

').html( txt ).appendTo('#sitemap');

เป็นมั้ยครับง่ายโครตๆ และยังมีอีกครับ ถ้าต้องการหา attribute ก็แค่ใช้คำสั่ง get มันออกมาเช่น
$(this).find(’loc’).attr(’someattr’).text();

หรือถ้าจะหาค่าค่าตั้งแต่ element ที่ 0 ขึ้นไปก็ใช้
$(this).find(’loc:gt(0)’).text(); // กลับกันใช้ lt หาค่าน้อยกว่า

ง่ายมั้ยกับ jQuey วันนี้ ^_^

อ้างอิงจาก: http://www.jquerytips.com

edit @ 20 Dec 2007 07:53:20 by Pom & Ja

2 Comments

เทศกาล รับปริญญา เริ่มขึ้นแล้ว ภาค2

posted on 10 Dec 2007 22:01 by pommatt in About-Me

edit @ 10 Dec 2007 22:07:12 by Pom & Ja

0 Comments

เทศกาล รับปริญญา เริ่มขึ้นแล้ว

posted on 09 Dec 2007 22:15 by pommatt in About-Me

0 Comments

โอ พระเจ้ากล้วยช่วยจอร์จมันทอดมาก

posted on 07 Dec 2007 19:25 by pommatt in CSharp

จากคราวที่แล้วผมเขียนเกี่ยวกับ Immutability ใน Best practise in Coding http://www.thaisharp.com/Forum/Topic.aspx?topic_id=5887
แล้วผมได้ทิ้งคำถามเชิงไม่เห็นด้วยไว้ว่า
แล้ว You ได้ concern เกี่ยวกับ space และ time ที่ต้องใช้เพื่อ allocate + GC ตัว immuable object ไหม
http://blogs.msdn.com/ericlippert/archive/2007/12/04/immutability-in-c-part-two-a-simple-immutable-stack.aspx
เค้าไม่ตอบผมด้วยภาษาคนครับ เค้าตอบมาด้วยโค้ด
ตัวอย่างจากการ Implement Immutable Stack
เค้าบอกว่า Immutable stack นั้นมีประสิทธิภาพเทียบเท่าหรือมากกว่า Mutable stack ในบางกรณีซะอีก
"55 ไม่มีทาง ขำกลิ้ง" ผมนั่งหัวเราะ เพราะว่า Stack ชื่อมันก็บอกอยู่แล้ว มันเป็นอะไรที่ต้อง push pop ๆๆ
มันต้องเปลี่ยนแปลง การที่จะมานั่งสร้าง instance ใหม่แล้ว copy state เดิมนั้น มันช่าง idiot จริงๆ(ที่แท้ผมเอง)
แต่หลังจากนั่งดูตัวอย่างการ Implement stack แล้วก็ต้องอุทานเป็น Quantum TV "โอ พระเจ้ากล้วยช่วยจอร์จมันทอดมาก"

public interface IStack<T> : IEnumerable<T>
{
IStack<T> Push(T value);
IStack<T> Pop();
T Peek();

bool IsEmpty { get; }
}

public sealed class Stack<T> : IStack<T>
{
    private sealed class EmptyStack : IStack<T>
    {
        public bool IsEmpty { get { return true; } }
        public T Peek() { throw new Exception("Empty stack"); }
        public IStack<T> Push(T value) { return new Stack<T>(value, this); }
        public IStack<T> Pop() { throw new Exception("Empty stack"); }
        public IEnumerator<T> GetEnumerator() { yield break; }
        IEnumerator IEnumerable.GetEnumerator() { return this.GetEnumerator(); }
    }

    private static readonly EmptyStack empty = new EmptyStack();
    public static IStack<T> Empty { get { return empty; } }
    private readonly T head;
    private readonly IStack<T> tail;
    private Stack(T head, IStack<T> tail)
    {
        this.head = head;
        this.tail = tail;
    }
    public bool IsEmpty { get { return false; } }
    public T Peek() { return head; }
    public IStack<T> Pop() { return tail; }
    public IStack<T> Push(T value) { return new Stack<T>(value, this); }
    public IEnumerator<T> GetEnumerator()
    {
        for(IStack<T> stack = this; !stack.IsEmpty ; stack = stack.Pop())
            yield return stack.Peek();
    }
    IEnumerator IEnumerable.GetEnumerator() {return this.GetEnumerator();}
}

ถ้า Recursive function มีได้แล้ว ทำไม recusive data type จะมีไม่ได้
การทำแบบนี้ไอ้ตัว Empty stack นั้นก็เหมือนกับเป็น เงื่อนไขเริ่มต้นใน recusive function
แล้ว Overhead ในการสร้างมันจะมีเท่ากับ mutable ได้อย่างไร

สังเกตดูว่า stack นี้ share state รวมกันคือ tail ของมันและในเมื่อตัว stack เองเป็น immutable ดัง
นั้นเราก้ไม่ต้องเป็นห่วงว่าจะเกิด side effect จากการ share memory นี้
ซึ่งทำให้ประหยัดมากกว่า mutable stack อีกแนะ

อ้างอิงจาก : http://www.thaisharp.net/Forum/Topic.aspx?topic_id=5923

0 Comments

Aptana IDE

posted on 05 Dec 2007 23:46 by pommatt in PHP

Aptana IDE - สุดยอด IDE สำหรับ JavaScript / Ajax Style โปรแกรมเมอร์

Aptana IDE เป็น โปรแกรมฟรีแวร์ และ ที่สำคัญ คือ เป็น โอเพนซอร์ส ที่รองรับการทำงานได้หลายๆ ระบบปฏิบัติการ มี สถาพ แวดล้อม ที่อำนวยความสะดวกสำหรับ นักพัฒนาเว็บไซต์ โดยเฉพาะอย่างยิ่งสำหรับ Javascript ภาษา HTML และ CSS นอกจาก นี้ยังมี ความสามารถเด่นๆ อื่น เช่น มีสภาพแวดล้อม ที่ง่าย ในการพัฒนาโปรแกรมที่เป็น ลักษณะของ AJAX

นอกจาก นี้ ยังมี ความสามารถ ของ Aptana ที่ติดมากกับ Aptana หรือ Plug-in ที่สามารถติดตั้งเพิ่มเติมได้
ค่อน ข้างง่าย อาทิเช่น PHP IDE , RUBY on Rails, Adobe AIR

ความสามารถต่างๆ ของ Aptana

มีสภาพแวดล้อมที่ค่อนข้างยืดหยุ่นและง่ายสำหรับ จาวาสคริปส์ อาทิ เช่น action หรือ macro ต่างๆ.

รองรับ HTML DOM 0, 1 and 2

สามารถเลือกไลบรารีเพื่อใช้สำหรับ พัฒนาจาวาสคริปส์ อย่างอัตโนมัต แล้วก็ง่าย

มีตัวอย่างรูปแบบ ของคำสั่งสำหรับ CSS ในลักษณะของคำแนะนำสำหรับแต่ล่ะ คำสั่งด้วย

สามารถทำงานเป็น ไฟล์เดี่ยว หรือ โปรเจกส์ ได้ แล้วก็สามารถจัดการเรื่อง Workflow ได้ค่อนข้างง่าย ไม่มีปัญหากับ โปรแกรม

สำหรับ ความช่วยเหลือ ต่างๆ ใน Aptana นอกจาก จะค่อน ข้างละเอียดและครบสมบูรณ์ สำหรับ ตัว Aptana เองแล้ว ยัง มี Reference อื่นๆ ทีีค่อนข้างสมบูรณ์ใน Aptana ด้วย เช่น CSS, DOM, JavaScript , AIR , RUBY แม้กระทั่ง Firebug ด้วย (อันนี้ผม ชอบมาก ปกติใช้ไม่ค่อย เป็น) อ้อ สำหรับ Javascript แล้วก็ CSS ทั้ง CSS 1.0 แล้วก็ 2.0 มีการแนะนำที่เกี่ยวกับ Quirksmode ด้วย ว่ารองรับเวอร์ ชันแล้วก็ เว็บบราวเซอร์ตัว ใหน อย่างไร บ้าง

มีรูปแบบคำสั่ง หรือ ไกด์ต่างๆ ที่เกี่ยวกับคำสั่งต่างๆของ HTML หรือ คุณสมบัติต่างๆ ไปค่อนข้างครบแล้วก็สมบูรณ์

Aptana มาพร้อมกับ ไลบรารี ของจาวาสคริืปส์สำหรับ การพัฒนา จาวาสคริปส์ หรือ Ajax ที่ได้รับความนิยม ต่างๆ เกือบทั้งหมด อาทิื เช่น YUI, DOJO, Prototype , Scriptaculous , EXT , jQuery แล้วก็ อื่นๆ.