thaiall logomy background จาวาสคริปต์ (JavaScript .js)
my town
java

ภาษาจาวาสคริปต์

ภาษาจาวาสคริปต์ คือ ภาษาโปรแกรมคล้ายภาษาซี ถูกใช้ร่วมกับภาษาเอชทีเอ็มแอลในการพัฒนาเว็บเพจ ประมวลผลในเครื่องของผู้ใช้ ช่วยให้การนำเสนอเป็นแบบโต้ตอบกับผู้ใช้ได้ในระดับหนึ่ง
HTML | Chrome | Responsive | JavaScript | Bootstrap | JSLibrary | CanvasJS | JS01 | CGPA | Joom | CommToXLS | AdminTLE | Laravel | jspdf | เมนู Bootstrap | รายชื่อผู้สมัคร ลำปาง 2566 |
ทำความรู้จัก javascript กัน
    สารบัญ
  1. บทเรียน java.class ของ sun -> oracle
    เป็นบทเรียนในรายวิชาที่ต้องเตรียมสอน
  2. Source code สำหรับ javascript
    1. สั่ง run javascript ที่ body แล้วแสดงผลใน form
    2. สั่ง run เมื่อเลื่อน mouse หรือ click
    3. คำนวนค่าใน text แล้วแสดงผลจากการคำนวน
    4. สั่ง run javasript ใน form และแสดงผลใน form เช่นกัน
    5. เรื่องของวัน และเวลา
    6. ไม่ใช่ JAVA เช่น marquee
  3. ความรู้เบื้องต้นเกี่ยวกับ java
  4. Java Applet (นำ .class ไปใช้ได้)
    1. AnimText.class
    2. RainbowText.class
    3. SineText.class
    4. TickerTape.class
    5. fphover.class และ fphoverx.class
ตัวอย่างคำสั่งที่น่าสนใจ
onAbort, onBlur, onChange, onClick, onFocus, onKeydown, onKeyup, onLoad, onUnload, onMouseOver, onReset, onSelect, onSubmit, focus, window.open, window.close, text.toLowerCase(), text.toUpperCase(), text.length, text.substring(3,5), f.focus()
ความแตกต่างด้าน scope ของ var, let และ const
1. var ใช้ประกาศตัวแปร หากอยู่นอก function ก็จะเป็น global variable นำไปใช้ได้ในทุกฟังก์ชัน หากไม่กำหนดค่า ค่าเริ่มต้นของ var ก็จะเป็น undefined เช่น var a=1; if(true){ var a=2; console.log(a); } console.log(a); แบบนี้ error เพราะ a ถูกประกาศไปแล้ว ประกาศซ้ำไม่ได้
2. let เป็นที่นิยม และถูกนำมาใช้แทน var เนื่องจากทำงานกับ block ซึ่งเครื่องหมาย { } หมายถึง block เมื่อใช้ let ใน block กับนอก block จะให้ค่าแตกต่างกัน เช่น let a=1; if(true){ let a=2; console.log(a); } console.log(a); จะได้ค่า 2 กับ 1
3. const ใช้ประกาศค่าคงที่ ดังนั้นค่าใดประกาศแล้ว จะเปลี่ยนไม่ได้ เช่น const a=1; a=2; ใช้แบบนี้จะได้รับแจ้งว่า has already been declared
อ่านเพิ่มที่ freecodecamp.org
าษาจาวาสคริปต์ คือ ภาษาโปรแกรมคล้ายภาษาซี ถูกใช้ร่วมกับภาษาเอชทีเอ็มแอลในการพัฒนาเว็บเพจ ประมวลผลในเครื่องของผู้ใช้ ช่วยให้การนำเสนอเป็นแบบโต้ตอบกับผู้ใช้ได้ในระดับหนึ่ง
าษาจาวาสคริปต์ (JavaScript Language) คือ ภาษาโปรแกรมที่มีโครงสร้างคล้ายภาษาซี ทำหน้าที่แปลความหมาย และดำเนินการทีละคำสั่ง ภาษานี้มีชื่อเดิมว่า LiveScript ถูกพัฒนาโดย Netscape Navigator เพื่อช่วยให้เว็บเพจสามารถแสดงเนื้อหา ที่มีการเปลี่ยนแปลงได้ ตามเงื่อนไข หรือสภาพแวดล้อมที่แตกต่างกัน หรือโต้ตอบกับผู้ใช้ได้มากขึ้น เพราะภาษา HTML ที่เป็นภาษาพื้นฐานของเว็บเพจ ทำได้เพียงแสดงข้อมูลแบบคงที่ (Static Display)
าษาจาวา (Java Language) คือ ภาษาคอมพิวเตอร์ที่ถูกพัฒนาขึ้นโดยบริษัท ซันไมโครซิสเต็มส์ เป็นภาษาสำหรับเขียนโปรแกรมที่สนับสนุนการเขียนโปรแกรมเชิงวัตถุ (OOP : Object-Oriented Programming) โปรแกรมที่เขียนขึ้นถูกสร้างภายในคลาส ดังนั้นคลาสคือที่เก็บเมทอด (Method) หรือพฤติกรรม (Behavior) ซึ่งมีสถานะ (State) และรูปพรรณ (Identity) ประจำพฤติกรรม (Behavior)
    แหล่งอ้างอิงสำหรับ Java Script
  1. JSMadeEasy.com ยอดเยี่ยม ดูง่าย
  2. developer.com
  3. javascriptsource.com
  4. javascript.com/try
  5. javascriptkit.com
  6. programminghub.io
  7. comp.lang.javascript
