Variable


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

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

Types and Variable
         สิ่งที่ต่างจาก Java และ ภาษาบางภาษาคือ ผู้ใช้ภาษา JavaScript ไม่จำเป็นต้องกำหนดชนิดของตัวแปร ชึ่ง JavaScript จะสามารถรู้ได้เองว่า ในการนำตัวแปรไปใช้นั้น คุณต้องการให้มันเป็นตัวแปรชนิดไหน เช่นถ้าผมกำหนด ให้ตัวแปร Ahha มีค่าเป็น 1 ตัวแปร Ahha อาจจะให้ค่าเป็น True ได้ ถ้าคุณใช้มันไปในทางตรรก หรืออาจจะเป็น 1.0000 ก็ได้ แต่ความสามารถแบบนี้ก็เปรียบเสมือนดาบ 2 คม ในแง่หนึ่ง คุณสามารถใช้ตัวแปรได้อย่างอิสระ เพราะไม่มีข้อจำกัดในด้านชนิดตัวแปร และในอีกแง่หนึง คุณต้องจำได้ว่า ตัวแปรของคุณจะเป็นชนิดไหนในแต่ละขั้นตอนของการคำนวน
Types and Literal Value
 JavaScript สนับสนุนการใช้ตัวแปรเก็บค่าข้อมูล 4 ชนิดคือ
Integer คือเลขจำนวนเต็ม
Floating-point numbers คือเลขจำนวนจริง
Logic or boolean values คือตรรก(มีค่าแค่ถูกกับผิด)
String คือข้อความ

Number Types:Integer and Floating-Point Numbers
ในการทำงานกับตัวเลข 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 Value
ตัวแปรหลักอีกตัวหนึ่งก็คือ String หรือข้อความนั่นแหละครับ การใส่ค่าตัวแปร String ใน JavaScript ให้ใช้เครื่องหมาย " หรือ ' คร่อม ข้อความนั้นเช่น
"Hello String"
"I am String"
 ปัญหาก็จะเกิดตรงที่ว่าถ้าเราต้องการเขียนเครื่องหมาย ' หรือ " ใน String ล่ะ จะทำอย่างไร ก็มีทางแก้อยู่ 2 วิธีครับ วิธีแรก คือ ถ้าต้องการแสดง ' ก็เลี่ยงไปใช้ " เป็นตัวคร่อมชะ เช่น
"What's New"
หรือถ้าต้องการแสดงทั้ง 2 ตัวพร้อมๆกันก็ต้องใช้ สัญลักษณ์พิเศษมาแทน (คล้ายๆกับใช้ < มาแทน < ใน 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>

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

ผมก็มีตารางการคำนวนด้วยตัวแปรต่างชนิดมาฝากครับ

Conversation 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">Using Explicit Conversion Functions</H1> <SCRIPT LANGUAGE="JavaScript"><!-- document.write('eval("12.34*10") = ') document.write(eval("12.34*10")) 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>
Complex Type
 นอกจากตัวแปรพื้นฐาน 4 ชนิดแล้ว JavaScript ก็ยังมีตัวแปร พิเศษอีก 2 ชนิดคือ Array และ Object
Array
 Array ก็คือข้อมูลหลายๆตัวมาเรียงกันเป็นลำดับ ตัวอย่างเช่น ถ้าคุณต้องการแสดงชื่อของลูกค้า 5 คน(ยังพอหาได้แม้ยุค IMF) บน WebPage ของคุณคุณก็ประกาศ Array ชื่อ employee ที่มีข้อมูล 5 ตัว ดังนี้

employee = new Array(5)

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

employee = new Array(5)<br> employee[0] = "Bill"<br> employee[1] = "Bob"<br> employee[2] = "Ted"<br> employee[3] = "Alice"<br> employee[4] = "Sue"<br>

แล้วเวลาแสดงผลก็ใช้ 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] = "Bill" employee[1] = "Bob" employee[2] = "Ted" employee[3] = "Alice" employee[4] = "Sue" 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) และจะเปลี่ยนค่าไปได้เรื่อยๆ ตามลำดับของข้อมูลตัวสุดท้ายครับ

Constructing Dense Array
 dense array ก็คือ Array ที่ถูกกำหนดค่าของข้อมูลให้ตั้งแต่ตอนประกาศ Array เลย เช่น
DayOfWeek = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat')
 array.length ก็จะมีค่าเป็น 7 และมีข้อมูลเป็น string ยาว 3 ตัวอักษรครับ

The Element of an Array
 JavaScript ไม่ได้จำกัดว่าข้อมูลใน Array จะต้องเป็นชนิดเดียวกัน มันอาจเป็น ข้อมูลต่างชนิดกันก็ได้ และจะเป็น Array ก็ได้ครับ ถ้ามี Array อยูใน Array เป็น Array ซ้อน Array เช่น เวลาอ้างถึงก็จะทำแบบนี้ครับ ArrayName[ลำดับของ Array ตัวใหญ่][ลำดับของตัวใน] ตัวอย่างต่อไปจะแสดงให้เห็นถึงการใส่ข้อมูลต่างๆชนิดกันลงใน 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>

ก็จบไปอีก 1 บทนะครับ ตอนนี้ก็ยังเอา JavaScript ไปใช้อะไรไม่ได้หรอกครับ ตรงนี้เป็นแค่พื้นฐานของ JavaScript เท่านั้นเอง แต่อย่าพึ่งใจร้อนครับ อีกไม่นานคุณ ก็จะใช้ JavaScript ท่องยุทธจักรได้แล้ว ถ้าติดขัดที่ไหนก็ e-mail มาได้นะครับ ผมยินดีตอบคำถามครับ