คำถามและคำตอบสัมภาษณ์นักพัฒนา Front End 27 อันดับแรก

เผยแพร่แล้ว: 2021-11-02

การพัฒนา Front-end เป็นหนึ่งในสาขาที่ทำกำไรได้มากที่สุด โดยเฉพาะอย่างยิ่งสำหรับผู้เริ่มต้นในการพัฒนาเว็บ เนื่องจากต้องใช้ทักษะพื้นฐานเป็นส่วนใหญ่ เช่น HTML, CSS, JavaScript และความรู้เกี่ยวกับเซิร์ฟเวอร์เล็กน้อย นักศึกษาใหม่จำนวนมากจึงพบว่าการพัฒนาส่วนหน้าเป็นจุดเริ่มต้นที่ดีสำหรับอาชีพในการพัฒนาแบบฟูลสแตก

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

สารบัญ

คำถามและคำตอบสัมภาษณ์นักพัฒนาส่วนหน้า

มาดู 27 คำถามสัมภาษณ์นักพัฒนาส่วนหน้าที่ถูกถามมากที่สุด อ่านบทความนี้ตอนนี้และบุ๊กมาร์กไว้เพื่อใช้ในภายหลัง - เพื่อทบทวนก่อนวันสัมภาษณ์ของคุณ!

1. DOCTYPE คืออะไร และทำหน้าที่อะไร?

DOCTYPE เชื่อมโยงกับ DTD (Document Type Definition) และย่อมาจาก Document Type ซึ่งช่วยให้นักพัฒนาสามารถแจ้งเบราว์เซอร์เกี่ยวกับเวอร์ชันของ HTML ที่ใช้ในเอกสารเฉพาะได้ ตัวอย่างเช่น การประกาศสำหรับ HTML 4 จะเป็น – <!DOCTYPE HTML4>

2. Meta tag ใน HTML มีความเกี่ยวข้องอย่างไร?

เมตาแท็กอยู่ภายในแท็ก <head> และให้ข้อมูลเมตาเกี่ยวกับเอกสาร HTML ทั้งหมด พวกเขาทำหน้าที่ระบุข้อกำหนด เช่น ชุดอักขระของหน้า คำอธิบายหน้า ภาษาของหน้า ชื่อผู้เขียนหน้า ฯลฯ นี่คือตัวอย่างการใช้แท็ก Meta:

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<ชื่อเมตา=”วิวพอร์ต” เนื้อหา=”ความกว้าง=ความกว้างของอุปกรณ์ มาตราส่วนเริ่มต้น=1″>

<ชื่อเมตา=”คำหลัก”เนื้อหา=”คำถามสัมภาษณ์นักพัฒนาส่วนหน้า, CSS, HTML, JavaScript”>

<title>คำถามและคำตอบในการสัมภาษณ์ส่วนหน้า</title>

</head>

<body>

</body>

</html>

3. คุณเข้าใจอะไรจาก Lazy Loading?

Lazy Loading เป็นเทคนิคหนึ่งสำหรับการโหลดเนื้อหาบนเบราว์เซอร์ตามความต้องการของผู้ใช้ วิธีนี้ช่วยเพิ่มประสิทธิภาพการใช้ทรัพยากรและการใช้เซิร์ฟเวอร์ ตัวอย่างของสิ่งนี้ในโลกแห่งความเป็นจริงสามารถเห็นได้ด้วยแอปพลิเคชันอีคอมเมิร์ซเช่น Flipkart หรือ Amazon เมื่อคุณค้นหาผลิตภัณฑ์ใดผลิตภัณฑ์หนึ่งบนไซต์เหล่านี้ คุณจะเห็นเพียงรายละเอียด (ราคา รูปภาพ คุณลักษณะหลัก) สำหรับองค์ประกอบที่มีอยู่ในส่วนพับแรกเท่านั้น จากนั้นเมื่อคุณเลื่อนลง องค์ประกอบด้านล่างจะโหลดต่อไปตามต้องการ

4. คุณรู้อะไรเกี่ยวกับการบีบบังคับใน JavaScript บ้าง?

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

วาร์ x= 23;

var y = สตริง(x);

ประเภทของ(x)

ประเภทของ(y)

ผลลัพธ์สำหรับรหัสนี้จะเป็น Number และ String ซึ่งหมายความว่าชนิดข้อมูลของตัวแปร x คือ Number และหลังจากการบีบบังคับ ชนิดข้อมูลจะเปลี่ยนเป็น String

