JavaScript พื้นฐาน (ES6)

JavaScript ไม่ใช่ Java — คนละภาษากัน สร้างปี 1994 โดย Brendan Eich ที่ Netscape เดิมชื่อ Mocha → LiveScript → JavaScript และปี 1997 ECMA International ทำให้เป็นมาตรฐานชื่อ ECMAScript

JavaScript ทำอะไรได้บ้าง

วิธีใส่ JS ในหน้าเว็บ

<!-- 1. เขียนในไฟล์ HTML เลย -->
<script type="text/javascript">
    // code
</script>

<!-- 2. เรียกจากไฟล์อื่น -->
<script src="script.js"></script>

<!-- protocol-relative path -->
<script src="//example.com/script.js"></script>

alert / confirm / document.write / console.log

alert("ข้อความ");                 // แจ้งเตือนผู้ใช้
let a = confirm("ข้อความ");       // true เมื่อกด OK, false เมื่อกด Cancel
document.write("ข้อความ");        // เขียนลงหน้า HTML
console.log("ข้อความ หรือ ตัวแปร"); // พิมพ์ที่ console — ใช้ debug ไม่แสดงบนหน้าเว็บ

// comment แบบบรรทัดเดียว
/* comment
   หลายบรรทัด */

ตัวแปรและกฎการตั้งชื่อ

• ขึ้นต้นด้วยตัวอักษรภาษาอังกฤษ แล้วตามด้วยตัวอักษรหรือตัวเลข
• ขึ้นต้นด้วย $ และ _ ได้
• ห้ามขึ้นต้นด้วยตัวเลขหรือสัญลักษณ์พิเศษอื่น
• เป็น case sensitive — name กับ Name คนละตัวกัน
• ห้ามซ้ำกับคำสงวน เช่น const, var, let, function
• JS เป็น dynamic type — ไม่ต้องประกาศชนิดตัวแปร แต่ตัวแปรมีชนิดอยู่

ชนิดข้อมูล

console.log(typeof 42);                 // number
console.log(typeof 'blubber');          // string
console.log(typeof true);               // boolean
console.log(typeof undeclaredVariable); // undefined

var a;
console.log(a);        // undefined — ประกาศแล้วแต่ยังไม่ให้ค่า

var b = null;
console.log(b);        // null — ตั้งใจบอกว่าไม่มีค่า
console.log(b.a);      // Error! อ่าน property ของ null ไม่ได้

แปลงชนิดข้อมูล

// string → number
console.log(parseInt("10"));        // 10
console.log(parseFloat('   10  ')); // 10 — มีช่องว่างได้

// number → string
let A = 10;
console.log(A + "");                // "10"
console.log(A.toString());          // "10"
// console.log(10.toString());     // Error! เขียนแบบนี้ไม่ได้

var / let / const & Block Scope

Hoisting

console.log(x)        // undefined  ← var ถูกยกประกาศขึ้นไปข้างบน
console.log(print())  // print      ← function ก็ถูก hoist
var x = 3
function print() { console.log('print') }

// แต่ถ้าใช้ let หรือ const
console.log(x)        // ReferenceError: x is not defined
let x = 3

Operator

// Arithmetic
+  -  *  /
++  → บวก 1        --  → ลบ 1
**  → ยกกำลัง      %   → หาเศษ (modulo)

// Assignment
x = y        x += y  → x = x + y
x -= y       x *= y       x /= y

ลำดับความสำคัญ: ( … ) → ** → * / % → + -

== vs === — ข้อสอบถามแน่

var a = 10;
var b = '10';

a == b    // true  — equality เทียบเฉพาะค่า (แปลงชนิดให้ก่อน)
a === b   // false — identically เทียบทั้งค่าและชนิด

Boolean / truthy-falsy

Boolean("hello")   // true
Boolean(5)         // true
Boolean(9.99)      // true

Boolean("")        // false
Boolean(0)         // false
Boolean(-0)        // false
Boolean(null)      // false
Boolean(undefined) // false

