|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "3e0da5eb9b275fe3cb431033c1413ec2",
|
|
|
"translation_date": "2025-10-23T20:49:10+00:00",
|
|
|
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
|
|
|
"language_code": "th"
|
|
|
}
|
|
|
-->
|
|
|
# การแนะนำเกี่ยวกับภาษาโปรแกรมและเครื่องมือสำหรับนักพัฒนาสมัยใหม่
|
|
|
|
|
|
สวัสดีค่ะ นักพัฒนามือใหม่! 👋 ขอเล่าอะไรให้ฟังหน่อยได้ไหมคะ? สิ่งที่ทำให้ฉันตื่นเต้นทุกวันก็คือ คุณกำลังจะค้นพบว่าการเขียนโปรแกรมไม่ได้เป็นแค่เรื่องของคอมพิวเตอร์ – แต่มันคือพลังวิเศษที่ช่วยให้คุณสร้างสรรค์ไอเดียที่บ้าบิ่นที่สุดของคุณให้เป็นจริงได้!
|
|
|
|
|
|
คุณเคยมีช่วงเวลาที่ใช้แอปโปรดของคุณแล้วทุกอย่างดูลงตัวสุด ๆ ไหม? เมื่อคุณกดปุ่มแล้วเกิดสิ่งที่น่าทึ่งขึ้นจนคุณต้องร้อง "ว้าว พวกเขาทำได้ยังไง?" คนที่สร้างสิ่งนั้นขึ้นมาอาจจะเป็นคนที่เหมือนคุณ – นั่งอยู่ในร้านกาแฟโปรดตอนตีสองพร้อมกับเอสเปรสโซแก้วที่สาม และนี่คือสิ่งที่จะทำให้คุณตื่นเต้น: หลังจากจบบทเรียนนี้ คุณจะไม่เพียงแค่เข้าใจว่าพวกเขาทำได้ยังไง แต่คุณจะอยากลองทำเองด้วย!
|
|
|
|
|
|
ฉันเข้าใจดีค่ะถ้าคุณรู้สึกว่าการเขียนโปรแกรมดูน่ากลัวในตอนนี้ ตอนที่ฉันเริ่มต้น ฉันเคยคิดว่าคุณต้องเป็นอัจฉริยะด้านคณิตศาสตร์หรือเขียนโค้ดมาตั้งแต่ห้าขวบ แต่สิ่งที่เปลี่ยนมุมมองของฉันไปอย่างสิ้นเชิงคือ: การเขียนโปรแกรมเหมือนกับการเรียนรู้ที่จะสนทนาในภาษาใหม่ คุณเริ่มต้นด้วย "สวัสดี" และ "ขอบคุณ" แล้วค่อย ๆ พัฒนาจนสามารถสั่งกาแฟ และในที่สุดก็สามารถพูดคุยเรื่องปรัชญาได้! แต่ในกรณีนี้ คุณกำลังสนทนากับคอมพิวเตอร์ และพูดตรง ๆ เลยนะ? พวกมันเป็นคู่สนทนาที่อดทนที่สุด – พวกมันไม่เคยตัดสินความผิดพลาดของคุณ และพร้อมที่จะลองใหม่เสมอ!
|
|
|
|
|
|
วันนี้เราจะสำรวจเครื่องมือที่น่าทึ่งที่ทำให้การพัฒนาเว็บสมัยใหม่ไม่เพียงแค่เป็นไปได้ แต่ยังทำให้ติดใจอย่างจริงจัง ฉันกำลังพูดถึงโปรแกรมแก้ไข เบราว์เซอร์ และกระบวนการทำงานเดียวกันกับที่นักพัฒนาที่ Netflix, Spotify และสตูดิโอแอปอินดี้ที่คุณชื่นชอบใช้ทุกวัน และนี่คือส่วนที่ทำให้คุณต้องเต้นด้วยความดีใจ: เครื่องมือระดับมืออาชีพที่เป็นมาตรฐานอุตสาหกรรมส่วนใหญ่สามารถใช้งานได้ฟรี!
|
|
|
|
|
|
|
|
|
> ภาพวาดโดย [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
## มาดูกันว่าคุณรู้อะไรอยู่แล้วบ้าง!
|
|
|
|
|
|
ก่อนที่เราจะเข้าสู่เรื่องสนุก ๆ ฉันอยากรู้ว่าคุณรู้อะไรเกี่ยวกับโลกของการเขียนโปรแกรมนี้บ้าง? และถ้าคุณมองคำถามเหล่านี้แล้วคิดว่า "ฉันไม่มีความรู้เรื่องนี้เลย" นั่นไม่ใช่แค่โอเค แต่เป็นเรื่องที่ดีมาก! นั่นหมายความว่าคุณอยู่ในที่ที่เหมาะสมที่สุด ลองคิดว่าคำถามนี้เหมือนกับการยืดกล้ามเนื้อก่อนออกกำลังกาย – เราแค่กำลังวอร์มอัพสมองกัน!
|
|
|
|
|
|
[ทำแบบทดสอบก่อนเริ่มบทเรียน](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
|
|
|
|
|
|
## การผจญภัยที่เรากำลังจะไปด้วยกัน
|
|
|
|
|
|
โอ้ ฉันตื่นเต้นจริง ๆ กับสิ่งที่เรากำลังจะสำรวจกันวันนี้! จริง ๆ แล้วฉันอยากเห็นหน้าคุณตอนที่คุณเข้าใจแนวคิดเหล่านี้ นี่คือการเดินทางที่น่าทึ่งที่เรากำลังจะไปด้วยกัน:
|
|
|
|
|
|
- **การเขียนโปรแกรมคืออะไร (และทำไมมันถึงเจ๋งที่สุด!)** – เราจะค้นพบว่าโค้ดคือเวทมนตร์ที่มองไม่เห็นที่ขับเคลื่อนทุกสิ่งรอบตัวคุณ ตั้งแต่เสียงปลุกที่รู้ว่าวันนี้เป็นวันจันทร์ ไปจนถึงอัลกอริทึมที่เลือกแนะนำรายการ Netflix ให้คุณได้อย่างสมบูรณ์แบบ
|
|
|
- **ภาษาโปรแกรมและบุคลิกที่น่าทึ่งของพวกมัน** – ลองจินตนาการว่าคุณเดินเข้าไปในงานปาร์ตี้ที่แต่ละคนมีพลังพิเศษและวิธีแก้ปัญหาที่แตกต่างกัน นั่นคือโลกของภาษาโปรแกรม และคุณจะหลงรักการพบปะกับพวกมัน!
|
|
|
- **องค์ประกอบพื้นฐานที่ทำให้เกิดเวทมนตร์ดิจิทัล** – คิดว่าสิ่งเหล่านี้เป็นชุดเลโก้สร้างสรรค์ขั้นสุดยอด เมื่อคุณเข้าใจว่าชิ้นส่วนเหล่านี้เข้ากันอย่างไร คุณจะรู้ว่าคุณสามารถสร้างอะไรก็ได้ที่จินตนาการของคุณฝันถึง
|
|
|
- **เครื่องมือระดับมืออาชีพที่จะทำให้คุณรู้สึกเหมือนมีไม้กายสิทธิ์** – ฉันไม่ได้พูดเกินจริงเลย – เครื่องมือเหล่านี้จะทำให้คุณรู้สึกเหมือนมีพลังวิเศษ และส่วนที่ดีที่สุด? พวกมันคือเครื่องมือเดียวกับที่มืออาชีพใช้!
|
|
|
|
|
|
> 💡 **สิ่งที่สำคัญคือ**: อย่าคิดที่จะพยายามจำทุกอย่างในวันนี้! ตอนนี้ฉันแค่อยากให้คุณรู้สึกตื่นเต้นกับสิ่งที่เป็นไปได้ รายละเอียดจะติดตัวคุณไปเองเมื่อเราฝึกฝนด้วยกัน – นั่นคือวิธีที่การเรียนรู้ที่แท้จริงเกิดขึ้น!
|
|
|
|
|
|
> คุณสามารถเรียนบทเรียนนี้ได้ที่ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
|
|
|
|
|
|
## แล้วการเขียนโปรแกรมคืออะไรกันแน่?
|
|
|
|
|
|
เอาล่ะ มาตอบคำถามที่มีค่าล้านดอลลาร์กัน: การเขียนโปรแกรมคืออะไรกันแน่?
|
|
|
|
|
|
ฉันจะเล่าเรื่องที่เปลี่ยนวิธีคิดของฉันไปอย่างสิ้นเชิง เมื่อสัปดาห์ที่แล้ว ฉันพยายามอธิบายให้แม่ฟังถึงวิธีใช้รีโมททีวีอัจฉริยะใหม่ ฉันพูดอะไรบางอย่างประมาณว่า "กดปุ่มสีแดง แต่ไม่ใช่ปุ่มสีแดงใหญ่ ปุ่มสีแดงเล็กที่อยู่ทางซ้าย... ไม่ใช่ซ้ายของคุณ... โอเค ตอนนี้กดค้างไว้สองวินาที ไม่ใช่หนึ่ง ไม่ใช่สาม..." คุ้น ๆ ไหมคะ? 😅
|
|
|
|
|
|
นั่นแหละคือการเขียนโปรแกรม! มันคือศิลปะของการให้คำสั่งที่ละเอียดและเป็นขั้นตอนกับบางสิ่งที่ทรงพลังมาก แต่ต้องการคำอธิบายที่ชัดเจนและถูกต้องทุกอย่าง แต่แทนที่จะอธิบายให้แม่ของคุณ (ที่อาจถามว่า "ปุ่มสีแดงไหน?!") คุณกำลังอธิบายให้คอมพิวเตอร์ (ที่ทำตามสิ่งที่คุณบอกเป๊ะ ๆ แม้ว่าสิ่งที่คุณบอกจะไม่ใช่สิ่งที่คุณตั้งใจ)
|
|
|
|
|
|
สิ่งที่ทำให้ฉันตื่นเต้นเมื่อฉันเรียนรู้เรื่องนี้คือ: คอมพิวเตอร์จริง ๆ แล้วค่อนข้างเรียบง่ายในแก่นแท้ของมัน พวกมันเข้าใจแค่สองสิ่ง – 1 และ 0 ซึ่งก็เหมือนกับ "ใช่" และ "ไม่" หรือ "เปิด" และ "ปิด" เท่านั้น! แต่สิ่งที่ทำให้มันน่าทึ่งคือ – เราไม่จำเป็นต้องพูดในรูปแบบ 1 และ 0 เหมือนในหนัง The Matrix นั่นคือที่มาของ **ภาษาโปรแกรม** พวกมันเหมือนกับมีนักแปลที่ดีที่สุดในโลกที่ช่วยแปลงความคิดของคุณให้เป็นภาษาคอมพิวเตอร์
|
|
|
|
|
|
และนี่คือสิ่งที่ยังทำให้ฉันตื่นเต้นทุกเช้าเมื่อฉันตื่นขึ้นมา: ทุกสิ่งดิจิทัลในชีวิตของคุณเริ่มต้นจากคนที่เหมือนคุณ อาจจะนั่งอยู่ในชุดนอนพร้อมกับกาแฟหนึ่งแก้ว พิมพ์โค้ดบนแล็ปท็อป ฟิลเตอร์ Instagram ที่ทำให้คุณดูดีขึ้น? มีคนเขียนโค้ดนั้น คำแนะนำที่นำคุณไปสู่เพลงโปรดใหม่ของคุณ? นักพัฒนาสร้างอัลกอริทึมนั้น แอปที่ช่วยคุณแบ่งบิลอาหารเย็นกับเพื่อน? ใช่ มีคนคิดว่า "นี่มันน่ารำคาญ ฉันน่าจะทำให้มันง่ายขึ้นได้" แล้ว... พวกเขาก็ทำได้!
|
|
|
|
|
|
เมื่อคุณเรียนรู้การเขียนโปรแกรม คุณไม่ได้แค่เรียนรู้ทักษะใหม่ – คุณกำลังกลายเป็นส่วนหนึ่งของชุมชนที่น่าทึ่งของนักแก้ปัญหาที่ใช้เวลาทั้งวันคิดว่า "ถ้าฉันสร้างบางอย่างที่ทำให้วันของใครบางคนดีขึ้นได้ล่ะ?" จริง ๆ แล้ว มีอะไรที่เจ๋งกว่านี้อีกไหม?
|
|
|
|
|
|
✅ **ค้นหาข้อเท็จจริงสนุก ๆ**: นี่คือสิ่งที่น่าสนใจที่คุณสามารถค้นหาเมื่อมีเวลาว่าง – คุณคิดว่าใครคือโปรแกรมเมอร์คอมพิวเตอร์คนแรกของโลก? ฉันจะให้คำใบ้: อาจไม่ใช่คนที่คุณคาดคิด! เรื่องราวของคนนี้น่าสนใจมากและแสดงให้เห็นว่าการเขียนโปรแกรมเป็นเรื่องของการแก้ปัญหาอย่างสร้างสรรค์และการคิดนอกกรอบเสมอมา
|
|
|
|
|
|
## ภาษาโปรแกรมเหมือนรสชาติของเวทมนตร์ที่แตกต่างกัน
|
|
|
|
|
|
โอเค นี่อาจฟังดูแปลก แต่ลองฟังดูนะ – ภาษาโปรแกรมเหมือนกับแนวดนตรีที่แตกต่างกัน ลองคิดดู: คุณมีแจ๊สที่นุ่มนวลและมีการด้นสด ร็อคที่ทรงพลังและตรงไปตรงมา คลาสสิกที่สง่างามและมีโครงสร้าง และฮิปฮอปที่สร้างสรรค์และแสดงออก แต่ละสไตล์มีบรรยากาศของตัวเอง มีชุมชนแฟนคลับที่หลงใหล และแต่ละแบบเหมาะกับอารมณ์และโอกาสที่แตกต่างกัน
|
|
|
|
|
|
ภาษาโปรแกรมก็เหมือนกัน! คุณจะไม่ใช้ภาษาเดียวกันในการสร้างเกมมือถือสนุก ๆ กับการวิเคราะห์ข้อมูลสภาพภูมิอากาศขนาดใหญ่ เช่นเดียวกับที่คุณจะไม่เปิดเพลงเดธเมทัลในคลาสโยคะ (เอ่อ... อย่างน้อยก็ในคลาสโยคะส่วนใหญ่นะ! 😄)
|
|
|
|
|
|
แต่สิ่งที่ทำให้ฉันตื่นเต้นทุกครั้งที่คิดถึงมันคือ: ภาษาพวกนี้เหมือนมีนักแปลที่อดทนและฉลาดที่สุดในโลกนั่งอยู่ข้าง ๆ คุณ คุณสามารถแสดงไอเดียของคุณในแบบที่สมองมนุษย์เข้าใจได้ และพวกมันจะจัดการแปลงเป็น 1 และ 0 ที่คอมพิวเตอร์เข้าใจ มันเหมือนมีเพื่อนที่พูดได้ทั้ง "ความคิดสร้างสรรค์ของมนุษย์" และ "ตรรกะของคอมพิวเตอร์" – และพวกมันไม่เคยเหนื่อย ไม่เคยต้องพักดื่มกาแฟ และไม่เคยตัดสินคุณที่ถามคำถามเดิมซ้ำ ๆ!
|
|
|
|
|
|
### ภาษาโปรแกรมยอดนิยมและการใช้งาน
|
|
|
|
|
|
| ภาษา | เหมาะสำหรับ | ทำไมถึงได้รับความนิยม |
|
|
|
|------|--------------|--------------------------|
|
|
|
| **JavaScript** | การพัฒนาเว็บ, ส่วนติดต่อผู้ใช้ | ใช้งานในเบราว์เซอร์และช่วยสร้างเว็บไซต์ที่มีการโต้ตอบ |
|
|
|
| **Python** | วิทยาศาสตร์ข้อมูล, ระบบอัตโนมัติ, AI | อ่านง่าย เรียนรู้ได้ง่าย มีไลบรารีที่ทรงพลัง |
|
|
|
| **Java** | แอปพลิเคชันองค์กร, แอป Android | ใช้งานได้บนหลายแพลตฟอร์ม มีความแข็งแกร่งสำหรับระบบขนาดใหญ่ |
|
|
|
| **C#** | แอป Windows, การพัฒนาเกม | มีการสนับสนุนจากระบบนิเวศของ Microsoft |
|
|
|
| **Go** | บริการคลาวด์, ระบบ backend | รวดเร็ว เรียบง่าย ออกแบบมาสำหรับการคำนวณสมัยใหม่ |
|
|
|
|
|
|
### ภาษา High-Level vs. Low-Level
|
|
|
|
|
|
โอเค นี่คือแนวคิดที่ทำให้ฉันงงเมื่อเริ่มเรียนรู้ครั้งแรก ดังนั้นฉันจะเล่าเปรียบเทียบที่ทำให้ฉันเข้าใจ และหวังว่ามันจะช่วยคุณได้เช่นกัน!
|
|
|
|
|
|
ลองจินตนาการว่าคุณไปเยี่ยมประเทศที่คุณไม่พูดภาษานั้น และคุณต้องการหาห้องน้ำอย่างเร่งด่วน (เราทุกคนเคยเจอใช่ไหม? 😅):
|
|
|
|
|
|
- **การเขียนโปรแกรมระดับต่ำ (Low-level programming)** เหมือนกับการเรียนรู้ภาษาท้องถิ่นจนเก่งมากจนสามารถพูดคุยกับคุณยายที่ขายผลไม้ตรงมุมถนนได้โดยใช้คำพูดเฉพาะ วัฒนธรรม และมุกตลกที่คนในพื้นที่เท่านั้นที่เข้าใจ มันน่าประทับใจและมีประสิทธิภาพมาก... ถ้าคุณพูดได้คล่อง! แต่ค่อนข้างลำบากเมื่อคุณแค่ต้องการหาห้องน้ำ
|
|
|
|
|
|
- **การเขียนโปรแกรมระดับสูง (High-level programming)** เหมือนกับการมีเพื่อนท้องถิ่นที่เข้าใจคุณ คุณสามารถพูดว่า "ฉันต้องการหาห้องน้ำ" ในภาษาอังกฤษธรรมดา และพวกเขาจัดการแปลวัฒนธรรมและให้คำแนะนำในแบบที่สมองของคุณเข้าใจได้
|
|
|
|
|
|
ในแง่ของการเขียนโปรแกรม:
|
|
|
- **ภาษา Low-level** (เช่น Assembly หรือ C) ให้คุณสนทนาอย่างละเอียดกับฮาร์ดแวร์ของคอมพิวเตอร์ แต่คุณต้องคิดเหมือนเครื่องจักร ซึ่ง... เอ่อ บอกเลยว่ามันเป็นการเปลี่ยนแปลงทางความคิดที่ใหญ่มาก!
|
|
|
- **ภาษา High-level** (เช่น JavaScript, Python หรือ C#) ให้คุณคิดเหมือนมนุษย์ ในขณะที่พวกมันจัดการกับการพูดคุยกับเครื่องจักรเบื้องหลัง นอกจากนี้ยังมีชุมชนที่อบอุ่นและเต็มไปด้วยคนที่จำได้ว่าการเริ่มต้นเป็นอย่างไร และอยากช่วยคุณจริง ๆ!
|
|
|
|
|
|
เดาว่าฉันจะแนะนำให้คุณเริ่มต้นกับภาษาแบบไหน? 😉 ภาษา High-level เหมือนกับการมีล้อช่วยที่คุณไม่อยากถอดออกเลย เพราะมันทำให้ประสบการณ์ทั้งหมดสนุกขึ้นมาก!
|
|
|
|
|
|
### ให้ฉันแสดงให้คุณเห็นว่าทำไมภาษา High-Level ถึงเป็นมิตรกับคุณมากกว่า
|
|
|
|
|
|
โอเค ฉันกำลังจะแสดงบางสิ่งที่แสดงให้เห็นอย่างชัดเจนว่าทำไมฉันถึงหลงรักภาษา High-level แต่ก่อนอื่น – ฉันต้องการให้คุณสัญญากับฉันอย่างหนึ่ง เมื่อคุณเห็นตัวอย่างโค้ดแรก อย่าตกใจ! มันควรจะดูน่ากลัว นั่นแหละคือประเด็นที่ฉันกำลังจะบอก!
|
|
|
|
|
|
เราจะดูงานเดียวกันที่เขียนในสองรูปแบบที่แตกต่างกันโดยสิ้นเชิง ทั้งสองสร้างสิ่งที่เรียกว่า Fibonacci sequence – มันเป็นรูปแบบทางคณิตศาสตร์ที่สวยงามที่แต่ละตัวเลขเป็นผลรวมของสองตัวก่อนหน้า: 0, 1, 1, 2, 3, 5, 8, 13... (ข้อเท็จจริงสนุก ๆ: คุณจะพบรูปแบบนี้ในธรรมชาติทุกที่ – การเรียงตัวของเมล็ดทานตะวัน ลวดลายของลูกสน แม้กระทั่งวิธีการก่อตัวของกาแล็กซี!)
|
|
|
|
|
|
พร้อมที่จะเห็นความแตกต่างแล้วหรือยัง? ไปกันเลย!
|
|
|
|
|
|
**ภาษา High-level (JavaScript) – เป็นมิตรกับมนุษย์:**
|
|
|
|
|
|
```javascript
|
|
|
// Step 1: Basic Fibonacci setup
|
|
|
const fibonacciCount = 10;
|
|
|
let current = 0;
|
|
|
let next = 1;
|
|
|
|
|
|
console.log('Fibonacci sequence:');
|
|
|
```
|
|
|
|
|
|
**นี่คือสิ่งที่โค้ดนี้ทำ:**
|
|
|
- **ประกาศ** ค่าคงที่เพื่อระบุจำนวนตัวเลข Fibonacci ที่เราต้องการสร้าง
|
|
|
- **เริ่มต้น** ตัวแปรสองตัวเพื่อติดตามตัวเลขปัจจุบันและตัวเลขถัดไปในลำดับ
|
|
|
- **ตั้งค่า** ค่าที่เริ่มต้น (0 และ 1) ที่กำหนดรูปแบบ Fibonacci
|
|
|
- **แสดง** ข้อความหัวข้อเพื่อระบุผลลัพธ์ของเรา
|
|
|
|
|
|
```javascript
|
|
|
// Step 2: Generate the sequence with a loop
|
|
|
for (let i = 0; i < fibonacciCount; i++) {
|
|
|
console.log(`Position ${i + 1}: ${current}`);
|
|
|
|
|
|
// Calculate next number in sequence
|
|
|
const sum = current + next;
|
|
|
current = next;
|
|
|
next = sum;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**การแบ่งสิ่งที่เกิดขึ้นในที่นี้:**
|
|
|
- **วนลูป** ผ่านแต่ละตำแหน่งในลำดับของเราด้วย `for` loop
|
|
|
- **แสดง** ตัวเลขแต่ละตัวพร้อมตำแหน่งโดยใช้การจัดรูปแบบ template literal
|
|
|
- **คำนวณ** ตัวเลข Fibonacci ถัดไปโดยการบวกค่าปัจจุบันและค่าถัดไป
|
|
|
- **อัปเดต** ตัวแปรติดตามของเราเพื่อไปยังการวนซ้ำถัดไป
|
|
|
|
|
|
```javascript
|
|
|
// Step 3: Modern functional approach
|
|
|
const generateFibonacci = (count) => {
|
|
|
const sequence = [0, 1];
|
|
|
|
|
|
for (let i = 2; i < count; i++) {
|
|
|
sequence[i] = sequence[i - 1] + sequence[i - 2];
|
|
|
}
|
|
|
|
|
|
return sequence;
|
|
|
};
|
|
|
|
|
|
// Usage example
|
|
|
const fibSequence = generateFibonacci(10);
|
|
|
console.log(fibSequence);
|
|
|
```
|
|
|
|
|
|
**ในข้างต้น เราได้:**
|
|
|
- **สร้าง** ฟังก์ชันที่นำกลับมาใช้ใหม่ได้โดยใช้ไวยากรณ์ฟังก์ชันลูกศรสมัยใหม่
|
|
|
- **สร้าง** อาร์เรย์เพื่อเก็บลำดับทั้งหมดแทนที่จะแสดงทีละตัว
|
|
|
- **ใช้** การ
|
|
|
✅ **เกี่ยวกับลำดับฟีโบนัชชี**: รูปแบบตัวเลขที่สวยงามอย่างไม่น่าเชื่อนี้ (ที่แต่ละตัวเลขเท่ากับผลรวมของสองตัวก่อนหน้า: 0, 1, 1, 2, 3, 5, 8...) ปรากฏอยู่แทบทุกที่ในธรรมชาติ! คุณจะพบมันในเกลียวของดอกทานตะวัน, ลวดลายของลูกสน, การโค้งของเปลือกหอยนอติลุส และแม้กระทั่งในวิธีที่กิ่งไม้เติบโต มันน่าทึ่งมากที่คณิตศาสตร์และโค้ดสามารถช่วยให้เราเข้าใจและสร้างรูปแบบที่ธรรมชาติใช้ในการสร้างความงดงามได้!
|
|
|
|
|
|
## ส่วนประกอบพื้นฐานที่ทำให้เกิดความมหัศจรรย์
|
|
|
|
|
|
เอาล่ะ ตอนนี้คุณได้เห็นแล้วว่าภาษาการเขียนโปรแกรมมีลักษณะอย่างไรในทางปฏิบัติ เรามาแยกส่วนพื้นฐานที่ประกอบขึ้นเป็นทุกโปรแกรมที่เคยเขียนกันเถอะ คิดว่าสิ่งเหล่านี้เป็นส่วนผสมสำคัญในสูตรอาหารโปรดของคุณ – เมื่อคุณเข้าใจว่าทุกส่วนทำอะไร คุณจะสามารถอ่านและเขียนโค้ดในแทบทุกภาษาได้!
|
|
|
|
|
|
นี่เหมือนกับการเรียนรู้ไวยากรณ์ของการเขียนโปรแกรม จำได้ไหมตอนเรียนที่โรงเรียนที่คุณเรียนรู้เกี่ยวกับคำนาม คำกริยา และวิธีการสร้างประโยค? การเขียนโปรแกรมก็มีเวอร์ชันไวยากรณ์ของตัวเอง และพูดตรงๆ มันมีเหตุผลและให้อภัยมากกว่าไวยากรณ์ภาษาอังกฤษเสียอีก! 😄
|
|
|
|
|
|
### Statements: คำสั่งทีละขั้นตอน
|
|
|
|
|
|
เริ่มต้นด้วย **statements** – สิ่งเหล่านี้เหมือนกับประโยคเดี่ยวๆ ในการสนทนากับคอมพิวเตอร์ แต่ละ statement บอกคอมพิวเตอร์ให้ทำสิ่งหนึ่งโดยเฉพาะ เหมือนกับการให้คำแนะนำ: "เลี้ยวซ้ายตรงนี้," "หยุดที่ไฟแดง," "จอดในที่ว่างนั้น"
|
|
|
|
|
|
สิ่งที่ฉันชอบเกี่ยวกับ statements คือมันอ่านง่ายมาก ลองดูตัวอย่างนี้:
|
|
|
|
|
|
```javascript
|
|
|
// Basic statements that perform single actions
|
|
|
const userName = "Alex";
|
|
|
console.log("Hello, world!");
|
|
|
const sum = 5 + 3;
|
|
|
```
|
|
|
|
|
|
**โค้ดนี้ทำอะไร:**
|
|
|
- **ประกาศ**ตัวแปรคงที่เพื่อเก็บชื่อผู้ใช้
|
|
|
- **แสดง**ข้อความต้อนรับในคอนโซล
|
|
|
- **คำนวณ**และเก็บผลลัพธ์ของการดำเนินการทางคณิตศาสตร์
|
|
|
|
|
|
```javascript
|
|
|
// Statements that interact with web pages
|
|
|
document.title = "My Awesome Website";
|
|
|
document.body.style.backgroundColor = "lightblue";
|
|
|
```
|
|
|
|
|
|
**ทีละขั้นตอน สิ่งที่เกิดขึ้นคือ:**
|
|
|
- **แก้ไข**ชื่อหน้าเว็บที่ปรากฏในแท็บเบราว์เซอร์
|
|
|
- **เปลี่ยน**สีพื้นหลังของหน้าเว็บทั้งหมด
|
|
|
|
|
|
### Variables: ระบบความจำของโปรแกรมคุณ
|
|
|
|
|
|
โอเค **variables** เป็นหนึ่งในแนวคิดที่ฉันชอบสอนที่สุด เพราะมันเหมือนกับสิ่งที่คุณใช้ทุกวันอยู่แล้ว!
|
|
|
|
|
|
ลองคิดถึงรายชื่อผู้ติดต่อในโทรศัพท์ของคุณ คุณไม่ได้จำหมายเลขโทรศัพท์ของทุกคน – แต่คุณบันทึก "แม่," "เพื่อนสนิท," หรือ "ร้านพิซซ่าที่ส่งถึงตีสอง" และปล่อยให้โทรศัพท์จำหมายเลขจริงๆ ตัวแปรทำงานเหมือนกันเป๊ะ! มันเหมือนกับกล่องที่มีป้ายชื่อที่โปรแกรมของคุณสามารถเก็บข้อมูลและเรียกใช้ในภายหลังโดยใช้ชื่อที่เข้าใจง่าย
|
|
|
|
|
|
สิ่งที่เจ๋งมากคือ ตัวแปรสามารถเปลี่ยนแปลงได้เมื่อโปรแกรมของคุณทำงาน (จึงเรียกว่า "variable" – เห็นไหมว่ามันฉลาดแค่ไหน?) เหมือนกับที่คุณอาจอัปเดตรายชื่อร้านพิซซ่าเมื่อคุณพบร้านที่ดีกว่า ตัวแปรสามารถอัปเดตได้เมื่อโปรแกรมของคุณเรียนรู้ข้อมูลใหม่หรือเมื่อสถานการณ์เปลี่ยนแปลง!
|
|
|
|
|
|
ให้ฉันแสดงให้คุณเห็นว่ามันง่ายและสวยงามแค่ไหน:
|
|
|
|
|
|
```javascript
|
|
|
// Step 1: Creating basic variables
|
|
|
const siteName = "Weather Dashboard";
|
|
|
let currentWeather = "sunny";
|
|
|
let temperature = 75;
|
|
|
let isRaining = false;
|
|
|
```
|
|
|
|
|
|
**ทำความเข้าใจแนวคิดเหล่านี้:**
|
|
|
- **เก็บ**ค่าที่ไม่เปลี่ยนแปลงในตัวแปร `const` (เช่นชื่อเว็บไซต์)
|
|
|
- **ใช้** `let` สำหรับค่าที่สามารถเปลี่ยนแปลงได้ในโปรแกรมของคุณ
|
|
|
- **กำหนด**ประเภทข้อมูลต่างๆ: สตริง (ข้อความ), ตัวเลข และบูลีน (จริง/เท็จ)
|
|
|
- **เลือก**ชื่อที่อธิบายได้ชัดเจนว่าตัวแปรแต่ละตัวเก็บอะไร
|
|
|
|
|
|
```javascript
|
|
|
// Step 2: Working with objects to group related data
|
|
|
const weatherData = {
|
|
|
location: "San Francisco",
|
|
|
humidity: 65,
|
|
|
windSpeed: 12
|
|
|
};
|
|
|
```
|
|
|
|
|
|
**ในตัวอย่างข้างต้น เราได้:**
|
|
|
- **สร้าง**ออบเจ็กต์เพื่อจัดกลุ่มข้อมูลสภาพอากาศที่เกี่ยวข้องเข้าด้วยกัน
|
|
|
- **จัดระเบียบ**ข้อมูลหลายชิ้นภายใต้ชื่อของตัวแปรเดียว
|
|
|
- **ใช้**คู่คีย์-ค่าเพื่อระบุข้อมูลแต่ละชิ้นอย่างชัดเจน
|
|
|
|
|
|
```javascript
|
|
|
// Step 3: Using and updating variables
|
|
|
console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`);
|
|
|
console.log(`Wind speed: ${weatherData.windSpeed} mph`);
|
|
|
|
|
|
// Updating changeable variables
|
|
|
currentWeather = "cloudy";
|
|
|
temperature = 68;
|
|
|
```
|
|
|
|
|
|
**มาทำความเข้าใจแต่ละส่วน:**
|
|
|
- **แสดง**ข้อมูลโดยใช้ template literals กับไวยากรณ์ `${}`
|
|
|
- **เข้าถึง**คุณสมบัติของออบเจ็กต์โดยใช้ dot notation (`weatherData.windSpeed`)
|
|
|
- **อัปเดต**ตัวแปรที่ประกาศด้วย `let` เพื่อสะท้อนถึงเงื่อนไขที่เปลี่ยนแปลง
|
|
|
- **รวม**ตัวแปรหลายตัวเพื่อสร้างข้อความที่มีความหมาย
|
|
|
|
|
|
```javascript
|
|
|
// Step 4: Modern destructuring for cleaner code
|
|
|
const { location, humidity } = weatherData;
|
|
|
console.log(`${location} humidity: ${humidity}%`);
|
|
|
```
|
|
|
|
|
|
**สิ่งที่คุณต้องรู้:**
|
|
|
- **ดึง**คุณสมบัติเฉพาะจากออบเจ็กต์โดยใช้ destructuring assignment
|
|
|
- **สร้าง**ตัวแปรใหม่โดยอัตโนมัติด้วยชื่อเดียวกับคีย์ของออบเจ็กต์
|
|
|
- **ทำให้โค้ดง่ายขึ้น**โดยหลีกเลี่ยงการใช้ dot notation ซ้ำๆ
|
|
|
|
|
|
### Control Flow: สอนโปรแกรมของคุณให้คิด
|
|
|
|
|
|
โอเค นี่คือจุดที่การเขียนโปรแกรมน่าทึ่งสุดๆ! **Control flow** คือการสอนโปรแกรมของคุณให้ตัดสินใจอย่างชาญฉลาด เหมือนกับที่คุณทำทุกวันโดยไม่ต้องคิดมาก
|
|
|
|
|
|
ลองนึกภาพสิ: เช้านี้คุณอาจผ่านกระบวนการแบบ "ถ้าฝนตก ฉันจะหยิบร่ม ถ้าหนาว ฉันจะใส่เสื้อแจ็คเก็ต ถ้าฉันรีบ ฉันจะข้ามอาหารเช้าและซื้อกาแฟระหว่างทาง" สมองของคุณทำตามตรรกะ if-then นี้โดยธรรมชาติหลายสิบครั้งทุกวัน!
|
|
|
|
|
|
นี่คือสิ่งที่ทำให้โปรแกรมดูฉลาดและมีชีวิตชีวาแทนที่จะทำตามสคริปต์ที่น่าเบื่อและคาดเดาได้ พวกมันสามารถดูสถานการณ์ ประเมินสิ่งที่เกิดขึ้น และตอบสนองได้อย่างเหมาะสม มันเหมือนกับการให้สมองแก่โปรแกรมของคุณที่สามารถปรับตัวและตัดสินใจได้!
|
|
|
|
|
|
อยากเห็นว่ามันทำงานได้อย่างสวยงามแค่ไหน? ให้ฉันแสดงให้คุณดู:
|
|
|
|
|
|
```javascript
|
|
|
// Step 1: Basic conditional logic
|
|
|
const userAge = 17;
|
|
|
|
|
|
if (userAge >= 18) {
|
|
|
console.log("You can vote!");
|
|
|
} else {
|
|
|
const yearsToWait = 18 - userAge;
|
|
|
console.log(`You'll be able to vote in ${yearsToWait} year(s).`);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**โค้ดนี้ทำอะไร:**
|
|
|
- **ตรวจสอบ**ว่าอายุของผู้ใช้ตรงตามข้อกำหนดการลงคะแนนหรือไม่
|
|
|
- **ดำเนินการ**บล็อกโค้ดต่างๆ ตามผลลัพธ์ของเงื่อนไข
|
|
|
- **คำนวณ**และแสดงระยะเวลาจนกว่าจะมีสิทธิ์ลงคะแนนหากอายุต่ำกว่า 18 ปี
|
|
|
- **ให้**คำแนะนำที่เฉพาะเจาะจงและเป็นประโยชน์สำหรับแต่ละสถานการณ์
|
|
|
|
|
|
```javascript
|
|
|
// Step 2: Multiple conditions with logical operators
|
|
|
const userAge = 17;
|
|
|
const hasPermission = true;
|
|
|
|
|
|
if (userAge >= 18 && hasPermission) {
|
|
|
console.log("Access granted: You can enter the venue.");
|
|
|
} else if (userAge >= 16) {
|
|
|
console.log("You need parent permission to enter.");
|
|
|
} else {
|
|
|
console.log("Sorry, you must be at least 16 years old.");
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**การแยกสิ่งที่เกิดขึ้น:**
|
|
|
- **รวม**เงื่อนไขหลายข้อโดยใช้ตัวดำเนินการ `&&` (และ)
|
|
|
- **สร้าง**ลำดับชั้นของเงื่อนไขโดยใช้ `else if` สำหรับหลายสถานการณ์
|
|
|
- **จัดการ**ทุกกรณีที่เป็นไปได้ด้วยคำสั่ง `else` สุดท้าย
|
|
|
- **ให้**คำแนะนำที่ชัดเจนและนำไปใช้ได้สำหรับแต่ละสถานการณ์ที่แตกต่างกัน
|
|
|
|
|
|
```javascript
|
|
|
// Step 3: Concise conditional with ternary operator
|
|
|
const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet";
|
|
|
console.log(`Status: ${votingStatus}`);
|
|
|
```
|
|
|
|
|
|
**สิ่งที่คุณต้องจำ:**
|
|
|
- **ใช้**ตัวดำเนินการ ternary (`? :`) สำหรับเงื่อนไขสองตัวเลือกที่เรียบง่าย
|
|
|
- **เขียน**เงื่อนไขก่อน ตามด้วย `?` จากนั้นผลลัพธ์จริง ตามด้วย `:` และผลลัพธ์เท็จ
|
|
|
- **ใช้**รูปแบบนี้เมื่อคุณต้องการกำหนดค่าตามเงื่อนไข
|
|
|
|
|
|
```javascript
|
|
|
// Step 4: Handling multiple specific cases
|
|
|
const dayOfWeek = "Tuesday";
|
|
|
|
|
|
switch (dayOfWeek) {
|
|
|
case "Monday":
|
|
|
case "Tuesday":
|
|
|
case "Wednesday":
|
|
|
case "Thursday":
|
|
|
case "Friday":
|
|
|
console.log("It's a weekday - time to work!");
|
|
|
break;
|
|
|
case "Saturday":
|
|
|
case "Sunday":
|
|
|
console.log("It's the weekend - time to relax!");
|
|
|
break;
|
|
|
default:
|
|
|
console.log("Invalid day of the week");
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**โค้ดนี้ทำสิ่งต่อไปนี้:**
|
|
|
- **จับคู่**ค่าตัวแปรกับหลายกรณีเฉพาะ
|
|
|
- **จัดกลุ่ม**กรณีที่คล้ายกันเข้าด้วยกัน (วันธรรมดา vs. วันหยุดสุดสัปดาห์)
|
|
|
- **ดำเนินการ**บล็อกโค้ดที่เหมาะสมเมื่อพบการจับคู่
|
|
|
- **รวม**กรณี `default` เพื่อจัดการค่าที่ไม่คาดคิด
|
|
|
- **ใช้**คำสั่ง `break` เพื่อป้องกันไม่ให้โค้ดดำเนินการไปยังกรณีถัดไป
|
|
|
|
|
|
> 💡 **การเปรียบเทียบในชีวิตจริง**: คิดว่า control flow เหมือนกับ GPS ที่อดทนที่สุดในโลกที่ให้คำแนะนำแก่คุณ มันอาจพูดว่า "ถ้ามีรถติดบนถนนหลัก ให้ใช้ทางหลวงแทน ถ้าการก่อสร้างปิดทางหลวง ให้ลองใช้เส้นทางชมวิว" โปรแกรมใช้ตรรกะเงื่อนไขแบบเดียวกันนี้เพื่อตอบสนองอย่างชาญฉลาดต่อสถานการณ์ต่างๆ และมอบประสบการณ์ที่ดีที่สุดให้กับผู้ใช้เสมอ
|
|
|
|
|
|
✅ **สิ่งที่จะเกิดขึ้นต่อไป**: เราจะสนุกสุดๆ กับการเจาะลึกแนวคิดเหล่านี้ในขณะที่เรายังคงเดินทางที่น่าทึ่งนี้ไปด้วยกัน! ตอนนี้แค่โฟกัสไปที่ความตื่นเต้นเกี่ยวกับความเป็นไปได้ที่น่าทึ่งทั้งหมดที่รอคุณอยู่ ทักษะและเทคนิคเฉพาะจะติดตัวคุณไปเองเมื่อเราฝึกฝนร่วมกัน – ฉันสัญญาว่านี่จะสนุกกว่าที่คุณคาดไว้มาก!
|
|
|
|
|
|
## เครื่องมือที่ใช้ในงาน
|
|
|
|
|
|
เอาล่ะ นี่คือส่วนที่ทำให้ฉันตื่นเต้นจนแทบจะควบคุมตัวเองไม่ได้! 🚀 เรากำลังจะพูดถึงเครื่องมือที่น่าทึ่งที่จะทำให้คุณรู้สึกเหมือนเพิ่งได้รับกุญแจสู่ยานอวกาศดิจิทัล
|
|
|
|
|
|
คุณรู้ไหมว่าเชฟมีมีดที่สมดุลอย่างสมบูรณ์แบบที่รู้สึกเหมือนเป็นส่วนหนึ่งของมือพวกเขา? หรือว่าศิลปินมีกีตาร์ตัวโปรดที่ดูเหมือนจะร้องเพลงทันทีที่พวกเขาสัมผัสมัน? นักพัฒนาก็มีเวอร์ชันของเครื่องมือวิเศษเหล่านี้ และนี่คือสิ่งที่จะทำให้คุณตื่นเต้นสุดๆ – ส่วนใหญ่ฟรีทั้งหมด!
|
|
|
|
|
|
ฉันแทบจะกระโดดออกจากเก้าอี้เมื่อคิดถึงการแบ่งปันสิ่งเหล่านี้กับคุณ เพราะมันเปลี่ยนแปลงวิธีที่เราเขียนซอฟต์แวร์ไปอย่างสิ้นเชิง เรากำลังพูดถึงผู้ช่วยเขียนโค้ดที่ขับเคลื่อนด้วย AI ที่สามารถช่วยเขียนโค้ดของคุณ (ฉันไม่ได้ล้อเล่น!), สภาพแวดล้อมคลาวด์ที่คุณสามารถสร้างแอปพลิเคชันทั้งหมดจากที่ไหนก็ได้ที่มี Wi-Fi และเครื่องมือดีบักที่ซับซ้อนจนเหมือนมีวิสัยทัศน์เอ็กซ์เรย์สำหรับโปรแกรมของคุณ
|
|
|
|
|
|
และนี่คือส่วนที่ยังทำให้ฉันขนลุก: สิ่งเหล่านี้ไม่ใช่ "เครื่องมือสำหรับผู้เริ่มต้น" ที่คุณจะเลิกใช้ในภายหลัง แต่มันคือเครื่องมือระดับมืออาชีพที่นักพัฒนาที่ Google, Netflix และสตูดิโอแอปอินดี้ที่คุณชื่นชอบกำลังใช้งานอยู่ในขณะนี้ คุณจะรู้สึกเหมือนเป็นมืออาชีพเมื่อใช้มัน!
|
|
|
|
|
|
### Code Editors และ IDEs: เพื่อนดิจิทัลคนใหม่ของคุณ
|
|
|
|
|
|
มาพูดถึง code editors กันเถอะ – สิ่งเหล่านี้จะกลายเป็นสถานที่โปรดใหม่ของคุณในการใช้เวลา! คิดว่ามันเป็นสถานที่ศักดิ์สิทธิ์สำหรับการเขียนโค้ดส่วนตัวของคุณ ที่คุณจะใช้เวลาส่วนใหญ่ในการสร้างและปรับปรุงผลงานดิจิทัลของคุณ
|
|
|
|
|
|
แต่สิ่งที่วิเศษเกี่ยวกับ editor สมัยใหม่คือ มันไม่ใช่แค่โปรแกรมแก้ไขข้อความที่หรูหรา มันเหมือนกับการมีที่ปรึกษาการเขียนโค้ดที่ฉลาดที่สุดและสนับสนุนที่สุดนั่งอยู่ข้างๆ คุณตลอด 24 ชั่วโมง มันช่วยจับข้อผิดพลาดของคุณก่อนที่คุณจะสังเกตเห็น แนะนำการปรับปรุงที่ทำให้คุณดูเหมือนอัจฉริยะ ช่วยให้คุณเข้าใจว่าโค้ดแต่ละชิ้นทำอะไร และบางตัวสามารถคาดเดาสิ่งที่คุณกำลังจะพิมพ์และเสนอให้จบความคิดของคุณ!
|
|
|
|
|
|
ฉันจำได้ตอนที่ฉันค้นพบ auto-completion ครั้งแรก – ฉันรู้สึกเหมือนอยู่ในโลกอนาคตจริงๆ คุณเริ่มพิมพ์อะไรบางอย่าง แล้ว editor ของคุณก็พูดว่า "เฮ้ คุณกำลังคิดถึงฟังก์ชันนี้ที่ทำในสิ่งที่คุณต้องการใช่ไหม?" มันเหมือนมีเพื่อนร่วมงานที่อ่านใจได้!
|
|
|
|
|
|
**อะไรที่ทำให้ editor เหล่านี้น่าทึ่ง?**
|
|
|
|
|
|
editor สมัยใหม่มีฟีเจอร์ที่น่าประทับใจมากมายที่ออกแบบมาเพื่อเพิ่มประสิทธิภาพการทำงานของคุณ:
|
|
|
|
|
|
| ฟีเจอร์ | สิ่งที่มันทำ | ทำไมมันถึงช่วยได้ |
|
|
|
|---------|--------------|------------------|
|
|
|
| **การไฮไลต์ไวยากรณ์** | ใช้สีแยกส่วนต่างๆ ของโค้ด | ทำให้โค้ดอ่านง่ายและช่วยหาข้อผิดพลาด |
|
|
|
| **การเติมโค้ดอัตโนมัติ** | แนะนำโค้ดขณะที่คุณพิมพ์ | เร่งการเขียนโค้ดและลดข้อผิดพลาด |
|
|
|
| **เครื่องมือดีบัก** | ช่วยคุณค้นหาและแก้ไขข้อผิดพลาด | ประหยัดเวลาการแก้ไขปัญหา |
|
|
|
| **ส่วนขยาย** | เพิ่มฟีเจอร์เฉพาะ | ปรับแต่ง editor ของคุณสำหรับเทคโนโลยีใดๆ |
|
|
|
| **ผู้ช่วย AI** | แนะนำโค้ดและคำอธิบาย | เร่งการเรียนรู้และเพิ่มประสิทธิภาพ |
|
|
|
|
|
|
> 🎥 **วิดีโอแหล่งข้อมูล**: อยากเห็นเครื่องมือเหล่านี้ในทางปฏิบัติ? ดู [วิดีโอ Tools of the Trade](https://youtube.com/watch?v=69WJeXGBdxg) สำหรับภาพรวมที่ครอบคลุม
|
|
|
|
|
|
#### Editor ที่แนะนำสำหรับการพัฒนาเว็บ
|
|
|
|
|
|
**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (ฟรี)
|
|
|
- เป็นที่นิยมที่สุดในหมู่นักพัฒนาเว็บ
|
|
|
- ระบบส่วนขยายที่ยอดเยี่ยม
|
|
|
- มี terminal และ Git ในตัว
|
|
|
- **ส่วนขยายที่ต้องมี**:
|
|
|
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - ข้อเสนอแนะโค้ดที่ขับเคลื่อนด้วย AI
|
|
|
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - การทำงานร่วมกันแบบเรียลไทม์
|
|
|
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - การจัดรูปแบบโค้ดอัตโนมัติ
|
|
|
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - จับข้อผิดพลาดการสะกดในโค้ดของคุณ
|
|
|
|
|
|
**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (มีค่าใช้จ่าย ฟรีสำหรับนักเรียน)
|
|
|
- เครื่องมือดีบักและทดสอบขั้นสูง
|
|
|
- การเติมโค้ดอัจฉริยะ
|
|
|
- การควบคุมเวอร์ชันในตัว
|
|
|
|
|
|
**IDE บนคลาวด์** (ราคาหลากหลาย)
|
|
|
- [GitHub Codespaces](https://github.com/features/codespaces) - VS Code เต็มรูปแบบในเบราว์เซอร์ของคุณ
|
|
|
- [Replit](https://replit.com/) - เหมาะสำหรับการเรียนรู้และแบ่งปันโค้ด
|
|
|
- [StackBlitz](https://stackblitz.com/) - การพัฒนาเว็บแบบ full-stack ทันที
|
|
|
|
|
|
> 💡 **เคล็ดลับเริ่มต้น**: เริ่มต้นด้วย Visual Studio Code – มันฟรี ใช้กันอย่างแพร่หลายในอุตสาหกรรม และมีชุมชนขนาดใหญ่ที่สร้างบทเรียนและส่วนขยายที่เป็นประโยชน์
|
|
|
|
|
|
### เว็บเบราว์เซอร์: ห้องทดลองลับสำหรับการพัฒนา
|
|
|
|
|
|
โอเค เตรียมตัวให้พร้อมที่จะตื่นตาตื่นใจ! คุณรู้ไหมว่าคุณใช้เบราว์เซอร์เพื่อเลื่อนดูโซเชียลมีเดียและดูวิดีโอ? จริงๆ แล้วมันซ่อนห้องทดลองนักพัฒนาที่น่าทึ่งไว้
|
|
|
| **คอนโซล** | ดูข้อความแสดงข้อผิดพลาดและทดสอบ JavaScript | แก้ไขปัญหาและทดลองเขียนโค้ด |
|
|
|
| **Network Monitor** | ติดตามการโหลดทรัพยากร | ปรับปรุงประสิทธิภาพและเวลาในการโหลด |
|
|
|
| **Accessibility Checker** | ทดสอบการออกแบบที่ครอบคลุม | ตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณใช้งานได้สำหรับผู้ใช้ทุกคน |
|
|
|
| **Device Simulator** | ดูตัวอย่างบนขนาดหน้าจอที่แตกต่างกัน | ทดสอบการออกแบบที่ตอบสนองโดยไม่ต้องใช้หลายอุปกรณ์ |
|
|
|
|
|
|
#### เบราว์เซอร์ที่แนะนำสำหรับการพัฒนา
|
|
|
|
|
|
- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - DevTools มาตรฐานอุตสาหกรรมพร้อมเอกสารประกอบที่ครอบคลุม
|
|
|
- **[Firefox](https://developer.mozilla.org/docs/Tools)** - เครื่องมือ CSS Grid และการเข้าถึงที่ยอดเยี่ยม
|
|
|
- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - สร้างบน Chromium พร้อมทรัพยากรสำหรับนักพัฒนาของ Microsoft
|
|
|
|
|
|
> ⚠️ **เคล็ดลับสำคัญในการทดสอบ**: ทดสอบเว็บไซต์ของคุณในหลายเบราว์เซอร์เสมอ! สิ่งที่ทำงานได้ดีใน Chrome อาจดูแตกต่างใน Safari หรือ Firefox นักพัฒนามืออาชีพจะทดสอบในเบราว์เซอร์หลักทั้งหมดเพื่อให้แน่ใจว่าประสบการณ์ของผู้ใช้มีความสม่ำเสมอ
|
|
|
|
|
|
|
|
|
### เครื่องมือ Command Line: ประตูสู่พลังพิเศษของนักพัฒนา
|
|
|
|
|
|
เอาล่ะ มาคุยกันแบบตรงไปตรงมาเกี่ยวกับ Command Line เพราะฉันอยากให้คุณได้ยินเรื่องนี้จากคนที่เข้าใจจริงๆ ตอนที่ฉันเห็นมันครั้งแรก – แค่หน้าจอสีดำที่มีข้อความกระพริบ – ฉันคิดในใจว่า "ไม่เอาเด็ดขาด! นี่มันเหมือนฉากในหนังแฮกเกอร์ยุค 80 และฉันไม่ฉลาดพอสำหรับสิ่งนี้แน่ๆ!" 😅
|
|
|
|
|
|
แต่สิ่งที่ฉันอยากให้มีคนบอกฉันในตอนนั้น และสิ่งที่ฉันจะบอกคุณตอนนี้คือ Command Line ไม่ได้น่ากลัวเลย – มันเหมือนกับการพูดคุยโดยตรงกับคอมพิวเตอร์ของคุณ ลองคิดดูเหมือนการสั่งอาหารผ่านแอปหรูที่มีรูปภาพและเมนู (ซึ่งง่ายและสะดวก) เทียบกับการเดินเข้าไปในร้านอาหารโปรดที่เชฟรู้ว่าคุณชอบอะไรและสามารถทำอาหารที่สมบูรณ์แบบได้เพียงแค่คุณพูดว่า "ทำอะไรอร่อยๆ ให้ฉันหน่อย"
|
|
|
|
|
|
Command Line คือที่ที่นักพัฒนาไปเพื่อรู้สึกเหมือนพ่อมดตัวจริง คุณพิมพ์คำไม่กี่คำ (โอเค มันคือคำสั่ง แต่รู้สึกเหมือนเวทมนตร์!) กด Enter และ BOOM – คุณสร้างโครงสร้างโปรเจกต์ทั้งหมด ติดตั้งเครื่องมือที่ทรงพลังจากทั่วโลก หรือเผยแพร่แอปของคุณบนอินเทอร์เน็ตให้คนหลายล้านคนได้เห็น เมื่อคุณได้ลิ้มรสพลังนั้นครั้งแรก มันจะกลายเป็นสิ่งที่น่าติดใจจริงๆ!
|
|
|
|
|
|
**ทำไม Command Line จะกลายเป็นเครื่องมือโปรดของคุณ:**
|
|
|
|
|
|
ในขณะที่อินเทอร์เฟซกราฟิกเหมาะสำหรับหลายงาน Command Line โดดเด่นในเรื่องการทำงานอัตโนมัติ ความแม่นยำ และความเร็ว เครื่องมือพัฒนาหลายตัวทำงานผ่าน Command Line เป็นหลัก และการเรียนรู้ที่จะใช้มันอย่างมีประสิทธิภาพสามารถปรับปรุงประสิทธิภาพการทำงานของคุณได้อย่างมาก
|
|
|
|
|
|
```bash
|
|
|
# Step 1: Create and navigate to project directory
|
|
|
mkdir my-awesome-website
|
|
|
cd my-awesome-website
|
|
|
```
|
|
|
|
|
|
**โค้ดนี้ทำอะไร:**
|
|
|
- **สร้าง** ไดเรกทอรีใหม่ชื่อ "my-awesome-website" สำหรับโปรเจกต์ของคุณ
|
|
|
- **เข้าไป**ในไดเรกทอรีที่สร้างขึ้นใหม่เพื่อเริ่มทำงาน
|
|
|
|
|
|
```bash
|
|
|
# Step 2: Initialize project with package.json
|
|
|
npm init -y
|
|
|
|
|
|
# Install modern development tools
|
|
|
npm install --save-dev vite prettier eslint
|
|
|
npm install --save-dev @eslint/js
|
|
|
```
|
|
|
|
|
|
**ทีละขั้นตอน สิ่งที่เกิดขึ้นคือ:**
|
|
|
- **เริ่มต้น**โปรเจกต์ Node.js ใหม่ด้วยการตั้งค่าเริ่มต้นโดยใช้ `npm init -y`
|
|
|
- **ติดตั้ง** Vite เป็นเครื่องมือสร้างสมัยใหม่สำหรับการพัฒนาและการสร้างโปรดักชั่นที่รวดเร็ว
|
|
|
- **เพิ่ม** Prettier สำหรับการจัดรูปแบบโค้ดอัตโนมัติและ ESLint สำหรับการตรวจสอบคุณภาพโค้ด
|
|
|
- **ใช้** ตัวเลือก `--save-dev` เพื่อระบุว่าเป็นการพึ่งพาสำหรับการพัฒนาเท่านั้น
|
|
|
|
|
|
```bash
|
|
|
# Step 3: Create project structure and files
|
|
|
mkdir src assets
|
|
|
echo '<!DOCTYPE html><html><head><title>My Site</title></head><body><h1>Hello World</h1></body></html>' > index.html
|
|
|
|
|
|
# Start development server
|
|
|
npx vite
|
|
|
```
|
|
|
|
|
|
**ในโค้ดด้านบน เราได้:**
|
|
|
- **จัดระเบียบ**โปรเจกต์ของเราโดยการสร้างโฟลเดอร์แยกสำหรับโค้ดต้นฉบับและทรัพยากร
|
|
|
- **สร้าง**ไฟล์ HTML พื้นฐานที่มีโครงสร้างเอกสารที่เหมาะสม
|
|
|
- **เริ่มต้น**เซิร์ฟเวอร์พัฒนา Vite สำหรับการรีโหลดสดและการแทนที่โมดูลแบบร้อน
|
|
|
|
|
|
#### เครื่องมือ Command Line ที่จำเป็นสำหรับการพัฒนาเว็บ
|
|
|
|
|
|
| เครื่องมือ | วัตถุประสงค์ | ทำไมคุณถึงต้องการมัน |
|
|
|
|------------|---------------|-------------------------|
|
|
|
| **[Git](https://git-scm.com/)** | การควบคุมเวอร์ชัน | ติดตามการเปลี่ยนแปลง ทำงานร่วมกับผู้อื่น สำรองงานของคุณ |
|
|
|
| **[Node.js & npm](https://nodejs.org/)** | รันไทม์ JavaScript และการจัดการแพ็กเกจ | รัน JavaScript นอกเบราว์เซอร์ ติดตั้งเครื่องมือพัฒนาสมัยใหม่ |
|
|
|
| **[Vite](https://vitejs.dev/)** | เครื่องมือสร้างและเซิร์ฟเวอร์พัฒนา | การพัฒนาที่รวดเร็วด้วยการแทนที่โมดูลแบบร้อน |
|
|
|
| **[ESLint](https://eslint.org/)** | คุณภาพโค้ด | ค้นหาและแก้ไขปัญหาใน JavaScript ของคุณโดยอัตโนมัติ |
|
|
|
| **[Prettier](https://prettier.io/)** | การจัดรูปแบบโค้ด | ทำให้โค้ดของคุณมีรูปแบบที่สม่ำเสมอและอ่านง่าย |
|
|
|
|
|
|
#### ตัวเลือกเฉพาะแพลตฟอร์ม
|
|
|
|
|
|
**Windows:**
|
|
|
- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - เทอร์มินัลที่ทันสมัยและมีฟีเจอร์หลากหลาย
|
|
|
- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - สภาพแวดล้อมการเขียนสคริปต์ที่ทรงพลัง
|
|
|
- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Command Line แบบดั้งเดิมของ Windows
|
|
|
|
|
|
**macOS:**
|
|
|
- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - แอปพลิเคชันเทอร์มินัลในตัว
|
|
|
- **[iTerm2](https://iterm2.com/)** - เทอร์มินัลที่ปรับปรุงด้วยฟีเจอร์ขั้นสูง
|
|
|
|
|
|
**Linux:**
|
|
|
- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Shell มาตรฐานของ Linux
|
|
|
- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - เทอร์มินัลอีมูเลเตอร์ขั้นสูง
|
|
|
|
|
|
> 💻 = ติดตั้งมาพร้อมกับระบบปฏิบัติการ
|
|
|
|
|
|
> 🎯 **เส้นทางการเรียนรู้**: เริ่มต้นด้วยคำสั่งพื้นฐาน เช่น `cd` (เปลี่ยนไดเรกทอรี), `ls` หรือ `dir` (แสดงรายการไฟล์), และ `mkdir` (สร้างโฟลเดอร์) ฝึกฝนคำสั่งในเวิร์กโฟลว์สมัยใหม่ เช่น `npm install`, `git status`, และ `code .` (เปิดไดเรกทอรีปัจจุบันใน VS Code) เมื่อคุณเริ่มคุ้นเคย คุณจะเรียนรู้คำสั่งขั้นสูงและเทคนิคการทำงานอัตโนมัติได้เอง
|
|
|
|
|
|
|
|
|
### เอกสาร: ครูที่พร้อมให้คำแนะนำเสมอ
|
|
|
|
|
|
โอเค ฉันจะบอกความลับเล็กๆ ที่จะทำให้คุณรู้สึกดีขึ้นเกี่ยวกับการเป็นมือใหม่: แม้แต่นักพัฒนาที่มีประสบการณ์มากที่สุดก็ใช้เวลาส่วนใหญ่ในการอ่านเอกสาร และนั่นไม่ใช่เพราะพวกเขาไม่รู้ว่ากำลังทำอะไรอยู่ – แต่จริงๆ แล้วมันเป็นสัญญาณของความฉลาด!
|
|
|
|
|
|
ลองคิดว่าเอกสารเป็นเหมือนการมีครูที่อดทนและมีความรู้มากที่สุดในโลกที่พร้อมให้คำแนะนำตลอด 24 ชั่วโมง ติดปัญหาเวลา 2 ทุ่ม? เอกสารอยู่ตรงนั้นพร้อมคำตอบที่คุณต้องการ อยากเรียนรู้ฟีเจอร์ใหม่ๆ ที่ทุกคนพูดถึง? เอกสารช่วยคุณได้ด้วยตัวอย่างทีละขั้นตอน พยายามเข้าใจว่าทำไมบางสิ่งถึงทำงานแบบนั้น? ใช่แล้ว – เอกสารพร้อมอธิบายให้คุณเข้าใจในแบบที่ทำให้คุณรู้สึก "อ๋อ!"
|
|
|
|
|
|
นี่คือสิ่งที่เปลี่ยนมุมมองของฉันไปเลย: โลกของการพัฒนาเว็บเคลื่อนไหวเร็วมาก และไม่มีใคร (ฉันหมายถึงไม่มีใครเลย!) จำทุกอย่างได้หมด ฉันเคยเห็นนักพัฒนาระดับสูงที่มีประสบการณ์มากกว่า 15 ปีค้นหาคำสั่งพื้นฐาน และคุณรู้ไหม? นั่นไม่ใช่เรื่องน่าอาย – มันคือความฉลาด! มันไม่ใช่เรื่องของการจำทุกอย่างให้ได้ แต่เป็นเรื่องของการรู้ว่าจะหาคำตอบที่เชื่อถือได้จากที่ไหนและเข้าใจวิธีการนำไปใช้
|
|
|
|
|
|
**นี่คือจุดที่ความมหัศจรรย์เกิดขึ้น:**
|
|
|
|
|
|
นักพัฒนามืออาชีพใช้เวลาส่วนใหญ่ในการอ่านเอกสาร – ไม่ใช่เพราะพวกเขาไม่รู้ว่ากำลังทำอะไรอยู่ แต่เพราะโลกของการพัฒนาเว็บเปลี่ยนแปลงอย่างรวดเร็ว การติดตามความทันสมัยต้องการการเรียนรู้อย่างต่อเนื่อง เอกสารที่ดีช่วยให้คุณเข้าใจไม่เพียงแค่ *วิธี* ใช้บางสิ่ง แต่ยัง *ทำไม* และ *เมื่อไหร่* ที่ควรใช้มัน
|
|
|
|
|
|
#### แหล่งข้อมูลเอกสารที่จำเป็น
|
|
|
|
|
|
**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)**
|
|
|
- มาตรฐานทองคำสำหรับเอกสารเทคโนโลยีเว็บ
|
|
|
- คู่มือที่ครอบคลุมสำหรับ HTML, CSS, และ JavaScript
|
|
|
- รวมข้อมูลความเข้ากันได้ของเบราว์เซอร์
|
|
|
- มีตัวอย่างที่ใช้งานได้จริงและการสาธิตแบบโต้ตอบ
|
|
|
|
|
|
**[Web.dev](https://web.dev)** (โดย Google)
|
|
|
- แนวทางปฏิบัติที่ดีที่สุดสำหรับการพัฒนาเว็บสมัยใหม่
|
|
|
- คู่มือการปรับปรุงประสิทธิภาพ
|
|
|
- หลักการออกแบบที่ครอบคลุมและการเข้าถึง
|
|
|
- กรณีศึกษาจากโปรเจกต์จริง
|
|
|
|
|
|
**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)**
|
|
|
- ทรัพยากรการพัฒนาเบราว์เซอร์ Edge
|
|
|
- คู่มือ Progressive Web App
|
|
|
- ข้อมูลเชิงลึกเกี่ยวกับการพัฒนาข้ามแพลตฟอร์ม
|
|
|
|
|
|
**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)**
|
|
|
- หลักสูตรการเรียนรู้ที่มีโครงสร้าง
|
|
|
- วิดีโอคอร์สจากผู้เชี่ยวชาญในอุตสาหกรรม
|
|
|
- แบบฝึกหัดการเขียนโค้ดด้วยตัวเอง
|
|
|
|
|
|
> 📚 **กลยุทธ์การศึกษา**: อย่าพยายามจำเอกสาร – แต่เรียนรู้วิธีการนำทางมันอย่างมีประสิทธิภาพ บุ๊กมาร์กแหล่งข้อมูลที่ใช้บ่อยและฝึกใช้ฟังก์ชันการค้นหาเพื่อหาข้อมูลเฉพาะได้อย่างรวดเร็ว
|
|
|
|
|
|
✅ **ข้อคิดที่น่าสนใจ**: ลองคิดดู – คุณคิดว่าเครื่องมือสำหรับการสร้างเว็บไซต์ (การพัฒนา) แตกต่างจากเครื่องมือสำหรับการออกแบบหน้าตาเว็บไซต์ (การออกแบบ) อย่างไร? มันเหมือนกับความแตกต่างระหว่างการเป็นสถาปนิกที่ออกแบบบ้านที่สวยงามและผู้รับเหมาที่สร้างมันขึ้นมาจริงๆ ทั้งสองมีความสำคัญ แต่พวกเขาต้องการเครื่องมือที่แตกต่างกัน! การคิดแบบนี้จะช่วยให้คุณมองเห็นภาพรวมของการสร้างเว็บไซต์ได้ดีขึ้น
|
|
|
|
|
|
|
|
|
## GitHub Copilot Agent Challenge 🚀
|
|
|
|
|
|
ใช้โหมด Agent เพื่อทำภารกิจต่อไปนี้:
|
|
|
|
|
|
**คำอธิบาย:** สำรวจฟีเจอร์ของโปรแกรมแก้ไขโค้ดหรือ IDE สมัยใหม่ และแสดงให้เห็นว่ามันสามารถปรับปรุงการทำงานของคุณในฐานะนักพัฒนาเว็บได้อย่างไร
|
|
|
|
|
|
**คำถาม:** เลือกโปรแกรมแก้ไขโค้ดหรือ IDE (เช่น Visual Studio Code, WebStorm หรือ IDE บนคลาวด์) ระบุฟีเจอร์หรือส่วนขยายสามอย่างที่ช่วยให้คุณเขียน แก้ไข หรือดูแลรักษาโค้ดได้อย่างมีประสิทธิภาพ สำหรับแต่ละฟีเจอร์ ให้คำอธิบายสั้นๆ ว่ามันช่วยปรับปรุงการทำงานของคุณอย่างไร
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🚀 ภารกิจ
|
|
|
|
|
|
**พร้อมสำหรับเคสแรกของคุณหรือยัง?**
|
|
|
|
|
|
ตอนนี้คุณมีพื้นฐานที่ยอดเยี่ยมแล้ว ฉันมีภารกิจที่จะช่วยให้คุณเห็นว่าโลกของการเขียนโปรแกรมนั้นหลากหลายและน่าสนใจแค่ไหน และฟังนะ – นี่ไม่ใช่เรื่องของการเขียนโค้ดในตอนนี้ ดังนั้นไม่ต้องกดดัน! ลองคิดว่าตัวเองเป็นนักสืบภาษาโปรแกรมในเคสที่น่าตื่นเต้นครั้งแรกของคุณ!
|
|
|
|
|
|
**ภารกิจของคุณ หากคุณเลือกที่จะรับมัน:**
|
|
|
1. **เป็นนักสำรวจภาษา**: เลือกภาษาการเขียนโปรแกรมสามภาษาในจักรวาลที่แตกต่างกัน – อาจเป็นภาษาที่สร้างเว็บไซต์ ภาษาที่สร้างแอปมือถือ และภาษาที่วิเคราะห์ข้อมูลสำหรับนักวิทยาศาสตร์ ค้นหาตัวอย่างของงานง่ายๆ ที่เขียนในแต่ละภาษา ฉันรับรองว่าคุณจะทึ่งกับความแตกต่างของมันแม้จะทำงานเหมือนกัน!
|
|
|
|
|
|
2. **ค้นหาประวัติของพวกมัน**: อะไรทำให้แต่ละภาษามีความพิเศษ? นี่คือข้อเท็จจริงที่น่าสนใจ – ทุกภาษาการเขียนโปรแกรมถูกสร้างขึ้นเพราะมีคนคิดว่า "รู้ไหม? ต้องมีวิธีที่ดีกว่าในการแก้ปัญหานี้" คุณสามารถค้นหาว่าปัญหาเหล่านั้นคืออะไรได้ไหม? บางเรื่องราวเหล่านี้น่าสนใจจริงๆ!
|
|
|
|
|
|
3. **พบปะชุมชน**: ดูว่าชุมชนของแต่ละภาษามีความเป็นมิตรและมีความหลงใหลแค่ไหน บางชุมชนมีนักพัฒนาหลายล้านคนที่แบ่งปันความรู้และช่วยเหลือกัน บางชุมชนอาจเล็กกว่าแต่มีความสนิทสนมและสนับสนุนกันอย่างมาก คุณจะสนุกกับการเห็นบุคลิกที่แตกต่างของชุมชนเหล่านี้!
|
|
|
|
|
|
4. **ตามความรู้สึกของคุณ**: ภาษาไหนที่รู้สึกว่าเข้าถึงได้มากที่สุดสำหรับคุณในตอนนี้? อย่ากังวลเกี่ยวกับการเลือกที่ "สมบูรณ์แบบ" – แค่ฟังความรู้สึกของคุณ! ไม่มีคำตอบที่ผิดที่นี่ และคุณสามารถสำรวจภาษาอื่นๆ ได้ในภายหลัง
|
|
|
|
|
|
**งานนักสืบเพิ่มเติม**: ลองค้นหาว่าเว็บไซต์หรือแอปสำคัญๆ ถูกสร้างด้วยภาษาใด ฉันรับรองว่าคุณจะตกใจเมื่อรู้ว่า Instagram, Netflix หรือเกมมือถือที่คุณเล่นไม่หยุดนั้นใช้ภาษาอะไร!
|
|
|
|
|
|
> 💡 **จำไว้ว่า**: คุณไม่ได้พยายามเป็นผู้เชี่ยวชาญในภาษาเหล่านี้ในวันนี้ คุณแค่ทำความรู้จักกับพื้นที่ก่อนที่จะตัดสินใจว่าจะตั้งรกรากที่ไหน ใช้เวลาให้เต็มที่ สนุกกับมัน และปล่อยให้ความอยากรู้อยากเห็นนำทางคุณ!
|
|
|
|
|
|
## มาฉลองสิ่งที่คุณค้นพบกันเถอะ!
|
|
|
|
|
|
โอ้โห คุณได้รับข้อมูลที่น่าทึ่งมากมายในวันนี้! ฉันตื่นเต้นจริงๆ ที่ได้เห็นว่าคุณได้เรียนรู้อะไรจากการเดินทางที่น่าทึ่งนี้ และจำไว้ – นี่ไม่ใช่การทดสอบที่คุณต้องทำให้สมบูรณ์แบบ นี่เป็นเหมือนการเฉลิมฉลองสิ่งที่เจ๋งๆ ที่คุณได้เรียนรู้เกี่ยวกับโลกที่น่าตื่นเต้นนี้!
|
|
|
|
|
|
[ทำแบบทดสอบหลังบทเรียน](https://ff-quizzes.netlify.app/web/)
|
|
|
|
|
|
## ทบทวนและศึกษาด้วยตัวเอง
|
|
|
|
|
|
**ใช้เวลาในการสำรวจและสนุกกับมัน!**
|
|
|
|
|
|
คุณได้เรียนรู้สิ่งต่างๆ มากมายในวันนี้ และนั่นเป็นสิ่งที่น่าภาคภูมิใจ! ตอนนี้ถึงเวลาสนุก – สำรวจหัวข้อที่ทำให้คุณสน
|
|
|
- ดูวิดีโอการเขียนโค้ดสำหรับผู้เริ่มต้นบน YouTube มีผู้สร้างเนื้อหาที่เยี่ยมยอดมากมายที่เข้าใจความรู้สึกของการเริ่มต้นใหม่
|
|
|
- ลองเข้าร่วมการพบปะในพื้นที่หรือชุมชนออนไลน์ เชื่อเถอะ นักพัฒนาชอบช่วยเหลือมือใหม่เสมอ!
|
|
|
|
|
|
> 🎯 **ฟังนะ นี่คือสิ่งที่ฉันอยากให้คุณจำไว้**: ไม่มีใครคาดหวังให้คุณกลายเป็นเซียนเขียนโค้ดในชั่วข้ามคืน! ตอนนี้คุณแค่เริ่มต้นทำความรู้จักกับโลกใหม่ที่น่าทึ่งนี้ที่คุณกำลังจะเป็นส่วนหนึ่ง ใช้เวลาให้เต็มที่ สนุกกับการเดินทาง และจำไว้ว่า – นักพัฒนาทุกคนที่คุณชื่นชมเคยอยู่ในจุดเดียวกับคุณมาก่อน รู้สึกตื่นเต้นและอาจจะงงเล็กน้อย นั่นเป็นเรื่องปกติ และมันหมายความว่าคุณกำลังเดินมาถูกทางแล้ว!
|
|
|
|
|
|
## งานที่ได้รับมอบหมาย
|
|
|
|
|
|
[อ่านเอกสาร](assignment.md)
|
|
|
|
|
|
> 💡 **คำแนะนำเล็กๆ สำหรับงานของคุณ**: ฉันอยากเห็นคุณลองสำรวจเครื่องมือบางอย่างที่เรายังไม่ได้พูดถึง! ข้ามเครื่องมือแก้ไขโค้ด เบราว์เซอร์ และเครื่องมือบรรทัดคำสั่งที่เราได้พูดถึงไปแล้ว – ยังมีจักรวาลของเครื่องมือพัฒนาที่น่าทึ่งอีกมากมายที่รอให้คุณค้นพบ มองหาเครื่องมือที่ยังมีการดูแลรักษาอย่างต่อเนื่องและมีชุมชนที่มีชีวิตชีวาและช่วยเหลือดี (เครื่องมือเหล่านี้มักจะมีบทเรียนที่ยอดเยี่ยมและคนที่พร้อมช่วยเหลือเมื่อคุณติดขัดและต้องการคำแนะนำที่เป็นมิตร)
|
|
|
|
|
|
---
|
|
|
|
|
|
**ข้อจำกัดความรับผิดชอบ**:
|
|
|
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ |
