บทความ IT เจ๋งๆ

JavaScript ถูกใช้งานบนนับล้าน Websites จากทั่วโลกและความนิยมคงไม่จางหายไปในเร็ว ๆ นี้ JavaScript มีหลาย Frameworks และมี Libraries ให้ใช้มากมาย แต่ก่อนอื่น คุณควรรู้จัก Concept พื้นฐานของ JavaScript ที่ Developers ทุกคนควรเข้าใจกันก่อน และบทความนี้ก็เป็น 10 JavaScript Concepts ที่ Developer ทุกคนควรรู้จักเอาไว้ 

1. Asynchronous Communication

Asynchronous Communication หรือเรียกว่า AJAX (Asynchronous JavaScript และ XML) มีบทบาทสำคัญในการ Design และการทำงานของ Websites สมัยใหม่

AJAX ช่วยให้คุณสามารถ Load ข้อมูลบน Website ของคุณแบบ Dynamic โดยที่ไม่ต้อง Refresh ทั้ง Page ซึ่งข้อดีก็คือ จะมีการส่ง Data จาก Server น้อยลงกรณีที่คุณต้องการเปลี่ยนแปลง Page เฉพาะแค่บางส่วนเท่านั้น นอกจากนี้มันยังช่วยปรับปรุง User Experience ด้วย Loading Times ที่เร็วขึ้น และไม่ต้อง Load ทั้ง Page ใหม่ทุกครั้งที่มีการเปลี่ยนแปลงบางอย่าง

2. Dom Creation & Modification

ความสามารถในการ Create หรือ Edit Elements บน Web Page จะทำให้คุณสามารถสร้าง Dynamic Web Pages ที่สามารถเปลี่ยนแปลงได้ตามการโต้ตอบของ User

3. Loops

Loops ถือเป็นองค์ประกอบสำคัญของภาษา Programming ต่าง ๆ Loops จะช่วยให้คุณทำกระบวนการบางอย่างกับ Blocks ของ Code ได้ซ้ำ ๆ หลายครั้งตามที่คุณต้องการ ดังนั้นคุณจึงไม่จำเป็นต้องเขียน Code ชุดเดิมซ้ำ ๆ นอกจากนี้ Loops ยังช่วยให้คุณสามารถวนซ้ำผ่าน Data Structures โดยไม่ต้องใช้ความพยายามมากมายใด ๆ การทำความเข้าใจว่า “ควรใช้งาน Loops อย่างไร เมื่อใด และเพราะอะไร” จึงเป็นสิ่งที่จำเป็นสำหรับ Programmers

4. Debugging Development Tools

Web Browsers แทบทั้งหมดมี Developer Tool สำหรับการ Debug อยู่จำพวกหนึ่ง แม้แต่เครื่องมือที่คุณกำลังใช้อยู่ก็ตาม หากคุณใช้ Chrome ให้คุณ “คลิกขวา” แล้วเลือก “Inspect” คุณควรเห็น "Panel" ที่ด้านล่างหรือขวาของ Browser

นี่คือ Developer Tools และตามที่ได้กล่าวไว้แล้วข้างต้น Browsers ทั้งหมดมี Module หรือสิ่งใดก็ตาม เพื่อช่วย Developers สามารถ Debug Code ของพวกเขา คุณจะพบข้อมูลทั้งหมดเกี่ยวกับ Page/Site รวมถึงข้อมูลเกี่ยวกับ HTML, CSS และ JavaScript อย่างแน่นอน ความสามารถในการใช้ Developer Tools เพื่อ Debug Code ควรเป็นทักษะที่คุณควรฝึกฝนและพัฒนาตั้งแต่เริ่มต้น

5. Scope

บางทีหนึ่งใน Concept ที่ยากที่สุดสำหรับ Developers มือใหม่ที่จะเข้าใจก็คือ Scope และมันก็เป็น Concept ที่สำคัญที่ต้องเข้าใจ โดยทั่วไปเมื่อพูดถึง Scope จะมีอยู่ 2 ประเภทหลัก ๆ ก็คือ Global และ Local เมื่อมีการประกาศตัวแปรภายนอก Function ก็จะถือว่าเป็นตัวแปร Global และสามารถเข้าถึงได้จากทุกที่ใน Code ส่วนตัวแปรที่ประกาศใน Function ก็จะถือเป็นตัวแปร Local และสามารถเข้าถึงได้เฉพาะภายใน Function นั้น เท่านั้น!

นี่คือ Scope ในรูปแบบที่เป็นพื้นฐานที่สุด และมันสามารถซับซ้อนได้มากกว่าที่คิด แต่การทำความเข้าใจ Concepts เหล่านี้ให้เร็วที่สุดเท่าที่จะเป็นไปได้ จะสามารถช่วยให้คุณสร้างรากฐานที่มั่นคงเพื่อก้าวไปสู่การเป็น Web Developer ได้

6. Features & Functions Calls

