potato tomato & oatato

ในบทก่อน ๆ เกี่ยวกับการเปลี่ยนธีมตามช่วงเวลาที่กำหนดไว้ เช่น เช้า สาย บ่าย เย็น
ซึ่งอาจจะยังไม่สามารถสร้างความหลากหลายให้กับผู้เข้าชมได้อย่างเพียงพอ
ไม่เป็นไร ยังเหลือเทคนิคสุดยอดแห่งการเปลี่ยนธีมอีกหนึ่งอย่าง นั่นคือ ...

การเปลี่ยนธีมแบบสุ่ม

จากที่หลาย ๆ คนได้เห็นธีมเฉพาะกิจ:แฮร์รี่พอตเตอร์ในบล็อกนี้มาหนึ่งอาทิตย์แล้ว
นั่นแหละคือการเปลี่ยนธีมแบบสุ่มและในวันนี้เราจะมาเฉลยเทคนิคให้ทราบกัน

ขอแจ้งให้ทราบไว้ก่อนว่า ถ้าใครยังไม่เคยอ่านบทความเกี่ยวกับการเปลี่ยนธีม
ในบทความก่อนหน้านี้ สามารถตามไปอ่านได้ที่นี่เพื่อที่จะได้ไม่งงจนเกินไป
(หรือไม่ก็จะงงยิ่งกว่าเดิม เฉกเช่นเหยื่อคนอื่น ๆ ที่หลงเข้าไปอ่านก่อนหน้านี้)

ลักษณะการทำงานของฟังก์ชั่นเปลี่ยนธีมแบบสุ่มก็คือ เป็นการสุ่มเลือกค่าออกมา
จากขอบเขตที่กำหนดไว้ เช่น ขอบเขตที่กำหนดไว้คือ7 เลขที่จะถูกสุ่มออกมา
ก็จะอยู่ระหว่าง 0 ถึง 6 เท่านั้น

ให้ลองศึกษาสคริปต์ข้างล่างดูนะครับ

function getCSS()
{ 
// สร้างตัวแปรเพื่อระบุ url ที่ใช้ฝากไฟล์ css
url = 'http://www.yourhost.com/folder/';

// สร้างอาร์เรย์ (Array) เพื่อเก็บสมาชิกของชื่อไฟล์ธีมต่าง ๆ ที่จะนำมาใช้
themes = new Array ("style1", "style2", "style3", "style4", 
                      "style5", "style6", "style7");

// ขอบเขตก็คือจำนวนสมาชิกในอาร์เรย์นั่นเอง นับดูตอนนี้จะเท่ากับ 7
range = themes.length; 

today = new Date();		// สร้างตัวแปรรับค่าวันเวลาปัจจุบัน
second = today.getSeconds();    // ดึงเฉพาะเลขวินาทีออกมาใส่ตัวแปร

// เอาค่าวินาทีมา mod กับขอบเขต จะได้ค่าระหว่าง 0 ถึง 6
var i = second%range;

// ค่าที่สุ่มออกมาได้จะเป็นตำเหน่งของสมาชิกในอาร์เรย์ที่เป็นชื่อไฟล์
display = url + themes[i] +'.css';

//สั่งให้โค้ดสร้างคำสั่งเรียกธีมโดยใช้ตัวแปร display มาใส่แทนในส่วนของชื่อไฟล์
var css = '<';  
  css+='link rel="stylesheet" href="' + display + '" \/';  
  css+='>'; 

// พิมพ์คำสั่งเรียกธีมที่สร้างเสร็จแล้ว
document.write(css);

จากที่เห็นในโค้ด ใครที่เคยเขียนโปรแกรมอาจจะเริ่มสงสัยว่ามันสุ่มตรงไหนหว่า
ดูเหมือนเทคนิคเก่า ๆ ที่เปลี่ยนจากการเลือกเลขชั่วโมงมาเป็นการเลือกเลขวินาที
ออกมาทำงานแทนแค่นั้นเอง

คำตอบคือจริงครับ ตั้งใจให้เป็นอย่างนั้น เพราะคิดว่าเทคนิคนี้จะทำให้เครื่องใช้พลัง
การคำนวณน้อยกว่าการใช้ฟังก์ชั่นในการสุ่มจริง เพราะตัวเลขวินาทีมันวิ่งของมันไป
เรื่อย ๆ อยู่แล้ว การที่เราเลือกมันมาใช้ ณ ขณะใดขณะหนึ่ง มันก็ถือเป็นการสุ่มนั่นเอง

ในขณะที่ฟังก์ชั่นสุ่มของจริง (random) จะต้องใช้การทำงานที่ซับซ้อนกว่าอีกนิดนึงคือ
คือมันจะมีหน้าที่สุ่มเลือกค่าระหว่าง 0 ถึง 1 ออกมาให้เท่านั้น ที่เหลือเป็นหน้าที่ของเรา
ที่จะกำหนดขอบเขตของจำนวนที่ต้องการเอาเอง ซึ่งถ้าเราจะเปลี่ยนโค้ดการเปลี่ยนธีม
ด้านบนให้มาใช้ฟังก์ชั่นการสุ่มจริง ๆ เราจะต้องเปลี่ยนโค้ดในบรรทัดเหล่านี้

today = new Date();		// สร้างตัวแปรรับค่าวันเวลาปัจจุบัน
second = today.getSeconds();  // ดึงเฉพาะเลขวินาทีออกมาใส่ตัวแปร

// เอาค่าวินาทีมา mod กับขอบเขต จะได้ค่าระหว่าง 0 ถึง 6
var i = second%range;

ให้เป็นแบบนี้แทน

var rand = Math.random();
  // ตัวแปร rand จะบรรจุค่าหนึ่งที่อยู่ระหว่าง 0 ถึง 1 (มีทศนิยมให้หลายตำแหน่ง)

  var i = Math.round(rand*(range-1));
  // พอเอาไปคูณกับ range-1 ที่เท่ากับ 6 จะทำให้ค่าที่สุ่มได้จะอยู่ระหว่าง 0 ถึง 6
  // ส่วนฟังก์ชั่น Math.round จะช่วยปัดเลขทศนิยมให้เป็นเลขจำนวนเต็ม

จะสังเกตุว่าเป็นการทำงานอย่างสุ่ม ซึ่งต้องใช้ฟังก์ชั่นการคำนวณเพิ่มขึ้น ทำให้มีการคำนวณ
เพิ่มขึ้นอีกเล็กน้อย เมื่อเปรียบเทียบกับแบบแรก ที่สามารถสร้างตัวเลขแบบสุ่มได้เหมือนกัน

เอาล่ะ ถ้าแก้ไขโค้ดให้ได้ที่ต้องการเสร็จเมื่อไหร่ บันทึกโค้ดลงในไฟล์ สมมุติว่าชื่อ "css_random.js"

ส่วนคำสั่งสำหรับการเรียกใช้สคริปต์ css_random.js เป็นดังนี้

ทีนี้ก็เอาโค้ดตรงโซนสีเขียวไปแปะในเอ็นทรีก็ได้

หรือถ้าจะต้องการให้มีผลกับทั้งบล็อก ก็ให้ไปวางโค้ดเรียกสคริปต์ในส่วนของ
Preferences > Links > Add New Link แทน

ลองเอาไปทดลองดูนะครับ สนุกดี