java script 1
TRANSCRIPT
ภาษาจาวาสครปต คอ ภาษาโปรแกรมคลายภาษาซ ถกใชรวมกบภาษา
เอชทเอมแอลในการพฒนาเวบเพจ ประมวลผลในเครองของผใช ชวยใหการ
น าเสนอเปนแบบโตตอบกบผใชไดในระดบหนง ภาษานมชอเดมวา
LiveScript ถกพฒนาโดย Netscape Navigator เพอชวยใหเวบเพจสามารถแสดงเนอหา ทมการเปลยนแปลงได ตามเงอนไข หรอสภาพแวดลอมท
แตกตางกน หรอโตตอบกบผใชไดมากขน เพราะภาษา HTML ทเปนภาษาพนฐานของเวบเพจ ท าไดเพยงแสดงขอมลแบบคงท (Static Display)
สรางเมนทสามารถตอบสนองตอการเอา mouse ไปช ได
สรางเครองคดเลข ปฏทน เกม ในเวบเพจ
เปด,ปด,เคลอนยายต าแหนงของ window
ท าตวอกษรวงแบบตางๆ
ตรวจสอบความถกตองของแบบฟอรมทผใชกรอก กอนสงขอมลไปยง Server
และอนๆ อกมากมายทไมตองตดตอกบ Server
<html><body>
<script language="javascript">…..</script>
</body></html>
<html><body>
<script type="text/javascript">…..</script>
</body></html>
หรอ
<html><body>
<script type="text/javascript">document.write("Hello World!");</script>
</body></html>
แสดงขอความ Hello World! ทหนาเวบ
Hello World!
document.write เปนค ำสงทใชเขยนผลลพธบนหนำเวบ
แทรกไวใน tag Head แทรกไวใน tag Body
แทรกไวทงใน tag Head และ tag Body
บนทกไฟล JavaScript ใหมนามสกล .js
เขยนสวนของ tag script ให src อางองไปทไฟล ทบนทกไว ดงน
การใสหมายเหตบรรทดเดยว ใหใสเครองหมาย // ไวหนาบรรทดนน
การใสหมายเหตหลายบรรทด เรมตนดวย /* และปดทายดวย */
ประกาศตวแปร x และ carname
ประกาศตวแปร x และ carname พรอมก าหนดคาเรมตน
ตวแปรจะถกประกาศอตโนมต เมอมการก าหนดคาโดยไมตองประกาศ var
Given that y=5
Given that x=10 and y=5
Given that x=5
Given that x=6 and y=3
<script language="javascript">
var x , y, z ;
x = 5
y = 2;
z = x+y ;
document.write(x + "+" + y +"= " + z);
</script>
ผลลพธ
รปแบบ
ตวอยาง
รปแบบ
ตวอยาง
รปแบบ
รปแบบ
for (ประกาศตวแปรใหมพรอมก าหนดคาเรมตน;เงอนไขการหยด;เพมคาใหตวแปร) {
ค าสงตางๆ ทจะใหท าซ า
}
while (condition) {ชดค าสง
}
<script language="javascript">
var num , round ;
num = 2;
round = 12
for(i=1;i<= round;i++){
document.write(num + " * " + i +" = " +num*i + "<br>");
}
</script>
ผลลพธ
function คอโปรแกรมยอยทท างานอยางใดอยางหนง ถกสรางขนแยกออกจากโปรแกรมหลกเพอใหสามารเรยกใชไดอยางสะดวก
การสราง function ของ JavaScript มรปแบบดงน
function ชอฟงกชน(พารามเตอร1,พารามเตอร2,..){ค าสงตาง ๆreturn คาทสงออกไป}
<script language="javascript">
function add(a,b){
result = a + b;
return result;
}
var x , y, z ;
x = 5
y = 2;
z = add(x,y) ;
document.write(x + "+" + y +"= " + z);
</script>
Alert Box
Confirm Box
Prompt Box
alert(“ขอความ”);
confirm(“ขอความ");
prompt(“ขอความ",“คาทตองการกรอกเรมตน");
<script language="javascript">
var num , round ;
var ans=confirm("คณตองการแสดงสตรคณหรอไม");
if(ans==true){
num = prompt("ใสแมสตรคณ");
round = prompt("ใสจ านวนรอบ");
for(i=1;i<= round;i++){
document.write(num + " * " + i +" = " +num*i + "<br>");
}
alert("แสดงสตรคณเรยบรอยแลว");
}else{
alert("คณไมตองการแสดงสตรคณ");
}
</script>
Event กคอ Action ตางๆทเกดขนกบสวนตางๆในเวบเพจ เชน เมอเราเอา mouse ไปทบตว link กจะเกด event onmouseover ทตว link พอเอา mouse ออก กจะเกด event onmouseout พอเรา click กจะเกด event onclick เปนตน การท างานของ event กจะมอย 2 ขนตอน คอ
1. ตรวจสอบการเกด event ทเราก าหนดไว
2. เมอเกด event ขน กจะไปเรยก function หรอค าสงตางๆมาท างาน
Event ความหมาย
onAbort เกดเมอผใชยกเลกการ load ภาพonBlur เกดเมอออบเจกตนนถกยาย focus ออกไปonChange เกดเมอผใชเปลยนแปลงคาในฟอรมรบขอมลonClick เกดเมอออบเจกตนนถก click
onError เกดเมอการ load เอกสารหรอภาพเกดขอผดพลาด
onFocus เกดเมอออบเจกตนนถก focusonLoad เกดเมอโหลดเอกสารเสรจ
onMouseover เกดเมอออบเจกตนนถกเลอน mouse pointer ไปทบ
onMouseoutเกดเมอออบเจกตนนถกเลอน mouse pointer ททบอยออกไป
onSelectเกดเมอผใชเลอกขอความ(ใช mouse ลาก)ในชองรบขอความ
onSubmit เกดเมอผใช submit แบบฟอรมonUnload เกดเมอผใชออกจากเวบเพจ
เราจะใส event ลงไปใน tag ของ html เลย เชน เวลาจะท าตว link เราใช tag <A> ถาจะท าใหมนมขอความ Alert ขนเวลาเอา mouse ไป over เขยนโคดไดดงน
<a href="" onmouseover="window.alert('Onmouseover ท างาน')">ทดสอบ onmouseover</a>
การอางองขอมลทอยบนฟอรม ท าไดโดยใช Object document จากนนตามดวย . และชอ form . ชอของ Object ตาง ๆ บนฟอรม เชน
ถาตองการเปลยนขอความทรบมาจาก TextField ใหเปนตวเลข จะใช function eval() เชน
document.ชอฟอรม.ชอTextField.value
num = eval(document.form1.txtName.value)
<body>
<form id="form1" name="form1" method="post" action="">
<input name="txtName" type="text" id="txtName" />
<input type="submit" name="Submit" value="OK" onclick="showData()"/>
</form>
<script language="javascript">
function showData(){
alert(document.form1.txtName.value);
}
</script>
</body>
อางถงเอกสาร HTML ในหนาปจจบน
ชอ form
ชอ textfield
คาทเกบอย
<body>
<form id="form1" name="form1" method="post" action="">
เลขตวท 1
<input name="txtNum1" type="text" id="txtNum1" />
<br />
เลขตวท 2
<input name="txtNum2" type="text" id="txtNum2" />
<input type="submit" name="Submit" value="บวก"
onclick="add()"/>
</form>
<script language="javascript">
function add(){
a = eval(document.form1.txtNum1.value);
b = eval(document.form1.txtNum2.value);
c = a+b;
alert(c);
}
</script>
</body>
เตรยมภาพ 3 ภาพ ◦ ภาพหลก fruit.jpg
◦ ภาพสม orange.jpg
◦ ภาพองน grape.jpg
<body><p><img src="images/fruit.jpg" name="showpic" width="401" height="214" id="showpic" /></p><p><a href="" onmouseover="showpic.src='images/orange.jpg'"
onmouseout="showpic.src='images/fruit.jpg'"> สม </a></p><p><a href="" onmouseover="showpic.src='images/grape.jpg'"
onmouseout="showpic.src='images/fruit.jpg'"> องน </a></p></body>
<body>
<script type="text/javascript">
function writeText(text){
document.getElementById("txtdata").innerHTML= text;
}
</script>
<img src="images/orange.jpg" width="190" height="137"
onmouseover="writeText('สม มผลการรกษาตอโรคเสนเลอดหวใจตบ ')"/>
<img src="images/grape.jpg" width="190" height="137"
onmouseover="writeText('องนเปนอาหารบ ารงรางกายอกชนดหนงทมสรรพคณทางยา ')" />
<table width="397" border="1" cellpadding="0" cellspacing="0" bordercolor="#666666">
<tr>
<td id="txtdata">วางเมาสทภาพเพอแสดงขอมล</td>
</tr>
</table>
</body>
เตรยมภาพ 2 ภาพ - ภาพสม orange.jpg - ภาพองน grape.jpg
ตงชอต าแหนงทตองการวางขอความ โดยจะใช Property id
ระบ ชอของ id ทจะเอาขอความไปวาง