การใช้งาน
จาวาสคริปต์ เป็นภาษาในรูปแบบของภาษาโปรแกรมแบบโปรโตไทพ โดยมีโครงสร้างของภาษาและไวยกรณ์อยู่บนพื้นฐานของภาษาซี
ปัจจุบันมีการใช้จาวาสคริปต์ที่ฝังอยู่ในเว็บเบราว์เซอร์ในหลายรูปแบบ เช่น ใช้เพื่อสร้างเนื้อหาที่เปลี่ยนแปลงเสมอภายในเว็บเพจ, ใช้เพื่อตรวจสอบความถูกต้องของข้อมูลที่ผู้ใช้กรอกก่อนนำเข้าระบบ, ใช้เพื่อเข้าถึงข้อมูลที่อยู่ภายใต้โครงสร้างแบบ Document Object Model (DOM)เป็นต้น
นอกจากนี้จาวาสคริปต์ยังถูกฝังอยู่ในแอปพลิเคชันต่างๆ นอกเหนือจากเว็บเบราว์เซอร์ได้อีกด้วย เช่น widget ของ ยาฮู! เป็นต้น โดยรวมแล้วจาวาสคริปต์ถูกใช้เพื่อให้นักพัฒนาโปรแกรม สามารถเขียนสคริปต์เพื่อสร้างคุณสมบัติพิเศษต่างๆ เพิ่มเติมจากที่มีอยู่บนแอปพลิเคชันดังเดิม
โปรแกรมใดๆ ที่สนับสนุนจาวาสคริปต์จะมีตัวขับเคลื่อนจาวาสคริปต์ (JavaScript Engine) ของตัวเอง เพื่อเรียกใช้งานโครงสร้างเชิงวัตถุของโปรแกรมหรือแอปพลิเคชันนั้นๆ
- Source www.thaiall.com
ขั้นตอนการเรียนรู้ Java มีดังนี้
แหล่งอ้างอิงสำหรับ Java Script
| Short JavaScript |
| 1. แสดงข้อความที่ Status Bar เมื่อวาง Mouse อยู่เหนือ Link |
Sample of OnMouseOver + Window.Status <a href='https://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> </body> |
| 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='https://hits1.truehits.net/data/c0001943.js'></script>") if (url == "www.thaiall" ) document.write("<script language='javascript1.1' src='https://hits1.truehits.net/data/c0001941.js'></script>") //--> </script> |
| 5. ตรวจ Querystring เพื่อสั่งแสดง หรือไม่แสดงภาพในเว็บเพจ [querystring.htm] |
Sample : https://www.thaiall.com/os/os01.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="https://www.x.com/x.jpg">'); } else { document.write('<br>[img]<font color=green>https://www.x.com/x.jpg</font>[/img]'); </script> |
| 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(which,id) { var status = document.getElementsByName("status"); var detail = document.getElementsByName("detail"); for(var i=0 ; i<3 ; i++){ if(status(i).checked){ document.form2.detail(i).disabled=false; }else{document.form2.detail(i).disabled=true; } } } // --> </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 : https://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("https://www.thaiall.com","frame1"); } if (mySecs1 == "20") { window.open("https://www.thaiabc.com","frame1"); } if (mySecs1 == "30") { window.open("https://www.thainame.net","frame1"); } if (mySecs1 == "40") { window.open("https://www.lovelampang.com","_top"); } window.setTimeout('getSecs()',1000); } // --> </script> </head> <body onload="window.setTimeout('getSecs()',1)">ปรับปรุง : 2548-12-20<br> <iframe src=https://www.101-idea.com width=300 height=300 name=frame1> </iframe></body></html> |
| 9. ย้าย Cursor ไป Text ต่อไปอัตโนมัติ เมื่อป้อนรหัสครบแล้ว |
<!-- https://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] = "https://www.thaiall.com/me/picme.jpg"; random_images[1] = "https://wbi.edtechno.com/user/pix.php/1/f1.jpg"; random_images[2] = "https://www.kradandum.com/E-learning/user/pix.php/1/f1.jpg"; random_images[3] = "https://moodle.org/user/pix.php/13092/f1.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"> </body></html> |
| 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>'); } } function j() { location = "test.php?action=blank"; win=window.open("test.php?action=close","popup","height=200,width=200,left=150,top=150"); // document.x.a.value = "abc"; // alert("abc"); } </script> |
| 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 =fixedsys 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=?m="+i+">"+i+"</a>"); } </script> |
| 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=x.php method=post> your name :<input name=n> <input type=button value=send name=b1 onclick={confirmSend();}> </form> |
| 14. Add Input Field (Refresh) [addinput.htm] |
<form action=''> <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=?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> |
| 15. Add Input Field (Not Refresh) [addinput2.htm] |
<form name=f action='' method=get> <input type=checkbox name=a selected> <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> |
| 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" href=index>index</a> </div> </br><a onclick=unhide()>unhide</a> </body></html> |
| 20. Hide & Unhide Layer แบบหด ขยายได้ |
<html><head><title>hide - unhide</title> <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> </body></html> |
| 21. เปลี่ยนขนาดตัวอักษร (fontsize.htm) |
<head><title>เปลี่ยนขนาดตัวอักษร</title> <meta http-equiv="content-type" content="text/html; charset=windows-874"></head> <body><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="?s=8" style="font-size:8pt">เล็ก</a>, <a href="?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> </body></html> |
| 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> |
