รู้จักกับ Java script

หนวยท่ี

รูจักกับ JavaScript 1

1

1.1พื้นฐานและประวัติความเปนมา

JavaScript เปนภาษาสคริปตทีใ่ชกันในเว็บบราวเซอร (Web browser) สวนใหญ เชน Internet

Explorer FireFox Opera Netscape หรือ Chrome โดยภาษา JavaScript เปนภาษาประมวลผล (Programming

language) ซึ่งแตกตางจาก ภาษา HTML ที่เปนภาษาแสดงผล (Markup language) ที่ไดศึกษากันมาในภาค

เรียนท่ีแลว โดยภาษาประมวลผลนั้นจะสามารถทําการคํานวณ หาคา บวก ลบ คูณ หาร และมีตัวแปร ซึ่งสิ่ง

เหลานี้จะไมพบในภาษา HTML ในการเพิ่ม JavaScript ขึ้นมานั้นก็เพื่อใหเว็บเพจ เว็บไซตดูนาสนใจ มี

การปฎิสัมพันธกับผูใชมากที่สุดในลักษณะของ Dynamic website

หากนักเรียนไดลองทําการสืบคนขอมูลเกี่ยวกับ JavaScript ก็มักจะพบเจอคําวา Java ซึ่งมีชื่อ

คลายกันและทําใหคนสวนใหญสับสนคิดวาเปนภาษาเดียวกันและอีกประการที่คลายๆ กันคือทั้งสองภาษา

จัดเปนภาษาประมวลผลเชนเดียวกัน เพื่อใหเห็นขอแตกตางจึงไดทําการแยกเปนตารางเพื่อเปรียบเทียบให

เห็นความแตกตางไดดังนี้

ตารางท่ี 1 แสดงการเปรียบเทียบระหวาง JavaScript และ Java

JavaScript Java

เปนภาษาประมวลผล(Programming language)

ยึดโครงสรางและพัฒนามาจากภาษาซี ( C language) เปนตนแบบ

ใชการประมวลผลแบบ interpreter คือ การแปลภาษาทีละ

บรรทัด

ใชการประมวลผลแบบ Compiler คือ การแปลภาษาเพียง

ครั้งเดียว

เปนโปรแกรมยอยๆท่ีสามารถฝงตัวอยูใน HTML สามารถสรางแอพลิเคช่ันท่ีทํางานบนวินโดวสไดเหมือน

ภาษา C หรือ VB

สามารถทํางานบนเว็บเพจไดสะดวกกวาและสามารถเรียกดู

ไดโดยไมตองติดต้ังเพ่ิมเติม

หากตองการทํางานบนหนาเว็บตองติดต้ังตัว Compiler กอน

จึงจะดูผลลัพธได

ผลิตโดยบริษัท Netscape Communications เมื่อป พ.ศ.

2538 ชวงแรกใชช่ือวา Mocha และ LiveScript ตามลําดับ

ตอมาไดรวมกับบริษัท Sun รวมกันสรางบราวเซอร

Netscape Navigator 2.0 และตองการใหใชรวมกับ Java ได

ดวยทําใหทางบริษัทจึงเปล่ียนช่ือมาเปน JavaScript จนถึง

ปจจุบัน

ผลิตโดยบริษัท Sun Microsystems ตั้งแตป พ.ศ.2534

Created with Print2PDF. To remove this line, buy a license at: http://www.software602.com/

1.2 เร่ิมตนการเขียน JavaScript

กอนท่ีจะไปเริ่มตนเขียนคําสั่ง JavaScript นั้นขอทบทวนความรูพื้นฐานของภาษา HTML เพ่ือท่ีจะ

สามารถนําไปใช เพราะคําสั่ง JavaScript นั้นใชรวมกับภาษา HTML โดยท่ี JavaScript นั้นจะตองใชภาษา

HTML เปนตัวแสดงผลเนื่องจาก JavaScript นั้นแสดงผลเองไมได

โครงสรางของภาษา HTML

โครงสรางของภาษา HTML ประกอบไปดวย 2 สวนหลักๆ คือ สวน “หัว <HEAD>”และ สวน “ตัว

<BODY>” โดยทั้งสองสวนนี้จะอยูภายใน <HTML>…</HTML>

สวน“หัว <HEAD>”

เปนสวนที่ใชกําหนดลักษณะทั่วไป ๆ ที่ไมใชเนื้อหาของเว็บเพจ เชน

- การกําหนดชื่อบน Title bar <TITLE>…</TITLE>

- <SCRIPT>…<SCRIPT> ใชกําหนดภาษาสคริปต ที่เรากําลังจะเรียนในบทตอๆไป

สวน“ตัว <BODY>”

เปนสวนหลักที่ใชแสดงเนื้อหาของเว็บเพจและเปนสวนที่ใชในการเขียนคําสั่งทั้งหมดจะเก็บที่

