พาเข้าสู่เนื้อหาพื้นฐานที่ควรทราบ เพื่อที่จะเขียน javascript ได้อย่างไหล่ลื่น หลังจาก “Javascript Zero to Hero บทนำ EP1” แนะนำเครื่องมือและคำสั่ง javascript ไปบ้างแล้ว บทความนี้จะมาต่อเนื้อหาพื้นฐานของการเขียน javascript ส่วนที่เหลือสำหรับเริ่มต้นกันต่อครับ
Operators
เครื่องหมายดำเนินการกำหนดค่า และทางคณิตศาสตร์ (Assignment operators & Arithmetic Operators)
การกำหนดค่าให้กับตัวแปรด้วย operator equal (=)
let firstName = 'Asabeneh'
let country = 'Finland'นอกจากเครื่องหมาย (=) ยังมีเครื่องหมายอื่น ๆ ที่ควรทราบ มาทำความรู้จักเพิ่มเติมกัน
| เครื่องหมาย | ตัวอย่าง | เทียบได้กับ | อธิบาย |
| = | x = y | x = y | เก็บค่า y ใส่ตัวแปร x |
| += | x += y | x = x + y | นำ x บวก y เก็บใส่ตัวแปร x |
| -= | x -= y | x = x – y | นำ x ลบ y เก็บใส่ตัวแปร x |
| *= | x *= y | x = x * y | นำ x คูณ y เก็บใส่ตัวแปร x |
| /= | x /= y | x = x / y | นำ x หาร y เก็บใส่ตัวแปร x |
| %= | x %= y | x = x % y | นำ x มอด y เก็บใส่ตัวแปร x |
| **= | x **= y | x = 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() | คืนค่า ปี รูปแบบ YYYY | 2021 |
| 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
