บทเรียนที่ 17 เรียกชุดคำสั่งด้วยแบบฟอร์ม
บทเรียนนี้มีจุดมุ่งหมายแนะนำคุณให้รู้จักการใช้จาวาสคริปกับแบบฟอร์ม สคริปนี้จะใช้แบบฟอร์ม ที่ทำให้คุณเลือกสีพื้นหลังได้ ไม่ว่าจะเป็นดำหรือขาว ด้วยการกดปุ่ม
อย่าลืมว่าการเริ่มสร้างแบบฟอร์มนั้น ให้เริ่มด้วย <form> และปิดการสร้างแบบฟอร์มด้วย </form>
สคริป...
<html>
<head>
<SCRIPT type="text/javascript">
function newcolor(color)
{
alert("คุณเลือกสี " + color)
document.bgColor=color
}
</SCRIPT>
</HEAD>
<BODY>
<h1>กรุณาเลือกสีพื้นหลัง</h1>
<FORM>
<INPUT TYPE="button" VALUE="สีดำ"
onClick="newcolor('black') ; document.fgColor='white'">
<INPUT TYPE="button" VALUE="สีขาว"
onClick="newcolor('white') ; document.fgColor='black'">
</FORM>
</BODY>
</HTML>
ผลของสคริปนี้
แฮ่ๆ ผมไม่แน่ใจว่าปุ่มข้างล่าง จะใช้ได้รึเปล่า เพราะเว็บนี้เขาไม่อนุญาติให้สร้างแบบฟอร์มที่ถูกต้อง เว็บฟรีก็หยั่งงี้ล่ะครับ ต้องเสียตังค์ เขาถึงจะให้เราหมด ถ้าดูผลไม่ได้ให้ทดลองดูเองนะครับ
กรุณาเลือกสีพื้นหลัง
มาแยกโครงสร้างของสคริปกันครับ
· คุณพบกับสิ่งใหม่ นั่นคือ การใส่ข้อความลงในวงเล็บของชื่อชุดคำสั่ง ซึ่งมีเครื่องหมายขีดเดียวหรื่อเครื่องหมายคำพูดคลุมอยู่ด้วย เช่นส่วนหนึ่งของสคริป...
onClick="newcolor('black')
....ข้อความที่กำหนดคือ black
· และนี่คือส่วนของชุดคำสั่งและแบบฟอร์มที่ทำให้พื้นหลังเปลี่ยนสีได้
function newcolor(color)
{alert("คุณเลือกสี " + color)
document.bgColor=color}
<FORM>
<INPUT TYPE="button" VALUE="สีดำ"
onClick="newcolor('black') ; document.fgColor='white'">
<INPUT TYPE="button" VALUE="สีขาว"
onClick="newcolor('white') ; document.fgColor='black'">
</FORM>
{alert("คุณเลือกสี " + color)
document.bgColor=color}
<FORM>
<INPUT TYPE="button" VALUE="สีดำ"
onClick="newcolor('black') ; document.fgColor='white'">
<INPUT TYPE="button" VALUE="สีขาว"
onClick="newcolor('white') ; document.fgColor='black'">
</FORM>
· สังเกตว่าเรานำข้อความที่กำหนดขึ้น เพื่อเข้ามาทำงานในชุดคำสั่ง newcolor(color) โดยที่ color คือตัวแทน "black" หรือ "white" นั่นเอง(คล้ายๆกับการกำหนดตัวแปร) ...อย่าลืมว่าให้กำหนดโดยใส่เครื่องหมายขีดเดียวหรือสองขีดคลุมด้วย
· เมื่อกดปุ่ม ค่าข้อความ(เป็น "black" หรือ "white") จะถูกส่งไปยังชุดคำสั่ง newcolor(color)
· โดยส่วนมากแล้ว ชุดคำสั่งจะรอจะกว่าจะได้รับข้อมูลที่เพียงพอในการทำงาน ในบทก่อนๆเราไม่ได้ใส่อะไรในวงเล็บของชุดคำสั่งเลย ซึ่งชุดคำสั่งก็มีข้อมูลเพียงพอที่จะทำงานแล้ว แต่ในกรณีนี้ ชุดคำสั่งต้องการค่า color เพื่อที่จะทำงานได้ ซึ่งค่าได้จากการคลิ๊กปุ่มใดปุ่มหนึ่ง แล้วค่านั้นจะถูกส่งไปที่กล่องข้อความเตือน และคำสั่งเปลี่ยนสีพื้นหลัง เพื่อเปลี่ยนไปเป็นสีของความหมายข้อความนั้น
· นอกจากนี้เมื่อคลิ๊กที่ปุ่มสีดำ คำสั่งเปลี่ยนสีตัวอักษร(ที่ผมทำไว้ ถัดจากคำสั่งเรียกชุดคำสั่ง) จะเปลี่ยนสีตัวอักษรให้เป็นสีขาว(ไม่งั้นมองไม่เห็นครับ เพราะพื้นหลังเป็นสีดำแล้ว) เมื่อคลิ๊กที่ปุ่มสีขาว จะเปลี่ยนสีตัวอักษรให้เป็นสีดำ(ไม่งั้นมองไม่เห็นอีกเช่นกันครับ เพราะพื้นหลังเป็นสีขาวแล้ว)
· ผมอยากบอกให้ชัดเจน เพราะอาจทำให้คุณสับสน...ว่า ....ค่า(หรือภาษาอังกฤษคือ value) ในคำสั่ง input ทำหน้าที่แสดงข้อความบนปุ่ม(Button)เท่านั้น
แบบฝึกหัด
มาลองดูกันหน่อยครับว่า คุณจะจำบางสิ่งที่คุณเรียนมา ที่จะนำมาใช้กับแบบฝึกหัดนี้ได้ไหม ให้คุณเขียนสคริป เหมือนกับด้านบน แต่เมื่อผู้ใช้เปิดเข้ามา จะขึ้นกล่องรับค่า(prompt)ถามชื่อผู้ใช้ แล้วเมื่อผู้ใช้คลิ๊กเลือกสีพื้นหลัง(กำหนดเอาเองได้เลยครับ)ที่ชอบ กล่องข้อความเตือน(alert) จะขึ้นมาว่า... "สวัสดีค่ะ/ครับ คุณชื่อผู้ที่เปิดเข้ามา คุณเลือกพื้นหลังสี ชื่อสีภาษาอังกฤษ"
ตอนนี้คุณทำได้เพียงบอกชื่อสีเป็นภาษาอังกฤษ แต่หากคุณเรียนรู้บทต่อๆไป จนมีประสบการณ์เพียงพอ คุณจะสามารถเปลี่ยนชื่ออังกฤษเป็นไทยได้อย่างไม่ยากครับ ขอให้คุณโชคดี...
ตอนนี้คุณทำได้เพียงบอกชื่อสีเป็นภาษาอังกฤษ แต่หากคุณเรียนรู้บทต่อๆไป จนมีประสบการณ์เพียงพอ คุณจะสามารถเปลี่ยนชื่ออังกฤษเป็นไทยได้อย่างไม่ยากครับ ขอให้คุณโชคดี...
เฉลย
<html>
<head>
<SCRIPT type="text/javascript">
var a=prompt("คุณมีชื่อว่าอะไรครับ","โปรดพิมพ์ชื่อลงในนี้")
function newcolor(color)
{alert("สวัสดีครับ คุณ"+a+" คุณเลือกพื้นหลังสี "+ color)
document.bgColor=color}
</SCRIPT>
</HEAD>
<BODY>
<h1>กรุณาเลือกสีพื้นหลัง</h1>
<FORM>
<INPUT TYPE="button" VALUE="สีดำ"
onClick="newcolor('black') ; document.fgColor='white'">
<INPUT TYPE="button" VALUE="สีขาว"
onClick="newcolor('white') ; document.fgColor='black'">
</FORM>
</BODY>
</HTML>
<head>
<SCRIPT type="text/javascript">
var a=prompt("คุณมีชื่อว่าอะไรครับ","โปรดพิมพ์ชื่อลงในนี้")
function newcolor(color)
{alert("สวัสดีครับ คุณ"+a+" คุณเลือกพื้นหลังสี "+ color)
document.bgColor=color}
</SCRIPT>
</HEAD>
<BODY>
<h1>กรุณาเลือกสีพื้นหลัง</h1>
<FORM>
<INPUT TYPE="button" VALUE="สีดำ"
onClick="newcolor('black') ; document.fgColor='white'">
<INPUT TYPE="button" VALUE="สีขาว"
onClick="newcolor('white') ; document.fgColor='black'">
</FORM>
</BODY>
</HTML>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น