คอร์ส IT พื้นฐาน JavaScript 036_โครงสร้างไวยากรณ์

คำสั่ง

คำสั่ง JavaScript (Statements) คือชุดของคำสั่งที่ใช้ในการดำเนินการงานเฉพาะ

ตัวอย่าง:

1
// การประกาศตัวแปร
2
let userName = 'สมชาย';
3
let age = 18;
4

5
// คำสั่งเงื่อนไข
6
if (age >= 18) {
7
  console.log(userName + ' เป็นผู้ใหญ่');
8
} else {
9
  console.log(userName + ' เป็นผู้เยาว์');
10
}
11

12
// ลูป
13
for (let i = 0; i < 5; i++) {
14
  console.log('ผลลัพธ์ลูป ' + (i + 1));
15
}
16

17
// การกำหนดฟังก์ชัน
18
function Hello(name) {
19
  return 'สวัสดี, ' + name + '!';
20
}
21

22
// การเรียกใช้ฟังก์ชัน
23
let sayHello = Hello(userName);
24
console.log(sayHello);

เครื่องหมายอัฒภาค

ใน JavaScript เครื่องหมายอัฒภาค (;) เป็นสัญลักษณ์สิ้นสุดคำสั่ง ใช้เพื่อระบุจุดสิ้นสุดของคำสั่ง เครื่องหมายอัฒภาคเป็นตัวเลือกในกรณีส่วนใหญ่ เนื่องจากตัวแปลภาษา JavaScript จะพยายามแทรกเครื่องหมายอัฒภาคโดยอัตโนมัติ (Automatic Semicolon Insertion, ASI) เพื่อให้โค้ดสามารถแยกวิเคราะห์เป็นไวยากรณ์ที่ถูกต้อง อย่างไรก็ตาม มีบางสถานการณ์ที่ ASI อาจนำไปสู่พฤติกรรมที่ไม่ตรงตามที่คาดหวัง ดังนั้นจึงแนะนำให้เพิ่มเครื่องหมายอัฒภาคอย่างชัดเจนเมื่อเขียนโค้ด JavaScript

เมื่อปรากฏเครื่องหมายอัฒภาค ไม่ว่าจะเป็นบรรทัดเดียวหรือหลายบรรทัด คำสั่งนี้จะสิ้นสุด

ตัวอย่าง:

1
alert('Hello');alert('JavaScript!');

เมื่อมีการขึ้นบรรทัดใหม่ (line break) ในกรณีส่วนใหญ่สามารถละเว้นเครื่องหมายอัฒภาคได้

ตัวอย่าง:

1
alert('Hello')
2
alert('JavaScript!')

1
alert('Hello');
2
alert('JavaScript!')

1
alert('Hello')
2
alert('JavaScript!');

1
alert('Hello');alert('JavaScript!')

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

ตัวอย่าง:

1
alert
2
(
3
1+
4
   2
5
   +1);

ความคิดเห็น

ใน JavaScript ความคิดเห็นคือข้อความที่ใช้เพื่อเพิ่มคำอธิบายและหมายเหตุในโค้ด ข้อความเหล่านี้ไม่มีผลกระทบจริงต่อการดำเนินการของโปรแกรม ความคิดเห็นมีประโยชน์มากในการปรับปรุงความสามารถในการอ่านโค้ด การทำงานร่วมกัน และการดีบั๊ก

ความคิดเห็นบรรทัดเดียว

ใช้สัญลักษณ์ // เพื่อสร้างความคิดเห็นบรรทัดเดียว ข้อความทั้งหมดตั้งแต่ // จนถึงจุดสิ้นสุดของบรรทัดจะถือเป็นความคิดเห็น

ตัวอย่าง:

1
alert('Hello JavaScript!'); // ความคิดเห็นบรรทัดเดียวที่ตามหลังคำสั่ง
2
// ความคิดเห็นบรรทัดเดียวที่ครอบครองทั้งบรรทัด

ความคิดเห็นหลายบรรทัด

ใช้ /* เพื่อเริ่มต้นและ */ เพื่อสิ้นสุด สามารถสร้างความคิดเห็นหลายบรรทัดได้ ข้อความทั้งหมดระหว่างสัญลักษณ์ทั้งสองนี้จะถือเป็นความคิดเห็น

1
/*
2
  นี่คือความคิดเห็นหลายบรรทัด
3
  สามารถครอบคลุมหลายบรรทัด
4
*/
5
alert('Hello');
6
/*
7
ความคิดเห็นหลายบรรทัดยังสามารถใช้เพื่อแสดงความคิดเห็นบล็อกโค้ด โค้ดด้านล่างจะไม่ถูกดำเนินการ
8
alert('JavaScript!');
9
*/

กล่องโต้ตอบ

JavaScript มีกล่องโต้ตอบหลายประเภทสำหรับการโต้ตอบอย่างง่ายกับผู้ใช้ รวมถึง alert, confirm และ prompt กล่องโต้ตอบเหล่านี้ช่วยให้คุณแสดงข้อมูลให้ผู้ใช้ ถามคำถาม หรือรับอินพุต เมื่อกล่องโต้ตอบแสดงขึ้น โค้ดจะหยุดการทำงานจนกว่าผู้ใช้จะปิดกล่องโต้ตอบ

