JS101 EP.1 มาทำความรู้จักกัน

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

เริ่มด้วยสิ่งที่ขาดไม่ได้เนาะ IDE ที่สำคัญๆ ก็หนีไม่พ้น Notepad………… ไม่ใช่และ เอาเป็นว่าเอาตัวที่เพิ่มสีสันให้เราดีกว่านั่นคือออ Visual Studio Code ใช้ง่ายดี แถมมี Suggestion ให้ด้วย แต่จริงๆ ท่านผู้อ่านสามารถใช้อะไรก็ได้นะ จะ Notepad ก็ยังได้

1. HTML
   การจะเขียน JS เราพลาดไม่ได้เลยที่จะไม่รู้จัก HTML โดยภาษานี้เป็น Markup language นั่นคือใช้ Tag ในการแสดงผลต่างๆ ตามความหมายของ Tag เองยกตัวอย่างเช่น
   คำสั่ง <br> นั่นคือ การขึ้นบรรทัดใหม่ หรือ line break ย่อมาจากคำว่า break
   คำสั่ง <table> นั่นคือการสร้างตาราง
   คำสั่ง <p> นั่นคือ paragraph หรือย่อหน้านั่นเอง
2. Chrome Browser
   เป็น Browse ตัวนึงที่ค่อนข้างมีประโยชน์ และสามารถทดลองเขียน JavaScript ผ่าน Console ได้เลย โดยไม่ต้องใช้ IDE อย่าง Notepad ก็ได้ ข้อเสียคือไม่สามารถ save เก็บเป็น file ไว้ใช้ครั้งถัดไปได้ทางที่ดีเจ้าของบทความแนะนำว่าควรจะ copy save เก็บไว้ดีกว่าหลังจากทดลองเสร็จ

มาเข้าเรื่องกันดีกว่า……

DataTypes

1. String: อยู่ในรูปของตัวอักษรเรียงต่อกันจนเป็นข้อความ
2. number: ตัวเลขต่างๆ
3. boolean: ค่าความจริงนั่นคือ true /false
4. object: อยู่ในรูปแบบของวัตถุหรือกลุ่มของข้อมูลที่มาเป็นชุดๆ

มาลองเล่นกันดีกว่า………

เริ่มจากเปิด console ของ Chrome Browser (กด F12 หรือ คลิกขวา Inspect)

จากรูปด้านบน

var [name] คำสั่ง var คือการบอกว่าจะประกาศตัวแปรแล้วตามด้วยชื่อซึ่งใช้ชื่ออะไรก็ได้ในตัวอย่างรูปเจ้าของบทความอยากให้ชื่อมันสื่อเลยตั้งใจเขียนออกมาในรูปชื่อของ datatype นั้นๆ

var String = “Hello”;
คือการประกาศว่าตัวแปรที่ชื่อว่า String ให้มีค่าเท่ากับชุดข้อความ Hello โดยการจะระบุคำว่า Hello เป็น String นั้นต้องอยู่ภายใต้เครื่องหมาย “…” หรือ ‘…’ เท่านั้น

var number = 1234;
คือการประกาศตัวแปร number ให้มีค่าเท่ากับตัวเลข 1234

var boolean = true;
คือการประกาศตัวแปร boolean ให้มีค่าความจริงเท่ากับ true

var object = {
name: ‘ken’,
surename: ‘Jaidee’
};
สุดท้ายคือการประกาศตัวแปร object โดยระบุว่าตัวแปรนี้เป็น object นะ ซึ่งอยู่ภายใต้เครื่องหมาย {……..} โดยข้างใน object ประกอบด้วยตัวแปร name และ surename ที่เป็น String นั่นเอง ซึ่งเวลาเราเรียกใช้ String ที่อยู่ใน object ก็ให้พิมพ์ชื่อ objectนั้นแล้วใส่จุดตามด้วยตัวแปร เช่น object.surename

ทั้งนี้การที่เราจะดูผลลัพธ์ของมันก็พิมพ์ชื่อของตัวแปรลงไปได้เลย

ท้ายสุด…….
เราสามารถเช็คชนิดของตัวแปรที่เราสร้างขึ้นมาได้ด้วยนะเพียงใช้คำสั่ง typeof([variable]) ซึ่ง variable ก็คือตัวแปรที่เราประกาศนั่นละ เพียงเท่านี้เราก็สามารถเช็คได้แล้วว่าเราประกาศตัวแปรไปแล้วตัวแปรนั้นเป็นชนิดใดบ้างดังภาพเลย

สรุป
จะเห็นว่าประเภทหรือ datatype ต่างๆ นั้นไม่ได้ยากอย่างที่เราคิด มีเพียง 4 ตัวเลือกเอง (string, number, boolean และ object) ในการใช้งานจริงก็ไม่มีอะไรมากกว่านี้ขอแค่เราอย่าหยุดเดินพยายามทุกวันลองใช้ ลองฝึก เราก็สามารถทำได้….

ท้ายสุดจริงๆนะ….
เราจะเห็นว่าการเริ่มต้นพื้นฐานไม่ยากเลยคนที่เริ่มฝึกก็มาพยายามไปด้วยกันนะมีอะไรคอมเม้นมาถามได้นะครับ….จบแล้วว ผิดพลาดประการใดขออภัยด้วยนะครับ