เก่งภาษาจาวาสคริปต์: ธันวาคม 2015

บทเรียนที่ 1 พื้นฐานของจาวาสคริป

สิ่งที่คุณจำเป็นต้องใช้ในการเขียนจาวาสคริป

· คอมพิวเตอร์

· โปรแกรมที่ใช้เปิดสิ่งที่คุณเขียน ก็คือโปรแกรมที่ใช้เปิดเว็บ(web browser) ได้แก่ Internet Explorer(IE) หรือ Netscape Navigator(NN) ที่คุณกำลังใช้อ่านเว็บนี้อยู่นั้นแหละครับ

· โปรแกรมพิมพ์ตัวหนังสืออะไรก็ได้ สำหรับของไมโครซอฟท์ก็เช่น word,notepad,wordpad หรือจะใช้โปรแกรมช่วยสร้างเว็บก็ได้เช่นกัน แต่ในที่นี้ผมแนะนำให้ใช้ notepad ครับ เพราะใช้งานง่าย เหมาะกับผู้เริ่มเขียนใหม่ๆ ลองเปิดขึ้นมาเลยครับ(สำหรับ Windows 98 ที่ผมใช้นะครับ Windows อื่นๆ ผมไม่รู้ว่าจะอยู่ที่เดียวกันเหมือนกับที่ผมใช้รึเปล่า) กดที่ปุ่ม Start แล้วกดเลือก Programs แล้วกดเลือก Accessories กดเลือก Notepad หากหาไม่เจอจริงๆให้คลิ๊กขวาในหน้านี้แล้วกดเลือก View Source หน้าต่างที่เปิดออกมา แล้วมีตัวหนังสืออยู่ข้างในเต็มไปหมด คือโปรแกรม notepad แต่หากคุณจะเขียนใหม่ ให้กด File แล้วกด New

· และสุดท้าย คือความพยายามและเวลาที่คุณมีให้ได้ครับ สำคัญที่สุด การลงมือปฏิบัติ กล้าลองผิดลองถูกจะทำให้คุณเรียนสิ่งต่อไปนี้ได้ไม่ยากครับ ซึ่งที่นี่..เราจะพยายามดึงคุณให้เข้ามามีส่วนร่วมกับเว็บนี้อย่างเต็มที่ครับ

จาวาสคริปเป็นภาษาคอมฯที่เรียนรู้ได้ง่ายครับ เป็นภาษาที่ถูกสร้างขึ้นโดยกลุ่มคนดี(ภาษาอังกฤษเขาใช้ good people) ใน Netscape มันเป็นคนละภาษากับจาวาที่พัฒนาโดย Sun Microsystems นะครับ แต่ก็มีหลักการที่คล้ายกัน คือสร้างสิ่งที่เล็กๆขึ้นมา เพื่อเป็นตัวแทนและควบคุมสิ่งที่ใหญ่ๆขึ้นมา ตรงจุดนี้ก็อาจไม่เข้าใจอะไรนักครับ แต่ต่อไปคุณก็จะเริ่มเข้าใจมากขึ้นเอง เรามาดูวิธีเขียนเริ่มต้นก่อนเลย ทุกครั้งของการเขียนต้องเริ่มต้นจาก

จะเห็นว่า โครงสร้างหลักเริ่มต้นคือ <script language="javascript"> ซึ่งเป็นตัวบอกให้คอมรู้ว่าสิ่งที่ตามมา เป็นสคริปที่ ใช้ภาษาจาวาสคริปนะ คอมจะได้อ่านถูก ไม่งั้นถ้าไม่มี คอมจะอ่านคำสั่งที่เราพิมพ์ออกมาเป็นตัวอักษรธรรมดาๆในรูป html เสียหมด

ต่อมาในส่วนกลางที่ผมพิมพ์ว่า คำสั่งที่เราจะเขียน เป็นคำสั่งต่างๆ ที่เราพิมพ์ลงไปเพื่อให้มันทำงานได้อย่างที่เราต้องการ

ส่วนสุดท้าย </script> ซึ่งเป็นตัวปิดทุกๆจาวาสคริปที่คุณเขียนขึ้น หากลืมพิมพ์ลงไป คำสั่งจาวาสคริปภายในก็จะไม่ทำงานเลยครับ