กล่องโต้ตอบ alert

กล่องโต้ตอบ alert ใช้เพื่อแสดงข้อความให้ผู้ใช้และรอให้ผู้ใช้คลิกปุ่ม “ตกลง”

ตัวอย่าง:

1
alert('Hello JavaScript ภายใน!');

ผลลัพธ์:

กล่องโต้ตอบ confirm

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

ตัวอย่าง:

1
    let yesNo = confirm("คุณกำลังเรียน JavaScript หรือไม่?");
2
    alert(yesNo);

ผลลัพธ์:

กล่องโต้ตอบ prompt

กล่องโต้ตอบ prompt ใช้เพื่อแสดงกล่องโต้ตอบที่มีช่องป้อนข้อมูลให้ผู้ใช้ มักใช้เพื่อรับอินพุตจากผู้ใช้

ตัวอย่าง:

1
    let name = prompt("กรุณากรอกชื่อของคุณ:", '');
2
    alert(name);

ผลลัพธ์:

เครื่องมือสำหรับนักพัฒนา

เครื่องมือสำหรับนักพัฒนา JavaScript คือชุดเครื่องมือในตัวของเบราว์เซอร์ที่ช่วยนักพัฒนาในการดีบั๊ก วิเคราะห์ และเพิ่มประสิทธิภาพโค้ด JavaScript เบราว์เซอร์ต่างๆ ให้เครื่องมือสำหรับนักพัฒนาที่แตกต่างกัน ต่อไปนี้คือเครื่องมือสำหรับนักพัฒนา JavaScript ของเบราว์เซอร์ทั่วไป:

เครื่องมือสำหรับนักพัฒนา Chrome

เปิดเบราว์เซอร์ Chrome กด Ctrl + Shift + I (Windows/Linux) หรือ Cmd + Option + I (Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนา Chrome

ใช้เมาส์ในเบราว์เซอร์ คลิกขวา เลือก “ตรวจสอบ” จากเมนูป๊อปอัพเพื่อเปิดเครื่องมือสำหรับนักพัฒนา Chrome

ดังภาพ:

คลิกไอคอน “การตั้งค่าและอื่นๆ” ของเบราว์เซอร์ เลือก “เครื่องมือเพิ่มเติม”—“เครื่องมือสำหรับนักพัฒนา” เพื่อเปิดเครื่องมือสำหรับนักพัฒนา Chrome

ดังภาพ:

ฟังก์ชันหลักและแผงต่างๆ:

• Console(คอนโซล): ใช้เพื่อดำเนินการและดีบั๊กโค้ด JavaScript ดูผลลัพธ์ ข้อผิดพลาด และข้อมูลคำเตือน
• Sources(แหล่งที่มา): ให้บริการตัวแก้ไขโค้ด การตั้งค่าเบรกพอยต์ การเฝ้าดูนิพจน์ และฟังก์ชันอื่นๆ สำหรับดีบั๊กซอร์สโค้ด JavaScript
• Network(เครือข่าย): ดูคำขอเครือข่ายที่เริ่มต้นโดยหน้า ตรวจสอบรายละเอียดของคำขอและการตอบสนอง
• Performance(ประสิทธิภาพ): วิเคราะห์ประสิทธิภาพของหน้า ดูเวลาในการโหลด การใช้งาน CPU เป็นต้น
• Application(แอปพลิเคชัน): ดูและดีบั๊กที่เก็บข้อมูลในเครื่อง Session Storage คุกกี้ เป็นต้น
• Elements(องค์ประกอบ): ดูและแก้ไขทรี DOM แก้ไขสไตล์ CSS

คีย์เวิร์ด

คีย์เวิร์ด JavaScript คือคำสงวนที่มีวัตถุประสงค์พิเศษในภาษาโปรแกรม JavaScript ใช้เพื่อระบุตัวแปร ฟังก์ชัน คำสั่ง เป็นต้น คีย์เวิร์ดเหล่านี้ไม่สามารถใช้เป็นตัวระบุ (เช่น ชื่อตัวแปร ชื่อฟังก์ชัน เป็นต้น) ได้

ต่อไปนี้คือคีย์เวิร์ด JavaScript บางส่วน:

1. คีย์เวิร์ดพื้นฐาน:

• break
• case
• catch
• continue
• debugger
• default
• delete
• do
• else
• false
• finally
• for
• function
• if
• in
• instanceof
• new
• null
• return
• switch
• this
• throw
• true
• try
• typeof
• undefined
• var
• void
• while
• with

2. คีย์เวิร์ดสงวน (มีวัตถุประสงค์พิเศษในโหมดเข้มงวด):

• implements
• interface
• package
• private
• protected
• public
• static
• yield

3. คีย์เวิร์ดที่นำมาใช้ใน ECMAScript 6 (ES6):

• class
• const
• export
• extends
• import
• super