3 ก.ย. 2554

บทเรียนที่ 3 เวลา

บทเรียนที่ 3 เวลา
           ข้อดีอย่างหนึ่งของจาวาสคริปคือ สามารถดึงเอาสิ่งต่างๆที่มีอยู่แล้วในเครื่องของคุณออกมาแสดงได้ เช่นในบทแรก document นั้นเป็นสิ่งที่มีอยู่ก่อนแล้ว คุณจึงสามารถใช้คำสั่งเขียนลงไปได้ เช่นเดียวกับข้อมูลของเวลาที่มีอยู่ในเครื่องเช่นกัน ในบทนี้เราจะดึงเอาข้อมูลเวลาออกมา ซึ่งในที่นี้มีทั้งหมด 8 วิธี แต่ละวิธีก็เป็นแต่ละประเภทของเวลา ได้แก่ getDay( ), getDate( ), getMonth( ), getFullYear( ), getHours( ),getMinutes( ), getSeconds( ) และ getMilliseconds( ) (วงเล็บเปิดและปิดนั้นไม่ได้ใช้ทำอะไรหรอกครับ เป็นเพียงรูปแบบของมันเฉยๆ) แต่สิ่งเหล่านี้เป็นเพียงวิธีกระทำ(method)ครับ ต้องมีตัวที่จะรองรับการกระทำ(object หรือตัวถูกกระทำ) เพื่อที่จะ เรียกค่าเวลาออกมาได้ เราต้องสร้างตัวถูกกระทำขึ้นมา ดังต่อไปนี้(เปิด notepad แล้วพิมพ์ตามข้างล่างนี้ได้เลยครับ พิมพ์ตัวอักษรใหญ่เล็กให้เหมือนกับด้านล่างนี้นะครับ โดยวงเล็บเปิดและปิดนั้นพิมพ์ติดกันได้เลยครับ ไม่ต้องเว้นช่องแบบของผม)
สคริป...
<script language="javascript">
a = new Date( )
//สคริปนี้จะบอกเวลาตอนที่คุณเปิดเข้ามา
document.write("คุณเข้ามาในวัน("+a.getDay( )+")ที่ "+a.getDate( )
+" เดือน "+(a.getMonth( )+1)+" ปี ค.ศ. "+a.getFullYear( )+
" เวลา "+a.getHours( )+" นาฬิกา "+a.getMinutes( )+" นาที "+
a.getSeconds( )+" วินาที "+a.getMilliseconds( )+" มิลลิวินาที")
</script>
ผลของสคริปนี้
คุณเข้ามาในวัน(6)ที่ 20 เดือน 8 ปี ค.ศ. 2011 เวลา 9 นาฬิกา 17 นาที 50 วินาที 578 มิลลิวินาที


มาแยกโครงสร้างของจาวาสคริปกันครับ

           จะเห็นว่าจาวาสคริปช่วยบอกเวลาอย่างละเอียดโดยใช้ข้อมูลจากเครื่องของคุณนั่นแหละครับ ในการเรียกค่าเวลาต้องใช้ตัวถูกกระทำ เป็น new Date( ) เสมอครับโดยพิมพ์ลงไปตรงๆตามรูปแบบก็จะเป็นแบบนี้ครับ สำหรับการเรียกค่าปี

new Date( ).getFullYear( )

แต่หากใช้ตัวถูกกระทำ เป็น new Date( ) จะทำให้คุณต้องพิมพ์ยาวมาก ในตัวอย่างเราจึงกำหนดให้ a เท่ากับ new Date( ) หรือในภาษาจาวาสคริปใช้ a = new Date( ) ทำให้ a เป็นตัวแทน new Date( ) ในการเป็นตัวถูกกระทำ ให้กับวิธีกระทำต่างๆ....ต่อมาเราจะอธิบายแต่ละบรรทัดของสคริปนะครับ

<script language="javascript">    อันนี้เริ่มต้นเขียนสคริป

a = new Date( )    อธิบายไปด้านบนแล้วครับ

