6
Sep

javascript จิ๊บจ๊อย #3

Category: Blog , code / 438 views

สวัสดีอีกวันครับพี่น้องครับ ผ่านไปแล้วกับสองตอนนะครับ ไม่รู้ว่าจะเข้าใจหรือตามทันกันมากน้อยแค่ไหน ก็ถ้าไม่ทันตรงไหนก็บอกได้นะครับ แล้วก็ต้องขอบคุณท่านผู้อ่าน คุณ Chalermkorn Sapproetprai ที่มีฟีดแบ็กตอบกลับมาว่าอยากให้มี flow chart ให้ดูว่าตอนนี้เรียนถึงไหนแล้ว ซึ่งผมก็เห็นว่าเป็นสิ่งที่ดีครับ ดังนั้นมาดูกันว่า สิ่งที่ผมจะเขียนนี้จะประกอบด้วยอะไรบ้าง

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

 

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

 

เอาละมาต่อกันกับชนิดของข้อมูลกันดีกว่านะครับ

 

Booleans

บูลีนคืออะไร?  บูลีนก็คือข้อมูลแบบตรรกะ นั่นเองครับ เป้นข้อมูลที่แสดงถึงการตัดสินใจ เป็นตัวที่ง่ายที่สุด เพราะมีค่าความจริง แค่ True กับ False เท่านั้น  ในการเขียน javascript เราจะได้ใช้ boolean เยอะครับ แล้วแต่กรณีไป  สิ่งที่สำคัญที่สุดของ Boolean ก็คือเอาไว้เช็คบรรดา loop แล้วก็เงื่อนไขต่างๆครับ เดี๋ยวบทหน้าๆ เราจะได้เห็นบทบาทของมันมากขึ้นครับ

 

Null และ Undefined

ภาษาคอมพิวเตอร์ส่วนใหญ่จะมีค่าที่ “ไม่มีค่าอยู่” หรือเรียกเป็นภาษาทางการว่า “non-existent” อืม อธิบายไงดี ยกตัวอย่างเช่น สมมติว่าเราสร้างตัวแปรมาสักตัว แล้วเรายังไม่ได้กำหนดค่าให้มัน มีแต่ตัวแปรเฉยๆ พอเราจะให้โปรแกรมแสดงค่าตัวแปรนั้นออกมา มันก็ย่อมทำไม่ได้ใช่ครับ ก็ตรูยังไม่มีอะไรข้างในเลยแล้วจะให้ตรูแสดงอะไรออกมา ประมาณนี้ครับ  ซึ่งแบบนี้แหล่ะที่เราเรียกว่า undefined. ถ้าให้เห็นภาพก็ลองดูแบบนี้ครับ

 

สมมติว่าผมสร้างตัวแปรชื่อ  summary นะครับ ก็จะประกาศตัวแปรได้ดังนี้

[codesyntax lang=”javascript”]

var summary;

alert(summary); // ให้แสดงค่า summary

[/codesyntax]

 

เราจะเห็นว่า ถ้ารันออกมาแล้ว มันจะบอกว่า undefined เพราะ มีแค่ตัวแปรเฉยๆ โปรแกรมยังไม่รู้ด้วยซ้ำว่า ตัวแปรนี้จะเก็บค่าอะไร เก็บตัวเลข หรือข้อความ หรือ something อะไรก็แล้วแต่ นี่แหล่ะครับ คือข้อมูลชนิด undefined   ส่วนข้อมูลชนิด null ก็คือประกาศตัวแปรนั้นให้เป็น “ค่าว่าง” นั่นเองครับ

 

Object วัตถุ

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

 

Object เป็นอีกตัวหนึ่งที่ทรงพลังมากมายในภาษา javascript ครับ การมองให้เป็นวัตถุจะทำให้เราใช้งานได้ง่ายขึ้น มาูดูตัวอย่างดีกว่าคับ

 

[codesyntax lang=”javascript”]

var obj ={

name : "Sohn",

age : 24,

job : "programmer",

education : {

name: "Chulalongkorn",

id : "1234567",

graduate : true

}

};

alert(obj.name); // Sohn

alert(obj.education.id); // 1234567

[/codesyntax]

 

มาดูรายละเอียดกันครับ  Object จะถูกกำหนดโดยใช้เครื่องหมาย {}  ครับ ซึ่งข้างในเครื่องหมาย {} เราก็จะสามารถใส่ key-value หรือคุณสมบัติของมันลงไปได้  สังเกตดูนะครับ คุณสมบัตินั้น เราจะใช้ :  เป็นตัวบอกว่า คุณสมบัตินี้มีค่าอะไร  เช่นในตัวอย่าง ผมสร้าง วัตถุชื่อว่า obj  โดยมีคุณสมบัติ name คือ Sohn ผมก็เขียนว่า name : “Sohn”  แล้วคุณสมบัติต่อมา เราก็เขียนลักษณะเดียวกันครับ

 

