ป้ายกำกับ: JavaScript

JavaScript Operators ตัวดำเนินการคือกลุ่มของเครื่องหมายหรือสัญลักษณ์ที่ใช้ทำงานเปรียบเทียบค่าหรือคำนวนค่า ในภาษา JavaScript นั้นสนับสนุนตัวดำเนินการประเภทต่างๆ สำหรับการเขียนโปรแกรม เช่น ตัวดำเนินการ + เป็นตัวดำเนินการทางคณิตศาสตร์ที่ใช้สำหรับการบวกตัวเลขเข้าด้วยกัน หรือตัวดำเนินการ > เป็นตัวดำเนินการเพื่อให้เปรียบเทียบค่าสองค่า เป็นต้น

let x = 2;         // กำหนดค่า 2 ให้ x
let y = 3;         // กำหนดค่า 3 ให้ y
let z = x + y;     // กำหนดค่า 5 ให้ z (5 + 2)

การกำหนดค่าให้ใช้เครื่องหมาย = (= Assignment Operators)

let x = 1;

JavaScript Arithmetic Operators

ตัวดำเนินการเลขคณิตใช้เพื่อคำนวณเลขต่างๆ

ตัวอย่าง

let x = 5;
let y = 3;
let z = x + y;

// Result z = 8

JavaScript Assignment Operators

ตัวดำเนินการมอบหมายการกำหนดค่าให้กับตัวแปร

ตัวอย่าง

var x = 7;
x += 3;

// Result x = 10
// เพราะ x มีค่าเท่ากับ 7 และเราได้เพิ่มค่าใหม่อีกตัวคือ 3
// 3 ยังไม่มีชื่อตัวแปร แต่สามารถเอามาบวกได้
// 7 + 3 = 10
// x เลยมีค่าเท่ากับ 10

JavaScript String Operators

ตัวดำเนินการ + สามารถใช้เพื่อเพิ่ม (ต่อกัน) ของข้อความ(สตริง)ได้

let text1 = "Theethawat";
let text2 = "Chetjeerasioon";
let text3 = text1 + " " + text2;

// Result Theethawat Chetjeerasioon

ตัวดำเนินการกำหนด += สามารถใช้เพื่อเพิ่มสตริง (ต่อกัน) ได้

let text1 = "สบายดีไหม ";
text1 += "โครตชิวเลยว่ะ";

// Result สบายดีไหม โครตชิวเลยว่ะ

เมื่อใช้ข้อความ(สตริง) กับตัวดำเนินการ + จะเป็นการต่อข้อความเสมอ

JavaScript Comparison Operators

JavaScript Bitwise Operators

เป็นตัวดำเนินการที่ทำงานในระดับบิต และใช้ตัวเลข 32 บิต

ค่าที่ถูกดำเนินการที่เป็นตัวเลขใดๆ ในการดำเนินการจะถูกแปลงเป็นตัวเลข 32 บิต ผลลัพธ์จะถูกแปลงกลับเป็นหมายเลข JavaScript
Bitwise

JavaScript Data Types ตัวแปรใน JavaScript สามารถเก็บประเภทข้อมูลที่แตกต่างกันได้เช่น ตัวเลข สตริง ออบเจ็กต์ อาร์เรย์และอื่นๆ

let num = 16;                               // Number
let lastName = "Chetjeerasioon";                      // String
let x = {firstName:"Theethawat", lastName:"Chetjeerasioon"};    // Object

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

JavaScript Data Types เป็นแบบไดนามิก

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

let x;           // x ไม่ได้กำหนดค่า
x = 5;           // x มีค่าเป็น 5 ข้อมูลชนิดตัวเลข
x = "nkaub";     // x มีค่าเป็น nkaub ข้อมูลชนิดสตริง

JavaScript สตริง

สตริง (หรือสตริงข้อความ) คือชุดอักขระ เช่น “Theethawat Chetjeerasioon”
สตริงถูกเขียนด้วยเครื่องหมายคำพูด เราสามารถใช้เครื่องหมายคำพูดเดี่ยว(Single quote)หรือคู่(Double quotes)ได้ ในการกำหนดค่าข้อมูลชนิดสตริง

let name = "nkaub";   // ใช้เครื่องหมายคำพูดเดี่ยว(Single quote)
let lastName = 'Chetjeerasioon';   // ใช้เครื่องหมายคำพูดคู่(Double quotes)

