หากคุณต้องการเรียนรู้วิธีเขียน JavaScript คุณมาถูกที่แล้ว
ภาษาการเขียนโปรแกรมทุกภาษามีกฎเกณฑ์ของตัวเอง เช่นเดียวกับภาษาอังกฤษ คิดเกี่ยวกับมัน เมื่อคุณอยู่ในโรงเรียนประถม คุณเรียนรู้กฎของไวยากรณ์เพื่อจัดโครงสร้างประโยค
เช่นเดียวกับภาษาอังกฤษ ภาษาโปรแกรมจะต้องปฏิบัติตามกฎเพื่อให้แน่ใจว่าทุกคนสามารถเข้าใจสิ่งที่พูดได้ ลองนึกภาพถ้าเราทุกคนสามารถตั้งกฎเกณฑ์ของตนเองได้เมื่อใช้ภาษาอังกฤษ คงไม่มีใครสามารถสื่อสารได้ ในทำนองเดียวกัน ภาษาโปรแกรมก็เข้มงวดเกี่ยวกับกฎ ดังนั้นโค้ดที่คุณเขียนจึงสามารถดำเนินการได้
ในคู่มือนี้ เราจะพูดถึงไวยากรณ์ JavaScript ไวยากรณ์หมายถึงชุดของกฎที่กำหนดวิธีการเขียนโค้ดใน JavaScript
เหตุใดไวยากรณ์จึงสำคัญ
ใน JavaScript มีกฎไวยากรณ์บางอย่างที่คุณต้องปฏิบัติตาม ตัวอย่างเช่น ถ้าคุณไม่ปิดวงเล็บหลังจากคุณเปิดแล้ว ข้อผิดพลาดจะถูกส่งคืน คอมพิวเตอร์ไม่สามารถเรียกใช้โปรแกรมของคุณต่อไปได้เนื่องจากไม่เข้าใจสิ่งที่คุณบอกให้ทำ
สิ่งนี้ถือเป็นข้อแตกต่างที่สำคัญระหว่างคอมพิวเตอร์และมนุษย์ ในขณะที่มนุษย์สามารถระบุข้อผิดพลาดเป็นครั้งคราวและข้ามผ่านได้ คอมพิวเตอร์ไม่สามารถทำเช่นเดียวกันเมื่อเรียกใช้โค้ดในภาษาการเขียนโปรแกรมใดๆ นั่นเป็นสาเหตุสำคัญที่คุณเขียนโค้ดโดยใช้ไวยากรณ์ของภาษาการเขียนโปรแกรมที่คุณกำลังทำงานด้วย
ไวยากรณ์ยังทำให้โค้ดของคุณอ่านง่ายขึ้นอีกด้วย เมื่อทุกคนใช้ไวยากรณ์เดียวกัน การตีความโปรแกรมของผู้อื่นจะเป็นเรื่องง่าย เช่นเดียวกับในภาษาอังกฤษ เมื่อคุณรู้กฎพื้นฐานแล้ว ไม่มีโค้ดใดที่คุณไม่สามารถอ่านได้
ในคู่มือนี้ เราจะเน้นที่คุณสมบัติของไวยากรณ์ดังต่อไปนี้:
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
- ช่องว่าง
- การตั้งชื่อตัวแปร
- เยื้อง
- ความคิดเห็น
- อัฒภาค
เริ่มกันเลย!
ช่องว่าง
โปรแกรมเมอร์อภิปรายช่องว่างครั้งแล้วครั้งเล่า เป็นหัวข้อที่ขัดแย้งกันมาก เว้นการโต้วาทีสักนาที มีกฎสำคัญข้อหนึ่งที่คุณต้องจำไว้เมื่อพูดถึงไวยากรณ์ใน JavaScript:คุณควรมีช่องว่างระหว่างตัวแปร และก่อนและหลังวงเล็บ
สมมติว่าคุณกำลังเขียน for ห่วง:
for (var i = 0; i < 4; i++) {
console.log(i);
}
ลูปนี้พิมพ์ตัวเลขทั้งหมดระหว่างช่วง 0 ถึง 4 ไปยังคอนโซล อย่างที่คุณเห็น มีช่องว่างระหว่าง for . ของเรา คีย์และวงเล็บเปิดของ for . ของเรา ห่วง มีช่องว่างระหว่างวงเล็บปีกกาปิด (() และวงเล็บปีกกาเปิด ({) นอกจากนี้ยังมีช่องว่างระหว่างข้อความทั้งหมดในวงเล็บเหล่านี้:
- var i =0;
- ฉัน <4;
เมื่อคุณกำหนดตัวแปรนอก for วนซ้ำ คุณจะใช้วิธีเดียวกัน:
var cookie = “Raspberry Chocolate Chip”;
การเพิ่มช่องว่างระหว่างตัวแปรทำให้ง่ายต่อการอ่านโค้ดของคุณ
เยื้อง
ต่างจากภาษาโปรแกรมอื่น ๆ คุณสามารถเขียนโปรแกรม JavaScript ในบรรทัดเดียวได้ ไม่ใช่ความคิดที่ดี ลองคิดดูว่าการอ่านโค้ดของคุณยากแค่ไหน แต่คุณก็ยังทำได้
ทุกคำสั่งที่อยู่ในบล็อคโค้ด – เช่น if คำสั่งเงื่อนไขหรือคลาส – ควรเยื้อง การเยื้องหมายถึงการเพิ่มช่องว่างสองช่อง ช่องว่างสี่ช่องหรือแท็บที่จุดเริ่มต้นของโค้ดของคุณ มีการถกเถียงกันมากมายในหมู่โปรแกรมเมอร์เกี่ยวกับสิ่งที่ดีที่สุด แต่ตราบใดที่คุณยังคงความสม่ำเสมอในโค้ดของคุณ คุณจะไม่มีปัญหา
นี่คือ for . เยื้อง ห่วง:
for (var i = 0; i < 4; i++) {
console.log(i);
}
คุณสามารถดูคำว่า console.log() ถูกเยื้องโดยใช้แท็บ นั่นเป็นเพราะมันมีอยู่ภายในวงเล็บปีกกาของเรา ซึ่งช่วยแยกความแตกต่างของเนื้อหาของ for loop กับส่วนที่เหลือของโค้ดของเรา หากเรามีบล็อคโค้ดอื่นในโค้ดของเรา เช่น if คำสั่งเราจะเยื้องเนื้อหาของมันมากยิ่งขึ้น:
for (var i = 0; i < 4; i++) {
if (i === 3) {
console.log(i);
}
}
รหัสนี้พิมพ์ค่าของ i ถ้ามันเท่ากับสาม มิฉะนั้นจะไม่มีอะไรเกิดขึ้น ในตัวอย่างนี้ if . ของเรา คำสั่งถูกเยื้องโดยหนึ่งแท็บเพราะอยู่ใน for . ของเรา ห่วง console.log() . ของเรา คำสั่งถูกเยื้องโดยสองแท็บเนื่องจากมีอยู่ภายใน if . ของเรา คำสั่ง ซึ่งมีอยู่ใน for . ของเรา คำสั่ง
ความคิดเห็น
ความคิดเห็นเป็นคำสั่งที่เขียนโดยนักพัฒนา สำหรับนักพัฒนา JavaScript อ่านทางเทคนิค แต่จะไม่ถูกดำเนินการ
จุดประสงค์ของความคิดเห็นคือเพื่อช่วยให้นักพัฒนาติดตามโค้ดของตน หากคุณกำลังใช้ฟังก์ชันที่ซับซ้อน คุณอาจต้องการเขียนความคิดเห็นสองสามข้อเพื่อให้คุณรู้ว่าแต่ละส่วนของฟังก์ชันทำอะไร ข้อคิดเห็นมักถูกใช้ในโครงการความร่วมมือเช่นกัน เพื่อให้นักพัฒนาทุกคนสามารถเข้าใจโปรแกรมได้ แม้ว่าพวกเขาจะไม่ได้เขียนเองก็ตาม
ใน JavaScript ความคิดเห็นจะถูกเขียนโดยใช้เครื่องหมายสแลชคู่ ตามด้วยความคิดเห็น:
// This is a comment that will be skipped over by JavaScript!
อักขระที่ตามมาทั้งหมดหลังจากเครื่องหมายทับคู่จะถือเป็นความคิดเห็น หากต้องการแสดงความคิดเห็นหลายบรรทัด คุณสามารถใช้ไวยากรณ์นี้:
/* This is a comment that spans multiple lines. */
ข้อความใดๆ ระหว่าง /* และ */ จะถูกละเว้นโดยคอมไพเลอร์ JavaScript
การตั้งชื่อตัวแปร
มีหลายวิธีที่คุณสามารถตั้งชื่อตัวแปรได้ วิธีที่นิยมใช้กันมากที่สุด 3 วิธีคือ การใช้ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก และขีดล่าง
ใน JavaScript นักพัฒนาส่วนใหญ่ต้องการใช้ตัวพิมพ์เล็กอูฐเพื่อตั้งชื่อตัวแปร:
firstName, surname, isAdmin
การประกาศตัวแปรใน JavaScript มีลักษณะดังนี้:
var firstName = “Tony”;
ประเภทของตัวแปรที่คุณใช้ (ในกรณีนี้คือ var) ตามด้วยชื่อของตัวแปร ตามด้วยเครื่องหมายเท่ากับ ตามด้วยค่าที่คุณต้องการเก็บไว้ในตัวแปร
คำแรกในตัวแปรควรขึ้นต้นด้วยอักษรตัวพิมพ์เล็ก แม้ว่าตัวแปรจะมีเพียงคำเดียวก็ตาม คำที่สองและคำที่ตามมาทั้งหมดควรขึ้นต้นด้วยตัวพิมพ์ใหญ่ ดังที่คุณเห็นด้านบน
แม้ว่าคุณจะสามารถเขียนตัวแปรโดยใช้วิธีการอื่น (เช่น “first_name” ที่ขีดล่างหรือ “FirstName” ในตัวพิมพ์ใหญ่ของอูฐ) การทำเช่นนี้ใน JavaScript นั้นไม่ธรรมดา
ตัวแปรใน JavaScript คำนึงถึงขนาดตัวพิมพ์ ซึ่งหมายความว่า firstName และ firstName แม้ว่าจะมีอักขระพื้นฐานเหมือนกัน แต่จะได้รับการปฏิบัติต่างกัน
มีคำบางคำที่เรียกว่า “คำสงวน” ที่คุณไม่สามารถใช้เป็นชื่อตัวแปรได้ คำเหล่านี้เป็นคำที่มีฟังก์ชันพิเศษใน JavaScript ตัวอย่างเช่น คุณไม่สามารถตั้งชื่อตัวแปรว่า "class" หรือ "for" ได้ เนื่องจากมีการใช้งานในภาษาอยู่แล้ว
คุณสามารถค้นหารายการคำหลัก JavaScript ที่สงวนไว้ได้ใน Mozilla Developer Network
เครื่องหมายอัฒภาค
ในภาษาอังกฤษ ทุกประโยคลงท้ายด้วยจุด หยุดเต็ม สิ่งนี้บอกเราว่าเมื่อใดควรหยุดอ่านประโยคหนึ่งและเริ่มต้นประโยคอื่น ถ้าคุณนึกย้อนไปสมัยเรียนประถม คุณคงเคยได้ยินมาว่าประโยคคือที่ที่คุณควรหยุดและหายใจเข้า
โปรแกรมคอมพิวเตอร์ไม่จำเป็นต้องหายใจ แต่พวกเขาจำเป็นต้องรู้ว่าคำสั่งแยกกันในโปรแกรมอย่างไร ใน JavaScript คำสั่งส่วนใหญ่ลงท้ายด้วยอัฒภาค:
var cookie = “Chocolate Fudge”;
คุณไม่จำเป็นต้องระบุเซมิโคลอนหลังคำสั่งบล็อกใดๆ เหล่านี้เป็นคำสั่งเช่น class, switch, do, if และ for คำสั่งเหล่านี้ใช้วงเล็บปีกกาเพื่อเก็บรหัส:
function addNumbers(one, two) {
return one + two;
}
ในโค้ดนี้ คุณจะเห็นว่าเราสิ้นสุด return คำสั่งด้วยเครื่องหมายอัฒภาค นั่นเป็นเพราะมันอยู่ในหน้าที่ของเรา ฟังก์ชันของเราไม่ได้ลงท้ายด้วยเครื่องหมายอัฒภาค
บทสรุป
มีกฎมากมายในภาษาการเขียนโปรแกรม JavaScript กฎแต่ละข้อเหล่านี้ช่วยให้แน่ใจว่าคุณเขียนโค้ดทั้งคุณและเบราว์เซอร์สามารถอ่านได้ หากคุณกำลังทำงานในทีม การปฏิบัติตามกฎไวยากรณ์ของ JavaScript เป็นสิ่งสำคัญอย่างยิ่ง
นี่คือบทสรุปของกฎหลักที่เราได้กล่าวถึง:
- ข้อความสั่งทั้งหมดในการประกาศตัวแปรหรือหลังคีย์เวิร์ด เช่น "for" หรือ "if" ควรคั่นด้วยช่องว่าง
- ข้อความที่อยู่ภายในกลุ่มโค้ด (เช่น “if”, “else”) ควรเยื้อง
- ชื่อตัวแปรควรใช้ตัวพิมพ์เล็กของอูฐและไม่ควรเท่ากับคีย์เวิร์ดที่สงวนไว้
- ทุกคำสั่ง ยกเว้นคำสั่งบล็อก ควรลงท้ายด้วยอัฒภาค
- // สามารถใช้เขียนความคิดเห็นแบบบรรทัดเดียว และ /* */ สามารถใช้เขียนความคิดเห็นที่ครอบคลุมหลายบรรทัดได้
ตอนนี้คุณพร้อมที่จะเริ่มเขียนโค้ดใน JavaScript เหมือนนักพัฒนามืออาชีพแล้ว!
