JavaScript 101

เริ่มต้นเรียนรู้ JavaScript เบื้องต้นกันครับ

• JavaScript คือภาษาโปรแกรมภาษาหนึ่งที่เป็นที่นิยมนำมาพัฒนาเว็บแอปพลิเคชันและเว็บไซต์ โดยในบทความนี้จะมาอธิบายความรู้เบื้องต้นที่เกี่ยวกับ JavaScript มาศึกษาไปพร้อมๆกันเลยครับ

Comment syntax

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

การใช้งาน จะใช้เครื่องหมาย // นำหน้าประโยคที่ต้องการจะ comment ในกรณีที่เป็นประโยคบรรทัดเดียวกันเท่านั้น แต่ในกรณีที่เป็นประโยคหลายบันทัดต้องใช้ /* … */ มาครอบประโยคที่ต้องการจะ comment ไว้แทน

Example JavaScript Comment

Console Log

console.log() คือ function ที่ใช้แสดงข้อความออกทางหน้า console โดยใช้ประโยชน์ในแง่ของการ dubug และในบทความนี้จะใช้ console.log() ในการแสดงผลของชุดคำสั่งต่างๆครับ

Example console.log()

Variables

Variables คือตัวแปรที่ใช้สำหรับจัดเก็บข้อมูล โดยรูปแบบการประกาศใช้ตัวแปรจะมีด้วยกันสามแบบคือ var, let, const นำหน้าแล้วตามด้วยชื่อตัวแปร ซึ่งชื่อตัวแปรจะต้องขึ้นต้นด้วยตัวอักษร (a-z) จะเป็น Upper หรือ lower ก็ได้ หรือ $ หรือ _ แต่ส่วนใหญ่แนะนำให้ตั้งในรูปแบบของ camelCase และให้ตั้งชื่อที่สื่อความหมายถึงค่านั้นๆเพื่อให้อ่านแล้วเข้าใจได้ง่าย ซึ่งรูปแบบการการประกาศใช้ตัวแปรในแต่ละแบบก็จะมีคุณสมบัติที่ต่างกันดังนี้

var ตัวเเปรที่ถูกประกาศด้วย var จะเป็น function scope โดยจะสามารถเข้าถึงตัวเเปรนั้นได้ใน function ที่ประกาศไว้เท่านั้น และสามารถแก้ไขค่าในตัวแปรได้

Example JavaScript Variables Var

จากตัวอย่างจะเห็นว่าเมื่อเราเขียน function testVar() แล้ว console.log(x); ค่าที่log ออกมาได้คือ x is not defined เพราะ x ได้ประกาศอยู่ใน function แต่เมื่อเราเรียกใช้งาน function testVar() ผลของการ log ในบรรทัดที่ 3 ค่า x จะเท่ากับ 1 และเมื่อเข้าสู่เงื่อนไขที่เป็นจริงแล้วทำการแทนที่ค่า x ใหม่ ทำให้ค่า x ที่ log ออกมาในบรรทัดที่ 6และ8 เปลี่ยนค่าเป็น 2 จากการแทนที่ค่าx ในบรรทัดที่5

let และ const ตัวเเปรที่ถูกประกาศด้วย let และ const จะเป็น block scope โดยจะสามารถเข้าถึงตัวเเปรนั้นได้ใน {} ที่ประกาศไว้เท่านั้น แต่ let และ const จะต่างกันตรงที่ let สามารถเปลี่ยนค่าได้ ส่วน const ไม่สามารถเปลี่ยนค่าได้

Scope

ใน JavaScript จะมองเห็นตัวแปรอยู่ 3แบบ คือ

• Global scope คือ Scope ที่อยู่ในระดับสูงสุดของ Browser ซึ่งสามารถ access ได้จาก code ที่ส่วนไหนก็ได้
• Function scope คือ Scope ที่สามารถ Access ได้ภายใน function นั้นๆ เท่านั้น
• Block scope คือ Scope ที่สามารถ Access ได้ภายใน Block นั้นๆ เท่านั้น

Operators

• Arithmetic Operators คือตัวคำนวนในทางคณิตศาสตร์ ได้แก่ +, -, *, /, %, ++, --, **
• Assignment Operators คือตัวดำเนินการที่ใช้กำหนดค่าให้กับตัวแปร ได้แก่ =, +=, -=, *=, /=, %=
• Comparisom Operators คือตัวดำเนินการที่เปรียบเทียบข้อมูล 2 ตัว ซึ่งจะได้ผลลัพธ์เป็น boolean ได้แก่ =, ==, ===, !==, >, >=, <, <=
• Concatenation Operators คือการนำ String มาต่อกัน โดยใช้ +
• Logical Operators คือตัวดำเนินการเปรียบเทียบลอจิก ได้แก่ && (true ทั้งคู่ถึงจะ true), || (false ทั้งคู่ถึงจะ false), ! (ใช้กลับลอจิก)
• Increment ++ เอาไว้เพิ่มค่าทีละ 1
• Decrement -- เอาไว้ลดค่าทีละ 1