เราสามารถใช้เครื่องหมายคำพูดภายในสตริงได้

let name = "nkaub";            // Single quote ใน double quotes
let name2 = " ผมชื่อ 'nkaub'";   // Single quotes ใน double quotes
let answer3 = 'ผมชื่อ "nkaub"';  // Double quotes ใน single quotes

JavaScript ตัวเลข

ตัวเลขสามารถเป็นจุดทศนิยมหรือไม่ก็ได้

let x1 = 55.00;     // มีจุดทศนิยม
let x2 = 55;        // ไม่มีจุดทศนิยม

JavaScript ค่าจริง เท็จ

ค่าจริง หรือ ค่าเท็จ

let x = 55;
let y = 55;
let z = 66;
(x == y)       // Returns true
(x == z)       // Returns false

JavaScript Arrays

JavaScript อาร์เรย์ เขียนด้วย […]
ค่าในอาร์เรย์ถูกคั่นด้วยเครื่องหมายจุลภาค(,)

const cars = ["Toyota", "Isuzu", "Ford"];

JavaScript Objects

JavaScript Objects เขียนด้วยวงเล็บปีกกา {}

คุณสมบัติในอ็อบเจ็กต์เขียนเป็นคู่ name:value คั่นด้วยเครื่องหมายจุลภาค(,)

const person = {firstName:"Theethawat", lastName:"Chetjeerasioon", age:30, eyeColor:"red"};

The typeof Operator

ใช้ typeof ตรวจสอบชนิดของตัวแปร

typeof ""           // Returns "string"
typeof "nkaub"      // Returns "string"
typeof "Alsoon"     // Returns "string"

typeof 0            // Returns "number"
typeof 123          // Returns "number"
typeof 1.23         // Returns "number"
typeof (3)          // Returns "number"
typeof (1 + 2)      // Returns "number"

Undefined

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

car = undefined;    // ค่า คือ  undefined, type คือ undefined

Empty Values

ค่าว่างไม่มีส่วนเกี่ยวข้องกับค่าที่ไม่ได้กำหนดนะ

let name= "";    // ค่า คือ "ว่าง", typeof เป็น "string"

JavaScript Const เป็นการกำหนดค่าคงที่

ตัวแปรที่ประกาศด้วยคีย์เวิร์ด const ไม่สามารถประกาศซ้ำได้

ตัวแปรที่ประกาศด้วยคีย์เวิร์ด const ต้องประกาศก่อนใช้งานเสมอ

ตัวแปรที่ประกาศด้วยคีย์เวิร์ด const เป็น Block Scope

JavaScript Const การใช้งาน

การใช้งานคีย์เวิร์ด const ต้องประกาศตัวแปรพร้อมกับกำหนดค่าให้เสมอ

const vat = 7;
vat = 3;      // Error
vat = vat + 5;   // Error

ตามกฎทั่วไปควรประกาศตัวแปรด้วย const เสมอ เว้นเสียแต่เราจะรู้ว่าค่าของ const จะเปลี่ยนไป หลังจากที่เราได้ประกาศตัวแปรไปแล้ว

ควรใช้ const เพื่อ

สร้าง Array ใหม่

สร้าง Object ใหม่

สร้าง Function ใหม่

สร้าง RegExp ใหม่

ค่าคงที่ของ Objects และ Arrays

คีย์เวิร์ด const ไม่ได้กำหนดค่าคงที่ แต่เป็นการกำหนดการอ้างอิงค่าคงที่

ด้วยเหตุนี้เราจึงไม่สามารถ

กำหนด Array คงที่ใหม่

กำหนด Objects คงที่ใหม่

แต่เราสามารถ

เปลี่ยนค่าคงที่ใน Array ได้

เปลี่ยนคุณสมบัติคงที่ของ Objects ได้

ค่าคงที่ใน Array

เราสามารถเปลี่ยนค่าอิลิเมนต์คงที่ใน Array ได้

// สร้าง Array คงที่
const cars = ["Toyota", "Isuzu", "NAVARA"];

// เปลี่ยนค่าอิลิเมนต์ใน Array
cars[0] = "Ford";

// เพิ่มอิลิเมนต์
cars.push("Chevrolet");

