วันจันทร์ที่ 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 ชนิดคือ

Variable


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

          ชื่อของตัวแปรใน 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 ชนิดคือ

Operater


Arithmetic Operator

          Arithmatic Operator หรือ Operator ที่เกี่ยวกับตัวเลข เป็น Operator ที่ ธรรมดาที่สุด เพราะเราใช้อยู่ทุกวี่ทุกวันในการคำนวนต่างๆ JavaScirpt ก็มี Operator ให้เราใช้ดังนี้ครับ
+บวก
-ลบ
*คูณ
/หาร
%การหารเอาเศษเป็นผลลัพธ์ (MOD)
--การลดค่า 1 ให้ตัวแปร
++การเพิ่มค่า 1 ให้ตัวแปร
<html> <head><title>Usage Arithmatic Operator</title></head> <body> <script language="JavaScript"> <!-- document.write('105 + 20 = '); document.write(105 + 20+'<br>'); document.write('105 - 20 = '); document.write(105 - 20+'<br>'); document.write('105 * 20 = '); document.write(105 * 20+'<br>'); document.write('105 / 20 = '); document.write(105 / 20+'<br>'); document.write('105 % 20 = '); document.write(105 % 20+'<br>'); // --> </script> </body> </html>

Statement


Data Declarations

          แปลตรงๆว่า การประกาศตัวแปรครับ ใน JavaScript คุณสามารถประกาศตัวแปรพร้อมใส่ค่า ให้มันได้เลยเช่น Statement a=58 ก็จะเป็นการกำหนดให้ a เป็นเลขจำนวนเต็มมีค่าเท่ากับ 58 (JavaScript สามารถรู้ชนิดของตัวแปรได้เอง) แต่ในการกำหนดตัวแปรพิเศษเช่น Array และ Object เราต้องกำหนดชนิดให้มัน ดูตัวอย่างวิธีการกำหนดครับ
Customers = new Array() Days = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat") Img1 = new Image()
จากตัวอย่างนะครับเรากำหนดให้ Customers เป็น Array ชุดหนึ่ง กำหนดให้ Day เป็น Array เก็บ String 7 ค่า และกำหนดให้ Img1 เป็น Object ชนิด Image() ซึ่งก็คือภาพครับ (สามตัวอย่างนี้ไม่เกี่ยวข้องกันนะ แค่ยกตัวอย่างให้ดูเท่านั้นเอง)

Function


การเรียกใช้ Function

ถ้าเป็น Function ที่คืนค่าได้ เราก็มองว่ามันเป็นตัวแปรตัวหนึ่ง ที่เก็บค่าๆหนึ่งอยู่ได้เลย เช่น
n = factorial(5) ;
จากตัวอย่าง เราเรียกใช้ Function factorial โดยใส่ Input 1 ตัวคือ 5 แล้วเอาค่าไปเก็บในตัวแปร n ส่วน factorial() นั้นเป็น Function ที่ไม่มีอยู่ใน JavaScript นะครับ ดังนั้นเราก็จะต้องเขียน Function ขึ้นมาใช้เองครับ ส่วน Function ที่ไม่คืนค่าเราก็เรียกใช้ได้ตรงๆเลยเช่น
display("Hello");

การประกาศ Function

          ที่ผ่านมาหลายคนคงสงสัยว่า การเขียน Function ทำอย่างไร ใน Section นี้จะสอนให้คุณสามารถเขียน Function ขึ้นมาใช้เองได้ครับ
          การเขียน Function ขึ้นมาใช้เองเราควรเขียนไว้ที่ส่วน Head ของ HTML และเรียกใช้ ในส่วนของ Body นะครับ เพื่อป้องกันการเกิด error ที่เกิดจากการเรียกใช้ Function ก่อน ที่จะประกาศ Function ซึ่งขณะนั้น Browser ยังไม่รู้จัก การประกาศ Function มีรูปแบบดังนี้ครับ

Event


Event คืออะไร

          Event ก็คือ Action ต่างๆที่เกิดขึ้นกับส่วนต่างๆในเวบเพจ เช่น เมื่อเราเอา mouse ไปทับตัว link ก็จะเกิด event onmouseover ที่ตัว link พอเอา mouse ออก ก็จะเกิด event onmouseout พอเรา click ก็จะเกิด event onclickเป็นต้น การทำงานของ event ก็จะมีอยู่ 2 ขั้นตอน คือ 1. ตรวจสอบการเกิด event ที่เรากำหนดไว้ 2. เมื่อเกิด event ขึ้น ก็จะไปเรียก function หรือคำสั่งต่างๆมาทำงาน

