จาวาสคริปต์ไลบรารี่ (JavaScript Library)

จาวาสคริปต์ไลบรารี่ (JavaScript Library)

จาวาสคริปต์ไลบรารี่ (JavaScript Library) คือ การรวมฟังก์ชันอำนวยความสะดวกที่สนับสนุนการพัฒนาเว็บเพจที่ใช้ HTML หรือ CSS ช่วยให้มีการทำงานแบบพลวัต (Dynamic) โดยฟังก์ชันเหล่านั้นถูกพัฒนาขึ้นด้วยจาวาสคริปต์ สามารถเรียกใช้โดยตรงผ่านออนไลน์ หรือดาวน์โหลดสคริปต์มาติดตั้งไว้ในเครื่องบริการ ซึ่งส่วนใหญ่เป็นโอเพนซอร์ส (Open source)

แนะนำสคริปต์

API (Application Programming Interface) คือ บริการการเชื่อมต่อจากระบบหนึ่งไปอีกระบบหนึ่ง เพื่อให้โปรแกรมจากภายนอกเข้าถึง หรือปรับปรุงข้อมูลได้ แต่อยู่ในการควบคุมที่ถูกกำหนด ซึ่ง API คือ ตัวกลางรอรับคำสั่ง ประมวลผล และดำเนินการแล้วส่งข้อมูลกลับโดยอัตโนมัติ
เช่น
Google chart api
Google map api
Youtube player api

ศูนย์กลางข้อมูลเปิดภาครัฐ
(Open Government Data)

Google Chart API

Google Chart API คือ เครื่องมือพื้นฐานที่อนุญาตให้เราสร้างชาร์ทสำหรับข้อมูล ที่นำไปแสดงในเว็บเพจ ที่เราสามารถใช้ข้อมูล กำหนดตัวแปรใน HTTP request แล้วกูเกิ้ลคืนภาพมาเป็นชาร์ท ซึ่งมีชาร์ทให้เลือกใช้หลายแบบ เช่น ชาร์ทแท่ง ชาร์ทวงกลม ชาร์ทเส้น ตาราง แผนผังองค์กร หน้าปัดเกจ ซึ่งบริการ API นี้ ไม่ต้องขอ API Key จากผู้ให้บริการ

ตัวอย่าง Bar1.htm คือ ชาร์ตแสดงข้อมูล ที่มีเรื่องราวเกี่ยวกับแรงจูงใจ (Motivation) โดย "มีความเชื่อว่าเช้ามา แรงจูงใจทำงานสูง และได้พักทางข้าว แรงจูงใจก็จะสูงเช่นกัน" โดยใช้ Bar chart แบบแนวตั้ง (Column) ซึ่งเรียกใช้บริการของ Chart API ของ Google.com แล้วกำหนดค่าให้กับ Chart ผ่าน Java script ในตัวโปรแกรม เป็นการทำงานแบบ Front-end ผ่าน Javascript มีการปรับแต่งเพิ่มเติมให้รับความกว้างและความยาว มีความยืดหยุ่นที่เปลี่ยนไปตามขนาดของจอภาพ มีตัวอย่างที่ใช้งาน คือ นำเสนออันดับมหาวิทยาลัย ปี 2020 ที่รองรับ Mobile friendly

Youtube Player API

Youtube Player API คือ เครื่องมือสั่งเล่นคลิปวิดีโอของยูทูปผ่าน Iframe player ที่ใช้แสดงในเว็บเพจ และสามารถควบคุมการแสดงผลได้ ซึ่งมีบริการ play, pause, stop หรือควบคุม event ได้ เช่น ควบคุมสีขอบของวิดีโอด้วยการตรวจสอบ playerState ซึ่งบริการ API นี้ ไม่ต้องขอ API Key จากผู้ให้บริการ
developers.google.com/../..api_reference

<iframe id="existing-iframe-example"
        width="360" height="240"
        src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
        frameborder="0"
        style="border: solid 4px #37474F"
></iframe>
<script type="text/javascript">
  var tag = document.createElement('script');
  tag.id = 'iframe-demo';
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('existing-iframe-example', {
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
    });
  }
  function onPlayerReady(event) {
    document.getElementById('existing-iframe-example').style.borderColor = '#FF6D00';
  }
  function changeBorderColor(playerStatus) {
    var color;
    if (playerStatus == -1) {
      color = "#37474F"; // unstarted = gray
    } else if (playerStatus == 0) {
      color = "#FFFF00"; // ended = yellow
    } else if (playerStatus == 1) {
      color = "#33691E"; // playing = green
    } else if (playerStatus == 2) {
      color = "#DD2C00"; // paused = red
    } else if (playerStatus == 3) {
      color = "#AA00FF"; // buffering = purple
    } else if (playerStatus == 5) {
      color = "#FF6DOO"; // video cued = orange
    }
    if (color) {
      document.getElementById('existing-iframe-example').style.borderColor = color;
    }
  }
  function onPlayerStateChange(event) {
    changeBorderColor(event.data);
  }
</script>

youtube_api.htm

Google Map API

Google Map with a Marker คือ เครื่องมือแสดงแผนที่พื้นโลกที่สามารถนำไปแสดงในเว็บเพจ โดยระบุพิกัดละติจูด และลองจิจูดที่ต้องการแสดง เหมาะกับผู้ใช้ระดับต้นและระดับกลางที่ใช้ภาษา HTML และ CSS และความรู้เบื้องต้นเกี่ยวกับ Javascript การใช้บริการของ Google Map มี 3 ขั้นตอน คือ 1) สร้างแฟ้ม HTML 2) เพิ่มแผนที่และ Marker 3) ใช้บัญชี gmail.com เข้าไปขอ API Key มาใส่ใน Script
ขั้นตอนการขอ Google API
1. เปิด https://console.cloud.google.com
2. คลิ๊ก Create project (ผมใช้บัญชีของมหาวิทยาลัย)
3. Project name = mymap-321404, Organization = .. , Location = ..
4. Select : mymap
5. มี API ให้เลือก ผมเลือก "Maps JavaScript API"
6. คลิ๊ก Activate แล้วกรอกข้อมูลอีก 3 Step 1) ยืนยันอีเมล และประเทศ 2) ใส่เบอร์ 3) ยืนยัน Verify code
7. Start my free trail ถึงตรงนี้ต้องใส่บัตรเครดิต
ถ้าใช้ key บน jsfiddle.net จะพบ error ว่า RefererNotAllowedMapError
ถ้าลงทะเบียนทดลองใช้ จะใช้ได้ 90-day, $300 Free Trial

แนะนำเว็บไซต์
เอกสารอธิบาย Google map
gmail ขอ api+credit card
ตัวอย่างแผนที่ใช้ api
ตัวอย่างแผนที่ไม่ใช้ api

<!DOCTYPE html><html><head><title>Add Map</title>
<script>
function initMap() {
  const uluru = { lat: -25.344, lng: 131.036 };
  const map = new google.maps.Map(document.getElementById("map"), {zoom: 4,center: uluru,});
  const marker = new google.maps.Marker({ position: uluru,map: map,});
}
</script>
<style>#map{height: 400px; width: 100%;}</style>
</head>
<body><h3>My Google Maps Demo</h3>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=[xxx]&callback=initMap&libraries=&v=weekly&channel=2" async></script>
</body>
</html>

JS Library : Syntax High Lighter

