Home

การใช้ jQuery selectors API

การเขียน JavaScript มักเริ่มต้นโดยการเลือกออบเจ็คที่จะทำงานด้วย ระบุคำสั่งหรือระบุเหตุการณ์ให้ทำงานต่างๆ การเลือกออบเจ็คในภาษา JavaScript ถ้ามีเงือนไขที่ซับซ้อนก็จะเขียนได้ยากเพราะต้องใช้วิธีไต่ Dom เข้าไปที่ละชั้นๆ JQuery เข้ามาแก้ปัญหาส่วนนี้โดยมี API selectors เข้ามาทดแทนให้เขียนได้ง่ายขึ้น อย่างเช่น[sourcecode language=”javascript” htmlscript=”true”]<form id="demoF">
<table class="democlass">
<tr>
<td><label for="q0">เพศ</label>
<select name="prename" id="q0">
<option value="1">นาย</option>
<option value="2">นาง</option>
<option value="3">นางสาว</option>
</select></td>
</tr>
<tr>
<td><label for="q1">ชื่อ</label>
<input name="firstname" id="q1" /></td>
</tr>
<tr>
<td><label for="q2">นามสกุล</label>
<input name="lastname" id="q1" /></td>
</tr>
<tr>
<td><label for="q3">ตกลง</label>
<input type="checkbox" name="agree" id="q3" value="agree" /></td>
</tr>
</table>
</form>[/sourcecode]

