CNC X JS

หัวข้อทั้งหมด

• Let's say 'Hello World!'
• Data Types
• Operators
• การประกาศตัวแปร
• เงื่อนไข
• Loop
• String
• Function
• List
• Object

ติดตั้ง Node.js

https://nodejs.org

Let's say 'Hello World!'

console.log('Hello World!')

วิธี run ด้วย Node.js

• save ไฟล์เป็นนามสกุล .js
• ใช้คำสั่ง node ตามด้วยชื่อไฟล์ เช่น node main.js

Data Types

Data type ที่มีค่า

• string
• number
• boolean (true, false)
• object
• function

Data type ที่ไม่มีค่า

• null
• undefined

Operators

==   // ไม่ค่อยใช้
!=   // ไม่ค่อยใช้
===
!==
>
<
>=
<=
++
--

== กับ ===

console.log(20 == '20')   // true
console.log(20 === '20')  // false

การประกาศตัวแปร

• var (ไม่ใช้)
• let
• const

let

สร้างตัวแปรที่สามารถ assign ค่าให้ใหม่ได้

let message = 'hello'
message = 'hi

const

สร้างตัวแปรที่ไม่สามารถ assign ค่าให้ใหม่ได้

const message = 'hello'
message = 'hi' // Error

เงื่อนไข

if-else

if (2 + 3 === 5) {
    console.log('Yes')
} else {
    console.log('No')
}

if-else (short form)

console.log(2 + 3 === 5 ? 'Yes' : 'No')

switch

switch (answer) {
  case 'YES':
    console.log('Sure.')
    break;
  case 'NO':
    console.log('No? ok.')
    break;
  default:
    console.log('what?')
}

Loop

while loop

let i = 0

while (i < 5) {
    console.log(i)
    i++
}

for loop

for (let i = 0; i < 5; i++) {
    console.log(i)
}

String

ประกาศ String

const dept1 = 'Computer Science'
const dept2 = "Computer Science"
const dept3 = `Computer Science`

single quote (') กับ double quote (") เหมือนกัน

back quote (`) สามารถทำ template string ได้

Template String

สามารถแทรกตัวแปรหรือ expression ลงใน string ได้โดยใช้ ${} อยู่ภายใน ``

const result = 2 * 5

console.log(`2 x 5 = ${result}`)
// ให้ผลลัพธ์เหมือนกับ
console.log('2 x 5 = ' + result)

const command = 'echo'

console.log(`${command} ${111 * 5}`) // echo 555

String Methods

const txt = 'Hello World'

นับความยาว string

txt.length

ดู method อื่น ๆ

Function

Function ปกติ

function add(a, b) {
    return a + b
}

console.log(add(2, 3))

Arrow Function

const add = (a, b) => {
    return a + b
}

console.log(add(2, 3))

หากไม่ใส่ {} จะ return คำสั่งนั้นให้เลย

const add = (a, b) => a + b

console.log(add(2, 3))

List

const numbers = [20, 40, 60]

const anythingJingleBell = ['abc', 20, 3.14, true]

เข้าถึงค่าใน list ตาม index

console.log(numbers[0])

เปลี่ยนค่าใน list ตาม index

numbers[0] = 'xyz'

ดูขนาดของ list

numbers.length

เพิ่ม element ใน list

numbers.push('Hello')

ลบ element ใน list

numbers.pop() // ลบตัวสุดท้าย

numbers.splice(2, 1) // ลบตั้งแต่ index ที่ 2 ไป 1 ตัว

วนดู element ใน list

for i

for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i])
}

for in

for (const i in numbers) {
    console.log(numbers[i])
}

for of

for (const n of numbers) {
    console.log(n)
}

forEach

numbers.forEach(n => console.log(n))

Method อื่น ๆ ของ List

map

numbers = [1, 2, 3, 4]
numbers.map(n => n * 10) // [10, 20, 30, 40]

map จะ return list ใหม่ ไม่ไปแก้ list เดิม

filter

numbers = [1, 3, 5, 7, 9]
numbers.filter(n => n != 5) // [1, 3, 7, 9]

filter จะ return list ใหม่ ไม่ไปแก้ list เดิม

List เป็น Mutable

const numbers = [1, 2, 3]
const otherNumbers = numbers

console.log('Before: ' + numbers) // Before: [1, 2, 3]

otherNumbers[1] = 9

console.log('After: ' + numbers) // After: [1, 9, 3]

Object

สามารถเก็บค่าหลาย ๆ ค่าไว้ใน object ได้ในรูปแบบ key-value pair

สร้าง object

const student = {
    id: '6010405360',
    name: 'Peach',
    university: 'KU'
}

เข้าถึงค่าใน object

console.log(student.name)
// หรือ
console.log(student['name'])

เพิ่มค่าใน object

student.dept = 'CS'
// หรือ
student['dept'] = 'CS'

แก้ไขค่าใน object

student.name = 'Peranut W.'
// หรือ
student['name'] = 'Peranut W.'

Object เป็น Mutable

const std2 = student

console.log('Before: ' + student.id) // Before: 6010405360

std2.id = '1234'

console.log('After: ' + student.id) // After: 1234