มาถึงตอนนี้ คงเปิด notepad รอไว้แล้วใช่มั้ยครับ เรามาเริ่มคำสั่งแรกกันเลย ทำตามที่ผมบอกนะครับ
พิมพ์ข้อความภาษาอังกฤษข้างล่างนี้ ลงไปใน notepad ห้ามลากเมาส์คลุมแล้วกด copy แล้วเอาไป paste ใน notepad นะครับเพราะต้องการให้ฝึกเขียน(พิมพ์)เองให้คล่องมือ

<script language="javascript">
document.write("<font color='red'>ตัวอักษรนี้มีสีแดง</font>")
</script>

(ข้อความที่พิมพ์ลงไปจะเว้นบรรทัดตามแบบตัวอย่างก็ได้ครับหรือจะพิมพ์ติดกันไปตลอดก็ให้ผลเหมือนกันครับ แต่แนะนำให้ใช้ตัวพิมพ์เล็กทั้งหมดนะครับ หากตัวหนังสือที่คุณพิมพ์ลงในโปรแกรม notepad เป็นตัวเล็กเกินไป มองเห็นได้ลำบาก คุณสามารถปรับขนาดอักษรได้โดยเข้าเมนูที่อยู่ด้านบนครับ สำหรับ Windows 98 เข้าที่ edit แล้วกดเลือก set Font...)

การ save จาวาสคริปในรูปของ HTML

           เมื่อพิมพ์ลง notepad เสร็จแล้วกด File แล้วกดเลือกที่ Save As... หลังจาก save ครั้งแรกด้วย Save As... แล้ว หลังจากการเพิ่มเติมหรือแก้ไข หากต้องการ save ทับของเก่าให้กด Save ทีเดียวได้เลยครับ

ตรงจุด Save as type ที่อยู่ล่างสุด ให้เลือก ที่ Text Documents นะครับซึ่งเป็นการเซฟในรูปแบบของตัวอักษรอย่างเดียว(ไม่เอาย่อหน้า จัดหน้า รูปแบบอักษร เหมือน word) แล้วตั้งชื่ออะไรก็ได้(โปรดใช้อักษรภาษาอังกฤษ ไม่งั้นจะมีปัญหาเวลานำไปลงเป็นเว็บไซต์) แต่ต้องตามด้วยจุดและhtml นะครับ เช่นตั้งชื่อ iloveu ก็ให้พิมพ์ไปว่า iloveu.html ซึ่งก็เป็นแบบเดียวกับการ save ไฟล์ html น่ะครับ แล้วเลือกตำแหน่งที่จะเซฟลงคอม ซึ่งผมแนะนำให้สร้าง folder ขึ้นมาใหม่เพื่อเก็บสิ่งที่คุณเขียนเอาไว้ (ของผมตั้งชื่อ folder ว่า test java ของคุณก็แล้วแต่จะตั้งครับ) แล้วจัดการเซฟลงใน folder นั้นครับ

อะ ฮ้า...ได้เวลาเปิดผลงานที่คุณทำขึ้นแล้ว เข้าไปใน folder นั้นครับ แล้วเปิดไฟล์ที่เพิ่งเซฟออกมา

สิ่งที่คุณได้ก็จะเป็นอย่างข้างล่างนี้ใช่ไหมครับ

ตัวอักษรนี้มีสีแดง

           หากคุณเคยเขียน html มาก่อนก็จะรู้เลยว่านี่มันเขียนยังไง นั่นคือใช้คำสั่ง... <font color="สีข้อความที่เราต้องการ">ข้อความ</font> แทนที่จะเขียนลงไปใน notepad ซะยืดยาวอย่างนั้น คุณสามารถเขียนแบบ html ลงใน notepad ได้โดยให้ผลลัพท์แบบเดียวกัน ตามข้างล่างนี้ครับ ไม่จำเป็นต้องพิมพ์ <html> และ </html> คอมก็สามารถอ่านได้ครับ

<font color="red">ตัวอักษรนี้มีสีแดง</font>

