wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

52355429-a189-4d5f-8ac0-0994b9be5411

Total questions: 34

Worksheet time: 3600secs

Name
Class
Date
1.

Où place-t-on généralement la balise ⁠<script> pour optimiser le chargement d’une page web ? (Plusieurs réponses possibles)

a)

Dans le ⁠<head> avec l'option defer

b)

Juste avant la fermeture de la balise ⁠</body>

c)

En tout début de balise ⁠<body>

d)

Entre deux balises ⁠<div>

2.

Quel est le type d’une variable contenant du texte en JavaScript ?

a)

integer

b)

boolean

c)

string

d)

float

3.

Parmi les structures suivantes, laquelle représente correctement la structure complète et bien formée d'un fichier HTML ?

a)

<!DOCTYPE html>

<html>

<head>

<title>Page Titre</title>

</head>

<body>

<header>

<nav>

<h1>Bienvenue</h1>

</nav>

</header>

<main>

<section>

<p>Contenu principal.</p>

</section>

</main>

<footer>

<p>Pied de page.</p>

</footer>

<script src="script.js"></script>

</body>

</html?>

b)

<!DOCTYPE html>

<html>

<head>

<title>Page Titre</title>

</head>

<body>

<header>

<nav>...</nav>

</header>

<main>

<section>

<p>Contenu principal.</p>

</section>

<h1>Bienvenue</h1>

</main>

<footer>

<p>Pied de page.</p>

</footer>

<script src="script.js"></script>

</html>

c)

<!DOCTYPE html>

<html>

<head>

<title>Page Titre</title>

</head>

<body>

<header>

<nav>...</nav>

</header>

<main>

<section>

<h1>Bienvenue</h1>

<p>Contenu principal.</p>

</section>

</main>

<footer>

<p>Pied de page.</p>

</footer>

<script src="script.js"></script>

</html>

d)

<!DOCTYPE html>

<html>

<head>

<title>Page Titre</title>

</head>

<body>

<header>

<nav>...</nav>

</header>

<main>

<section>

<h1>Bienvenue</h1>

<p>Contenu principal.</p>

</section>

</main>

<footer>

<p>Pied de page.</p>

</footer>

<script src="script.js"></script>

</body>

</html>

4.

Quelle est la syntaxe correcte pour déclarer une constante en JavaScript ?

a)

⁠const number = 10;

b)

⁠constant number = 10;

c)

⁠var number = 10;

d)

⁠let number = 10;

5.

Quel type de variable est utilisé pour stocker des valeurs vraies ou fausses ?

a)

⁠String

b)

⁠Number

c)

⁠Boolean

d)

⁠Object

6.

Quelle est la sortie de la condition suivante ?

let x = 5;

if (x > 10) {

console.log("Grand");

} else {

console.log("Petit");

}

a)

Rien

b)

"Grand"

c)

"Petit"

d)

Erreur

7.

Quelles approches permettent de parcourir chaque élément d’un tableau et d’exécuter une fonction sur chacun de ces éléments ? (Plusieurs réponses possibles)

a)

for

b)

forEach

c)

⁠map

d)

while

8.

Quelle méthode est couramment utilisée en JavaScript pour déboguer en affichant des informations dans la console ?

a)

console.error()

b)

console.log()

c)

console.warn()

d)

console.debug()

9.

Comment déclare-t-on une variable dont la valeur peut être modifiée ?

a)

⁠const

b)

⁠let

c)

⁠variable

d)

⁠fixed

10.

Quelle méthode permet d’ajouter un élément à la fin d’un tableau existant en JavaScript ?

a)

⁠push()

b)

⁠pop()

c)

⁠shift()

d)

⁠unshift()

11.

Quelle méthode permet de supprimer le premier élément d’un tableau en JavaScript ?

a)

⁠push()

b)

⁠pop()

c)

⁠shift()

d)

⁠unshift()

12.

Comment sélectionne-t-on un élément HTML avec l’id "monElement" en JavaScript ? (Plusieurs réponses possibles)

a)

document.querySelector("#monElement")

b)

document.getElementById("monElement")

c)

document.getElementsById("monElement")

d)

document.getElementsByTagName("#monElement")

13.

Quel événement doit-on utiliser lors de l'écoute d'un événement pour détecter le clic de l'utilisateur sur un élément ?

a)

onhover

b)

onclick

c)

hover

d)

click

14.

Quelle propriété en JavaScript permet de modifier le contenu textuel d’un élément HTML sélectionné ?

a)

innerHTML

b)

textContent

c)

value

d)

innerText

15.

Quelle méthode est utilisée pour créer un nouvel élément HTML en JavaScript ?

a)

createElement

b)

createNode

c)

newElement

d)

makeElement

16.

Quelle est la syntaxe correcte pour utiliser une condition ternaire en JavaScript ?

a)

condition ? expression1 : expression2;

b)

if(condition) { expression1 } else { expression2 }

c)

condition : expression1 ? expression2;

d)

condition ? expression1, expression2;

17.

Quelle est la bonne syntaxe permettant d'extraire les éléments d'un objet ?

let user = {name : "Margaux", age: 25, city: "Lille"}; ?

a)

{name, age, city} = user;

b)

[name, age, city]= user;

c)

user.name, user.age, user.city = user;

d)

[{name}, {age}, {city}] = user;