เลือก รูปแบบ JQuery ตัวอย่าง
id $(‘#ชื่อ id’) $(‘#demoF’)
attribute $ (‘[attribute|=value]’) $ (‘[name|=firstname]’)
Checkbox ที่ถูกเลือก $(“:checkbox”) $(‘:checkbox’)
Selected ที่ถูกเลือก $(“select option:selected”) $(“select option:selected”)
เลือกจาก CSS class $(.ชื่อ class) $(‘.democlass’)
ลูกตัวแรก $(“แม่:first”) $(“tr:first”)

สูตรคณิตศาสตร์‏

ถ้าทำเว็บอีเลิร์นนิ่งเกี่ยวกับการเรียนการสอนคณิตศาสตร์‏จะเขียนสูตรที่ซับซ้อนได้ยาก แนะนำให้ลง ASCIIMathML กับ TinyMCE จะใส่เนื้อหาได้ง่ายขึ้นเยอะ
ทดลองเขียนสูตรได้ที่
TinyMCE Math/Graph Plugins Example
http://www1.chapman.edu/~jipsen/mathml/asciimathdemo.html
http://www.imathas.com/editordemo/demo.html
มีตัวอย่างสูตรที่
http://www1.chapman.edu/~jipsen/mathml/asciimath.html

load balance

โจทย์คืองานอีเลิร์นนิ่งกระทรวงศึกษามีเซิร์ฟเวอร์ห้าตัวให้ใช้รองรับนักเรียนจากทั้งประเทศ จะกระจายโหลดไปยังเซิร์ฟเวอร์แต่ละตัวแต่ไม่มีโหลดบาลานด์ให้ Moodle สามารถกำหนดไดเรคทอรี่ไว้เก็บข้อมูลได้ก็จะใช้ตัวหนึ่งเป็นตัวเก็บข้อมูลสกอร์มข้อมูลจะได้ตรงกัน และใช้ตัวอื่นๆรัน php หาทางเลือกดูมี 3 วิธีคือ

  1. ให้แต่ละตัวรับไปแต่ละภาค ปัญหาคือเกือบทั้งหมดวิ่งผ่านไอเอสพีไม่กี่ที่ และแยกแทบไม่ได้ว่ามากจากภาคไหน
  2. ใช้ function random สุ่ม server ดูปรากฏว่าการกระจายค่อนข้างกระจุกอยู่ที่ server ตัวหลังๆ เกือบทุกครั้ง
  3. ทำให้ระบบจำได้ว่าจ่ายงานครั้งสุดท้ายไปที่ตัวไหนแล้วขยับไปตัวต่อไปเรื่อยๆ เหมือนเราแจกไพ่ การจะทำให้ php จำค่าล่าสุดได้นั้นมีการรักษาตัวแปรไว้ได้ 4 วิธี
    1. เขียนเป็นไฟล์ อันนี้จะมีปัญหาการเข้าถึงพร้อมกันของแต่ละเทรด(Threads)
    2. Cookie ใช้ไม่ได้เพราะเก็บไว้ที่เครื่องผู้ใช้คนอื่นเข้ามาก็จะอ่านค่าไม่ได้
    3. Session ข้อมูลจะเก็บบนเครื่องเซิร์ฟเวอร์แต่ก็เป็นการเก็บข้อมูลของแต่ละคนเหมือน cookie
    4. เก็บในฐานข้อมูล ใช้ร่วมกันได้ แต่เราต้องการแต่ให้ทำงานได้เร็วที่สุด[sourcecode language=”sql”]DROP TABLE IF EXISTS `lastserv`;
      CREATE TABLE `lastserv` (
      `used` int(11) default NULL
      ) ENGINE=MEMORY DEFAULT CHARSET=utf8 COMMENT=’จำ server ที่ใช้ล่าสุด’;
      INSERT INTO `lastserv` VALUES (1);[/sourcecode]จะเห็นคำสั่งแปลกๆ ENGINE=MEMORY คือ MySQL จะมีระบบบริหารดาต้าเบสอยู่หลายตัวให้เลือกใช้ให้เหมาะกับงานต่างๆอ่านเพิ่มเติมได้จาก MySQL Storage Engine Architecture ในบรรดาเอ็นจิ้นของ MySQL จะมีเอ็นจิ้น Memory ซึ่งจะเก็บข้อมูลใน ram ทำให้อัตราการเข้าถึงข้อมูลเร็วที่สุดโดยเราสามาถเลือกได้ตอนสร้างตารางให้ระบุ engine ลงไปด้วย
      ในส่วนโค้ท php ไม่มีอะไรเป็นพิเศษเพียงมีการออพติไมซ์เพิ่มเล็กน้อยคือ[sourcecode language=”php”]<?php
      $dsn = mysql_connect(‘localhost’, ‘database user’, ‘databae password’);
      mysql_select_db(‘database name’ ,$dsn);
      /* การระบุ datasource จะทำงานได้เร็วขึ้น */
      $sql="SELECT used
      FROM lastserv;";
      $row = mysql_fetch_assoc(mysql_unbuffered_query($sql ,$dsn));
      /* คิวรี่แบบใช้ข้อมูลเพียงครั้งเดียวทิ้งลดการใช้ memory */
      if($row[‘used’] == 4){
      $next = 1;
      }else{
      $next = $row[‘used’] + 1;
      }
      $sql="UPDATE lastserv
      SET used= $next LIMIT 1;";
      mysql_unbuffered_query($sql ,$dsn);
      switch($row[‘used’]){
      case ‘1’ : {
      header(‘Location: http://192.168.1.1’);
      }break;
      case ‘2’ : {
      header(‘Location: http://192.168.1.2’);
      }break;
      case ‘3’ : {
      header(‘Location: http://192.168.1.3’);
      }break;
      case ‘4’ : {
      header(‘Location: http://192.168.1.4’);
      }break;
      }[/sourcecode]

api,framework,ide,library

คำพวกนี้จะเจอเป็นประจำในคู่มือเวลาเขียนเว็บดูเหมือนจะมีความหมายเดียวกัน ความจริงมีรายละเอียดมีแตกต่างกันบ้างโดย

  • ฟังชั่น (function) คือชุดคำสั่งที่ทำหน้าที่ใดหน้าที่หนึ่งโดยเฉพาะ
  • เอพีไอ (api) คือส่วนติดต่อที่อนุญาติให้เอาไปใช้เวลาเขียนโปรแกรม เช่นเอพีไอที่ทำหน้าที่ติดต่อกับดาด้าเบส ตัวทีทำหน้าที่ติดต่อกับกล้องถ่ายภาพ แต่ละเอพีไอประกอบด้วยฟังก์ชั่นทำหน้าที่ต่างๆ กันไป
  • ไลบารี (library) เปรียบเหมือนห้องสมุดที่มีชุดคำสั่งสำรับอำนวยความสดวกในการเขียนด้านใดด้านหนึ่ง เหมือนห้องสมุดจะมีหนังหนังสือให้เลือกใช้ เช่น jquery เป็นไลบารี (ห้องสมุดเฉพาะด้าน javascript) ซึ่งมีเอพีไอ (หนังสือ) ให้เรียกใช้ เช่น Selectors ไว้เลือกส่วนต่างๆ ของโค้ท html มี Manipulation ไว้แก้ไขโค้ท html
  • เฟรมเวิร์ค (framework) ตามตัวอักษรคือ กรอบการทำงาน โครงสร้างหรือจะเรียกว่านั่งร้านก็ได้ โดยจะต่างจากไลบารีเพราะ
    1. คำสั่งเราจะอยู่ในเฟรมเวิร์ค(กรอบ) ได้เพียงตัวเดียวเท่านั้นต่างจากไลบารีที่สามารถเรียกใช้พร้อมกันหลายตัว
    2. การทำงานจะไม่มีการเรียกใช้เอพีไอโดยตรงแต่จะผ่านเฟรมเวิร์คทำให้สามารถเขียนครั้งเดียวเอาไปใช้ในสภาพแวดล้อมต่างกันได้ เช่น ภาษาตะกูลดอทเน็ตคำสั่งของเราจะไม่เรียกใช้เอพีไอของวินโดวส์โดยตรงแต่จะผ่านดอทเน็ตเฟรมเวิร์คอีกที ทำให้ถึงเป็นวินโดวส์ต่างเวอร์ชั่นกัน แต่ถ้าเฟรมเวิร์คเวอร์ชั่นเดียวกันเป็นล่ามให้ก็จะทำงานเหมือนกัน
  • ไอดีอี (ide) คือสภาพแวดล้อมที่เราใช้เขียนโปรแกรม ประกอบด้วยหลายส่วน
    • เครื่องมือที่เราใช้เขียนโปรแกรม เช่น อิดิพลัส ,ดรีมวีฟเวอร์ ,วิชวลสตูดิโอ
    • ตัวแปรภาษาต่างๆ
    • ตัวดีบัคโค้ท
    • เซิร์ฟเวอร์

mysql ใครบอกว่ารับงานหนักๆ ไม่ได้

เคยไปรับงานลูกค้าซึ่งเป็นองค์กรรัฐกึ่งเอกชนแหน่งหนึ่ง โดยมีความต้องการขัดใจโปรแกรมเมอร์อย่างหนึ่งคือย้ายจาก mysql เป็น microsoft sql server ซึ่งทำให้การ query ซับซ้อนขึ้นมาก โดยเหตุผลของทางลูกค้าคือไม่มั่นใจว่าจะรองรับข้อมูลจำนวนมากได้ ผมจำได้ว่าแม้แต่ google ที่มีข้อมูลมหาศาลยังใช้ mysql แต่ขณะนั้นไม่มีหลักฐานที่จะแย้งลูกค้าได้ จำใจต้อมยอมรับเงื่อนไขไป

จนวันนี้ได้อ่านเจอว่าระบบเว็บที่มีคนใช้งานติดอันดับต้นๆ ของโลกอย่าง youtube เจ้าของคือ google ใช้ mysql เป็น database ลองเข้าไปอ่าน YouTube Architecture จะเห็นว่าถ้ามี knowleage และการจัดการที่ถูกต้องคนจำนวนน้อยตัวหลักแค่ 10 คน โปรแกรม opensource ก็ไม่น้อยหน้าระบบที่ขายอยู่เป็นหลักแสน หลักล้าน

ขยาย iframe อัตโนมัติตามเนื้อหา

ถ้าต้องการให้ iframe ขยายอัตโนมัติตามเนื้อหาที่อยู่ข้างในเราสามารถใช้โค้ทด้านล่างปรับความสูงได้ครับ[sourcecode language=”javascript” htmlscript=”true”]<script>
function iframeHeight(obj){
the_height= obj.contentWindow.document.body.offsetHeight;
obj.height=the_height+10;
}
<iframe id="some" onload="iframeHeight(this)"></iframe>[/sourcecode]