เงื่อนไข

if (เงื่อนไข) {
    // ทำเมื่อจริง
} else if (เงื่อนไข2) {
    // ทำเมื่อเงื่อนไข 2 จริง
} else {
    // ทำเมื่อเท็จ
}

switch (month) {
    case 1: console.log("มกราคม"); break;
    case 2: console.log("กุมภาพันธ์"); break;
    default: console.log("ไม่พบเดือน");
}

Loop 4 แบบ

while (เงื่อนไข) { }                       // เช็คก่อนทำ

do { } while (เงื่อนไข);                   // ทำ 1 รอบก่อนแล้วค่อยเช็ค

for (let i = 1; i <= 100; i++) { }         // ค่าเริ่มต้น; เงื่อนไข; เปลี่ยนค่า

for / forEach / for-in / for-of

let myArray = [1, 2, 3];

// for ปกติ — ใช้ index
for (let i = 0; i < myArray.length; i++) { console.log(myArray[i]); }

// forEach — วนสมาชิกของ array
myArray.forEach(element => { console.log(element); });

// for-in — วน key ของ object
let dog = { name: "Yoyo", color: "black", age: 2 };
for (const key in dog) {
    console.log(key + " : " + dog[key]);
}

// for-of — วนค่าของสิ่งที่มี index เช่น array, set, string
for (const iterator of "hello") { console.log(iterator); }  // h e l l o

function & arrow function

// JS รุ่นเก่า
function f1(param1) {
    return "p1: " + param1;
}

// Arrow function — กระชับกว่า
let f1 = (param1) => "p1: " + param1;

// ถ้าโค้ดยาว ใส่ปีกกาและ return
let hello = () => {
    return "Hello World!";
};

// default parameter
function myFunction(x, y = 2) { }

String & template literal

'สวัสดี' + 'ชาวโลก'                // ต่อสตริงด้วย +

let text = `The quick brown fox
jumps over the lazy dog`;         // back tick = ขึ้นบรรทัดใหม่ได้

let dog = "dog";
let text2 = `jumps over the lazy ${dog}`;  // interpolation — ใช้ได้เฉพาะ back tick

Spread & Rest

// Spread (...) — กระจายสมาชิกของ array
const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, numbersOne];
console.log(numbersTwo);     // [4, 5, [1,2,3]]  ← ซ้อนเป็น array ใน array

const numbersThree = [4, 5, ...numbersOne];
console.log(numbersThree);   // [4, 5, 1, 2, 3]  ← กระจายออกมา

// Rest (...) — รับ parameter ไม่จำกัดจำนวน
function fun(...input) {
    let sum = 0;
    for (let i of input) { sum += i; }
    return sum;
}
console.log(fun(1, 2));          // 3
console.log(fun(1, 2, 3, 4, 5)); // 15

JSON

{
    "key1": "value1",
    "key2": [ value, object ]
}

JSON.stringify({"a":"1"});                       // object → string
const s = '{"result":true, "count":42}';
JSON.parse(s);                                   // string → object

เข้าถึงข้อมูลใน object ได้ 2 แบบ:

let user = { name: 'A' };
user.name        // A
user["name"]     // A

Timer & Math

setTimeout(sayHello, 3000);         // เรียก 1 ครั้งหลังผ่านไป 3 วินาที
setInterval(sayHello, 2000);        // เรียกซ้ำทุก 2 วินาที

let id = setTimeout(sayHello, 3000);
clearTimeout(id);                   // ยกเลิกก่อนถึงเวลา

let iid = setInterval(sayHello, 2000);
setTimeout(() => clearInterval(iid), 10000);   // หยุดหลัง 10 วินาที

Math.random();                      // ทศนิยม 0 <= x < 1
Math.floor(Math.random() * 10);     // จำนวนเต็ม 0-9
Math.floor(Math.random() * 11);     // จำนวนเต็ม 0-10