ถ้าคุณจะบอกว่าอย่างงี้ เขียน html ไม่ดีกว่าเหรอ ผมก็ต้องบอกว่าจริงในกรณีนี้ครับ แต่ประโยชน์ของคำสั่งนี้ยังมีมากกว่านี้ครับ

การเปิดไฟล์จาวาสคริป(ในรูปของ HTML) ขึ้นมาแก้ไขหรือเพิ่มเติม...

คุณกำลังเปิด notepad อยู่ และสร้างไฟล์ HTML ตามตัวอย่างข้างบนแล้วใช่มั้ยครับ ถ้าใช่...กรุณาปิด notepad ทิ้งไปตอนนี้ได้เลยครับ(เชื่อผมครับ) แล้วเปิดไฟล์ HTML ที่คุณเพิ่งสร้าง ที่ชื่อ iloveu.html หรือชื่ออะไรก็แล้วแต่ที่คุณตั้ง แล้วคลิ๊กขวาในหน้าต่างขาวๆว่างๆ นั่นเลยครับ...จะขึ้นเมนูขึ้นมาให้คุณเลือก ..ให้กดเลือกที่ View Source ...พอกดปั๊บ หน้าต่างที่โผล่ออกมาใหม่กลายเป็นหน้าต่าง notepad ที่คุณเพิ่งปิดไปใช่มั้ยครับ เพราะว่า คำสั่ง View Source จะแปลงไฟล์ HTML บนหน้าจอ ให้อยู่ในรูปไฟล์ตัวอักษรดั้งเดิมของมัน( HTML ไม่ใช่ภาษาคอมพิวเตอร์นะครับ... HTML เป็นไฟล์ตัวอักษรภาษาอังกฤษธรรมดาๆ ดังนั้น notepad ซึ่งเป็นโปรแกรมอ่านตัวอักษรธรรมดาๆ จึงเปิดอ่านได้สบาย)
คุณจึงสามารถเพิ่มเติมหรือแก้ไขจาวาสคริป(หรือ HTML) ใน notepad ที่เปิดออกมาจากคำสั่ง View Source ได้เลย พอแก้ไขหรือเพิ่มเติมเสร็จ ให้กด File แล้วกด Save โดยไม่ต้องใส่ .html เพิ่มเข้าไปในส่วนของการตั้งชื่อ notepad ก็จะ save ทับไฟล์ HTML นั้นให้ครับ
ในโปรแกรมที่ใช้เปิดเว็บ(Browser) ตรงเมนูกดที่ View แล้วกดเลือกที่ Source คุณก็สามารถเข้าไปแก้ไข HTML หรือจาวาสคริป ได้เช่นกันครับ (ลองทำตอนนี้ กับเว็บนี้ดูสิครับ คุณก็จะเห็นตัวตนที่แท้จริง ดั้งเดิมของเว็บนี้ในรูปของตัวอักษรธรรมดาๆ ที่ยังไม่ผ่านการประมวลผลของ Browser จนออกมาให้เห็นในหน้าจอ)

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

<script language="javascript">
document.write("<font color='red'>ตัวอักษรนี้มีสีแดง</font>")
</script>

<script language="javascript">    อันนี้ใส่บอกคอมว่าสิ่งที่จะตามมานี้เป็นจาวาสคริป คอมจะได้อ่านถูก

document.write("<font color='red'>ตัวอักษรนี้มีสีแดง</font>")    สามารถแยกส่วนนี้ออกมาได้ดังต่อไปนี้

document หมายถึง เนื้อหาในหน้าต่างทั้งหมด หากคุณยังไม่ได้เขียนอะไรลงไป มันก็เป็นหน้าต่างขาวๆ ว่างๆ นั่นล่ะครับ

.    (จุด)ใส่เพื่อบอกคอมว่าจะมีคำสั่งมาทำงานกับ document ซึ่งถือว่า document เป็นตัวถูกกระทำ(object)

write    เป็นวิธีกระทำ(method) ที่จะเขียนสิ่งต่างๆลงใน document

