คำถามและคำตอบสำหรับการสัมภาษณ์นักพัฒนาเว็บ 25 อันดับแรกที่ต้องรู้

นักพัฒนาเว็บยังคงเป็นที่ต้องการเนื่องจากอินเทอร์เน็ตยังคงเติบโตอย่างต่อเนื่อง อย่างไรก็ตาม หากต้องการได้งาน คุณต้องกำหนดวันสัมภาษณ์กับนายจ้างเสียก่อน

แม้ว่าทีมงานขนาดใหญ่จะมักจ้างนักพัฒนาฝั่งฟรอนต์เอนด์หรือแบ็คเอนด์โดยเฉพาะ แต่ทีมงานขนาดเล็กและสตาร์ทอัพมักจะจ้างนักพัฒนาแบบฟูลสแตก ดังนั้น การทราบข้อมูลให้มากที่สุดจึงเป็นประโยชน์

ต่อไปนี้เป็นรายการคำถามสัมภาษณ์นักพัฒนาเว็บ 25 อันดับแรกที่ต้องรู้พร้อมคำตอบเพื่อช่วยให้คุณเตรียมความพร้อมได้

1. บทบาทของ HTML, JavaScript และ CSS ในการพัฒนาเว็บคืออะไร?

HTML ย่อมาจาก HyperText Markup Language และเป็นภาษามาตรฐานสำหรับการพัฒนาเอกสารเพื่อเผยแพร่บนเว็บ JavaScript และ CSS เป็นส่วนเสริม

JavaScript ได้รับการออกแบบมาเป็นภาษาโปรแกรมสำหรับฝั่งไคลเอ็นต์ โดยจะทำงานในเบราว์เซอร์เพื่อเพิ่มฟังก์ชันต่างๆ ให้กับหน้าเว็บ CSS ย่อมาจาก Cascading Style Sheets และใช้ในการนำเสนอองค์ประกอบต่างๆ บนหน้าจอ

2. การออกแบบเว็บแบบตอบสนองคืออะไร

การออกแบบเว็บแบบตอบสนองเป็นวิธีการพัฒนาเว็บที่มุ่งสร้างประสบการณ์ที่ดีที่สุดให้กับผู้ใช้โดยปรับเปลี่ยนรูปลักษณ์ของเว็บไซต์ตามอุปกรณ์หรือสภาพแวดล้อมของผู้ใช้นั้น

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

3. ประโยชน์จากการใช้กรอบงานมีอะไรบ้าง?

การใช้เฟรมเวิร์กในการพัฒนาแอปพลิเคชันเว็บมีประโยชน์หลายประการ ประโยชน์หลักๆ มีดังนี้:

1. กระบวนการพัฒนาที่ง่ายขึ้นด้วยแนวทางปฏิบัติที่ดีที่สุด
2. การพัฒนาที่รวดเร็วยิ่งขึ้นด้วยโครงการเริ่มต้นช่วยประหยัดเวลา
3. การใช้โค้ดที่ผ่านการทดลองและทดสอบแล้ว
4. มักจะให้ความปลอดภัยที่ดีกว่า
5. ประหยัดต้นทุน โดยเฉพาะอย่างยิ่งกับโครงการขนาดใหญ่

4. JavaScript Callback คืออะไร?

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

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

5. อธิบายขอบเขตท้องถิ่นและระดับโลกใน JavaScript

ตัวแปรที่กำหนดไว้จะเขียนเป็นคำและจะมีความหมายเฉพาะในบริบทที่ถูกต้องเท่านั้น ขอบเขตระดับท้องถิ่นและระดับโลกหมายถึงบริบทของตัวแปรที่กำหนดไว้ ตัวแปรระดับโลกจะต้องถูกกำหนดไว้ภายนอกฟังก์ชัน ในขณะที่ตัวแปรระดับท้องถิ่นจะต้องถูกกำหนดไว้ภายในฟังก์ชัน

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