เช่นเดียวกันกับ Loops, Functions ถือเป็น Programming Concept ที่เป็นพื้นฐานและเป็นสากลในภาษา Programming ส่วนใหญ่ Functions จะช่วยให้คุณสามารถเข้าใจการทำงาน Blocks ของ Code ที่สามารถใช้งานได้ในภายหลังด้วยการเรียกใช้ Function

7. Conditional Statements

เมื่อกล่าวถึง Conditional Statements สิ่งเหล่านี้ก็เป็นพื้นฐานของ ตรรกะ/การตัดสินใจ ทั้งหมดที่เกิดขึ้นใน Code หากเงื่อนไขใดเป็นจริงก็จงทำสิ่งนี้ แต่ถ้าไม่จริงก็ให้ทำสิ่งนั้น ทุก ๆ การตัดสินใจใน Code ของคุณ จะเกิดขึ้นโดยใช้ Conditional Statement บางประเภท สิ่งนี้จะช่วยให้คุณสามารถควบคุมได้ว่าจะให้ Code ของคุณทำอะไรบ้าง ตามสถานการณ์และตัวแปรต่าง ๆ

8. Events & Event Handling

Code ส่วนใหญ่หรือทั้งหมดที่ถูก Execute โดย Web Page จะถูกดำเนินการหรือกระตุ้นจาก Event บางประเภท Events ส่วนหนึ่งที่มักพบได้บ่อยที่สุด ได้แก่ Page Load, Click, Mouseover ฯลฯ คุณควรทำความเข้าใจ Events ต่าง ๆ ใน JavaScript รวมทั้งดูว่ามันจะเกิดขึ้นเมื่อใด

9. Referencing Variables, Values ​​& Data Types

การเขียน Program เป็นเรื่องของการจัดการกับข้อมูล และทำให้การดำเนินการต่าง ๆ ทำงานถูกต้องสมบูรณ์ คุณยังจำพีชคณิตตอนยังเรียนได้ไหม เช่น x = y + 3 โดยที่ X และ Y เป็นตัวแปรที่สามารถแทนจำนวนใด ๆ ก็ได้ ในขณะที่เขียนProgram เราใช้ตัวแปรเพื่อจัดเก็บข้อมูลในรูปแบบที่แตกต่างกัน เช่น Numbers, Strings และ Boolean Values

สิ่งเหล่านี้ถือเป็นค่าของตัวแปร ตัวแปรอีกประเภทหนึ่งก็คือ Arrays และ Objects ซึ่งในแง่ที่ง่ายที่สุดคือ Containers ที่มีการจัดกลุ่มของตัวแปรอื่น ๆ (ลองนึกถึงให้ แผงไข่เป็น Array และไข่แต่ละฟอง ก็เป็นตัวแปรที่ประกอบด้วย ข้อมูลบางประเภท) Arrays และ Objects เป็นตัวแปรอ้างอิง (Reference Variables) การทำความเข้าใจความแตกต่างระหว่างตัวแปร และ Data Types ต่าง ๆ จะสามารถช่วยคุณสร้างรากฐานที่มั่นคงสำหรับการเดินทางสู่การเป็น Developer ได้

10. Overcome the DOM: with what JavaScript?

JavaScript มีวัตถุประสงค์ (แต่เดิม) เพื่อปรับปรุง User Experience บน Web Page โดยเพิ่มชุดรายละเอียดเป็นหลัก JavaScript จะช่วยให้เราสามารถเปลี่ยนแปลง Page ของเราได้แบบ Dynamic ตามการโต้ตอบของ User, สร้างประสบการณ์ที่น่าพึงพอใจและมีความหมายมากขึ้นสำหรับ User ปัจจุบัน JavaScript ถูกใช้เพื่อสร้าง Web Applications และแม้แต่ Web Games ที่ค่อนข้างมีความซับซ้อนและน่าดึงดูดใจ JavaScript ถือเป็นเครื่องมืออันทรงพลังสำหรับ Web Developers แต่มันไม่สำคัญเลยหากคุณไม่สามารถก้าวผ่านหรือไม่เข้าใจใน DOM

DOM (Document Object Model) เป็น Tree Structure ที่แสดงถึง HTML Elements ทั้งหมดที่ประกอบเป็น Web Page ของคุณ การทำความเข้าใจวิธี Navigate DOM โดยใช้ JavaScript ถือเป็นทักษะพื้นฐานที่สำคัญที่สุดอย่างหนึ่งอย่างไม่ต้องสงสัย ตามที่กล่าวไว้ข้างต้น JavaScript มุ่งหวังที่จะปรับปรุง User Experience โดยการปรับเปลี่ยน Page แบบ Dynamic ตามความต้องการและความจำเป็นของ User ซึ่งสิ่งนี้เป็นไปไม่ได้หากคุณไม่ทราบวิธีเข้าถึง p Tag ที่ซ้อนอยู่ใน div ด้วย Parent Content ID

ที่มา: https://emma-delaney.medium.com/

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

บทความล่าสุด

• IT & Digital Events in March 2024
• 18 GitHub Repositories ที่คุณควร Bookmark ไว้ สำหรับปี 2024
• 15 Websites ที่ช่วยประหยัดเวลาทำงานของ CSS Developer