Posted by: on006 | กรกฎาคม 5, 2008

เรื่องของตัวแปร Java

การตั้งชื่อตัวแปร
ชื่อของตัวแปรใน 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 คือ เลขจำนวนเต็ม
Floating-point numbers คือ เลขจำนวนจริง
Logic or boolean values คือ ตรรก(มีค่าแค่ถูกกับผิด)
String คือ ข้อความ

ตัวแปรชนิดตัวเลข : 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 นำหน้า

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

พยายาม Pyayam.com :: พ ย า ย า ม ดอทคอม ::
พยายาม
FileEditFormatViewHelp
<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(“-0×12 = “);
document.write(-0×12);
// –>
</script>
</body>
</html>

ส่วน Float จะใช้กับ เลขทศนิยมหรือ เลขที่มีค่ามากๆและน้อยมากๆจนต้องเขียนในรูปของเลขยกกำลัง เช่น
-4.2132
55.
12e2 (อ่านว่า 12 คูณ 10 ยกกำลัง 2)
1e-1 (อ่านว่า 1 คูณ 10 ยกกำลัง -1)
.5
-4e-4
ตัวอย่างโปรแกรมต่อไปนี้ เป็นการใช้ Floating-Point number ครับ

พยายาม Pyayam.com :: พ ย า ย า ม ดอทคอม ::
พยายาม
FileEditFormatViewHelp

<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 ได้ครับ

พยายาม Pyayam.com :: พ ย า ย า ม ดอทคอม ::
พยายาม
FileEditFormatViewHelp

<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) เราจะใช้ \” มาแทน ” และ \’ มาแทน ‘ ครับ ดูจากตัวอย่างนะครับ

พยายาม Pyayam.com :: พ ย า ย า ม ดอทคอม ::
พยายาม
FileEditFormatViewHelp
<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 ครับ

พยายาม Pyayam.com :: พ ย า ย า ม ดอทคอม ::
พยายาม
FileEditFormatViewHelp
<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 สามารถเปลี่ยนชนิดไป ตามสถานการณ์ได้เหมือนตัวแปรทั่่วๆไป

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

<!–
// Column headings for table
document.write(““);
document.write(““);
document.write(““);
document.write(““);
document.write(““);
document.write(““);
document.write(““);
document.write(““);
document.write(““);
// First operand is a string
document.write(““);
document.write(““);
document.write(““);
// First operand is an integer
document.write(““);
document.write(““);
document.write(““);
document.write(““);
// First operand is a float
document.write(““);
document.write(““);
document.write(““);
document.write(““);
// First operand is a logical true
document.write(““);
document.write(““);
document.write(““);
document.write(““);
// First operand is a logical false
document.write(““);
document.write(““);
document.write(““);
document.write(““);
// First operand is null
document.write(““);
document.write(““);
document.write(““);
document.write(““);
// –>