6. อธิบาย Z-Index ใน CSS

ดัชนี z เป็นคุณสมบัติขององค์ประกอบที่ใช้เพื่อกำหนดลำดับขององค์ประกอบ ลำดับขององค์ประกอบหมายถึงความสามารถขององค์ประกอบที่จะอยู่ด้านหลังหรือด้านหน้าองค์ประกอบอื่น เช่นเดียวกับกองไพ่

องค์ประกอบที่มีลำดับการเรียงซ้อนสูงจะปรากฏอยู่ด้านหน้าองค์ประกอบที่มีลำดับการเรียงซ้อนต่ำกว่า ในบริบทนี้ การกำหนดลำดับการเรียงซ้อนขององค์ประกอบเป็น 2 หรือ 100 จะรับประกันว่าองค์ประกอบนั้นจะแสดงอยู่ด้านบนขององค์ประกอบอื่นๆ ทั้งหมดในเพจ ในทำนองเดียวกัน เพจที่ไม่มีลำดับการเรียงซ้อนที่ระบุไว้ องค์ประกอบด้านล่างจากแหล่งที่มาจะเรียงซ้อนไว้สูงกว่าองค์ประกอบด้านบน

7. Marquee ในภาษา HTML คืออะไร?

Marque เป็นแท็กคอนเทนเนอร์ใน HTML ซึ่งใช้เพื่อแสดงข้อความเลื่อน ช่วยให้คุณควบคุมทิศทางการเลื่อนและความเร็วได้ อย่างไรก็ตาม Marquee ไม่รองรับอีกต่อไปใน HTML5 และเราขอแนะนำให้ใช้ CSS แทน

ตัวอย่างการเลื่อนด้วยกรอบข้อความ:

ข้อความเลื่อนแบบมาร์กี

8. ระบุวิธีหลักๆ ในการลดเวลาในการโหลดหน้า

มีหลายขั้นตอนที่นักพัฒนาสามารถดำเนินการเพื่อปรับปรุงเวลาการโหลดหน้าเว็บ โดยขั้นตอนหลักๆ มีดังนี้:

• เพิ่มประสิทธิภาพภาพและลดขนาดภาพ
• กำจัดวิดเจ็ตที่ไม่จำเป็น
• ลดการค้นหาให้เหลือน้อยที่สุด
• โฮสต์เว็บไซต์บนโฮสต์ที่ดี
• ใช้ Accelerated Mobile Pages หรือไซต์แบบคงที่
• การโหลดภาพแบบขี้เกียจ
• ย่อขนาดโค้ดของคุณ

9. ความแตกต่างระหว่าง Canvas และ SVG มีอะไรบ้าง?

SVG ย่อมาจาก Scalable Vector Graphics และ แท็กเป็นองค์ประกอบคอนเทนเนอร์สำหรับสร้างกราฟิก เช่น วงกลม กล่อง วงรี และอื่นๆ คุณสามารถปรับเปลี่ยน SVG ได้โดยใช้ CSS หรือ JavaScript และเนื่องจากสามารถปรับขนาดได้ จึงเหมาะสำหรับเอาต์พุตความละเอียดสูง

การ ในทางกลับกันคอนเทนเนอร์นั้นใช้รูปแบบแรสเตอร์และไม่สามารถปรับขนาดได้ นอกจากนี้ยังใช้เพื่อสร้างกราฟิก แต่สามารถแก้ไขได้โดยใช้ JavaScript เท่านั้น อย่างไรก็ตามคอนเทนเนอร์มีประสิทธิภาพมากกว่าในการจัดการวัตถุจำนวนมาก

10 อย่างไรบ้าง โมฆะ แตกต่างจาก ตะคุ่ม?

