Earthchie Software Engineer, Front-end Developer, Google Fanboy

Category: Front-end Development (page 1 of 3)

เนื้อหาเกี่ยวกับเทคโนโลยีการแสดงผลเว็บไซต์ มักเป็น jQuery Plugins หรือเทคนิค CSS3

ตรวจสอบเลขบัตรประชาชนด้วย Javascript

idcard

ที่มาภาพ Pendar

วันนี้ไม่มีไรครับ สั้นๆ พอดีมีงานที่ต้องทำเจ้านี่ด้วย javascript ก็เลยเอามาแปะลงบล็อกด้วยเลย

function validatePID(pid){
    pid = pid.toString().replace(/\D/g,'');
    if(pid.length == 13){
        var sum = 0;
        for(var i = 0; i < pid.length-1; i++){
            sum += Number(pid.charAt(i))*(pid.length-i);
        }
        var last_digit = (11 - sum % 11) % 10;
        return pid.charAt(12) == last_digit;
    }else{
        return false;
    }
}

ฟังก์ชันนี้ฉลาดพอที่จะลบอะไรก็ตามที่ไม่ใช่ตัวเลขทิ้งไป ดังนั้น พวกขีด(-) เว้นวรรค ( ) ใส่ไปได้ ไม่เป็นไร

ตัวอย่างวิธีการใช้งาน

validatePID('1-2345-67891-23-2');

ผลลัพธ์จะ return ออกมาเป็น boolean ครับ

Import.js มาแยกโหลด html เป็นส่วนๆ กันเถอะ

import

ทำ script มาแจกอีกเช่นเคย (ชักจะเป็นบล็อก javascript มากกว่า html5 แล้ว 55) วันนี้ผมทำ import.js มาแจกครับ จากชื่อและรูปด้านบนก็พอจะเดาได้แล้วเนอะ ว่ามันคืออะไร

เคยมั้ยครับ ทำเว็บด้วย javascript เพียวๆ แต่อยากแยกส่วนข้อมูลเป็น header, body, footer แบบเดียวกับที่เคยทำใน php
เพื่อที่เวลาแก้ไขข้อมูล จะได้แก้ไขที่เดียว ไม่จำเป็นต้องทำงานซ้ำๆ ทุกๆ หน้า

อ่านต่อ

ฟังก์ชัน Javascript ใช้แปลงจำนวนเงินเป็นคำอ่าน (BAHTTEXT)

bahttext

วันนี้เอาฟังก์ชัน Javascript ที่ใช้แปลงจำนวนเงินเป็นคำอ่านมาฝากครับ ใครที่ใช้ Excel คงจะคุ้นเคยกับฟังก์ชัน BAHTTEXT นี้ดี

ก่อนจะทำผมก็ Research มาพอสมควรครับ พบว่ายังไม่มีใครเขียนให้ซัพพอร์ทเกินหลักสิบล้านเลย (พาดพิง) ผมก็เลยขอเป็นคนแรกที่ทำให้ฟังก์ชันนี้สมบูรณ์ในภาษา javascript ละกัน
อ่านต่อ

jQuery Script สำหรับช่วยกรอกที่อยู่อัตโนมัติ

maps

วันนี้เขียน jQuery script มาแจกตัวนึงครับ เอาไว้สำหรับช่วยกรอกที่อยู่อัตโนมัติ
ไม่ต้องมีฝั่ง server ใช้ง่ายไม่ยุ่งยาก นำไปใช้กับเว็บทั่วไปได้ทันที ไม่กระทบกับหน้าตาเว็บ

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

อัพเดต CKEditor Edit in Place เป็นเวอร์ชัน 2.0

ckeditor

ผ่านไปสองปีแล้วนะครับ หลังจากที่ผมปล่อย script สำหรับทำ Edit in Place ด้วย CKEditor
น่าแปลกใจที่แม้จะผ่านไปแล้วกว่าสองปี แต่ลูกเล่น Edit in Place ก็ยังดูล้ำอยู่เลย

ประกอบกับมี Feedback มาว่าของเดิมใช้ไม่ค่อยได้แล้ว เพราะ dependency เยอะไปหน่อย
เวลา CKEditor ออกเวอร์ชันใหม่ๆ เอาไปใช้ร่วมกันลำบาก แถมจะลงปลั๊กอินอะไรเพิ่มก็ลำบาก

ตอนนี้ CKEditor พัฒนาไปไกลแล้ว จริงๆ ถ้าใครคล่อง javascript หน่อยก็สามารถทำ edit in place ได้เองไม่ยาก เพราะมันพัฒนา API มาให้อยู่แล้ว
แต่ก็นะ มันยังยุ่งอยู่ไง ติดนิสัยขี้เกียจ 55
เพราะปลั๊กอินตัวเดิมแค่ใส่คลาส editable กับ data-handler มันก็จัดการทุกอย่างให้เสร็จสรรพ ให้มาเขียนโค้ดใหม่ยาวๆ ก็ไม่เอาแล้ว ขี้เกียจ

ผมเลยตัดสินใจทำเวอร์ชัน 2.0 ขึ้นมา โดยทำการปัดฝุ่น เขียนโค้ดใหม่ทั้งหมด และยังใช้ CKEditor เหมือนเดิม
เพราะพูดตามตรง มี WYSIWYG Editor เกิดใหม่เยอะแยะ แต่ไม่มีอันไหนถูกจริตผมเท่า CKEditor เลย

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

ตัวอย่างว่าอะไรคือ Edit in Place นะครับ ลองดับเบิลคลิกข้อความนี้ดู

อ่านต่อ

Older posts

Copyright © 2017 Earthchie

Theme by Anders NorenUp ↑