Blockchain | Defi | Full Stack Developer

บทความ

กำลังแสดงโพสต์ที่มีป้ายกำกับ HTML and Java Script

JSP Comment JSTL แบบที่ไม่ให้ทำงานตอน View Source

ปรกติเวลาเรา Comment HTML เราก็จะ Comment ประมาณนี้ครับ  ซึ่งวิธีแบบนี้จริงๆก็สามารถทำงานได้แต่ว่ามันเป็นแค่การ Comment ไม่ให้แสดงผลใน HTML แต่ใน JSTL ยังคงทำงานอยู่นะ แล้วผลตอนที่เรา View Source ดูก็จะได้ประมาณนี้  มันไม่แสดงผลใน Output ก็จริงแต่ใน HTML ยังคงเห็นอยู่นั่นแสดงว่า JSTL เบื้องหลังยังคงทำงานครับ หากเราต้องการ Comment แบบไม่ให้ทำงานเลยให้ใช้คำสั่งนี้  แบบนี้ตอนที่ View Source ดูจะไม่เห็น Tag นี้แสดงใน HTML เลยครับ

อ่านเพิ่มเติม

วิธีแก้ปัญหา PHP substr utf8

กุมภาพันธ์ 13, 2563

เคยเจอปัญหาเมื่อใช้คำสั่ง PHP substr กัย text ที่เป็น utf8 พบว่านับตำแหน่งผิดตามตัวอย่างเช่น $new_str=substr($new_str,0,50); พบปัญหาว่าไม่สามารถตัดได้ที่ตำแหน่ง 0 ถึง 50 จริง แถมด้านหลังบางทีจะกลายเป็นต่างดาวอ่านไม่ออก แนวทางแก้คือเปลี่ยนมาใช้คำสั่ง mb_substr แล้วกำหนด encode utf8 เข้าไป ตามตัวอย่างด้านล่างครับ $new_str=mb_substr($new_str,0,50,"utf8"); ลองแล้วสามารถ substr ได้ตรงและผลออกมาได้ถูกต้อง

อ่านเพิ่มเติม

Javascript วิธีเช็ค history ว่าสามารถย้อนกลับได้หรือไม่

มกราคม 14, 2563

บ่อยครั้งเราก็มักจะทำปุ่ม Back บนหน้า web page แล้วให้ถอยกลับ 1 step เช่น ตามตัวอย่างนี้ Step แรก อยู่ที่ pageA.html Step สอง กด Link มาที่ pageB.html เราทำปุ่ม Back ไว้เพื่อให้ User สามารถกดถอยกลับไปที่ PageA.html ได้ โดยการใส่ javascript ด้วยคำสั่ง history.go(-1) ไว้ จะทำให้เราสามารถทำงานได้ แต่ .... ถ้า step มันไม่เป็นตามนี้ล่ะ เช่น ถ้า User เข้ามาที่ pageB.html ตรงๆ มันจะมผลทำให้ปุ่ม Back ของเราทำงานไม่ได้ เพราะว่ามันไม่มีอะไรให้ back แล้วนั่นเอง แนวทางในการเช็คก็ง่ายๆ ตามนี้เลยครับ ใช้คำสั่ง Javascript ในการตรวจสอบ document.referrer ตามตัวอย่างด้านล่างนี้เลย <script> function goBack(){ if (document.referrer == "") { window.location.href = "home.html"; } else { history.go(-1); } } </script> ประมาณนี้ ครับแบบนี้คือถ้าไม่มีอะไรให้ Back ก็ให้กลับหน้าแรกไปเลย หรือจะใช้ Script เดียวกันนี้ในการซ่อนปุ่ม Back ก็ได้นะครับแล้วแต่จะประยุกต์ใช้ได้เลย ...

อ่านเพิ่มเติม

เริ่มต้นปี 2020 ด้วยการแนะนำ UI Framework อย่าง Semantic UI ให้ลองใช้กัน

มกราคม 07, 2563