เครื่องมือสำหรับการแสดง Source code ให้อ่านง่ายเป็นระเบียบเหมือนที่เห็นใน Editor ใน thaiall.com เลือกใช้ SyntaxHighLighter V3 ของ Alex Gorbatchev ซึ่งเผยแพร่ที่ github.com (V4) การใช้งานสามารถ Download script ที่เป็น javascript มาไว้ในเครื่องแล้วเรียกเข้ามาผ่าน <script> หรือจะเรียกแฟ้มแบบ online เข้ามาตรง ๆ จากแห่งเผยแพร่ script ก็ได้ เช่นที่ https://cdnjs.com (Content Delivery Network) ตัวอย่างการใช้งานที่เรียกมาใช้แบบ online คือ webpage ที่ฝากไว้กับ Github.io เพื่อแสดงแฟ้ม rsp62.css การปรับแต่งนั้น นอกจากจะปรับใน code ที่นำเสนอ source code ได้แล้ว ยังปรับที่แฟ้ม syntaxhighlighter/styles/* อีกด้วย แล้วทำ webpage ทดสอบการใช้งานที่ SyntaxHighLighter.htm หรือ syntaxhighlighter-options

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<style type="text/css"> .syntaxhighlighter { overflow-y: auto !important; overflow-x: auto !important;</style>
Type 1: control style
<pre class="brush: js">
Hello world!
</pre>
 
Type 2: highlight
<pre class="brush: js; highlight: [1, 2]">
Hello 
world!
</pre>

Type 3: style in line
<div style="width: 320px !important;">
<pre class="brush: js">
Hello world!
</pre>
</div>
 
Type 4: no toolbar
<div class="syntaxhighlighter" style="width: 320px !important;">
<pre class="brush: js; toolbar: false;">
Hello world!
</pre>
</div>
 
Type 5: user class
<div class="m_still">
<pre class="brush: js">
Hello world!
</pre>
</div>
http://www.thaiall.com/web2/syntaxhighlighter.htm

JS Library : Prettify.js

+ prettify.htm มี open source ใน github.com
Set 1 : online calling from rawgit../run_prettify.js
thaiall.com/prettify/rawgit_run_prettify.js + rawgit_run_prettify.css
Set 2 : unzip from github.com
thaiall.com/prettify/run_prettify.js + thaiall.com/prettify/skins/sunburst.css

ตัวอย่าง source code
สำหรับเรียกใช้ prettify.js เพื่อแสดง source code ที่สวยงาม เป็นอีกทางเลือกนอกจากการใช้ Syntaxhighlighter มีตัวอย่างใช้งานจริงในการนำเสนอ Source code ที่ /source
ซึ่งมี theme ให้เลือก 3 แบบ คือ Default, Sons-of-obsidian และ Sunburst

<!DOCTYPE html><html><head>
<link type="text/css" rel="stylesheet" href="../prettify/prettify.css" />
<script src="../prettify/run_prettify.js" defer></script>
</head><body>
<?prettify linenums=true?>
<pre class="prettyprint" style="font-size:16px;">
Hello world
This is the testing for Prettify library
</pre>
</body></html>

Files : run_prettify.js และ prettify.css จาก current directory (prettify.htm)
Download : thaiall.com/prettify/prettify-small.zip
Skins : Desert, Doxy, Sons-of-obsidian, Sunburst

JS Library : LightBox เครื่องมือ Library สำหรับการแสดงภาพ Enlarge เป็น Layer ใหม่ ลอยเหนือ Layer Webpage ที่มี Thumbnail หรือ Link ของภาพ แล้วสามารถคลิ๊กเลื่อนไปยังภาพต่อไปแบบ Slide Show ซึ่งเผยแพร่ที่ lokeshdhakar.com พบว่ามีหลาย version ซึ่งผมนำไปใช้ในหลายโฮมเพจ (Lightbox v2.10.0 เรียกใช้เพียง lightbox.css และ lightbox-plus-jquery.js) เช่น /Web2, /Java/test.htm, /Handbill, หรือ /Lightbox.htm ส่วนรุ่นเก่า Lightbox v2.04 แบบเรียกแฟ้ม .js จำนวน 3 แฟ้ม (lightbox.css, prototype.js, scriptaculous.js, lightbox.js) ใช้ที่ /Html5/test.htm
ปัญหาที่อาจรู้สึกได้ หากเรียกแฟ้มจาก cdnjs คือ response time ที่อาจมากกว่าในเครื่องของเราเอง

Sample Code

Lightbox v2.04
<link rel="stylesheet" href="/lightbox.css" type="text/css" media="screen" />
<script src="/prototype.js" type="text/javascript"></script>
<script src="/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="/lightbox.js" type="text/javascript"></script>
<a href="yahoo.jpg" rel='lightbox[yahoo]'><img src="yahoo.jpg" /></a>

แฟ้ม builder.js และ effect.js จะถูกโหลดโดยอัตโนมัติ พร้อมกับ /images/closelabel.gif และ /images/loading.gif
มีตัวอย่างที่ lightbox.htm (Lightbox v2.04)

Lightbox v2.10.0
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox-plus-jquery.js"></script>
<a href="burinr.jpg" rel='lightbox[burin]'><img src="burinr.jpg" /></a>

มีตัวอย่างที่ java_test.htm (Lightbox v2.10.0)

JS Library : Bootstrap Bootstrap คือ สิ่งที่ช่วยทำให้ง่ายขึ้น หรือ สิ่งที่ทำได้ด้วยตัวเอง [Glyphicon sample listing]
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
กรณีใช้ Navbar - เมนูคอมพิวเตอร์ ก็คล้ายกับเมนูอาหาร มีตัวเลือกมากมายให้เลือกสั่ง ต้ม ผัด แกง ทอด ไอศครีม เมนูคอมพิวเตอร์ที่คุ้นตาก็จะมี file, edit, view, help เป็นต้น นักพัฒนา (Developer) จะเลือกเครื่องมือจัดเมนูให้ผู้ใช้ (User) เข้าถึงบริการต่าง ๆ ที่พัฒนาขึ้น ต่อไปเป็นตัวอย่างการทดสอบ menu ทั้ง 6 แบบ ที่ใช้ bootstrap กับ Java script ข้างนอก และเขียนเอง ซึ่งแชร์ source code 6 แบบ ใน blog

ตัวอย่างที่ 1 (แบบที่ 4)
การอ้างอิง Bootstrap จากภายนอกเครื่องบริการ มีใช้ที่ marry.htm (menu)

Sample #1
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="http://www.thaiall.com">Thaiall.com</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="http://www.thaiall.com">Home</a></li>
      <li><a href="http://www.thaiall.com/php">PHP</a></li>
    </ul>
  </div>
</nav>

ตัวอย่างที่ 2 (แบบที่ 2)
การอ้างอิง Bootstrap เฉพาะ glyphicons จากภายนอกเครื่องบริการ มีใช้ที่ /handbill

Sample #2
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
<span class="glyphicon glyphicon-heart" style="color:red;"></span>

ตัวอย่างที่ 3 (แบบที่ 2)
การอ้างอิง Bootstrap เฉพาะ glyphicons จากภายในเครื่องบริการ มีใช้ที่ /web2 หรือ /teachaccess
สำหรับ http://www.thaiall.com/bootstrap/bootstrap-glyphicons330.css

Sample #3
<link rel="stylesheet" href="/bootstrap/bootstrap-glyphicons330.css">
<span class="glyphicon glyphicon-heart" style="color:red;font-size:20px;"></span>

ตัวอย่างที่ 4
การใช้อักษรพิเศษรูปหัวใจ (Heart) อาจไม่ต้องใช้ bootstrap มีใช้ที่ blank_menu.htm

Sample #4
<span style="color:red;font-size:40px;"> &hearts; &#9829; &#x2665; </span>
<span style="color:pink;font-size:40px;"> &#10084; &#x2764; </span>
<span style="color:blue;font-size:40px;"> &#10085; &#x2765; </span>

JS Library : Google Map

ปัจจุบันมีการนำแผนที่ของ Google มาประยุกต์ใช้มากมาย สำหรับการเขียน HTML ก็เพียงแต่ใช้ <script> อ้างอึง address ที่ google เผยแพร่ จากนั้นก็ส่ง option ที่เรากำหนด แล้วกำหนด div สำหรับวางแผนที่ใน webpage เพียงเท่านี้ก็มีข้อมูลแผนที่มากมายมาแสดงผล เราสามารถพัฒนาโปรแกรมด้วยภาษา Script บน Web server ที่ทำงานร่วมกับ Database , windows app, ios app, android app เพื่อจัดการข้อมูล และควบคุมการแสดงผลของแผนที่ มีตัวอย่างที่ thaiall.com/map
บริการอื่น ๆ ของ Google ที่น่าสนใจ
+ Google Map
+ Google chart เล่าใน PHP
+ Google Firebase Demo

เรียก map มาใน iframe ใช้ https ไม่ได้ ต้องใช้ http
ตรวจว่าต้องเป็น http เพราะใน script เรียก http

HTMLArea , TinyMCE หรือ CKEditor

คือ Javascript สำหรับทำให้ textarea ที่รับข้อมูลได้คล้าย word

ขั้นตอนการติดตั้ง และทดสอบใน Webserver http://127.0.0.1
1. download script : htmlarea.zip ( HTMLArea-3.0-RC3.zip # หรือ TinyMCE 2.1.0 #)
2. คลาย .zip ใน Root Directory จนได้ห้อง /HTMLArea-3.0-RC3 แล้วเปิด http://127.0.0.1/HTMLArea-3.0-RC3/ ถ้าท่านใช้ localhost
3. มีตัวอย่างให้เลือกใช้หลายแบบดูตัวอย่างจาก http://127.0.0.1/HTMLArea-3.0-RC3/examples/ แล้วเลือก copy ไปใช้ในแบบที่ต้องการ
4. การนำไปใช้ต้องใช้ร่วมกับ Server-Side Script เช่น php + asp และต้องเข้าใจ html อย่างลึก จึงขอละไว้ในฐานที่เข้าใจ เพียงเท่านี้

TinyMCE ถูกใช้ใน gotoknow.org
- sourceforge.net

HTMLArea ถูกใช้ใน moodle/lib/editor
- htmlarea.com (2550-04-12 : Active)
- paradigmprint.com (Discontinued News)
- ตัวอย่าง htmlarea
- ตัวอย่าง thaiall.com/java/htmlarea/page

CKEditor ถูกใช้ใน ckeditor.htm
- ตัวอย่าง ckeditor.htm
- download script : ckeditor.com#

การติดตั้ง และใช้ jsPDF Library

jsPDF คือ Library สำหรับสร้างแฟ้ม pdf ด้วย Javascript ที่สามารถกำหนดขนาดหน้ากระดาษ แทรกภาพ ตัวอักษร ภาพเวกเตอร์ โหลดฟอนต์ภายนอก ทำงานร่วมกับ Library อื่น เช่น เขียนตาราง ค้นเพิ่มเติมได้ใน github.com ของ MrRio หรือดูตัวอย่างเต็ม (Full example) ที่ githack.com/MrRio/jsPDF
การติดตั้งและใช้งานมีหลายวิธี
1. npm install jspdf --save
2. yarn add jspdf
3. โหลดมาลงใน localhost หรือใน folder
4. อ้างอิงออนไลน์ จาก CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
หรือ
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>

* Library นี้สามารถทำงานได้บน folder ใด ซึ่งไม่ต้องเป็น server
เตรียม xampp บน localhost
- สั่ง start apache บน xampp
- chrome - https://github.com/MrRio/jsPDF
- ดาวน์โหลด code ได้ jsPDF-master.zip 12,680 KB
- ทำการ Extract here แล้วย้ายห้อง jsPDF-master ไปไว้ใน xampp/htdocs
- ถ้าใช้ library รุ่นเก่า ไม่ต้องมี window.jsPDF = window.jspdf.jsPDF; ก็ได้

1. สร้างแฟ้ม a4.htm

<script src="/jsPDF-master/dist/jspdf.umd.min.js"></script>
<script>
window.jsPDF = window.jspdf.jsPDF;
var doc = new jsPDF();
doc.text("Hello world!", 10, 10); doc.save("a4.pdf");
</script>

2. ตัวอย่างด้วย node.js
เช่น สร้าง code 4 บรรทัดด้วย c:\>copy con a4.js
แล้วสั่งประมวลผลด้วย c:\>node a4.js

const { jsPDF } = require("jspdf");
const doc = new jsPDF();
doc.text("Hello world!", 10, 10); doc.save("a4.pdf");

ผลคือ ได้แฟ้ม a4.pdf ขนาด 3,164 bytes ใน folder

3. ตัวอย่างด้วย Node REPL
พิมพ์ทีละบรรทัด จะพบ undefined ตามปกติ
หลังออกจาก Node ด้วย .exit
ผลคือ ได้แฟ้ม a4.pdf ขนาด 3,164 bytes ใน folder
4. ตัวอย่างด้วย Typescript (3rd party library)
อ่านเพิ่มที่ npmjs.com/package/jspdf
d:\> npm install typescript --save-dev
d:\> tsc -v (Version 4.3.5 is compiler)
d:\> tsc a4.ts ผลการ compile ที่ได้คือ a4.js
d:\> node a4.js ผลคือ a4.pdf

// a4.ts คือ source code
import jsPDF from 'jspdf'; // หรือ import { jsPDF } from "jspdf";
const doc = new jsPDF();
doc.text("Hello world!", 10, 10); doc.save("a4.pdf");
// a4.js คือ ผลการ compile
var jspdf_1 = require("jspdf");
var doc = new jspdf_1.jsPDF();
doc.text("Hello world!", 10, 10); doc.save("a4.pdf");

การสร้างแฟ้ม pdf ด้วย javascript ผ่าน JSPDF

ตัวอย่างฟังก์ชันสร้าง pdf (ทำงานได้ทั้ง Server และ C:)
1. Hello world 1
2. Hello world 2
3. Hello world + Thailand
4. User input
5. Thai font
..
10. Draw line - Landscape
11. write pdf from html
12. write pdf from jspdf-autotable
13. html textbox textarea
14. textbox และ album

jspdf1.htm
ตัวอย่าง THSarabunNew ที่ github.../Fonts.zip
ตัวอย่างที่ github.io/jsPDF/examples
เอกสารที่ github.io/jsPDF/docs
บริการเปิดอ่าน PDF ด้วย PDF.JS

<!DOCTYPE html><html><head><title>jspdf.htm</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script>
function f1() {
    var pdf = new jsPDF();
    source = "Hello world";
    margins = { top: 10, bottom: 10, left: 10, width: 300 };
    pdf.fromHTML( source, margins.left, margins.top, { 'width': margins.width },
    function (dispose) { pdf.save('Test.pdf'); }, margins);
}
</script>
</head><body>
<a href="javascript:f1()" class="button">Hello world</a>
</body></html>

Ligature คือ การควบรวมรูปร่างอักขระ รูปอักขระที่มีรูปลักษณ์พิเศษที่ถูกเขียนควบรวมรูปร่างแทนขึ้นใหม่ (Ligature)
อ่านที่ http://thaifont.info/?p=362

โพสต์เมื่อ 11 ตุลาคม 2012 โดย ผู้ช่วยศาสตราจารย์ ประชิด ทิณบุตร
Ligature (ลิกะเจอร์) คือ วิธีการแก้ปัญหาเรื่องการจัดเรียงพิมพ์ตัวอักษร (Type Arranging) ที่มีปัญหาเรื่องที่ว่างสีขาว (White Space) มากเกินไปหรือห่างมากไปอันเนื่องจากมีรูปขาดหาย (ในสายตาเรา) ไม่เต็มกรอบโครงสร้างสี่เหลี่ยม หรือปัญหาเรื่องการลำดับตำแหน่งรูปสระ พยัญชนะ และวรรณยุกต์ ในภาษาที่แตกต่างกัน อาทิเช่น เมื่อเรียงพิมพ์แล้วเกิดมีบางส่วนของรูปอักขระซ้อนทับหรือบังกัน เช่น ตัวพิมพ์เล็ก fi ,fl ทำให้อ่านดูขัดตาไม่สวย ด้วยปัญหาเรื่องระยะห่างของแบบตัวพิมพ์ หรืออาจเนื่องจากการปรับจัดระยะชิดกั้นหน้าหนัง (Side Bearing) หรือที่เรียกว่าการจัดเคิร์นนิ่ง (Kerning) เองหรืออัตโนมัติไม่ครบทุกรูปอักขระสระที่มีมากมาย เช่น ในภาษาไทย มีรูปสระวรรณยุกต์ซ้อนทับตำแหน่งพิมพ์เดิม ซ้อนอยู่เป็นระดับบน-ล่างพยัญชนะ และยังมีหางยาวพ้นระดับความสูงของบรรทัดปกติอีกด้วย เช่น ป ฟ ฝ เป็นต้น จึงต้องมี การแก้ปัญหาให้เช่นการเขียนคำสั่ง (Tag) กำกับอักขระเพิ่มเป็นพิเศษ และมีการเขียนรูปอักขระเพิ่มด้วยการรวมร่างแบบตัวอักขระ สองหรือสามตัวให้เป็นรูปตัวเดียว เหมือนกับการเขียนและเรียกใช้งานรูปสัญลักษณ์อักขระพิเศษ ที่นอกเหนือจากที่มีในตารางมาตรฐานของแป้นพิมพ์ ซึ่งปัญหานี้ก็ต้องอาศัยซอฟต์แวร์ที่เอื้อต่อการจัดการแก้ไข ใส่คำสั่งแท๊กสคริปต์ หรือด้วยการเขียนโปรแกรมคำสั่งให้ดำเนินการเรียกใช้ให้โดยอัตโนมัติ หรือเรียกใช้รูปอักขระที่มีรูปลักษณ์พิเศษที่ถูกเขียนควบรวมรูปร่างแทนขึ้นใหม่ (Ligatures) ให้เข้าใช้แทนที่ตำแหน่งพิมพ์ เมื่อเงื่อนไขที่พิมพ์รูปอักขระป้อนเข้าตรงกับคำสั่งที่เขียนขึ้นไว้ในโปรแกรมฟ้อนต์นั่นเอง ซึ่งความสามารถนี้ในโปรแกรมฟ้อนต์แล็บ (Fontlab editor) มีให้พร้อมรองรับการแก้ปัญหาเอาไว้แล้ว เป็นคุณสมบัติพิเศษที่โดดเด่นที่ศึกษาได้ง่าย ทั้งในเวอร์ชั่นสำหรับติดตั้งใช้ในเครื่องคอมพิวเตอร์ระบบปฏิบัติการ MacIntosh และระบบปฏิบัติการ Windows
fontlab.com/font-editor/fontlab/

ใช้บริการนับจำนวนตัวอักษรได้ที่ fontdrop.info
พบจำนวน Ligatures ในแต่ละฟอนต์ดังนี้
Sawasdee พบ 11 Ligatures in 2 Opentype features
Pridi พบ 17 Ligatures in 3 Opentype features
Chulabhorn Likit Text พบ 23 Ligatures in 6 Opentype features
WR Tish Kid2 พบ 29 Ligatures in 1 Opentype features
TH Chakra PetchKrub พบ 134 Ligatures in 2 Opentype features
TH SarabunPSK พบ 402 Ligatures in 4 Opentype features
TH Charmonman พบ 257 Ligatures in 5 Opentype features
TH Charm of AU พบ 278 Ligatures in 3 Opentype features
TH Krub พบ 256 Ligatures in 4 Opentype features
ทดสอบใช้งาน jspdf ที่ thaiall.com/jslibrary/jspdf.htm
ค้นเพิ่มเติม google.com/search?q=Ligature

การสร้างแฟ้ม pdf จาก jpg ใช้บริการบน smallpdf.com

การแปลงแฟ้มภาพ เป็นแฟ้ม PDF มีหลายวิธี แต่หากต้องการใช้งาน converting จากที่ใดก็ได้กับผู้ให้บริการในฐานะที่เป็นผู้ใช้บริการคนหนึ่ง เสนอให้ใช้ของ smallpdf.com/jpg-to-pdf ซึ่งภาพตัวอย่าง คือ จดหมายข่าวทูบีนัมเบอร์วันจังหวัดลำปาง ปีที่ 1 ฉบับที่ 4 มี 8 หน้า ได้ scan แล้วแบ่งปันภาพทั้ง 8 หน้า ไว้ที่ อัลบั้ม ของแฟนเพจเที่ยวลำปางหนา ซึ่งหลังรวมภาพไปเป็นแฟ้ม pdf ได้ใช้บริการ javascript library ยอดนิยมของ pdf.js เพื่อแสดงแฟ้มเอกสารอิเล็กทรอนิกส์ (pdf) ผ่านเว็บเพจ ที่ thaiall.com/ebook ซึ่งเป็นทางเลือกในกรณีไม่ต้องพัฒนาโปรแกรม หรือติดตั้งโปรแกรมเพื่อทำหน้าที่รวมภาพ jpg ไปเป็น pdf

แฮนด์ออนเทเบิล (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 นั่นเอง

<meta charset="utf-8" /><!-- https://handsontable.com/docs/7.4.2/tutorial-quick-start.html -->
<script src="https://cdn.jsdelivr.net/npm/handsontable@7.4.2/dist/handsontable.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable@7.4.2/dist/handsontable.full.min.css" rel="stylesheet" media="screen">
<div id="example"></div>
<script>
var data = [
  ['', 'Ford', 'Tesla', 'Toyota', 'Honda'],
  ['2017', 10, 11, 12, 13],
  ['2018', 20, 11, 14, 13],
  ['2019', 30, 15, 12, 13]
];
var container = document.getElementById('example');
var hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true,
  filters: true,
  dropdownMenu: true,
  licenseKey: 'non-commercial-and-evaluation' // for non-commercial use only
});
</script>

Tutorial : Quick start (pure javascript)
Tutorial : Introduction
ตัวอย่าง : จาก Quick start (ทำงานได้บน C:\ in browser)
ข้อมูล 265 โรงเรียน : Excel
ข้อมูล 265 โรงเรียน : Handsontable

jquery slim jquery

jquery slim คือ javascript library ที่ไม่มีฟังก์ชันเกี่ยวกับ ajax, effect และ deprecated method จึงทำให้มีขนาดเล็กกว่า jquery min เมื่อใช้ pagespeed พบว่า หัวข้อ best practice มี warning เรื่อง Deprecated APIs ใน jquery min รุ่น 3.5.1
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.slim.min.js

ใช้เวลาโหลดเว็บเพจ = 290 มิลลิวินาที สูง = 8525 จุด กว้าง = 1264 จุด

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮัน ว็อล์ฟกัง ฟ็อน เกอเทอ

Thaiall.com

Truehits.net