จาวาสคริปต์ (JavaScript .js)


	จาวาสคริปต์ (JavaScript .js)

เว็บเพจสำรอง (Backup Webpages) : thaiabc.com | thaiall.com
ปรับปรุง : 2560-01-17 (print button)

สารบัญ

บทเรียน java.class ของ sun ที่ http://www.thaiall.com/class
กำลังจัดทำต้องใช้เวลาหน่อย เพราะรายละเอียดเยอะ และผมต้องทดสอบอีกมาก
ความตั้งใจเรื่อง .class ผมทำไว้ประกอบการสอนจริง ในห้องเรียน
Source สำหรับ javascript
1. สั่ง run javascript ที่ body แล้วแสดงผลใน form
2. สั่ง run เมื่อเลื่อน mouse หรือ click
3. คำนวนค่าใน text แล้วแสดงผลจากการคำนวน
4. สั่ง run javasript ใน form และแสดงผลใน form เช่นกัน
5. เรื่องของวัน และเวลา
6. ไม่ใช่ JAVA เช่น marquee
ความรู้เบื้องต้นเกี่ยวกับ java
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()

ภาษาจาวาสคริปต์ คือ ภาษาโปรแกรมคล้ายภาษาซี ถูกใช้ร่วมกับภาษาเอชทีเอ็มแอลในการพัฒนาเว็บเพจ ประมวลผลในเครื่องของผู้ใช้ ช่วยให้การนำเสนอเป็นแบบโต้ตอบกับผู้ใช้ได้ในระดับหนึ่ง
ภาษาจาวาสคริปต์ (JavaScript Language) คือ ภาษาโปรแกรมที่มีโครงสร้างคล้ายภาษาซี ทำหน้าที่แปลความหมาย และดำเนินการทีละคำสั่ง ภาษานี้มีชื่อเดิมว่า LiveScript ถูกพัฒนาโดย Netscape Navigator เพื่อช่วยให้เว็บเพจสามารถแสดงเนื้อหา ที่มีการเปลี่ยนแปลงได้ ตามเงื่อนไข หรือสภาพแวดล้อมที่แตกต่างกัน หรือโต้ตอบกับผู้ใช้ได้มากขึ้น เพราะภาษา HTML ที่เป็นภาษาพื้นฐานของเว็บเพจ ทำได้เพียงแสดงข้อมูลแบบคงที่ (Static Display)
ภาษาจาวา (Java Language) คือ ภาษาคอมพิวเตอร์ที่ถูกพัฒนาขึ้นโดยบริษัท ซันไมโครซิสเต็มส์ เป็นภาษาสำหรับเขียนโปรแกรมที่สนับสนุนการเขียนโปรแกรมเชิงวัตถุ (OOP : Object-Oriented Programming) โปรแกรมที่เขียนขึ้นถูกสร้างภายในคลาส ดังนั้นคลาสคือที่เก็บเมทอด (Method) หรือพฤติกรรม (Behavior) ซึ่งมีสถานะ (State) และรูปพรรณ (Identity) ประจำพฤติกรรม (Behavior)

แหล่งอ้างอิงสำหรับ Java Script

JavaScripter.net ดีที่สุด จึงนำเข้า thaiabc.com
OOPWeb.com สอนได้ละเอียด + ตัวอย่างเยอะ
JSMadeEasy.com ยอดเยี่ยม ดูง่าย
developer.com
javascriptsource.com
javascript.com/try
javascriptkit.com
programminghub.io
news://comp.lang.javascript

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

Blockly

ภายใต้ google for education มีบริการ try blockly ถูกใช้สำหรับการโปรแกรมด้วยภาพ สามารถประมวลผล และแสดงเป็นภาษาต่าง ๆ อาทิ javascript, python, php, lua หรือ dart แล้วมีการนำ blockly ไปต่อยอดอีกมากมาย อาทิ Code.org, Microbit, Blockly-games, CodeBug, Ozoblockly
+ thaiall.com/google
+ thaiall.com/scratch

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>

