JavaScript
>  Home   HTML   CSS   JavaScript   PHP   Perl   Photoshop   TCP/IP 

บทที่ 2 เรื่องของตัวแปร

          JavaScript ก็เหมือนภาษาที่ใช้เขียนโปรแกรมทั่วไป ตรงที่มีตัวแปรสำหรับเก็บค่า จากส่วนหนึ่งของ Program แล้วก็เอาไปใช้ในส่วนอื่นๆได้ ตัวแปรก็คือ ชื่อที่เรากำหนดขึ้นมาสำหรับเก็บค่า อย่างเช่น เราอาจกำหนดตัวแปรชื่อว่า imageName เพื่อไปเก็บชื่อไฟล์ภาพๆหนึ่ง หรือ อาจกำหนดให้ amount ไปเก็บจำนวนเต็ม เป็นต้น

การตั้งชื่อตัวแปร

          ชื่อของตัวแปรใน JavaScript สามารถขึ้นต้นด้วยตัวอักษรใหญ่ A-Z ตัวอักษรเล็ก (a-z) และ เครื่องหมาย _ ตามด้วย ตัวอักษร ตัวเลข หรือ เครื่องหมาย _ ก็ได้ ตัวอย่างชื่อตัวแปรที่ถูกต้อง

orderNumber2
_456
SUM
Image32
Amount_Click

ข้อควรจำ ชื่อตัวแปรใน JavaScript จะเข้มงวดในการใช้ตัวอักษรใหญ่หรือเล็กด้วย(case sensitive) เช่น Sum SUM sum จะถือว่าไม่เป็นตัวแปรเดียวกันนะ

ชนิดของตัวแแปร

          สิ่งที่ต่างจาก Java และ ภาษาบางภาษาคือ ผู้ใช้ภาษา JavaScript ไม่จำเป็นต้องกำหนดชนิดของตัวแปร ชึ่ง JavaScript จะสามารถรู้ได้เองว่า ในการนำตัวแปรไปใช้นั้น คุณต้องการให้มันเป็นตัวแปรชนิดไหน เช่นถ้าผมกำหนด ให้ตัวแปร Ahha มีค่าเป็น 1 ตัวแปร Ahha อาจจะให้ค่าเป็น True ได้ ถ้าคุณใช้มันไปในทางตรรก หรืออาจจะเป็น 1.0000 ก็ได้ แต่ความสามารถแบบนี้ก็เปรียบเสมือนดาบ 2 คม ในแง่หนึ่ง คุณสามารถใช้ตัวแปรได้อย่างอิสระ เพราะไม่มีข้อจำกัดในด้านชนิดตัวแปร และในอีกแง่หนึง คุณต้องจำได้ว่า ตัวแปรของคุณจะเป็นชนิดไหนในแต่ละขั้นตอนของการคำนวน

JavaScript สนับสนุนการใช้ตัวแปรเก็บค่าข้อมูล 4 ชนิดคือ

ตัวแปรชนิดตัวเลข : Integer and Floating-Point

          ในการทำงานกับตัวเลข JavaScript สามารถสนับสนุนได้ทั้ง Integer และ Float โดยทั้ง 2 ชนิด สามารถ แปลงไปหากันได้โดยอัตโนมัติ

ตัวแปร Integer ใน JavaScript จะอยู่ในรูปของเลขฐานได้ 3 ฐาน คือ 10 ,8 และ 16

ฐาน 10 โดยปกติแล้วตัวเลขที่ใช้ใน JavaScript จะเป็นเลขฐาน 10 อยู่แล้ว ฐาน 8 จะมีเลขโดดอยู่แค่ 8 ตัว คือ 0-7 การเขียนเลขฐาน 8 จะใช้ 0 นำหน้า ฐาน 16 จะมีเลขโดดอยู่ 16 ตัว คือ 0-9 และใช้ A-F แทน 10 - 15 การเขียนเลขฐาน 16 จะใช้ 0x นำหน้า

