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

ภาษาจาวาสคริปต์ คือ ภาษาโปรแกรมคล้ายภาษาซี ถูกใช้ร่วมกับภาษาเอชทีเอ็มแอลในการพัฒนาเว็บเพจ ประมวลผลในเครื่องของผู้ใช้ ช่วยให้การนำเสนอเป็นแบบโต้ตอบกับผู้ใช้ได้ในระดับหนึ่ง

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

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

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 #

โปรแกรมนี้มี 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); } }

โปรแกรม 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++; } } }

ตัวอย่าง 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>