JavaScript

Question 1

Qu’est-ce qu’un package manager ?

Answer 1

C’est un outil automatisant les processus d’installation, désinstallation et mise à jour de logiciels installés sur un système informatique.

Question 2

Citer des exemples de package manager.

Answer 2

npm, yan, pnpm, dino, bun

Question 3

Qu’est ce qu’un Runtime JS ?

Answer 3

C’est un environnement qui fournit tous les composants nécessaires pour utiliser et exécutCiter des programmes JS.

Question 4

Citer des exemples de Runtime JS.

Answer 4

node, dino, bun

Question 5

Quelles sont les conventions de nommage en JS ?

Answer 5

• kebab case pour un nom de fichier
• camel case pour une fonction/variable
• upper case pour les constantes

Question 6

Quelle est la différence entre let et const pour déclarer une variable ?

Answer 6

const empêche la réassignation de la variable, let le permet. Les deux ont une portée de bloc {}.

ATTENTION : var est l’ancienne notation à ne plus utiliser.

Question 7

Comment écrit-on un commentaire en JS ?

Answer 7

// commentaire

Question 8

Quelle est la syntaxe pour concaténer une chaîne de caractère ?

Answer 8

let variable = “Hello” + “ “ + “world”;

Version optimisée avec variables déclarées plus tôt :
const hello = ‘${hello} ${world}’;

Question 9

Comment afficher quelque chose dans la console ?

Answer 9

console.log(“coucou”);

Question 10

Quelles sont les syntaxe pour déclarer une condition ?

Answer 10

if (true) {
//execution
} else if (false) {
//execution
} else {
//execution
}

switch (myVar) {
case “1”:
console.log(“ok”);
break;
default :
console.log(“default”);
}

IMPORTANT : il faut utiliser un switch si au moins 3 if/else.

Question 11

Quelle est la différence entre == et === ?

Answer 11

== compare les valeurs avec conversion de type, === compare la valeur et le type (strict). Toujours privilégier ===.

Question 11

Quelles sont les falsy value ?

Answer 11

”” / 0 / null / undefined / false

console.log (myVar || “–NC–”); -> si falsy value, –NC–

console.log (myVar ?? “–NC–”); -> –NC– uniquement si null ou undefined

Question 12

Qu’est-ce qu’une fonction anonyme et quelles est sa syntaxe ?

Answer 12

const main = function () {
console.log(“test”);
};

Cette fonction sans nom peut être appelée par le nom de la variable main().

Question 13

Qu’est-ce qu’une fonction fléchée (ou lambda) et quelles est sa syntaxe ?

Answer 13

Une fonction fléchée est une fonction anonyme raccourcie.

const main = () => {
let maVar = “test”;
return maVar;
};

s’écrit aussi :
const main = () => “test”;

puis on peut faire : console.log(main());

Si 0 ou plusieurs paramètres -> () obligées
Si une seule ligne de code -> {} omis

Question 14

Comment déclare-t-on un tableau et quels sont les principales formule pour le modifier ?

Answer 14

Déclaration d’un tableau : const tab = [1,2,3];
Ajout d’une valeur à la fin : tab.push(4);
Ajout d’une valeur au début : tabl.unshift(0);
Suppression de la dernière valeur : tab.pop();
Suppresion de la première valeur : tab.shift();
Récupérer la valeur retirée du tableau : const val = tab.pop();
Accéder à la valeur de position i : tab[i]

Question 15

Qu’est-ce qu’une fonction pure ?

Answer 15

C’est un fonction qui ne modifie pas les valeurs passées en paramètre.

Question 16

Quels sont les syntaxes pour parcourir un tableau ?

Answer 16

Parcours des éléments d’un tableau :
for (const el of tab) {
console.log(el);
}

Parcours des index d’un tableau :
for (const index in tab) {
console.log(index);
}

Question 17

Quelle fonction permet d’exécuter du code sur chaque élément d’un tableau ?

Answer 17

tab.map()

Cette fonction crée un nouveau tableau -> fonction pure

