Javascript – Page 4 – CoP PSU IT Blog

Pass special characters in JavaScript function

January 12, 2017 19:55

ในการพัฒนาโปรแกรมไม่ว่าจะพัฒนาด้วยภาษาใดก็ตาม ทุกภาษาจะมี special characters ซึ่ง special characters บางตัวอาจจะถูกระบุให้เป็นตัวแปร หรือ ใช้อักขระพิเศษเพื่อระบุอยู่ลำดับสุดท้ายของข้อความของบรรทัด เป็นต้น ซึ่งตรงส่วนนี้จะทำให้ประสบปัญหาในการนำ special characters ไปใช้งาน นั่นคือจะทำให้เกิด Error ทำให้โปรแกรมไม่สามารถทำงานต่อได้ ซึ่งJavaScript ก็เป็นอีกหนึ่งภาษาที่ประสบปัญหานี้ เช่น การส่ง parameter ผ่าน function ของ JavaScript โดยค่าของ parameter ที่ส่งไปเป็น special characters ทำให้เกิด Error และโปรแกรมไม่สามารถทำงานต่อได้ วันนี้จะขอแนะนำเทคนิคในการแก้ปัญหาดังกล่าว นั่นก็คือ การ Encoding และ Decoding ในที่นี้ผู้เขียนได้พัฒนาในรูปแบบ MVC โดยใช้ JavaScript ในการเรียก Controller จึงใช้วิธีการ Encoding กับ JavaScript และ ทางฝั่ง Controller จะใช้ C# จึงใช้ C# ในการ Decoding ค่ะ 1.วิธีการ Encoding in JavaScript ในการจะส่ง parameter ผ่านทาง function ของ JavaScript โดยข้อความนั้นมี special characters จำเป็นที่จะต้องมีการ Encoding ในที่นี้เราจะใช้ฟังก์ชัน Escape() ของ JavaScript ตัวอย่าง Encoding in JavaScript <script> function SaveData() { var txtDocTitle = $(‘#txtDocTitle’).val(); $(‘#pleaseWaitDialog’).modal(); $.ajax({ type: ‘POST’, contentType: ‘application/json; charset=utf-8’, url: “@Url.Action(“SaveDataToTable”, “I_EXPENSE”)”, data: “{‘budgetYear’:'” + valueYear + “‘ ,’docTitle’:'” + escape(txtDocTitle) + “‘}”, success: function (data) { }, error: function (data) { alert(data); } }); } </script> จากตัวอย่างกรณีป้อนข้อมูลที่มี special characters เช่น “I’m *&^$ special characters” เมื่อใช้ function escape(“I’m *&^$ special characters”) จะได้ผลลัพธ์ดังนี้ ผลลัพธ์จากการเรียกใช้ escape() I%u2019m%20*%26%5E%24%20special%20characters หลังจากที่มีการเรียกใช้ escape() จะทำให้สามารถส่ง parameter ที่มี special characters ไปได้โดยไม่พบ Error โปรแกรมสามารถทำงานได้ปกติ เป็นอันผ่านไปหนึ่งด่านในส่วนของการเรียกใช้งาน function ของ JavaScript แต่ทว่าการที่เราจะนำข้อความที่ผ่านการ Encoding มาใช้งานไม่ได้ เนื่องจากจะไม่ถูกต้องตามความต้องการของผู้ใช้งาน จากตัวอย่างข้างต้น ผู้ใช้งานป้อนข้อมูล “I’m *&^$ special characters” สิ่งที่โปรแกรมต้องทำการบันทึกก็ต้องเป็น “I’m *&^$ special characters” ไม่ใช่ “I%u2019m%20*%26%5E%24%20special%20characters” ดังนั้นจึงจำเป็นจะต้องมีการ Decoding เพื่อให้ได้ข้อมูลที่ถูกต้อง 2.Decoding in C# เมื่อมีการ Encoding เราจำเป็นที่จะต้อง Decoding เพื่อให้ได้ข้อมูลที่ถูกต้องตามที่ผู้ใช้งานได้ป้อนข้อมูล ตัวอย่าง Decoding in C# var docTitle = HttpUtility.UrlDecode(docTitle, System.Text.Encoding.Default); //ตรงส่วนนี้ตัวแปร docTitle