โปรแกรมตัวอย่างต่อไปนี้แสดงให้เห็นการใช้ เลขฐานครับ

<html> <head> <title>Using JavaScript Integer</title> </head> <body> <script language="javascript"> <!-- document.write("0xab00 + 0xcd = "); document.write(0xab00 + 0xcd); document.write("<br>"); document.write("0xff - 0123 = "); document.write(0xff - 0123); document.write("<br>"); document.write("-0x12 = "); document.write(-0x12); // --> </script> </body> </html>
ส่วน Float จะใช้กับ เลขทศนิยมหรือ เลขที่มีค่ามากๆและน้อยมากๆจนต้องเขียนในรูปของเลขยกกำลัง เช่น
-4.2132
55.
12e2 (อ่านว่า 12 คูณ 10 ยกกำลัง 2)
1e-1 (อ่านว่า 1 คูณ 10 ยกกำลัง -1)
.5
-4e-4
ตัวอย่างโปรแกรมต่อไปนี้ เป็นการใช้ Floating-Point number ครับ <html> <head> <title>Using floating - point number</title> </head> <body> <script language="JavaScript"> <!-- document.write(-5.465); document.write("<br>"); document.write(57.); document.write("<br>"); document.write(12e2); document.write("<br>"); document.write(1e-2); document.write("<br>"); document.write(7e1); document.write("<br>"); document.write(-6e-2); document.write("<br>"); document.write(.8); document.write("<br>"); // --> </script> </body> </html>

ตัวแปรชนิดตรรก : Logical Values

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

ตัวอย่างต่อไปนี้จะแสดงให้เห็นว่า Boolean สามารถเปลี่ยนเป็น Integer ได้ครับ
<html> <head> <title>Conversation of logical values to numeric values</title> </head> <body> <script language="JavaScript"> <!-- document.write("true*5 + false *7 = "); document.write(true*5 + false *7); // --> </script> </body> </html>

ตัวแปรชนิดข้อความ : String

          ตัวแปรหลักอีกตัวหนึ่งก็คือ String หรือข้อความนั่นแหละครับ การใส่ค่าตัวแปร String ใน JavaScript ให้ใช้เครื่องหมาย " หรือ ' คร่อม ข้อความนั้นเช่น

"Hello String"
'I am String'

          ปัญหาก็จะเกิดตรงที่ว่าถ้าเราต้องการเขียนเครื่องหมาย ' หรือ " ใน String ล่ะ จะทำอย่างไร ก็มีทางแก้อยู่ 2 วิธีครับ วิธีแรก คือ ถ้าต้องการแสดง ' ก็เลี่ยงไปใช้ " เป็นตัวคร่อมชะ เช่น

"What's New"

หรือถ้าต้องการแสดงทั้ง 2 ตัวพร้อมๆกันก็ต้องใช้ สัญลักษณ์พิเศษมาแทน (คล้ายๆกับใช้ &lt; มาแทน < ใน HTML) เราจะใช้ \" มาแทน " และ \' มาแทน ' ครับ ดูจากตัวอย่างนะครับ

<html> <head><title>Using quote within string</title></head> <body> <script language="JavaScript"> <!-- document.write("He said, \"That 's mine!\"<br>"); document.write('She said, "No it\'s not."<br>'); document.write('That \'s all folks!'); //--> </script> </body> </html>

นอกจากนี้ JavaScript ยังมีสัญลักษณ์พิเศษที่สำคัญอีก 2 ตัว คือ

\nขึ้นบรรทัดใหม่
\ttab
ตัวอย่างการใช้ \n และ \t ครับ
<HTML> <HEAD> <TITLE>Using special formatting characters</TITLE> </HEAD> <BODY> <PRE> <SCRIPT LANGUAGE="JavaScript"> <!-- document.write("This shows how the \ttab character works.\n") document.write("This shows how the \nnew line character works.\n") // --> </SCRIPT> </PRE> </BODY> </HTML>

ตัวแปรว่างเปล่า : ค่า null

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

ตารางผสมตัวแปรต่างชนิด

Function เปลี่ยนชนิดตัวแปร

          JavaScript สามารถแปรงร่างให้ตัวแปรได้จริงไหมครับ ถ้าผมมีเลขสักตัว มันก็จะแปลี่ยนเป็น String ได้ ถ้าผมเอาไป + กับข้อความ แต่จากตารางที่แล้ว จะเห็นได้ว่า string "12.34" ซึ่งเป็นข้อความที่เป็นตัวเลข ไม่สามารถแปลงร่าง เป็นตัวเลขได้เลย เพราะ JavaScript เดาใจเราไม่ถูกว่าเมื่อไรที่จะให้มัน เป็น Float หรือ String ดังนั้นเราจึงต้องมี Function ในการแปลงครับ

JavaScript กำหนด Function มาให้ 3 ตัวครับคือ eval(),parseInt(), และ parseFloat()

eval() จะใช้ในการเปลี่ยน String ที่อยู่ในรูปสมการให้เป็นค่าของผลลัพธ์เช่น total=eval("432.1*10") Total ก็จะมีค่าเป็น 4321 และถ้าค่าของข้อความ เป็นค่าที่ไม่สามารถแปลงได้ เช่น testxyz eval() จะไม่ส่งใดใดค่ากลับมา ดังนั้น เราจะใช้ eval() ได้ก็ต้องแน่ใจว่าข้อมูลที่จะป้อนเข้า eval() จะไม่มีข้อมูลที่ทำให้เกิด error อยู่

parseInt() จะใช้เปลี่ยนข้อความเป็นเลขจำนวนเต็มแต่ไม่เหมือนกับ eval() ตรงที่ มันจะแปลงให้เฉพาะตัวเลขที่อยู่หน้าสุดของข้อมูลและไม่สนใจข้อมูลแปลกปลอมเลย เช่น parseInt("123xyz") ก็จะให้ค่าเป็น 123 และ parseInt("xyz") ก็จะให้ค่าเป็น 0

parseFloat() คล้ายๆ parseInt() ครับ แต่จะใช้กีบเลขที่เป็น Float

เหมือนเดิมครับ ดูจากตัวอย่างเพื่อง่ายต่อการเข้าใจครับ

<HTML> <HEAD> <TITLE>Using Explicit Conversion Functions</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER">Conversion Functions</H1> <SCRIPT LANGUAGE="JavaScript"> <!-- document.write('eval("12.34x10") = '); document.write(eval("12.34x10");); document.write("<BR>"); document.write('parseInt("0x10") = '); document.write(parseInt("0x10")); document.write("<BR>"); document.write('parseFloat("5.4321e6") = '); document.write(parseFloat("5.4321e6")); // --> </SCRIPT> </BODY> </HTML>

การใช้ Array

          Array ก็คือข้อมูลหลายๆตัวมาเรียงกันเป็นลำดับ ตัวอย่างเช่น ถ้าคุณต้องการแสดงชื่อของลูกค้า 5 คน บน WebPage ของคุณคุณก็ประกาศ Array ชื่อ employee ที่มีข้อมูล 5 ตัว ดังนี้

employee = new Array(5);

จากนั้นก็เอาชื่อลูกค้าไปเก็บไว้ใน Array

employee[0] = "Squall"; employee[1] = "Rinoa"; employee[2] = "Zell"; employee[3] = "Seifer"; employee[4] = "Irvine";

แล้วเวลาแสดงผลก็ใช้ document.write()

document.write(employee[0]+"<BR>"); document.write(employee[1]+"<BR>"); document.write(employee[2]+"<BR>"); document.write(employee[3]+"<BR>"); document.write(employee[4]); เมื่อนำมาเขียนจะได้ตัวอย่างการใช้ Array ครับ

