Category: javascript

Regular expression ที่ผมใช้บ่อยๆ

แอบอู้มานาน เอาของที่ใช้กันอยู่ทุกวัน มาแจกให้

โค๊ดพวกนี้ผมจะใช้ใน javascript นะ ถ้าเอาไปใช้กับภาษาอื่นๆ ก็เปลี่ยนแปลงนิดหน่อย ก็ได้ละ

var emailpattern = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var usernamepattern = /^([a-zA-Z0-9_]{6,16})+$/;
var moneypattern = /^([1-9][0-9]{0,10}|[1-9][0-9]{0,10}.[0-9]{2})$/;
var daypattern = /^[2][0-9]{3}\-[0-9]{1,2}\-[0-9]{1,2}$/;
var timepattern = /^([0-9]{1,2}:[0-9]{1,2})|([0-9]{1,2}:[0-9]{1,2}:[0-9]{1,2})$/;
var passwordpattern = /^(?=.*\d).{6,12}$/;

เสร็จอย่างไว

ตัวเลขปวดหัวๆ กับ Javascript

สวัสดีเพื่อนๆ ช่วงนี้ทำงานหลายอย่าง ไม่มีเวลาเข้ามาเขียนอะไรเลย รอบนี้เอาสั้นๆ ละกันเนอะ

ตอนนี้ผมก็เขียนเว็บที่มีตัวเลขมาเกี่ยวข้องนิดหน่อย จริงๆ แล้วก็ไม่ค่อยถูกกับตัวเลขเท่าไหร่หรอก แต่ในเมื่อเขาขอมาผมก็จัดไป (แต่ก็ยังไม่ 100% ซะที)

เพื่อนที่เคยเขียนเว็บมาคงมีปัญหาตัวเลขกับ Javascript กันมาพอสมควร ผมขอยกตัวอย่างง่ายๆ ที่เจอกันบ่อยๆ นะครับ

1. ช่องใน textbox เป็นค่าว่าง แล้วพอนำไปคำนวนตัวเลข จะกลายเป็น NaN (Not a Number) ซะ ทำให้ค่าที่ออกมาผิดไปหมดเลย วิธีการแก้ปัญหาก็แสนจะง่ายคือ เอาค่าไป OR กับ 0 (ศูนย์) ซะ แค่นี้ก็แก้ปัญหาได้แล้ว ตัวอย่างโค๊ดก็แบบนี้

var number = parseFloat(jQuery("#number").val());
// แบบนี้ ถ้าหากเป็นค่าว่าง จะมีปัญหา NaN ก็แก้แบบนี้ซะ

var number1 = parseFloat(jQuery("#number1").val()) || 0;
// แบบนี้ ถ้าเป็นค่าว่างก็จะกลายเป็น 0 แทน เท่านี้ก็แก้ปัญหาได้แล้ว

2. ทศนิยมใน Javascript มันเพี้ยน หรือต้องการทศนิยมแค่ 2 ตำแหน่ง ไม่ยากเลย ใช้คำสั่ง toFixed() ซะ แค่นี้ก็จะแสดงทศนิยมตามที่ต้องการได้แล้ว ตัวอย่างเช่น


var number = 123.456789;
alert(number); // แสดงผล 123.456789
alert(number.toFixed(2)); // แสดงผลแค่ 123.45

3. ป้อนข้อมูลเข้ามามีเครื่องหมาย , ด้วย แต่ตอนที่เอาไปคำนวนต้องตัด , ออกไปก่อน บางที user ไม่อยากแก้ (ขี้เกียจ) หรืออาจจะไม่ทันได้แก้ หลงลืมได้ ไม่ว่ากัน เราก็เขียนกันไว้ก่อนซะ ง่ายๆ เลย ใช้ regular expression ซะ แค่นี้เราก็ตัดเครื่องหมาย , ออกได้แล้ว ผมเขียนเป็น function ใหม่ละกัน ไม่ต้องไปสร้างเป็น prototype ให้มันยุ่งยากเนอะ

function makeNumber(obj) {
   jQuery("#"+obj.id).val(obj.value.replace(/[,]/g,""));
}

<input type=”text” name=”number” id=”number” value=”0″ onChange=”makeNumber(this);”>
อ่าเอาแค่นี้ก่อนละกัน ยิ่งเขียนยิ่งรั่วแหละ เดี๋ยวเคลียงานเสร็จแล้วจะมาแก้ไขให้ดูดีกว่านี้ละกันครับ แล้วเจอกันใหม่ 🙂