Data type

โดยหลักๆ แล้ว JavaScript จะมีชนิดของข้อมูลอยู่ 2 แบบคือ

1. Primitives Data (ข้อมูลพื้นฐาน) ประกอบด้วย Number, String, Boolean, Symbol, null, undefined

Example JavaScript Primitives Data type

ข้อควรระวังของ String data type คือหากต้องใช้เครื่องหมาย " ภายในข้อความที่ครอบ "..." ถ้าใส่ลงไปตรงๆ จะเกิด error จะต้องใช้ Escape Character ซึ่งเป็นตัวอักษรพิเศษ \" แทน เช่นเดียวกันถ้ามีข้อความที่ครอบด้วย ' ... ' แล้วจะใส่ ' ลงไป จะต้องใช้ \'

2. Object คือนอกจาก data type primitives data แล้วคือ Object ทั้งหมด โดย Object จะเก็บเป็น key/value อยู่ภายใต้ Object Literal Natation {} ซึ่งจะมี properties (variables), methods (functions) หรือ object ก็ได้

การเข้าถึง Object ทำได้โดยใช้ dot notation . หรือ bracket notation []

Example JavaScript Object Data type

Array

คือข้อมูลในรูปแบบ object รูปแบบหนึ่ง ใช้สำหรับเก็บชุดข้อมูลที่ซ้ำๆกัน ภายในเครื่องหมาย[] แล้วแบ่งแต่ละชุดข้อมูลด้วย ,

การเข้าถึง Array ทำได้โดยใช้[] ต่อท้ายชื่อแล้วกำหนดลำดับข้อมูลที่ต้องการโดยลำดับข้อมูลตัวแรกจะเริ่มจาก [0]

Example JavaScript Array Data type

โดยใน Array จะมีการคำสั่งที่ทำงานรวมกับมันที่เรียกว่า Array Method โดยการใช้งานจะอยู่ในรูปแบบชื่อของ Array ตามด้วย .methodName() หากตามหลังชื่อไม่มี () จะเรียกว่า properties เช่น arrayName.length โดย Method ที่ใช้งานจะมีดังนี้

• pop() ดึงค่าตัวสุดท้ายออกจาก array
• push() เพิ่มค่าต่อท้าย array
• shift() ดึงค่าตัวแรกออกจาก array
• unshift() เพิ่มค่าไปต่อหน้า array
• concat() เอาไว้เชื่อม array 2 ตัว หรือมากกว่า เข้าด้วยกัน
• reverse() ไว้ reverse order of elements
• sort() default จะเรียงตาม alphabet (a-z)
• slice() จะคืนค่า array ที่ตัดแล้วออกมา โดยที่ไม่ได้ลบใน array ตัวเดิม มี parameter 2 ตัว ตัวแรกเป็น index ที่เริ่มเอาข้อมูล ตัวที่ 2 เป็น index สิ้นสุด (ไม่รวม index นี้)

Example JavaScript Array Method

Function

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

Example JavaScript Function

โดยทั่วไปแล้วรูปแบบของ Function ใน JavaScript นั้นจะประกอบด้วย Function keyword ตามด้วยชื่อต่อด้วย() และชุด{...} โดยใน() สามารถกำหนดค่า parameter ต่างๆได้ และใน{...} ก็จะกำหนดชุดคำสั่งที่เราต้องการซึ้งสามารถนำค่า parameter ที่ส่งมาไปใช้งานในชุดคำสั่งนั้นๆได้

Anonymous Functions คือการประกาศฟังก์ชันโดยตัดชื่อฟังก์ชันออก แล้วสร้างตัวแปรมารับค่า Function นั้นๆแทน

Example JavaScript Anonymous Functions

IIFE (Immediately Invoked Function Expressions) คือฟังก์ชันที่เรียกใช้งานทันที โดยการใส่ () ต่อท้ายฟังก์ชัน เพื่อเรียกใช้งานฟังก์ชันทันที และใส่ (...) ครอบไว้ซึ่งคือการทำ Wrapped Function

Example JavaScript IIFE Functions

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