javascript – iT Blog

แฮนด์ออนเทเบิล (Handsontable)

Handsontable คือ เครื่องมือที่พัฒนาด้วย Javascript ที่ทำงานฝั่งไคลเอนต์ (Client) มีหน้าที่แสดงรายการข้อมูลในรูปของตาราง หรือกระดาษทำการ (Spreadsheet) ที่แสดงผลคล้ายกับ MS Excel ซึ่งนำมาพัฒนาต่อยอดได้ง่าย รองรับการประมวลผลที่ยืดหยุ่น ใช้ข้อมูลรูปแบบ JSON เข้ากันได้กับเฟรมเวิร์ก (Framework) ที่เป็นที่นิยม เช่น Angular, Vue และ React เป็นต้น

พบว่า ถูกนำมาใช้โดย ศูนย์กลางข้อมูลเปิดภาครัฐ (Open Government Data) ภายใต้ชื่อ “data.go.th” เพื่อพรีวิวข้อมูล สำหรับข้อมูลส่วนที่สามารถแสดงได้กลุ่มหนึ่งจากข้อมูลที่มีทั้งหมด 5,843 ชุดข้อมูล (10 เมษายน 2565) สำหรับการใช้งานข้อมูล สามารถศึกษาเพิ่มเติมได้จาก คู่มือการใช้งานระบบศูนย์กลางข้อมูลเปิดภาครัฐ ที่เตรียมเอกสารโดย Witwisit Kesornsit ตั้งแต่รุ่น 0.1 เมื่อ 24 มกราคม 2563 โดย คู่มือฉบับล่าสุด รุ่น 3 เผยแพร่ ธันวาคม 2564 ของ สถาบันนวัตกรรมและธรรมาภิบาลข้อมูล มีข้อมูล preview ในหน้า 13 ที่อธิบายว่า “ระบบจะแสดงการ preview ชุดข้อมูลในแบบตาราง data explorer อย่างอัตโนมัติ” ซึ่งตารางที่ปรากฎในรูป คือ ผลของการใช้ Handsontable นั่นเอง

http://www.thaiall.com/json/

http://www.thaiall.com/jslibrary/

โครงการห้องเรียนที่ดี (Good Classroom) : 50 คลิปวิดีโอ
https://www.thaiall.com/education/indexo.html

เพื่อนสายเดฟส่งคำถามมา

ผมมีเพื่อนสายเดฟ ที่เราทำงานคล้ายกันมาก วันหนึ่งเค้าส่งคำถามเข้ามาทางไลน์ เรื่อง java script และ ebook มีความเป็นมา คือ ต้องการสร้างแคตตาล็อกสินค้า ที่คลิ๊กเลือกสินค้าในแคตตาล็อกได้ พบว่า การทำงานใน desktop ส่งข้อมูลได้ปกติ แต่เมื่อใช้งานใน mobile กลับไม่ตอบสนอง สรุปคือ บน mobile ไม่มีการส่งข้อมูลออกไป ให้กับ server-sided script เพื่อนำไปประมวลผลต่อ

ปัญหา คือ คลิ๊กรายการแล้ว
แต่ไม่มีการตอบสนองจากภายในแคตตาล็อก
เข้าไปตรวจ java script พบว่า
ถ้าไม่เรียกใช้ e.preventDefault(); และ e.stopPropagation();
ก็จะทำงานบน Mobile ได้เหมือนกับทำงานบน Desktop
ไม่มีการปิดการทำงานของ mouse click แต่อย่างใด
ที่เล่ามานี้กำลังพูดถึง ipages flipbook
ที่มีรุ่นทำงานบน WordPress และ JQuery Plugin
ซึ่งนำโค้ดไปใช้งาน
บน http://www.thaiall.com/e-book/