วิธีการใช้ Event

เราจะใส่ event ลงไปใน tag ของ html เลย เช่น เวลาจะทำตัว link เราใช้ tag <A> ใช่ไหมครับ ถ้าจะทำให้มันมีข้อความ Alert ขึ้นเวลาเอา mouse ไป over เราจะทำอย่างนี้ครับ
&lt;a href=&quot;http://realdev.truehits.net&quot; onmouseover=&quot;window.alert(&#39;Onmouseover ทำงานแล&#3657;วจ&#3657;า&#39;)&quot;&gt; Event Example &lt;/a&gt;
ก็จะได้ผลแบบนี้ครับ ลองเอา mouse pointer ไปทับดูสิ ส่วน window.alert() เป็นคำสั่งในการแสดงข้อความครับ

OOP for JavaScript


Object คืออะไร

          ในชีวิตจริงเนี่ย ถ้าผมจะบอกว่า...
  • รถยนต์เป็นวัตถุชิ้นหนึ่ง
  • ลำโพงก็เป็นวัตถุชิ้นหนึ่ง
  • หนังสือ ก็เป็นวัตถุอีกชิ้นหนึ่ง
คุณก็ไม่งงใช่ไหมครับ Object ในโลกของ Computer ก็คล้ายๆกันนะ คือการเขียนโปรแกรมแบบใหม่เนี่ย จะพยายามสมมุติให้ทุกๆอย่างในโปรแกรม เป็นวัตถุ (Objects)ให้หมดเลย ตัวอย่างก็เช่น ภาพ,browser,แบบฟอร์มต่างๆ ทั้งนี้ก็เพื่อความง่ายในการทำความเข้าใจ และการเขียนโปรแกรมครับ
          เมื่อเราสมมุติใหเป็นวัตถุแล้ว วัตถุแต่ละชนิฃดก็จะมีคุณสมบัติที่สำคัญอย่างน้อย 2 อย่างคือ...

1. Properties

Properties ก็คือคุณสมบัติของ Object นั้นเช่น
สมมุติว่า Object เป็นรถยนต์ Propeties ก็ของรถยนต์ก็คือยี่ห้อ รุ่น สี ความเร็ว แรงม้า
สมมุติว่า Object เป็นวิทยุ์ Propeties ก็ของวิทยุก็คือ ยี่ห้อ รุ่น สี ราคา ความดัง
สมมุติว่า Object เป็นหนังสือ Propeties ก็ของวิทยุก็คือ ชื่อเรื่อง ผู้แต่ง จำนวนหน้า
สมมุติว่า Object เป็นตัวคุณ Propeties ก็ของตัวคุณก็คือ เพศ อายุ น้ำหนัก ส่วนสูง
สมมุติว่า Object เป็นWebpage Propeties ก็ของWebpageก็คือ title bgcolor links
พอจะเข้าใจ Properties หรือยังครับ ที่นี้วิธีเขียนเขียนก็จะใช้ชื่อของ Object นำหน้า แล้วก็ จุด ตบท้ายด้วย Properties ที่จะอ้างถึง เช่น
รถยนต์.สี หมายถึงสีของรถยนต์
วิทยุ.ราคา หมายถึงราคาวิทยุ
document.bgcolor หมายถึงสีพื้นหลังของ Webpage
และ Properties บางตัวก็อาจเป็น Objects ก็ได้ ลองพิจารณาตัวอย่างนี้ดูนะ
รถยนต์.ประตูรถ.สี=แดง
รถยนต์.ประตูรถ.ระบบlock=Central Lock
รถยนต์.ประตูรถ.ระบบlock.สถานะ=lock อยู่
จะเห็นได้ว่า ประตูรถ เป็น Object มี Properties คือ สี และ ระบบlockประตู แต่ก็เป็น Properties ของรถยนต์เช่นกัน จากตัวอย่างเป็นการกำหนดว่า ให้มีประตูรถสีแดง ระบบ lock แบบ Central lock โดยที่กำลัง Lock อยู่ ใน JavaScript ก็มีการใช้ Object เป็น Properties ของ Object อีกชนิด เช่นกัน