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

1.8 : Begin of Two Times : แสดงเวลาจากจุดเริ่มต้น 2 จุด
1.7 : jnew01.htm : แสดง วันเดือนปี และเวลา พร้อม ข้อความอื่น ใน title และ status
1.6 : DayMonth : แสดง วันเดือนปี เป็นภาษาไทย และแสดงชื่อโปรแกรม และเวอร์ชั่นที่เปิดอยู่
1.5 : YearDayCount : ใช้นับอายุ ปี เดือน วัน ตัวอย่างนี้ ใช้นับอายุลูกสาว ที่ http://www.thaiall.com/girl
1.4 : Last modify : แสดงวัน-เวลา ล่าสุดที่ได้ปรับปรุงแฟ้ม และแสดงการใช้ java เขียน html
1.3 : Count down 2000 : แสดงเป็นวัน ชั่วโมง นาที วินาที ได้ละเอียดมาก
1.2 : Word run : เป็นตัวอักษรวิ่งอยู่ในหน้าเว็บ ในช่องที่กำหนด
1.1 : Digital clock : นาฬิกาแบบ digital ซึ่งเดินตลอดเวลาครับ

2.20 : slide.htm : เปิดภาพใน layer ใหม่ บนเว็บเพจเดิม ดาวน์โหลด (ปรับ code ให้อยู่ folder เดียว)
2.19 : lightbox.htm : เปิดภาพใน layer ใหม่ บนเว็บเพจเดิม ดาวน์โหลด (ปรับ code ให้อยู่ folder เดียว และลบ /images)
2.18 : contentslider.htm : นำภาพมาทำ slide show บนเว็บเพจ แบบเปลี่ยนไปทีละภาพ : ดาวน์โหลด
2.17 : dragdrop.htm : ใช้ mouse click drag และ drop คือ เลื่อนวัตถุที่ต้องการ พร้อมส่งค่าเข้า control เพื่อจัดเก็บในฐานข้อมูลต่อไป
2.16 : show_menu.htm : เมนูโฆษณาด้านขวาแบบมีปุ่ม close เลื่อนตาม scroll bar [show_menu_opt.htm]
2.15 : dmenu.htm : เมนูแบบ Drop Down ที่ใช้ dmenu_array.js และ dmenu.js ได้หลูมาก
2.14 : Drop down and Go in Blank : เลือกชื่อเว็บไซต์แล้วเปิดในหน้าต่างใหม่ ด้วย _blank
2.13 : นาฬิกาเข็มวงกลม : เหมาะกับเว็บที่มีเนื้อหาน้อย เพราะทำหน้าที่แสดงนาฬิกาเข็บบนเว็บ อาจดูเกะกะ แต่บางคนบอกว่าดูดี
2.12 : Mouse over แล้วเปลี่ยนภาพ : แต่ประยุกต์ใช้กับ div เพื่อแสดงคำอธิบายปุ่ม และควบคุมการใช้ mouse over ได้ดีมาก
2.11 : Java tree : เป็นเมนูแบบ ที่ใช้กับ phpmyadmin เป็น tree อย่างง่าย ๆ ใช้รูปร่วมด้วย 4 รูปคือ [ ]
2.10 : Layer menu : เป็นเมนูแบบ flyoutlink ที่ microsoft.com/technet ใช้ หรือที่ hitbox report ใช้งานอยู่ (Work มาก) โปรแกรมนี้เคยพบหลายครั้ง กว่าจะหา source code มาจัดการ ก็ใช้เวลานาน ดังนั้น source code ที่นำมาแสดงนี้ จะดูง่ายกว่าหลายที่หน่อย เหมาะที่จะใช้เป็นฐานพัฒนาต่อไป
2.9 : Close window : มีวิธี Close Window หลายแบบ และบางแบบต้องใช้ jclosenow.htm ช่วย ลองดูนะครับ
2.8 : Shake window : เมื่อ Click Link แล้ว ก่อนไปจะทำให้ windows จอสั่น .. น่าฉงน ว่าเกิดอะไรขึ้นหรือเปล่า
2.7 : Online quiz in java : ข้อสอบ online แบบเฉลยทันที ด้วย java อย่างง่าย
2.6 : Background change : เปลี่ยน Background อัตโนมัติ และด้วยเปลี่ยนหน้าด้วยรูปแบบที่ยอดเยี่ยม
2.5 : Drop down and GO in frame : แสดงชื่อเว็บให้เลือก แล้ว Jump หรือ Go ไปในช่องframe ที่กำหนด [jgof.htm, jgofl.htm jgofr.htm]
2.4 : Drop down and GO : แสดงชื่อเว็บให้เลือก แล้ว Jump หรือ Go ไปเปิดเว็บที่ต้องการทันที
2.3 : Mouse over แล้วเปลี่ยนภาพ : ซึ่งแบบนี้จะไม่ใช้ preload ทำให้ทุกครั้งต้องเสียเวลา load ภาพเมื่อ mouseover
2.2 : Mouse over แล้วเปลี่ยนภาพ : ซึ่งมี script ของการ preload และ switch ด้วยที่ต้องใช้ (ตัวนี้ work ครับ)
2.1 : On-Off image button : แสดงการเลือกตัวเลือกแบบ on-off โดยแสดงด้วยภาพที่แตกต่างกัน