ทดสอบ code กับหนังสือหลายเล่ม ทั้งของเพื่อนที่ฝากแก้โค้ด ของ Peter rabbit แต่งโดย Beatrix Potter ที่เป็น demo ของผู้พัฒนาโค้ด แล้วมาจบที่ eduzones magazine ฉบับพิเศษ (special issue) เล่มนี้มี 32 หน้า ผมเคย scan ไว้นานแล้ว ความละเอียดประมาณ 900px * 1200px ซึ่งไม่ใหญ่ และไม่เล็กเกินไป พออ่านออก พบว่า code ทำงานได้รวดเร็ว ต่างกับ flash version ที่เคยเป็นระบบเดิมของ ebook ที่เคยทำไว้เมื่อสิบกว่าปีที่แล้ว แต่ก็ต้องลมไปทั้งระบบ และ code ชุดนี้ถือว่าน่าสนใจ เพราะสามารถทำงานร่วมกับโค้ดภายนอกได้โดยง่าย และ code ก็เป็น open source ที่อ่านง่าย ไม่ยาวเกินไป

ข้อมูล magazine.eduzones.com ใน archive.org

Eduzones Magazine สุดยอดหนังสือด้านการศึกษา

ศูนย์ข่าวการศึกษาแห่งอนาคต ฟรีนิวส์

No photo description available. — https://web.facebook.com/photo/?fbid=124207014280050&set=gm.326011160769343

ตัวอย่าง CSS ใน HTML (Joom.htm)

CSS (Cascading Style Sheets) คือ ภาษาคอมพิวเตอร์สำหรับกำหนดรูปแบบในเอกสาร HTML หรือเรียกว่า สไตล์ชีต ที่ใช้กำหนดรูปแบบ (Layout) สีอักษร สีพื้น ตัวอักษร การจัดวาง ระยะห่าง เส้นขอบ เป็นต้น มีรูปแบบ Syntax เฉพาะตัว ได้รับการกำหนดมาตรฐานโดย W3C การใช้ CSS มี 3 แบบ คือ Inline, Internal และ External CSS

เรื่อง CSS : Cascading Style Sheets กลายเป็นข้อควรรู้ที่จำเป็นสำหรับนักพัฒนาเว็บไซต์อย่างหลีกเลี่ยงไม่ได้ ปัจจุบัน CSS มีถึงรุ่น 3 แล้ว ในการใช้งานจริงมักสร้าง CSS แบบ External style sheet เพราะแฟ้มอื่นเรียกใช้ได้ ส่วน Internal style sheet ก็จะเรียกใช้ได้เฉพาะในแฟ้มนั้น ส่วน Inline style ก็จะพิมพ์คำว่า style ต่อท้าย tag นั้นไปเลย ซึ่งตัวแปรหลัก 2 แบบที่กำหนดเองใน CSS มี 2 แบบคือ id กับ class
การกำหนด และการเรียกใช้ต่างกันไป ถ้าเป็น id จะขึ้นต้นด้วย # แต่เป็น class จะขึ้นต้นด้วย . ถ้าเรียกใช้ id จะใช้ properties name ว่า id ส่วนเรียกใช้ class จะใช้ properties name ว่า class

สิ่งที่แตกต่างกัน คือ id จะเรียกใช้ครั้งเดียว แต่ class เรียกใช้ได้หลายครั้ง ถ้าวางแผนอย่างใจเย็นก็จะใช้ประโยชน์จาก css ได้อย่างเต็มที่ มีตัวอย่างที่ css_sample.htm และ การทำเมนู Responsive แบบ Top Nav หากจะทดสอบการปรับแต่ง css ทำได้ที่ w3schools.com

