Category: Javascript

การใช้ jQuery ร่วมกับ library อื่นๆ ด้วยโหมด no-conflict

ในบางครั้งท่านผู้อ่านอาจจะมีปัญหา ในการนำ jQuery ไปใช้กับ ร่วมสคริปต์อื่นๆ หรือแม้กระทั่งพวก css framework ที่บางตัวจะมีการฝัง script ไว้ข้างในด้วย  ซึ่งอาจทำให้ script ของท่านทำงานผิดเพี้ยนไปจากที่ควรเป็น  วันนี้จะขอแนะนำเทคนิคในการแก้ปัญหาดังกล่าว นั่นก็คือ การปรับ jQuery ไปใช้งานในโหมด no-conflict นั่นเองค่ะ   สิ่งที่พึงระวังสำหรับมือใหม่ก็คือ ตัว jquery เองนั้นจะใช้ตัวแปร $  อ้างถึงฟังก์ชั่น jQuery  ดังนั้น ถ้ามีสคริปต์ตัวอื่นที่ใช้ตัวแปร $ นี้เหมือนกันล่ะก็  เกิดปัญหาขึ้นแน่นอนค่ะ วิธีแก้ปัญหา  วิธีที่ 1 คือให้สร้างตัวแปรเพิ่มขึ้นมาอีกตัวเพื่อใช้แทนเครื่องหมาย $ ตัวอย่างพร้อมคำอธิบาย…

วิธีการตรวจสอบข้อมูลในรูปแบบ JSON

ข้อมูลรูปแบบของ JSON เป็นที่นิยมใช้เป็นวิธีการส่งข้อมูลอย่างมากในปัจจุบัน ซึ่งในบ้างครั้งข้อมูลส่งจะมีความซับซ้อนหรือมีการซ้อนกันของข้อมูลหลายชั้น ทำให้การอาจเกิดข้อผิดพลาดในการสร้างข้อมูลหรือยากในการตรวจสอบข้อมูล ซึ่งในบทความนี้จึงขอเสนอเว็บไซต์ที่ช่วยในการตรวจสอบข้อมูลและแบ่งชั้นของข้อมูลที่ซ้อนกันหลาย ๆ ชั้น ในรูปแบบ JSON ได้ คือ https://jsonformatter.curiousconcept.com จากรูป  มีสิ่งที่ต้องระบุหลัก ๆ คือ JSON Data/URL สามารถวางข้อมูลหรือ URL ของข้อมูลได้ทั้งสองอย่าง JSON Standard เลือกว่า JSON ของเราสร้างโดยมาตรฐานใด หรือเราอยากตรวจสอบว่า JSON ที่เราสร้างอยู่ในมาตรฐานที่เราต้องการไหม เมื่อกำหนดเรียบร้อยก็กดปุ่ม Process จากรูป ระบบจะแสดงผลการตรวจสอบว่าถูกต้องหรือไม่ และนอกจากนี้ระบบยังแบ่งชั้นข้อมูลในแต่ละระดับที่ซ้อนกันให้ ทำให้เราดูชุดข้อมูลได้ง่ายยิ่งขึ้น หากข้อมูลผิดล่ะ จะเป็นไง ลองทำกันดู  ในกรณีที่ไม่ถูกต้อง…

การอัปโหลดไฟล์หลาย ๆ ไฟล์พร้อมกันด้วย Dojo

ที่มา การ upload แฟ้มข้อมูล (File) เป็นกิจกรรมที่อยู่คู่กับ Web application มาเนิ่นนาน ยิ่งเมื่อการพัฒนา Web application เข้าสู่ยุคสมัยของ Web 2.0 และเป็น Web 3.0 ในยุคปัจจุบันก็ยิ่งเกิดเครื่องมือต่าง ๆ เพื่ออำนวยความสะดวกในการ upload ไฟล์มากขึ้นรวมไปถึงความสามารถในการอัปโหลดหลาย ๆ ไฟล์พร้อมกัน (Multi-File Uploading) ณ เวลานี้มีเครื่องมือมากมายสำหรับนักพัฒนา Web application  ผู้อ่านอาจมีโอกาสได้ใช้งานเครื่องมือจากบางค่ายบ้างแล้ว แต่ในบทความนี้ผู้เขียนจะแนะนำวิธีการใช้งานเครื่องมือในการทำให้ Web application ของเราสามารถรองรับความต้องการในการอัปโหลดไฟล์หลาย ๆ ไฟล์ได้พร้อมกันตัวหนึ่งชื่อ HTML5 Multi-File…

สร้างกราฟด้วย Chart.js ร่วมกับ ASP.NET

    การแสดงผลในรูปแบบกราฟสำหรับเว็บแอพลิเคชัน ในปัจจุบันนั้น มีเครื่องมือ หรือเฟรมเวิร์ค มากมายให้เลือกใช้งาน ซึ่งสำหรับการเลือกใช้งานก็แล้วแต่ความเหมาะสมกับเครื่องมือ เทคโนโลยี ของเว็บนั้นๆ หรืออาจจะแล้วแต่ความถนัดของผู้พัฒนาเอง     สำหรับ Chart.js นั้นเป็นเฟรมเวิร์คที่สร้างด้วยภาษา JavaScript ดังนั้นคุณสมบัติที่พ่วงมาด้วยคือการทำงานแบบ AJAX อย่างเต็มรูปแบบ ซึ่งในบทความนี้จะเป็นการนำเอามาใช้ร่วมกับเว็บแอพลิเคชัน ที่พัฒนาด้วย ASP.NET โดยวิธีการส่งข้อมูลในรูปแบบ JSON ผ่าน Web Services และทำการแปลงข้อมูล JSON ให้อยู่ในรูปแบบของ Object ที่มีโครงสร้างตรงตามที่ Chart.js ต้องการ เพื่อนำไปใช้แสดงผลในรูปแบบกราฟแท่ง กราฟเส้น กราฟวงกลม  ผ่าน HTML Tag ที่มีชื่อว่า…

