diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index eea76806f..6f5282b1c 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -1,44 +1,44 @@ -# โครงสร้างโค้ด +# โครงสร้างของโค้ด -สิ่งแรกที่เราจะเริ่มศึกษากันจริงจังคือหน่วยของโค้ด (blocks of code) +สิ่งที่เราจะมาสำรวจกันคือ ส่วนประกอบของโค้ด (building blocks of code) ## คำสั่ง (Statements) -คำสั่ง (Statements) คือโครงสร้างไวยากรณ์ที่ประกอบไปด้วยคำสั่งที่พร้อมให้คอมพิวเตอร์ดำเนินการ +ตำสั่งเป็นโครงสร้างทางไวยกรณ์เพื่อให้คอมพิวเตอร์ทำงานตามที่เราต้องการ -เราเคยเห็นคำสั่ง (Statements) หน่ึงกันมาแล้วคือ `alert('Hello, world!')`, ซึ่งคำสั่งของมันก็คือให้แสดงข้อความ "Hello World!" +เราได้เห็นคำสั่งอย่าง `alert('Hello, world!')` กันมาแล้ว ซึ่งจะแสดงข้อความ "Hello, world!" -เราจะเขียนคำสั่ง (Statements) กี่ครั้งก็ได้ตามที่เราต้องการ และ คำสั่ง (Statements) มักจบด้วย semicolon เสมอ เพื่อแยกแต่ละคำสั่ง (Statements) ออกจากกัน คล้ายๆ full stop ในภาษาอังกฤษที่แบ่งประโยคออกจากกัน +เราสามารถมีคำสั่งได้เป็นจำนวนมากในโค้ดของเรา และสามารถแยกคำสั่งแต่ละตัวออกด้วยเครื่องหมายเซมิโคลอน (;) -ดั่งตัวอย่างเราแบ่ง "Hello" กับ "World" ออกมาเป็นสองข้อความ +ตัวอย่างเช่น เราแบ่ง "Hello World" เป็นสองคำสั่งแสดงข้อความ: ```js run no-beautify alert('Hello'); alert('World'); ``` -โดยปกติแล้ว เราจะเขียนแยกบรรทัดกันเพื่อให้โค้ดอ่านง่ายขึ้น +ตามปกติแล้ว คำสั่งจะเขียนบรรทัดละหนึ่งบรรทัดเพื่อทำให้โค้ดอ่านง่ายขึ้น: ```js run no-beautify alert('Hello'); alert('World'); ``` -## Semicolons [#semicolon] +## เครื่องหมายเซมิโคลอน [#semicolon] -การขึ้นบรรทัดใหม่ก็เหมือนมี semicolon อยู่ในตัว เมื่อเราแบ่งบรรทัดจึงมีหรือไม่มี semicolon ก็ได้ +เราสามารถละการเขียนเครื่องหมายเซมิโคลอนได้หากเราเขียนคำสั่งคนละบรรทัด -แบบนี้ก็ได้ผลเช่นเดียวกันกับด้านบน: +ตัวอย่างเช่นนี้โค้ดก็ทำงานได้: ```js run no-beautify alert('Hello') alert('World') ``` -จาวาสคริปต์จะตีความการขึ้นบรรทัดใหม่ว่าเป็น semicolon ในที่นี้เราเรียกว่า [การแทรก semicolon ให้อัตโนมัติ](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). +ที่นี่ JavaScript จะตีความข้อความขึ้นบรรทัดใหม่เป็นเซมิโคลอนโดย "อัตโนมัติ" นี่เรียกว่า[การแทรกเซมิโคลอนอัตโนมัติ](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). -**ส่วนใหญ่การขึ้นบรรทัดใหม่คือจะแทรก semicolon ไปโดยปริยายด้วย แต่ก็ไม่ได้หมายความว่าจะเป็นแบบนั้นเสมอไป!** +**โดยส่วนมาก การขึ้นบรรทัดใหม่คือการแทรกเซมิโคลอน แต่ก็ไม่ได้เสมอไป** -บรรทัดใหม่แบบนี้ จาวาสคริปต์จะไม่ตีความว่าเป็น semicolon +มีกรณีที่การเว้นบรรทัดไม่ได้หมายความถึงการแทรกเซมิโคลอน ตัวอย่างเช่น:: ```js run no-beautify alert(3 + @@ -46,14 +46,14 @@ alert(3 + + 2); ``` -โค้ดแสดงผล `6` เนื่องจาก JavaScript ไม่ได้ใส่ `;` ที่นี่เห็นได้ชัดว่าถ้าบรรทัดลงท้ายด้วยเครื่องหมายบวก `"+"` แสดงว่าเป็น "นิพจน์ที่ไม่สมบูรณ์" ดังนั้นเครื่องหมาย semicolons จะไม่ถูกแทรกลงไป และในกรณีนี้ ผลลัพธ์ก็ถูกต้องตามที่คาดไว้ +โค้ดจะแสดงผลเป็น `6` เนื่องจาก JavaScript ไม่แทรกเซมิโคลอนในที่นี่ จากดูได้ชัดเจนว่าถ้าบรรทัดจบด้วยเครื่องหมายบวก `"+"` จะเป็น "นิพจน์ไม่สมบูรณ์" ดังนั้นการแทรกเซมิโคลอนจะไม่ถูกต้อง และโค้ดจะทำงานผิดพลาด JavaScript ฉลาดพอที่รู้ว่าควรแทรกเซมิโคลอนหรือไม่ -**แต่ก็มีบางคำสั่งที่จาวาสคริปต์ได้ตีความผิดพลาดไป โดยจาวาสคริปต์มองว่าคำสั่งดังกล่าวจำเป็นต้องมี semicolon ด้วย;** +**แต่ก็ดันมีสถานการณ์ที่ JavaScript จะตีความผิดพลาดเช่นกัน** -error หาเจอได้ยาก และยังแก้ไขได้ยากอีกด้วย +ข้อผิดพลาดที่เกิดขึ้นในกรณีเช่นนี้มักจะยากในการค้นหาและแก้ไข -````smart header="An example of an error" -หากคุณอยากรู้ตัวอย่างที่เป็นรูปธรรมของข้อผิดพลาดดังกล่าว สามารถดูได้ที่โค้ดด้านล่าง +````smart header="ตัวอย่างของข้อผิดพลาดนี้" +หากคุณอยากรู้ว่าการเกิดข้อผิดพลาดแบบนี้เกิดขึ้นได้อย่างไร ลองดูโค้ดนี้: ```js run alert("Hello"); @@ -61,9 +61,9 @@ alert("Hello"); [1, 2].forEach(alert); ``` -เราจะมาเรียน square brackets `[]` และ `forEach' ในภายหลัง สำหรับตอนนี้ เพียงจำผลลัพธ์ของการรันโค้ดจะได้ "สวัสดี" ตามด้วย "1" ตามด้วย "2" +อย่าพึ่งไปสนใจกับความหมายของเครื่องหมายวงเล็บเหลี่ยม `[]` และ `forEach` ในตอนนี้ เราจะศึกษาเรื่องเหล่านี้ในภายหลัง ในตอนนี้เพียงแค่จำผลลัพธ์ที่ได้จากการเรียกใช้โค้ด: มันจะแสดงผลว่า `Hello`, จากนั้น `1`, แล้ว `2` -ตอนนี้เราลองลบเครื่องหมาย `;` หลัง "alert" ออก: +ที่นี้ลองลบเครื่องหมายเซมิโคลอนหลัง `alert` ออกดู: ```js run no-beautify alert("Hello") @@ -71,86 +71,85 @@ alert("Hello") [1, 2].forEach(alert); ``` -เมื่อเทียบกับโค้ดด้านบน ความแตกต่างมีเพียงตัวอักษรเดียวเท่านั้น: นั่นคือ `;` ที่ท้ายบรรทัดแรกหายไป +ความแตกต่างกับโค้ดด้านบนอยู่แค่หนึ่งตัวอักษร: คือเซมิโคลอนที่สิ้นสุดบรรทัดแรกหายไป -สมมติว่าเราเรียกใช้โค้ดชุดนี้ เฉพาะ "hello" รายการแรกเท่านั้นที่แสดง (และมีข้อผิดพลาด คุณอาจต้องเปิดคอนโซลเพื่อดู) ไม่มีตัวเลข "1" และ "2" แสดงผลออกมาด้วย +หากเรารันโค้ดนี้ จะแสดงเฉพาะ `Hello` (เกิดข้อผิดพลาด คุณอาจต้องเปิดคอนโซลเพื่อดู) และไม่ได้แสดงตัวเลขอีกต่อไป -นั่นเป็นเพราะว่า JavaScript ไม่ใส่ `;` ก่อนวงเล็บเหลี่ยม `[...]` ดังนั้น โค้ดในตัวอย่างสุดท้ายจะถือเป็นคำสั่งเดียว +เนื่องจาก JavaScript ไม่ได้แทรกเซมิโคลอนไว้ก่อนวงเล็บเหลี่ยม `[...]` ดังนั้นโค้ดในตัวอย่างได้ถูกรวบเป็นคำสั่งเดียว -ด้านล่างคือโค้ดที่เอนจิ้นเห็น: +นี่คือวิธีที่ JavaScript เห็นโค้ดนี้: ```js run no-beautify alert("Hello")[1, 2].forEach(alert); ``` -มันดูแปลกใช่มั้ย? ในกรณีนี้ เอนจิ้นดันรวม statement ที่แยกกันเป็นคำสั่งเดียว ดัะงนั้นเราจึงจำเป็นต้องใส่ `;` หลัง "alert" เพื่อให้โค้ดทำงานได้อย่างถูกต้อง +ดูแปลกใช่ไหม? การรวบเป็นคำสั่งเดียวทำให้โค้ดทำงานผิดพลาด เราจึงต้องต้องใส่เครื่องหมายเซมิโคลอนหลัง `alert` เพื่อให้โค้ดทำงานได้อย่างถูกต้อง -สิ่งนี้สามารถเกิดขึ้นได้ในสถานการณ์อื่นเช่นกัน +สถานการณ์แบบนี้อาจเกิดขึ้นในสถานการณ์อื่น ๆ ด้วย ```` -ในทางที่ดีเราจึงอยากแนะนำให้ใส่ semicolon เมื่อจบคำสั่งหนึ่งๆเสมอ แม้คำสั่งเหล่านั้นจะแยกการด้วยบรรทัดใหม่แล้วก็ตาม และกฎนี้ใช้กันอย่างกว้างขวางในชุมชนนักพัฒนา โปรดทราบอีกครั้งว่า *มันเป็นไปได้* ที่จะไม่ใส่ semicolon ลงไป แต่สำหรับมือใหม่ก็แนะนำให้ใส่ไว้จะปลอดภัยกว่า +เราขอแนะนำให้ใส่เครื่องหมายเซมิโคลอนระหว่างคำสั่ง แม้ว่าคำสั่งจะแยกกันด้วยเว้นบรรทัด กฎนี้ได้รับการใช้งานกันอย่างแพร่หลายในชุมชนนักพัฒนา เราสามารถเขียนโดยไม่ใส่เซมิโคลอนไว้เลยก็ได้ แต่การใช้เครื่องหมายเซมิโคลอนเป็นวิถีทางที่ปลอดภัย - โดยเฉพาะสำหรับผู้เริ่มต้น -## คอมเม้นต์ +## คอมเม้นต์ [#code-comments] -เมื่อเขียนโปรแกรมไปเรื่อยๆ ก็จะพบว่าโปรแกรมยิ่งทวีความซับซ้อนมากขึ้นเรื่อยๆ จึงจำเป็นต้องมี *comments* มาอธิบายว่าโค้ดที่เราเขียนทำงานอย่างไร +เมื่อเวลาผ่านไป โปรแกรมจะซับซ้อนมากขึ้น จึงเป็นเรื่องจำเป็นที่จะต้องเพิ่ม คอมเมนต์ เพื่ออธิบายว่าโค้ดทำอะไรและทำไมถึงทำเช่นนั้น -คอมเม้นสามารถเขียนลงไปส่วนไหนก็ได้ของสคริปต์ คอมเม้นจะไม่ส่งผลต่อการดำเนินงาน เพราะว่า เอนจินจะไม่สนใจคอมเม้นพวกนี้อยู่แล้ว +คอมเมนต์สามารถใส่ได้ที่ใดก็ได้ในสคริปต์ คอมเมนต์ไม่มีผลต่อการทำงานของสคริปต์เพราะคอมพิวเตอร์จะไม่สนใจมัน -**คอมเม้นแบบบรรทัดเดียวจะใช้เครื่องหมาย forward slash `//`** +**คอมเมนต์หนึ่งบรรทัดเริ่มต้นด้วยเครื่องหมายทวิสัย (forward slash) สองตัว `//`.** -เราสามารถคอมเม้นทั้งบรรทัด หรือคอมเม้นด้านหลังคำสั่งก็ได้ - -แบบนี้: +จะให้ทั้งบรรทัดเป็นคอมเมนต์ หรือเพียงส่วนหนึ่งของบรรทัดก็ได้ +เช่น: ```js run -// This comment occupies a line of its own +// คอมเม้นต์ทั้งบรรทัด alert('Hello'); -alert('World'); // This comment follows the statement +alert('World'); // คอมเม้นต์หลังคำสั่ง ``` -**คอมเม้นแบบหลายบรรทัด จะเริ่มต้นด้วย forward slash และเครื่องหมายดอกจัน `/*` และลงท้ายด้วย เครื่องหมายดอกจันและ forward slash `*/`** +**คอมเมนต์หลายบรรทัดเริ่มต้นด้วยเครื่องหมายทวิสัยและดอกจัน /* และจบด้วยดอกจันและเครื่องหมายทวิสัย */.** -แบบนี้: +เช่นนี้: ```js run -/* An example with two messages. -This is a multiline comment. +/* ตัวอย่างกับข้อความสองอัน +นี่คือคอมเมนต์หลายบรรทัด */ alert('Hello'); alert('World'); ``` -เอนจินไม่สนใจเนื้อหาภายในคอมเม้นต์ ต่อให้เราใส่จาวาสคริปต์ของเราไปภายในคอมเม้นก็จะไม่เกิดการรันคำสั่งใดๆ +เนื้อหาภายในคอมเม้นต์จะถูกละเว้น ดังนั้นหากเราวางโค้ดในระหว่าง /* ... */ โค้ดนั้นจะไม่ทำงาน -หลายครั้ง เป็นประโยชน์อย่างมากที่ช่วยให้ไม่ต้องบางคำสั่งไม่ต้องดำเนินการ +บางครั้งเราก็ใช้คอมเม้นต์เพื่อปิดการทำงานของโค้ดไว้ชั่วคราว ```js run -/* Commenting out the code +/* ปิดการใช้งานโค้ด alert('Hello'); */ alert('World'); ``` ```smart header="ใช้คีย์ลัด!" -ใน editor ส่วนใหญ่มีคีย์ลัดเพื่อเอาไว้คอมเม้นต์โค้ด โดยกด `key:Ctrl+/` สำหรับคอมเม้นต์บรรทัดเดียว และ `key:Ctrl+Shift+/` สำหรับคอมเม้นต์หลายบรรทัด สำหรับผู้ใช้ Mac ให้ใชปุ่ม `key:Cmd` แทน `key:Ctrl` และ `key:Option` แทน `key:Shift` +ในเอดิเตอร์ส่วนมาก สามารถคอมเมนต์บรรทัดหนึ่งโดยกดปุ่มลัด `key:Ctrl+/` และสำหรับคอมเมนต์หลายบรรทัด ใช้ `key:Ctrl+Shift+/` -- สำหรับ Mac จะใช้ `key:Cmd` แทน `key:Ctrl` และ `key:Option` แทน `key:Shift` ``` -````warn header="คอมเม้นต์ซ้อนคอมเม้นต์ไม่ได้" -ไม่ควรมี `/*...*/` ข้างในคอมเม้นต์แบบนี้ `/*...*/` อีกที +````warn header="ไม่รองรับคอมเม้นต์ซ้อนกัน" +เราไม่สามารถใช้ `/*...*/` ภายในอีก `/*...*/` หนึ่งได้ -โค้ดแบบนี้จะพังด้วย error +โค้ดเช่นนี้จะเกิดข้อผิดพลาด: ```js run no-beautify /* - /* nested comment ?!? */ + /* คอมเมนต์ซ้อนกัน ?!? */ */ alert( 'World' ); ``` ```` -อย่าลังเลที่จะคอมเม้นต์โค้ดของตัวเอง +อย่าลังเลที่จะคอมเม้นโค้ดของเรา -คอมเม้นเพิ่มบรรทัดของโค้ด แต่นั่นไม่ใช่ปัญหาเลย มีเครื่องมือมากมายที่ช่วยนำคอมเม้นเหล่านั้นออกจากโค้ด ก่อนเผยแพร่ออกสู่เซิฟเวอร์ที่ใช้งานจริง ดังนั้นอย่างกังวลที่จะใช้คอมเม้นโค้ด +คอมเมนต์เพิ่มขนาดของโต้ดโดยรวม แต่ไม่ใช่ปัญหา เพราะมีเครื่องมือมากมายที่สามารถเอาคอมเม้นต์ออกได้ก่อนเผยแพร่โค้ดออกสู่สาธารณะ ดังนั้นคอมเม้นต์จึงไม่มีผลต่อการทำงานของโค้ดเลย -ในภายหลังจะมีบทเรียนเกี่ยวกับ ที่จะช่วยอธิบายความสำคัญของคอมเม้นต์ และการเขียนคอมเม้นต์ที่ดีอีกด้วย +ในบทสอนที่ถัดไปจะมีบทเรียนเกี่ยวกับ อธิบายว่าเราจะเขียนคอมเม้นต์ที่ดีได้อย่างไร \ No newline at end of file