JavaScript รองรับการบีบบังคับสองประเภท:

  • โดยนัย: ในสิ่งนี้ JavaScript เองจะเปลี่ยนประเภทข้อมูลของตัวแปร

ตัวอย่างเช่น var x = 10;

var y = x + '01';

ในกรณีนี้ ค่าของ y จะเป็น '1001' และประเภทข้อมูลจะเป็น String JavaScript แปลงประเภทข้อมูล Number ของ x เป็น String โดยปริยาย เพื่อเชื่อมกับสตริงใหม่ '01' ส่งผลให้ '1001' เป็นผลลัพธ์สุดท้ายในตัวแปร y

  • ชัดเจน: การบีบบังคับอย่างโจ่งแจ้งต้องการให้ผู้พัฒนาจงใจเปลี่ยนประเภทข้อมูลโดยใช้ฟังก์ชันในตัว เช่น Number(), Boolean(), String และอื่นๆ

ตัวอย่างเช่น var x = 12;

var y = สตริง(x);

ในโค้ดด้านบนนี้ ชนิดข้อมูลของตัวแปร x ได้ถูกเปลี่ยนจาก Number เป็น String อย่างชัดเจน

5. คุณเข้าใจอะไรเกี่ยวกับ Variable Scope ใน JavaScript?

ขอบเขตของตัวแปรใช้เพื่อกำหนดขอบเขตหรือขอบเขตของการควบคุมตัวแปรใดๆ ในโปรแกรม JavaScript เฉพาะ ขอบเขตตัวแปรใน JavaScript มีสองประเภท:

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

ตัวอย่างเช่น:

ผลรวมของฟังก์ชัน () {

วาร์ x = 5;

var y = 2;

}

ฟังก์ชันยังSum()

{

วาร์ z = x+y;

}

ในโค้ดด้านบนนี้ ฟังก์ชันที่สองจะทำงานไม่ถูกต้องเนื่องจากตัวแปร x และ y อยู่ในขอบเขตของฟังก์ชัน sum() ซึ่งอยู่ในขอบเขตของฟังก์ชันนั้น ดังนั้นตัวแปรอื่นไม่มีสิทธิ์เข้าถึง x และ y ดังนั้นฟังก์ชันนี้จะไม่ถูกต้อง

  • ขอบเขตสากล: ขอบเขตส่วนกลางมีไว้สำหรับตัวแปรที่กำหนดนอกฟังก์ชันทั้งหมด ในกรณีดังกล่าว ฟังก์ชันใดๆ สามารถเข้าถึงตัวแปรได้

ตัวอย่างเช่น:

วาร์ x = 2; // เป็นตัวแปรส่วนกลาง

ผลรวมของฟังก์ชัน () {

วาร์ z = 3;

var y = x + z;

}

เนื่องจากตัวแปร x มีขอบเขตทั่วโลกในโค้ดด้านบน ฟังก์ชัน sum() จึงสามารถเข้าถึงได้ นั่นเป็นสาเหตุที่ตัวแปร y ได้รับค่า 5 (x+z) และฟังก์ชันนี้ทำงานตามที่คาดไว้

6. Node.JS ใช้ทำอะไร?

Node.JS เป็นสภาพแวดล้อมรันไทม์ JavaScript ที่เป็นโอเพ่นซอร์สตามธรรมชาติ ช่วยให้สามารถเรียกใช้โค้ด JS บนเซิร์ฟเวอร์ได้อย่างราบรื่น ก่อน Node.JS โค้ด JavaScript จะทำงานบนเบราว์เซอร์ แต่ NOde ได้เปลี่ยนแปลงสิ่งนี้โดยสิ้นเชิง ปัจจุบัน Node.JS ถูกใช้อย่างกว้างขวางในการพัฒนาแบบฟูลสแตกเพื่อจัดการกับส่วนของเซิร์ฟเวอร์ ซึ่งช่วยให้นักพัฒนาทำงานโดยใช้ภาษาเดียว (JavaScript) ได้ในทุกด้านของเว็บแอป (เช่น ใช้สแต็ก MEAN คุณสามารถพัฒนาฟูลสแตกได้โดยใช้เพียงภาษา JS เฟรมเวิร์กต่างกัน!)

7. อธิบาย NPM

ย่อมาจาก Node Package Manager NPM เป็นเครื่องมือแพ็คเกจสำหรับ Node.JS มีที่เก็บข้อมูลออนไลน์สำหรับโปรเจ็กต์ Node และยูทิลิตี้บรรทัดคำสั่งสำหรับการจัดการและทำงานกับแพ็คเกจต่างๆ ในการเข้าถึงหรือใช้แพ็คเกจ Node.JS ใด ๆ ก็สามารถเรียกใช้และใช้งาน NPM ได้

8. เซิร์ฟเวอร์ทำงานอย่างไรกับหน้าเว็บหรือแอปพลิเคชันที่มีเนื้อหาหลายภาษา?

เมื่อผู้ใช้เข้าถึงไซต์เหล่านี้ เบราว์เซอร์ของผู้ใช้จะส่งข้อมูลที่เกี่ยวข้องกับการเลือกภาษาของผู้ใช้ ทำได้โดยใช้ส่วนหัว Accept-Language เซิร์ฟเวอร์อ่านและใช้ข้อมูลนี้เพื่อส่งกลับภาษาในภาษาที่ถูกต้อง

9. แอตทริบิวต์ data-* ใน HTML คืออะไร และควรใช้ตอนนี้หรือไม่

แอตทริบิวต์ Data-* ใช้เพื่อจัดเก็บแบบกำหนดเองที่เป็นส่วนตัวสำหรับหน้าเว็บ ใช้เพื่อช่วยนักพัฒนาดีบั๊กเว็บไซต์หรือทำการเปลี่ยนแปลงส่วนตัว ไม่สนับสนุนให้ใช้แอตทริบิวต์ data-* เพราะตอนนี้สามารถทำสิ่งเดียวกันได้โดยใช้คอนโซลตรวจสอบในเบราว์เซอร์

10. IIFE ใน JavaScript คืออะไร?

IIFE ย่อมาจาก Instant Invoked Function Expression เป็นเทคนิคในการเรียกใช้ฟังก์ชันทันทีที่สร้างขึ้น โดยทั่วไปจะใช้เพื่อเติมวัตถุหรือตัวแปรส่วนกลาง

11. คุณรู้เกี่ยวกับ React.JS หรือไม่?

ใช่ – React เป็นไลบรารี JavaScript ที่ใช้สร้าง front-end (UI) ของเว็บแอปแบบหน้าเดียว ได้รับการพัฒนาโดย Facebook และใช้เพื่อจัดการมุมมองด้านหน้าของแอปพลิเคชันมือถือและเว็บเป็นหลัก

12. JS/CSS ภายนอกหรือ JS/CSS แบบอินไลน์ - ควรใช้อันใดและเพราะเหตุใด

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

13. อธิบายการใช้คีย์เวิร์ด 'does' ใน JavaScript

แนวคิดของคีย์เวิร์ด 'ไม่' คล้ายกับ Dynamic Binding ในเทคนิคการเขียนโปรแกรมระดับสูงอื่นๆ ใช้เพื่ออ้างถึงวัตถุที่เกี่ยวข้อง

ตัวอย่างเช่น:

นักเรียน var = {

fName: “แซม”,

ชื่อ : “แฮร์ริส”,

id : 2123,

ชื่อสมบูรณ์ : function() {

ส่งคืน this.fName + ” ” + this.lName;

}

};

ในตัวอย่างข้างต้น this.firstname จะคืนค่าตัวแปร 'firstName' ที่เก็บไว้ภายในฟังก์ชัน 'this' เช่น Sam ฟังก์ชัน fullName() จะส่งคืนผลลัพธ์ "Sam Harris" โดยเชื่อมชื่อและนามสกุลเข้าด้วยกัน นี่เป็นคุณสมบัติที่มีประโยชน์เมื่อต้องจัดการกับโค้ดขนาดใหญ่ที่มีหลายฟังก์ชันและชื่อตัวแปรที่คล้ายคลึงกัน

14. คุณรู้อะไรเกี่ยวกับการฉีด SQL?

SQL Injection เป็นเทคนิคในการแทรกโค้ดที่เป็นอันตรายในรูปแบบอินพุตเพื่อเข้าถึงฐานข้อมูล SQL ของเว็บไซต์ นี่เป็นหนึ่งในเทคนิคการแฮ็กที่ได้รับการฝึกฝนและเป็นที่รู้จักมากที่สุด และเว็บไซต์ใดๆ ที่ออกแบบมาไม่ดีและไม่ได้ใช้มาตรการป้องกันเซิร์ฟเวอร์ที่เข้มงวดสามารถตกเป็นเหยื่อของ SQL Injection ได้อย่างง่ายดาย