บริเวณนี้

สวนคําสั่ง <TAG>

แท็ก<TAG> คือสวนของคําสั่งโดยใน HTML นั้นจะประกอบไปดวยแท็กมากมายหลายแบบ แท็ก

มีทั้งแบบที่เปนแท็กคู เชน คําสั่งกําหนดรูปแบบตัวอักษรใหมีตัวหนา <B>….</B> และที่เปนแท็ก

เดี่ยว เชน คําสั่งขีดเสนแนวนอน <HR>


สวนคําสั่งแอททริบิวต (ATTRIBUTE)

คําสั่งในสวนแอทริบิวตนั้นคือสวนขยายของแท็กวิธีการเขียนก็คือการ แทรกคําสั่งนั้นๆ ลงในสวน

แท็ก เชน การกําหนดสีใหพื้นหลังเว็บเพจ

ใหญนั้นมักจะเกี่ยวของกับการแสดงผล เชน การกําหนดความ

สี (COLOR) ขนาด (SIZE)

วิธีการเขียนคําสั่ง JavaScript

เราสามารถเขียนคําสั่ง JavaScript

ตําแหนงสวนหัว <HEAD>

สวนใหญนิยมเขียนอยูในสวนนี้เนื่องจากสามารถเรียกใชไดสะดวกและเรียกใชฟงกชั่นจากสวน

ใดๆ ของเว็บเพจได

ตําแหนงสวนตัว <BODY>

คําสั่ง JavaScript เทาน้ัน

รูจักกับ

(ATTRIBUTE)


ใหพื้นหลังเว็บเพจ <BODY BGCOLOR= “RED”> โดยแอทริบิวตสวน

ใหญนั้นมักจะเกี่ยวของกับการแสดงผล เชน การกําหนดความกวาง (WIDTH)

(SIZE) เปนตน

JavaScript แทรกไวที่สวนตางๆของโครงสรางภาษา HTML

<HEAD>


<BODY> ของเอกสารแตจะสามารถเรียกใชไดเฉพาะสวนของเว็บเพจที่อยูใต



3


โดยแอทริบิวตสวน

WIDTH) ความสูง (HEIGHT)

HTML ดังน้ี


ของเอกสารแตจะสามารถเรียกใชไดเฉพาะสวนของเว็บเพจที่อยูใต


เปนคาอีเวนต (Event) ของแท็กคําสั่ง HTML เปนการเขียนคําสั่งเฉพาะจุด คือ ในแท็กของ HTML

ที่ระบุไวเทานั้น

เก็บไวในไฟลแยกตางหากโดยเก็บไวในไฟล .js การเก็บแบบนี้ทําใหบริหารไดสะดวกขึ้นคือ สารถ

แกไขคําสั่งเพียงที่เดียวแตสามารถสงผลไปถึงหลายๆ ไฟล HTML ได

วิธีการเขียนคําสั่ง JavaScript

การเขียนคําสั่ง JavaScript มีวิธีการดังนี้

เขียนจากซายไปขวา บนลงลาง และจบแตละคําสั่งดวยเครื่องหมาย Semicolon (;)

สามารถรวมคําสั่งเปนชุดเดียวกันเปนกลุมคําสั่ง (JavaScript Blocks) โดยใชเครื่องหมาย

Curly bracket {…}

การใชตัวพิมพเล็ก-พิมพใหญจัดเปนเรื่องสําคัญ เพราะ JavaScript จัดเปนภาษาแบบ Case-

Sensitive เชน HELLO กับ hello หรือ Hello ทั้ง 3 ตัวจัดเปนคนละตัวกันเมื่อพิมพชื่อผิดก็

จะสงผลทําใหไมสามารถเรียกใชฟงกชั่นได

การใสคําอธิบาย ( Comment) การใสคําอธิบายในคําสั่งเพื่อประโยชนในการแกไขหรือ

เมื่อผูอื่นเขามาดูก็จะทําใหทราบถึงคําสั่งนั้นๆ มีวิธีการอยู 2 วิธีคือ

- แบบ Two Slashes ใชอธิบายบรรทัดเดียว ขอความที่อยูหลังเครื่องหมาย // จะถูกมองเปน

คําอธิบาย เชน document.write(“Hello world”); // เขียนขอความวา Hello world

-แบบ Slashes Star ใชเขียนอธิบายหลายๆบรรทัดโยมีวิธีเขียนเชน /*โปรแกรมนี้สราง

ขึ้นมาเพื่อทดลองใช หากมีขอสงสัยโปรติดตอ บริษัท*/




5

พื้นฐานการเขียน JavaScript

JavaScript จัดเปนภาษาประมวลผล(Programming language) เหมือนภาษาประมวลผลอื่นๆ เชน

Pascal, C เปนตนและมีเรื่องหลักๆ ที่ตองทําความเขาใจดังนี้