แต่เราไม่สามารถกำหนด Array ใหม่ ได้

// สร้าง Array คงที่
const cars = ["Toyota", "Isuzu", "NAVARA"];

// เพิ่มค่าของอิลิเมนต์
cars = ["Chevrolet", "Ford", "Honda"];    // ERROR

ค่าคงที่ใน Objects

เราสามารถเปลี่ยนค่าคงที่ใน Objects

// สร้าง Objects คงที่
const car = {type:"Hilux Vigo", model:"Champ", color:"white"};

// เปลี่ยนคุณสมบัติ
car.color = "black";

// เพิ่มคุณสมบัติ
car.owner = "Theethawat";

แต่เราไม่สามารถกำหนด Objects ใหม่ ได้

// สร้าง Objects คงที่
const car = {type:"Hilux Vigo", model:"Champ", color:"white"};

car = {type:"Isuzu", model:"D-Max", color:"red"};    // ERROR

Block Scope

การประกาศตัวแปรด้วยคีย์เวิร์ด const ถ้าพูดถึง Block Scope นั้นใช้เหมือนคีย์เวิร์ด let เลยครับ

const x = 55;
// x เท่ากับ 55

{
const x = 77;
// x เท่ากับ 77
}

// ถ้าเรียกใช้ x ตรงนี้ x จะมีค่าเท่ากับ 55

การประกาศซ้ำ

ใช้ var ประกาศตัวแปรกี่ครั้งที่ไหนก็ได้

var x = 1;     // ทำได้
var x = 2;     // ทำได้
x = 3;         // ทำได้

ไม่สามารถประกาศชื่อซ้ำ โดยใช้คีย์เวิร์ด let, const ใหม่

var x = 2;     // ทำได้
const x = 2;   // ทำไม่ได้

{
let x = 2;     // ทำได้
const x = 2;   // ทำไม่ได้
}

{
const x = 2;   // ทำได้
const x = 2;   // ทำไม่ได้
}

ไม่สามารถกำหนดตัวแปร const ใหม่ในขอบเขตเดียวกัน

const x = 2;     // ทำได้
x = 2;           // ทำไม่ได้
var x = 2;       // ทำไม่ได้
let x = 2;       // ทำไม่ได้
const x = 2;     // ทำไม่ได้

{
const x = 2;   // ทำได้
x = 2;         // ทำไม่ได้
var x = 2;     // ทำไม่ได้
let x = 2;     // ทำไม่ได้
const x = 2;   // ทำไม่ได้
}

สามารถประกาศตัวแปรใหม่ด้วย const ในขอบเขตอื่นหรือในบล็อกอื่นได้

const x = 2;       // ทำได้

{
  const x = 3;   // ทำได้
}

{
  const x = 4;   // ทำได้
}

JavaScript Let ตัวแปรที่กำหนดด้วยคีย์เวิร์ด let ไม่สามารถประกาศชื่อซ้ำได้

ตัวแปรที่ประกาศด้วยคีย์เวิร์ด let ไม่สามารถประกาศชื่อซ้ำในบล็อกนั้นๆได้

ตัวแปรที่ประกาศด้วยคีย์เวิร์ด let ต้องประกาศก่อนใช้งานเสมอ

ตัวแปรที่ประกาศด้วยคีย์เวิร์ด let เป็น Block Scope

let x = "Theethawat Chetjeerasioon";

let x = 0;

// Syntax Error นะ  เพราะตัวแปร x ได้ถูกประกาศไปแล้ว

แต่ถ้าต้องการกำหนดค่าให้กับตัวแปรเดิมให้ใช้คีย์เวิร์ด var ในการประกาศตัวแปร

var x = "Theethawat Chetjeerasioon";

var x = 0;

JavaScript Let ใน Block Scope

ตั้งแต่ ES6 (2015) JavaScript มีเพียง Global Scope และ Function Scope

คีย์เวิร์ด let และ const ไม่สามารถใช้นอกบล็อกได้

{
  let x = 55;
}
// x ไม่สามารถใช้นอกบล็อกได้ เพราะเราประกาศ x ด้วยคีย์เวิร์ด let

แต่ถ้าต้องการใช้ x นอกบล็อดด้วย ก็ให้ประกาศตัวแปร x ด้วยคีย์เวิร์ด var แทน