ตั้งค่าเริ่มต้นให้ตัวแปรฟังก์ชั่นใน Javascript

รอบนี้มาเขียนสั้นๆ

ปกติแล้วในภาษาทั่วๆ ไป เวลาเราสร้างฟังก์ชั่น เราสามารถกำหนดค่าเริ่มต้นให้ตัวแปรที่รับค่าเข้ามาในฟังก์ชั่นได้ ตัวอย่างเช่น

function taxCal($base, $multiplier = 0.7) {
   xxxxxxx
}

แต่ใน Javascript เราจะเขียนแบบนี้ไม่ได้ แล้วตัวแปรที่ไม่ได้กำหนดค่าให้กับฟังก์ชั่นใน Javascript จะมีค่าเป็น undefined โดยอัตโนมัติ แต่เราก็ไม่สามารถเปรียบเทียบตัวแปรได้ตรงๆ ต้องใช้คำสั่ง typeOf ตรวจสอบตัวแปรนั้นๆ ก่อน ตามตัวอย่างนี้

function taxCal(base, multiplier) {
   multiplier = typeOf multiplier !== "undefined" ? 0.7 : multiplier;
}

ง่ายๆ เลยใช่ไหมเอ่ย แค่นี้เราก็กำหนดตัวแปรใน Javascript ได้แล้วละ

jQuery RTE

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

เจอกันคราวนี้ ผมเอา Rich Text Editor (RTE) แต่ไม่ใช่ RTE ธรรมดา ทั่วๆ ไป แต่เป็น RTE ที่ใช้งานร่วมกับ jQuery สำหรับผู้ที่ชื่นชอบ jQuery ทั้งหลาย (ผมก็เป็นหนึ่งในนั้นแหละ)

จริงๆ แล้ว RTE ก็มีให้เลือกหลายตัวเลย ทั้ง TinyMCE, CKEditor หรือ YUI ของ Yahoo แต่ทั้งหมดก็เป็น RTE ที่ไม่ได้ใช้งาน jQuery เลย

ข้อได้เปรียบของ RTE ที่ทำมาเพื่อ jQuery คือเราสามารถเข้าถึงข้อมูลโดยใช้ jQuery ได้ตรงๆ เลย แต่ก็ขึ้นอยู่กับ RTE แต่ละตัวว่าเปิดให้เราเข้าถึงได้มากแค่ไหน แต่อย่างน้อยก็ง่ายกว่า TinyMCE ที่ผมใช้บ่อยๆ แหละ Continue reading

ยกเลิกคลิกขวาแบบง่ายสุดๆ

ปกติเราจะเขียนแค่
<body>
แต่ถ้าแก้ไขเป็น
<body oncontextmenu=”return false;”>
แค่นี้ก็กด click ขวาไม่ได้แล้วแหละ ง่ายไหม

จริงๆ มันเป็น html มากกว่าเนอะ ไม่ใช่ javascript เลยอ่ะ

ฟังก์ชั่นตรวจสอบอีเมล

เอาไว้ใช้สำหรับตรวจสอบ e-mail ที่ป้อนมาจากฟอร์ม ฟังก์ชั่นจะคืนค่า true ถ้าอีเมล์ที่ป้อนเข้ามาถูกต้อง เพราะฉะนั้นเวลาเอาไปใช้งานก็ต้องใส่ ! ด้วยนะครับ เพราะเราจะเอาค่าที่ตรวจสอบไม่ผ่านเข้าทำงานในเงื่อนไข

    function chkMail(mail){
            var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if (filter.test(mail)){
                    return true;
            }
            else{
                    return false;
            }
    }

้เวลาใช้งานก็ตรวจสอบแบบนี้

if (!chkMail($("#email").val())) { // ใช้ jquery ช่วยตรวจสอบด้วย
  alert("อีเมลไม่ถูกต้อง");
  return false;
}

ไม่ยากเลยใช่ไหมครับ

ฟังก์ชั่น str_repleat ของ java script

ปกติ php จะมีคำสั่งสำหรับทวนตัวอักษรแบบง่ายๆ แต่ java sctipt ไม่มี ถ้าอยากให้มีก็ไม่ยาก เอาโค๊ดนี้ไปเลย

    String.prototype.repeat = function(num) {
            return new Array(isNaN(num)? 1 : ++num).join(this);
    }

วิธีใช้ก็

var foo = "hello";
alert(foo.repeat(10));

ไม่ยากเลยใช่ไหม