<HTML> <HEAD> <TITLE>Using Arrays</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER">Using Arrays</H1> <SCRIPT LANGUAGE="JavaScript"><!-- employee = new Array(5) employee[0] = "Squall"; employee[1] = "Rinoa"; employee[2] = "Zell"; employee[3] = "Seifer"; employee[4] = "Irvine"; document.write(employee[0]+"<BR>"); document.write(employee[1]+"<BR>"); document.write(employee[2]+"<BR>"); document.write(employee[3]+"<BR>"); document.write(employee[4]); // --> </SCRIPT> </BODY> </HTML>
จากตัวอย่างข้างต้น Array ถูกกำหนด length ให้เป็น 5 แต่ ในการใช้จริงแล้ว เราไม่จำเป็นต้องกำหนด length ก็ได้โดย length จะยืดหยุนได้ตามตัวแปรลำดับสุดท้าย เช่น ถ้าผมกำหนด

employee = new array();

แล้วก็ใส่ค่า employee[10] = "Sowrawoot"; employee.length ก็จะมีค่า 11 (นับ employee[0] เป็นตัวที่ 1) และจะเปลี่ยนค่าไปได้เรื่อยๆ ตามลำดับของข้อมูลตัวสุดท้ายครับ

การสร้าง Array แบบกำหนดค่าทันที

ทำได้โดยใส่ค่าลงไปใน Array ตั้งแต่ตอนประกาศเลย เราเรียก array ที่ประกาศด้วยวิธีนี้ว่า dense array
DayOfWeek = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat')

การใช้ Array หลายมิติ

JavaScript ไม่ได้จำกัดว่าข้อมูลใน Array จะต้องเป็นชนิดเดียวกัน มันอาจเป็น ข้อมูลต่างชนิดกันก็ได้ และจะเป็น Array ก็ได้ครับ ถ้ามี Array อยูใน Array เป็น Array ซ้อน Array เช่น เวลาอ้างถึงก็จะทำแบบนี้ครับ <span class=ptext> ArrayName[ลำดับของ Array ตัวใหญ่][ลำดับของตัวใน] </span> ตัวอย่างต่อไปจะแสดงให้เห็นถึงการใส่ข้อมูลต่างๆชนิดกันลงใน Array และการใช้ Array ซ้อน Array ครับ

<HTML> <HEAD> <TITLE>Arrays within Arrays</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER">Arrays within Arrays</H1> <SCRIPT LANGUAGE="JavaScript"><!-- junk = new Array("s1",'s2',4,3.5,true,false,null,new Array(5,6,7)); document.write("junk[0] = "+junk[0]+"<BR>"); document.write("junk[1] = "+junk[1]+"<BR>"); document.write("junk[2] = "+junk[2]+"<BR>"); document.write("junk[3] = "+junk[3]+"<BR>"); document.write("junk[4] = "+junk[4]+"<BR>"); document.write("junk[5] = "+junk[5]+"<BR>"); document.write("junk[6] = "+junk[6]+"<BR>"); document.write("junk[7][0] = "+junk[7][0]+"<BR>"); document.write("junk[7][1] = "+junk[7][1]+"<BR>"); document.write("junk[7][2] = "+junk[7][2]); // --> </SCRIPT> </BODY> </HTML>
          ก็จบไปอีก 1 บทนะครับ ตอนนี้ก็ยังเอา JavaScript ไปใช้อะไรไม่ได้หรอกครับ ตรงนี้เป็นแค่พื้นฐานของ JavaScript เท่านั้นเอง แต่อย่าพึ่งใจร้อนครับ อีกไม่นานคุณ ก็จะใช้ JavaScript ท่องยุทธจักรได้แล้ว ถ้าติดขัดที่ไหนก็ e-mail มาได้นะครับ ผมยินดีตอบคำถามครับ

Back to top | Next Charpter >>





© copyright 2001 Sorrawut Korsuwansiri