ตัวแปร คือการจองพื้นที่ของขอมูลไวใชเก็บขอมูล พักขอมูล ใชเรียกดูขอมูล โดยทําการกําหนดชื่อ

ตั้งชื่อตัวแปรขึ้นมาเรียกใชงาน และตัวแปรเมื่อตั้งชื่อแลวสามารกําหนดคาใหตัวแปรไดโดยใช

เครื่องหมายเทากับ =

จากคําสั่ง ไดประกาศชื่อตัวแปรชื่อ myname และกําหนดคาใหตัวแปรเก็บคําวา JOE ไว ( mymane=

"JOE") จากนั้นเรียกคําสั่ง alert ใหแสดงขอความวา Hello ตอทายคาที่เก็บในตัวแปร myname

alert=("Hello"+myname); เปนอันจบฟงกชั่นนี้

ผลลัพธที่ไดดังนี้


การสงคาเขาสูฟงกชั่น การประมวลผลหาผลลัพธมีความจําเปนที่จะตองนําขอมูลเขามาเพื่อทําการ

ประมวลผล ซึ่งวิธีการสงคาเขาสูฟงกชั่นมีอยูหลายวิธี เชน การสงผานขอมูลจากผูเยี่ยมชมโดยใช

กลองรับขอมูล ดังตัวอยาง

จากคําสั่ง prompt คือ คําสั่งที่ใหแสดงกลองเพื่อรับขอมูลจากผูใชมาเก็บไวที่ตัวแปร myname และ

เมื่อเราลองเรียกใชงานฟงกชั่นขึ้นมา จะปรากฏกลองรับขอมูลและเมื่อผูใชพิมพชื่อลงไปแลวกดปุม OK ตัว

แปรนั้นก็จะเก็บชื่อไว แลวจะปรากฏขอความวา Hello แลวตามดวยชื่อ

1. เมื่อใชเมาส

คลิกคําวา click

2. จะปรากฏกลองรับขอมูลใหผูใช

พิมพชื่อและกดปุม OK

3. จะปรากฏขอความวา Hello แลว

ตามดวยชื่อที่พิมพเขาไป




7

แบบฝกหัดหนวยที่ 1 เรื่อง รูจักกับ JavaScript

ขอ 1 คําชี้แจง จงใสเครื่องหมายถูก () หนาขอที่ถูกและใสเครื่องหมายผิด () หนาขอที่ผิด

________1.1 JavaScript จัดเปนภาษาประมวลผล ประมวลผล (Programming language)

________1.2 JavaScript เหมือนกับภาษา HTML

________1.3 JavaScript ใชการประมวลผลแบบ Compiler

________1.4 JavaScript และ Java คือ ภาษาเดียวกัน

________1.5 ตําแหนงการเขียนคําสั่ง JavaScript สามารถเขียนไดที่สวน Body เทานั้น

________1.6 ตําแหนงการเขียนคําสั่ง JavaScript สามารถเขียนไดที่สวน Head

________1.7 ตัวแปรคือ การจองพื้นที่เพื่อเก็บขอมูล

________1.8 การสงคาเขาสูฟงกชั่น (prompt) สามารถทําโดยผูใชงาน

________1.9 การเขียนคําสั่ง JavaScript เขียนจากบนลงลาง

________1.10 ตัวแปร HELLO กับ hello หรือ Hello ทั้ง 3 ตัวจัดเปนตัวแปรเดียวกัน

----------------------------------------


ขอ 2 คําชี้แจง จากโปรแกรมที่กําหนดใหใหนักเรียนอธิบายดวยขอความสั้นๆ ใหถูกตอง

2.1

จงอธิบายวาสวนใดคือสวนตัวแปรและมีกระบวนการการทํางานอยางไร

---------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------

2.2

จงอธิบายวาสวนใดคือการสงคาเขาสูฟงกชั่นและมีกระบวนการทํางานอยางไร

---------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------




9

ขอ 3 คําชี้แจง จากโปรแกรมที่กําหนดใหใหนักเรียนเลือกขอใดขอหนึ่งแลวนําไปเขียนลงในเครื่อง

คอมพิวเตอรแลวนําผลที่ไดมาตอบลงในชองวางที่กําหนดให

3.1

ผลลัพธจะแสดงขอความวา .......................................................


3.2

ผลลัพธที่ไดคือ....................................................

จากนั้นใหนักเรียนใสขอความลงไปแลวกดปุม OK ผลลัพธที่ไดคือ.......................................................




11

3.3

ผลลัพธที่ไดคือ....................................................

จากนั้นใหนักเรียนแกไขตัวแปร myname= "JOE" จากคําวา JOE เปนชื่อนักเรียน ผลลัพธที่ไดคือ..................


3.4

ผลลัพธที่ไดคือ....................................................


Education

รู้จักกับ Java script