ค่าว่าง (Null) คือค่าที่ไม่มีค่า โดยทั่วไปมักใช้เป็นตัวกำหนดตำแหน่งเพื่อเริ่มต้นตัวแปรที่กำหนดไว้ซึ่งยังไม่ได้รับการกำหนดค่าจริง ในทางกลับกัน ค่าว่าง หมายถึงตัวแปรที่กำหนดไว้ซึ่งยังไม่ได้รับการเริ่มต้น

ใน JavaScript:

ตัวแปรA;

ตัวแปรB = null;

alert(variableA); //แสดงค่าที่ไม่ได้กำหนด

alert(ตัวแปรB); //แสดงค่าว่าง

11. ID แตกต่างจากคลาสอย่างไร?

ID และคลาสเป็นสองวิธีในการระบุและจัดการองค์ประกอบในเอกสาร HTML อย่างไรก็ตาม ความแตกต่างที่สำคัญระหว่างทั้งสองคือ ID จะต้องไม่ซ้ำกัน กล่าวอีกนัยหนึ่ง องค์ประกอบสองรายการไม่สามารถใช้ ID เดียวกันได้ แต่องค์ประกอบสองรายการขึ้นไปสามารถใช้คลาสเดียวกันได้

ID ใช้สำหรับจัดการองค์ประกอบเฉพาะ ในขณะที่คลาสใช้สำหรับจัดการกลุ่มองค์ประกอบที่มีลักษณะร่วมกันอย่างน้อยหนึ่งอย่าง

12. คุณจะปรับปรุงคุณสมบัติด้านความปลอดภัยของเว็บไซต์ได้อย่างไร?

ขั้นตอนไม่กี่ขั้นตอนที่คุณสามารถทำเพื่อปรับปรุงความปลอดภัยของเว็บไซต์มีดังนี้:

1. การบังคับใช้หลักการรหัสผ่านที่แข็งแกร่ง หมายความว่าต้องตรวจสอบว่ารหัสผ่านที่เลือกมีอักขระมากกว่า 8 ตัว และประกอบด้วยตัวเลข อักขระพิเศษ และอักขระตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก
2. การใช้ captcha หรือมาตรการป้องกันบอทใดๆ
3. ใช้การตรวจสอบสิทธิ์แบบ 2 ปัจจัยหรือหลายปัจจัย เช่น OTP (รหัสผ่านครั้งเดียว) และดองเกิลฮาร์ดแวร์ เมื่อจำเป็น
4. ใช้โฮสต์ที่มีการป้องกัน DDoS และคุณสมบัติสำรองข้อมูลอัตโนมัติ

13. localStorage แตกต่างจาก sessionStorage อย่างไร

ทั้งระบบ localStorage และ sessionStorage ต่างก็ให้ผู้พัฒนาสามารถจัดเก็บข้อมูลในเว็บเบราว์เซอร์ได้ อย่างไรก็ตาม localStoarage เป็นแบบถาวร ในขณะที่ sessionStorage ไม่เป็นแบบถาวร กล่าวอีกนัยหนึ่ง ข้อมูลที่จัดเก็บใน localStorage จะพร้อมใช้งานบนเบราว์เซอร์ได้หลายเซสชัน ในขณะที่ข้อมูลที่จัดเก็บใน sessionStorage จะถูกลบออกเมื่อแท็บเบราว์เซอร์ปิดลง

14. รายการการปรับปรุง HTTP2.0 บน HTTP 1.1

โปรโตคอล HTTP/2 ได้รับการเผยแพร่ในปี 2015 และมีการปรับปรุงที่สำคัญ เช่น:

1. ปลอดภัยยิ่งขึ้นด้วยการใช้ไบนารีแทนข้อความ
2. ประสิทธิภาพที่ดีขึ้น
3. ความหน่วงต่ำลง
4. การจัดการข้อผิดพลาดที่ดีขึ้น
5. ค่าใช้จ่ายเบื้องต้นต่ำลง

15. ความแตกต่างระหว่าง Git Pull และ Git Merge คืออะไร?