Javascript ช่วยเรื่อง checklist แบ่งกลุ่มประสบการณ์ มีนิสิต ได้แชร์เรื่องการเตรียมสมัครงาน แล้วผมก็นำไปเล่าใน /jmeter ว่า ผู้เรียนรู้ ผู้สมัครงาน หรือ ว่าที่พนักงานใหม่่ ต้องมี 1) ความเชี่ยวชาญ (proficient) 2) ประสบการณ์ (experienced) 3) ความคุ้นเคย (familiar) ในเรื่องใดบ้าง หากต้องทำเช็คลิสต์ จะมีผลออกมาเป็นรูปแบบใด โดยความแตกต่างของความเชี่ยวชาญ ประสบการณ์ และความคุ้นเคยนั้น จะเชื่อมโยงกับคำว่า ทักษะ (skill) ที่ตรงข้างกับ ไม่มีทักษะ (no skill) นั่นคือสิ่งที่ไม่เคยอ่าน ไม่เคยเขียน ไม่เคยทำ จำไม่ได้ ย่อมไม่คุ้นเคย ดังนั้น 1) สิ่งใดเคยอ่าน เคยทำ และพอจำได้ เรียกว่า มีความคุ้นเคย 2) สิ่งใดเคยอ่าน เคยทำ จำได้ ใช้เป็น แต่ไม่บ่อยนัก เรียกว่า มีประสบการณ์ 3) สิ่งใดทำทุกบ่อย และทำได้ดี เรียกว่า มีความเชี่ยวชาญ เมื่อพอทราบนิยามแล้ว ขอชวนมาทำเช็คลิสต์กันครับ
ที่ http://www.thaiall.com/student/grade.php
Javascript + No library (pure JS)
Pure Javascript คือ Javascript ที่ไม่มี Library หรือการเขียนจาวาสคริปต์แบบไม่เรียกใช้ไลบรารี (Library) ตัวอย่างนี้ คือ การเขียนเว็บเพจที่ใช้ Google Map with a marker ซึ่งประกอบด้วยโค้ด (Code) 3 ส่วน คือ 1) Javascript 2) Html 3) CSS แล้วแสดงผลในส่วนที่ 4 คือ Result สามารถแยกโค้ดทั้งสามส่วน แล้วนำมารวมกัน เพื่อประมวลผล ออกผลลัพธ์ได้บน Jsfiddle.net ซึ่งตัวอย่างนี้ต้องใช้ API key ที่ได้มาจาก Google Cloud Console หากใช้แบบทดลองใช้ จะมีข้อจำกัดคือ 90 วัน หรือ $300 แต่ถ้าไม่มี API key หรือใช้ของ Website อื่น จะพบปัญหา RefererNotAllowedMapError
การเรียกใช้ Library จากภายนอก
<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>
React Native กับ React/ReactJS
React คือ JavaScript Library ถูกสร้างโดย Facebook มีแนวความคิด View แบบ MVC (Model View Controller) เหมาะกับการพัฒนาเว็บไซต์ฝั่ง Front-end
React Native คือ เครื่องมือพัฒนา Mobile Application ที่เป็น Cross Platform Technology สามารถทำงานได้ทั้ง iOS และ Android โดยใช้ JavaScript ในการพัฒนา
Expo คือ เครื่องมือช่วย build app ที่เขียนด้วย React native เพื่อนำ app ขึ้นบน iOS หรือ Android โดยไม่ต้องลง Android Studio หรือ Xcode สามารถส่งแอพขึ้น expo.io ด้วยคำสั่ง expo build:android หรือ build:ios ในบัญชีที่เคยสมัครไว้ และกำหนดค่าของแอพในแฟ้ม app.json
React Native คือ การใช้ภาษา Javascript เป็นหลัก สำหรับสร้าง Mobile Application ทั้งบน iOS และ Android เป็น Cross Platform Technology ถูกสร้างโดยทีมงาน Facebook เป็น Open Source ที่มีนักพัฒนาสามารถสร้าง Library แล้วนำไปเผยแพร่ให้ใช้จำนวนมาก โดยไม่มีค่าใช้จ่าย ส่วน React หรือ ReactJS คือ แหล่งห้องสมุดจาวาสคริปต์ (Javascript Library) สำหรับสร้างส่วนติดต่อกับผู้ใช้ (User interfaces) คล้ายกับ React Native ต่างกันที่วิธีการเขียน Component และ Execution
ารเรียกใช้ React หรือ ReactJS Component มีหลายวิธี อาทิ Simple Component, Stateful Component, Application และ Component Using External Plugins ซึ่งการเขียน React มี 2 แบบ คือ แบบใช้ JSX และ แบบไม่ใช้ JSX แล้วยังเขียน React ได้อย่างน้อย 3 วิธี คือ 1) ติดตั้งผ่าน CDN 2) ดาวน์โหลดไฟล์ JS และ 3) ติดตั้งผ่าน NPM (Node Package Manager)
Node หรือ Node.js คือ โปรแกรมสำหรับสั่งให้โปรแกรมภาษา Javascript ที่เขียนขึ้นทำงาน เช่น C:\> node hello.js ส่วน NPM (Node Package Manager for Node.js packages) คือ โปรแกรมจัดการ Node ซึ่งมี Package ให้จัดการเรียกใช้ได้จำนวนมาก เช่น C:\> npm i react และ npm i react-dom และ npm list สำหรับจัดการ React Library เพื่อเรียกใช้งาน ส่วน NPX นั้นมาพร้อมกับ npm 5.2 ขึ้นไป ใช้ npx -h พบว่าโปรแกรมนี้คือ Execute binaries from npm packages. เช่น npx create-react-app hello (ระหว่างติดตั้งจะมีการติดตั้ง react, react-dom, and react-scripts เพิ่มด้วย) แล้ว cd hello แล้ว npm start และเปิด http://localhost:3000 ซึ่งทั้ง NPM และ NPX มาพร้อมการติดตั้ง Node.JS
Node.js
ชุดโปรแกรมสำหรับสั่งให้โปรแกรมจาวาสคริปต์ที่เขียนขึ้นทำงานได้ ส่วน NPM คือ ตัวจัดการ Node Package
React
JS Library ถูกสร้างโดย Facebook มีแนวความคิด View แบบ MVC เหมาะกับพัฒนาเว็บไซต์ฝั่ง Front-end
React Native
JS Framework สำหรับพัฒนา Mobile App แบบ Cross-platform ที่เขียนครั้งเดียว ใช้ได้ทั้งบน Android และ iOS
Laravel
เฟรมเวิร์คภาษาพีเอชพี ในแบบ MVC ช่วยพัฒนาระบบได้อย่างรวดเร็ว แทนการพัฒนาตามหลักโปรแกรมโครงสร้าง
Javascript
คล้ายภาษาซี ใช้ร่วมกับเอชทีเอ็มแอลในการพัฒนาเว็บเพจ ประมวลผลบนบราวเซอร์ นำเสนอข้อมูลแบบโต้ตอบ
Java
พัฒนาโดย Sun ขายให้ Oracle ใช้เขียนโปรแกรมเชิงวัตถุประกอบด้วย Method มี State, Identity, Behavior
Bootstrap
ฟอนท์เอ็นเฟรมเวิร์คที่รวมเอาแฟ้มจาวาสคริปต์และซีเอสเอสที่ประมวลมาแล้วว่าดี เรียกใช้ง่าย จึงพัฒนาได้เร็ว
CSS
สไตล์ชีต ภาษากำหนดรูปแบบในเอชทีเอ็มแอล กำหนดเลย์เอาท์ สีอักษร สีพื้น ตัวอักษร การจัดวาง เส้นขอบ
PDF.JS
ชุดโปรแกรมเพื่อแสดงแฟ้มข้อมูลแบบ PDF บนเว็บบราวเซอร์สำหรับทุกอุปกรณ์ จึงไม่จำเป็นต้องมีแอพอื่น
Expo
เครื่องมือช่วย build app ที่เขียนด้วย React native เป็นแพลตฟอร์ม Cross เพื่อนำแอปขึ้นบน Mobile
ความแตกต่างของ ID และ Class ใน CSS
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
style
#header {background-color:yellow;font-size:20px;} 
.title-text {color:red;} 
p.big { font-size:40px; }
span.small { font-size:10px; }
table, th, td { border: 1px solid black; }
.br1 {color:red;border: 2px} 
.br2 {font-size:20px;float:left;}
.br3 {color:blue;font-size:30px;float:left;}
body
<body id="header" class="title-text">
<span style="color:green;">hello</span>
<p class="big">my</p>
<span class="small">friend</span>
<span class="small">is tom.</span>
<table class="br1"><tr><td>one</td></tr></table>
<table class="br2"><tr><td>two</td></tr></table>
<table class="br3"><tr><td>three</td></tr></table>
นิยามศัพท์
px (Pixels) คือ หน่วยสำหรับวัดการแสดงผลบนหน้าจอ (Screen) โดย 1 Pixel เท่ากับ 1 จุดบนหน้าจอ
pt (Points) คือ หน่วยสำหรับสื่อสิ่งพิมพ์ ที่ต้องการพิมพ์บนกระดาษ (Paper) โดย 1 Point มีค่าเท่ากับ 1/72 นิ้ว
em หรือ rem (Root Element) คือ หน่วยที่เป็นจำนวนเท่าที่กำหนดไว้ในระดับบนสุด (Default pixel size) ปกติ 1em =16px เทียบกับ Parent ที่ใกล้สุด แต่ 1rem =16px โดยอ้างอิงจากค่า Root ของโฮมเพจ ดังนั้นถ้า Root ของโฮมเพจกำหนดขนาดตัวอักษรเป็น 10px ก็จะได้ว่า 1rem=10px
html { font-size: 62.5%; } /* 16 x 0.625 =10px */
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */
ตัวอย่าง CSS ใน HTML (Joom.htm) 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 เข้าไปตรวจสอบ หรือทดสอบแก้ไข แล้วการแสดงผลจะเปลี่ยนไปทันที ทำให้กลับไปแก้ไขโค้ดทำได้ง่ายขึ้น
Blockly
thaiall.com/blockly
thaiall.com/scratch
thaiall.com/google
Blockly คือ เครื่องมือพัฒนาโปรแกรมแบบวิชวล (Visual) โดยใช้สัญลักษณ์ภาพแบบจิ๊กซอล แทนคำสั่งมาเรียงต่อกันตามเงื่อนไขที่ต้องการ พัฒนาโดย google for education แล้วเปิดให้ทดลองใช้ (Try Blockly) บนเว็บของกูเกิ้ล หรือนักพัฒนาจะดาวน์โหลดไปติดตั้งบน website ของตนเอง เพื่อพัฒนาต่อยอดได้ ในเครื่องมีอนี้มีกลุ่มของสัญลักษณ์ที่ประกอบด้วย Logic, Loops, Math, Text, Lists, Colour, Variables, Functions
ายใต้ google for education มีบริการ try blockly ถูกใช้สำหรับการโปรแกรมด้วยภาพ สามารถประมวลผล และแสดงเป็นภาษาต่าง ๆ อาทิ javascript, python, php, lua หรือ dart แล้วมีการนำ blockly ไปต่อยอดอีกมากมาย อาทิ Code.org, Microbit, Blockly-games, CodeBug, Ozoblockly
Print button
ารใช้ javascript สั่ง print เว็บเพจออกทางเครื่องพิมพ์
การนำข้อมูลออกกระดาษ A4 ก็ทำโดยเพิ่มปุ่ม print ทางเว็บเพจ เมื่อกดปุ่ม print ก็จะสั่งพิมพ์ออกทางเครื่องพิมพ์ (printer) เลือกขนาดกระดาษตามสะดวก อธิบายตัวอย่าง code ดังนี้ 1) กำหนดส่วนของ div ให้มีปุ่มสำหรับสั่งพิมพ์ 2) เหตุการณ์ onclick จะเรียกใช้ myFunction() 3) ใน Script จะสั่งพิมพ์ด้วย window.print() ก็จะเรียกบริการ print ของ window ขึ้นมา 4) ก่อนพิมพ์ก็สั่งซ่อนส่วนของ div 5) หลังพิมพ์ก็สั่งแสดงส่วนของ div อีกครั้ง
<div id="prt">
<button onclick="myFunction()">Print this page</button>
</div>
<script>
function myFunction() {
  document.getElementById("prt").style.visibility='hidden';
  window.print();
  document.getElementById("prt").style.visibility='visible';
}
</script>
ความแตกต่างของ ID และ Class ใน CSS
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
style
#header {background-color:yellow;font-size:20px;} 
.title-text {color:red;} 
p.big { font-size:40px; }
span.small { font-size:10px; }
table, th, td { border: 1px solid black; }
.br1 {color:red;border: 2px} 
.br2 {font-size:20px;float:left;}
.br3 {color:blue;font-size:30px;float:left;}
body
<body id="header" class="title-text">
<span style="color:green;">hello</span>
<p class="big">my</p>
<span class="small">friend</span>
<span class="small">is tom.</span>
<table class="br1"><tr><td>one</td></tr></table>
<table class="br2"><tr><td>two</td></tr></table>
<table class="br3"><tr><td>three</td></tr></table>
นิยามศัพท์
px (Pixels) คือ หน่วยสำหรับวัดการแสดงผลบนหน้าจอ (Screen) โดย 1 Pixel เท่ากับ 1 จุดบนหน้าจอ
pt (Points) คือ หน่วยสำหรับสื่อสิ่งพิมพ์ ที่ต้องการพิมพ์บนกระดาษ (Paper) โดย 1 Point มีค่าเท่ากับ 1/72 นิ้ว
em หรือ rem (Root Element) คือ หน่วยที่เป็นจำนวนเท่าที่กำหนดไว้ในระดับบนสุด (Default pixel size) ปกติ 1em =16px เทียบกับ Parent ที่ใกล้สุด แต่ 1rem =16px โดยอ้างอิงจากค่า Root ของโฮมเพจ ดังนั้นถ้า Root ของโฮมเพจกำหนดขนาดตัวอักษรเป็น 10px ก็จะได้ว่า 1rem=10px
html { font-size: 62.5%; } /* 16 x 0.625 =10px */
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */
ตัวอย่าง Javascript อย่างสั้น
1. แสดงข้อความที่ Status Bar เมื่อวาง Mouse อยู่เหนือ Link
Sample of OnMouseOver + Window.Status
2. เขียนโปรแกรมคุมเหตุการณ์กับ checkbox
3. ตัวอย่าง Link ของ Back, Print, Close และการแสดงรุ่นของ Browser บน Status Bar
4. คุมการแสดงผลด้วยการตรวจ URL ประยุกต์ใช้กับ footer ของ thaiall.com
5. ตรวจ Querystring เพื่อสั่งแสดง หรือไม่แสดงภาพในเว็บเพจ [querystring.htm]
6. ตรวจสอบการกด checkbox ก่อนรับ textbox
เห็นข้อความใน textbox แต่แก้ไขไม่ได้ เพราะ disabled ไว้ ต้อง Click CheckBox
7. Select ใน List ไปใส่ใน Textbox
ใน textbox ไม่มีอะไร เมื่อเลือกจาก select จะโยนค่าเข้า textbox อัตโนมัติ
8. Redirect แบบเปิดใหม่ใน iframe หรือ _top
9. ย้าย Cursor ไป Text ต่อไปอัตโนมัติ เมื่อป้อนรหัสครบแล้ว
10. Random ภาพแสดงในเว็บเพจ
11. Pop up and change parent page

chkpop.htm
12. Multiple Table

multable.htm
13. pop-up confirm
14. Add Input Field (Refresh)

addinput.htm
15. Add Input Field (Not Refresh)

addinput2.htm
16. Difference Color on Rows
17. Check Zero or Not Number
18. Create and Execute text file by Javascript (wscript_notepad.htm)
19. Hide & Unhide Layer แบบธรรมดา
20. Hide & Unhide Layer แบบหด ขยายได้
21. เปลี่ยนขนาดตัวอักษร

fontsize.htm
22. ทดสอบและคำนวณกับ textbox (checktextbox.htm :: job_form_v1.htm )
23. setfocus และการทำงานกับ button
24. window.open
25. open 10 iframe
26. การเขียน code พิมพ์ 1 - 10 ใน console ของ browser

+ w3schools/jsref_reference
การพิมพ์ 1 ถึง 10 พบว่า ใน Browser ทั้ง chrome และ firefox เมื่อกด f12 เข้า Developer Tools เลือกแถบ Console
1. พิมพ์ clear()
2. พิมพ์ for (i = 0; i < 5; i++) { console.log(i); }
3. พิมพ์ function s() { t=""; for (i = 0; i < 5; i++) { t+=i + "\n"; } return t; } console.log(s());
4. พิมพ์ console.log(s());
27. ฟังก์ชันไม่ประสงค์ออกนาม (Anonymous Function)
function hello1() { alert('hello1'); }
hello1();
var hello2 = function() {
 alert('hello2');
}
hello2();
// closure
(function() { console.log('hello3'); })();
(function() { alert('hello4'); })();
(function() { hello5 = 5; })();
alert(hello5); // output = 5
alert((function() {return "hello6";})());
alert((function(hello7) {return hello7;})(7));
function hello8(){
return (function() { return "hello8"; })();
}
alert(hello8());
function hello9(){
return (function(msg) { return msg; })("hello9");
}
alert(hello9());
28. write in html file
jswrite.htm
<!DOCTYPE html>
<html>
<script src="jswrite.js"></script>
<script>
document.body.innerHTML = document.body.innerHTML + "bla bla";
</script>
<body></body>
</html>
---
jswrite.js
document.write("Hello World!");
29. click text + radio
บบทดสอบออนไลน์ ที่มีตัวเลือก เดิมต้องคลิ๊กปุ่ม radio แต่สามารถใช้แท็ก label + for ส่งการคลิ๊กให้กับ radio ซึ่งค่าของ radio ส่งให้กับ javascript นำไปประมวลผลได้ วน loop ใน radio ทุกตัว แล้วเลือกค่าที่ถูกเช็ค checked
click_radio.htm
w3schools..tag_label
elephant.htm
<!DOCTYPE html><html><head><title>JavaScript Radio Buttons</title></head>
<body>
<form>
<input type="radio" name="choice" value="1" id="c1"><label for="c1">1</label>
<input type="radio" name="choice" value="2" id="c2"><label for="c2">2</label>
<input type="radio" name="choice" value="3" id="c3"><label for="c3">3</label>
<button id="btn">Show Selected Value</button>
</form>
<script>
const btn = document.querySelector('#btn');
btn.onclick = function () {
	const rbs = document.querySelectorAll('input[name="choice"]');
	let selectedValue;
	for (const rb of rbs) {
		if (rb.checked) {
			selectedValue = rb.value;
			break;
		}
	}
	alert(selectedValue);
};
</script>
<a onclick="alert('hello')">https://www.javascripttutorial.net/javascript-dom/javascript-radio-button/</a>
</body>
</html>
30. Quiz ด้วย pure javascript
บบทดสอบออนไลน์ แบบใช้จาวาสคริปต์แท้ (pure javascript) ซึ่งเคยเห็นว่ามีการสร้างข้อสอบแบบง่าย ๆ ที่ englishcoursemalta.com แล้วก็คิดว่าถ้าใช้ pure javascript คงตอบสนองได้เร็ว ประกอบกับก่อนหน้านี้ใช้ await ทำงานกับ jspdf แล้ว สามารถหน่วงเวลาได้อย่างมีประสิทธิภาพ นี่จึงเป็นข้อสอบต้นแบบที่ใช้จาวาสคริปต์แท้ ชื่อ quiz_javascript_1.htm และ quiz_javascript_2.htm และ quiz_javascript_3.htm และ และอาจทำให้ต่อจากนี้ก็จะสร้าง content มาป้อนระบบนี้ก็เป็นได้
<style>button{margin:10px;}</style>
<script> 
function resolveAfterSeconds(x) { return new Promise(resolve => { setTimeout(() => { resolve(x); }, 1000); });}
async function f(id,option,score) {
  var thaiall; if (score == 1) thaiall = "#ddff00"; else thaiall = "#ffdddd";
  document.getElementById("n" + option).style.backgroundColor = thaiall
  var mywait = await resolveAfterSeconds(0);
  fnext(id,score);
}
async function fnext(id,score) {
  var start = document.getElementById("start");
  if(start.style.display !== "none") { 
	sessionStorage.setItem("score", 0); 
	start.style.display = "none"; 
  } else { sessionStorage.setItem("score", Number(sessionStorage.getItem("score")) + score); }
  let tot =0; 
  let ar =[];
  ar[tot++] = tot + "<br/><button id='n1' onclick='f(1,1,1)'>1+1=2</button><br/><button id='n2' value=1 onclick='f(1,2,0)'>1+1=3</button>";
  ar[tot++] = tot + "<br/><button id='n1' onclick='f(2,1,0)'>2+2=5</button><br/><button id='n2' value=1 onclick='f(2,2,1)'>4+4=8</button><br/><button id='n3' value=1 onclick='f(2,3,0)'>3+4=8</button>";
  ar[tot++] = tot + "<br/><button id='n1' onclick='f(3,1,0)'>2+2=5</button><br/><button id='n2' value=1 onclick='f(3,2,0)'>4+4=9</button><br/><button id='n3' value=1 onclick='f(3,3,1)'>3+4=7</button><br/><button id='n4' value=1 onclick='f(3,4,0)'>3+4=9</button>";
  ar[tot++] = "<b>Thank you : <a href=?>restart</a></b>";
  document.getElementById("quiz").innerHTML = ar[id];
  document.getElementById("score").innerHTML = sessionStorage.getItem("score");
}
</script>
<button id="start" value="burin rujjanapan" onclick="fnext(0,0)">Start</button>
<p id="quiz"></p><p id="score"></p>
31. ค้นใน profile ของเราเอง
นุษย์เราตอนมีชีวิตอยู่ ย่อมต้องมีอดีต ทั้งที่สวยงาม และเศร้าสร้อยให้หวนระลึกนึกถึงเสมอ ช่วงนี้มีเพื่อนในเฟสบุ๊ค มักโพสต์เรื่องสัตว์เลี้ยงอยู่บ่อยครั้ง เช่น "สุนัข" หรือ "แมว" ทำให้ผมนึกถึงสุนัข ที่ผมเคยเลี้ยงไว้ตัวหนึ่ง เมื่อหลายปีมาแล้ว จำได้ว่าที่บ้านได้สุนัขตัวเล็กมาแบบไม่คาดคิด หลังจากนั้นหลายปี เค้าได้จากไปแบบไม่คาดฝัน เลี้ยงไว้หลายปี มีอาหารที่ดี มียากันเห็บ มีน้ำให้อาบ มีแชมพู มีกรงสวย ในพื้นที่ปลอดภัย แล้วอยู่มาวันหนึ่งเค้าก็ได้จากไปอย่างกระทันหัน ก็ต้องเศร้าเป็นธรรมดา ทุกอย่างที่เคยสร้างให้เค้า ต้องทิ้งบ้าง ขายบ้าง เหลือไว้เพียงภาพและคลิปความทรงจำ ในใจก็บอกตนเองว่า ไม่อยากสูญเสีย และเศร้าแบบนั้นอีก เคยเล่าไว้ใน profile และเราสามารถเข้าไปค้นคืนอดีต และความทรงจำได้จากเฟสบุ๊ค ในยุคที่คนเราอายุยืน สมองมักเสื่อมในวัยอันควร ความทรงจำบางอย่างค้นคืนได้จากเฟสบุ๊ค ไปส่องเฟสบุ๊คตัวเอง เขียนโค้ดด้วย Javascript ค้นด้วยคำว่า "สุนัข" แล้วทำให้เห็นเรื่องราวในอดีต
<html><head><meta charset="utf-8" />
<title>searching in profile</title>
<script>
function q() {
var myq = "https://web.facebook.com/profile/" + 
document.getElementById('profileid').value + 
"/search/?q=" + 
document.getElementById('q').value;
window.open(myq,"_blank"); 
}
</script>
</head><body>
<div  style="text-align:center;background-color:#ddffdd;">
Profile id : <input id="profileid" value="ajburin" size="18" /><br/>
Keyword : <input id="q" value="สุนัข" size="10" />
<br/><button onclick="q()" style="height:30px;width:100px;">
Search
</button>
</div>
</body></html>
บริการแปลง facebook comment เป็นรหัสนิสิต
ริการนำข้อมูลการลงชื่อใน Facebook comment
มากลั่นกรองให้เหลือเพียงรหัสนิสิต แล้วคัดลอกไปวางใน Excel
เพื่อเปรียบเทียบกับชุดรายชื่อ ในรายการ
แล้วแสดงสารสนเทศการตรวจสอบรายชื่อการมาเรียนของนิสิต
แอพสอนเขียนโปรแกรมด้วย Programming hub Programming hub คือ แอพพลิเคชั่นที่สอนเขียนโปรแกรมด้วยภาษาคอมพิวเตอร์ ที่มีทั้งบนแอนดรอย (Android) และไอโอเอส (iOS) และสามารถเรียนผ่านเว็บไซต์ (Learn on Web) ได้ที่ programminghub.io โดยแบ่งเนื้อหาเป็นตัวอย่างโค้ด (Program) และเนื้อหาอ้างอิง (Reference) สำหรับแอพพลิเคชั่นบนสมาร์ทโฟนจะมีบางภาษาที่สามารถทำการทดสอบเขียนโค้ด และประมวลผลได้ทันที (Playground) ปัจจุบันมีภาษาโปรแกรมให้ศึกษา ดังนี้ Python, Assembly, HTML, VB.NET, C, C++, C# (C Sharp), JavaScript, PHP, Ruby, R Programming, CSS, Java programming เป็นต้น
Javascript library
+ Javascript library
HTMLArea , TinyMCE หรือ CKEditor
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#
1. Java Script Sample เพียงเปิดตัวอย่าง, view source, และ copy ไปใช้ได้เลย (ง่ายไหมครับ)
ประโยชน์ของ javascript นั้น สามารถเพิ่มลูกเล่นให้กับเว็บ ได้ดีทีเดียว
กลุ่ม 1 : สั่ง run javascript ที่ body แล้วแสดงผลใน form
กลุ่ม 2 : สั่ง run เมื่อเลื่อน mouse หรือ click
กลุ่ม 3 : คำนวนค่าใน text แล้วแสดงผลจากการคำนวน
กลุ่ม 4 : สั่ง run javasript ใน form และแสดงผลใน form เช่นกัน
กลุ่ม 5 : เรื่องของวัน และเวลา ::
กลุ่ม 6 : ไม่ใช่ JAVA แต่สามารถนำไปประยุกต์ได้หลากหลาย ดู perfect มาก
เขียนปิรามิด ไว้ฝึกเขียนโปรแกรมที่ : http://www.thaiall.com/article/teachpro.htm (แนวการสอนเขียนโปรแกรมของผม)
2. ความรู้เบื้องต้นเกี่ยวกับ java
    ขั้นตอนการเรียนรู้ Java มีดังนี้
  1. หาประสบการณ์เกี่ยวกับ .class ด้วยการลองนำมาใช้ หรือเข้าไปหา download ที่ http://javaboutique.internet.com/applets/ มาลองใช้ จะได้มี idea พัฒนาโปรแกรมของตนเองในอนาคต
  2. ไปเว็บ javasoft.com หรือ java.sun.com เพื่อ download J2SE (Java 2 Platform Standdard Edition) เพราะจะทำให้ท่านสร้างแฟ้ม .java แล้ว แปลด้วยโปรแกรมที่ download มาจะได้ .class ซึ่งนำไปใช้งานได้ ดังตัวอย่างในหัวข้อที่ 3 ถ้าท่านต้องการสร้างผลงานอย่างหัวข้อที่ 3 จำเป็นต้อง download J2SE ไป install ในเครื่องไว้แปลโปรแกรมที่ท่านเขียนขึ้นเป็น .class ไว้ใช้งาน ซึ่งผมเลือกในหัวข้อ SDK เพราะ JRE จะมีอะไรน้อยกว่า เนื่องจาก JRE version 1.4 ขนาด 12,214,536 bytes แต่ถ้าเลือก SDK ขนาด 37,067,134 bytes [click]
  3. หลังติดตั้งจะมีห้อง c:\j2sdk1.4.0 ซึ่งจะติดตั้ง Demo ให้ด้วย กินเนื้อที่ไปตั้ง 70 Mb ไหน ๆ ก็เสียพื้นที่ .. ใช้ให้เป็นประโยชน์นะครับ
  4. อธิบายสภาพแวดล้อม http://java.sun.com/docs/white/langenv/
  5. แนะนำการเริ่มต้นกับ java เป็น step ที่ http://developer.java.sun.com/developer/onlineTraining/new2java/
  6. ดูวิธี compile และ run ที่ http://developer.java.sun.com/developer/onlineTraining/new2java/programming/learn/
  7. ทดสอบเขียน testgraph.java เมื่อเขียนตาม code ด้านล่างแล้วให้ใช้คำสั่ง c:\j2sdk1.4.0\bin\javac testgraph.java เพื่อ compile ให้ได้ testgraph.class สำหรับนำไปใช้ในขั้นต่อไป
    โปรแกรมนี้มี 7 บรรทัด
    import java.lang.*;
    import java.applet.*;
    import java.awt.Graphics;
    public class testgraph extends java.applet.Applet {
      public void paint(Graphics g)  {
        g.drawString("test java",10,10);
      }
    }
    
  8. การทดสอบว่า java ที่เขียนขึ้นให้ผลเป็นอย่างไร ให้สร้างแฟ้ม testgraph.htm เพื่อจะเรียก testgraph.class มาแสดงผล
    โปรแกรม testgraph.htm นี้มี 7 บรรทัด
    <body bgcolor=blue>
    <applet code="testgraph.class" width=200 height=200>
    </applet>
    </body>
    
    applet.htm
  9. จากหลักการที่ประยุกต์มาจาก testgraph.class มาสร้าง test1to10.class เพื่อพิมพ์ 1 ถัง 10 ซึ่งนำไปประยุกต์ตามบทความ แนวการสอนเขียนโปรแกรม
    โปรแกรม test1to10.class นี้มี 16 บรรทัด
    import java.lang.*;
    import java.applet.*;
    import java.awt.Graphics;
    public class test1to10 extends java.applet.Applet {
      private int i,j;
      private String istr;
      public void paint(Graphics g)  {
        i = 1;
        while (i <= 10) {
          j = 10 * i;
          istr= Integer.toString(i);
          g.drawString(istr,10,j);
          i++;
        }
      }
    }
    
    applet.htm
  10. เรื่อง java ขอให้ศึกษาจากเว็บ java.sun.com หรือ โปรแกรมในห้อง demo ซึ่งมาพร้อมชุดติดตั้งชุดเต็ม สมบูรณ์มาก สำหรับปัญหาใด ๆ เกี่ยวกับ java ปกติผมตอบไม่ได้ เพราะยังศึกษาไม่มากไปกว่าที่เห็นในเว็บนี้ คำถามใด ๆ สามารถส่งไปที่ pantip.com ได้ เพราะมีคนเก่งทั้งประเทศอยู่ที่นั่น
