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