โครงสร้างรหัส

สิ่งแรกที่เราจะศึกษาคือองค์ประกอบพื้นฐานของโค้ด

งบ

คำสั่งคือโครงสร้างไวยากรณ์และคำสั่งที่ดำเนินการ

เราได้เห็นข้อความ alert('Hello, world!') ซึ่งแสดงข้อความว่า "Hello, world!"

เราสามารถมีคำสั่งในโค้ดของเราได้มากเท่าที่ต้องการ คำสั่งสามารถคั่นด้วยเครื่องหมายอัฒภาค

ตัวอย่างเช่น ที่นี่เราแบ่ง "Hello World" ออกเป็นสองการแจ้งเตือน:

 alert('สวัสดี'); alert('โลก');

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

 alert('สวัสดี');
alert('โลก');

อัฒภาค

อัฒภาคอาจถูกละเว้นในกรณีส่วนใหญ่เมื่อมีการขึ้นบรรทัดใหม่

สิ่งนี้ก็จะได้ผลเช่นกัน:

 alert('สวัสดี')
alert('โลก')

ในที่นี้ JavaScript ตีความการขึ้นบรรทัดใหม่เป็นเครื่องหมายอัฒภาค "โดยนัย" สิ่งนี้เรียกว่าการแทรกอัฒภาคอัตโนมัติ

ในกรณีส่วนใหญ่ การขึ้นบรรทัดใหม่หมายถึงเครื่องหมายอัฒภาค แต่ “โดยส่วนใหญ่” ไม่ได้หมายความว่า “ตลอดไป”!

มีหลายกรณีที่การขึ้นบรรทัดใหม่ไม่ได้หมายถึงอัฒภาค ตัวอย่างเช่น:

 การแจ้งเตือน (3 +
1
+2);

โค้ดแสดงผลเป็น 6 เนื่องจาก JavaScript ไม่ได้แทรกเครื่องหมายอัฒภาคที่นี่ โดยสัญชาตญาณเห็นได้ชัดว่าหากบรรทัดลงท้ายด้วยเครื่องหมายบวก "+" แสดงว่ามันเป็น “นิพจน์ที่ไม่สมบูรณ์” ดังนั้นเครื่องหมายอัฒภาคจะไม่ถูกต้อง และในกรณีนี้ มันได้ผลตามที่ตั้งใจไว้

แต่มีบางสถานการณ์ที่ JavaScript "ล้มเหลว" ที่จะถือว่าเครื่องหมายอัฒภาคเป็นสิ่งที่จำเป็นจริงๆ

ข้อผิดพลาดที่เกิดขึ้นในกรณีเช่นนี้ค่อนข้างค้นหาและแก้ไขได้ยาก

ตัวอย่างของข้อผิดพลาด

หากคุณอยากเห็นตัวอย่างที่ชัดเจนของข้อผิดพลาดดังกล่าว โปรดดูโค้ดนี้:

 alert("สวัสดี");

[1, 2].forEach(แจ้งเตือน);

ไม่จำเป็นต้องคิดถึงความหมายของวงเล็บ [] และ forEach เลย เราจะศึกษาพวกเขาในภายหลัง สำหรับตอนนี้ เพียงจำผลลัพธ์ของการรันโค้ด: มันจะแสดง Hello จากนั้น 1 จากนั้น 2

ตอนนี้เรามาลบเครื่องหมายอัฒภาคหลัง alert :

 alert("สวัสดี")

[1, 2].forEach(แจ้งเตือน);

ความแตกต่างเมื่อเปรียบเทียบกับโค้ดด้านบนคืออักขระเพียงตัวเดียว: เครื่องหมายอัฒภาคที่ท้ายบรรทัดแรกหายไป

หากเรารันโค้ดนี้ เฉพาะ Hello แรกเท่านั้นที่แสดง (และมีข้อผิดพลาด คุณอาจต้องเปิดคอนโซลเพื่อดู) ไม่มีตัวเลขอีกต่อไป

นั่นเป็นเพราะว่า JavaScript ไม่ได้ใช้เครื่องหมายอัฒภาคก่อนวงเล็บเหลี่ยม [...] ดังนั้นโค้ดในตัวอย่างสุดท้ายจะถือเป็นคำสั่งเดียว