3. Java Applet แต่บาง server ใช้ไม่ได้นะครับ และถ้าจะออกช้าหน่อยครับ .. รอแป๊ปนึง
ท่านต้องมีแฟ้ม .class ใน server ที่ท่านเก็บ html และ server นั้นต้องให้บริการ applet ด้วยนะครับ (ลองดูก็รู้ครับว่าใช้ได้ หรือไม่)
ถ้าท่านไม่เห็นภาพของ 3.1 และ 3.2
แสดงว่าเครื่องที่ท่านใช้อยู่ ไม่ได้ติดตั้ง Java Virtual Machine หรือไม่ได้ติดตั้ง J2SDK หรือ JRE
ต้อง Download จาก http://java.sun.com/j2se/1.4.2/download.html
Test in applet.htm
3.1 AnimText.class
<applet code="AnimText.class" width=600 height=50>
<param name=text value="Welcome to this homepage">
<param name=fontstye value="I">
<param name=fontsize value="36">
<param name=sleeptime value="100">
</applet>

Click to download : Animtext Applet file (AnimText.class)
3.2 fphover.class และ fphoverx.class
<applet code="fphover.class" codebase="" width="200" height="20">
<param name="text" value="open thaiall">
<param name="color" value="#000000">
<param name="hovercolor" value="#0000ff">
<param name="textcolor" value="#FFFFFF">
<param name="effect" value="glow">
<param name="url" value="http://www.thaiall.com" valuetype="ref">
<param name="target" value="_top">
<param name="bgcolor" value="#FFFFFF">
</applet>

