ข้อมูลองค์ความรู้โดย
กฤษณี โภโต
ตำแหน่ง ผู้จัดการ

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

ประเภททางด้าน IT หลัก :   Development & Integration
ประเภททางด้าน IT ย่อย :   Java
  ลงข้อมูลเมื่อ 15:24:51 10/05/2013
  Page View (2099) แบ่งปัน

บทที่ 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 คือเลขจำนวนเต็ม
  • 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 >
<!--
  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 >
<!--
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 >
<!--
   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 >
<!--
  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 ขึ้นบรรทัดใหม่
\t tab

ตัวอย่างการใช้ \n และ \t ครับ

<HTML>
<HEAD>
<TITLE>Using special formatting characters</TITLE>
</HEAD>
<BODY>
<PRE>
<SCRIPT >
<!--
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 สามารถเปลี่ยนชนิดไป ตามสถานการณ์ได้เหมือนตัวแปรทั่วๆไป

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

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

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

<HTML>
<HEAD>
<TITLE>Using Explicit Conversion Functions</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">Conversion Functions</H1>
<SCRIPT >
<!--
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 ><!--
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 ><!--
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 ท่องยุทธจักรได้แล้

ที่มา : http://realdev.truehits.net



องค์ความรู้ที่มีผู้อ่านมากสุด
สร้าง BarCode จาก Java โดยใช้ lib ของ ZXing ( Open Source )
สร้าง BarCode จาก Java โดยใช้ lib ของ ZXing ( Open Source )

โดย... กฤษณี โภโต

บทที่ 13 Math Function
ในการเขียนโปรแกรม มีบางครั้งที่เราต้องอาศัยการคำนวณทางคณิตศาสตร์ JavaScript ก็มีคุณสมบัติในการคำนวณทางคณิตศาสตร์กะเค้าเหมือนกันครับ

โดย... กฤษณี โภโต

บทที่ 9 Document Object
Document object คืออะไร Document Object หมายถึงเอกสาร HTML ที่เป็นเวบเพจที่กำลังแสดงอยู่ในหน้าต่างหลัก เป็น Propertiy ของ window (window.document) Document Object เปรียบเสมือนหน้าหนังสือ หากคุณลองเปิดหนังสือดูจะเห็น หมายเลขหน้า และ หมายเลขบท ในทาง OOP หมายเลขหน้าและหมายเลขบทเหล่านั้นก็เป็น Properties สำหรับบอกคุณสมบัติ ของหน้านั้น ว่าอยู่ในหน้าที่เท่าไหร่ บทใด นอกจากนี้ ในหน้าหนังสือยังมีเนื้อหาสาระที่ประกอบอยู่ภายใน ไม่ว่าจะเป็นเนื้อหา หัวข้อ ย่อหน้า รูปภาพ ตาราง ฯลฯ สิ่งเหล่านี้ก็นับเป็น Properties ของหน้าหนังสือเช่นกันครับ

โดย... กฤษณี โภโต

บทที่ 14 String
ไม่ว่าจะเขียนโปรแกรมด้วยภาษาใด การจัดการกับ String ก็เป็นความสามารถที่ขาดไม่ได้ ใน JavaScript ก็เช่นกัน

โดย... กฤษณี โภโต

บทที่ 10 Form Java
คุณคงเคยพบกับ Banner ข้างบนนี้มาก่อนนะครับ เจ้านี่แหละ มันเกิดจากการนำ object form ไปประยุกต์ ใช้ กับ setTimeout ในบทที่ผ่านมา และ นอกจากนี้แล้ว Form ยังมีคุณสมบัติน่าสนใจอีกมาก ทั้ง Button Checkbox radio ฯลฯ รวมทั้ง text ที่อยู่ข้างบนนี้ด้วยครับ

โดย... กฤษณี โภโต

บทที่ 6 Event Java
Event คืออะไร

โดย... กฤษณี โภโต

บทที่ 12 Images
บทที่ 12 Images

โดย... กฤษณี โภโต

บทที่ 7 OOP for JavaScript
Object เป็นความสามารถที่สำคัญอย่างหนึ่งของ JavaScript เรียกได้ว่าเป็นพระเอกของเรื่องเลยเชียวนะ หน้านี้ผมจะแนะนำให้รู้จักกับ Object ก่อนว่าเป็นอย่างไรนะครับ

โดย... กฤษณี โภโต

บทที่ 11 Links
บทที่ 11 Links

โดย... กฤษณี โภโต

บทที่ 3 Operator in JavaScript
บทที่ 3 Operator in JavaScript

โดย... กฤษณี โภโต