สวัสดีครับ วันนี้เรามาทำความรู้จักกับการใช้งาน Selector ของ jQuery กันครับ jQuery นั้นมีทั้งเครื่องมี Function, Plugin ให้ใช้มากเลยครับ อย่างในบทความนี้ก็เป็นการใช้งาน Selector ที่ jQuery มีมาให้ครับ Selector คืออะไร ผมจะยกตัวอย่างง่ายๆของการใช้งาน Selector ให้ดูกัน อย่างเช่น ถ้าเรามี Table อยู่หนึ่ง Table โครงสร้างเป็นดังนี้ 12345  <table>     <tr><td>Row 1</td></tr>     <tr><td>Row 2</td></tr>     <tr><td>Row 3</td></tr>   </table> ใน code ด้านบนนี้จะเห็นว่าเรามี TR ทั้งหมด 3 Row ด้วยกัน เราสามารถจะเข้าไปใส่ style sheet ให้กับ TR ได้โดยตรง ถ้าเราไม่ใช้ jQuery Selector จะได้ code แบบนี้นะครับ 123… <tr style="color:blue; font-weight:bold;"><td>Row 1</td></tr> … ผลที่แสดงออกมาก็คือ ตัวหนังสือที่อยู่ใน Row 1 นั้นจะเป็นตัวหนาและมีสีน้ำเงิน Row [...]