ex : tab.map( (n) => n*2)

Question 18

Quelle fonction permet de filtrer les éléments d’un tableau ?

Answer 18

tab.filter

Cette fonction crée un nouveau tableau -> fonction pure

ex : tab.filter( (el) => el % 2)

Question 19

Quelle fonction permet de transformer un tableau multidirectionnel et un tableau unidirectionnel ?

Answer 19

tab.flat()

ATTENTION : cette fonction diminue les direction de 1 seulement.

Question 20

À quoi sert la méthode .reduce() et quels sont ses 3 paramètres de rappel (callback) ?

Answer 20

Elle sert à “réduire” un tableau à une seule valeur (un nombre, une chaîne, un objet ou même un nouveau tableau) en accumulant les résultats.

Les 3 paramètres du callback sont :

• Accumulateur (acc) : La valeur précédemment retournée (ou la valeur initiale au premier tour).
• Valeur Courante (cur) : L’élément du tableau en cours de traitement.
• valeurInitial : valeur par défaut.

Syntaxe :
tableau.reduce((acc, cur) => acc + cur, valeurInitiale)

Question 21

À quoi sert le Spread Operator (…) et quels sont ses deux cas d’usage principaux ?

Answer 21

Il sert à “étaler” ou “déballer” les éléments d’un itérable (tableau ou objet) dans un nouveau contenant.

Ses deux usages principaux sont :

• Copier : Créer une copie d’un tableau ou d’un objet pour éviter de modifier l’original par référence.
• Fusionner : Combiner plusieurs tableaux ou objets en un seul de manière simple.

Exemples :
const newTeam = […oldTeam, newPokemon];
const updatedPokemon = { …pokemon, hp: 100 };

Question 22

Que fait cette variable : const [top1, top2, …leReste] = [19, 15, 14, 12, 10] ?

Answer 22

Elle déstructure un tableau.
Nous pouvons par la suite faire ceci :
console.log(top1); // 19
console.log(leReste); // [14, 12, 10]

Question 23

A quoi sert la fonction .slice() ?

Answer 23

Elle permet de récupérer des valeurs d’un tableau à l’intérieur d’un rang.

ex : tab.slice(0, 8) récupère les valeurs de l’index 0 au 8ème index.

Question 24

Comment déclare-t-on un objet plat ?

Answer 24

const myObj = { name : Doe, age : 28, }

Question 25

Comment récupère-t-on la valeur d'une clé d'un objet ?

Answer 25

myObj.name permet de récupérer la valeur de name dans l'objet myObj. myObj.name = myObj['name'] ATTENTION : si la clé peut être undefined, il faut mettre un ? ex : myObj.name?

Question 26

Quelles sont les formules pour traiter un objet ?

Answer 26

Object.keys(myObj); -> récupère toutes les clés de l'objet Object.values(myObj) -> récupère toutes les valeurs de l'objet Object.entries(myObj) -> réalise un tableau de tableau avec l'objet = keys + values

Question 27

A quoi sert TypeScript ?

Answer 27

TypeScript a pour but d'améliorer et de sécuriser la production de code JavaScript, notamment en typant les éléments.

Question 28

Comment déclare-t-on une interface ?

Answer 28

Une interface est utilisée pour définir la forme d'un objet. interface Person { name : string; firstName : string; adress? ; { primary : string; zipCode : string; } } ATTENTION : on utilise des ; au lieu des , du JavaScripte. ? permet de rendre l'élément facultatif.

Question 29

Comment instancier une onterface ?

Answer 29

