zerotohero

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

พาเข้าสู่เนื้อหาพื้นฐานที่ควรทราบ เพื่อที่จะเขียน 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

Javascript Zero to Hero บทนำ EP1

javascript มีอายุของภาษาก็ 25 ปีแล้ว ถือว่าเป็นภาษาที่ได้รับความนิยมมายาวนาน ด้วยความสามารถที่เขียนไครเอนซ์ไซน์ (client side) และเซอร์เวอร์ไซต์ (server side) ทำให้ตัวภาษารับความนิยม จึงทำให้บริษัทเจ้าใหญ่ๆ ตั้งทีมงานเพื่อมาพัฒนา framework เพื่อเป็นกรอบการทำงานของการพัฒนาแอพพลิเคชั่น (application) ที่เป็นมาตรฐานที่เป็น standard แบบเดียวกัน เช่น React (facebook) , Angular (google) ,Vue (Evan U) เป็นต้น สิ่งที่มีเหมือนกันของแต่ละ framework คือ fundamental ของตัวภาษา javascript เอง ชุดบทความนี้จะพาทำความรู้จักภาษา javascript ตั้งแต่เริ่ม zero จนกระทั่งถึง hero คือสามารถนำไปใช้งานและพัฒนาแอพพลิเคชั่นได้อย่างดีแน่นอน

ทำความรู้จักเครื่องมือ สิ่งที่ช่วยให้การเริ่มเขียน Javascript น่าสนุกมากยิ่งขึ้น

เครื่องมือที่เป็นเหมือนสิ่งที่แปล หรือแปลงโค๊ดของภาษา javascript มากกว่าให้สามารถทำงานได้มีหลัก ๆ อยู้ด้วยกัน 2 การคอมไพล์ (compile) ผ่านเครื่องมือเหล่านี้

  1. NodeJS Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
  2. Browser ต่าง ๆ ที่จะทำหน้าที่มี javascript runtime engine มาให้อยู่แล้ว เช่น Firefox , Safari ,Chrome แนะนำใช้งาน Google Chrome เพราะจะอัพเกรด version Javascript Engine ก่อน browser อื่น ๆ

console.log คืออะไร

เริ่มต้นก่อนที่จะพาไปรู้จักส่วนอื่น ๆ ในขั้นถัดๆ ไป ที่เรียกว่าขาดไม่ได้เลยคือการที่จะ debug หรือการที่จะแสดงผลลัพธ์ของตัวแปรที่เก็บอยู่ในโค๊ด การเรียกใช้งานคำสั่ง console.log(‘message or variable’)

console.log('Hello', 'World', '!')
console.log('HAPPY', 'NEW', 'YEAR', 2020)
console.log('Welcome', 'to', 'Zero', 'to', 'Hero')

การคอมเม้นท์ (comment)

การคอมเม้นท์ (comment code) คือการแทรกข้อความ หรืออื่น ๆ ที่ต้องการใส่ลงไปในไฟล์ของ โค๊ด javascript ที่ไม่ต้องการที่จะให้ javascript compile โค๊ดในส่งนี้เข้าไปในการทำงานของโปรแกรม จะไม่มีผลต่อการทำงานของโปรแกรม เพียงแต่จะมี text ข้อความแทรกอยู่ในไฟล์เท่านั้นเอง

ตัวอย่างการคอมเม้นท์ 1 บรรทัด
// This is the first comment
// This is the second comment
// I am a single line comment

ตัวอย่างการคอมเม้นท์ หลายบรรทัด
/_ This is a multiline comment
Multiline comments can take multiple lines
JavaScript is the language of the web
_/

การใช้เครื่องหมายดำเนินการทางคณิตศาสตร์

console.log(2 + 3) // Addition
console.log(3 - 2) // Subtraction
console.log(2 * 3) // Multiplication
console.log(3 / 2) // Division
console.log(3 % 2) // Modulus - finding remainder
console.log(3 ** 2) // Exponentiation 3 ** 2 == 3 * 3

แนวทางการเขียน Javascript Code ต่าง ๆ บนหน้าเว็บ

แนวทางการเขียนโค๊ด javascript กับหน้าเว็บไซต์ในรูปแบบต่าง ๆ หลัก ๆ มีด้วยกัน 4 แนวทางคือ

  • inline script การแทรก javascript ใน tag html เป็นการเขียนที่ง่ายที่สุด ตัวอย่าง
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Zero to Hero:Inline Script</title>
  </head>
  <body>
    <button onclick="alert('Welcome to Javascript Zero to Hero!')">Click Me</button>
  </body>
