QCM : Front-end de la structure à l’interactivité (21 questions)

Explication

JavaScript orchestre les comportements et les interactions exécutés dans le navigateur. CSS concerne l’apparence, tandis que HTML définit la structure et le contenu de la page.

Explication

Un développement front-end de qualité vise un code compréhensible et maintenable, pas seulement un résultat fonctionnel. Un code difficile à comprendre augmente le coût des corrections et des évolutions.

Explication

La balise button représente une action déclenchée par l’utilisateur, tandis que la balise a convient à une navigation vers une ressource ou une destination. section et nav décrivent des zones sémantiques, non une action ponctuelle.

Explication

La structure attendue place la déclaration, l’élément html avec la langue et un head contenant charset, viewport et title avant un body organisé en header, main et footer. Les métadonnées charset et viewport appartiennent à head, non aux zones du body.

Explication

L’accessibilité repose notamment sur la perception et l’utilisation de l’interface au moyen de contrastes adaptés, d’alternatives textuelles et d’un focus visible. Dépendre des couleurs ou masquer le focus peut empêcher certaines personnes de comprendre ou de contrôler l’interface.

Explication

L’association explicite repose sur la correspondance entre l’attribut for du label et l’attribut id du champ, tandis que l’erreur doit indiquer la correction attendue. Un positionnement visuel ou un placeholder ne remplace pas cette association sémantique.

Explication

La hiérarchie aide l’utilisateur à comprendre où il se trouve et ce qu’il doit faire ensuite, alors que le feedback indique un état ou un résultat comme le chargement, le succès ou l’erreur. Confondre ces notions revient à attribuer à l’organisation du contenu le rôle d’un signal d’état.

Explication

La cascade compare notamment la spécificité des sélecteurs afin de déterminer quelle règle l’emporte. Utiliser `!important` n’est pas le mécanisme à privilégier pour résoudre chaque conflit de styles.

Explication

Le padding représente l’espace intérieur situé entre le contenu et la bordure. La marge, elle, se trouve à l’extérieur de la bordure et sépare l’élément des autres éléments.

Explication

Dans Flexbox, `justify-content` agit sur l’axe principal, qui est horizontal lorsque la direction est en ligne. `align-items` agit sur l’axe secondaire, tandis que `gap` règle l’espace entre les éléments.

Explication

`grid-template-columns: repeat(3, 1fr)` définit trois colonnes, chacune recevant une fraction égale de l’espace disponible. Une déclaration portant sur les lignes organiserait l’axe opposé.

Explication

L’approche mobile first établit d’abord les styles destinés au petit écran, puis enrichit la mise en page avec des media queries pour les espaces plus grands. Commencer par le bureau inverse cette progression.

Explication

Sur un petit écran, une sidebar peut passer sous le contenu afin de préserver la lisibilité et l’espace disponible. Les autres propositions maintiennent ou accentuent des structures moins adaptées aux écrans étroits.

Explication

`let` convient lorsqu’une liaison doit recevoir une nouvelle valeur, tandis que `const` interdit la réassignation de cette liaison. `var` appartient à l’ancien modèle et n’est pas le choix moderne par défaut.

Explication

Une variable déclarée avec `let` entre des accolades est limitée à ce bloc et à ses sous-blocs. Elle ne peut donc pas être utilisée depuis une portée extérieure après la fermeture du bloc.

Explication

L’opérateur `===` vérifie simultanément la valeur et le type, sans conversion implicite. L’opérateur `==`, en revanche, peut convertir les types avant d’effectuer la comparaison.

Explication

L’opérateur ternaire sert à choisir et produire une valeur à partir d’une condition. Une structure `if` convient davantage lorsqu’il faut enchaîner plusieurs actions ou gérer une logique plus développée.

Explication

La méthode filter sélectionne les éléments satisfaisant une condition et construit une collection avec eux. La méthode map transforme chaque élément, mais ne sert pas à effectuer cette sélection conditionnelle.

Explication

En l’absence d’instruction return, une fonction JavaScript renvoie undefined, même si elle a réalisé des opérations internes. null représente une valeur explicitement définie et n’est pas ajouté automatiquement par le langage.

Explication

L’opérateur ?? utilise la valeur de secours lorsque l’expression vaut null ou undefined, mais il conserve 0. L’opérateur || considère également 0 comme une valeur fausse et déclencherait alors la valeur de remplacement.

Explication

JSON.stringify sérialise un objet sous forme de texte JSON, tandis que JSON.parse transforme ce texte en objet exploitable. Les deux méthodes ne filtrent ni ne trient automatiquement les données.