JavaScript Tutorial

Free Web space and hosting from gorgai.com

JavaScript Tutorial

Variable

JavaScript ก็เหมือนภาษาที่ใช้เขียนโปรแกรมทั่วไป ตรงที่มีตัวแปรสำหรับเก็บค่า จากส่วนหนึ่งของ Program แล้วก็เอาไปใช้ในส่วนอื่นๆได้ ตัวแปรก็คือ ชื่อที่เรากำหนดขึ้นมาสำหรับเก็บค่า อย่างเช่น เราอาจกำหนดตัวแปรชื่อว่า imageName เพื่อไปเก็บชื่อไฟล์ภาพๆหนึ่ง หรือ อาจกำหนดให้ amount ไปเก็บจำนวนเต็ม เป็นต้น

ชื่อของตัวแปรใน JavaScript สามารถขึ้นต้นด้วยตัวอักษรใหญ่ (A-Z) ตัวอักษรเล็ก (a-z) และ เครื่องหมาย _ ตามด้วย ตัวอักษร ตัวเลข หรือ เครื่องหมาย _ ก็ได้
ตัวอย่างชื่อตัวแปรที่ถูกต้อง
orderNumber2
_456
SUM
Image32
Amount_Click

ข้อควรจำ ชื่อตัวแปรใน JavaScript จะเข้มงวดในการใช้ตัวอักษรใหญ่เล็กด้วย เช่น Sum SUM sum จะถือว่าไม่เป็นตัวแปรเดียวกันนะ

Types and Variable
สิ่งที่ต่างจาก Java และ ภาษาบางภาษาคือ ผู้ใช้ภาษา JavaScript ไม่จำเป็นต้องกำหนดชนิดของตัวแปร ชึ่ง JavaScript จะสามารถรู้ได้เองว่า ในการนำตัวแปรไปใช้นั้น คุณต้องการให้มันเป็นตัวแปรชนิดไหน เช่นถ้าผมกำหนด ให้ตัวแปร Ahha มีค่าเป็น 1 ตัวแปร Ahha อาจจะให้ค่าเป็น True ได้ ถ้าคุณใช้มันไปในทางตรรก หรืออาจจะเป็น 1.0000 ก็ได้ แต่ความสามารถแบบนี้ก็เปรียบเสมือนดาบ 2 คม ในแง่หนึ่ง คุณสามารถใช้ตัวแปรได้อย่างอิสระ เพราะไม่มีข้อจำกัดในด้านชนิดตัวแปร และในอีกแง่หนึง คุณต้องจำได้ว่า ตัวแปรของคุณจะเป็นชนิดไหนในแต่ละขั้นตอนของการคำนวน
Types and Literal Value
JavaScript สนับสนุนการใช้ตัวแปรเก็บค่าข้อมูล 4 ชนิดคือ
Integer คือเลขจำนวนเต็ม
Floating-point numbers คือเลขจำนวนจริง
Logic or boolean values คือตรรก(มีค่าแค่ถูกกับผิด)
String คือข้อความ

Number Types:Integer and Floating-Point Numbers
ในการทำงานกับตัวเลข 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 นำหน้า โปรแกรมตัวอย่างต่อไปนี้แสดงให้เห็นการใช้ เลขฐานครับ

