| จาวาสคริปต์ (JavaScript .js) ที่ผมใช้ | |
|
|
Short 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>
</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='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]
|
| Sample : http://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="http://www.x.com/x.jpg">'); } else { document.write('<br>[img]<font color=green>http://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 : 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.thaiall.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.101-idea.com width=300 height=300 name=frame1>
</iframe></body></html>
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://wbi.edtechno.com/user/pix.php/1/f1.jpg";
random_images[2] = "http://www.kradandum.com/E-learning/user/pix.php/1/f1.jpg";
random_images[3] = "http://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");
if (!(fm.num * 1)) alert("not number or zero");
if (!(fm.num * 1) && (fm.num.value != 0)) alert("not number");
}
</script></head><body>
<form action="" onsubmit="chknum(this)">
<input name=num>
<input type=submit>
</form>
|
| HTMLArea หรือ TinyMCE
คือ Javascript สำหรับทำให้ textarea ที่รับข้อมูลได้คล้าย word
ขั้นตอนการติดตั้ง และทดสอบใน Webserver http://127.0.0.1
| 1. download script จาก 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 อย่างลึก จึงขอละไว้ในฐานที่เข้าใจ เพียงเท่านี้
|
|
1. Java Script Sample เพียงเปิดตัวอย่าง, view source, และ copy ไปใช้ได้เลย (ง่ายไหมครับ) |
กลุ่ม 1 : สั่ง run javascript ที่ body แล้วแสดงผลใน form
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.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.2 : คำนวน + - * / : เป็นตัวอย่างการสร้างเครื่องคำนวน เพื่อนำไปประยุกต์อย่างอื่นต่อไป 3.1 : ตรวจสอบด้วยการ click ทดสอบ : แต่ไม่ได้ป้องกันความผิดพลาดอย่างจริงจัง เพียงให้ตรวจ ก่อนส่งค่าเท่านั้น กลุ่ม 4 : สั่ง run javasript ใน form และแสดงผลใน form เช่นกัน
4.1 : Tic Tac Toe หรือที่ผมเรียกว่า XO : โปรแกรมนี้ยอดมาก ต้องยกนิ้วให้คนเขียน (ผมเพียงเอามาแก้ให้สั้นลงนะครับ) กลุ่ม 5 : เรื่องของวัน และเวลา ::
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 : ไม่ใช่ JAVA แต่สามารถนำไปประยุกต์ได้หลากหลาย ดู perfect มาก
เขียนปิรามิด ไว้ฝึกเขียนโปรแกรมที่ : http://www.thaiall.com/article/teachpro.htm (แนวการสอนเขียนโปรแกรมของผม) |
| 2. ความรู้เบื้องต้นเกี่ยวกับ java |
|
| 3. Java Applet แต่บาง server ใช้ไม่ได้นะครับ และถ้าจะออกช้าหน่อยครับ รอแป๊ปนึง |
|
ท่านต้องมีแฟ้ม .class ใน server ที่ท่านเก็บ html และ server นั้นต้องให้บริการ applet ด้วยนะครับ (ลองดูก็รู้ครับว่าใช้ได้ หรือไม่)
แสดงว่าเครื่องที่ท่านใช้อยู่ ไม่ได้ติดตั้ง Java Virtual Machine หรือไม่ได้ติดตั้ง J2SDK หรือ JRE ต้อง Download จาก http://java.sun.com/j2se/1.4.2/download.html <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.. ) |