CSS คือ ภาษาคอมพิวเตอร์สำหรับกำหนดรูปแบบในเอกสาร HTML เรียกว่า สไตล์ชีต ที่ใช้กำหนดรูปแบบ สีอักษร สีพื้น ตัวอักษร การจัดวาง ระยะห่าง เส้นขอบ เป็นต้น มีรูปแบบ Syntax เฉพาะตัว ได้รับการกำหนดมาตรฐานโดย W3C การใช้ CSS มี 3 แบบ คือ Inline, Internal และ External CS จากตัวอย่างในรหัสต้นฉบับ แฟ้ม joom.htm ที่เป็นอัลบั้มแบบ static ถูกทำเครื่องหมายไว้ 6 จุด เพื่อใช้ชี้ให้เห็นในสิ่งที่น่าสนใจ ดังนี้ 1) แฟ้มเก็บ css ที่เก็บไว้ภายนอก แต่อยู่ในเครื่องบริการของตนเอง ทำให้เว็บเพจอื่นโหลดไปใช้ได้ นำเข้าได้ด้วย link tag 2) เขียน css ไว้ในเว็บเพจ และเรียกใช้ได้เฉพาะในเว็บเพจนั้น เขียนอยู่ใน style tag 3) ใน style tag สามารถกำหนด ขนาด media สำหรับเรียกใช้ css แต่ละชุดได้ เช่น mobile, desktop, notebook ก็จะแสดงผลแตกต่างกันไปตามขนาดหน้าจอ 4) มี css ที่ถูกพัฒนาให้ใช้ร่วมกับ Pure Javascript ที่ทำให้แสดงผลบนเว็บเพจแบบ dynamic และถูกใช้อย่างแพร่หลาย สามารถเรียกใช้ผ่านเครื่องบริการ CDN (Content Delivery Network) ได้ฟรี 5) การประกาศ css แบบ in-line ทำให้มีผลทันทีใน tag นั้น เช่น ประกาศบน div ใด ก็จะมีผลเฉพาะใน div นั้น หากอยู่นอกเหนือขอบเขต ก็จะไม่มีผล การประกาศใช้ที่จุดใด จึงต้องคำนึงถึงขอบเขตของการนำไปใช้ 6) การประกาศ css มักอยู่ในรูปของ class แล้ว tag ต่าง ๆ สามารถเรียกใช้ class ได้ และยังเรียกใช้หลาย class พร้อมกันได้ ซึ่งการตรวจสอบค่า css ในระหว่างแสดงผลบน browser เช่น chrome สามารถกด F12 แล้วใช้ Developer Tools เข้าไปตรวจสอบ หรือทดสอบแก้ไข แล้วการแสดงผลจะเปลี่ยนไปทันที ทำให้กลับไปแก้ไขโค้ดทำได้ง่ายขึ้น

https://www.thaiall.com/java/indexo.html

#เล่าสู่กันฟัง 63-040 แฟ้มข้อมูลเอ็กเอ็มแอลเป็นมาตรฐานมานานแล้ว

มีโอกาสเห็นข้อมูลที่ภาครัฐเผยแพร่
ทำให้นึกถึงเรื่องราว และโค้ดที่ใช้อ่าน
แฟ้มข้อมูลแบบเอ็กเอ็มแอล (xml)

พบว่า code ใช้ php5 เมื่ออัพเกรดเครื่องเป็น php7
พบ code ใช้ไม่ได้เยอะ
จึงกลับไปทบทวนเว็บเพจที่เล่าเรื่อง xml
พร้อมกับปรับแก้ code ให้กลับมาทำงานได้อีก

ประเด็นหนึ่ง คือ ie ที่เคยใช้งาน js
เปิด xml ได้ เมื่อมีการลด secure เป็น low แต่ ie รุ่นใหม่
กำหนดให้ปรับ secure ต่ำสุด คือ medium
บางคำสั่งเคยใช้ได้ในอดีต
แต่ปัจจุบันใช้ไม่ได้แล้ว

http://www.thaiall.com/xml
http://www.data.go.th

ใช้ bootstrap ทำเมนูไว้ใช้งาน

Bootstrap อาจแปลว่า สิ่งที่ช่วยทำให้ง่ายขึ้น หรือ สิ่งที่ทำได้ด้วยตัวเอง

Bootstrap คือ Front-end Framework ที่ช่วยพัฒนาเว็บไซต์ได้เร็วขึ้น ง่ายขึ้น
ซึ่ง Bootstrap มีเครื่องมือหลักให้ 4 อย่าง คือ
1) Scaffolding หรือ Grid system ช่วยจัด column และ row บน screen เพื่อจัด Layouts
2) Base CSS ช่วยจัด form, table, icons หรือ buttons
3) Components ช่วยจัด Navbar หรือ Pagination หรือ Progress bars หรือ Media object
4) JavaScript ช่วยจัด Dropdown, Tab, Popover, Collapse, Carousel

มีตัวอย่างการเรียกใช้ที่ http://www.thaiall.com/web2

