اكثر اسئلة واجوبة المقابلات طلبا والاختبارات عبر الإنترنت
منصة تعليمية للتحضير للمقابلات والاختبارات عبر الإنترنت والدروس والتدريب المباشر

طوّر مهاراتك من خلال مسارات تعلم مركزة واختبارات تجريبية ومحتوى جاهز للمقابلات.

يجمع WithoutBook أسئلة المقابلات حسب الموضوع والاختبارات العملية عبر الإنترنت والدروس وأدلة المقارنة في مساحة تعلم متجاوبة واحدة.

التحضير للمقابلة

الاختبارات التجريبية

اجعلها الصفحة الرئيسية

احفظ هذه الصفحة في المفضلة

الاشتراك عبر البريد الإلكتروني
مقابلات تجريبية مباشرة من WithoutBook Frontend Developer موضوعات مقابلات ذات صلة: 20

Interview Questions and Answers

تعرّف على اهم اسئلة واجوبة مقابلات Frontend Developer للمبتدئين واصحاب الخبرة للاستعداد لمقابلات العمل.

إجمالي الاسئلة: 30 Interview Questions and Answers

افضل مقابلة تجريبية مباشرة يجب مشاهدتها قبل المقابلة

تعرّف على اهم اسئلة واجوبة مقابلات Frontend Developer للمبتدئين واصحاب الخبرة للاستعداد لمقابلات العمل.

Interview Questions and Answers

ابحث عن سؤال لعرض الاجابة.

اسئلة واجوبة المستوى المتوسط / من سنة إلى خمس سنوات خبرة

سؤال 1

What is the difference between `let`, `const`, and `var` in JavaScript?

The main difference lies in their scoping and hoisting behavior. `let` has block scope, `const` is used for constants, and `var` has function scope and is hoisted.

Example:

```javascript
// Example using let
let x = 10;

// Example using const
const PI = 3.14;

// Example using var
var y = 5;
```
احفظ للمراجعة

احفظ للمراجعة

احفظ هذا العنصر في الإشارات المرجعية، او حدده كصعب، او ضعه في مجموعة مراجعة.

افتح مكتبتي التعليمية
هل هذا مفيد؟
اضف تعليقا عرض التعليقات
سؤال 2

Explain the box model in CSS.

The box model consists of content, padding, border, and margin. It defines how these components contribute to the overall size of an element.

Example:

```css
.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #000;
  margin: 10px;
}```
احفظ للمراجعة

احفظ للمراجعة

احفظ هذا العنصر في الإشارات المرجعية، او حدده كصعب، او ضعه في مجموعة مراجعة.

افتح مكتبتي التعليمية
هل هذا مفيد؟
اضف تعليقا عرض التعليقات
سؤال 3

Explain the difference between `==` and `===` in JavaScript.

`==` is the equality operator that performs type coercion, while `===` is the strict equality operator that checks both value and type without coercion.

Example:

```javascript
console.log(5 == '5'); // true
console.log(5 === '5'); // false
```
احفظ للمراجعة

احفظ للمراجعة

احفظ هذا العنصر في الإشارات المرجعية، او حدده كصعب، او ضعه في مجموعة مراجعة.

افتح مكتبتي التعليمية
هل هذا مفيد؟
اضف تعليقا عرض التعليقات
سؤال 4

What is the purpose of the 'async' and 'defer' attributes in a script tag?

'async' loads the script asynchronously, allowing it to execute while the page continues parsing. 'defer' loads the script asynchronously but ensures it executes in order after HTML parsing.

Example:

```html


```
احفظ للمراجعة

احفظ للمراجعة

احفظ هذا العنصر في الإشارات المرجعية، او حدده كصعب، او ضعه في مجموعة مراجعة.

افتح مكتبتي التعليمية
هل هذا مفيد؟
اضف تعليقا عرض التعليقات
سؤال 5

Explain the concept of CORS (Cross-Origin Resource Sharing) and how to handle it in JavaScript.

CORS is a security feature implemented by web browsers to restrict web pages from making requests to a different domain than the one that served the web page. In JavaScript, you can handle CORS by setting appropriate headers on the server or using JSONP for cross-origin requests.

Example:

```javascript
// Example using Fetch API with CORS
fetch('https://api.example.com/data', { mode: 'cors' })
  .then(response => response.json())
  .then(data => console.log(data));
```
احفظ للمراجعة

احفظ للمراجعة

احفظ هذا العنصر في الإشارات المرجعية، او حدده كصعب، او ضعه في مجموعة مراجعة.

افتح مكتبتي التعليمية
هل هذا مفيد؟
اضف تعليقا عرض التعليقات
سؤال 6

How does the 'this' keyword work in JavaScript?

The 'this' keyword refers to the current execution context. In a function, 'this' depends on how the function is called. It can refer to the global object, the object the method is called on, or be explicitly set using methods like 'call', 'apply', or 'bind'.

Example:

```javascript
function sayHello() {
  console.log('Hello, ' + this.name);
}

const person = { name: 'John' };
sayHello.call(person); // Outputs: Hello, John
```
احفظ للمراجعة

احفظ للمراجعة

احفظ هذا العنصر في الإشارات المرجعية، او حدده كصعب، او ضعه في مجموعة مراجعة.

افتح مكتبتي التعليمية
هل هذا مفيد؟
اضف تعليقا عرض التعليقات
سؤال 7

Explain the purpose of the 'box-sizing' property in CSS.

The 'box-sizing' property determines how the total width and height of an element are calculated. 'content-box' includes only the content, while 'border-box' includes padding and border in the calculation.

Example:

```css
/* Using box-sizing: border-box */
div {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 5px solid #000;
}```
احفظ للمراجعة

احفظ للمراجعة

احفظ هذا العنصر في الإشارات المرجعية، او حدده كصعب، او ضعه في مجموعة مراجعة.

افتح مكتبتي التعليمية
هل هذا مفيد؟
اضف تعليقا عرض التعليقات
سؤال 8

What is the difference between 'throttling' and 'debouncing' in JavaScript?

'Throttling' limits the number of times a function can be called within a specified time frame, while 'debouncing' ensures that a function is only called after a certain amount of time has passed since the last invocation.
احفظ للمراجعة

احفظ للمراجعة

احفظ هذا العنصر في الإشارات المرجعية، او حدده كصعب، او ضعه في مجموعة مراجعة.

افتح مكتبتي التعليمية
هل هذا مفيد؟
اضف تعليقا عرض التعليقات
سؤال 9

What is the purpose of the 'requestAnimationFrame' function in JavaScript?

'requestAnimationFrame' is a method that tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.

Example:

```javascript
function animate() {
  // Animation logic goes here
  requestAnimationFrame(animate);
}

// Start the animation
animate();
```
احفظ للمراجعة

احفظ للمراجعة

احفظ هذا العنصر في الإشارات المرجعية، او حدده كصعب، او ضعه في مجموعة مراجعة.

افتح مكتبتي التعليمية
هل هذا مفيد؟
اضف تعليقا عرض التعليقات
سؤال 10

What is the purpose of the 'pointer-events' property in CSS?

The 'pointer-events' property controls under what circumstances an element can become the target of pointer events. It is used to make elements non-interactive or to allow pointer events to pass through an element.

Example:

```css
/* Make the element non-interactive */
.non-interactive {
  pointer-events: none;
}```
احفظ للمراجعة

احفظ للمراجعة

احفظ هذا العنصر في الإشارات المرجعية، او حدده كصعب، او ضعه في مجموعة مراجعة.

افتح مكتبتي التعليمية
هل هذا مفيد؟
اضف تعليقا عرض التعليقات
سؤال 11

What is the purpose of the 'webpack' module bundler in frontend development?

'Webpack' is a module bundler that takes assets, such as JavaScript, CSS, and images, and transforms them into a format that can be efficiently served to the browser. It also enables code splitting and other optimizations.
احفظ للمراجعة

احفظ للمراجعة

احفظ هذا العنصر في الإشارات المرجعية، او حدده كصعب، او ضعه في مجموعة مراجعة.

افتح مكتبتي التعليمية
هل هذا مفيد؟
اضف تعليقا عرض التعليقات
سؤال 12

Explain the concept of 'polyfill' in web development.

A 'polyfill' is a piece of code (usually JavaScript) that provides modern functionality on older browsers that do not support that feature. It 'fills in' the gaps to ensure compatibility.
احفظ للمراجعة

احفظ للمراجعة

احفظ هذا العنصر في الإشارات المرجعية، او حدده كصعب، او ضعه في مجموعة مراجعة.

افتح مكتبتي التعليمية
هل هذا مفيد؟
اضف تعليقا عرض التعليقات
سؤال 13

Explain the concept of 'hoisting' in JavaScript.

'Hoisting' is a JavaScript behavior where variable and function declarations are moved to the top of their containing scope during the compilation phase. However, only the declarations are hoisted, not the initializations.

Example:

```javascript
console.log(x); // Outputs: undefined
var x = 5;
```
احفظ للمراجعة

احفظ للمراجعة

احفظ هذا العنصر في الإشارات المرجعية، او حدده كصعب، او ضعه في مجموعة مراجعة.

افتح مكتبتي التعليمية
هل هذا مفيد؟
اضف تعليقا عرض التعليقات

الاكثر فائدة حسب تقييم المستخدمين:

حقوق النشر © 2026، WithoutBook.