ทองจุล ขันขาว

บทความ

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

การใช้งาน Javascript file ภายนอก ที่อยู่บน Google Drive

บางครั้ง เราต้องการแยก Javascript ออกเป็นไฟล์ภายนอก และในหลายกรณีที่ Web Host ไม่อนุญาตให้ Upload ไฟล์ไปไว้บน Server ทำให้ Google Drive กลายเป็นตัวเลือกสำคัญในการวางไฟล์ Javascript ขั้นตอนการนำไฟล์ *.js ไปไว้บน Google Drive และการเรียกใช้งาน เข้าไปที่ Google Drive และ Upload ไฟล์ สร้างและคัดลอก URL สำหรับแขร์ไฟล์ เลือกการแชร์แบบ สาธารณะ หรือ Public on the web นำ URL ไปแปลงเป็น Direct Link สำหรับ Google Drive โดยใช้ Direct Link Generator เช่น https://syncwithtech.blogspot.com/p/direct-download-link-generator.html หรือ https://sites.google.com/site/gdocs2direct/ นำ Direct Link ไปใช้ในไฟล์ Html เช่น <!DOCTYPE html> <head> <script type="text/javascript" src="https://drive.google.com/uc?export=download&id=1u13xlRD97baNrgrC0S6vHvRQTGrx5x7w"></script> </head> <html> <body> <h1>The onclick Event</h1> <p>The onclick event is used to trigger a function when an element is clic

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

การหา index ของ Element id ใน Object Array ด้วย getElementsByTagName()

- ธันวาคม 25, 2559

เรื่องมีอยู่ว่า ผมใช้ searchhi ของ Stuart Langridge เพื่อใช้ search และมีการ hilight สีเหลืองข้อความที่ค้นหา ปรากฏว่า เอามาใช้บน Blogger เรื่อง สุภาษิตสำนวนไทย ปรากฏว่า พอกดค้นคำปุ๋บ คำค้นหาถูกป้ายสีเหลืองเต็มหมดไปทั้งหน้า แต่จริง ๆ ที่ต้องการให้ค้นคือข้อความที่อยู่ในตารางเท่านั้น ข้อความที่พิมพ์ค้นหา แต่อยู่นอกตารางไม่ต้องไปยุ่งด้วย ตรวจดูโค้ด เห็นเขาใช้ getElementsByTagName('body')[0] คือให้ไปเอา element ที่เป็น body ดังนั้น ในหน้า Blogger ทั้งหมด จึงอยุ่ในบริเวณที่เขาจะทำการป้ายสีเหลืองให้ ดังนั้น จึงเหลืองทั้งหน้า ทุก Post ซึ่งไม่เป็นที่ต้องการ ข้อมูลที่จะให้ค้นหาของผม อยู่ในตาราง ที่ใช้ id ว่า myTable คือ <table id="myTable">ดังนั้น ผมจึงต้องระบุ tag name จาก body เป็น table แต่ปัญหาคือ แล้วเจ้า index [0] นั้น ตาราง id="myTable" ของผม จะเป็นเท่าไร เพราะ template ของ Blogger ก็คงจะมีอยู่หลายตารางเหมือนกัน ดังนั้น จึงต้องหา index และกำหนดให้ถูกคือ getElementsByTagName('table')[?] เจ้าเครื่องหมายคำถามนี้แหละ ต้องหาให้ได้

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

การส่งข้อมูล จาก jQuery ไปยัง PHP

- พฤษภาคม 16, 2557

jQuery เป็น Javascript Library ที่ช่วยให้การใช้งาน Javascript สะดวก รวดเร็วขึ้น เช่น ตัดปัญหาเรื่อง Browser ว่าจะใช้ได้หรือไม่ และอื่น ๆ อีกมากมาย และที่สำคัญ ในตัวอย่างนี้ จะเป็นการใช้ jQuery เพื่อส่งข้อมูลไปยัง PHP เพื่อเก็บลงฐานข้อมูลต่อไป แต่ในตัวอย่างนี้ จะเป็นการส่งข้อมูลไปยัง PHP และให้ PHP ส่งกลับมาที่ JQuery และแสดงผ่านหน้าจอ Popup ของ JQuery การใช้งานตามตัวอย่างนี้ จำเป็นที่ต้องทำเครื่องคอมให้เป็น Server หรือถ้าใครมี Server ที่ใช้งานได้ เช่นเดียวกัน โดยสร้างห้องบน Server และบันทึกไฟล์ต่าง ๆ ให้อยู่ในห้องเดียวกัน เพื่อความสะดวก จะได้ไม่ต้องอ้างอิงยืดยาว ในตัวอย่างนี้ ใช้ XAMPP เพื่อจำลองเครื่อง Notebook ให้เป็น Server ไฟล์ที่จะใช้งาน มี 3 ไฟล์ คือ index.html คือไฟล์หลัก ใช้เป็นแบบฟอร์มกรอกข้อมูล เพื่อส่งข้อมูลผ่าน jQuery ไปยัง PHP jquery-2.2.2.min.js คือไฟล์ jquery ที่ดาวน์โหลดมา เพื่อใช้งาน welcome.php คือไฟล์ PHP สำหรับรับข้อมูล และส่งกลับ ไฟล์ทั้งหมด อยู่ในห้องเดียวกันบน Server ก่อนอื่น ต้องไปดาวน์โหลด jQuery มาก่อน ที่ http://www.jquery.com การดาวน์โ

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

การใช้ javascript สร้างฟอร์มอัตโนมัติ แล้วส่งค่าไปยัง PHP

- มีนาคม 28, 2556

ถ้าต้องการคลิกปุ่ม แล้วให้เกิดฟอร์มรับค่าโดยอัตโนมัติ (on the fly) เพื่อส่งค่าไปยัง PHP จะทำอย่างไร หลักการ ใช้สร้างปุ่มที่มีลักษณะเป็น Button และเมื่อคลิกปุ่ม ให้ไปเรียกใช้งานฟังก์ชันที่ใช้ javascript สร้างแบบฟอร์ม และส่งข้อมูลไปยังไฟล์ PHP วิธีการ สร้างไฟล์ html ดังนี้ (ไฟล์ jsFormDemo.html) <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=tis-620"> <script language="javascript" type="text/javascript"> function displayForm(){ var d=document; var test_div = document.getElementById('pwdForm'); document.getElementById('pwdForm').innerHTML="รหัสเข้าใช้งาน"; var f = test_div.appendChild(d.createElement('form')); var i=d.createElement('input'); var i2=i.cloneNode(false); var br=d.createElement('br'); f.action='adminPage.php'; f.method='POST'; f.name='f'; i.type='text'; i.name='

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