15. อธิบายองค์ประกอบทั้งหมดของ CSS Box Model

Box Model ใน CSS มีสี่องค์ประกอบ:

  • เนื้อหา: ครอบคลุมเนื้อหาหลัก รวมทั้งข้อความ รูปภาพ และทุกสิ่งทุกอย่างบนหน้าเว็บ
  • ช่องว่างภายใน : ช่องว่างภายในสามารถเข้าใจได้ว่าเป็นช่องว่างระหว่างพื้นที่เนื้อหาและขอบด้านนอกของหน้า คิดว่าเป็นพื้นที่หายใจของเนื้อหาหน้าเว็บ
  • เส้น ขอบ: เส้นขอบคือพื้นที่ที่ครอบคลุมช่องว่างภายใน เป็นชั้นนอกของแผ่น รอง
  • ขอบ: ขอบอยู่นอกเส้นขอบและใช้เพื่อวัดระยะห่างระหว่างขอบของหน้า HTML และขอบเขตหน้าจอของผู้ใช้เพื่อให้แน่ใจว่าการวางแนวของหน้าถูกต้อง

โปรดดูภาพด้านล่างเพื่อให้เข้าใจเงื่อนไขทั้งสี่ข้อได้ชัดเจนยิ่งขึ้น:

16. 'mixin' ใน CSS คืออะไรและใช้งานอย่างไร?

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

ตัวอย่างเช่น:

@mixin .rounded10px {

-moz-border-รัศมี: 10px;

}

ในกรณีนี้ สามารถใช้ '.rounded10px' ที่ใดก็ได้ในโค้ด HTML เพื่อใช้คำสั่ง '-Moz-border-radius: 10px;' ทำให้สามารถพกพาและอ่านโค้ด CSS ได้ง่าย

17. คุณรู้อะไรเกี่ยวกับ SASS?

SASS ย่อมาจาก Syntactically Awesome Stylesheets มันเป็นตัวประมวลผลล่วงหน้าสำหรับ CSS ซึ่งใช้ในการปรับโค้ด CSS ให้เหมาะสม โดยจะแนะนำคุณลักษณะต่างๆ เช่น กฎที่ซ้อนกัน มิกซ์อิน ตัวแปร การนำเข้าแบบอินไลน์ และอื่นๆ อีกมากมายเพื่อจัดระเบียบโค้ด CSS ในทางที่ดีขึ้นมาก และใช้โค้ด CSS หลายโค้ดพร้อมกันโดยใช้แนวคิดทางคณิตศาสตร์ เบราว์เซอร์ไม่สามารถเรียกใช้ไฟล์ SASS ได้ จึงต้องแปลงเป็น CSS ก่อนจึงจะถูกส่งไปยังเบราว์เซอร์

18. แยกความแตกต่างระหว่างคุกกี้ ที่จัดเก็บในตัวเครื่อง และที่จัดเก็บเซสชัน

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

เมตริก

 คุกกี้ ที่เก็บข้อมูลในเครื่อง การจัดเก็บเซสชัน

เวลาหมดอายุ

 ไม่มี. แต่ผู้ใช้สามารถทำลายด้วยตนเองหรือตั้งค่าโดยผู้พัฒนาสำหรับเว็บไซต์เฉพาะของพวกเขา ไม่มี.

หมดอายุโดยอัตโนมัติเมื่อสิ้นสุดแต่ละเซสชัน

ความคงอยู่ในหลายเซสชัน

 ขึ้นอยู่กับว่าผู้พัฒนาได้กำหนดเวลาหมดอายุไว้หรือไม่ ใช่ สิ่งนี้ยังคงอยู่ในหลายเซสชัน

ไม่ สิ่งนี้จะถูกทำลายโดยอัตโนมัติ จึงไม่คงอยู่ตลอดเซสชัน

การสื่อสารกับเซิร์ฟเวอร์

 ส่งไปยังส่วนหัวโดยอัตโนมัติผ่าน 'Cookie Header' ไม่มีการสื่อสารกับเซิร์ฟเวอร์

ไม่มีการสื่อสารกับเซิร์ฟเวอร์

ความสามารถในการจัดเก็บ

 4kb 5MB

5MB

การช่วยสำหรับการเข้าถึง หน้าต่างทั้งหมด หน้าต่างทั้งหมด

แท็บเดียวกันเท่านั้น

เมตริก

คุกกี้

ที่เก็บข้อมูลในเครื่อง

การจัดเก็บเซสชัน

เวลาหมดอายุ

ไม่มี. แต่ผู้ใช้สามารถทำลายด้วยตนเองหรือตั้งค่าโดยผู้พัฒนาสำหรับเว็บไซต์เฉพาะของพวกเขา

ไม่มี.

หมดอายุโดยอัตโนมัติเมื่อสิ้นสุดแต่ละเซสชัน

ความคงอยู่ในหลายเซสชัน

ขึ้นอยู่กับว่าผู้พัฒนาได้กำหนดเวลาหมดอายุไว้หรือไม่

ใช่ สิ่งนี้ยังคงอยู่ในหลายเซสชัน

ไม่ สิ่งนี้จะถูกทำลายโดยอัตโนมัติ ดังนั้นจึงไม่คงอยู่ตลอดเซสชัน

การสื่อสารกับเซิร์ฟเวอร์

ส่งไปยังส่วนหัวโดยอัตโนมัติผ่าน 'Cookie Header'

ไม่มีการสื่อสารกับเซิร์ฟเวอร์

ไม่มีการสื่อสารกับเซิร์ฟเวอร์

ความสามารถในการจัดเก็บ

4kb

5MB

5MB

การช่วยสำหรับการเข้าถึง

หน้าต่างทั้งหมด

หน้าต่างทั้งหมด

แท็บเดียวกันเท่านั้น

19. คุณรู้อะไรเกี่ยวกับ Progressive Rendering?

Progressive Rendering หมายถึงวิธีการที่ใช้ในการเพิ่มกระบวนการแสดงเนื้อหาของหน้าเว็บใดๆ สิ่งนี้มีประโยชน์สำหรับการเพิ่มประสิทธิภาพการใช้ข้อมูลมือถือสำหรับผู้ใช้ Progressive Rendering ประกอบด้วยแนวคิดต่างๆ เช่น Lazy Loading, Async HTML, การจัดลำดับความสำคัญของเนื้อหาที่มองเห็นได้ และอื่นๆ

20. อธิบายการใช้แอตทริบิวต์ 'srcset' ในแท็ก <img>

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

<img srcset=”picture_low_quality.jpg 480w,

picture_high_quality.jpg 800w”

ขนาด=”(ความกว้างสูงสุด: 600px) 480px,

800px”

src=”picture_high_quality.jpg”>

21. ภาษาแม่แบบที่อ้างอิงถึง HTML คืออะไร?

ภาษาเทมเพลตเป็นภาษาตัวยึดตำแหน่งที่ช่วยให้ผู้ใช้ป้อนข้อมูลลงในเอกสาร HTML ใดๆ ภาษาเทมเพลตต่างๆ ทำงานควบคู่ไปกับเฟรมเวิร์กส่วนหลัง ตัวอย่างเช่น Jinja เป็นภาษาเทมเพลตยอดนิยมที่ทำงานร่วมกับเฟรมเวิร์ก Django Flask ใน Python Slim เป็นเทมเพลตภาษาอื่นที่ใช้สำหรับ Ruby และ Rails

22. อธิบายตัวแปร 'float' ใน CSS

Float ใช้เพื่อจัดตำแหน่งองค์ประกอบในแง่สัมพัทธ์ มันกำหนดว่าองค์ประกอบเฉพาะควร 'ลอย' บนวิวพอร์ตอย่างไรตามขนาดอุปกรณ์ที่แตกต่างกัน ใช้เพื่อรักษาการตอบสนองของหน้าเว็บ และการใช้ float เป็นแนวทางปฏิบัติที่แนะนำ

23. เหตุใดจึงใช้แท็ก <span> และ <div>

แท็ก <span> ส่วนใหญ่จะใช้สำหรับองค์ประกอบแบบอินไลน์ในขณะที่แท็ก <div> ใช้สำหรับบล็อก แท็กเหล่านี้ไม่ได้มีความหมายโดยธรรมชาติ แต่สามารถใช้เพื่อระบุบล็อกหรือโค้ดแบบอินไลน์ในเอกสาร HTML เพื่อจัดรูปแบบหรือจัดรูปแบบให้แตกต่างออกไป และควบคุมได้ดียิ่งขึ้น ตัวอย่างเช่น:

<div id="info”>

<p>ติดต่อ <span class=”name”>upGrad</span> สำหรับ <span class=”courses”> หลักสูตรการพัฒนา front-end และ full-stack</span></p>

</div>

ในโค้ดด้านบนนี้ เราได้กำหนด <span>s สองส่วน หนึ่งสำหรับชื่อ (upGrad) และอีกอันสำหรับหลักสูตร ด้วยวิธีนี้ เราจึงสามารถควบคุมโค้ดสองส่วนนี้ได้มากขึ้น และสามารถจัดรูปแบบโค้ดด้วยวิธีอื่นเพื่อให้โดดเด่น

24. MongoDB แตกต่างจาก MySQL อย่างไร

MySQL เป็น DBMS เชิงสัมพันธ์ที่ใช้ SQL เป็นภาษาในการจัดการการดำเนินการที่เกี่ยวข้องกับฐานข้อมูลทั้งหมด เนื่องจากเป็น RDBMS จึงใช้โครงสร้างแบบตารางเพื่อจัดเก็บและจัดการข้อมูล ในทางกลับกัน MongoDB เป็นฐานข้อมูล NoSQL ที่ใช้รูปแบบแฟลตไฟล์เหมือน JSOL เพื่อจัดเก็บข้อมูลทั้งหมด ในการแก้ไของค์ประกอบใน MongoDB นักพัฒนาจำเป็นต้องใช้ MQL (MongoDB Query Language)

25. คุณรู้อะไรเกี่ยวกับฟังก์ชันนิรนามใน JavaScript บ้าง?

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

var add = ฟังก์ชั่น (a,b){ console.log(a+b)}

เพิ่ม (4,5);

ในตัวอย่างข้างต้น ฟังก์ชันนี้ไม่ระบุชื่อและพิมพ์เอาต์พุตที่ถูกต้อง 9

26. AJAX ใช้เมื่อใด

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

27. คุณจะมั่นใจได้อย่างไรว่าเว็บไซต์หรือแอปพลิเคชันของคุณใช้งานง่าย?

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

สรุปแล้ว

คำถามข้างต้นมีไว้เพื่อให้คุณเห็นภาพรวมของความกว้างของคำถามที่การสัมภาษณ์ของคุณสามารถครอบคลุมได้ เนื่องจาก front-end เป็นงานที่รวมเอาทักษะต่างๆ เช่น การออกแบบ HTML, CSS, JavaScript, AJAX และอื่นๆ คุณจะถูกถามคำถามเกี่ยวกับทักษะที่เกี่ยวข้องทั้งหมด

หากคุณไม่มั่นใจในทักษะของคุณหรือกำลังมองหาที่จะเติบโตในฐานะนักพัฒนาส่วนหน้า คุณมาถูกที่แล้ว ที่ upGrad เราขอเสนอ โปรแกรมในสาขาวิศวกรรมซอฟต์แวร์ ที่จะแนะนำคุณตลอดกระบวนการทั้งหมดของการพัฒนาส่วนหน้าและส่วนหลัง และมอบเครื่องมือและทักษะที่จำเป็นทั้งหมดที่จำเป็นต่อความเป็นเลิศในโลกของการพัฒนาแบบครบวงจร ลงทะเบียนและเริ่มต้นการเดินทางของคุณวันนี้!

การพัฒนาส่วนหน้าครอบคลุมอะไรบ้าง

ตามชื่อที่แนะนำ การพัฒนาส่วนหน้าเกี่ยวข้องกับส่วนหน้าหรือหน้าจอการเรนเดอร์ของเว็บแอปพลิเคชันใดๆ ด้วยเหตุนี้จึงจำเป็นต้องมีทักษะและความรู้เกี่ยวกับ HTML, CSS, JavaScript และกรอบงาน, AJAX, การจัดการเซิร์ฟเวอร์

ใครจะได้งานในการพัฒนา front-end?

แทบทุกคนที่สนใจในการพัฒนาเว็บไซต์และมีความรู้สึกในการออกแบบสามารถรับทักษะที่จำเป็นสำหรับการเริ่มต้นและความเป็นเลิศในอาชีพในการพัฒนาเว็บ

นักพัฒนา front-end จะกลายเป็นนักพัฒนาแบบ full-stack ในภายหลังได้หรือไม่?

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