คำสั่ง git pull ช่วยให้คุณดาวน์โหลดเนื้อหาจากที่เก็บข้อมูลระยะไกล จากนั้นจะอัปเดตที่เก็บข้อมูลในเครื่องของคุณด้วยเนื้อหาที่ดาวน์โหลดมา

ในทางกลับกัน คำสั่ง git merge ช่วยให้คุณรวมสาขาที่พัฒนาแยกกันสองสาขาของโปรเจ็กต์เดียวกันเข้าด้วยกันได้ คำสั่ง merge จะต้องดำเนินการจากสาขาที่คุณต้องการรวมเข้าไป ซึ่งโดยปกติแล้วจะเป็นสาขาหลัก

16. GET แตกต่างจาก POST และ PUT อย่างไร?

วิธี HTML GET ถูกใช้โดยเบราว์เซอร์เพื่อร้องขอข้อมูลจากเซิร์ฟเวอร์ ในขณะที่วิธี POST และ PUT ใช้ในการส่งข้อมูลจากเบราว์เซอร์ไปยังเซิร์ฟเวอร์

ในขณะที่คำขอ POST สามารถเพิ่มข้อมูลลงในทรัพยากรเซิร์ฟเวอร์ได้อย่างง่ายดาย แต่คำขอ PUT จะถูกใช้เพื่อแทนที่ทรัพยากรทั้งหมดโดยใช้โหลดของคำขอ

17. รายชื่อรูปแบบการแลกเปลี่ยนข้อมูลยอดนิยม

รูปแบบการแลกเปลี่ยนข้อมูลยอดนิยมในปัจจุบันมีดังนี้:

1. XML
2. ย.ม
3. CSV
4. JSON
5. HTTP
6. SQL

18. รายชื่อประเภทของกล่องป๊อปอัป 3 ประเภท

กล่องป๊อปอัปใน JavaScript ใช้เพื่อแสดงข้อความถึงผู้ใช้ เพื่อขอข้อมูลอินพุต และบางครั้งอาจทำทั้งสองอย่าง นี่คือกล่องป๊อปอัป JavaScript 3 ประเภท:

1. กล่องแจ้งเตือน – นี่จะแสดงข้อความของคุณพร้อมปุ่ม 'ตกลง'
2. กล่องยืนยัน กล่องโต้ตอบนี้ประกอบด้วยปุ่ม "ตกลง" และ "ยกเลิก" ซึ่งอาจส่งผลต่อโค้ดได้
3. กล่องพร้อมท์ – กล่องนี้ประกอบด้วยกล่องป้อนข้อความสำหรับรวบรวมข้อมูลจากผู้ใช้

19. ตั้งชื่อวิธีต่างๆ ในการรวมโค้ด CSS

มี 3 วิธีในการใส่ CSS ลงในเอกสาร HTML ดังนี้:

1. CSS ภายนอก – คุณรวมเอกสาร .css โดยใช้ ภายในเอกสาร แท็ก
2. ฝัง CSS – คุณรวมโค้ด CSS ไว้ภายใน แท็กที่ใดก็ได้ในเอกสาร
3. CSS แบบอินไลน์ – คุณใช้คู่ style=”CSS-property: value” ภายในแท็ก HTML ของคุณ เช่น พีสแควร์!

20 อย่างไรบ้าง หน้าต่างโหลด แตกต่างจาก document.onload หรือไม่?

Window.onload ใช้ในการรันโค้ด JavaScript หลังจากที่เบราว์เซอร์โหลด DOM tree ของเพจและพื้นฐานอื่นๆ เช่น รูปภาพ โค้ด CSS และสคริปต์

แม้ว่า document.onload จะดำเนินการทันทีหลังจาก DOM พร้อม แต่การกระทำดังกล่าวอาจหมายถึงก่อนที่จะโหลดรูปภาพและไลบรารีภายนอกด้วยซ้ำ

21. คุณจะซ่อนองค์ประกอบโดยใช้ CSS ได้อย่างไร?

คุณสามารถซ่อนองค์ประกอบ HTML ได้โดยใช้ 3 วิธี CSS ดังนี้:

1. การแสดงผล: ไม่มี; – องค์ประกอบไม่ได้รับการเรนเดอร์หรือแสดง
2. การมองเห็น: ซ่อนอยู่; – องค์ประกอบได้รับการเรนเดอร์แล้วแต่ไม่แสดง
3. ตำแหน่ง : แน่นอน ; – องค์ประกอบได้รับการเรนเดอร์และแสดง แต่วางตำแหน่งอยู่นอกพื้นที่แสดงผล

22. Ajax มีการใช้งานที่ดีที่สุดอย่างไร?

Ajax เป็นวิธีการโหลดข้อมูลจากเซิร์ฟเวอร์ในเบื้องหลังโดยใช้ JavaScript มีประโยชน์มากมาย เช่น การตรวจสอบข้อมูล แอปแชท ความคิดเห็น การกรองข้อมูล การแก้ไขภาพ การสำรวจความคิดเห็น และอื่นๆ อีกมากมาย

23. รายชื่อคุณลักษณะใหม่บางส่วนของ CSS3

CSS3 มีคุณลักษณะทันสมัยและมีประโยชน์มากมายเหนือกว่า CSS2 เช่น:

1. มุมโค้งมนสำหรับกล่องและรูปภาพ
2. แอนิเมชั่นของวัตถุ
3. ตัวแปรและฟังก์ชันสำหรับการประกาศ
4. Grid และ Flexbox สำหรับการออกแบบแบบตอบสนอง
5. การไล่ระดับสีสำหรับสีพื้นหลัง
6. การควบคุมความทึบโดยใช้ rgba
7. เอฟเฟกต์เงาสำหรับกล่องและข้อความ
8. การเปลี่ยนผ่านสำหรับการโฮเวอร์และการโฟกัสบนองค์ประกอบ

24. ประเภทอินพุตใหม่ใดที่นำมาใช้ใน HTML5?

ประเภทอินพุตคือค่าที่คุณให้กับองค์ประกอบอินพุตในเอกสาร HTML

ตัวอย่างคือ:

or

ประเภทอินพุต HTML5 ใหม่ประกอบด้วย:

1. วันที่
2. Color
3. อีเมล
4. ค้นหา
5. โทร
6. เดือน
7. ช่วงจำนวน
8. เดือน
9. URL
10. วันที่และเวลาท้องถิ่น

25. อธิบายองค์ประกอบสื่อ HTML5

HTML5 มีแท็กองค์ประกอบเพิ่มเติมสำหรับจัดการประเภทสื่อและแหล่งที่มา ได้แก่:

• - สำหรับวิดีโอ MP4, WebM และ Ogg
• – เพื่อกำหนดแหล่งข้อมูลหลายแหล่งในรูปแบบที่แตกต่างกัน
• – สำหรับไฟล์เสียง MP3, Ogg และ WAV
• – ภาชนะสำหรับรวมทรัพยากรภายนอกตั้งแต่ภาพไปจนถึงวิดีโอและหน้าเว็บ
• – เพื่อระบุแทร็กคำบรรยายสำหรับวิดีโอ

สรุป

เมื่อมาถึงรายการ 25 คำถามในการสัมภาษณ์นักพัฒนาเว็บที่ต้องรู้ เราจะเห็นว่าจำเป็นต้องผสมผสานเทคโนโลยีต่างๆ เข้าด้วยกันจึงจะเป็นนักพัฒนาแบบฟูลสแตกได้

แม้ว่าคู่มือนี้จะครอบคลุมถึงงานในแง่มุมต่างๆ ก็ตาม แต่ก็ไม่ได้ครอบคลุมทั้งหมด ดังนั้น คุณต้องระบุพื้นที่ที่คุณไม่ชัดเจนแล้วเรียนรู้ด้วยตัวเอง