4
Sep

Javascript จิ๊บจ๊อย #2 รากฐานอันมั่นคง

Category: Blog , code / 694 views

มาเข้าสู่ตอนที่สองของบทเรียน Javascript กันดีกว่านะครับ ตอนแรกผมได้พาไปดูถึงวิธีการเขียน Javascript ใน HTML แล้วนะครับ หากว่าใครไม่เก็ท หรือมีคำถาม อย่าได้รีรอที่จะถามนะครับ ผมยินดีตอบคำุุถามเสมอครับ ^^  สำหรับตอนที่สองนี้ ผมจะพาเพื่อนๆไปดูเรื่องราวที่เป็นเบสิกของ Javascript แต่เป็นเบสิกที่สำคัญโคตรๆเลยหล่ะครับ ดังนั้นบทนี้ ตั้งใจอ่านนะครับ

ตัวแปร Variables

ในการเขียนโปรแกรมนั้น สิ่งที่เราจะขาดแทบจะไม่ได้เลยนั่นก็คือตัวแปรครับ ตัวแปรมีไว้ทำอะไร? ตัวแปรก็มีไว้เก็บค่าต่างๆ สำหรับนำมาใช้ในการแสดงผล หรือการคำนวณ หรือการ xxx อะไรก็แล้วแต่ แล้วแต่จะเอามาทำครับ ฮ่าๆ วิธีการประกาศตัวแปรนั้น ทำได้โดยการเขียนแบบนี้ครับ

 

[codesyntax lang=”javascript”]

var name ="Buksohn",
age = 24,
hometown = "Sisaket";

alert(name); // Buksohn

[/codesyntax]

 

จากตัวอย่างโค้ดด้านบน มีหลายจุดที่ผมอยากจะให้สังเกตครับ

  • อย่างแรก เห็นไหมครับว่า เวลาเราจะสร้างตัวแปรขึ้นมานั้น เราต้องมีคีย์เวิร์ดบอกให้โปรแกรมรู้ว่า เห้ย!! ตัวนี้มันคือตัวแปรนะเฟ้ย!  ซึ่งเจ้าึคีย์เวิร์ดที่ว่า ก็คือคำว่า var นั่นเองครับ ลองเดาซิครับว่า var ย่อมาจากอะไร?  เก่งมากครับ มันก็ย่อมาจาก variable ที่แปลว่าตัวแปรนั่นแหล่ะครับ

 

  • อย่างต่อมา  ก็คือ “ชื่อตัวแปร” ครับ เราจะตั้งชื่อตัวแปรว่าอะไรก็ได้ครับ จะใช้ชื่อพ่อชื่อแม่ ชื่อแฟนมาตั้งก็ได้ แต่ว่าผมแนะนำว่าควรตั้งชื่อที่มันดูสื่อกับสิ่งที่ต้องการจะใช้งาน เช่น หากต้องการจะสร้างตัวแปรไว้เก็บค่าสำหรับ รหัสนักศึกษา ก็อาจจะตั้งชื่อว่า studentID  ก็น่าจะเก็ทกว่า ตั้งชื่อเป็นน้องหมาน้องแมวนะครับ  ชื่อตัวแปรเราจะใช้พยัญชนะผสมตัวเลขก็ได้  แต่ “ห้ามขึ้นต้นด้วยตัวเลข” นะครับ จำไว้ให้ขึ้นใจเลยทีเดียว

 

  • ชื่อตัวแปรในโค้ดด้านบนก็คือ name, age และ hometown ครับ โดยมีค่าต่างๆก็คือ name มีค่าเก็บไว้ว่า Buksohn   ส่วน age ก็เก็บค่า 24 ไว้ และเจ้า hometown ก็เก็บค่า Sisaket ไว้ครับ

 

  • ถัดมาอีก สังเกตไหมครับว่า เราสามารถประกาศตัวแปรหลายๆตัวได้ โดยใช้เครื่องหมาย คอมม่า (,) คั่นแต่ละตัวแปร  นี่เป็นเทคนิคที่ผมอยากจะแนะนำให้นำไปใช้กันนะครับ นั่นก็คือ ส่วนบนสุดของโค้ดของเรา และส่วนบนสุดของทุกๆฟังก์ชั่น ให้เราประกาศตัวแปรทุกตัวที่เราต้องการจะนำมาใช้งานในไฟล์นั้น หรือในฟังก์ชั่นนั้นครับ  (ตอนนี้อย่าเพิ่งสงสัยว่าฟังก์ชั่นคืออะไร อ่านผ่านๆไปก่อนครับ เพราะเดี๋ยวผมจะพาไปรู้จักภายหลัง)