<head> <title>Using JavaScript Integer</title> </head> <script language="javascript">  </script> </table><form> <input type="button" value="View Example" onclick="window.open('jsex4.html')"> </form> ส่วน Float จะใช้กับ เลขทศนิยมหรือ เลขที่มีค่ามากๆและน้อยมากๆจนต้องเขียนในรูปของเลขยกกำลัง เช่น -4.2132 55. 12e2 (อ่านว่า 12 คูณ 10 ยกกำลัง 2) 1e-1 (อ่านว่า 1 คูณ 10 ยกกำลัง -1) .5 -4e-4 ตัวอย่างโปรแกรมต่อไปนี้ เป็นการใช้ Floating-Point number ครับ <xmp> <head> <title>Using floating - point number</title> </head> <script language="JavaScript">  </script> <form> <input type="button" value="View Example" onclick="window.open('jsex5.html')"> </form> Logical Values เมื่อกี้ผมบอกว่า JavaScript มีความสามารถในการเปลี่ยนชนิดตัวแปรโยอัตโนมัติใช่ไหมครับ งั้นลองทายดูว่าค่าตัวแปรชนิดที่เป็นตรรก คือ True และ False จะถูกแทนที่ด้วยค่าอะไร ถ้ามัน ถูกใช้แบบเลขจำนวนเต็ม <form> <input type="button" value="1 แทน True 0 แทน False" onclick="alert('ถูกครับ')"> <input type="button" value="0 แทน True 1 แทน False" onclick="alert('ผิดครับ')"> <input type="button" value="ไม่ใช่ทั้ง 2 ข้อ" onclick="alert('ผิดครับ')"> </form> ตัวอย่างต่อไปนี้จะแสดงให้เห็นว่า Boolean สามารถเปลี่ยนเป็น Integer ได้ครับ <xmp> <head> <title>Conversation of logical values to numeric values</title> </head> <script language="JavaScript">  </script> <form> <input type="button" value="View Example" onclick="window.open('jsex6.html')"> </form> String Value ตัวแปรหลักอีกตัวหนึ่งก็คือ String หรือข้อความนั่นแหละครับ การใส่ค่าตัวแปร String ใน JavaScript ให้ใช้เครื่องหมาย " หรือ ' คร่อม ข้อความนั้นเช่น "Hello String" "I am String" ปัญหาก็จะเกิดตรงที่ว่าถ้าเราต้องการเขียนเครื่องหมาย ' หรือ " ใน String ล่ะ จะทำอย่างไร ก็มีทางแก้อยู่ 2 วิธีครับ วิธีแรก คือ ถ้าต้องการแสดง ' ก็เลี่ยงไปใช้ " เป็นตัวคร่อมชะ เช่น "What's New" หรือถ้าต้องการแสดงทั้ง 2 ตัวพร้อมๆกันก็ต้องใช้ สัญลักษณ์พิเศษมาแทน (คล้ายๆกับใช้ < มาแทน < ใน HTML) เราจะใช้ \" มาแทน " และ \' มาแทน ' ครับ ดูจากตัวอย่างนะครับ <xmp> <head> <title>Using quote within string</title> </head> <script language="JavaScript">  </script> <form> <input type="button" value="View Example" onclick="window.open('jsex7.html')"> </form> นอกจากนี้ JavaScript ยังมีสัญลักษณ์พิเศษที่สำคัญอีก 2 ตัว คือ <table> <tr> <td width=70>\n</td> <td>ขึ้นบรรทัดใหม่</td> </tr> <tr> <td>\t</td> <td>Tab</td> </tr> </table> ตัวอย่างการใช้ \n และ \t ครับ <xmp> <HEAD> <TITLE>Using special formatting characters</TITLE> </HEAD> <PRE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </PRE> <input type="button" value="View Example" onclick="window.open('jsex8.html')"> The null Value ค่า null ก็คือค่าว่างเปล่า คือยังไม่มีค่าใดๆเก็บอยู่ในตัวแปร ดังนั้น เมื่อเราประกาศตัวแปร ขึ้นมาตัวหนึงโดยไม่กำหนดค่าให้ ตัวแปรนั้นจะมีค่าเป็น null ทันที และค่า null สามารถเปลี่ยนชนิดไป ตามสถานการณ์ได้เหมือนตัวแปรทั่วๆไป ผมก็มีตารางการคำนวนด้วยตัวแปรต่างชนิดมาฝากครับ <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <TABLE BORDER=1 cellpaddind=5 cellspacing=0> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </TABLE> Conversation 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 เหมือนเดิมครับ ดูจากตัวอย่างเพื่อง่ายต่อการเข้าใจครับ <xmp> <HEAD> <TITLE>Using Explicit Conversion Functions</TITLE> </HEAD> <H1 ALIGN="CENTER">Using Explicit Conversion Functions</H1> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> <input type="button" value="View Example" onclick="window.open('jsex9.html')"> Complex Type นอกจากตัวแปรพื้นฐาน 4 ชนิดแล้ว JavaScript ก็ยังมีตัวแปร พิเศษอีก 2 ชนิดคือ Array และ Object Array Array ก็คือข้อมูลหลายๆตัวมาเรียงกันเป็นลำดับ ตัวอย่างเช่น ถ้าคุณต้องการแสดงชื่อของลูกค้า 5 คน(ยังพอหาได้แม้ยุค IMF) บน WebPage ของคุณคุณก็ประกาศ Array ชื่อ employee ที่มีข้อมูล 5 ตัว ดังนี้ <xmp> employee = new Array(5)

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