Click to download : fhover.class and fhoverx.class
3.3 RainbowText.class ( RainbowText Applet file : Save As.. )
3.4 SineText.class ( SineText Applet file : Save As.. )
3.5 TickerTape.class ( TickerTape Applet file : Save As.. )
การใช้ 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

กรณีใช้ 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
สำหรับ 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>
เมนูด้วย javascript บน ntufan ล่าเรื่องแฟนคลับ 12 ก.ย.64 สร้างชุด webapp ที่เชื่อมโยงกัน ขณะนี้ได้ 8 หน้า ตั้งใจให้เป็นการออกแบบต้นแบบของ mobile app ในอนาคต แฟ้มถูกออกแบบให้เป็น htm ทั้งหมด เพื่อไม่ให้มีปัญหาในการอัพ code ขึ้น react native แล้วอัพ app เข้า play store จึงออกแบบให้เน้นการเป็น front-end ที่ไม่ต้องไปเชื่อมฐานข้อมูลภายนอก ทำงานได้แม้จะ off-line ครั้งนี้สร้าง ntufan.js ซึ่งมี 2 หน้าที่ มีตัวอย่าง code และตัวอย่างการเรียกใช้
/* file 1 : ntufan.js */
(function(d, s, id) { 
var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; 
js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
function menu (){
document.write('<div>menu1 ..' +
'menu2 ..</div>')
}
/* file 2 : arts.htm */
หน้าที่แรก คือ แสดงเมนู เรียกใช้ด้วย 
<script src="ntufan.js"></script><script>menu();</script>
อีกหน้าที่หนึ่ง คือ facebook comment เรียกใช้ด้วย
<div class="fb-comments" data-href="https://www.thaiall.com/ntufan/arts.htm" 
data-num-posts="4" data-width="100%"></div>
/* file 3 : woocommerce1.htm */
ส่วนของอัลบั้มนั้น คิดว่าน่าจะใช้แนวการเขียนอัลบั้มที่ใช้ใน woocommerce1
ตัวอย่างโค้ดที่ https://www.thaiall.com/wordpress/woocommerce1.htm
/* เทคนิคนี้ พบปัญหาการแสดงผลบนอุปกรณ์ */
if( screen.width > 480 ) { 
document.write('<fieldset style="background-color:white;width:375px"><legend>แลกเปลี่ยนกัน</legend><div class="fb-comments" data-href="https://www.thaiall.com/ntufan/arts.htm" data-num-posts="4" data-width="100%"></div></fieldset>');
}
/* เทคนิคนี้ ใช้ sdk.js ของ facebook ไม่พบปัญหาทั้ง อุปกรณ์ ใช้ได้กับ https และ index.html */
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/th_TH/sdk.js#xfbml=1&version=v11.0&appId=457891482255937&autoLogAppEvents=1" nonce="iM0L9SyJ"></script>
<div class="fb-comments" data-href="https://www.thaiall.com/ntufan/" data-width="100%" data-numposts="5"></div>
รับโค้ด และอ่านเพิ่ม ที่ https://developers.facebook.com/docs/plugins/comments/
Thaiall.com