SlideShare a Scribd company logo
1 of 20
Download to read offline
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
Week 3 การถามเกี่ยวกับอายุ
1. เริ่มต้นโดยการเปิดโปรแกรม EditPlus ขึ้นมาแล้วกด Ctrl + N
2. จากนั้นพิมพ์โครงสร้างหลักภาษา Javascript ดังภาพด้านบน
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
3. ตั้งชื่อหัวเรื่องหน้าเว็บ ให้ชื่อว่า Test Java AGE โดยพิมพ์<title> Test Java AGE </title> ภายใต้<head>
ในบรรทัดที่ 3
4. จากนั้นพิมพ์ <script>เพื่อใส่ Tag Comment ต่อในบรรทัดถัดมา และพิมพ์</script> ต่อท้าย
จากนั้นในบรรทัดที่ 11 และ 12 เพื่อการส่งค่าข้อมูล ให้พิมพ์ <form> และ </form>
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
5. ในบรรทัดที่11 ทาการสร้างกล่องส่งข้อมูลจะตั้งชื่อ form ว่า test ให้พิมพ์<form name = “test” method =
“post” action = “”> การใช้ post เพื่อเป็นวิธีการส่ง การใช้ action เพื่อเป็นการกระทา
6. เมื่อได้กล่อง form แล้ว ต่อมา เพื่อให้ลูกค้ากรอกข้อมูล ให้กล่องมีชื่อว่า age เพื่อกรอกข้อมูลตัวเลขอายุ
โดยพิมพ์<input type> = “text” name = “age” size = “3” ความกว้างของกล่องมีค่าความกว้างที่ 3
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
7. จากนั้นทาการสร้างปุ่มให้สามารถคลิกส่งค่าได้ชื่อปุ่มให้ชื่อว่า submit
โดยพิมพ์ <button name = “submit” onclick = “”></button>
8. จากนั้น Save โดยตั้งชื่อว่า week3_age และเลือก Save as type เป็น HTML
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
9. เข้าไปเปิดเว็บที่ Save ไว้โดยคลิกขวา > Open with > Google Chrome
10. เมื่อเปิดหน้าเว็บแล้วจะเห็นว่าปุ่มส่งไม่มีชื่อ เราจะใส่ชื่อให้ปุ่ม
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
11. ใส่ชื่อให้ปุ่มชื่อ Sent Dataโดยพิมพ์แทรกหลัง onclick ในบรรทัดที่ 13 ดังภาพด้านบน
จากนั้นกด Save
12. ไปที่หน้าเว็บ จากนั้นกด Refresh จะแสดงชื่อปุ่ม Sent Data ขึ้น ดังภาพด้านบน
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
13. ต่อมาสร้างกระบวนการ if และ else จะกระทาในบรรทัดที่ 6
14. ใช้ function ทางานภายใต้Tag Commentเพื่อเป็นการเทียบอายุ
โดยพิมพ์function demo()ในบรรทัดที่ 6
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
15. เพื่อทาการเปรียบเทียบกับเงื่อนไข เนื่องจาก formของเราชื่อว่าtestโดยพิมพ์if(test.age)
16. เงื่อนไขแรกมากกว่า 50 และใช้valueเพื่อให้ตัวเลขเทียบค่ากันโดยพิมพ์เพิ่มเข้าไป if(test.age.value>50)
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
17. เมื่อตัวเลขมีค่ามากว่า 50 จริง ใช้ฟังก์ชัน alert แสดงข้อความ You are old!!!
โดยพิมพ์alert(‘You are Old!!!’);
18. เมื่อตัวเลขอายุนั้นน้อยกว่า 50 ใช้ else เพื่อรองนับเงื่อนไขนี้ จากนั้น เปิดละปิดปีกกา และพิมพ์
alert(‘You areYoung!!!’);
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
19. ต่อมาไปที่บรรทัดที่ 23 ในส่วนของ onclick หลังเครื่องหมายเท่ากับให้พิมพ์”demo()” เพื่ออ้างอิง
เป้าหมาย
20. จากนั้นทาการ Save ให้เรียบร้อย เปิดเว็บไซต์ขึ้นมาจะขึ้นหน้าต่างดังภาพด้านบน
ทดสอบโดยใส่อายุ 45 และกด Sent data จะแสดงข้อความที่ตรงกับเงื่อนไขที่ตั้งไว้
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
21.ทดสอบโดยใส่อายุ 55 และกด Sent data จะแสดงข้อความที่ตรงกับเงื่อนไขที่ตั้งไว้
22. และเมื่อไม่ใส่อายุ ทาไมถึงขึ้นข้อความเงื่อนไขแรก เพราะมีช่องโหว่ที่ต้องแก้ไข
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
23. แก้ไขในบรรทัดที่ 8 เปลี่ยนกระบวนการเงื่อนไข เติม else ลงไปหน้า if และ Enter ลงไป
เพื่อแทรก Code แก้ไข
24. แทรกคาสั่ง if(test.age.value == ‘’) เพื่อรองรับเมื่อไม่ได้หรอกตัวเลข
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
25. เมื่อลูกค้าไม่ใส่ตัวเลข ให้ขึ้นข้อความเตือน โดยพิมพ์alert(“Please insert You age”)
26. ทดสอบการไม่กรอกข้อมูล แล้วกด Enter จะแสดงข้อความดังภาพด้านบน
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
เรื่อง เกรด
1. กด Ctrl + N จากนั้นพิมพ์โครงสร้างหลักภาษา Javascript ดังภาพด้านบน
2. การเปิดละปิด Script จะทางานจะทาภายใต้ฟังก์ชัน Body
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
3. ใช้ var ในการประกาศตัวแปลใน Javascript โดย var score จะเก็บค่าตัวเลขและใช้ prompt ในการเรียก
หน้าต่างขึ้นมา โดยพิมพ์ var score = prompt(“Please insert your score”)
4. เงื่อนไขแรกโดยพิมพ์if((score >= 80)&&(score <= 100)) เพื่อให้แสดงเกรดออกมาว่า A โดยใช้ปีกกา
คลุมทุกเงื่อนไขคะแนนโดยพิมพ์alert(“You have Grade A”;)
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
5. เงื่อนไขต่อมา พิมพ์ else if((score >= 75)&&(score <= 79)) เพื่อให้แสดงเกรดออกมาว่า B+ โดยใช้ปีกกา
คลุมทุกเงื่อนไขคะแนนโดยพิมพ์alert(“You have Grade B+”;)
6. เงื่อนไขต่อมา พิมพ์ else if((score >= 70)&&(score <= 74)) เพื่อให้แสดงเกรดออกมาว่า Bโดยใช้ปีกกา
คลุมทุกเงื่อนไขคะแนนโดยพิมพ์alert(“You have Grade B”;)
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
เงื่อนไขต่อมา พิมพ์ else if((score >= 65)&&(score <= 69)) เพื่อให้แสดงเกรดออกมาว่า C+โดยใช้ปีกกา
คลุมทุกเงื่อนไขคะแนนโดยพิมพ์alert(“You have Grade C+”;)
เงื่อนไขต่อมา พิมพ์ else if((score >= 60)&&(score <= 64)) เพื่อให้แสดงเกรดออกมาว่า Cโดยใช้ปีกกา
คลุมทุกเงื่อนไขคะแนนโดยพิมพ์alert(“You have Grade C”;)
เงื่อนไขต่อมา พิมพ์ else if((score >= 55)&&(score <= 59)) เพื่อให้แสดงเกรดออกมาว่า D+โดยใช้ปีกกา
คลุมทุกเงื่อนไขคะแนนโดยพิมพ์alert(“You have Grade D+”;)
เงื่อนไขต่อมา พิมพ์ else if((score >= 50)&&(score <= 54)) เพื่อให้แสดงเกรดออกมาว่า Dโดยใช้ปีกกา
คลุมทุกเงื่อนไขคะแนนโดยพิมพ์alert(“You have Grade D”;)
เงื่อนไขต่อมา พิมพ์ else เพื่อให้แสดงเกรดออกมาว่า Dโดยใช้ปีกกา
คลุมทุกเงื่อนไขคะแนนโดยพิมพ์alert(“You have Grade F”;)
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
7. เมื่อเสร็จแล้ว Save ให้เรียบร้อย แล้วเปิดเว็บขึ้นมา
8. ทดสอบกรอกคะแนน 101 พบว่าขึ้นเกรด F จึงต้องไปแก้ไขในบรรทัดที่ 8 ดังภาพด้านบน
แก้ไขเป็น if((score >= 80)
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
9. จากนั้น Save อีกครั้ง แล้วทดสอบใหม่
10. หน้าต่างการกรอกคะแนน ดังภาพข้างบน
นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1
11. กรอกคะแนน 101 แล้วจะได้เกรด A ตามเงื่อนไข

More Related Content

More from Nummon Ny (6)

Week8 duangkamon
Week8 duangkamonWeek8 duangkamon
Week8 duangkamon
 
Week6 duangkamon
Week6 duangkamonWeek6 duangkamon
Week6 duangkamon
 
Week7 duangkamon
Week7 duangkamonWeek7 duangkamon
Week7 duangkamon
 
Week5 duangkamon
Week5 duangkamonWeek5 duangkamon
Week5 duangkamon
 
Week4 duangkamon
Week4 duangkamonWeek4 duangkamon
Week4 duangkamon
 
Week2 duangkamon
Week2 duangkamonWeek2 duangkamon
Week2 duangkamon
 

Week3 duangkamon

  • 1. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 Week 3 การถามเกี่ยวกับอายุ 1. เริ่มต้นโดยการเปิดโปรแกรม EditPlus ขึ้นมาแล้วกด Ctrl + N 2. จากนั้นพิมพ์โครงสร้างหลักภาษา Javascript ดังภาพด้านบน
  • 2. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 3. ตั้งชื่อหัวเรื่องหน้าเว็บ ให้ชื่อว่า Test Java AGE โดยพิมพ์<title> Test Java AGE </title> ภายใต้<head> ในบรรทัดที่ 3 4. จากนั้นพิมพ์ <script>เพื่อใส่ Tag Comment ต่อในบรรทัดถัดมา และพิมพ์</script> ต่อท้าย จากนั้นในบรรทัดที่ 11 และ 12 เพื่อการส่งค่าข้อมูล ให้พิมพ์ <form> และ </form>
  • 3. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 5. ในบรรทัดที่11 ทาการสร้างกล่องส่งข้อมูลจะตั้งชื่อ form ว่า test ให้พิมพ์<form name = “test” method = “post” action = “”> การใช้ post เพื่อเป็นวิธีการส่ง การใช้ action เพื่อเป็นการกระทา 6. เมื่อได้กล่อง form แล้ว ต่อมา เพื่อให้ลูกค้ากรอกข้อมูล ให้กล่องมีชื่อว่า age เพื่อกรอกข้อมูลตัวเลขอายุ โดยพิมพ์<input type> = “text” name = “age” size = “3” ความกว้างของกล่องมีค่าความกว้างที่ 3
  • 4. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 7. จากนั้นทาการสร้างปุ่มให้สามารถคลิกส่งค่าได้ชื่อปุ่มให้ชื่อว่า submit โดยพิมพ์ <button name = “submit” onclick = “”></button> 8. จากนั้น Save โดยตั้งชื่อว่า week3_age และเลือก Save as type เป็น HTML
  • 5. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 9. เข้าไปเปิดเว็บที่ Save ไว้โดยคลิกขวา > Open with > Google Chrome 10. เมื่อเปิดหน้าเว็บแล้วจะเห็นว่าปุ่มส่งไม่มีชื่อ เราจะใส่ชื่อให้ปุ่ม
  • 6. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 11. ใส่ชื่อให้ปุ่มชื่อ Sent Dataโดยพิมพ์แทรกหลัง onclick ในบรรทัดที่ 13 ดังภาพด้านบน จากนั้นกด Save 12. ไปที่หน้าเว็บ จากนั้นกด Refresh จะแสดงชื่อปุ่ม Sent Data ขึ้น ดังภาพด้านบน
  • 7. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 13. ต่อมาสร้างกระบวนการ if และ else จะกระทาในบรรทัดที่ 6 14. ใช้ function ทางานภายใต้Tag Commentเพื่อเป็นการเทียบอายุ โดยพิมพ์function demo()ในบรรทัดที่ 6
  • 8. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 15. เพื่อทาการเปรียบเทียบกับเงื่อนไข เนื่องจาก formของเราชื่อว่าtestโดยพิมพ์if(test.age) 16. เงื่อนไขแรกมากกว่า 50 และใช้valueเพื่อให้ตัวเลขเทียบค่ากันโดยพิมพ์เพิ่มเข้าไป if(test.age.value>50)
  • 9. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 17. เมื่อตัวเลขมีค่ามากว่า 50 จริง ใช้ฟังก์ชัน alert แสดงข้อความ You are old!!! โดยพิมพ์alert(‘You are Old!!!’); 18. เมื่อตัวเลขอายุนั้นน้อยกว่า 50 ใช้ else เพื่อรองนับเงื่อนไขนี้ จากนั้น เปิดละปิดปีกกา และพิมพ์ alert(‘You areYoung!!!’);
  • 10. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 19. ต่อมาไปที่บรรทัดที่ 23 ในส่วนของ onclick หลังเครื่องหมายเท่ากับให้พิมพ์”demo()” เพื่ออ้างอิง เป้าหมาย 20. จากนั้นทาการ Save ให้เรียบร้อย เปิดเว็บไซต์ขึ้นมาจะขึ้นหน้าต่างดังภาพด้านบน ทดสอบโดยใส่อายุ 45 และกด Sent data จะแสดงข้อความที่ตรงกับเงื่อนไขที่ตั้งไว้
  • 11. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 21.ทดสอบโดยใส่อายุ 55 และกด Sent data จะแสดงข้อความที่ตรงกับเงื่อนไขที่ตั้งไว้ 22. และเมื่อไม่ใส่อายุ ทาไมถึงขึ้นข้อความเงื่อนไขแรก เพราะมีช่องโหว่ที่ต้องแก้ไข
  • 12. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 23. แก้ไขในบรรทัดที่ 8 เปลี่ยนกระบวนการเงื่อนไข เติม else ลงไปหน้า if และ Enter ลงไป เพื่อแทรก Code แก้ไข 24. แทรกคาสั่ง if(test.age.value == ‘’) เพื่อรองรับเมื่อไม่ได้หรอกตัวเลข
  • 13. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 25. เมื่อลูกค้าไม่ใส่ตัวเลข ให้ขึ้นข้อความเตือน โดยพิมพ์alert(“Please insert You age”) 26. ทดสอบการไม่กรอกข้อมูล แล้วกด Enter จะแสดงข้อความดังภาพด้านบน
  • 14. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 เรื่อง เกรด 1. กด Ctrl + N จากนั้นพิมพ์โครงสร้างหลักภาษา Javascript ดังภาพด้านบน 2. การเปิดละปิด Script จะทางานจะทาภายใต้ฟังก์ชัน Body
  • 15. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 3. ใช้ var ในการประกาศตัวแปลใน Javascript โดย var score จะเก็บค่าตัวเลขและใช้ prompt ในการเรียก หน้าต่างขึ้นมา โดยพิมพ์ var score = prompt(“Please insert your score”) 4. เงื่อนไขแรกโดยพิมพ์if((score >= 80)&&(score <= 100)) เพื่อให้แสดงเกรดออกมาว่า A โดยใช้ปีกกา คลุมทุกเงื่อนไขคะแนนโดยพิมพ์alert(“You have Grade A”;)
  • 16. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 5. เงื่อนไขต่อมา พิมพ์ else if((score >= 75)&&(score <= 79)) เพื่อให้แสดงเกรดออกมาว่า B+ โดยใช้ปีกกา คลุมทุกเงื่อนไขคะแนนโดยพิมพ์alert(“You have Grade B+”;) 6. เงื่อนไขต่อมา พิมพ์ else if((score >= 70)&&(score <= 74)) เพื่อให้แสดงเกรดออกมาว่า Bโดยใช้ปีกกา คลุมทุกเงื่อนไขคะแนนโดยพิมพ์alert(“You have Grade B”;)
  • 17. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 เงื่อนไขต่อมา พิมพ์ else if((score >= 65)&&(score <= 69)) เพื่อให้แสดงเกรดออกมาว่า C+โดยใช้ปีกกา คลุมทุกเงื่อนไขคะแนนโดยพิมพ์alert(“You have Grade C+”;) เงื่อนไขต่อมา พิมพ์ else if((score >= 60)&&(score <= 64)) เพื่อให้แสดงเกรดออกมาว่า Cโดยใช้ปีกกา คลุมทุกเงื่อนไขคะแนนโดยพิมพ์alert(“You have Grade C”;) เงื่อนไขต่อมา พิมพ์ else if((score >= 55)&&(score <= 59)) เพื่อให้แสดงเกรดออกมาว่า D+โดยใช้ปีกกา คลุมทุกเงื่อนไขคะแนนโดยพิมพ์alert(“You have Grade D+”;) เงื่อนไขต่อมา พิมพ์ else if((score >= 50)&&(score <= 54)) เพื่อให้แสดงเกรดออกมาว่า Dโดยใช้ปีกกา คลุมทุกเงื่อนไขคะแนนโดยพิมพ์alert(“You have Grade D”;) เงื่อนไขต่อมา พิมพ์ else เพื่อให้แสดงเกรดออกมาว่า Dโดยใช้ปีกกา คลุมทุกเงื่อนไขคะแนนโดยพิมพ์alert(“You have Grade F”;)
  • 18. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 7. เมื่อเสร็จแล้ว Save ให้เรียบร้อย แล้วเปิดเว็บขึ้นมา 8. ทดสอบกรอกคะแนน 101 พบว่าขึ้นเกรด F จึงต้องไปแก้ไขในบรรทัดที่ 8 ดังภาพด้านบน แก้ไขเป็น if((score >= 80)
  • 19. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 9. จากนั้น Save อีกครั้ง แล้วทดสอบใหม่ 10. หน้าต่างการกรอกคะแนน ดังภาพข้างบน
  • 20. นางสาวดวงกมล ภู่อะร่าม รหัสนิสิต 58170037 กลุ่ม 1 11. กรอกคะแนน 101 แล้วจะได้เกรด A ตามเงื่อนไข