จาวาสคริปต์ (JavaScript .js)
เว็บเพจสำรอง (Backup Webpages) : thaiabc.com | thaiall.com
ปรับปรุง : 2554-10-29 (เพิ่ม ckeditor)
    สารบัญ
  1. บทเรียน java.class ของ sun ที่ http://www.thaiall.com/class
    กำลังจัดทำต้องใช้เวลาหน่อย เพราะรายละเอียดเยอะ และผมต้องทดสอบอีกมาก
    ความตั้งใจเรื่อง .class ผมทำไว้ประกอบการสอนจริง ในห้องเรียน
  2. Source สำหรับ 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
  5. Mirror: http://lampang.thcity.com/java
  6. Mirror: http://www.perlphpasp.com/java
    ตัวอย่างคำสั่งที่น่าสนใจ
    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()
ภาษาจาวาสคริปต์ คือ ภาษาโปรแกรมคล้ายภาษาซี ถูกใช้ร่วมกับภาษาเอชทีเอ็มแอลในการพัฒนาเว็บเพจ ประมวลผลในเครื่องของผู้ใช้ ช่วยให้การนำเสนอเป็นแบบโต้ตอบกับผู้ใช้ได้ในระดับหนึ่ง
ภาษาจาวาสคริปต์ (JavaScript Language) คือ ภาษาโปรแกรมที่มีโครงสร้างคล้ายภาษาซี ทำหน้าที่แปลความหมาย และดำเนินการทีละคำสั่ง ภาษานี้มีชื่อเดิมว่า LiveScript ถูกพัฒนาโดย Netscape Navigator เพื่อช่วยให้เว็บเพจสามารถแสดงเนื้อหา ที่มีการเปลี่ยนแปลงได้ ตามเงื่อนไข หรือสภาพแวดล้อมที่แตกต่างกัน หรือโต้ตอบกับผู้ใช้ได้มากขึ้น เพราะภาษา HTML ที่เป็นภาษาพื้นฐานของเว็บเพจ ทำได้เพียงแสดงข้อมูลแบบคงที่ (Static Display)
ภาษาจาวา (Java Language) คือ ภาษาคอมพิวเตอร์ที่ถูกพัฒนาขึ้นโดยบริษัท ซันไมโครซิสเต็มส์ เป็นภาษาสำหรับเขียนโปรแกรมที่สนับสนุนการเขียนโปรแกรมเชิงวัตถุ (OOP : Object-Oriented Programming) โปรแกรมที่เขียนขึ้นถูกสร้างภายในคลาส ดังนั้นคลาสคือที่เก็บเมทอด (Method) หรือพฤติกรรม (Behavior) ซึ่งมีสถานะ (State) และรูปพรรณ (Identity) ประจำพฤติกรรม (Behavior)
    แหล่งอ้างอิงสำหรับ Java Script
  1. JavaScripter.net ดีที่สุด จึงนำเข้า thaiabc.com
  2. OOPWeb.com สอนได้ละเอียด + ตัวอย่างเยอะ
  3. ShiningStar.net เช่น Validate (length)
  4. PerlScripten.de เยอะแต่ไม่ใช่ english
  5. ตัวอย่าง dialog.js ทำให้ textarea มี web editor ในตัว
  6. JSMadeEasy.com ยอดเยี่ยม ดูง่าย
  7. ScriptBreaker.com
  8. hotscripts.com
  9. developer.com
  10. javascriptsource.com
  11. javascript.com
  12. internet.com
  13. how2trip.com
  14. javascriptkit.com
  15. news://comp.lang.javascript

ผู้สนับสนุน ยินดีรับ ผู้สนับสนุน เว็บไซต์ด้านการศึกษา
กลุ่มเว็บไซต์นี้ เริ่มพัฒนา พ.ศ.2542
โดยบุคลากรทางการศึกษาด้านคอมพิวเตอร์
โทร. 081-9927223 (ผมเป็นคนลำปางหนา)
ปล. ขอไม่รับ work at home / อาหารเสริม
ตัวอย่าง 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
24. window.open

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

    กลุ่ม 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.. )

แนะนำเว็บใหม่ : ผลการจัดอันดับ
รักลำปาง : thcity.com : korattown.com : topsiam.com : มหาวิทยาลัยเนชั่น
ศูนย์สอบ : รวมบทความ : ไอทีในชีวิตประจำวัน : ดาวน์โหลด : yourname@thaiall.com
ติดต่อ ทีมงาน ชาวลำปาง มีฝันเพื่อการศึกษา Tel.08-1992-7223