1. สรุป Chapter 6 : JavaScript: Introduction to Scripting
JavaScript คือ ภาษาสคริปต์ที่ใช้ในการเพิ่มฟังก์ชันการทำงานเพื่อช่วยให้เว็บเพจสามารถแสดงเนื้อหา ที่มีการเปลี่ยนแปลงได้ตามเงื่อนไขหรือสามารถตอบโต้กับผู้ชมได้มากขึ้น
JavaScript สามารถสร้างเว็บเพจได้ตรงตามความต้องการของผู้ใช้ โดยใช้จาวาสคริปต์ในหน้าเว็บโดยมีการใช้คำสั่งของ <script> ...</script> โดยมีองค์ประกอบของ script ประเภทของ attribute ที่เป็นตัวกำหนด ประเภทของ MIME เช่นเดียวกับภาษาสคริปต์ที่ใช้ในการเขียนจาวาสคริปต์
JavaScript เป็นแบบ case sensitive สามารถใช้ได้ทั้งตัวพิมพ์ใหญ่หรือเล็กก็ได้ โดย ไม่เกิดการ error แล้วทุก ๆ statement ต้องมี semicolon จบท้ายทุกครั้งด้วย
JavaScript เป็นมาตราฐานที่อยู่ใน W3C จึงมั่นใจได้ว่าทุกๆ Web browser รองรับการทำงานของ JavaScript ได้แน่นอน
การแสดงข้อความทาง Alert Dialog
โดยมีหน้าต่างปรากฎเพื่อแสดงข้อความที่สำคัญให้กับผู้ใช้ หรือเป็นลักษณะของการเตือนต่าง ๆ
การ Escape sequence
การ Scripting : คือการสร้างหน้าต่างของ alert โดยมีการรับค่าในหน้าต่างได้ โดยใช้ "prompt" แล้วแสดงข้อความบนเว็บเพจ
การสร้างตัวแปล โดยใช้คำสั่งชื่อ var โดยจำมีการตั้งชื่อตัวแปลที่ถูกต้องซึ่งประกอบด้วย ตัวอักษร ตัวเลข underscores(_) และ ($) โดยห้ามมี Keyword นำหน้าหรือนำมาใช้
การรับค่าตัวเลขบนหน้าต่างโดยรับสองค่าโดยการรับข้อมูลจากผู้ใช้ แล้วนำมาบวกกันโดยหาผลลัพธ์
การจัดลำดับความสำคัญของ
2. Code โปรแกรมการคำนวณเกรด
<html>
<head>
<title> โปรแกรมคำนวณเกรด </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript">
function calculateGrade() //เป็นการสร้างฟังก์ชั่นสำหรับคำนวณเกรด
{
var g = document.getElementById("g").value; //นการเข้าไปอ่านค่าใน Element ที่เป็น TextBox และเก็บค่าไว้ในตัวแปร g
var objDiv = document.getElementById("showGrade"); //การเข้าถึง Element ที่เป็น Tag Div เพื่อกำหนดค่าให้มันแสดงเกรดออกมา
if(g >= 80) //เช็คว่า g มีค่ามากกว่า หรือ เท่ากับ 80 ใช่หรือไม่ หากใช่จะแสดงข้อความ ได้เกรด A
objDiv.innerHTML = "ได้เกรด A";
else if(g >= 70) //ถ้าเงื่อนไขแรกไม่เป็นจริงงั้น g มีค่ามากกว่า หรือ เท่ากับ 70 ใช่หรือไม่ ถ้าใช่จะแสดงข้อความ ได้เกรด B
objDiv.innerHTML = "ได้เกรด B";
else if(g >= 60) //ถ้าเงื่อนไขแรกไม่เป็นจริงงั้น g มีค่ามากกว่า หรือ เท่ากับ 60 ใช่หรือไม่ ถ้าใช่จะแสดงข้อความ ได้เกรด C
objDiv.innerHTML = "ได้เกรด C";
else if(g >= 50) //ถ้าเงื่อนไขแรกไม่เป็นจริงงั้น g มีค่ามากกว่า หรือ เท่ากับ 50 ใช่หรือไม่ ถ้าใช่จะแสดงข้อความ ได้เกรด D
objDiv.innerHTML = "ได้เกรด D";
else //ถ้าเงื่อนไขทั้งหมดไม่เป็นจริง แล้ว g มีค่าน้อยกว่า 50 ใช่หรือไม่ ถ้าใช่จะแสดงข้อความ ได้เกรด F
objDiv.innerHTML = "ได้เกรด F";
} // http://step-juice.blogspot.com/2010/09/javascript-if-else.html
</script>
</head>
<body>คะแนน = <input type="text" name="g" id="g"><input type="button" value="คำนวณเกรด" onclick="calculateGrade()"><div id="showGrade"></div></body>
<form> <p align = "left"> <input type=button value="Refresh" onClick="javascript:window.location.reload();"> </form>
<form> <p align="left"> <input type=button value="EXIT" onClick="javascript:window.close();"> </form>
</html>
3. Code โปรแกรมแสดงแม่สูตรคูณ
<html>
<head>
<title> โปรแกรมแสดงแม่สูตรคูณ </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript">
function show()
{
var number = document.getElementById("number").value;
var objDiv = document.getElementById("divShow");
for(var i = 1; i<=12; i++)
{
objDiv.innerHTML += number + " x " + i + " = " + parseInt(number) * i + "<br/>"; // tag br ใน blog มันเขียนติดกันไม่ได้ แก้ให้มันติดกันด้วยนะครับ -*-
}
}//http://step-juice.blogspot.com/2010/10/javascript-for-loop.html
</script>
</head>
<body>
สูตรคูณแม่ <input type="text" name="number" id="number"> <input type="button" value="แสดงแม่สูตรคูณ" onclick="show()"><div id="divShow"></div>
</body>
<form> <p align = "left"> <input type=button value="Refresh" onClick="javascript:window.location.reload();"> </form>
<form> <p align="left"> <input type=button value="EXIT" onClick="javascript:window.close();"> </form>
</html>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น