ก่อนอื่นขอสวัสดีปีใหม่ 2020 เพื่อนๆทุกคนนะครับ วันนี้ได้ลองหา UI Framework เจ๋งๆ หลายๆตัวมาเปรียบเทียบแล้วรู้สึกว่าเจออยู่ 1 ตัว มีความน่าสนใจอยากให้เพื่อนๆ ลองใช้กันดูนั่นก็คือ Semantic UI ระบบต่างๆ มีครบตามต้นแบบ Bootstrap แต่มีการนำปรับปรุงให้ใช้งานได้ง่ายขึ้นไม่ว่าจะเป็น ระบบ Grid และที่ผมชอบมากๆคือ ระบบ Card ที่ทำออกมาได้เป็นอย่างดี Responsive ได้เนียนมากๆ ยังไงก็ลอง download มาลองเล่นกันได้เลยนะครับตาม URL ด้านล่างนี้เลย URL : https://semantic-ui.com/

อ่านเพิ่มเติม

Grid Bootstrap ทำความเข้าใจระบบ Grid ของ Bootstrap แบบเข้าใจง่าย

ธันวาคม 18, 2562

ก่อนอื่นให้เข้าใจก่อนครับว่าระบบ Grid ของ Bootstrap จะแบ่งเป็น 12 ช่อง มาเข้าใจระบบแบ่งช่องกันก่อนนะ CSS ของ Bootstrap จะให้เรากำหนดจำนวนช่องได้ด้วยคำสั่งนี้ col-sm-4 โดย sm หมายถึงขนาดหน้าจอ และเลข 4 คือสัดส่วน 4 จาก 12 ... งงมะ ให้จำแบบนี้ละกัน ถ้าอยากให้ถ้าเราอยากให้แสดงกี่ช่องให้เอา 12 ตั้งแล้วหารด้วย ตัวเลขนั้น เช่น อยากให้แสดง 1 ช่อง : col-sm-12 (12 หาร 12 =1) อยากให้แสดง 2 ช่อง : col-sm-6 อยากให้แสดง 3 ช่อง : col-sm-4 ต่อมามาเข้าใจเรื่องของการกำหนดขนาดหน้าจอ โดย Bootstrap จะกำหนดขนาดไว้ทั้งหมด 4 Size ตามรูปด้านล่าง ตาม Concept การทำเว็บแบบ Responsive เรามักจะต้องกำหนดจำนวนช่องการแสดงผลของแต่ละหนาดหน้าจอแตกต่างกันเช่น PC ก็หลายช่องหน่อย รองลงมาก็ Notebook , Tablet และก็ Mobile ว่าแล้วเรามาลองกำหนดขนาดของ Grid ตามนี้ดู col-xs-6 หน้าจอมือถือเล็กสุด จะให้แสดง 2 ช่อง col-sm-4 หน้าจอ Tablet จะให้แสดง 3 ช่อง ...

อ่านเพิ่มเติม

เพิ่มความเร็วการ load page ด้วย Preload key request

ธันวาคม 13, 2562

การ load resource ต่างๆ เช่น javascript หรือ css ใน web page ปัจจุบันถือว่าเป็นเรื่องที่หลีกเลี่ยงไม่ได้ บาง page load กันที หลายสิบ ไฟล์ เลยทีเดียว หากเราไม่ทำอะไรเลย จะเจอว่าเป็นการทำงานแบบต่อเนื่องกัน มีผลทำให้ page load ช้ามาก จะดีกว่ามั้ยถ้าทุกไฟล์โหลดพร้อมๆ กันไปเลย ด้วยเทคนิคการใช้ Preload key request ตามตัวอย่างนี้เลย <head> ... <link rel="preload" href="styles.css" as="style"> <link rel="preload" href="ui.js" as="script"> ... </head> ลองใส่ tag rel="preload" เข้าไปแล้วลองวัน performance ดูได้ที่ URL นี้เลย https://developers.google.com/speed/

อ่านเพิ่มเติม

HTML Textarea ขึ้นบรรทัดใหม่ แบบบังคับเองไม่ใช้ตัดคำ