การค้นหาสถานที่ด้วย Places search box และแสดงผลภาพจากข้อมูล Street View บน Google Maps

January 12, 2017 16:34

ความเดิมจากตอนที่แล้วของบทความ “การดึงค่าละติจูดและลองจิจูดของสถานที่ด้วย Places search box บน Google Maps” เพื่อแก้ปัญหาในการดึงค่าละติจูด-ลองจิจูดจากชื่อสถานที่ที่ผู้ใช้พิมพ์ค้นหาไว้ โดยมีการนำ “Places search box” มาใส่ไว้ในแผนที่ที่เราต้องการแทนนั้น ถือเป็นตัวช่วยให้กับผู้ใช้ในระดับหนึ่ง แต่สำหรับในบทความนี้ ผู้เขียนจะขอต่อยอดความรู้ดังกล่าว โดยได้ศึกษาและนำวิธีการแสดงผลภาพจากข้อมูล Street view มาประยุกต์ใช้ร่วมด้วย เพื่อให้ผู้ใช้สามารถมองเห็นสถานที่จริงที่เลือกได้จากแผนที่ได้ด้วย ซึ่งจะยิ่งช่วยอำนวยความสะดวกให้กับผู้ใช้ ทำให้ผู้ใช้สามารถตรวจสอบได้ว่าสถานที่ดังกล่าวเป็นสถานที่ที่ต้องการจะดึงค่าละติจูด-ลองจิจูดจริงหรือไม่ได้อีกทางหนึ่งนั่นเอง ซึ่งวิธีการบางส่วนจะขอยกยอดมาจากบทความก่อนหน้านี้ เกี่ยวกับเรื่องการดึงค่าละติจูด-ลองจิจูดจากการค้นหาโดยใช้ Places search box และจะขอเพิ่มเติมความสามารถในการแสดงผลภาพ Street View รวมทั้งสามารถคลิกจุดพิกัดใหม่บนแผนที่ เพื่อค้นหาตำแหน่ง สถานที่ตั้ง และรายละเอียด รวมถึงภาพจาก Street View ได้อีกด้วย เพื่อให้การดึงค่าพิกัดใกล้เคียงความจริงมากที่สุด โดยมีวิธีการดังนี้ ส่วนของสไตล์ชีทในการแสดงผล ขึ้นกับการตกแต่งของผู้พัฒนาแต่ละท่าน <!—ส่วนของ Style Sheets-> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { width: 100%; height: 400px; } .controls { margin-top: 10px; border: 1px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } #searchInput { background-color: #fff; font-family: Roboto; font-size: 15px; font-weight: 300; margin-left: 12px; padding: 0 11px 0 13px; text-overflow: ellipsis; width: 80%; } #searchInput:focus { border-color: #4d90fe; } </style> ส่วนของการอ้างอิง libraries เพื่อใช้งาน Google API <script src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyCRbMoDPc_mTv3D3QPqe0Ar84nSvRhA8nk&libraries=places&callback=initMap” async defer></script> ส่วนของการประกาศค่าเริ่มต้นและตัวแปร รวมถึงการเรียกใช้งานฟังก์ชั่นเพื่อใช้ในการแสดงผล ฟังก์ชั่น initMap() ซึ่งจะเรียกใช้งานตอนเริ่มต้นโหลดหน้าจอขึ้นมา <script> var panorama; var map; var markers = []; /***** function ในการประกาศค่าเริ่มต้นให้กับแผนที่*****/ function initMap() { /***** ประกาศตำแหน่งพิกัดกึ่งกลางให้กับการแสดงผลแผนที่ ในที่นี้กำหนดเป็นกรุงเทพมหานคร*****/ var center_point = { lat: 13.7563309, lng: 100.50176510000006 }; var sv = new google.maps.StreetViewService(); /***** เป็นส่วนของการแสดงผลภาพจาก Street View *****/ panorama = new google.maps.StreetViewPanorama(document.getElementById(‘pano’)); /***** กำหนดรายละเอียดคุณสมบัติของแผนที่*****/ var map = new google.maps.Map(document.getElementById(‘map’), { center: {lat: center_point.lat, lng: center_point.lng}, zoom: 13, streetViewControl: false // เป็นส่วนที่ Set เพิ่มเติมจากปกติ }); sv.getPanorama({ location:

การดึงค่าละติจูดและลองจิจูดของสถานที่ด้วย Places search box บน Google Maps

January 12, 2017 16:29

ก่อนจะพูดถึงเนื้อหาของบทความนี้ ผู้เขียนขอท้าวความไปถึงบทความก่อนหน้าที่เป็นเนื้อหาที่เกี่ยวข้องกับการดึงค่าละติจูด-ลองจิจูดของสถานที่ เพื่อมากำหนดจุดพิกัดบนแผนที่ หรือที่เรารู้จักกันดีในนามของ Google maps (ซึ่งสามารถหาอ่านได้จากลิงค์ ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C# (ภาคต่อ) และหากท่านต้องการศึกษาเกี่ยวกับวิธีการกำหนดพิกัดบนแผนที่เพิ่มเติมสามารถหาอ่านได้จากลิงค์ ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C# เช่นกัน) แต่หลังจากที่ผู้เขียนได้นำไปทดลองใช้งานการดึงค่าพิกัดที่ค้นหา พบว่าเกิดปัญหาในการค้นหาพิกัดของสถานที่ในบางกรณี คือ ไม่สามารถค้นหาพิกัดของบางสถานที่ที่ต้องการได้ และในบางครั้งผู้ใช้เลือกสถานที่ที่จะดึงค่าพิกัดมาใช้งานผิด เนื่องจากชื่อสถานที่อาจคล้ายกัน แต่ตั้งอยู่กันคนละประเทศ หรือทวีป โดยผู้ใช้อาจไม่เห็นภาพว่าสถานที่ดังกล่าวอยู่ส่วนใดของแผนที่ จึงทำให้พิกัดที่ได้มีความผิดพลาดหรือคลาดเคลื่อนได้ ผู้เขียนจึงได้ลองศึกษาเพิ่มเติม และปรับเปลี่ยนวิธีการ เพื่อให้การดึงค่าพิกัดเป็นไปได้ง่าย และอำนวยความสะดวกต่อผู้ใช้งานมากขึ้น รวมทั้งเพิ่มช่องทางในการค้นหาข้อมูลพิกัดได้มากขึ้นและมีความถูกต้องแม่นยำขึ้น ตัวอย่างภาพการทำงานของการดึงค่าพิกัดที่ผู้เขียนเคยเขียนไว้ก่อนหน้านี้ แบบที่ 1 การเรียกใช้เซอร์วิสของ Google Geocoding API โดยการส่งพารามิเตอร์เป็นที่อยู่ของสถานที่ดังกล่าว แบบที่ 2 แบบใช้ place Autocomplete ซึ่งเป็น feature ของ Google Places API ที่จะช่วยในการค้นหาที่อยู่จากชื่อสถานที่ได้และประยุกต์เพิ่มเติมเพื่อดึงค่ามาแสดงเมื่อมีการเลือกรายการสถานที่นั้นๆ จากปัญหาดังกล่าวข้างต้น ผู้เขียนได้ปรับเปลี่ยนวิธีการในการดึงค่าละติจูด-ลองจิจูดจากชื่อสถานที่ที่ผู้ใช้พิมพ์ค้นหาไว้ โดยมีการนำ “Places search box” มาใส่ไว้ในแผนที่ที่เราต้องการแทน เพื่อให้ผู้ใช้สามารถมองเห็นสถานที่จริงที่เลือกได้จากแผนที่ ซึ่งสามารถตรวจสอบได้ว่าสถานที่ดังกล่าวเป็นสถานที่ที่ต้องการจะดึงค่าละติจูด-ลองจิจูดจริงหรือไม่อีกทางหนึ่งนั่นเอง โดยมีวิธีการดังนี้ ส่วนของสไตล์ชีทในการแสดงผล ขึ้นกับการตกแต่งของผู้พัฒนาแต่ละท่าน <!—ส่วนของ Style Sheets–> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { width: 100%; height: 400px; } .controls { margin-top: 10px; border: 1px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } #searchInput { background-color: #fff; font-family: Roboto; font-size: 15px; font-weight: 300; margin-left: 12px; padding: 0 11px 0 13px; text-overflow: ellipsis; width: 50%; } #searchInput:focus { border-color: #4d90fe; } </style> ส่วนของการอ้างอิง libraries เพื่อใช้งาน Google API <script src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyCRbMoDPc_mTv3D3QPqe0Ar84nSvRhA8nk&libraries=places&callback=initMap” async defer></script> ส่วนของการประกาศค่าเริ่มต้นและตัวแปร รวมถึงการเรียกใช้งานฟังก์ชั่นเพื่อใช้ในการแสดงผล <script> /***** function ในการประกาศค่าเริ่มต้นให้กับแผนที่*****/ function initMap() { /***** กำหนดรายละเอียดคุณสมบัติของแผนที่*****/ var map = new google.maps.Map(document.getElementById(‘map’), { center: {lat: -33.8688, lng: 151.2195}, zoom: 13 }); /***** กำหนดตำแหน่งที่ตั้งของ control ที่จะวางในแผนที่*****/ var input = document.getElementById(‘searchInput’); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); /***** เพิ่ม Feature ให้กับ textbox ให้สามารถพิมพ์ค้นหาสถานที่ได้*****/ var

วิธีการ set property ของ radio button ใน Dojo

January 12, 2017 14:30

เนื่องจากช่วงนี้ ผู้เขียนมีโอกาสได้เข้ามาอยู่ในแวดวงของ Dojo และได้ประสบกับปัญหาในการที่จะ set property ของ Dojo ซึ่งในที่นี้คือ Radio Button หลังจากที่ได้ลองผิด ลองถูก Error กันหัวหมุน จนสุดท้ายได้เจอทางออก เลยอยากจะบันทึกไว้สำหรับตัวเองมาดูในอนาคต และเผื่อท่านอื่นที่ประสบปัญหาเดียวกัน มาเจอจะได้ลองนำไปใช้งานกันดูค่ะ Let’s GO!!! เนื่องจาก Radio Button เป็น Control ภายใต้ dijit/form/RadioButton ดังนั้น การเขียนคำสั่งเพื่อ set property จึงได้เป็นดังนี้ dijit.byId(‘control_id‘).set(‘control_prop‘, value); control_id : id ของ control นั้น ๆ control_prop : property ของ control ที่ต้องการกำหนดค่า value : ค่าที่ต้องการกำหนด ตัวอย่างเช่น ต้องการกำหนดให้ radio button ที่มี id=”rdBtn1″ ไม่สามารถใช้งานแต่ยังแสดง(disable) และ id=”rdBtn2″ มีค่าโดยปริยายเป็นเลือกไว้ จะเขียน Code ได้ดังนี้ dijit.byId(‘rdBtn1’).set(‘disabled’, true); dijit.byId(‘rdBtn2’).set(‘checked’, true); ซึ่ง properties ของ control ต่าง ๆ สามารถดูเพิ่มเติมได้จากเว็ปเพจของ Dojo ตามลิงค์นี้ค่ะ Dojo Documentation หวังว่าบทความนี้จะเป็นประโยชน์แก่ท่านผู้อ่านไม่มาก็น้อยนะคะ แล้วพบกันใหม่ตอนหน้าค่ะ

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

January 9, 2017 14:50

ในบางครั้งท่านผู้อ่านอาจจะมีปัญหา ในการนำ jQuery ไปใช้กับ ร่วมสคริปต์อื่นๆ หรือแม้กระทั่งพวก css framework ที่บางตัวจะมีการฝัง script ไว้ข้างในด้วย ซึ่งอาจทำให้ script ของท่านทำงานผิดเพี้ยนไปจากที่ควรเป็น วันนี้จะขอแนะนำเทคนิคในการแก้ปัญหาดังกล่าว นั่นก็คือ การปรับ jQuery ไปใช้งานในโหมด no-conflict นั่นเองค่ะ สิ่งที่พึงระวังสำหรับมือใหม่ก็คือ ตัว jquery เองนั้นจะใช้ตัวแปร $ อ้างถึงฟังก์ชั่น jQuery ดังนั้น ถ้ามีสคริปต์ตัวอื่นที่ใช้ตัวแปร $ นี้เหมือนกันล่ะก็ เกิดปัญหาขึ้นแน่นอนค่ะ วิธีแก้ปัญหา วิธีที่ 1 คือให้สร้างตัวแปรเพิ่มขึ้นมาอีกตัวเพื่อใช้แทนเครื่องหมาย $ ตัวอย่างพร้อมคำอธิบาย <script src=”other_library.js”></script> <script src=”jquery.js”></script> <script> //ในที่นี้เราประกาศตัวแปร $j แทนตัว $ var $j = jQuery.noConflict(); $j(document).ready(function(){ $j(“div”).hide(); }); // ถึงตรงนี้ตัวแปร $ จะหมายถึงตัวแปรจากสคริปต์ other_library.js // mainDiv ดังนั้นคำสั่งข้างล่างนี้ $(‘main’) จึงหมายถึงการเรียกฟังก์ชั่น // จาก other_library ไม่ใช่การเรียกฟังก์ชั่นของ jquery window.onload = function(){ var mainDiv = $(‘main’); } </script> วิธีที่ 2 ในกรณีที่ไม่ต้องการประกาศตัวแปรเพิ่ม ในที่นี้เราสามารถใช้งานตัวแปร $ ได้แต่เป็นการเรียกใช้แบบ locally scope(เรียกใช้เฉพาะในบล็อคของ jQuery เอง) ตัวอย่างพร้อมคำอธิบาย <script src=”other_library.js”></script> <script src=”jquery.js”></script> <script> jQuery.noConflict(); jQuery(document).ready(function($){ // การใช้ตัวแปร $ ในนี้จะหมายถึง jQuery (locally scope) $(“div”).hide(); }); // ส่วนการใช้ตัวแปร $ นี้จะหมายถึงการเรียกใช้แบบ global scope // ซึ่งในที่นี้หมายถึงการเรียกใช้ $ ของ other_library นั่นเอง window.onload = function(){ var mainDiv = $(‘main’); } </script> การเรียกใช้งานแบบนี้จะทำให้เราไม่สับสนกรณีที่เขียนโค๊ดยาวๆ หรือใช้ไลบราลีหลายตัว สองวิธีข้างต้น จะสังเกตว่าเรา include สคริปต์ jQuery หลังสคริปต์ตัวอื่น กรณีที่เรามีการ include สคริปต์ jQuery ก่อนสคริปต์ตัวอื่น จะทำอย่างไร? ในกรณีที่เรา include jQuery มาก่อนและหากสคริปต์ที่ตามหลังใช้ตัวแปร $ จะถือว่าตัวแปร $ นั้นเป็นของสคริปต์ที่ประกาศที่หลัง(override) ซึ่งถ้าเราต้องการใช้งาน jQuery จะทำได้โดยการเรียกใช้ฟังก์ชั่น jQuery โดยตรง ดังตัวอย่างข้างล่างนี้ ตัวอย่างพร้อมคำอธิบาย <script src=”jquery.js”></script> <script src=”other_library.js”></script> <script> //เรียกใช้ jQuery ฟังก์ชั่นแบบเต็ม jQuery(document).ready(function(){ jQuery(“div”).hide(); }); // เรียกใช้ตัวแปร $ ที่ระบุไว้ใน other_library.js window.onload = function() { var mainDiv = $(‘main’); }; </script> สำหรับบทความนี้ก็ขอจบเพียงเท่านี้ หวังว่าต่อไปนี้ท่านผู้อ่านที่ใช้งาน jQuery ร่วมกับสคริปต์อื่นๆ คงจะไม่มีปัญหาสคริปต์ทำงานผิดเพี้ยนหรือสคริปต์ทำงานไม่ครบอีกแล้วนะคะ แหล่งอ้างอิง : http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/