นอกจากนี้ ข้างในวัตถุเรายังสามารถใช้ วัตถุอีกอันแทรกไปข้างในได้อีกด้วย อย่างในตัวอย่าง ผมให้ education เป็นอีกวัตถุหนึ่งที่อยู่ใน obj ซึ่งใน education เองก็มีคุณสมบัติต่างๆด้วยเช่นเดียวกัน ครับ

 

บรรทัด graduate : true  สังเกตให้ดีนะครับ ว่าเราจะไม่มีเครื่องหมาย ; ตามท้าย อย่าเผลอไปใส่ละครับ เดี๋ยวโปรแกรมรันไม่ได้ 55

 

ทีนี้ ถ้าเราต้องแสดงค่าของคุณสมบัติของวัตถุนั้นจะทำอย่างไร ก็ง่ายๆครับ เรียกวัตถุก่อนตามด้วยชื่อคุณสมบัติครับ โดยใช้ จุด (.) ระบุความลึกของข้อมูล  ยกตัวอย่าง ผมต้องการทราบค่า name ของ obj  ผมก็ใช้  obj.name   แต่ถ้าต้องการทราบค่า name ของ education ก็ใช้ obj.education.name  จะเห็นว่า เราเรียงจากใหญ่สุดแล้วก็ซอยย่อยๆลงมาครับ  จริงๆรายละเอียดอื่นๆยังมีอีกมาก แต่ยังไม่จำเป็นต้องรู้ในตอนนี้ครับ เดี๋ยวจะได้เจอแน่ๆในภายหลังเด้อ

 

Array
 ภาษาโปรแกรมมิ่งส่วนใหญ่ก็มี array ทั้งนั้นครับ array คือการเก็บ “ข้อมูลหลายๆตัวมาเรียงกันเป็นลำดับ”  โดยลำดับมีความสำคัญมากกับข้อมูลชนิดนี้ครับ มันก็คล้ายๆกับ object ครับ เพียงแต่ว่า มันไม่มี key แค่นั้นเอง  ลองดูตัวอย่างนี้คับ

[“somchai”, “Somsi”, “Sompong”, 2530]

ข้อมูลนี้เป็น “ชุดข้อมูล” ที่จัดเก็บไว้ใน array ที่ผมบอกว่าลำดับมีความสำคัญ  นั่นก็คือ ตัวแรกของข้อมูลคือ somchai ตัวต่อมาคือ Somsi ต่อมาคือ Sompong และตัวสุดท้ายคือ 2530 ดังนั้นเวลาเราจะเข้าถึงข้อมูลใน array เราจึงจำเป็นต้อง “ระบุลำดับที่” ของข้อมูลในนั้นด้วยครับ โดยที่ array นั้นจะมีลำดับที่ลำดับแรกคือ 0 ครับ (นับเริ่มต้นจาก ศูนย์ นะครับ)

var arr = [“somchai”, “Somsi”, “Sompong”, 2530];

alert(arr [2]); // Sompong

 

โค้ดด้านบน เป็นการยกตัวอย่างครับ เราต้องการให้แสดงค่าลำดับที่ 2 ซึ่ง ก็คือ Sompong (อย่าลืมนะครับว่ามันจะเริ่มต้นลำดับแรกคือลำดับที่ศูนย์) ดังนั้นค่าที่แสดงผลออกมาก็คือ Sompong นั่นเองครับ

 

ใน array เราสามารถจัดเก็บข้อมูลได้หลากหลายรูปแบบ ไม่ว่าจะเป็น string, number , Boolean, object เก็บได้หมดครับ

 

เอาละครับ วันนี้บทความวันนี้ขอพอแค่นี้ก่อนดีกว่า ซึ่งก็จะบอกว่า เรื่องของ Type ที่ผมจะเขียนก็มีเพียงเท่านี้แหล่ะครับ หากติดขัดตรงไหน ก็บอกได้ครับ บทความหน้า เราจะมาดูเรื่อง semicolon , comment และ operator ตามลำดับครับ

 

บอกต่อเพื่อนกด Like บอกผมใช่ไหมให้ comment

 

 

Tags:


Phraisohn Siripool is a Graphic Designer and Website Developer. Contact Buksohn for Your Business Endeavours