employee = new Array(5) employee[0] = "Bill" employee[1] = "Bob" employee[2] = "Ted" employee[3] = "Alice" employee[4] = "Sue"

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

document.write(employee[0]+" ") document.write(employee[1]+" ") document.write(employee[2]+" ") document.write(employee[3]+" ") document.write(employee[4])

เมื่อนำมาเขียนจะได้ตัวอย่างการใช้ Array ครับ

<HEAD> <TITLE>Using Arrays</TITLE> </HEAD> <H1 ALIGN="CENTER">Using Arrays</H1> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> <input type="button" value="View Example" onclick="window.open('jsex10.html')"> จากตัวอย่างข้างต้น Array ถูกกำหนด length ให้เป็น 5 แต่ ในการใช้จริงแล้ว เราไม่จำเป็นต้องกำหนด length ก็ได้โดย length จะยืดหยุนได้ตามตัวแปรลำดับสุดท้าย เช่น ถ้าผมกำหนด employee = new array() แล้วก็ใส่ค่า employee[10] = "Sowrawoot" employee.length ก็จะมีค่า 11 (นับ employee[0] เป็นตัวที่ 1) และจะเปลี่ยนค่าไปได้เรื่อยๆ ตามลำดับของข้อมูลตัวสุดท้ายครับ Constructing Dense Array dense array ก็คือ Array ที่ถูกกำหนดค่าของข้อมูลให้ตั้งแต่ตอนประกาศ Array เลย เช่น DayOfWeek = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat') array.length ก็จะมีค่าเป็น 7 และมีข้อมูลเป็น string ยาว 3 ตัวอักษรครับ The Element of an Array JavaScript ไม่ได้จำกัดว่าข้อมูลใน Array จะต้องเป็นชนิดเดียวกัน มันอาจเป็น ข้อมูลต่างชนิดกันก็ได้ และจะเป็น Array ก็ได้ครับ ถ้ามี Array อยูใน Array เป็น Array ซ้อน Array เช่น เวลาอ้างถึงก็จะทำแบบนี้ครับ ArrayName[ลำดับของ Array ตัวใหญ่][ลำดับของตัวใน] ตัวอย่างต่อไปจะแสดงให้เห็นถึงการใส่ข้อมูลต่างๆชนิดกันลงใน Array และการใช้ Array ซ้อน Array ครับ <xmp> <HEAD> <TITLE>Arrays within Arrays</TITLE> </HEAD> <H1 ALIGN="CENTER">Arrays within Arrays</H1> <SCRIPT LANGUAGE="JavaScript"> </SCRIPT>

ก็จบไปอีก 1 บทนะครับ ตอนนี้ก็ยังเอา JavaScript ไปใช้อะไรไม่ได้หรอกครับ ตรงนี้เป็นแค่พื้นฐานของ JavaScript เท่านั้นเอง แต่อย่าพึ่งใจร้อนครับ อีกไม่นานคุณ ก็จะใช้ JavaScript ท่องยุทธจักรได้แล้ว ถ้าติดขัดที่ไหนก็ e-mail มาได้นะครับ ผมยินดีตอบคำถามครับ