Aller au contenu

QCM☘

Note

Les QCM sont là pour vous aider à contrôler ce que vous avez retenu. Si vous ne répondez pas à toutes les questions sans hésitation, c'est sans doute qu'il faut refaire des lectures des pages précédentes.

Trouvez la ou les bonnes réponses.

QCM 1☘

Le langage JavaScript

  • peut être interprété par le navigateur.
  • ne peut être interprété que côté serveur.
Réponse
  • peut être interprété par le navigateur.
  • ne peut être interprété que côté serveur.

Remarque: il peut aussi être interprété côté serveur (faîtes des recherches sur le web sur node.js par exemple).

QCM 2☘

Le créateur de JavaScript est:

  • Bill Gates
  • Brendan Eich
  • Guido van Rossum
  • James Gosling et Patrick Naughton
Réponse
  • Bill Gates
  • Brendan Eich
  • Guido van Rossum
  • James Gosling et Patrick Naughton

QCM 3☘

La création de JavaSCript date:

  • des années 1970
  • des années 1980
  • des années 1990
  • des années 2000
Réponse
  • des années 1970
  • des années 1980
  • des années 1990 (1995)
  • des années 2000

QCM 4☘

Le langage JavaScript

  • est resté le même depuis sa création
  • a été modifié depuis sa création
Réponse
  • est resté le même depuis sa création
  • a été modifié depuis sa création

C'est le cas pour tous les langages (sinon, c'est qu'ils sont morts, non utilisés!)

QCM 5☘

En JavaScript:

  • l'indentation est indispensable pour délimiter un bloc.
  • l'indentation n'est pas indispensable.
  • Un bloc d'instructions est délimité par des accolades.
Réponse
  • l'indentation est indispensable pour délimiter un bloc.
  • l'indentation n'est pas indispensable.
  • Un bloc d'instructions est délimité par des accolades.

L'indentation n'est pas indispensable pour la machine (puisque les accolades délimitent le bloc) mais l'indentation reste quasiment indispensable pour le lecteur humain!

Un bloc d'instructions doit être délimité par des accolades. Sauf dans le cas d'un bloc d'une seule instruction: les accolades ne sont alors pas toujours nécessaires.

QCM 6☘

En langage Python, on sépare deux instructions par un passage à la ligne.

En JavaScript:

  • on sépare également les instructions par un passage à la ligne.
  • on sépare les instructions par un point-virgule.
Réponse
  • on sépare également les instructions par un passage à la ligne.
  • on sépare les instructions par un point-virgule.

Si l'on écrit deux instructions sur la même ligne, le point-virgule pour les séparer est indispensable. Mais un passage à la ligne permet de se passer du point-virgule dans la plupart des situations.
Pour être plus précis sur ce sujet, lisez cet article. Vous respecterez l'usage qui consiste à ajouter des points-virgule pour terminer une instruction, même dans les cas où le changement de ligne permettrait de s'en passer.

QCM 7☘