//สคริปนี้จะบอกเวลาตอนที่คุณเปิดเข้ามา
ประโยคข้างบนนี้ ให้จำไว้นะครับว่า อะไรก็แล้วแต่ที่คุณพิมพ์ลงไปหลังเครื่องหมายทับสองครั้ง(//) ส่วนนั้นทั้งหมดในบรรทัดนั้นเป็นส่วนที่จะคอมฯจะอ่านผ่านไปครับ ไม่นำมาคิดมาแสดงผลอะไร แต่ที่ทำไว้ก็เพื่อจุดประสงค์ต่างๆ เช่น โน๊ตให้รู้ว่าสคริปนี้ใช้งานอย่างไร ให้ผลอย่างไรเหมือนในตัวอย่างนี้ครับ หรือคนที่ไปหาโค้ดมาจากที่อื่นคงเคยเห็นว่าหลังเครื่องหมาย // จะตามด้วยชื่อคนที่ทำสคริปนั้นครับ เพื่อแสดงว่าเขาเก่งสุดๆ หรือบอกว่านี่มันของชั้นนะ ห้ามแก้ไขอะไรเด็ดขาด หรืออะไรก็แล้วแต่(ผมไม่กล้าทำ) ในการเขียนสคริปยาวมากๆ การทำแบบนี้ไว้ในส่วนต่างๆ บอกว่าสคริปจุดนี้ใช้ทำอะไร จุดนั้นใช้ทำอะไร ก็ช่วยให้การเขียนง่ายขึ้นครับ


ผมจะแยก document.write(".......................") ออกเป็นส่วนๆตามลำดับดังต่อไปนี้นะครับ
·         document.write(    อันนี้บอกให้เขียนลงใน document(ก็ในหน้าต่างขาวๆว่างๆนั่นแหละครับ)
·         "คุณเข้ามาในวัน("    อันนี้เป็นข้อความแรกสุดที่สั่งให้เขียน จะเห็นว่ามีใส่วงเล็บเปิดรอไว้ด้วยครับ
·         +a.getDay( )+    อันนี้อธิบายยาวหน่อยครับ ผมว่าหลายคนอาจเดาไม่ออกว่าผลที่ออกมาจากตรงนี้มันเป็นเลขของอะไร เฉลยว่าเป็นเลขลำดับของวันทั้ง 7 ครับ ซึ่งคอมจะไม่แสดงออกมาเป็น จันทร์ อังคาร แบบที่เราเรียกกัน แต่จะแสดงออกมาในรูปของตัวเลข ตั้งแต่ 0 ถึง 6 โดยเลข 0 เป็นตัวแทนวันอาทิตย์ เลข 1 แทนวันจันทร์ แล้วก็ไล่ไปตามลำดับ เลข 6 จะแทนวันเสาร์ ในบทถัดๆไปจะสอนการเปลี่ยนตัวเลข 0 ถึง 6นี้ ให้แสดงผลออกมาในรูปอยู่ในรูปวันต่างๆ ที่เราเรียกกันครับ ได้แก่ อาทิตย์ จันทร์ อังคาร ไปจนถึงเสาร์

สังเกตได้ว่า a.getDay( ) จะไม่มีเครื่องหมายคำพูดมาหุ้มเหมือนข้อความแรก เพราะว่า a.getDay( ) เป็นตัวแปร(ค่าที่เป็นตัวเลขหรือได้จากการคำนวณ) หากนำเครื่องหมายมาปิดทั้งสองด้านสิ่งที่จะแสดงผลออกมาจะเป็นเพียงตัวหนังสือ a.getDay( ) แทนที่จะได้เลขลำดับวันออกมา ซึ่งเป็นกฎหนึ่งในจาวาสคริปที่ใช้กับตัวแปรครับ และตัวแปรจะเชื่อมต่อกับข้อความได้ด้วยเครื่องหมายบวกเท่านั้น
·         ")ที่ "+a.getDate()+" เดือน "+    a.getDate() เป็นการเรียกค่าวันที่ครับ ส่วนนี้จะเห็นว่าผมเว้นวรรค(ช่องว่าง)ไว้ทีนึงตรงหลังคำว่าที่...")ที่ "    เพื่อให้ค่าวัน ที่จะตามมาไม่ติดกับคำว่าที่ เวลาแสดงผลไงครับ อันนี้เป็นเทคนิคหนึ่งที่สมควรจำไว้ครับ คุณอาจเขียนแบบ html แทนที่ช่องว่างนั้นด้วยเครื่องหมาย & และตามติดด้วย nbsp; ซึ่งจะให้ผลเป็นเว้น 1 ช่องเช่นเดียวกันครับ ผมก็ใช้เทคนิคที่ว่าหลังคำว่าเดือนเช่นกันครับ โดยเว้นไว้ด้านขวาด้วย เพื่อไม่ให้เดือนอยู่ติดกับตัวเลขที่จะตามมาเวลาแสดงผล
·         (a.getMonth( )+1)    แสดงลำดับที่ของเดือนครับ ที่ต้องบวกหนึ่ง เพราะคอมฯนับเดือนมกราคมเป็น 0 ครับ จนถึงเดือนธันวาคม นับเป็น 11 เราจึงต้องบวกหนึ่งเข้าไปเพื่อให้แสดงเลขเดือนเหมือนอย่างที่คนเรานับกัน
·         +" ปี ค.ศ. "+a.getFullYear( )+" เวลา "+a.getHours( )+
" นาฬิกา "+a.getMinutes( )+" นาที "+
ท่อนข้างบนนี้ แสดงวิธีการรับค่าปี ชั่วโมง และนาทีครับ อธิบายได้เหมือนๆกับที่ได้อธิบายส่วนบนไปแล้ว
·         a.getSeconds( )+" วินาที "+a.getMilliseconds( )+" มิลลิวินาที")
ท่อนข้างบนนี้ แสดงวิธีการรับค่าวินาที และมิลลิวินาที ซึ่งเป็นระดับที่ละเอียดสุดของเวลาที่จาวาสคริป จะดึงมาได้ครับ
·         </script>    สุดท้ายนี้ต้องไม่ลืม ใส่เพื่อให้คอมรู้ว่าจบสคริปแล้ว
แบบฝึกหัด
ได้เวลาแบบฝึกหัดแล้วครับ เอาล่ะ โจทย์วันนี้มีอยู่ว่า....ให้คุณใช้จาวาสคริป(เท่านั้น)ออกแบบประโยคต้อนรับผู้เข้าเยี่ยมชม โดยทั้งประโยคนั้นต้องเป็นสีเขียว (สีเขียวในภาษาอังกฤษคือ green) แล้วบอกผู้เข้าเยี่ยมชมด้วยว่าเขาเข้ามาในวันที่เท่าไหร่(1 ถึงสูงสุดคือ 31)   เดือนที่เท่าไหร่   ปี พ.ศ.อะไร(ต้องนำเลขปี ค.ศ. มาบวกด้วย 543 จึงจะกลายเป็นเลข พ.ศ.) แล้วใส่ชื่อคุณในสคริปด้วยนะครับบอกว่าอันนี้คุณทำเอง

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

 
;