</html>
  • internal script การเขียนแทรก javascript code ในไฟล์ html โดยคำสั่งต่าง ๆ จะถูกเขียนอยู่ใน tag <script> </script>
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Zero to Hero:Internal Script</title>
    <script>
      console.log('Welcome to Javascript Zero to Hero')
    </script>
  </head>
  <body></body>
</html>
  • external script การเขียนโค๊ด javascript แยกเป็นอีก 1 ไฟล์ (นามสกุล .js) จากนั้นเรียกใช้งานเข้ามาในไฟล์ html ด้วยคำสั่ง <script src=”?”/>
    index.js
console.log('Welcome to Javascript Zero to Hero')

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Zero to Hero:External script</title>
    <script src="index.js"></script>
  </head>
  <body></body>
</html>

Javascript Data Type ต่าง ๆ

ในภาษา javascript จะเรียกเป็นรูปแบบ Dynamic Type ความหมายคือเป็นการกำหนด type ที่สามารถเปลี่ยนได้ตลอดเวลา โดยมีการกำนด type อยู่ด้วยกันหลัก ๆ ตามนี้ String, Number, Boolean, undefined, Null, and Symbol.

String

'Poolsawat'
'Apin'
'Javascript Zero to Hero'

Number

Integers: Integer (negative, zero and positive) numbers Example: ... -3, -2, -1, 0, 1, 2, 3 ...
Float-point numbers: Decimal number Example ... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...

Boolean

True/true , False/false

Undefined

let name;
console.log(name) // undefined

Null

let emptyValue = null

การตรวจสอบประเภท หรือชนิดของตัวแปร

จะมีคำสั่งที่ช่วยให้ทราบได้ว่าตัวแปรที่สร้างขึ้นถูกกำหนดชนิดข้อมูลเป็นอะไร โดยจะมีการคืนค่าเป็นชื่อของชนิดข้อมูลนั้น ๆ เช่น

console.log(typeof 'Poolsawat') // string
console.log(typeof 5) // number
console.log(typeof true) // boolean
console.log(typeof null) // object type
console.log(typeof undefined) // undefined

การประกาศตัวแปร และการกำหนดขอบเขตของการเข้าถึง

ภาษา javascript จะมีการกำหนดประเภทตัวแปร โดยมีอยู่ด้วยกัน 3 รูปแบบ คือ

Var การกำหนดประเภทตัวแปรที่เป็นระดับ global ที่จาก function หรือ condition ไหน ๆ ก็สามารถเข้าถึงได้สามารถ assign value ได้

var name = 'Poolsawat' , lname = 'Apin'
var age = 99
var isMale = true

Const การกำหนดประเภทตัวแปรที่จะคล้ายกับ Var แต่จะไม่สามารถ assign value ใหม่ให้ได้ แต่จะมี scope ที่แคบกว่า var

const name = 'Poolsawat' , lname = 'Apin'
const age = 99
const isMale = true

Let การกำหนดประเภทข้อมูลในระดับที่แคบมาก ๆ สามารถ assign value ใหม่ได้ สามารถกำหนดชื่อซ้ำกันได้ แต่อยู่คนละ statement code ได้

let name = 'Poolsawat' , lname = 'Apin'
let age = 99
let isMale = true
if (age == 99 ){
    isMale = false
}

สรุปท้ายบทความ

จากบทความนี้จะเป็นการปูพื้นฐานก่อนเริ่มการเขียน javascript ในบทถัด ๆ ไปสิ่งเหล่านี้จำเป็นต้องจดจำและฝึกฝนเขียนให้จำได้ เพราะในบทความต่อ ๆ ไปจะเจอคำสั่งหรือเรื่องจากบทความนี้เยอะมาก สำหรับการทดสอบเรียกคำสั่งแบบง่ายที่สุด เพียงแต่เปิด browser chrome กด F12 เลือกไปที่ tab console จากนั้นพิมพ์ console.log(‘message ‘); กด enter ผลลัพธ์ก็จะแสดงทันที บทความถัดไปจะมาอธิบายเกี่ยวกับเรื่องอะไรคอยติดตามกันด้วยนะครับ