วันจันทร์ที่ 22 เมษายน พ.ศ. 2556

Introduction


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

          ชื่อของตัวแปรใน 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 นำหน้า
โปรแกรมตัวอย่างต่อไปนี้แสดงให้เห็นการใช้ เลขฐานครับ
<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) เราจะใช้ \" มาแทน " และ \' มาแทน ' ครับ ดูจากตัวอย่างนะครับ
&lt;html&gt; &lt;head&gt;&lt;title&gt;Using quote within string&lt;/title&gt;&lt;/head&gt; &lt;body&gt; &lt;script language="JavaScript"&gt; &lt;!-- document.write("He said, \"That 's mine!\"&lt;br&gt;"); document.write('She said, "No it\'s not."&lt;br&gt;'); document.write('That \'s all folks!'); //--&gt; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;

นอกจากนี้ JavaScript ยังมีสัญลักษณ์พิเศษที่สำคัญอีก 2 ตัว คือ
\nขึ้นบรรทัดใหม่
\ttab
ตัวอย่างการใช้ \n และ \t ครับ
&lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;Using special formatting characters&lt;/TITLE&gt; &lt;/HEAD&gt; &lt;BODY&gt; &lt;PRE&gt; &lt;SCRIPT LANGUAGE="JavaScript"&gt; &lt;!-- document.write("This shows how the \ttab character works.\n") document.write("This shows how the \nnew line character works.\n") // --&gt; &lt;/SCRIPT&gt; &lt;/PRE&gt; &lt;/BODY&gt; &lt;/HTML&gt;

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

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

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

row + columnstring "12.34/12.34.html"integer 123float .123logical truelogical falsenull
string "test"test12.34test123test0.123testtruetestfalsetestnull
integer 12312312.34246123.123124123123
float .1230.12312.34123.1230.2461.1230.1230.123
logical truetrue12.341241.123211
logical falsefalse12.341230.123100
nullnull12.341230.123100

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
เหมือนเดิมครับ ดูจากตัวอย่างเพื่อง่ายต่อการเข้าใจครับ
&lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;Using Explicit Conversion Functions&lt;/TITLE&gt; &lt;/HEAD&gt; &lt;BODY&gt; &lt;H1 ALIGN="CENTER"&gt;Conversion Functions&lt;/H1&gt; &lt;SCRIPT LANGUAGE="JavaScript"&gt; &lt;!-- document.write('eval("12.34x10") = '); document.write(eval("12.34x10");); document.write("&lt;BR&gt;"); document.write('parseInt("0x10") = '); document.write(parseInt("0x10")); document.write("&lt;BR&gt;"); document.write('parseFloat("5.4321e6") = '); document.write(parseFloat("5.4321e6")); // --&gt; &lt;/SCRIPT&gt; &lt;/BODY&gt; &lt;/HTML&gt;

การใช้ 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]+"&lt;BR&gt;"); document.write(employee[1]+"&lt;BR&gt;"); document.write(employee[2]+"&lt;BR&gt;"); document.write(employee[3]+"&lt;BR&gt;"); document.write(employee[4]);
เมื่อนำมาเขียนจะได้ตัวอย่างการใช้ Array ครับ
&lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;Using Arrays&lt;/TITLE&gt; &lt;/HEAD&gt; &lt;BODY&gt; &lt;H1 ALIGN="CENTER"&gt;Using Arrays&lt;/H1&gt; &lt;SCRIPT LANGUAGE="JavaScript"&gt;&lt;!-- employee = new Array(5) employee[0] = "Squall"; employee[1] = "Rinoa"; employee[2] = "Zell"; employee[3] = "Seifer"; employee[4] = "Irvine"; document.write(employee[0]+"&lt;BR&gt;"); document.write(employee[1]+"&lt;BR&gt;"); document.write(employee[2]+"&lt;BR&gt;"); document.write(employee[3]+"&lt;BR&gt;"); document.write(employee[4]); // --&gt; &lt;/SCRIPT&gt; &lt;/BODY&gt; &lt;/HTML&gt;

จากตัวอย่างข้างต้น 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 เช่น เวลาอ้างถึงก็จะทำแบบนี้ครับ
&lt;span class=ptext&gt; ArrayName[ลำด&#3633;บของ Array ต&#3633;วใหญ&#3656;][ลำด&#3633;บของต&#3633;วใน] &lt;/span&gt;
ตัวอย่างต่อไปจะแสดงให้เห็นถึงการใส่ข้อมูลต่างๆชนิดกันลงใน Array และการใช้ Array ซ้อน Array ครับ
&lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;Arrays within Arrays&lt;/TITLE&gt; &lt;/HEAD&gt; &lt;BODY&gt; &lt;H1 ALIGN="CENTER"&gt;Arrays within Arrays&lt;/H1&gt; &lt;SCRIPT LANGUAGE="JavaScript"&gt;&lt;!-- junk = new Array("s1",'s2',4,3.5,true,false,null,new Array(5,6,7)); document.write("junk[0] = "+junk[0]+"&lt;BR&gt;"); document.write("junk[1] = "+junk[1]+"&lt;BR&gt;"); document.write("junk[2] = "+junk[2]+"&lt;BR&gt;"); document.write("junk[3] = "+junk[3]+"&lt;BR&gt;"); document.write("junk[4] = "+junk[4]+"&lt;BR&gt;"); document.write("junk[5] = "+junk[5]+"&lt;BR&gt;"); document.write("junk[6] = "+junk[6]+"&lt;BR&gt;"); document.write("junk[7][0] = "+junk[7][0]+"&lt;BR&gt;"); document.write("junk[7][1] = "+junk[7][1]+"&lt;BR&gt;"); document.write("junk[7][2] = "+junk[7][2]); // --&gt; &lt;/SCRIPT&gt; &lt;/BODY&gt; &lt;/HTML&gt;

ไม่มีความคิดเห็น:

แสดงความคิดเห็น