3.3 : เลือกวันที่ : PopUp มาให้เลือกวันที่ ส่งเข้า TextBox แก้ไขจาก http://www.rainforestnet.com เพื่อแสดงวันของสัปดาห์
3.2 : คำนวน + - * / : เป็นตัวอย่างการสร้างเครื่องคำนวน เพื่อนำไปประยุกต์อย่างอื่นต่อไป
3.1 : ตรวจสอบด้วยการ click ทดสอบ : แต่ไม่ได้ป้องกันความผิดพลาดอย่างจริงจัง เพียงให้ตรวจ ก่อนส่งค่าเท่านั้น

4.3 : เพิ่ม rows ให้กรอกข้อมูล : รับข้อมูลทีละรายการ หากต้องการช่องเพิ่มข้อมูลอีก ก็กดปุ่ม + ได้
4.2 : เลือก cat แล้วแสดง subcat ตามเงื่อนไข : ประยุกต์ไปใช้เรื่องการรับค่าในสภาวะที่ต้องการได้ เคยเห็น microsoft.com ทำ แล้ว work ครับ
4.1 : Tic Tac Toe หรือที่ผมเรียกว่า XO : โปรแกรมนี้ยอดมาก ต้องยกนิ้วให้คนเขียน (ผมเพียงเอามาแก้ให้สั้นลงนะครับ)

5.8 : นาฬิกาจับเวลา : ใช้การจับวินาทีและนาที เพื่อเล่นเกม sudoku
5.7 : แสดงปฏิทิน เดือนปัจจุบันอย่างง่าย : ใช้ document.write() ง่าย ๆ
5.6 : แสดงปฏิทิน ตามปีเดือน : สวย เลือก ปีไทย และเดือน ดีกว่าแบบ 5.1
5.5 : Java Script คำนวณเวลา download 100 KB : อย่างง่าย
5.4 : ช่วย post submit บ่อย ๆ : ช่วยทดสอบว่าระบบป้องกันการ submit หรือไม่ ตั้งเวลา 30 วินาทีต่อครั้ง (ต้องมี blank.htm จะสมบูรณ์ขึ้น)
5.3 : เรียกภาพ counter ปั่น : ใช้ทดสอบว่าปั่น counter ทำได้จริงหรือไม่ (หวังว่าจะนำอาวุธไปสร้างสรรค์นะครับ)
5.2 : เปลี่ยนหน้าโดยมี Countdown : แสดงเวลาที่ลดลงเป็นวินาทีก่อนเปลี่ยนหน้า
5.1 : แสดงปฏิทิน ตามปีเดือน : แสดงผลได้เยี่ยมมาก ชัดเจน และเข้าใจง่าย แต่ไม่สวย

6.1 : อักษรเลื่อนขึ้นทั้งชุด : ไม่ใช่ java แต่เป็น marquee ของ html นำไปประยุกต์ใน java ก็ได้ ทำให้อักษรเลื่อนเป็น slide

ขั้นตอนการเรียนรู้ 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 ได้ เพราะมีคนเก่งทั้งประเทศอยู่ที่นั่น

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

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>

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>

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

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>