การตั้งชื่อตัวแปร
ชื่อของตัวแปรใน 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 นำหน้า
โปรแกรมตัวอย่างต่อไปนี้แสดงให้เห็นการใช้ เลขฐานครับ
ส่วน Float จะใช้กับ เลขทศนิยมหรือ เลขที่มีค่ามากๆและน้อยมากๆจนต้องเขียนในรูปของเลขยกกำลัง เช่น
-4.2132
55.
12e2 (อ่านว่า 12 คูณ 10 ยกกำลัง 2)
1e-1 (อ่านว่า 1 คูณ 10 ยกกำลัง -1)
.5
-4e-4
ตัวอย่างโปรแกรมต่อไปนี้ เป็นการใช้ Floating-Point number ครับ
Pyayam.com :: พ ย า ย า ม ดอทคอม :: File
Edit
Format
View
Help
<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 :: พ ย า ย า ม ดอทคอม :: File
Edit
Format
View
Help
<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 ตัวพร้อมๆกันก็ต้องใช้ สัญลักษณ์พิเศษมาแทน (คล้ายๆกับใช้ < มาแทน < ใน HTML) เราจะใช้ \” มาแทน ” และ \’ มาแทน ‘ ครับ ดูจากตัวอย่างนะครับ
| Pyayam.com :: พ ย า ย า ม ดอทคอม :: | |||
|
|||
นอกจากนี้ JavaScript ยังมีสัญลักษณ์พิเศษที่สำคัญอีก 2 ตัว คือ
\n
ขึ้นบรรทัดใหม่
\ttab
ตัวอย่างการใช้ \n และ \t ครับ
| Pyayam.com :: พ ย า ย า ม ดอทคอม :: | |||
|
|||
ตัวแปรว่างเปล่า : ค่า null
ค่า null ก็คือค่าว่างเปล่า คือยังไม่มีค่าใดๆเก็บอยู่ในตัวแปร ดังนั้น เมื่อเราประกาศตัวแปร ขึ้นมาตัวหนึงโดยไม่กำหนดค่าให้ ตัวแปรนั้นจะมีค่าเป็น null ทันที และค่า null สามารถเปลี่ยนชนิดไป ตามสถานการณ์ได้เหมือนตัวแปรทั่่วๆไป
ตารางผสมตัวแปรต่างชนิด
| row + column | “);string \”12.34/12.34.html\” | “);integer 123 | “);float .123 | “);logical true | “);logical false | “);null | “);
| 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 :: พ ย า ย า ม ดอทคอม :: | |||
|
|||
การใช้ Array
Array ก็คือข้อมูลหลายๆตัวมาเรียงกันเป็นลำดับ ตัวอย่างเช่น ถ้าคุณต้องการแสดงชื่อของลูกค้า 5 คน บน WebPage ของคุณคุณก็ประกาศ Array ชื่อ employee ที่มีข้อมูล 5 ตัว ดังนี้
| Pyayam.com :: พ ย า ย า ม ดอทคอม :: | |||
|
|||
จากนั้นก็เอาชื่อลูกค้าไปเก็บไว้ใน Array
| Pyayam.com :: พ ย า ย า ม ดอทคอม :: | |||
|
|||
แล้วเวลาแสดงผลก็ใช้ document.write()
| Pyayam.com :: พ ย า ย า ม ดอทคอม :: | |||
|
|||
เมื่อนำมาเขียนจะได้ตัวอย่างการใช้ Array ครับ
| Pyayam.com :: พ ย า ย า ม ดอทคอม :: | |||
|
|||
จากตัวอย่างข้างต้น Array ถูกกำหนด length ให้เป็น 5 แต่ ในการใช้จริงแล้ว เราไม่จำเป็นต้องกำหนด length ก็ได้โดย length จะยืดหยุนได้ตามตัวแปรลำดับสุดท้าย เช่น ถ้าผมกำหนด
employee = new array();
แล้วก็ใส่ค่า employee[10] = “Sowrawoot”; employee.length ก็จะมีค่า 11 (นับ employee[0] เป็นตัวที่ 1) และจะเปลี่ยนค่าไปได้เรื่อยๆ ตามลำดับของข้อมูลตัวสุดท้าย
การสร้าง Array แบบกำหนดค่าทันที
ทำได้โดยใส่ค่าลงไปใน Array ตั้งแต่ตอนประกาศเลย เราเรียก array ที่ประกาศด้วยวิธีนี้ว่า dense array
| Pyayam.com :: พ ย า ย า ม ดอทคอม :: | |||
|
|||
การใช้ Array หลายมิติ
JavaScript ไม่ได้จำกัดว่าข้อมูลใน Array จะต้องเป็นชนิดเดียวกัน มันอาจเป็น ข้อมูลต่างชนิดกันก็ได้ และจะเป็น Array ก็ได้ครับ ถ้ามี Array อยูใน Array เป็น Array ซ้อน Array เช่น เวลาอ้างถึงก็จะทำแบบนี้ครับ
| Pyayam.com :: พ ย า ย า ม ดอทคอม :: | |||
|
|||
ตัวอย่างต่อไปจะแสดงให้เห็นถึงการใส่ข้อมูลต่างๆชนิดกันลงใน Array และการใช้ Array ซ้อน Array ครับ
| Pyayam.com :: พ ย า ย า ม ดอทคอม :: | |||
|
|||
ก็จบไปอีก 1 บทนะครับ ตอนนี้ก็ยังเอา JavaScript ไปใช้อะไรไม่ได้หรอกครับ ตรงนี้เป็นแค่พื้นฐานของ JavaScript เท่านั้นเอง แต่อย่าพึ่งใจร้อนครับ อีกไม่นานคุณ ก็จะใช้ JavaScript ท่องยุทธจักรได้แล้ว ถ้าติดขัดที่ไหนก็ e-mail มาได้นะครับ ผมยินดีตอบคำถามครับ