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'

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

เครื่องหมายตัวอย่างเทียบได้กับอธิบาย
=x = yx = yเก็บค่า y ใส่ตัวแปร x
+=x += yx = x + yนำ x บวก y เก็บใส่ตัวแปร x
-=x -= yx = x – yนำ x ลบ y เก็บใส่ตัวแปร x
*=x *= yx = x * yนำ x คูณ y เก็บใส่ตัวแปร x
/=x /= yx = x / yนำ x หาร y เก็บใส่ตัวแปร x
%=x %= yx = x % yนำ x มอด y เก็บใส่ตัวแปร x
**=x **= yx = x ** yนำ x ยกกำลัง y เก็บใส่ตัวแปร x
บวก (+), ลบ (-), คูณ (*), หาร (/), มอด หารใช้ค่าของเศษ (%), ยกกำลัง (**)

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

เครื่องหมายชื่อเครื่องหมายตัวอย่างอธิบาย
==ค่าเท่ากันx == yค่า x เท่ากับ y หรือไม่
!=ค่าไม่เท่ากันx != yค่า x ไม่เท่ากับ y หรือไม่
===ค่าเท่ากัน และชนิดเดียวกันx === yค่า x เท่ากับ y และ ชนิด x เหมือน ชนิด y หรือไม่
>ค่ามากกว่าx > yค่า x มากกว่า y หรือไม่
<ค่าน้อยกว่าx < yค่า x น้อยกว่า y หรือไม่
>=ค่ามากกว่าหรือเท่ากันx >= yค่า x มากกว่าหรือเท่ากับ y หรือไม่
<=ค่าน้อยกว่าหรือเท่ากันx <= yค่า x น้อยกว่าหรือเท่ากับ y หรือไม่

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

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 จะใช้สัญลักษณ์

  • && เพื่อแทนเงื่อนไข และ
  • || เพื่อแทนเงื่อนไข หรือ
  • ! เพื่อแทนนิเสธน์
เครื่องหมาย และ (&&)เครื่องหมาย หรือ (||)เครื่องหมาย นิเสธน์ (!)
4 > 3 && 10 > 5
true && true -> true
4 > 3 || 10 > 5
true || true -> true
!4 > 3
true -> false
4 > 3 && 10 < 5
true && false -> false
4 > 3 || 10 < 5
true || false -> true
!4 < 3
false -> true
4 < 3 && 10 > 5
false && true -> false
4 < 3 || 10 > 5
false || true -> true
!(!4 > 3)
true -> false -> true
4 < 3 && 10 < 5
false && false -> false
4 < 3 || 10 < 5
false || false -> false
!(!4 < 3)
false -> true -> false

เครื่องหมายเพิ่มค่า และลดค่า (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 ให้ใช้งาน เหมือนภาษาอื่น ๆ สามารถระบุ รูปแบบวันที่ และดูค่าวันที่ วัน, เดือน, ปี, เวลา ได้

ชื่อ ฟังก์ชันอธิบายตัวอย่าง
getFullYear()คืนค่า ปี รูปแบบ YYYY2021
getMonth()คืนค่า เดือน รูปแบบ ลำดับเดือน ( 0 -11)0
getDate()คืนค่า วันที่ รูปแบบ ลำดับวัน ( 1 -31)1
getHours()คืนค่า เวลาหน่วย ชั่วโมง รูปแบบ ลำดับชั่วโมง ( 0 – 23)15
getMinutes()คืนค่า เวลาหน่วย นาที รูปแบบ ลำดับนาที ( 0 – 59)30
getSoconds()คืนค่า เวลาหน่วย วินาที รูปแบบ ลำดับวินาที ( 0 – 59)45
getMiliSeconds()คืนค่า เวลาหน่วย ลิลลิวินาที รูปแบบ ลำดับวินาที ( 0 – 999)489
getTime()คืนค่า เวลาหน่วย timestamp รูปแบบ ( 1 มกรา 1970 )1578092201341
getDay()คืนค่า สัปดาห์ รูปแบบ ลำดับสัปดาห์ ( 0 – 6) ( อาทิตย์ – เสาร์) 4

ตัวอย่างการเรียกใช้งาน 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
Posts created 102

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top