ความในใจที่ใช้ prototype น่าจะมากว่า 2 ปี

• Syntax ของ prototype ง่ายครับ….ก็ใช้ prototype อย่างเดียวอันอื่นยากหมด
• มองไปทางไหนใครๆก็ jQuery กันทั้งนั้น …. เออดีจะได้ไม่มีใครแกะ code เราออก
• jQuery เร็วสาาดเทียบกันเป็นวิเลยนะ … ใช้ prototype แหละถึงช้าแต่งานเสร็จเร็ว
• plugin jQuery เยอะนะ…แง่มๆ prototype ก็พอมี เขียนเองก็ได้
• animate() เจ๋งสุด …ใช้ script.aculo ก็ได้

…สุดท้าย
เราเลือกทางเดินที่ดีที่สุดเสมอ

ปล. ลาก่อน Michael Jackson

Link Thumbnail ทำงานยังไง

1. สร้าง thumbnail ของเว็บนั้นๆมาก่อน (อย่าคิดว่าผมทำเอง)
   โดยผมเรียกใช้บริการของ http://www.websnapr.com/ วิธีการก็คือผูกตัวแปร url แบบ get ไปเลย

   

   <img src=”http://images.websnapr.com/?size=s&url=http://www.dexdev.com” />

2. เตรียม HTML
   โดยเพิ่ม class=”thumbnail” เข้าไป

   <a href=”http://www.dexdev.com” class=”thumbnail”>dexdev.com</a>

3. เตรียม Javascript
   include prototype (อย่างไม่มีทางเลือก)

   <script type=”text/javascript” src=”prototype.js”></script>

   ค้นหา tag A ที่มี class ชื่อ thumbnail ใช้ $$ (CSS selectors)

   $$(‘a.thumbnail’)

   เป้าหมายต่อไปหลังจากได้ a.thumbnail มาแล้วคือการแทรก div ที่มี thumbnail ของ link ครับ

   ‘<div><img src=”http://images.websnapr.com/?size=s&url=’+ $(this).readAttribute(‘href’) + ‘” /></div>’

   เช็คอีกนิดว่าเคยแทรก div ไปรึยัง

   var thumbnail = $(this).down(0);

   if(!thumbnail) {

   //ถ้าไม่มีค่อยแทรก div

   }

   เอา code ไปเลยดีกว่าเริ่มเยอะ

   document.observe(“dom:loaded”, function() { //ใช้ window.onload มันไม่หล่ออิอิ

   $$(‘a.thumbnail’).invoke(‘observe’,'mouseover’, function(){ //วนลูปเพิ่ม onmouseover

   var thumbnail = $(this).down(0);

   if(!thumbnail){

   new Insertion.Bottom($(this), ‘<div><img src=”http://images.websnapr.com/?size=s&url=’+ $(this).readAttribute(‘href’) + ‘” /></div>’);

   }

   });

   });

4. CSS
   

   a.thumbnail div {

   position: absolute;

   display: none;

   border: 1px solid #eee;

   left: 0px;

   top: 20px;

   padding: 5px;

   background: #fff;

   }

   a.thumbnail div img {

   border: none;

   }

   a.thumbnail:hover {

   position: relative;

   }

   a.thumbnail:hover div {

   display: block;

   }

   ตอนแรกให้ซ่อน thumbnail ไว้ก่อนครับ เอาเม้าส์ over เมื่อไหร่ค่อยขึ้นมาหล่อ …
   แค่นี้ก็ได้ thumbnail ของเว็บไปแปะหล่อๆกันแล้ว

ข้อดีของ Link Thumbnail

รู้สึกว่าหล่ออะเวลาเอาเม้าส์ไปวางบน link แล้วมีตัวอย่างขึ้นมาด้วย

ข้อเสีย

1. เว็บช้าขึ้นจากเดิมที่เคยช้าอยู่แล้วก็ช้าขึ้นไปอีกเฮ้อ
2. คอยดูสิวันไหนไอ้เว็บที่เราไปเอา thumbnail เค้ามาใช้มันเจ๊ง….ก็หล่อเลือกได้(ว่าจะตายแบบไหน)
3. …

Download หลังจากอ่านข้อดีข้อเสียแล้วคิดว่าคุ้มเหลือเกินก็ download ที่นี่ได้เลยครับ

เกมส์เดารหัสผ่าน

• เลือก ชุดกุญแจ และพิมพ์รหัสผ่าน แล้วกดคำนวนท่านจะได้ผลลัพธ์
• รหัสผ่านที่ถูกต้องเมื่อนำคำนวนจะได้ผลลัพธเท่ากับ 666
• ใบ้เพิ่มรหัสผ่านเป็นตัวอักษร a-z
• * แก้ตาม comment คุณ alle ตัวอักษรห้ามซ้ำ

เตรียมความพร้อม

1. จะเรียน prototype ก็ต้องไป download มาก่อนครับ
2. texteditor ดีดีผมเลือกใช้ editplus
3. browser คู่ใจผมเลือก firefox3.1 (ลง addon Firebug)
4. webserver เอาไว้ test ผมเลือกใช้ appserv ครับ

ลองเรียก
ขั้นตอนแรก include .js เข้ามาก่อนนะครับ

<script type=”text/javascript” src=”js/prototype.js”></script>

ตัวอย่างการเขียนโปรแกรมด้วย prototype คลิกที่นี่

บทความนี้จะไปไวๆนิดนึงเพราะคิดว่่าทุกคนน่าจะมีพื้นฐานกันบ้างแล้ว

เทคนิคในการเลือก checkbox ทีละหลายอันโดยใช้ prototype

ใช้ $$ ในการค้นหา checkbox ที่ต้องการในตัวอย่างผมจะใช้

$$(‘#form-q2 #q2′)

เพื่อค้นหา element ที่มี ID เท่ากับ q2 ใน form-q2

ทีนี้ก็จัดการเปลี่ยน properties checked ตามต้องการ

var checkboxs = $(‘form-q2′).getInputs(‘checkbox’, ‘q2[]‘);
checkboxs.each(function(c) {c.checked=checked});

หรือ
$(‘form-q2′).getInputs(‘checkbox’, ‘q2[]‘).each(function(c) {c.checked=checked});

var check = $$(‘#form-question #q1′).any(function(n) { return n.checked });
alert(check);

test sample here