อ้าว!! ช้าก่อน  บางคนอาจจะสงสัยว่า อ้าว แล้วถ้าตรูไม่รู้ว่าแล้วค่าที่จะเก็บในตัวแปร นั้นมันเป็นอะไร แล้วตรูจะสร้างตัวแปรตอนไหนดีล่ะ?  จริงๆแล้วเราสามารถประกาศตัวแปรไว้ก่อน “โดยยังไม่ต้องใส่ค่า” ก็ได้ครับ  เอ๊ะ ยังไง! ถ้า งง  ก็ลองดูโค้ดนี้นะครับ

[codesyntax lang=”javascript” lines_start=”1″ highlight_lines=”1″]

var name;

name="Buksohn";

[/codesyntax]
 

บรรทัดแรก จะเห็นว่า ผมประกาศตัวแปรโดยไม่ได้ระบุค่าให้ตัวแปร ซึ่งในภาษา Javascript การที่เราประกาศตัวแปรแต่ไม่ระบุค่าให้ตัวแปร เราจะเรียกว่า “undefined” ครับ ซึ่งการประกาศแบบนี้ เราจะสามารถมาใส่ค่าของตัวแปรได้ภายหลัง (ก็คือบรรทัดที่สองนั่นเอง)

 

ถึงตอนนี้มีใครสับสน งงงวยกับชีวิตบ้างไหมครับ? ถ้ามีคำถาม ให้ถามนะครับ อย่าเก็บไว้ครับ

Types

ก้าวแรกๆของการเรียนภาษา Javascript หลังจากที่เราได้เรียนรู้ว่าตัวแปรคืออะไร  ก็คือการเข้าใจในสองเรื่องดังต่อไปนี้ครับ

  • เข้าใจว่า ชนิดของข้อมูลมีอะไรบ้าง  และมันทำอะไรได้บ้าง
  • วิธีการเขียน มีวิธีการเขียนอย่างไร (เรียกว่า syntax หรือ แกรมม่าร์ทางคอมพิวเตอร์อ่ะครับ)
ในช่วงต่อไปนี้ ผมจะเริ่มต้นจูงมือเพื่อนๆไปดู ชนิดของข้อมูลที่เราสามารถใช้งานได้ในภาษา Javascript ครับ โดยบทเรียนนี้ผมจะมีโค้ดให้ดูว่า syntax หรือวิธีการเขียน เป็นอย่างไร จากนั้นจะอธิบายแต่ละจุดๆนะครับ โอ้เค้?  มาเริ่มกันเลย….
String สตริง
สตริงไม่ได้มีส่วนเกี่ยวข้องอะไรกับจีสตริงนะครับ แล้วก็ไม่ได้หมายถึง สปริงด้วย ผมพิมพ์ถูกแล้ว สำหรับข้อมูลชนิดที่เรียกว่า String นั้น พูดง่ายๆก็คือพวก “ข้อความ” ใน javascript นั่นแหล่ะครับ (หากใช้ภาษาอังกฤษก็คือบรรดา text ทั้งหลายแหล่นั่นเอง)   เมื่อไหร่ก็ตามที่เราทำงานกับพวก text  เราก็กำลังใช้งาน string ครับ  ซึ่งเจ้า สตริง เนี่ย เราต้องมีอะไรบางอย่าง ระบุว่า เห้ย!! นี่มันคือสตริงนะจ๊ะ  อะไรบางอย่างที่ว่านั่นก็คือเครื่องหมาย double quotes หรือ single quotes นั่นเองครับ (เครื่องหมายคำพูดนั่นแหล่ะคับ)  สองอย่างนี้จะใช้ตัวไหนก็ได้ครับ  ดูตัวอย่างกันเนาะ:

[codesyntax lang=”javascript”]

"This is some text jaaaa"

'This is some text which surrounded by single quotes'

[/codesyntax]

ถ้าหากว่าเราต้องการจะเอาเจ้าตัวเครื่องหมายคำพูด ไม่ว่าจะเป็น double หรือ single quotes เข้าไปไว้ใน สตริงละ ทำไง เราทำได้โดยการใส่เครื่องหมาย \ ครับ จากนั้นก็ตามด้วยเครื่องหาย double หรือ single quotes ครับ การทำแบบนี้ javascript จะรู้เองว่า อ้อ ถ้าเจอเครื่องหมาย \ ตัวที่อยุ่ถัดไปเป็นเครื่องหมายนะจ๊ะ  ดูตัวอย่างกันดีกว่า

 

 

[codesyntax lang=”javascript”]

alert ("I said \"What are you doing here!\" "); // I said "What are you doing here!"

alert(' "OMG!! It\'s really scary." '); // "OMG!! It's really scary."

[/codesyntax]

 

สังเกตเห็นอะไรบ้างไหมครับ? ในบรรทัดสุดท้าย ผมไม่ได้ใช้ \ สำหรับเครื่องหมาย double quotes เพราะอะไร?  นั่นก็เพราะว่า ประโยคนี้มันถูกครอบด้วย single quote (‘) ไงละคับ ดังนั้นตัว ” ที่อยู่้ข้างใน javascript มันก็เลยรู้ว่าเป็นอักขระตัวหนึ่งครับ
ตัวเลข Numbers

ถ้าใครที่เคยเรียนภาษาอื่นๆมา (หมายถึงภาษาโปรแกรมมิ่งหนะครับ) ก็คงจะคุ้นเคยกับตัวเลขชนิดต่างๆในทางคอมพิวเตอร์นะครับ ไม่ว่าจะเป็นแบบจำนวนเต็ม หรือจำนวนที่มีทศนิยม  แต่สำหรับ javascript ตัวเลขนั้นมีแค่รูปแบบเดียวครับ เราจะใช้แบบไหนก็เลือกใช้ได้ตามใจปรารถนาครับ

 

[codesyntax lang=”php”]

10

3.14159372

[/codesyntax]

 

ในภาษา javascript นั้นไม่มีข้อแตกต่างระหว่างตัวเลขเต็มสิบ (เช่น 1  2  200 1444) กับตัวเลขทศนิยม  (เช่น 1.532)  แต่ถ้าหากว่าเราต้องการตัวเลขที่มีค่าเยอะมาก หรือว่ามีค่าน้อยมากๆ ก็ใช้รูปแบบที่เรียกว่า scientific notation ได้ครับ (เอ่อ เรียกเป็นภาษาไทยได้ว่าอย่างไร ผมก็เรียกไม่เป็น ฮ่าๆ)

 

[codesyntax lang=”javascript”]

alert(3.141e5); // 314100

alert(123e-3); // 0.123

[/codesyntax]

 