เครื่องยนต์มองเห็นดังนี้:

 alert("สวัสดี")[1, 2].forEach(แจ้งเตือน);

ดูแปลกใช่มั้ย? การรวมในกรณีนี้เป็นสิ่งที่ผิด เราจำเป็นต้องใส่เครื่องหมายอัฒภาคหลัง alert เพื่อให้โค้ดทำงานได้อย่างถูกต้อง

สิ่งนี้สามารถเกิดขึ้นได้ในสถานการณ์อื่นเช่นกัน

เราขอแนะนำให้ใส่เครื่องหมายอัฒภาคระหว่างคำสั่งต่างๆ แม้ว่าจะคั่นด้วยการขึ้นบรรทัดใหม่ก็ตาม กฎนี้ได้รับการยอมรับอย่างกว้างขวางจากชุมชน โปรดทราบอีกครั้ง โดยส่วนใหญ่แล้ว คุณสามารถ เว้นเครื่องหมายอัฒภาคได้ แต่จะปลอดภัยกว่า – โดยเฉพาะสำหรับมือใหม่ – ที่จะใช้มัน

ความคิดเห็น

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

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

ความคิดเห็นบรรทัดเดียวเริ่มต้นด้วยอักขระทับสองตัว //

บรรทัดที่เหลือคือความคิดเห็น อาจครอบครองเต็มบรรทัดของตัวเองหรือปฏิบัติตามคำสั่ง

ชอบที่นี่:

 // ความคิดเห็นนี้ตรงบริเวณบรรทัดของตัวเอง
alert('สวัสดี');

alert('โลก'); // ความคิดเห็นนี้เป็นไปตามคำสั่ง

ความคิดเห็นหลายบรรทัดเริ่มต้นด้วยเครื่องหมายทับและเครื่องหมายดอกจัน /* และลงท้ายด้วยเครื่องหมายดอกจันและเครื่องหมายทับ */

แบบนี้:

 /* ตัวอย่างที่มีสองข้อความ
นี่คือความคิดเห็นหลายบรรทัด
-
alert('สวัสดี');
alert('โลก');

เนื้อหาของความคิดเห็นจะถูกละเว้น ดังนั้นหากเราใส่โค้ดไว้ภายใน /* … */ มันก็จะไม่ทำงาน

บางครั้งการปิดการใช้งานโค้ดบางส่วนชั่วคราวอาจเป็นประโยชน์:

 /* แสดงความคิดเห็นเกี่ยวกับโค้ด
alert('สวัสดี');
-
alert('โลก');

ใช้ปุ่มลัด!

ในตัวแก้ไขส่วนใหญ่ บรรทัดของโค้ดสามารถใส่ความคิดเห็นได้โดยการกดปุ่ม Ctrl + / hotkey สำหรับความคิดเห็นบรรทัดเดียว และบางอย่างเช่น Ctrl + Shift + / – สำหรับความคิดเห็นแบบหลายบรรทัด (เลือกโค้ดบางส่วนแล้วกดปุ่มลัด) สำหรับ Mac ให้ลองใช้ Cmd แทน Ctrl และ Option แทน Shift

ไม่รองรับความคิดเห็นที่ซ้อนกัน!

/*...*/ ภายในอื่นอาจไม่มี /*...*/

รหัสดังกล่าวจะตายโดยมีข้อผิดพลาด:

 -
  /* ความคิดเห็นซ้อน ?!? -
-
alert( 'โลก' );

โปรดอย่าลังเลที่จะแสดงความคิดเห็นรหัสของคุณ

ความคิดเห็นเพิ่มรอยโค้ดโดยรวม แต่นั่นไม่ใช่ปัญหาเลย มีเครื่องมือมากมายที่ย่อขนาดโค้ดก่อนที่จะเผยแพร่ไปยังเซิร์ฟเวอร์ที่ใช้งานจริง พวกเขาลบความคิดเห็น เพื่อไม่ให้ปรากฏในสคริปต์การทำงาน ดังนั้นการแสดงความคิดเห็นจึงไม่ส่งผลเสียต่อการผลิตแต่อย่างใด

ต่อมาในบทช่วยสอนจะมีบทคุณภาพของโค้ดที่อธิบายวิธีเขียนความคิดเห็นที่ดีขึ้นด้วย