เมนูคอมพิวเตอร์ ก็คล้ายกับเมนูอาหาร มีตัวเลือกมากมายให้เลือกสั่ง ต้ม ผัด แกง ทอด ไอศครีม เมนูคอมพิวเตอร์ที่คุ้นตาก็จะมี file, edit, view, help เป็นต้น นักพัฒนา (Developer) จะเลือกเครื่องมือจัดเมนูให้ผู้ใช้ (User) เข้าถึงบริการต่าง ๆ ที่พัฒนาขึ้น ต่อไปเป็นตัวอย่างการทดสอบ menu ทั้ง 6 แบบ ที่ใช้ bootstrap กับ Java script ข้างนอก และเขียนเอง
ซึ่งแชร์ source code 6 แบบ

ขั้นตอนการทดสอบ ให้เห็นภาพเมนู มีดังนี้
1. download clone (repository)
จาก ใน https://github.com/thaiall/programming-page
ได้แฟ้ม programming-page-master.zip
เมื่อวันที่ 28 กันยายน 2560 มีขนาด 4,713,347 bytes

2. start โปรแกรม apache ใน xampp

3. unzip แฟ้มในข้อแรก
ได้ห้อง programming-page-master
แล้วย้าย folder นี้ไปไว้ใน c:\xampp\htdocs

4. เปิด menu แบบที่ 1
ด้วย http://localhost/programming-page-master/php/menu01.php
จนถึง menu06.php
ซึ่งทั้ง 6 แบบทำงานแบบ client-sided script

https://gist.github.com/thaiall/8e2a113c7cde54d4e18c217ba3dd8dae

5. พบว่า menu01.php – menu03.php ใช้ bootstrap

6. พบว่า menu04.php ใช้ javascript ของ DHTML Menu version 3.3.19

7. พบว่า menu05.php ใช้ jqueryui.com

8. พบว่า menu06.php เขียน javascript และ css ใช้เอง

มีหน้าตาของ Menu ทั้ง 6 แบบ ดังนี้

พบว่า MS Edge มี Bug เกี่ยวกับการ xml + xslt + javascript แล้ว return null

พบการรายงาน Bug เรื่อง ใช้ javascript และ XSLTProcessor
ที่ MS Edge ไม่ Return value กลับมาอย่างถูกต้อง
ที่พบ คือ “Created fragment is null” จากการ run test
โพสต์ปํญหาโดย Martin Honnen เมื่อ 18 พฤศจิกายน 2558
ที่ https://connect.microsoft.com/IE/feedback/details/2030537
แล้ว MS ก็ย้าย Bug Report ไปยังกลุ่มที่ถูกต้อง
ที่ https://developer.microsoft.com/../issues/5552211/
มีตัวอย่างแฟ้มที่ https://developer.microsoft.com/../issues/9484576/
ทดสอบที่ http://encinematheque.fr/js7/_testHtml.htm
ดูผลการทดสอบใน _testHtml.htm
พบว่า

Test failed. Created fragment is: null.

แล้ว Microsoft Edge ที่ผมใช้อยู่รุ่น 38.14393.1066.0
แต่รุ่นล่าสุดคือ 40.15063 Desktop April 11,2017
ไปอ่าน ถาม-ตอบ ในเว็บของ Microsoft.com
เค้าว่าถ้า update MS Windows ก็จะ update MS Edge ให้โดยอัตโนมัติ
ก็รอลุ้นว่ารุ่นใหม่จะแก้ bug ตัวนี้หรือไม่ เพราะ browser ตัวอื่นผ่านหมด
https://en.wikipedia.org/wiki/Microsoft_Edge

สรุปว่าตอนนี้ เขียน Script ไว้ที่ http://www.thaiall.com/xml/list01.htm
เพื่ออ่านแฟ้ม XML ส่งเข้าปรับรูปแบบด้วย XSLT แล้วแสดงผลเป็น HTML
ได้ทดสอบกับ Firefox, IE, Opera, Chrome ก็ใช้งานได้แล้ว
ก็ใช้หลายวิธี ให้เหมาะสมกับแต่ละ Browser
เหลือแต่ MS Edge นี่หละครับ ค้างใจอยู่

