Javascript Zero to Hero พื้นฐาน เครื่องหมายดำเนินการต่าง ๆ JS EP2

Sharing is caring!

พาเข้าสู่เนื้อหาพื้นฐานที่ควรทราบ เพื่อที่จะเขียน javascript ได้อย่างไหล่ลื่น หลังจาก “Javascript Zero to Hero บทนำ EP1” แนะนำเครื่องมือและคำสั่ง javascript ไปบ้างแล้ว บทความนี้จะมาต่อเนื้อหาพื้นฐานของการเขียน javascript ส่วนที่เหลือสำหรับเริ่มต้นกันต่อครับ

Operators

เครื่องหมายดำเนินการกำหนดค่า และทางคณิตศาสตร์ (Assignment operators & Arithmetic Operators)

การกำหนดค่าให้กับตัวแปรด้วย operator equal (=)

let firstName = 'Asabeneh'
let country = 'Finland'

นอกจากเครื่องหมาย (=) ยังมีเครื่องหมายอื่น ๆ ที่ควรทราบ มาทำความรู้จักเพิ่มเติมกัน

เครื่องหมายดำเนินการเปรียบเทียบค่า (Comparison Operators)

ตัวอย่างการนำไปใช้งาน

console.log(3 > 2)              // true, because 3 is greater than 2
console.log(3 >= 2)             // true, because 3 is greater than 2
console.log(3 < 2)              // false,  because 3 is greater than 2
console.log(2 < 3)              // true, because 2 is less than 3
console.log(2 <= 3)             // true, because 2 is less than 3
console.log(3 == 2)             // false, because 3 is not equal to 2
console.log(3 != 2)             // true, because 3 is not equal to 2
console.log(3 == '3')           // true, compare only value
console.log(3 === '3')          // false, compare both value and data type
console.log(3 !== '3')          // true, compare both value and data type
console.log(3 != 3)             // false, compare only value
console.log(3 !== 3)            // false, compare both value and data type
console.log(0 == false)         // true, equivalent
console.log(0 === false)        // false, not exactly the same
console.log(0 == '')            // true, equivalent
console.log(0 == ' ')           // true, equivalent
console.log(0 === '')           // false, not exactly the same
console.log(1 == true)          // true, equivalent
console.log(1 === true)         // false, not exactly the same
console.log(undefined == null)  // true
console.log(undefined === null) // false
console.log(NaN == NaN)         // false, not equal
console.log(NaN === NaN)        // false
console.log(typeof NaN)         // number

เครื่องหมายตรรกะ (Logical Operators)

ย้อนกลับไปในช่วงที่เรียนคณิตศาสตร์ สมัยประถม หรือมัธยมจะมีตารางตรรกะศาสตร์เบื้องต้น

ในภาษา javascript จะใช้สัญลักษณ์

• && เพื่อแทนเงื่อนไข และ
• || เพื่อแทนเงื่อนไข หรือ
• ! เพื่อแทนนิเสธน์

เครื่องหมายเพิ่มค่า และลดค่า (Increment Operator & Decrement Operator)

การเพิ่มค่า

เพิ่มค่าล่วงหน้า

let count = 0
console.log(++count)        // 1
console.log(count)          // 1

เพิ่มค่าหลังจาก

let count = 0
console.log(count++)        // 0
console.log(count)          // 1

การลบค่า

ลบค่าล่วงหน้า

let count = 0
console.log(--count)        // 1
console.log(count)          // 1

ลบค่าหลังจาก

let count = 0
console.log(count--)        // 0
console.log(count)          // 1

เครื่องหมายดำเนินการ 3 อย่าง (Ternary Operators)

การเขียนเงื่อนไขแบบสั้นจะประกอบไปด้วย 3 อย่าง คือ 1. เงื่อนไข 2. ทำบางอย่างหากเงื่อนไขเป็นจริง 3.ทำบางอย่างหากเงื่อนไขไม่จริง อื่น ๆ

let isRaining = true
isRaining
  ? console.log('You need a rain coat.')
  : console.log('No need for a rain coat.')
isRaining = false

isRaining
  ? console.log('You need a rain coat.')
  : console.log('No need for a rain coat.')

Date Object

javascript จะมี object Date ให้ใช้งาน เหมือนภาษาอื่น ๆ สามารถระบุ รูปแบบวันที่ และดูค่าวันที่ วัน, เดือน, ปี, เวลา ได้

ตัวอย่างการเรียกใช้งาน Date

const now = new Date()
console.log(now) // Sat Jan 04 2020 00:56:41 GMT+0200 (Eastern European Standard Time)

// ดึงปี
const now = new Date() 
console.log(now.getFullYear()) // 2020

// ดึงเดือน
const now = new Date() 
console.log(now.getMonth()) // 0, because the month is January,  month(0-11)

// ดึงวันที่
const now = new Date() 
console.log(now.getDate()) // 4, because the day of the month is 4th,  day(1-31)

รูปแบบ Date อื่น ๆ

const now = new Date()
const year = now.getFullYear() // return year
const month = now.getMonth() + 1 // return month(0 - 11)
const date = now.getDate() // return date (1 - 31)
const hours = now.getHours() // return number (0 - 23)
const minutes = now.getMinutes() // return number (0 -59)

console.log(`${date}/${month}/${year} ${hours}:${minutes}`) // 4/1/2020 0:56