ตัวอย่าง Javascript อย่างสั้น
1. แสดงข้อความที่ Status Bar เมื่อวาง Mouse อยู่เหนือ Link
Sample of OnMouseOver + Window.Status <a href='http://www.thaiall.com' onMouseOver="window.status='go home of thaiall.com';return true;" onMouseOut="window.status='onMouseOut';return true;"> Sample of OnMouseOver + Window.Status</a>
2. เขียนโปรแกรมคุมเหตุการณ์กับ checkbox
<script language=javascript> function j() { document.x.y.value = "abc"; alert("abc"); } </script> <form name=x> <input name=y> <input type=checkbox onclick=javascript:alert("ok");> <input type=checkbox onclick=javascript:document.x.y.value="yonok";> <input type=checkbox onclick=javascript:document.x.y.value="lampang";> <input type=checkbox onclick=j();> </form>
3. ตัวอย่าง Link ของ Back, Print, Close และการแสดงรุ่นของ Browser บน Status Bar
<script> <!-- var detect = 'Result : ' + navigator.userAgent.toLowerCase(); detect = detect + '[found OS : '+ checkIt("msie") + ']'; stat(); function stat(){ window.status=detect; } function checkIt(osname){ place = detect.indexOf(osname); return place; } //--> </script> <body> <a href="javascript:history.back()">Back</a> <a href="javascript:window.print()">Print</a> <a href="javascript:window.close()">Close</a>
4. คุมการแสดงผลด้วยการตรวจ URL ประยุกต์ใช้กับ footer ของ thaiall.com
<script language=JavaScript> <!-- page="java"; document.write("<b>Current URL</b> : " + document.location.href + " ") document.write("<b>Your resolution</b> : " + screen.width + " * " + screen.height+"<br>") url = document.location.href.substr(7,11) if (url == "www.yonok.a" ) document.write("<script language='javascript1.1' src='http://hits1.truehits.net/data/c0001943.js'></script>") if (url == "www.thaiall" ) document.write("<script language='javascript1.1' src='http://hits1.truehits.net/data/c0001941.js'></script>") //--> </script>
5. ตรวจ Querystring เพื่อสั่งแสดง หรือไม่แสดงภาพในเว็บเพจ [querystring.htm]
<script> function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } } </script> test querystring in javascript<br> querystring.htm?img=yes<br> <br> <script> if (getQueryVariable("img") == 'yes') { document.write('<img src="http://www.thaiall.com/me/picme.jpg">'); } else { document.write('<br>[img]<font color=green>http://www.thaiall.com/me/picme.jpg</font>[/img]'); } </script> <a href=http://www.thaiall.com/os/os01.htm?img=yes>img=yes</a> <a href=http://www.thaiall.com/os/os01.htm?img=no>img=no</a>
6. ตรวจสอบการกด checkbox ก่อนรับ textbox เห็นข้อความใน textbox แต่แก้ไขไม่ได้ เพราะ disabled ไว้ ต้อง Click CheckBox
<script language="JavaScript"> <!-- function doCheck1(which,id) { if(id=='1') { if(which.checked==true) { alert("OK !!! "); document.form2.detail1.disabled=false; } else { alert("Not OK !!! "); document.form2.detail1.disabled=true; } } if(id=='2') { document.form2.detail2.disabled=false; } if(id=='3') { document.form2.detail3.disabled=false; } } // --> </script> <form name="form2">Are you ok?<br> <input type="checkbox" name="status" onclick="doCheck1(this,'1');"> Your Name <input type="text" name="detail1" value='aaa' disabled><br> <input type="checkbox" name="status" onclick="doCheck1(this,'2');"> Your Address <input type="text" name="detail2" value='aaa' disabled><br> <input type="checkbox" name="status" onclick="doCheck1(this,'3');"> Your Position <input type="text" name="detail3" value='aaa' disabled><br> </form>
admin@loeione.net ส่ง Script ที่ปรับปรุงเป็น Array มาให้ผมดู .. น่าสนใจมาก ที่ส่งมาให้ผมดูเป็น PHP แต่ผมนำมาปรับปรุงเป็น JavaScript อย่างเดียว จะได้ Run ได้ทุกเครื่อง <script language="JavaScript"> <!-- function chk() { var status = document.getElementsByName("status"); var detail = document.getElementsByName("detail"); for(var i=0 ; i<3 ; i++){ document.form2.detail[i].disabled=false; } } // --> </script> <form name="form2"> <script language="JavaScript"> <!-- for(var i=0;i<3;i++){ document.write("<input type=checkbox name=status[] id=status value=" + i + " onclick='chk();'>"); document.write("Your Name <input type=text name=detail[] id=detail value=" + i + " disabled><br>"); } // --> </script> </form>
7. Select ใน List ไปใส่ใน Textbox ใน textbox ไม่มีอะไร เมื่อเลือกจาก select จะโยนค่าเข้า textbox อัตโนมัติ
<form action=? method=post> <input name=docfile> <select name=file onclick=javascript:docfile.value=file.value;> <option value=''>Please Select if you have a file <option value='3271-bb.jpg'>3271-bb.jpg <option value='bank.mdb'>bank.mdb <option value='tftpd32.gif'>tftpd32.gif </select> <input type=submit> </form>
8. Redirect แบบเปิดใหม่ใน iframe หรือ _top
<!-- เปลี่ยน page ทุก 10 วินาที (นำไปประยุกต์กับ frame ได้) Update from : http://www.thaiall.com/java/jchgpgt.htm --> <html><head><script language="JavaScript"> <!-- startday = new Date(); clockStart = startday.getTime(); function getSecs() { var myTime = new Date(); var mySecs1 = ""+(myTime.getTime() - clockStart) / 1000; mySecs1= mySecs1.substring(0,mySecs1.indexOf(".")); if (mySecs1 == "10") { window.open("http://www.weblampang.com","frame1"); } if (mySecs1 == "20") { window.open("http://www.thaiabc.com","frame1"); } if (mySecs1 == "30") { window.open("http://www.thainame.net","frame1"); } if (mySecs1 == "40") { window.open("http://www.lovelampang.com","_top"); } window.setTimeout('getSecs()',1000); } // --> </script> </head> <body onload="window.setTimeout('getSecs()',1)">ปรับปรุง : 2548-12-20<br> <iframe src=http://www.thaiall.com width=300 height=300 name=frame1> </iframe>
9. ย้าย Cursor ไป Text ต่อไปอัตโนมัติ เมื่อป้อนรหัสครบแล้ว
<!-- http://www.shiningstar.net --> <form name=wow> ID7:<input name=m1 onKeyDown="textCounter(document.wow.m1,document.wow.Len1,7)" onKeyUp="textCounter(document.wow.m1,document.wow.Len1,7)"> <input readonly type=hidden name=Len1> <br> ID7:<input name="m2" onKeyDown="textCounter(document.wow.m2,document.wow.Len2,7)" onKeyUp="textCounter(document.wow.m2,document.wow.Len2,7)"> <input readonly type=text name=Len2> <input type=reset> </form> <script language=javascript> function textCounter(field,cntfield,maxlimit) { if (field.value.length >= maxlimit) { field.value = field.value.substring(0, maxlimit); document.wow.m2.focus(); } else cntfield.value = maxlimit - field.value.length; } </script>
10. Random ภาพแสดงในเว็บเพจ
<html><head> <script type="text/javascript"> <!-- var random_images = new Array (); random_images[0] = "http://www.thaiall.com/me/picme.jpg"; random_images[1] = "http://www.thaiall.com/actress/joom04s.jpg"; random_images[2] = "http://www.thaiall.com/actress/am07t.jpg"; random_images[3] = "http://www.thaiall.com/actress/a04t.jpg"; function pick_image () { var now=new Date(); ran = (now.getSeconds() % 4) - 1; document.getElementById("imgx").src = random_images[ran]; } --> </script> </head> <body onload="pick_image()"> <img id="imgx">
11. Pop up and change parent page
<script> function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } } if (getQueryVariable("action") != 'blank') { if (getQueryVariable("action") == 'close') { document.write('<form><input type=button value=close onclick="javascript:window.close()"></form>'); } else { document.write('<form name=x><input name=a value=a><input type=button value=click onclick=j()></form>'); } } else { document.write('blank'); } function j() { location = "chkpop.htm?action=blank"; win=window.open("chkpop.htm?action=close","popup","height=200,width=200,left=150,top=150"); // document.x.a.value = "abc"; // alert("abc"); } </script>	chkpop.htm
12. Multiple Table
<head><script>function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } } </script></head> <body><font ='courier new' size=6> <script> var m = getQueryVariable("m"); if (m > 0) { for(var i=1;i<=12;i++) document.write(m+" * "+i+" = "+i*m+"<br>"); }else{ for(var i=1;i<=12;i++) document.write("<a href=multable.htm?m="+i+">"+i+"</a>"); } </script>	multable.htm
13. pop-up confirm
<script type="text/javascript"> function confirmSend() { alert("Ask for confirm?"); if (confirm("confirm ??")) { document.f.submit(); } else { alert("cancel"); } } </script> <form name=f action=multable.htm method=get> your number :<input name=m value=5> <input type=button value=send name=b1 onclick={confirmSend();}> </form>
14. Add Input Field (Refresh)
<form action='addinput.htm'> <script language=JavaScript> <!-- function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } } document.write("<input name=a1>"); document.write("<a href=addinput.htm?t=2>#</a><br>"); if (getQueryVariable("t") > 0) { for(j=2;j<=getQueryVariable("t");j++) { document.write("<input name=a" + j + ">"); document.write("<a href=?t=" + (j + 1) +">#</a><br>"); } } --> </script> <input type=submit> </form>	addinput.htm
15. Add Input Field (Not Refresh)
<form name=f action='addinput2.htm' method=get> <div id=frmout> <input name=a1><a href='javascript:;' onclick='getvar(2)'>#</a><br> </div> <input type=submit></form> <script language=JavaScript> <!-- function getvar(variable) { x = document.getElementById("frmout"); for (var j=variable;j<=variable;j++) { x.innerHTML +="<input name=a" + j + ">"; x.innerHTML +="<a href='javascript:;' onclick='getvar(" + (j + 1) +")'>#</a><br>"; } } --> </script>	addinput2.htm
16. Difference Color on Rows
<script language=JavaScript> <!-- i = 0; var c = new Array (); c[i++] ='tom'; c[i++] ='dang'; c[i++] ='boy'; c[i++] ='jack'; for(j=0;j<i;j++) { if (j % 2 == 0) document.write("<font color=gray>"+ c[j] + "</font> "); else document.write(c[j] + " "); } --> </script>
17. Check Zero or Not Number
<html><head><script> function chknum(fm) { if (fm.num.value == 0) { alert("zero"); return false;} if (!(fm.num.value * 1)) { alert("not number or zero"); return false; } if (!(fm.num.value * 1) && (fm.num.value != 0)) { alert("not number"); return false; } } </script></head><body> <form action="indexo.html" onsubmit="return chknum(this);"> <input name=num> <input type=submit> </form>
18. Create and Execute text file by Javascript (wscript_notepad.htm)
<script> /* Allow Blocked Content = yes // Enabled on : Internet Options, Security, ActiveX, Initialize and Script .. // var pause = 0; // var wdDialogFileOpen = 80; // var wdApp = new ActiveXObject("Word.Application"); // var dialog = wdApp.Dialogs(wdDialogFileOpen); // var button = dialog.Show(pause); */ var fso = new ActiveXObject("Scripting.FileSystemObject"); obj = fso.CreateTextFile("C:\\x.bat", true); obj.writeline("echo ab > c:\\y.bat"); obj.writeline("echo cd >> c:\\y.bat"); obj.writeline("exit"); obj.close(); // var r = eval("var str=\"ab\";alert(str.charAt(\"%48\"))"); // a alert(str.charCodeAt(0) + str.charCodeAt(1)); // 195 // var sh = new ActiveXObject("WScript.Shell"); sh.run ("notepad.exe c:\\x.bat"); sh.run ("cmd /k c:\\x.bat"); </script>
19. Hide & Unhide Layer แบบธรรมดา
<html><head><title>hide - unhide</title> <script>function unhide (){ document.getElementById("link").style.visibility='visible'; document.getElementById("square").style.visibility='visible'; document.getElementById("square").style.height=100; } function hide (){ document.getElementById("link").style.visibility='hidden'; document.getElementById("square").style.visibility='hidden'; document.getElementById("square").style.height=10; }</script> </head><body> <div id="square" onclick=hide() style='border:1px;left:10px;top:10px;'> test<a id="link">click to hide</a> </div> </br><a onclick=unhide()>click to unhide</a>
20. Hide & Unhide Layer แบบหด ขยายได้
<script>function unhide (page){ document.getElementById(page).style.visibility='visible'; document.getElementById(page).style.position='relative'; } function hide (page){ document.getElementById(page).style.visibility='hidden'; document.getElementById(page).style.position='absolute'; }</script> </head><body> + <a href="javascript:unhide('data1')">ขยาย</a> <div id="data1" style='border:1px solid;position:absolute;visibility:hidden;'> <a href="javascript:hide('data1')">หด</a> \| รถไฟ เรือเมย์ ลิเก ตำรวจ</div> <br>+ <a href="javascript:unhide('data2')">ขยาย</a> <div id="data2" style='border:1px solid;position:absolute;visibility:hidden;'> <a href="javascript:hide('data2')">หด</a> \| ประเทศไทยรวมเลือดเนื้อชาติเชื้อไทย ...</div>
21. เปลี่ยนขนาดตัวอักษร
<script type="text/javascript"> function getQueryVariable(variable) { var vars = window.location.search.substring(1).split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } } if (typeof(getQueryVariable("s"))=="undefined") document.write("<table bgcolor='#808080'><tr><td>header</td></tr></table>"); </script> ขนาด <a href="fontsize.htm?s=8" style="font-size:8pt">เล็ก</a>, <a href="fontsize.htm?s=20" style="font-size:20pt">ใหญ่</a> <script type="text/javascript"> if (getQueryVariable("s")){ if (getQueryVariable("s") == '8') { document.write('<style type=text/css>.fnt1{font-family:microsoft sans serif;font-size:8pt}</style>');} if (getQueryVariable("s") == '20') { document.write('<style type=text/css>.fnt1{font-family:microsoft sans serif;font-size:20pt}</style>');} }else{document.write('<style type=text/css>.fnt1{font-family:microsoft sans serif;font-size:20pt}</style>');} </script> <table><tr><td class="fnt1">กขคง</td></tr></table>	fontsize.htm
22. ทดสอบและคำนวณกับ textbox (checktextbox.htm :: job_form_v1.htm )
<script language="JavaScript"> <!-- function burin(v1,v2,v3,v4) { alert(v1 + v2); //12 alert(v3 + v4); // 7 var t1 = document.myform.t1.value; var cal = t1 * 2; if ((isNaN(cal))) { alert("number required") var n = t1.substring(0,t1.length - 1); document.myform.t1.value=n; } else { document.myform.t2.value=cal; } document.myform.t3.value="a"; } // --> </script> <form name="myform"> <input name="t1" onkeyup="JavaScript:burin('1','2',3,4);"> <input name="t2"> <input name="t3"> </form>
23. setfocus
<form name=f> <input type=button name=b1 value=step1 onclick="document.f.b2.focus();"> <input type=button name=b2 value=step2 onclick="b3_0()"> <input type=button name=b3 value=step3 onclick="b3_1(1)"> <input type=button name=b3 value=step4> </form> <script> document.f.b1.focus(); function b3_0() { document.f.b3[0].focus(); } function b3_1(i) { document.f.b3[i].focus(); } </script>
24. window.open
<script> function o() { window.open("blank.htm","popup","height=200,width=200,left=150,top=150,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no"); } </script> <a onclick="o()"><u>click</u></a> <a href="#" onclick={window.open("blank.htm","popup","height=200,width=200,left=150,top=150,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no")}><u>click</u></a>
25. open 10 iframe
<html><head> <script language="JavaScript"> function getSecs() { var myTime = new Date(); var t0 = ""+myTime.getTime() / 1000; t1= t0.substring(0,t0.indexOf(".")); t2= t0.substring(0,t0.indexOf(".")) % 10; // 10 seconds if (t2 == "0") { for (var i=0;i<10;i++) { window.open("http://www.sanook.com/?"+ t1 + i,"fr" + i); } } window.setTimeout('getSecs()',1000); } </script></head><body onload="window.setTimeout('getSecs()',1)"> <script language="JavaScript"> for (var i=0;i<10;i++) { w = "<iframe src=about:blank width=800 height=100 name=fr" + i + "></iframe>"; document.write(w); } </script> </body></html>

แอพสอนเขียนโปรแกรมด้วย 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 เป็นต้น

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

Begin of Two Times

jnew01.htm

วันเดือนปี และเวลา

ข้อความอื่น

วันเดือนปี

ใช้นับอายุลูกสาว

กลุ่ม 2 : สั่ง run เมื่อเลื่อน mouse หรือ click

Drop down and Go in Blank

นาฬิกาเข็มวงกลม

Mouse over แล้วเปลี่ยนภาพ

Java tree

Drop down and GO in frame

Drop down and GO

Mouse over แล้วเปลี่ยนภาพ

ตัวนี้ work ครับ

On-Off image button

กลุ่ม 3 : คำนวนค่าใน text แล้วแสดงผลจากการคำนวน

เลือกวันที่

คำนวน + - * /

ตรวจสอบด้วยการ click ทดสอบ

กลุ่ม 4 : สั่ง run javasript ใน form และแสดงผลใน form เช่นกัน

เพิ่ม rows ให้กรอกข้อมูล

เลือก cat แล้วแสดง subcat ตามเงื่อนไข

Tic Tac Toe หรือที่ผมเรียกว่า XO

กลุ่ม 5 : เรื่องของวัน และเวลา

แสดงปฏิทิน เดือนปัจจุบันอย่างง่าย

แสดงปฏิทิน ตามปีเดือน

Java Script คำนวณเวลา download 100 KB

ช่วย post submit บ่อย ๆ

blank.htm

เรียกภาพ counter ปั่น

เปลี่ยนหน้าโดยมี Countdown

แสดงปฏิทิน ตามปีเดือน

กลุ่ม 6 : ไม่ใช่ JAVA

อักษรเลื่อนขึ้นทั้งชุด

เขียนปิรามิด ไว้ฝึกเขียนโปรแกรมที่ :

http://www.thaiall.com/article/teachpro.htm

2. ความรู้เบื้องต้นเกี่ยวกับ java

ขั้นตอนการเรียนรู้ Java มีดังนี้

หาประสบการณ์เกี่ยวกับ .class ด้วยการลองนำมาใช้ หรือเข้าไปหา download ที่ http://javaboutique.internet.com/applets/ มาลองใช้ จะได้มี idea พัฒนาโปรแกรมของตนเองในอนาคต
ไปเว็บ 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]
หลังติดตั้งจะมีห้อง c:\j2sdk1.4.0 ซึ่งจะติดตั้ง Demo ให้ด้วย กินเนื้อที่ไปตั้ง 70 Mb ไหน ๆ ก็เสียพื้นที่ .. ใช้ให้เป็นประโยชน์นะครับ
อธิบายสภาพแวดล้อม http://java.sun.com/docs/white/langenv/
แนะนำการเริ่มต้นกับ java เป็น step ที่ http://developer.java.sun.com/developer/onlineTraining/new2java/
ดูวิธี compile และ run ที่ http://developer.java.sun.com/developer/onlineTraining/new2java/programming/learn/
ทดสอบเขียน 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);
  }
}
```
การทดสอบว่า java ที่เขียนขึ้นให้ผลเป็นอย่างไร ให้สร้างแฟ้ม testgraph.htm เพื่อจะเรียก testgraph.class มาแสดงผล
โปรแกรม testgraph.htm นี้มี 7 บรรทัด <body bgcolor=blue> <applet code="testgraph.class" width=200 height=200> </applet> </body>
applet.htm

จากหลักการที่ประยุกต์มาจาก 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

เรื่อง 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.. )