javascript จิ๊บจ๊อย #3

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

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

 

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

 

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

 

[thetext]Booleans[/thetext]

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

 

[thetext]Null และ Undefined[/thetext]

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

 

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

[codesyntax lang=”javascript”]

var summary;

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

[/codesyntax]

 

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

 

[thetext]Object วัตถุ [/thetext]

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

 

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  จะเห็นว่า เราเรียงจากใหญ่สุดแล้วก็ซอยย่อยๆลงมาครับ  จริงๆรายละเอียดอื่นๆยังมีอีกมาก แต่ยังไม่จำเป็นต้องรู้ในตอนนี้ครับ เดี๋ยวจะได้เจอแน่ๆในภายหลังเด้อ

 

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

[skill]

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

[/skill]

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

[skill]

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

alert(arr [2]); // Sompong

[/skill]

 

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

 

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

 

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

 

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

 

 

back to top