Unobtrusive Javascript เป็นพื้นฐานการออกแบบเว็บไซต์ยุคใหม่

Unobtrusive Javascript คือ หลักการที่จะแยก javascript ออกไปจาก html
เพื่อให้การพัฒนา Responsive web design ง่าย
สอดคล้องกับการแยก style ออกจาก html ไปไว้ใน CSS
ยุคต่อไปของการพัฒนาเว็บไซต์จะเป็น responsive web design
การแยก html ออกจาก script และ css เป็นหลักการพื้นฐานก่อนเริ่มออกแบบ
โดยยึดว่า basic design มองไม่ที่ mobile device ก่อน
คือการมองจาก screen ที่มีข้อจำกัดที่สุดก่อน
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
Unobtrusive JavaScript
http://www.siamhtml.com/%E0%B8%AA%E0%B8%AD%E0%B8%99%E0%B8%82%E0%B8%B1%E0%B9%89%E0%B8%99%E0%B8%95%E0%B8%AD%E0%B8%99-%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%97%E0%B8%B3-responsive-web-design/
http://8columns.com/articles/50009/1387278156096
http://web.stoms.co.th/2013/10/15/responsive-web-design/
—
ตัวอย่างแฟ้ม x1.htm
เขียน html แบบฝัง javascript ลงไปใน html tag
<body>
<input type=”text” name=”s1″ onchange=”window.status=’hello’;return true;” />
</body>
—
ตัวอย่างแฟ้ม x2.htm
เขียน html แบบเรียกใช้ javascript จาก html tag ซึ่งผูกเชื่อมกันชัดเจน
<head>
<script>
function s2(){ window.status = “hello”; }
</script>
</head>
<body>
<input type=”text” name=”s2″ onchange=”s2()” />
</body>
—
ตัวอย่างแฟ้ม x3.htm
เขียน html กับ javascript แยกกันเด็ดขาด แต่ฝากไว้ในแฟ้ม html เท่านั้น
<head>
<script>
window.onload = function() {
document.getElementById(“s3”).onchange = s3;
function s3(){ window.status = “hello”; }
}
</script>
</head>
<body bgcolor=yellow>
<input type=”text” name=”s3″ id=”s3″ />
</body>
—
ตัวอย่างแฟ้ม x4.htm
ทั้ง html กับ javascript และ css ต่างคนต่างอยู่ ใช้ include เข้ามา
<head>
<link href=”x.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”x.js”></script>
</head>
<body>
<input type=”text” name=”s41″ id=”s41″ />
<input type=”text” id=”s42″ />
</body>
—
ตัวอย่างแฟ้ม x.js
window.onload = function() {
var s41 = document.getElementById(“s41”);
s41.onchange = function() {
window.status = “hello”;
};
document.getElementById(“s42”).onclick = s42;
function s42(){ alert(“hello”); }
};
—
ตัวอย่างแฟ้ม x.css
body {
background-color: #ffff00;
}

ระบบช่วย sign on ชั้นที่ 2 หลังผ่านชั้นแรก

28 มี.ค.55 มีเพื่อนในทีมพัฒนาระบบตรวจสอบสมาชิก หรือยืนยันตัวตน ขึ้นอีกระบบหนึ่ง ซึ่งใช้ user และ password ต่างไปจากชุดเดิม เป็นแบบกำหนดเฉพาะบางคนที่มีสิทธิ หากผ่านการตรวจสอบจากระบบแรก ผมจึงเขียน script ด้วย php ตรวจว่ามีค่า session ส่งมาจากระบบแรกหรือไม่ ถ้ามีและอยู่ในรายการที่กำหนด ก็จะส่งรหัสให้กับฟอร์ม เพื่อให้ผู้ใช้คลิ๊กเข้าระบบที่สอง ซึ่งระบบที่สองตรวจสอบผู้ใช้ผ่าน post โดย javascript ถูกเขียนอย่างหลวม ๆ ให้สามารถปรับแต่งต่อได้
โดยต้นแบบมาจากระบบ submit search จาก http://www.thaiall.com/search.htm