ใช้ google script ทำ mail merge เนื้อหาเมลที่มี pre-filled form URL

จากตอนที่แล้ว “ใช้ google script ทำ mail merge เนื้อหาเมลที่มี link” เรารู้วิธีใส่ link ไปในเนื้อหาเมล ในตอนนี้เราจะมาเปลี่ยน static link เป็น dynamic link (คือ link ที่มีการอ้างชื่อ cell จึงเป็น link ที่เปลี่ยนแปลงไปตามค่าที่อยู่ใน cell) จุดประสงค์ก็เพื่อส่ง link ให้ผู้ที่รับอีเมลกรอกข้อมูลลง google form ที่มีข้อมูลให้บางส่วนแล้ว (pre-filled form) ซึ่งเป็นข้อมูลของผู้รับอีเมลแต่ละคนที่แตกต่างกัน เช่น ให้มีฟิลด์ ชื่อ และ หน่วยงาน…

ใช้ google script ทำ mail merge เนื้อหาเมลที่มี link

ผมใช้ Yet another mail merge ซึ่งเป็น add-on เพื่อส่งอีเมลเรื่องเดียวกันไปยังเพื่อนๆจำนวนหนึ่ง ก็ใช้งานได้ดีมา 5 ครั้งแล้ว แต่พอครั้งหลังนี้ ผมต้องการส่งอีเมลที่ในเนื้อหามี link ให้ผู้ที่รับอีเมลสามารถคลิกเพื่อเปิดอ่านได้ แต่ลองหลายวิธีที่จะส่งด้วยวิธีที่เคยใช้ add-on ตัวนี้ก็จะแสดงเป็นข้อความ ไม่แสดงเป็น link ในอีเมล (อันนี้ต้องบอกก่อนว่า คาดว่าผู้ใช้ส่วนใหญ่ใช้โปรแกรมอีเมลที่มีการแสดงผลมากกว่าข้อความธรรมดา) ค้นหาดูก็พบว่า ต้องเปลี่ยนวิธีทำมาเป็นวิธีเขียน google script เพื่อส่ง mail merge แทน วิธีทำ ดังนี้ 1. สร้าง google sheet ตั้งชื่อ myusers 1.1…

วิธีใช้ Google Sheets สร้าง Account ใหม่ลงใน Sub Organization ของ GAFE

[บทความนี้ สำหรับผู้ที่มี GAFE Admin Privilege ขึ้นไป] ในการสร้างบัญชีผู้ใช้ใหม่บน GAFE นั้นทำได้หลายวิธี ได้แก่ การสร้างทีละคนผ่าน Admin Console การสร้างทีละหลายๆคนด้วย CSV File การสร้างทีละหลายๆคนผ่าน Google Apps Directory Sync เมื่อต้องการสร้างผู้ใช้จำนวนมาก เช่น 5,500 คน โดยต้องจัดแบ่งผู้ใช้ แยกลงไปในแต่ละ Sub Organization วิธีที่ 1. ทำได้แต่เป็นงานที่หนักมาก วิธีที่ 2. ทำไม่ได้ เพราะการใช้ CSV File ผ่าน Admin…

วิธีการใช้ Google Sheets เป็นระบบเฝ้าระวังเว็บไซต์ (Website Monitoring) จากภายนอกองค์กร

ในการเฝ้าระวังบริการเว็บไซต์ขององค์กร (Website Monitoring) ผู้ดูแลระบบมักจะจัดทำจากภายในระบบเครือข่ายขององค์กร แต่ไม่ได้เฝ้าระวังจากภายนอกระบบเครือข่ายขององค์กร ทำให้ไม่ทราบว่าภายนอกสามารถเข้าถึงเว็บไซต์ดังกล่าวได้หรือไม่ จาก “วิธีการใช้ Google Sheets เป็นฐานข้อมูล” ซึ่งได้กล่าวถึงพื้นฐานการพัฒนา Google Apps Script เพื่อใช้ต่อยอดความสามารถของ Google Sheets สามารถนำมาประยุกต์ใช้เพื่อเฝ้าระวังบริการเว็บไซต์จากภายนอกระบบเครือข่ายขององค์กรได้ (จาก Google Cloud Infrastructure เลยทีเดียว) ขั้นตอนในการทำ ในโปรเจค ProjectMyDB สร้างไฟล์ monitoring.gs ดังภาพ ประกอบด้วย 3 ฟังก์ชัน คือ function check_website(url) {     var…

วิธีการใช้ Google Sheets เป็นฐานข้อมูล

Google Sheets เป็นหนึ่งใน Google Apps ซึ่งเป็น Application Suite ของ Google ประกอบด้วย ในการใช้งานทั่วไป Google Apps สามารถตอบสนองการใช้งานได้เป็นอย่างดี แต่เมื่อต้องการทำกิจกรรมบางอย่างที่นอกเหนือไปจากการใช้งานพื้นฐาน ผู้ใช้สามารถพัฒนาเพิ่มเติมได้เอง ด้วย Google Apps Script Google Apps Script เป็น Scripting Language ที่อยู่บนพื้นฐานของภาษา JavaScript สามารถใช้งานได้และพัฒนาต่อยอดได้ทันทีโดยไม่ต้องติดตั้งอะไรเพิ่มเติมอีกแล้ว สามารถเรียกใช้ Google Service ต่างๆได้มากมาย รวมถึง Google Sheets เพื่อสร้าง เมนูพิเศษ หรือ…