More Related Content
Similar to Java script 1 (20)
Java script 1
- 2. ภาษาจาวาสคริปต์ คือ ภาษาโปรแกรมคล้ ายภาษาซี ถูกใช้ ร่วมกับภาษา
เอชทีเอ็มแอลในการพัฒนาเว็บเพจ ประมวลผลในเครื่องของผู้ใช้ ช่วยให้ การ
นาเสนอเป็ นแบบโต้ ตอบกับผู้ใช้ ได้ ในระดับหนึ่ง ภาษานี้มีช่ ือเดิมว่า
LiveScript ถูกพัฒนาโดย Netscape Navigator เพื่อช่วยให้ เว็บ
เพจสามารถแสดงเนื้อหา ที่มีการเปลี่ยนแปลงได้ ตามเงื่อนไข หรือสภาพแวดล้ อมที่
แตกต่างกัน หรือโต้ ตอบกับผู้ใช้ ได้ มากขึ้น เพราะภาษา HTML ที่เป็ นภาษา
พื้นฐานของเว็บเพจ ทาได้ เพียงแสดงข้ อมูลแบบคงที่ (Static Display)
- 3. สร้ างเมนูท่สามารถตอบสนองต่อการเอา mouse ไปชี้ได้
ี
สร้ างเครื่องคิดเลข ปฏิทน เกม ในเวบเพจ
ิ
เปิ ด,ปิ ด,เคลื่อนย้ ายตาแหน่งของ window
ทาตัวอักษรวิ่งแบบต่างๆ
ตรวจสอบความถูกต้ องของแบบฟอร์มที่ผ้ ูใช้ กรอก ก่อนส่งข้ อมูลไปยัง Server
และอื่นๆ อีกมากมายที่ไม่ต้องติดต่อกับ Server
- 4. <html> <html>
<body> <body>
<script language="javascript"> <script type="text/javascript">
….. …..
</script>
หรือ </script>
</body> </body>
</html> </html>
แสดงข้อความ Hello World! ที่หน้ าเว็บ
<html>
<body>
<script type="text/javascript"> Hello World!
document.write("Hello World!");
</script>
</body> document.write เป็ นคำสังทีใช้เขียนผลลัพธ์บนหน้ำเว็บ
่ ่
</html>
- 6. บันทึกไฟล์ JavaScript ให้ มีนามสกุล .js
เขียนส่วนของ tag script ให้ src อ้ างอิงไปที่ไฟล์ ที่บันทึกไว้ ดังนี้
- 7. การใส่หมายเหตุบรรทัดเดียว ให้ ใส่เครื่องหมาย // ไว้ หน้ าบรรทัดนั้น
การใส่หมายเหตุหลายบรรทัด เริ่มต้ นด้ วย /* และปิ ดท้ ายด้ วย */
- 8. ประกาศตัวแปร x และ carname
ประกาศตัวแปร x และ carname พร้ อมกาหนดค่าเริ่มต้ น
ตัวแปรจะถูกประกาศอัตโนมัติ เมื่อมีการกาหนดค่าโดยไม่ต้องประกาศ var
- 23. Alert Box
alert(“ข ้อความ”);
Confirm Box
confirm(“ข ้อความ");
Prompt Box
prompt(“ข ้อความ",“ค่าทีต ้องการกรอกเริมต ้น");
่ ่
- 24. <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>
- 25. Event ก็คือ Action ต่างๆที่เกิดขึ้นกับส่วนต่างๆในเวบเพจ เช่น เมื่อ
เราเอา mouse ไปทับตัว link ก็จะเกิด event onmouseover ที่ตัว
link พอเอา mouse ออก ก็จะเกิด event onmouseout พอเรา
click ก็จะเกิด event onclick เป็ นต้ น การทางานของ event ก็จะมีอยู่
2 ขั้นตอน คือ
1. ตรวจสอบการเกิด event ที่เรากาหนดไว้
2. เมื่อเกิด event ขึ้น ก็จะไปเรียก function หรือคาสั่งต่างๆมาทางาน
- 26. Event ความหมาย
onAbort ้
เกิดเมือผู ้ใชยกเลิกการ load ภาพ
่
onBlur เกิดเมืออ็อบเจกต์นันถูกย ้าย focus ออกไป
่ ้
onChange ้ ่
เกิดเมือผู ้ใชเปลียนแปลงค่าในฟอร์มรับข ้อมูล
่
onClick เกิดเมืออ็อบเจ็กต์นันถูก click
่ ้
onError เกิดเมือการ load เอกสารหรือภาพเกิดข ้อผิดพลาด
่
onFocus เกิดเมืออ็อบเจกต์นันถูก focus
่ ้
onLoad เกิดเมือโหลดเอกสารเสร็จ
่
onMouseover เกิดเมืออ็อบเจกต์นันถูกเลือน mouse pointer ไปทับ
่ ้ ่
เกิดเมืออ็อบเจกต์นันถูกเลือน mouse pointer ทีทับอยู่
่ ้ ่ ่
onMouseout
ออกไป
เกิดเมือผู ้ใชเลือกข ้อความ(ใช ้ mouse ลาก)ในชองรับ
่ ้ ่
onSelect
ข ้อความ
onSubmit เกิดเมือผู ้ใช ้ submit แบบฟอร์ม
่
onUnload เกิดเมือผู ้ใชออกจากเวบเพจ ่ ้
- 27. เราจะใส่ event ลงไปใน tag ของ html เลย เช่น เวลาจะทาตัว link
เราใช้ tag <A> ถ้ าจะทาให้ มันมีข้อความ Alert ขึ้นเวลาเอา mouse ไป
over เขียนโค้ ดได้ ดังนี้
<a href=""
onmouseover="window.alert('Onmouseover ทางาน')">
ทดสอบ onmouseover
</a>
- 28. การอ้ างอิงข้ อมูลที่อยู่บนฟอร์ม ทาได้ โดยใช้ Object document จากนั้น
ตามด้ วย . และชื่อ form . ชื่อของ Object ต่าง ๆ บนฟอร์ม เช่น
ื่ ื่
document.ชอฟอร์ม.ชอTextField.value
ถ้ าต้ องการเปลี่ยนข้ อความที่รับมาจาก TextField ให้ เป็ นตัวเลข จะใช้
function eval() เช่น
num = eval(document.form1.txtName.value)
- 29. <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>
ื่
ชอ form ค่าทีเก็บอยู่
่
อ ้างถึงเอกสาร HTML
ในหน ้าปั จจุบน
ั ื่
ชอ textfield
- 30. <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>
- 31. เตรียมภาพ 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>
- 32. เตรียมภาพ 2 ภาพ
<body> - ภาพส้ม orange.jpg
<script type="text/javascript"> - ภาพองุ่น grape.jpg
function writeText(text){
document.getElementById("txtdata").innerHTML= text;
} ื่
ระบุ ชอของ id ทีจะเอาข ้อความไปวาง
่
</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> ตังชอตาแหน่งทีต ้องการวางข ้อความ โดยจะใช ้ Property id
้ ื่ ่
</body>