const me : Person = { name : "Doe, firstName : "Jane" } ATTENTION : ici on utilise des ,

Question 30

Comment déclare-t-on une énumération ?

Answer 30

enum BirthSex { Male = "male", Female = "female", Other = "other", } Puis dans un objet, on peut utiliser l'énumération : birthSex : BirthSex.Male

Question 31

Comment déclare-t-on une fonction en TypeScript ?

Answer 31

function myFunc (birthSex : BirthSex) : string : BirthSex = typage du paramètre : string = typage de la valeur de retour

Question 32

À quoi sert le mot-clé as (ex: as HTMLInputElement) et quand faut-il l'utiliser ?

Answer 32

C'est une assertion de type. Elle permet de dire à TypeScript : "Je sais mieux que toi quel est le type de cet élément". On l'utilise principalement lors de la récupération d'éléments du DOM, car document.getElementById renvoie par défaut un type générique HTMLElement qui n'a pas de propriété .value. Exemple : const input = document.getElementById('search') as HTMLInputElement;

Question 33

Qu'est-ce qu'une fonction async ?

Answer 33

Une fonction qui renvoie toujours une Promise et permet d'utiliser le mot-clé await à l'intérieur.

Question 34

Qu'est-ce qu'une fetch ?

Answer 34

Une fonction JS permettant de faire des requêtes HTTP pour récupérer des données (JSON). const result = await fetch('url'); const data = await result.json();

Question 35

Comment récupère-t-on un élément du DOM ?

Answer 35

document.getElementById("") -> récupère l'élément contenant l'Id docuemnt.getElementByClassName("") -> récupère le premier élément contenant la classe document.querySelector("") -> récupère le premier élement correspondant ([attribut], .class, #id) document.querySelectorAll("...") -> récupère tous les éléments et renvoie une node list

Question 36

Comment créer un élément ?

Answer 36

document.createElement("")

Question 37

Comment modifier les attributs d'un élément ?

Answer 37

baliseCree.setAttribut("", ") -> modifie l'attribut ou le crée s'il n'existe pas baliseCree.url = "..." -> affecte l'attribut url à la balise avec sa valeur baliseCree.classList.add("nouvelleClass") -> ajoute une classe baliseCree.classList.remove("nomClassARetirer") -> retire une classe

Question 38

Comment insérer un élément dans la page ?

Answer 38

let parentElement = document.getElementById("container"); parentElement.appendChild(nouvelElement); IMPORTANT : il existe d'autres méthodes comme prepend, before, insertAdjacentElement Si de nombreux éléments à ajouter : let div = `

${contenuTitre}

${contenuPara}

`; parentElement.innerHTML = div;

Question 39

À quoi sert addEventListener ?

Answer 39

À attacher un écouteur d'événement (clic, input, submit) sur un élément HTML. ex : monBouton.addEventListener( "click", () => { console.log("Vous avez cliqué"); }

Question 40

Comment récupère-t-on les informations sur un évènement ?

Answer 40

event.target -> renvoie l'élément HTML qui a déclenché l'évènement event.key -> renvoie la touche appuyée lors de l'évènement event.clientX et event.clientY -> renvoie les coordonnées de la souris lors de l'évènement

Question 41

Comment récupérer une interface, fonction ou variable d'un autre module (page) ?

Answer 41

On utilise export devant l'interface/fonction/variable pour les rendre accessible depuis l'extérieur. Puis en haut de notre fichier, on déclare import {} from "./monFichier.ts";

Question 42

Qu'est-ce qu'un Web Component ?

Answer 42

Une balise HTML personnalisée (ex: ) réutilisable avec sa propre logique.

Question 43

Comment déclare-t-on un web-component ?

Answer 43

class MyComponent extends HTMLElement { constructor() { super(); } } customElement.define('ma-balise-perso', MyComponent);

Question 44

À quoi sert localStorage ?

Answer 44

À stocker des données dans le navigateur qui persistent même après avoir fermé l'onglet.

Question 45

Comment stocker des données dans le localStorage et les récupérer ?

Answer 45

localStorage.setItem("clé", "valeur"); -> crée un élément dans localStorage localStorage.getItem("clé") -> récupère un élément du localStorage IMPORTANT : le localStorage ne peut stocker que des chaînes de caractère. localStorage.setItem("pokemon", JSON.stringify(myArr)); -> stocke un tableau sous forme de chaîne JSON.parse(localStorage.getItem('pokemon') -> récupère l'élément et le remet sous forme de tableau localStorage.removeItem('pokemon') -> supprime la clé/valeur du localStorage