{
  var x = 55;
}

การประกาศตัวแปรใหม่

การประกาศตัวแปรใหม่โดยใช้คีย์เวิร์ด var อาจสร้างปัญหาให้กับเราได้ ต้องดูดีๆ ก่อนจะประกาศตัวแปรด้วยคีย์เวิร์ด var

var x = 55;
// x มีค่าเท่ากับ 55

{
var x = 77;
// x มีค่าเท่ากับ 77
}

// ถ้าเราเรียกใช้ตัวแปร x ตรงนี้ x จะมีค่าเท่ากับ 77 นะ เพราะเราได้กำหนดค่าใหม่ให้กับตัวแปร x แล้ว

เราสามารถแก้ปัญหานี้ด้วยการใช้คีย์เวิร์ด let

var x = 55;
// x มีค่าเท่ากับ 55

{
let x = 77;
// x มีค่าเท่ากับ 77
}

// ถ้าเราเรียกใช้ตัวแปร x ตรงนี้ x จะมีค่าเท่ากับ 55

การประกาศซ้ำ

สามารถประกาศซ้ำที่ไหนก็ได้ด้วยคีย์เวิร์ด var

var x = 55;
// x เท่ากับ 55

var x = 77;
// x เท่ากับ 77

คีย์เวิร์ด let ไม่สามารถประกาศตัวแปรชื่อซ้ำในบล็อกเดียวกันได้

var x = 55;    // ทำได้
let x = 77;    // ทำไม่ได้

{
let x = 55;    // ทำได้
let x = 77;     // ทำไม่ได้
}

{
let x = 55;    // ทำได้
var x = 77;    // ทำไม่ได้
}

การประกาศตัวแปรใหม่ด้วยคีย์เวิร์ด let ในบล็อกอื่นๆ

let x = 55;    // ทำได้

{
let x = 77;    // ทำได้
}

{
let x = 99;    // ทำได้
}

JavaScript Variables การประกาศตัวแปร ให้ใช้ Keyword var, let, const

ตัวแปรมีไว้สำหรับเก็บข้อมูลและเก็บค่า(Value) แต่ก่อนเราจะใช้ตัวแปรได้นั้น เราต้องประกาศตัวแปรขึ้นมาก่อนเสมอ

Syntax

var name = value;

ตัวอย่าง

var name = "nkaub";
let lastName = "Chetjeerasioon";

const vat = 7;

ชนิดของตัวแปร(Datatypes)

ข้อมูลที่ตัวแปรสามารถเก็บได้มี Numbers, Strings, Booleans, Objects, Arrays และ Functions

JavaScript Variables กับการใช้ตัวแปรที่ยังไม่ได้กำหนดค่า

ในกรณีที่เราเรียกใช้ตัวแปรที่ยังไม่ได้กำหนดค่า โปรแกรมจะไม่ error นะ แต่จะขึ้น undefined แทน

ตัวอย่าง

<script>
	var name;
			
	document.getElementById("demo").innerHTML = name;
</script>

กฏการตั้งชื่อในภาษา JavaScript

• ให้เริ่มด้วยตัวอักษรหรือเครื่องหมาย _ (Underscore) หรือเครื่องหมาย $ (Dollar Sign)
• ตัวถัดไปสามารถเป็นตัวเลขได้(สรุปคือตัวเลขห้ามใช้ขึ้นต้น)
• ห้ามมีช่องว่างเด็ดขาด
• เป็น Case-sensitive คือตัวพิมพ์เล็กกับพิมพ์ใหญ่ ถือว่าคนละชื่อ เช่น Name กับ name
• ห้ามใช้คำสงวนมาตั้งชื่อ สามารถดูคำสงวนได้ ที่นี่

กฏการตั้งชื่อนี้ยังใช้ได้กับตัวแปร Functions และอื่นๆ

การประกาศตัวแปรหลายตัวพร้อมกัน

เราสามารถประกาศตัวแปรหลายๆตัวได้พร้อมกัน โดยคั่นด้วยเครื่องหมาย , (คอมม่า)

ตัวอย่าง

var name = "Theethawat", lastName = "Chetjeerasioon", age = 30;
// หรือคนละบรรทัด
var name = "Theethawat",
lastName = "Chetjeerasioon",
age = 30;