<?
session_start();
$page = "http://www.hot.com/login.php";
$user = "your username"; 
$passwd = "your password";
$u = array("101","102");
$pass = 0;
foreach ($u as $v) {
  if (isset($_SESSION["id"]) && $_SESSION["id"] == $v) { $pass = 1;}
}
if ($pass == 0) {
foreach ($u as $v) { echo $v. "<br/>"; }
echo "<br/><a href='http://www.thaiall.com'>back</a>";
exit;
}
?>
<html><head><title>admin login</title></head>
<script language="JavaScript"> 
function newpage() {
page = "<?=$page;?>";
u = document.f.username.value;
p = document.f.passwd.value;
o = window.open('blank.htm','y',"toolbar=yes");
o.document.open();
o.document.write("<body><form name='y' action='" +  page + "' method='post'>");
o.document.write("<input name='u' value=''><input name='p' value=''></form>");
o.document.close();
o.document.y.u.value = u;
o.document.y.p.value = p;
o.document.y.submit();
} 
</script>
<body>
<form name="f">
<input type=button value="click to open in new page" onclick="newpage()">
<input type=hidden name=username value="<?=$user;?>">
<input type=hidden name=passwd value="<?=$passwd;?>">
</form>
</body></html>

dropdown list ที่ส่งผลต่อ dropdown list ชุดใหม่

12มี.ค.54 มีเพื่อนพัฒนาโปรแกรมเลือกข้อมูลผ่านเว็บเพจที่สามารถเลือกรายการข้อมูลที่เชื่อมกับระบบฐานข้อมูล ทำให้การเลือกครั้งแรกผ่าน dropdown list ส่งต่อกระบวนการไปแสดงรายการข้อมูลชุดใหม่ แล้วให้เลือกผ่าน dropdown list ชุดใหม่ ที่สัมพันธ์กับการเลือกครั้งแรก โปรแกรมนี้ทำงานได้มาโดยตลอด แล้วอยู่ ๆ ก็ใช้ไม่ได้ .. เป็นคำบอกเล่าของน้องนุช (จำได้ว่าเคยรับแจ้งไม่เป็นทางการมาก่อนหน้านี้ .. คราวนี้เจอตัวเป็น ๆ)
เมื่อผมตรวจสอบในรายละเอียดก็พบว่า Scriptไม่มีปัญหา เมื่อทำงานกับ IE6 แต่มีปัญหาเมื่อทำงานบน Firefox แสดงว่า Script ที่ใช้อยู่ไม่ compatible กับ browser รุ่นใหม่ ก็ต้องปรับ Script ให้ผู้ใช้สามารถใช้งานได้ เพราะทีมงานด้านซอฟท์แวร์จะลงโปรแกรมใหม่ให้กับผู้ใช้เสมอ หรือ Upgrade Web Browser เป็นรุ่นใหม่ ซึ่งเป็นเทคนิคการใช้คือ Ajax ทำงานร่วมกับ PHP .. ผมก็ใช้เวลาหาข้อมูลระยะหนึ่ง จำได้ Script สำหรับทำให้ Ajax ทำงานกับ Textbox ได้ แต่การจะทำงานกับ Dropdown list ต้องเปลี่ยน code ในส่วนที่สัมพันธ์กับ div ก็ใช้เวลากว่าจะเห็นความเหมือนที่แตกต่างของ Textbox กับ Div

แล้ววันนี้ก็เคลียร์ Script ชุดนี้ได้ เพราะมีแผนจะนำไปใช้ในอีกระบบหนึ่ง ซึ่งผู้ใหญ่ร้องขอมาว่าอยากให้เรียกข้อมูลจากฐานข้อมูลที่เป็นข้อมูลสถิติของแต่ละคน และข้อมูลนี้ไม่จำเป็นต้องกรอกใหม่ก็จะดึงมาเป็น Dropdown List ให้เลือก เพราะถ้าปล่อยให้กรอกเองก็จะคลาดเคลื่อน แต่ปัญหานี้ใช้ Dropdown List ที่ทำงานร่วมกับ Text Box มีรายละเอียดเพิ่มเติมที่ http://www.thaiall.com/ajax