row + columnstring \”12.34/12.34.html\”integer 123float .123logical truelogical falsenull
string \”test\”“);
document.write(“
“);
document.write(s1+s2);
document.write(“
“);
document.write(s1+i);
document.write(“
“);
document.write(s1+r);
document.write(“
“);
document.write(s1+lt);
document.write(“
“);
document.write(s1+lf);
document.write(“
“);
document.write(s1+n);
document.write(“
integer 123“);
document.write(i+s2);
document.write(“
“);
document.write(i+i);
document.write(“
“);
document.write(i+r);
document.write(“
“);
document.write(i+lt);
document.write(“
“);
document.write(i+lf);
document.write(“
“);
document.write(i+n);
document.write(“
float .123“);
document.write(r+s2);
document.write(“
“);
document.write(r+i);
document.write(“
“);
document.write(r+r);
document.write(“
“);
document.write(r+lt);
document.write(“
“);
document.write(r+lf);
document.write(“
“);
document.write(r+n);
document.write(“
logical true“);
document.write(lt+s2);
document.write(“
“);
document.write(lt+i);
document.write(“
“);
document.write(lt+r);
document.write(“
“);
document.write(lt+lt);
document.write(“
“);
document.write(lt+lf);
document.write(“
“);
document.write(lt+n);
document.write(“
logical false“);
document.write(lf+s2);
document.write(“
“);
document.write(lf+i);
document.write(“
“);
document.write(lf+r);
document.write(“
“);
document.write(lf+lt);
document.write(“
“);
document.write(lf+lf);
document.write(“
“);
document.write(lf+n);
document.write(“
null“);
document.write(n+s2);
document.write(“
“);
document.write(n+i);
document.write(“
“);
document.write(n+r);
document.write(“
“);
document.write(n+lt);
document.write(“
“);
document.write(n+lf);
document.write(“
“);
document.write(n+n);
document.write(“
row + column string “12.34/12.34.html” integer 123 float .123 logical true logical false null
string “test” test12.34 test123 test0.123 testtrue testfalse testnull
integer 123 12312.34 246 123.123 124 123 123
float .123 0.12312.34 123.123 0.246 1.123 0.123 0.123
logical true true12.34 124 1.123 2 1 1
logical false false12.34 123 0.123 1 0 0
null null12.34 123 0.123 1 0 0



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

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

พยายาม Pyayam.com :: พ ย า ย า ม ดอทคอม ::
พยายาม
FileEditFormatViewHelp
<HTML>
<HEAD>
<TITLE>Using Explicit Conversion Functions</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=”CENTER”>Conversion Functions</H1>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
document.write(‘eval(“12.34×10″) = ‘);
document.write(eval(“12.34×10″););
document.write(“<BR>”);
document.write(‘parseInt(“0×10″) = ‘);
document.write(parseInt(“0×10″));
document.write(“<BR>”);
document.write(‘parseFloat(“5.4321e6″) = ‘);
document.write(parseFloat(“5.4321e6″));
// –>
</SCRIPT>
</BODY>
</HTML>



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

พยายาม Pyayam.com :: พ ย า ย า ม ดอทคอม ::
พยายาม
FileEditFormatViewHelp
employee = new Array(5);

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

พยายาม Pyayam.com :: พ ย า ย า ม ดอทคอม ::
พยายาม
FileEditFormatViewHelp
employee[0] = “Squall”;
employee[1] = “Rinoa”;
employee[2] = “Zell”;
employee[3] = “Seifer”;
employee[4] = “Irvine”;

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

พยายาม Pyayam.com :: พ ย า ย า ม ดอทคอม ::
พยายาม
FileEditFormatViewHelp
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 ครับ

พยายาม Pyayam.com :: พ ย า ย า ม ดอทคอม ::
พยายาม
FileEditFormatViewHelp
<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

พยายาม Pyayam.com :: พ ย า ย า ม ดอทคอม ::
พยายาม
FileEditFormatViewHelp
DayOfWeek = new Array(‘Sun’,'Mon’,'Tue’,'Wed’,'Thu’,'Fri’,'Sat’)



การใช้ Array หลายมิติ
JavaScript ไม่ได้จำกัดว่าข้อมูลใน Array จะต้องเป็นชนิดเดียวกัน มันอาจเป็น ข้อมูลต่างชนิดกันก็ได้ และจะเป็น Array ก็ได้ครับ ถ้ามี Array อยูใน Array เป็น Array ซ้อน Array เช่น เวลาอ้างถึงก็จะทำแบบนี้ครับ

พยายาม Pyayam.com :: พ ย า ย า ม ดอทคอม ::
พยายาม
FileEditFormatViewHelp
<span class=ptext>
ArrayName[ลำดับของ Array ตัวใหญ่][ลำดับของตัวใน]
</span>

ตัวอย่างต่อไปจะแสดงให้เห็นถึงการใส่ข้อมูลต่างๆชนิดกันลงใน Array และการใช้ Array ซ้อน Array ครับ

พยายาม Pyayam.com :: พ ย า ย า ม ดอทคอม ::
พยายาม
FileEditFormatViewHelp
<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 มาได้นะครับ ผมยินดีตอบคำถามครับ


Leave a response

Your response:

หมวดหมู่