ธันวาคม 01, 2559

บทความเกี่ยวกับ : HTML Textarea ขึ้นบรรทัดใหม่ แบบบังคับเองไม่ใช้ตัดคำ การขึ้นบรรทัดใหม่ใน Textarea จะไม่ใช้ <BR> เหมือนใน HTML ปรกติ เนื่องจากว่าข้อความที่อยู่ใน input Textarea จะเป็นแค่ text ธรรมดา กรณีนี้ แนะนำให้ใช้ \r\n ครับ เช่น ทดสอบ ทดสอบ \r\n ทดสอบ ผลที่ได้คือ ทดสอบ ทดสอบ ทดสอบ

อ่านเพิ่มเติม

Angular JS Number format โดยใช้ Filter

พฤศจิกายน 29, 2559

บทความเกี่ยวกับ : Angular JS Number format โดยใช้ Filter ตัวอย่าง Format Number ด้วย Angular JS โดยใช้ Filter ครับ {{1234.56789 | number}} 1,234.568 {{1234.56789 | number:0}} 1,235 {{1234.56789 | number:2}} 1,234.57 Filter ที่ใช้ใน Angular JS มีอยู่หลายอย่างเหมือนกันนะ ถ้าอยากรู้เพิ่มเติมลองหาข้อมูลดูได้

อ่านเพิ่มเติม

ตัวอย่าง Java Script Submit แบบไม่ต้อง Reload อย่างง่าย

ธันวาคม 07, 2555

บทความเกี่ยวกับ : ตัวอย่าง Java Script Submit แบบไม่ต้อง Reload อย่างง่าย วิธีเขียน Script Submit แบบไม่ต้อง Reload page อย่างง่าย โดยใช้ Frame เข้ามาช่วยครับ วิธีการมีอยู่ 2 ขึ้นตอนคือ 1. สร้าง Frame แล้วซ่อนไว้เช่น <iframe name="pframe" id="pframe" src="" style="display-none"></iframe> 2. เวลา Submit form ให้ Submit ลง Frame โดยการ Set target ไปที่ frame ID เช่น document.myform.action="child.php"; document.myform.target="pframe"; document.myform.submit(); หรือจะใส่ไว้ที่ TAG Form เลยก็ได้เช่น <form name="myform" action="child.php" target="pframe"> เพียงเท่านี้เวลาที่ Submit form หน้าจอหลักจะไม่กระดิกเลยครับการทำงาน จะส่งไปที่ form ตามที่เรา action ไปคือหน้า child.php 3. หากต้องการจะให้มี message อะไรที่หน้าหลัก ก็สามารถให้หน้า child.php เรียกใช้ Javascript ที่หน้า แม่ได้ด้วยคำสั่ง window.parent.xxxx เช่น ที่หน้าหลักเรามี function test() ...

อ่านเพิ่มเติม

วิธี Get Value จาก Raido Button ด้วย Java Script

กรกฎาคม 16, 2555