(    วงเล็บเปิด เริ่มเขียน

"    เครื่องหมายคำพูด แสดงให้คอมฯรู้ว่าจะเขียนข้อความลงใน document

ภายในเครื่องหมายคำพูดก็คือโค้ด html ครับ

'    สังเกตได้ว่ามีเครื่องหมายขีดเดียวอยู่ใน โค้ด html แทนที่จะใช้สองขีดปกติ เพราะว่าหากใส่เครื่องหมายสองขีดลงไป คอมจะนึกว่า เราเขียนจบแล้วครับ เพราะมีเครื่องหมายสองขีดเริ่มแรกอยู่ก่อนแล้ว และมันจะทำให้เกิด Error ขึ้นครับ ตัวหนังสือก็จะไม่ถูกแสดงออกมาในหน้าจอ

"    ปิดด้วยเครื่องหมายคำพูด document

)    ใส่วงเล็บปิดเพื่อจบการเขียน

</script>    จบจาวาสคริปที่จุดนี้

รูปแบบของทุกๆคำสั่งที่ใช้ในจาวาสคริปจะเป็นไปตามนี้...
ตัวถูกกระทำ.วิธีกระทำ (ภาษาอังกฤษใช้ object.method) หรือ ตัวถูกกระทำ.ส่วนประกอบ (object.property)

ตัวถูกกระทำ ในที่นี้คือ document
วิธีกระทำ ในที่นี้คือ write
ส่วนประกอบ คือส่วนประกอบของ ตัวถูกกระทำ ใช้เมื่อเราต้องการเปลี่ยนแปลงแก้ไขส่วนประกอบของตัวถูกกระทำ

ยังมี ตัวถูกกระทำ วิธีกระทำ และ ส่วนประกอบ อีกมากมายหลายชนิดครับ ซึ่งจะกล่าวถึงในอีกหลายบทถัดๆไป

กฎของการใช้จาวาสคริปในบทเรียนนี้

· ใน ตัวถูกกระทำ.วิธีกระทำ หรือ ตัวถูกกระทำ.ส่วนประกอบ ต้องใช้ตัวพิมพ์เล็กภาษาอังกฤษทั้งหมดเท่านั้น ถ้าใช้ Document.write นี่...เจ๊งเลยครับ Error(คอมฯอ่านคำสั่งไม่รู้เรื่องและไม่สามารถนำมาแสดงผลได้) ลองทำดูสิครับ ไปเผลอพิมพ์ตกก็ไม่ได้ครับ เช่น document.writ นี่ก็ทำให้เกิด Error อีกเช่นกัน

· ในประโยค document.write("<font color='red'>ตัวอักษรนี้มีสีแดง</font>") ต้องอยู่ในบรรทัดเดียวกันทั้งหมด ถ้าแยกแบบข้างล่างนี้
document.write("<font color='red'>
ตัวอักษรนี้มีสีแดง</font>")

...ก็เจ๊งสิครับ แต่มันวิธีแก้อยู่ ทำแบบนี้ครับ...
document.write("<font color='red'>"+
"ตัวอักษรนี้มีสีแดง</font>")

แยกออกเป็นสองประโยคโดยใช้เครื่องหมาย + เป็นตัวเชื่อมครับ ข้างล่างนี้ก็ให้ผล เช่นเดียวกัน(สังเกตว่าก่อน color จะเว้นที่ว่างไว้ที่หนึ่ง ไม่งั้น โค๊ด html ที่เขียนออกมา font จะติดกับ color เป็น fontcolor ทำให้ตัวอักษรไม่เป็นสีแดง) แต่ยุ่งยากครับไม่จำเป็น จะลอง copy ไปใส่ดูก็ได้ครับ...
document.write("<font"+" color"+"="+"'red'>"+"ตัวอักษรนี้"+"มีสีแดง<"+"/font>")

· อย่าลืมนะครับว่าภาพในเครื่องหมายคำพูด(สองขีด ") ห้ามใส่เครื่องหมายคำพูดซ้ำเข้าไปภายในอีก ต้องใส่เครื่องหมายขีดเดียว( ' ) เท่านั้น ไม่งั้น Error แน่ๆ

เก่งภาษาจาวาสคริปต์

บทเรียนที่ 1 พื้นฐานของจาวาสคริป

ทำอินโทรเอฟเฟค ในมือถือ

ฟรีวีดีโอแบ็คกราว สำหรับทำคลิป

ค้นหาบล็อกนี้

เนื้อหาบล็อก

คลังบทความ

สถิติ