🧑🏾 👕 🧣 Se préparer à une entrevue frontale: 15 questions 🐐 👩🏼‍🎤 👨🏻‍🎨

L'auteur de l'article, dont nous publions aujourd'hui la traduction, énumère 15 questions qui lui ont été posées lors d'entretiens, et qu'il a lui-même posées aux candidats pour les postes de développeur front-end.

1. Qu'est-ce que DOM?

DOM (Document Object Model) est une interface de programmation pour les documents HTML. Cette interface vous permet d'influencer le document à partir de scripts, en modifiant son apparence, ses styles, son contenu. Dans le DOM, un document est représenté sous la forme d'un arbre de nœuds.

2. Quelle est la différence entre les éléments <span> et <div>?

<span> Est un élément en ligne.
<div> Est un élément de bloc.

Les éléments <div>doivent être utilisés pour styliser les sections d'un document. Et les éléments agissent <span>comme des conteneurs pour de petites quantités de texte, pour des images et d'autres éléments de page similaires.

Il convient de noter que vous ne pouvez pas placer d'éléments de bloc sur des éléments en ligne. Voici un exemple qui montre, entre autres, le placement incorrect d'un élément de bloc à l'intérieur d'un élément en ligne (il s'agit d'un fragment <div>I'm illegal</div>placé à l'intérieur d'un élément <span>):

<div>Hi<span>I'm the start of the span element <div>I'm illegal</div> I'm the end of the span</span> Bye I'm the end of the div</div>

3. Que sont les balises meta?

Les balises Meta sont des balises présentes dans une balise de page <head>qui décrivent le contenu d'une page. Les balises Meta ne sont pas affichées sur la page. Ils ne se trouvent que dans son code.

Leur tâche principale est de décrire brièvement le contenu des pages aux moteurs de recherche. Voici un exemple:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Description search engines use">
  <meta name="keywords" content="Keywords, of, your, page">
  <meta name="author" content="Me">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

4. Quelle est la différence entre les sélecteurs d'identificateur et de classe en CSS?

Les identificateurs ( id) sont uniques. Un article ne peut avoir qu'un seul identifiant. Un seul élément avec un identifiant spécifique peut être présent sur une page.

Les noms de classe ( class) ne sont pas uniques. La même classe peut être affectée à plusieurs éléments. Un élément peut se voir attribuer plusieurs classes.

Si un certain style doit être appliqué à plusieurs éléments de la page, cette tâche doit être résolue à l'aide de classes.

5. Comment utiliser les requêtes multimédias dans CSS?

Les requêtes multimédias utilisent une règle @mediaqui vous permet d'appliquer des styles CSS à différents types de contenu. Les requêtes multimédias peuvent également être utilisées pour personnaliser les éléments de page en fonction des caractéristiques de l'environnement dans lequel les pages sont affichées.

/*      <div>  "red"   ,      600px   */
@media only screen and (max-width: 600px) {
  div {
    background-color: red;
  }
}

6. Que sont les pseudo-classes en CSS?

En CSS, les pseudo-classes sont utilisées pour décrire les styles d'éléments qui sont dans des états spéciaux. Les pseudo-classes peuvent être utilisées en conjonction avec des sélecteurs CSS pour personnaliser l'apparence des éléments en fonction de leurs états.

Voici un exemple:

/* 
     <a>,      ,     green. 
*/
a:hover {
  color: green;
}
/*     <a>      purple.*/
a:visited {
  color: purple;
}

Si on vous demande si vous pouvez nommer des pseudo-classes, voici une page avec une grande liste d'entre elles.

7. Quelle est la différence entre les types de positionnement d'éléments suivants: relatif, fixe, absolu, statique?

Le positionnement relatif se produit lorsqu'un élément est déplacé de sa position par défaut.
Le positionnement fixe se produit lorsque vous ajustez la position d'un élément en fonction des bords de la fenêtre du navigateur.
Le positionnement absolu est le placement d'un élément par rapport à l'élément parent positionné le plus proche, et exactement à l'endroit spécifié par le développeur.
Le positionnement statique est le mode de positionnement par défaut qui affiche les éléments dans l'ordre dans lequel ils sont décrits dans le document.

8. Quelle est la différence entre les requêtes PUT et POST?

Les demandes PUT entraînent le remplacement de la ressource cible par les données transmises dans la demande. Il peut être utilisé pour mettre à jour le contenu d'une ressource existante ou pour créer une nouvelle ressource.

Les requêtes POST entraînent un traitement spécifique à la ressource des données transmises dans la requête. Ils peuvent être utilisés pour effectuer diverses actions. Y compris - pour créer de nouvelles ressources, pour télécharger des fichiers sur le serveur, pour soumettre des formulaires.

Une autre différence entre les requêtes PUT et POST est que les requêtes PUT sont idempotentes, mais les requêtes POST ne le sont pas. Autrement dit, si une demande dans laquelle les mêmes données sont transmises et qui est exécutée à la même URL sera exécutée plusieurs fois, cela équivaut à exécuter cette demande une fois. Exécuter une requête POST plusieurs fois n'équivaut pas à l'exécuter une seule fois. Autrement dit, plusieurs de ces requêtes, par exemple, peuvent conduire à la création de plusieurs objets sur le serveur.

9. Quelles sont les différences entre la technologie Long Polling, le protocole WebSocket et les événements générés par le serveur?

Long Polling . , , , . .
WebSocket .
, , HTTP-, .

10. -, ?

Le stockage local, comme son nom l'indique, est un endroit que les navigateurs peuvent utiliser pour stocker des données localement. Il peut stocker jusqu'à 10 Mo de données. Le stockage de session est un type de stockage local associé à une session et supprimé après son achèvement. Le stockage de session peut stocker jusqu'à 5 Mo de données.

Les cookies sont utilisés pour stocker de petites quantités de données, ne dépassant pas 4 Ko. Ils peuvent être utilisés par le navigateur, le serveur peut les demander au navigateur.

11. Qu'est-ce que CORS?

CORS (Cross-Origin Resource Sharing) est un mécanisme basé sur un navigateur qui permet aux pages d'accéder à des ressources en dehors d'un certain domaine. Cela étend les capacités des pages et ajoute de la flexibilité à la politique de même origine.

12. Qu'est-ce qu'une promesse?

Les promesses sont des objets que JavaScript utilise lors de l'exécution d'opérations asynchrones. Ils facilitent le travail avec des opérations asynchrones et fournissent des mécanismes de gestion des erreurs plus pratiques que les rappels et les événements.

13. Dans quels états une promesse peut-elle se trouver?

Une promesse peut être dans l'un des trois états suivants:

Réalisé - L'opération associée à la promesse s'est terminée avec succès.
Rejeté - L'opération associée à la promesse s'est terminée avec une erreur.
En attente - une promesse est en attente, c'est-à-dire qu'on ne peut pas dire qu'elle s'est terminée avec succès ou avec une erreur.

14. Qu'est-ce que le levage de variables et de fonctions en JavaScript?

Le levage de variables et de fonctions est le déplacement de leurs déclarations vers le haut de leur portée (portée globale ou fonction).

15. Quelles valeurs sont fausses dans JavaScript?

En JavaScript, les fausses valeurs sont des valeurs qui, lorsqu'elles sont converties en un type booléen, deviennent des valeurs false. Ce sont les valeurs suivantes:

''
0
nul
indéfini
NaN
faux
-0
0n // les valeurs de type BigInt, lorsqu'elles sont converties en type booléen, se comportent de la même manière que les valeurs de type Number

Résultat

Les questions que j'ai partagées avec vous ont été posées lors des entretiens. Je leur ai demandé lors d'entretiens avec d'autres développeurs. Des questions comme celle-ci, complétées par des tâches pratiques, sont un bon moyen de tester les connaissances d'un candidat pour un programmeur front-end.

Je pense qu'il y a beaucoup plus de questions JavaScript à préparer pour une interview frontale que dans cet article. L'analyse des questions sur TypeScript peut également être très utile.

Si vous déclarez dans votre CV que vous connaissez un framework frontal, cela signifie que vous devez vous préparer au fait qu'on vous posera des questions sur la connaissance de ce framework.

Quelles questions vous a-t-on posées lors des entretiens préliminaires?

Se préparer à une entrevue frontale: 15 questions