มาดูคำอธิบายกันครับ  อ้อ ผมลืมบอกไปว่า หลัง // ในโค้ด นั่นหมายถึง ถ้ารันออกมาแล้วจะได้ค่าอะไรนะครับ ฮ่าๆ  สำหรับบรรทัดแรก 3.141e5  ก็คือ 3.141×105 นั่นเองครับ หรือก็คือ 314,100 นั่นเอง   ส่วนบรรทัดที่สอง 123×10-3  หรือก็คือ 0.123 นั่นแหล่ะครับ  แต่อย่างไรก็ดี ระวังไว้นะครับว่า javascript รองรับตัวเลขที่ไม่เกิน 17 ตัวเท่านั้น ถ้ายาวกว่านี้ ตัวถัดไปจะถูกตัดออกโดยทันทีครับผม

 

ได้เวลาเล่าเรื่องสนุกๆให้ฟังแล้วหล่ะครับ ในภาษา javascript เนี่ยถ้าทำงานกับตัวเลข บางทีมันไม่ได้ให้ผลลัพธ์เป๊ะๆอย่างที่เราคาดนะครับ ยกตัวอย่างเช่น ถ้าผมต้องการ 0.1+0.2 คำตอบที่ได้มันจะได้ 0.30000000000000004  เห้ย!! อะไรกันเนี่ย! เกิดอะไรขึ้น  ไม่ต้องตกใจไปครับ มันมีเหตุผลทางเทคนิคบางอย่าง ครับ ตัวเลขในทางคอมพิวเตอร์ที่มีทศนิยมละเอียดๆ แล้วบางทีก็จะมีค่า error เกิดขึ้นคับ  แต่ผมก็คิดว่าพวกเราคงไม่ได้จะใช้ตัวเลขที่มีทศนิยมละเอียดยาวเป็นหางว่าวแบบนี้กันใช่ไหมครับ ฮ่าๆ  แต่ช้าก่อน แม้ว่าเราจะไม่ได้ใช้ตัวเลขที่ละเอียดแบบนี้ เราก็ควรป้องกันไม่ให้มันเกิดขึ้นครับ เริ่มต้นแล้วก็ต้องเริ่มต้นให้ดี  วิธีง่ายๆที่หลายๆคนมองข้ามนั่นก็คือ เราป้องกันได้โดยการทำให้ จำนวนทศนิยมเป็นจำนวนเต็มเสียก่อนครับโดยการคูณ  จากนั้นค่อยมาหารออก ซึ่งก็จะเป็น ((0.1*10)+(0.2*10))/10  แค่นี้คำตอบที่ได้ก็จะถูกต้องตามหลักคณิตศาสตร์ที่เราเคยเรียนมาสมัยประถมแล้วหล่ะครับ นั่นก็คือตำตอบก็คือ 0.3 นั่นเอง   ผมรู้ครับว่ามันดูยุ่งยากเสียเหลือเกิน แต่ก็นะ ก็มันคือ javascript นี่นา ฮ่าๆ  แม้ว่ามันจะดูน่ากลัวสำหรับบางคน แต่จริงๆแล้วมันน่ารัก น่าค้นหา และสนุกมากนะครับ เชื่อผม

 

เอาละครับ บทเรียนตอนนี้ พอแค่นี้ก่อนละกัน ยาวมากกว่านี้ คงเล็คเชอร์กันทั้งวันแน่ๆ ผมไม่ต้องการให้อ่านทีเดียวเขียนโปรแกรมได้ทันที เพราะผมเองก็มิสามารถจะเขียนได้ยาวขนาดนั้น ผมจะแบ่งเป็นตอนๆ ให้เพื่อนๆ เรียนรู้ทีละอย่างๆไปครับ ช้าๆได้พร้าเล่มงามครับผม  สำหรับตอนต่อไปเราจะมาดูรุปแบบอื่นๆที่ผมยังไม่ได้พูดถึงอีกครับ แล้วเจอกันตอนหน้านะครับ

 

บอกต่อเพื่อนก็กด Like บอกบักสนนั้นไซร้ให้ Comment

 

 

Tags:


Phraisohn Siripool is a Graphic Designer and Website Developer. Contact Buksohn for Your Business Endeavours
ปิดโหมดสีเทา