วิธี Get Value จาก Raido Button ด้วย Java Script คำถามเกี่ยวกับ :วิธี Get Value จาก Raido Button ด้วย Java Script Input box ที่เป็น radio button นั้นจะถูกมองเป็น Array ใน JavScript ทำให้เราไม่สามารถ Get Value ได้ง่ายๆ เหมือน input ตัวอื่น ที่เพียงแค่ ใช้คำสั่ง vInput.value Radio Button จะต้องใช้ วิธี วน Loop Array แล้วดูว่า Radio ตัวใหนที่ ถูก Checked ไว้ค่อย Get Value ออกมา ตามตัวอย่าง ตัวอย่างการ Get Value จาก Radio Button <script> function testRadio(){ radio_val= getRadioValue(document.myform.my_radio_input); alert(val); } function getRadioValue(radioObj) { for(var i = 0; i < radioObj.length; i++) { if(radioObj[i].checked) { ...

อ่านเพิ่มเติม

วิธี Submit form แล้วให้ เปิด หน้าต่างใหม่ New Pop Up

กรกฎาคม 16, 2555

คำถามเกี่ยวกับ :วิธี Submit form แล้วให้ เปิด หน้าต่างใหม่ New Pop Up วิธี Submit form แล้วให้ เปิด หน้าต่างใหม่ด้วย Java Script ครับ บ่อยครั้งที่เรา จะ Open Pop up window มักจะใช้ Link แล้วแปะ Parameter ไป แต่ถ้าเกิดว่าเรามีค่าใน form เยอะๆ มานั่งแปะก็คงไม่ไหวครับ วันนี้จะแนะนำวิธีการ Submit form ที่เป็น method="post" แล้วให้ หน้าที่เรา Action ไป Open popup ใหม่ครับ ตามตัวอย่างนี้เลย ก่อนอื่นเขียน Function javascript ตามนี้ <SCRIPT TYPE="text/javascript">  </SCRIPT> ส่วนของ HTML Form ก็เรียกใช้ง่ายๆ แค่นี้ครับ <FORM METHOD=POST ACTION="test.html" onSubmit="submitpopup(this)"> ลองไปใช้กันดูครับผม

อ่านเพิ่มเติม

ตัวอย่าง Java List Value จาก Select Box

กรกฎาคม 11, 2555

คำถามเกี่ยวกับ :ตัวอย่าง Java List Value จาก Select Box โพสก่อนหน้านี้ กล่าวถึงเรื่องการกำหนดความกว้างให้กับ Select Box มาโพสนี้ขอกล่าวต่อเกี่ยวกับเรื่องการ List ค่าใน Select Box ด้วย Request ใน Java เราอาจคุ้นเคยการใช้งาน request.getParameter("p_name") เพื่อรับค่าที่ส่งผ่านจาก form มาให้ ตามชื่อ input box ที่ตั้งไว้ แต่ถ้าเกิดว่าเราอยากจะ List ทุกค่าที่อยู่ใน Select Box ล่ะ จะทำยังไง ยกตัวอย่างเรามี Select Box อยู่ประมาณนี้ Option 1 Option 2 Option 3 Option 4 Option 5 ตาม Code HTML <select multiple="multiple" name="select1" size="5"> <option>Option 1</option> <option>Option 2</option> ...

อ่านเพิ่มเติม

Select Box Width วิธีกำหนดความกว้างให้ Select Box

กรกฎาคม 11, 2555

คำถามเกี่ยวกับ :Select Box Width วิธีกำหนดความกว้างให้ Select Box พอดีมีน้องคนนึงมีปัญหาว่า Select box มันกว้างยาวตาม Data มันจะกว้างตาม Data ที่กว้างที่สุดในนั้น แล้วถ้าเกิดว่าเราไม่อยากให้เป็นอย่างงั้น จะทำยังไง แบบว่าอยากจะกำหนดความกว้างได้เอง ตอนแรกผมก็ตอบไปแบบไม่คิดอะไร ก็ใส่ tab Width เข้าไปสิ เช่น <select width="10"> อะไรทำนองนี้น่ะ แต่ผลปรากฏว่าทำแล้วไม่มีผลอะไรแฮะ เรื่องที่คิดว่า่ง่ายๆ กลายเป็นไม่ง่ายซะแล้ว นั่งเทียนซักพักก็รู้ว่าถ้าเราจะ กำหนด ความกว้างให้ Select Box ต้องใช้ CSS เท่านั้น T_T ง่ายๆ ก็ตามนี้เลย <SELECT NAME="select1" SIZE="5" MULTIPLE style="width: 200px"> ต้องทำประมาณนี้แหละครับ หรือจะกำหนด CSS ไว้ก่อนก็ได้เช่น <style type="text/css"> .box { width: 200px; height: 200px;} </style> แล้วก็ค่อยเรียกใช้แบบนี้ก็ได้ผลเหมือนกัน <SELECT NAME="select1" SIZE="5" MULTIPLE class="box"> อืมห์นะจะว่าไปไม่บอกก็ไม่รู้เหมือนกันนะเนี่ย ...

อ่านเพิ่มเติม