การเริ่มต้นเขียนเว็บด้วย JavaScript: 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">  </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">  </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">  </script> </body> </html>

ตัวแปรชนิดข้อความ : String

ตัวแปรหลักอีกตัวหนึ่งก็คือ 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">  </script> </body> </html>

นอกจากนี้ JavaScript ยังมีสัญลักษณ์พิเศษที่สำคัญอีก 2 ตัว คือ

\n	ขึ้นบรรทัดใหม่
\t	tab

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

<HTML> <HEAD> <TITLE>Using special formatting characters</TITLE> </HEAD> <BODY> <PRE> <SCRIPT LANGUAGE="JavaScript">  </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 LANGUAGE="JavaScript">  </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 LANGUAGE="JavaScript"> </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 LANGUAGE="JavaScript"> </SCRIPT> </BODY> </HTML>

การเริ่มต้นเขียนเว็บด้วย JavaScript

หน้าเว็บ

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

Introduction