Top 27 des questions et réponses des entretiens avec les développeurs front-end
Publié: 2021-11-02Le développement front-end est l'un des domaines les plus lucratifs, en particulier pour les débutants en développement Web. Comme cela nécessite principalement des compétences fondamentales telles que HTML, CSS, JavaScript et un peu de connaissance du serveur, de nombreux étudiants de première année trouvent que le développement frontal est un bon point de départ pour une carrière dans le développement de la pile complète.
Cependant, le fait est que le développement frontal est étendu et couvre de nombreux outils et techniques différents. En conséquence, les questions d'entretien pour le rôle des développeurs front-end sont assez diverses et couvrent différents domaines.
Table des matières
Questions et réponses de l'entretien de développeur front-end
Examinons les 27 questions les plus posées lors des entretiens avec les développeurs front-end. Parcourez cet article maintenant et marquez-le pour plus tard - pour le réviser avant la date de votre entretien !
1. Qu'est-ce que DOCTYPE et à quoi sert-il ?
DOCTYPE est associé à la DTD (Document Type Definition) et signifie Document Type. Cela permet aux développeurs d'informer le navigateur de la version de HTML utilisée dans le document spécifique. Par exemple, la déclaration pour HTML 4 sera – <!DOCTYPE HTML4>.
2. Quelle est la pertinence des balises Meta en HTML ?
Les balises Meta résident à l'intérieur de la balise <head> et fournissent les métadonnées sur l'ensemble du document HTML. Ils effectuent la tâche de spécifier des spécifications telles que le jeu de caractères de la page, la description de la page, la langue de la page, le nom de l'auteur de la page, etc. Voici un exemple utilisant des balises Meta :
<!DOCTYPE html>
<html>
<tête>
<meta charset= »utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta name=”Keywords” content=”Questions d'entretien avec les développeurs front-end, CSS, HTML, JavaScript”>
<title>Questions et réponses pour l'entretien initial</title>
</head>
<corps>
</body>
</html>
3. Qu'entendez-vous par Lazy Loading ?
Le chargement différé est une technique permettant de charger du contenu sur le navigateur en fonction des besoins de l'utilisateur. Cela optimise l'utilisation des ressources et l'utilisation du serveur. Un exemple concret de cela peut être vu avec des applications de commerce électronique comme Flipkart ou Amazon. Lorsque vous recherchez un produit particulier sur ces sites, vous ne voyez que les détails (prix, image, caractéristiques clés) des éléments disponibles uniquement sur le premier pli. Ensuite, au fur et à mesure que vous faites défiler vers le bas, les éléments ci-dessous continuent de se charger au fur et à mesure des besoins.
4. Que savez-vous de la coercition en JavaScript ?
La coercition est une méthode de conversion du type de données d'une variable. En utilisant la coercition, vous pouvez convertir un objet en booléen, une chaîne en nombre, etc. Voici un morceau de code pour mieux expliquer cela:
var x = 23 ;
var y = Chaîne(x);
typede(x)
typede(y)
La sortie de ce code sera Number et String, ce qui implique que le type de données de la variable x est Number, et après coercition, le type de données devient String.
JavaScript prend en charge deux types de coercition :
- Implicite : dans ce cas, JavaScript lui-même modifiera le type de données de la variable.
Par exemple : var x = 10 ;
var y = x + '01';
Dans ce cas, la valeur de y sera '1001' et le type de données sera String. JavaScript convertit implicitement le type de données Number de x en String pour le concaténer à une nouvelle chaîne '01', résultant en '1001' comme résultat final dans la variable y.
- Explicite : la coercition explicite nécessite que le développeur modifie délibérément le type de données à l'aide de fonctions intégrées telles que Number(), Boolean(), String, etc.
Par exemple : var x = 12 ;
var y = Chaîne(x);
Dans le code ci-dessus, le type de données de la variable x a été explicitement modifié de Number à String.
5. Que comprenez-vous de Variable Scope en JavaScript ?
La portée de variable est utilisée pour définir la région, ou la portée, de contrôle de toute variable dans un programme JavaScript particulier. Il existe deux types de portée variable en JavaScript :
- Portée locale : la portée locale implique que l'accessibilité et la disponibilité de cette variable sont limitées à la fonction dans laquelle elle est définie.
Par exemple:
fonction somme() {
varx = 5 ;
var y = 2;
}
fonction aussiSomme()
{
var z = x+y ;
}
Dans le code ci-dessus, la deuxième fonction ne s'exécutera pas correctement car les variables x et y appartiennent à la portée de la fonction sum() - elles sont locales à cette portée. Ainsi, l'autre variable n'a pas accès aux x et y, donc cette fonction sera incorrecte.
- Portée globale : la portée globale concerne les variables définies en dehors de toutes les fonctions. Dans un tel cas, n'importe quelle fonction peut accéder à la variable.
Par exemple:
var x = 2 ; // c'est une variable globale
fonction somme() {
var z = 3 ;
var y = x + z ;
}
Puisque la variable x a une portée globale dans le code ci-dessus, la fonction sum() y a accès. C'est pourquoi la variable y prend la valeur 5 (x+z) et cette fonction s'exécute comme prévu.
6. A quoi sert Node.JS ?
Node.JS est un environnement d'exécution JavaScript de nature open source. Il permet en douceur l'exécution du code JS sur le serveur lui-même. Avant Node.JS, le code JavaScript s'exécutait sur le navigateur, mais NOde a complètement changé cela. Aujourd'hui, Node.JS est largement utilisé dans le développement full-stack pour gérer la partie serveur. Cela permet aux développeurs de travailler en utilisant un seul langage (JavaScript) à toutes les extrémités de l'application Web (en utilisant la pile MEAN, par exemple, vous pouvez effectuer un développement complet en utilisant uniquement le langage JS, différents frameworks !)
7. Expliquer le NMP
Abréviation de Node Package Manager, NPM est un outil de package pour Node.JS. Il offre un référentiel en ligne pour les projets Node et un utilitaire de ligne de commande pour gérer et travailler avec différents packages. Pour accéder ou utiliser un package Node.JS particulier, NPM peut être invoqué et utilisé.
8. Comment le serveur fonctionne-t-il avec les pages Web ou les applications au contenu multilingue ?
Lorsqu'un utilisateur accède à ces sites, le navigateur de l'utilisateur envoie des informations relatives au choix de langue de l'utilisateur. Cela se fait à l'aide de l'en-tête Accept-Language. Le serveur lit et utilise ces informations pour renvoyer la langue dans la bonne langue.
9. Qu'est-ce que l'attribut data-* en HTML, et est-il recommandé de l'utiliser maintenant ?
L'attribut Data-* est utilisé pour stocker la personnalisation privée de la page Web. Ceci est utilisé pour aider les développeurs à déboguer le site Web ou à apporter des modifications privées. L'utilisation des attributs data-* n'est pas encouragée car il est maintenant possible de faire la même chose simplement en utilisant inspect console dans le navigateur.
10. Qu'est-ce que IIFE en JavaScript ?
IIFE, abréviation de Immediately Invoked Function Expression, est une technique permettant d'exécuter des fonctions dès qu'elles sont créées. Il est généralement utilisé pour remplir des objets ou des variables globales.
11. Connaissez-vous React.JS ?
Oui - React est une bibliothèque JavaScript utilisée pour créer le front-end (UI) des applications Web d'une seule page. Il a été développé par Facebook et était principalement utilisé pour gérer la vue avant de leurs applications mobiles et Web.
12. JS/CSS externe ou JS/CSS en ligne – lequel faut-il privilégier et pourquoi ?
Le codage en ligne augmente la taille du document, ce qui ralentit l'exécution du code. Avec le codage en ligne, le navigateur de l'utilisateur perd la possibilité de mettre en cache le code CSS et JS et de le stocker pour une exécution plus rapide. D'autre part, le navigateur peut mettre en cache les fichiers avec CSS et JS externes, ce qui améliore le temps de chargement des pages.
13. Expliquez l'utilisation du mot clé 'does' en JavaScript
Le concept de mot-clé « does » est similaire à la liaison dynamique dans d'autres techniques de programmation de haut niveau. Il est utilisé pour désigner l'objet auquel il est associé.
Par exemple:
var étudiant = {
fNom : "Sam",
lNom : "Harris",
identifiant : 2123,
nomcomplet : fonction() {
retourner this.fName + ” ” + this.lName ;
}
} ;
Dans l'exemple ci-dessus, this.firstname renverra la valeur de la variable 'firstName' stockée dans la fonction 'this', c'est-à-dire Sam. La fonction fullName() renverra la sortie "Sam Harris", en concaténant le prénom et le nom. Il s'agit d'une propriété utile lorsqu'il s'agit d'un code volumineux avec plusieurs fonctions et des noms de variables similaires.
14. Que savez-vous de l'injection SQL ?
L'injection SQL est une technique permettant d'insérer du code malveillant dans les formulaires de saisie pour accéder à la base de données SQL du site Web. C'est l'une des techniques de piratage les plus pratiquées et les plus connues, et tout site Web mal conçu et qui n'a pas pris de mesures strictes de protection du serveur peut facilement devenir la proie de SQL Injection.
15. Expliquez tous les éléments du modèle CSS Box
Le Box Model en CSS comporte quatre éléments :
- Contenu : Cela couvre le contenu principal, y compris tout le texte, les images et tout le reste de la page Web.
- Rembourrage : le rembourrage peut être compris comme l'espace entre la zone de contenu et la limite extérieure de la page. Considérez-le comme le répit du contenu de la page Web.
- Bordure : la bordure est la zone qui couvre le rembourrage. C'est la couche externe du rembourrage .
- Marge : la marge se situe à l'extérieur de la bordure et est utilisée pour mesurer la distance entre la périphérie de la page HTML et les limites de l'écran de l'utilisateur afin d'assurer l'orientation correcte de la page.
Veuillez vous référer à l'image ci-dessous pour obtenir plus de clarté sur les quatre termes :
16. Qu'est-ce que 'mixin' en CSS et comment est-il implémenté ?
Mixin est utilisé pour définir des modèles réutilisables de paires propriété-valeur. Les auteurs de code l'utilisent pour simplifier le code.
Par exemple:
@mixin .rounded10px {
-moz-bordure-rayon : 10 px ;
}
Dans ce cas, le '.rounded10px' peut être utilisé n'importe où dans le code HTML pour implémenter l'instruction '-Moz-border-radius: 10px;'. Cela donne beaucoup de portabilité et de lisibilité au code CSS.
17. Que savez-vous du SASS ?
SASS est l'abréviation de Syntactically Awesome Stylesheets. C'est un préprocesseur pour CSS, qui est utilisé pour optimiser le code CSS. Il introduit des fonctionnalités telles que des règles imbriquées, des mixins, des variables, des importations en ligne et bien plus encore pour mieux organiser le code CSS et utiliser plusieurs codes CSS à l'unisson, en utilisant les concepts mathématiques. Le navigateur ne peut pas exécuter les fichiers SASS, ils doivent donc d'abord être convertis en CSS avant d'être envoyés au navigateur.
18. Différenciez les cookies, le stockage local et le stockage de session.
Les cookies, les stockages locaux et les stockages de session sont trois façons dont le navigateur stocke les informations pour un traitement et une récupération plus rapides. Veuillez vous référer au tableau ci-dessous pour obtenir une compréhension complète de la façon dont ces trois techniques diffèrent selon les différentes métriques.
Métrique | Biscuit | Stockage local | Stockage des sessions |
Date d'expiration | Aucun. Mais peut être détruit manuellement par l'utilisateur ou défini par le développeur pour son site Web particulier. | Aucun. | Expire automatiquement à la fin de chaque session. |
Persistance sur plusieurs sessions | Cela dépend si le développeur a défini un délai d'expiration ou non. | Oui, cela persiste sur plusieurs sessions. | Non, cela est détruit automatiquement afin qu'il ne persiste pas d'une session à l'autre. |
Communication avec le serveur | Envoyé automatiquement à l'en-tête via 'Cookie Header'. | Aucune communication avec le serveur. | Aucune communication avec le serveur. |
Capacité de stockage | 4kb | 5 Mo | 5 Mo |
| Accessibilité | Toutes les fenêtres | Toutes les fenêtres | Seulement le même onglet |
Métrique
Biscuit
Stockage local
Stockage des sessions
Date d'expiration
Aucun. Mais peut être détruit manuellement par l'utilisateur ou défini par le développeur pour son site Web particulier.
Aucun.
Expire automatiquement à la fin de chaque session.
Persistance sur plusieurs sessions
Cela dépend si le développeur a défini un délai d'expiration ou non.
Oui, cela persiste sur plusieurs sessions.
Non, cela est détruit automatiquement, donc il ne persiste pas d'une session à l'autre.
Communication avec le serveur
Envoyé automatiquement à l'en-tête via 'Cookie Header'.
Aucune communication avec le serveur.
Aucune communication avec le serveur.
Capacité de stockage
4kb
5 Mo
5 Mo
Accessibilité
Toutes les fenêtres
Toutes les fenêtres
Seulement le même onglet
19. Que savez-vous du rendu progressif ?
Le rendu progressif fait référence à la méthode utilisée pour augmenter le processus de rendu du contenu de n'importe quelle page Web. Ceci est utile pour optimiser l'utilisation des données mobiles pour l'utilisateur. Le rendu progressif inclut des concepts tels que le chargement différé, le HTML asynchrone, la hiérarchisation du contenu visible, etc.
20. Expliquez l'utilisation de l'attribut 'srcset' dans la balise <img>
'srcset' est utilisé pour rendre différentes résolutions de la même image - en fonction de différents navigateurs ou appareils. Ceci est utilisé pour améliorer l'expérience utilisateur et s'assurer qu'ils voient la meilleure résolution de l'image concernant l'appareil sur lequel ils la visualisent. En utilisant srcset, nous pouvons nous assurer que le navigateur affiche des images de haute qualité sur des appareils et navigateurs de bonne résolution et des images basse résolution sur d'autres appareils. Voici comment il peut être utilisé :
<img srcset="image_low_quality.jpg 480w,
image_haute_qualité.jpg 800w”
tailles = "(largeur maximale : 600px) 480px,
800px"
src="image_haute_qualité.jpg">
21. Que sont les langages de template en référence à HTML ?
Le langage de modèles est un langage d'espace réservé qui aide les utilisateurs à saisir des données dans n'importe quel document HTML. Divers langages de modèles fonctionnent parallèlement aux frameworks back-end. Par exemple, Jinja est un langage de template populaire qui fonctionne avec les frameworks Django Flask en Python. Slim est un autre langage de template utilisé pour Ruby et Rails.
22. Expliquez la variable 'float' en CSS.
Float est utilisé pour positionner un élément dans un sens relatif. Il définit comment l'élément particulier doit « flotter » sur la fenêtre d'affichage en fonction des différentes tailles d'appareil. Ceci est utilisé pour maintenir la réactivité de la page Web, et l'utilisation de float est une pratique recommandée.
23. Pourquoi les balises <span> et <div> sont-elles utilisées ?
La balise <span> est principalement utilisée pour les éléments en ligne tandis que la balise <div> est utilisée pour les blocs. Ces balises n'ont aucune signification inhérente, mais peuvent être utilisées pour spécifier un bloc ou un morceau de code en ligne dans un document HTML afin de le styler ou de le formater différemment et d'avoir un meilleur contrôle sur celui-ci. Par exemple:
<div id="info">
<p>Contactez <span class="name">upGrad</span> pour <span class="courses"> cours de développement front-end et de développement full-stack</span></p>
</div>
Dans le morceau de code ci-dessus, nous avons défini deux morceaux de <span>s. L'un est pour le nom (upGrad), et l'autre pour les cours. De cette façon, nous avons plus de contrôle sur ces deux morceaux de code et pouvons le formater d'autres manières pour les faire ressortir.
24. En quoi MongoDB diffère-t-il de MySQL ?
MySQL est un SGBD relationnel qui utilise SQL comme langage pour gérer toutes les opérations liées à la base de données. En tant que SGBDR, il utilise des structures de type table pour stocker et manipuler des données. D'autre part, MongoDB est une base de données NoSQL qui utilise un format de fichier plat de type JSOL pour stocker toutes les données. Pour modifier des éléments dans MongoDB, les développeurs doivent utiliser MQL (MongoDB Query Language).
25. Que savez-vous des fonctions anonymes en JavaScript ?
Dans des scénarios normaux, le nom de la fonction est d'abord défini, puis le corps de la fonction. Dans les fonctions anonymes, en revanche, le nom de la fonction n'est pas défini. Seuls une variable et des opérateurs d'affectation sont utilisés, et la fonction est stockée en tant qu'objet. Ensuite, en utilisant des variables, nous pourrons invoquer la fonction. Par exemple:
var add = fonction(a,b){ console.log(a+b)}
ajouter(4,5);
Dans l'exemple ci-dessus, la fonction est anonyme et imprime la bonne sortie 9.
26. Quand AJAX est-il utilisé ?
AJAX est court de JavaScript asynchrone et SML, et il facilite la communication du serveur Web et du navigateur de l'utilisateur. AJAX n'est pas un langage de programmation. Il est utilisé pour charger et envoyer des données vers et depuis le navigateur de l'utilisateur même après le chargement de la page. C'est un outil puissant pour mettre à jour les données sur la page de l'utilisateur sans que l'utilisateur ait à actualiser la page. Essentiellement, AJAX permet d'actualiser et de mettre à jour la page en temps réel.
27. Comment vous assureriez-vous que votre site Web ou votre application est convivial ?
Pour s'assurer que le site Web ou l'application Web est totalement convivial, les développeurs frontaux doivent travailler aux côtés des concepteurs UX (expérience utilisateur) pour conceptualiser des pages Web qui résolvent les problèmes du public auquel ils sont destinés. L'objectif est de créer une expérience centrée sur l'utilisateur avec un flux de conception, un contenu et une structure de page optimaux sur différents navigateurs et écrans.
En conclusion
Les questions ci-dessus visent à vous donner un aperçu de l'étendue des questions que votre entretien peut couvrir. Étant donné que le front-end est une tâche qui intègre différentes compétences telles que la conception, HTML, CSS, JavaScript, AJAX, etc., des questions vous seront posées sur toutes les compétences pertinentes.
Si vous n'êtes pas sûr de vos compétences ou si vous cherchez à vous développer en tant que développeur front-end, vous êtes au bon endroit. Chez upGrad, nous proposons des programmes en génie logiciel qui vous guident tout au long du processus de développement front-end et back-end et vous donnent tous les outils et compétences nécessaires pour exceller dans le monde du développement full-stack. Inscrivez-vous et commencez votre voyage dès aujourd'hui !
Que couvre le développement front-end ?
Comme son nom l'indique, le développement front-end traite du front-end ou de l'écran de rendu de toute application Web. Pour cela, des compétences et connaissances en HTML, CSS, JavaScript et ses frameworks, AJAX, gestion de serveur, sont nécessaires.
Qui peut obtenir un emploi dans le développement front-end ?
Pratiquement toute personne intéressée par le développement Web et ayant le sens du design peut acquérir les compétences nécessaires pour démarrer et exceller dans une carrière en développement Web.
Les développeurs front-end peuvent-ils devenir plus tard des développeurs full-stack ?
Absolument. Au fur et à mesure que vous acquerrez de l'expérience en tant que développeur front-end, vous commencerez lentement à adopter des concepts de pile complète, car vous travaillerez également en collaboration avec des développeurs back-end. Cette connaissance vous aidera à passer d'un développeur front-end à un développeur full-stack.