มาทำความรู้จักกับ Event Bind กันบ้างครับ event bind นี้การทำงานของมันก็คือ การผูก event ต่างๆ เช่น blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error ให้เข้าไปอยู่กับ element หรือ tag ต่างๆเช่นถ้าเราต้องการจะให้ tag P ให้มี event click แล้วให้ alert ค่าอะไรสักอย่างออกมาโดยที่เราไม่ต้องไปไล่ใส่ code onClick ใน tag นั้นๆ สามารถทำได้โดยการใช้ Bind เนี่ยแหละครับ ตัวอย่าง 1234567<p>Click Here Test Event Bind</p> <script>     $("p").bind("click",function(e){                 alert("Bind onClick!!"); [...]

วันนี้มาทำความรู้จักกับ Events ที่ชื่อว่า ready กันครับ Function Ready นั้นทำงานเหมือนกับ window.onload มันพิเศษตรงที่เราสามารถจับ Function อื่นๆให้ผูกกับ onload ได้ function ready นี้จะทำงานเมื่อ DOM ทำงาน มาดูตัวอย่างกันเลยยิ่งอ่านจะยิ่งงงไปกันใหญ่ 1234567$(document).ready(function(){ alert(’DOM ready!!’); }); // Result  : DOM ready!! เมื่อลองเอา code นี้ไปทดสอบดู จะเห็นได้ว่ามีการ alert ข้อความ DOM ready!! ออกมา เรามามารถนำ Function ไปใช้เมื่อต้องการให้โปรแกรมเราทำงานตั้งแต่การเปิด หรือ เรียก URL ขึ้นมาให้ทำงาน Javascript ที่ถูกผูกเข้ากับ Event นี้ก็จะเริ่มทำงานทันที

เซงว้อย เซงๆๆๆๆ แม่งเมื่อไหร่จะเป็นมาตรฐานเดียวกันสักที คุณเคยมีความรู้สึกอย่างนี้บ้างหรือไม่ กับการเขียน css  ที่แต่ละ browser จะแสดงผลไม่เหมือนกัน ปัญหานี้มันเกิดขึ้นกับผมเกือบทุกครั้งที่เขียน css  :p แล้ว css มันเกียวอะไรกับ javascript (นั่นดิมันเกี่ยวอะไรกัน) ปัญหานี้มันเกี่ยวกับ javascript 

ตอนนี้อันดับล่าสุดใน Google.co.th ของ jQuery.in.th นั้นเป็นอันดับที่ 1 ในไทยเรียบร้อยแล้วครับ ดีใจกับทีมงาน jQuery.in.th ที่่ช่วยกันเขียนบทความจนอันดับนั้นเลื่อนขึ้นมาเป็นอันดับที่ 1 ด้วย keyword “jquery” แซงหน้า jquerytips ไปเรียบร้อยแล้ว

วันนี้ Google ได้ปล่อย Browser Google Chrome new Beta ใหม่ออกมาผมได้ลองไป Download มาดูแล้วเป็นเวอร์ชั่น 3.0.195.4 เวอร์ชั่นนี้สามารถเปลี่ยน Themes ได้ขอบอกเลยว่าเยี่ยมไปเลยครับสำหรับฟีเจอร์นี้ ใครที่อยากจะลองก็ไป Download ได้ครับที่ URL ด้านล่างได้เลย ในเวอร์ชั่นนี้อาจจะมี Bug บ้างนะครับเพราะว่าเป็น beta อยู่แต่สำหรับใครที่ชอบลองของใหม่ๆแล้วละก็พลาดไม่ได้ทีเดียวเชียวละ!!! คุณสามารถ Download และดูรายละเอียดของความสามารถใหม่ๆได้ที่ Link นี้ครับ http://chrome.blogspot.com/2009/08/new-beta-why-slow-down-when-you-can.html http://www.google.com/landing/chrome/beta/ ที่ผมชอบมากที่สุดก็คืออันนี้ละครับ ดูสบายตาดี Themes

มาดูวิธีการเรียกค่าออกมาจาก Select list box กันบ้างครับ <select id=”mySelect”> <option value=”1″>One</option> <option value=”2″>Two</option> <option value=”3″>Three</option> </select> ถ้าต้องการจะดึงข้อมูลที่เราทำการเลือกจาก list box สามารถใช้ code นี้ในการ ดึงค่าออกมาได้ครับ $(“mySelect”).val(); แล้วถ้าต้องการจะดึงเอา Text ที่อยู่ใน list box ที่เราเลือกละ ทำได้ดังนี้ครับ $(“mySelect :selected”).text(); ลองไปทดสอบกันดูครับ ผมว่ามันง่ายมากเลยสำหรับการเรียกค่าออกจาก list box นี้

พอดีวันนี้ ยุ่งกับการ ทำ SSL Certificate ให้ลูกค้า เลยเอามาลงในบทความสักหน่อย กันลืมๆ งานนี้ลูกค้าต้องการให้ gen ssl certificate เพื่อส่งไปให้ Certificate Authority (CA) SSL นั้นมันก็มีหลายค่ายนะครับ ที่ทำหน้าที่ Certificate Authority ที่เคยได้ยินกันก็เช่น Verisign, Thawte เป็นต้น เครื่องหมายเหล่านี้ จะเป็นการรับรองมาตรฐานความปลอดภัย SSL ซึ่ง CA แต่ละที่ก็จะมีการตรวจสอบ ชื่อที่อยู่ บริษัท ตลอดจนเว็บเซิร์ฟเวอร์ เพื่อพิจารณาก่อนที่จะอนุมัติ SSL Certificate ให้แก่เว็บไซต์นั้นๆ ทำให้ SSL Certificate เป็นเหมือนเครื่องหมายยืนยัน ความปลอดภัยของเว็บไซต์ สร้างความสบายใจให้แก่ลูกค้าได้ทางหนึ่ง ในไทยนั้นก็มีหลายเจ้านะครับที่เป็นตัวแทนจำหน่าย มาดูขั้นตอนการ Generate เลยก็แล้วกันครับ

ใกล้ถึงเวลาแล้วครับสำหรับ เหล่า Web Programmer และ Web Designer ที่จะได้ดีใจกันสักที ที่ไม่ต้องมาคอยกังวนกับการทำให้เว็บที่ตัวเองพัฒนานั้น support กับ IE6 ซึ่งไม่เป็น Browser ที่ไม่เป็นไปตามมาตราฐาน ตอนนี้ทาง Youtube เองได้ออกมาประกาศหน้าเว็บของตัวเองเลย ว่าจะเลิก support IE6 เร็วๆนี้ สำหรับเพื่อนๆที่มี IE6 ลองเปิดเข้าไปดูครับจะเจอหน้าที่แจ้งใว้ ตอนนี้ไม่ว่าจะเป็น Youtube เอง หรือเว็บอื่นๆเช่น Digg ก็ต่างประกาศให้เลิกใช้กัน หวังว่าอีกไม่นานนะครับที่ Browser ที่ค่ายจะใช้มาตราฐานเดียวกันสักที เพื่อนๆที่ใช้ Browser IE6 อยู่สามารถโหลดหรือ update Browser ให้เว็บเวอร์ชั่นใหม่ๆได้ตาม Link นี้ครับ http://www.google.com/chrome http://www.mozilla.com/en-US/firefox/personal.html

วันนี้เราจะมาแนะนำการทำ ajax โดยใช้ jQuery แบบ Cross-Site กันครับ การทำงาน ผมจะใช้ ajax ไปโหลด page url มาซึ่งทาง server-side ผมใช้ PHP ครับและ ทาง PHP ก็ return ค่ากลับมาเป็น json ครับ Code ในส่วนของ Html <div style=”background-color:#333333;height:20px;”> <a id=”top” href=”javascript:void(0);” gt;Show Message</a> </div> <div id=”layDiv” style=”display:none;height:30px;font-weight:bold;color:#ff3300;”></div> Code ในส่วนของ Javascript <script language=”javascript”> $(“document”).ready(function(){ $(“#top”).click(function(){ jQuery.ajax({ url: ‘http://executedns.net/hello.php’, type: ‘GET’, dataType: ‘jsonp’, dataCharset: ‘jsonp’, success: function (data){ var content = data.msg; alert(content); $(‘#layDiv’).html(”); $(‘#layDiv’).html(content); $(‘#layDiv’).css(“display”,”block”); } }); }); }); </script> สิ่งที่สำคัญสำหรับ code ในส่วนนี้ก็จะเป็น parameter [...]