Avec le code suivant (code d'une page essai.html):

<!DOCTYPE html>

<html lang="fr">

<head>
    <meta charset="utf-8">
    <title> mouseover  </title>
    <style>
        body{
            font-size: 20px;
        }
        html{
            width: 80%;
            margin: 0 auto;
        }
        h1{
            font-size: 2rem;
            font-weight: bold;
            color: white;
            background-color: orange;
            border-radius: 10%;
        }
        p{
            font-size: 0.8rem;
            color: black;
            background-color: lavender;
            text-align: center;
            height: 5rem;
            line-height: 5rem;
            border-radius: 0;
        }
    </style>

</head>

<body>

<p id="test">Paragraphe test</p>

<script>
    /*déclaration d'une variable ciblant un élément html: */
    let test = document.querySelector("#test");
    /*Un écouteur sur l'événement mouseover: */
    test.addEventListener( "mouseover",
    () => {
        test.style.backgroundColor = "yellow";
    }
    , false)
</script>
</body>
</html>

L'action programmée consiste:

  • à modifier la couleur du texte du paragraphe d'identifiant test lorsqu'on passe la souris sur ce paragraphe.
  • à modifier la couleur du texte du paragraphe d'identifiant test lorsqu'on clique sur ce paragraphe.
  • à modifier la couleur de fond du paragraphe d'identifiant test lorsque la souris quitte le paragraphe.
  • à modifier la couleur de fond du paragraphe d'identifiant test lorsqu'on passe la souris sur ce paragraphe.
Réponse
  • à modifier la couleur du texte du paragraphe d'identifiant test lorsqu'on passe la souris sur ce paragraphe.
  • à modifier la couleur du texte du paragraphe d'identifiant test lorsqu'on clique sur ce paragraphe.
  • à modifier la couleur de fond du paragraphe d'identifiant test lorsque la souris quitte le paragraphe.
  • à modifier la couleur de fond du paragraphe d'identifiant test lorsqu'on passe la souris sur ce paragraphe.

QCM 8☘

Avec le code suivant (code d'une page essai.html):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>

<html lang="fr">

<head>
    <meta charset="utf-8">
    <title> mouseover  </title>
    <style>
        body{
            font-size: 20px;
        }
        html{
            width: 80%;
            margin: 0 auto;
        }
        h1{
            font-size: 2rem;
            font-weight: bold;
            color: white;
            background-color: orange;
            border-radius: 10%;
        }
        p{
            font-size: 0.8rem;
            color: black;
            background-color: lavender;
            text-align: center;
            height: 5rem;
            line-height: 5rem;
            border-radius: 0;
        }
    </style>

</head>

<body>

<p id="test">Paragraphe test</p>

<script>
    /*déclaration d'une variable ciblant un élément html: */
    let test = document.querySelector("#test");
    /*Un écouteur sur l'événement mouseover: */
    test.addEventListener( "mouseover",
    () => {
        test.style.color = "brown";
        test.style.backgroundColor = "yellow";
        test.style.borderRadius = "20px";
        test.style.fontSize = "2rem";
    }
    , false)
</script>
</body>
</html>

Le mot test utilisé en ligne 46 dans test.style.color = "brown"; :

  • est l'identifiant du paragraphe <p id="test">Paragraphe test</p>.
  • est la variable javascript déclarée en ligne 42 par let test = document.querySelector("#test");.
Réponse
  • est l'identifiant du paragraphe <p id="test">Paragraphe test</p>.
  • est la variable javascript déclarée en ligne 42 par let test = document.querySelector("#test");.

Pour vous en persuader, renommer la variable en ligne 42 (en modifiant par exemple la ligne 42 en let tagada = document.querySelector("#test");), vous constaterez qu'il vous faudra modifier chacun des mots test des lignes 43 à 49 en tagada avant que le script ne refonctionne. Bien sûr cette variable javascript a pour rôle de cibler un élément html, d'où le fait que l'on préfère parfois lui donner le même nom que l'identifiant de l'élément ciblé.

QCM 9☘

Avec le code suivant:

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title> qcm  </title>
    <style>
        html{
            font-size: 20px;
        }
        body{
            width: 80%;
            margin: 2rem auto;
        }
        form{
            margin: 1rem;
            padding: 1rem;
            border: 5px ridge purple;
            text-align: center;
        }
    </style>
</head>

<body>


<form>        
    <div>
        <label for="champ1">Champ 1:</label>
        <input type="text"   id="champ1"  minlength="1" maxlength="1"/>
    </div>

    <div>
        <label for="champ2">Champ 2:</label>
        <input type="text"   id="champ2"  minlength="1" maxlength="1"/>
    </div>

    <div>
        <label for="champ3">Champ 3:</label>
        <input type="text"   id="champ3"   minlength="1" />
    </div>


    <div>
     <button type="button" id="go">Cliquez ici.</button> 
    </div>

</form>



<div id="resultat">

</div>

<script>
function f(a, b, c){
    let resultat = '';
    for(let caractere of c){
        if(caractere == a){
            resultat = resultat + b + b;
        }
        else{
            resultat = resultat + caractere;
        }
    }
    return resultat;
}


document.querySelector("#go").addEventListener( "click",
    () => {
        let A = document.querySelector("#champ1").value;
        let B = document.querySelector("#champ2").value;
        let C = document.querySelector("#champ3").value;

        document.querySelector("#resultat").innerHTML = f(A, B, C);
    },
    false)

</script>
</body>
</html>
on entre a dans le champ 1, u dans le champ 2, et babar dans le champ 3.

Le résultat affiché après un clic sur le bouton d'identifiant go sera:

  • bubur
  • bbbbr
  • bbbbbbr
  • buubuur
Réponse
  • bubur
  • bbbbr
  • bbbbbbr
  • buubuur

Remarque: si vous avez trouvé difficile la compréhension du code du fait des noms de variables non significatifs, vous savez maintenant qu'il ne faut plus faire ce genre de choix!