window.open

    <script type="text/javascript" language="javascript">
    function popUpWindow(sURL, sName, width, height, menu, resize, scrollbar, status, title, toolbar)
    {
            // Detect Default Value
            menu = typeof(menu) == 'undefined'?0:menu;
            resize = typeof(resize) == 'undefined'?0:resize;
            scrollbar = typeof(scrollbar) == 'undefined'?0:scrollbar;
            status = typeof(status) == 'undefined'?0:status;
            title = typeof(title) == 'undefined'?0:title;
            toolbar = typeof(toolbar) == 'undefined'?0:toolbar;
            ////////////////////////////////////////////////////////////////
           
            screenwidth = window.screen.width;
            screenheight = window.screen.height;
           
            var left = (screenwidth/2) - (width/2);
            var top = (screenheight/2) - (height/2);
           
            var newwin = window.open(sURL, sName, "top=" + top + ", left=" + left + ", height="+ height + ", width=" + width + ", menubar=" + menu + ", resizable=" + resize + ", scrollbars=" + scrollbar + ", status=" + status + ", titlebar=" + title + ", toolbar=" + toolbar + "");
            newwin.focus();
    }
    </script>

number only สำหรับ textbox

เขียนไว้นานแล้ว เอาไว้สำหรับตรวจสอบ text box ให้ป้อนข้อมูลเป็นตัวเลขเท่านั้น

เอาตรงนี้ไปใส่ไว้ใน <head> ก่อน

    function numbersonly(e){
            var unicode=e.charCode? e.charCode : e.keyCode;
            if (unicode!=8){
                    if(unicode<48 || unicode>57){
                            return false
                    }
            }
    }

ตอนใช้งานก็เขียนแบบนี้

<input type=”text” onKeyPress=”return numbersonly(event)” />

สามารถใช้กับ type อื่นๆ เช่น number หรือ tel ก็ได้นะครับ html5 มี type ของ textbox เพิ่มขึ้นเยอะเลย

ฟังก์ชั่น number_format สำหรับ java script

ปกติใน PHP จะมีฟังก์ชั่น number_format() สำหรับเติ่มเครื่องหมาย , ให้กับตัวเลข และช่วยปัดเศษของทศนิยมตามตำแหน่งที่เราต้องการได้ด้วย แต่ว่า AJAX มันเป็น Java Script แล้วมันดันไม่มีฟังก์ชั่นนี้ด้วยสิ จะโยนให้ PHP ผ่าน XMLHttp ก็ใช่เรื่อง เลยเขียนเองเลยดีกว่า

มั่วไป มั่วมาก็ได้ตามนี้แหละครับ

<script type="text/javascript">
   function number_format (number, decimals, dec_point, thousands_sep) {
      var exponent = "";
      var numberstr = number.toString ();
      var eindex = numberstr.indexOf ("e");
      if (eindex > -1) {
         exponent = numberstr.substring (eindex);
         number = parseFloat (numberstr.substring (0, eindex));
      }
      if (decimals != null) {
         var temp = Math.pow (10, decimals);
         number = Math.round (number * temp) / temp;
      }
      var sign = number < 0 ? "-" : "";
      var integer = (number > 0 ? Math.floor (number) : Math.abs (Math.ceil (number))).toString ();
      var fractional = number.toString ().substring (integer.length + sign.length);
      dec_point = dec_point != null ? dec_point : ".";
      fractional = decimals != null && decimals > 0 || fractional.length > 1 ? (dec_point + fractional.substring (1)) : "";
      if (decimals != null && decimals > 0) {
         for (i = fractional.length - 1, z = decimals; i < z; ++i) {
            fractional += "0";
         }
      }
      thousands_sep = (thousands_sep != dec_point || fractional.length == 0) ? thousands_sep : null;
      if (thousands_sep != null && thousands_sep != "") {
         for (i = integer.length - 3; i > 0; i -= 3){
            integer = integer.substring (0 , i) + thousands_sep + integer.substring (i);
         }
      }
      return sign + integer + fractional + exponent;
   }
</script>

วิธีการเรียกใช้งานก็ง่ายๆ เลยครับ
number_format(ตัวเลข, จำนวนทศนิยม, เครื่องหมายทศนิยม, เครื่องหมายหลักพัน);

เช่น จะเอาตัวเลข 20,000.00 ก็เขียนประมาณนี้ครับ

number_format(20000,2,’.’,’,’);

สั้นๆ ง่ายๆ แต่มีประโยชน์เหลือหลายครับ

เอาไปใช้กันได้ ไม่หวงครับ