18.

Que retourne la méthode ⁠filter() appliquée à un tableau en JavaScript ?

a)

Les éléments du tableau qui correspondent à une condition

b)

Les indices des éléments qui correspondent à une condition

c)

Le premier élément filtré

d)

Rien, elle modifie le tableau existant

19.

Quelle est la bonne pratique de nommage pour les variables en JavaScript ? (Plusieurs réponses possibles)

a)

Utiliser des noms clairs et significatifs

b)

Tout écrire en majuscules

c)

Utiliser CamelCase (ex : maVariableTest)

d)

Insérer des espaces dans les noms de variables

20.

Dans l’instruction suivante, que représente ⁠=== ?

if (a === b) {

  console.log('a est égale à b');

}

a)

Une affectation de valeur à la variable ⁠a

b)

Une comparaison d’égalité stricte

c)

Une concaténation de deux chaînes de caractères

d)

Une comparaison d’égalité

21.

Laquelle de ces syntaxes permet de démarrer une boucle ⁠for en JavaScript ?

a)

for (i : 0 → 10) { ... }

b)

for (i <= 10; i++) { ... }

c)

for (let i = 0 > 10; i++) { ... }

d)

for (let i = 0; i < 10; i++)

{ ... }

22.

Quelle est la syntaxe correcte pour une fonction fléchée qui additionne deux nombres ?

a)

let somme = (a, b) => { return a + b; };

b)

function somme(a, b) => a + b;

c)

function => somme(a, b) { return a + b; }

d)

arrow somme(a, b) { a + b; }

23.

Parmi ces choix, lequel retourne toujours le premier élément correspondant au sélecteur CSS passé en paramètre ?

a)

document.getElementsByClassName()

b)

document.getElementByTagName()

c)

document.querySelector()

d)

document.querySelectorAll()

24.

Qu’affiche la fonction ⁠console.log() en JavaScript ?

a)

Un message d’erreur dans la console du navigateur

b)

Un avertissement (warning) dans la console du navigateur

c)

Un message dans la console du navigateur

d)

Rien, c’est une fonction vide

25.

Quelle syntaxe doit-on ajouter pour écouter un événement au survol sur un bouton après l'avoir defini ?

const button = document.getElementsByTagName("button");

a)

button.addEventListener('hover', () => {})

b)

button.listenEvent('hover', () => {})

c)

button.NameEventListener('hover', () => {})

d)

button.newEventHandler('hover', () => {})

26.

Dans un document HTML, pourquoi utiliser les feuilles de style (CSS) en externe plutôt qu’en interne ? (Plusieurs réponses possibles)

a)

Pour simplifier la maintenance du code

b)

Pour accélérer le chargement global du site dans certains cas

c)

Parce que le CSS en interne n’est pas autorisé

d)

Pour réutiliser la même feuille de style sur plusieurs pages

27.

Laquelle de ces propositions est correcte pour créer un objet en JavaScript ?

a)

let obj = [ clef: "valeur", autreClef: 42 ];

b)

let obj = { clef: "valeur", autreClef: 42 };

c)

let obj = ( clef: "valeur"; autreClef: 42 );

d)

let obj = < clef = "valeur", autreClef = 42 >;

28.

Pour vérifier si une variable ⁠x est strictement différente de 10, on écrit :

a)

if (x != 10) { ... }

b)

if (x !== 10) { ... }

c)

if (x <> 10) { ... }

d)

if (x isNot 10) { ... }

29.

Quel est l’intérêt principal d’utiliser ⁠document.createElement("div") plutôt que d’écrire directement ⁠<div> dans le HTML ? (Plusieurs réponses possibles)

a)

Permet de créer des éléments dynamiquement via JavaScript

b)

Évite le rechargement complet de la page lors de l’ajout d’un élément

c)

Permet de générer automatiquement un style CSS par défaut

d)

Rend la page plus rapide dans tous les cas

30.

Dans un formulaire HTML, à quoi sert la propriété ⁠name d’un champ input ?

<input name="city" placeholder="Votre ville...">

a)

À donner un nom de variable côté JavaScript uniquement

b)

À renommer la balise ⁠<input> en ⁠<name>

c)

À identifier la donnée lors de l’envoi du formulaire

d)

À obliger la saisie d’un champ

31.

Quelle méthode JavaScript insère un nouvel enfant à la fin d’un élément parent dans le DOM ?

a)

insertChild()

b)

addElement()

c)

appendChild()

d)

pushDOM()

32.

À quoi sert ⁠new FormData(formulaire) en JavaScript ?

a)

Créer un nouvel élément ⁠<form> dans le DOM

b)

Envoyer immédiatement le formulaire à la base de données

c)

Créer un objet facilitant la récupération des données d’un formulaire

d)

Vérifier la validité des champs d’un formulaire selon le HTML5

33.

Quelle balise HTML utilise-t-on pour lier un fichier JavaScript externe ?

a)

<script src="chemin.js"></script>

b)

<js src="chemin.js"></js>

c)

<javascript src="chemin.js"></javascript>

d)

<scriptFile src="chemin.js"></scriptFile>

34.

Pour tester plusieurs valeurs d’une même variable, on utilise :

a)

if ... else if ... else if ... else if ... else

b)

Switch

c)

Une boucle while

d)

try et catch