Aller au contenu

Activités IV)

Activité IV.01

  • Dans votre répertoire de travail, créez un fichier index.html, un fichier style.css et un fichier script.js.

  • Copiez-collez le code suivant dans le fichier index.html qui vient d'être créé.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Le trio</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Le trio : HTML, CSS et JavaScript</h1>
        <p id="monPara">Voici une page web qui ne fait pas grand-chose</p>
        <button onclick="foncRouge()">Rouge</button>
        <button onclick="foncVert()">Vert</button>
    </body>
    <script src="script.js"></script>
</html>
  • copiez-collez le code suivant dans le fichier style.css qui vient d'être créé
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
h1{
    text-align: center;
}
.rouge {
    color:red;
    font-size:20px;
}
.vert {
    color:green;
    font-size:30px;
}
  • copiez-collez le code suivant dans le fichier script.js qui vient d'être créé
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function foncRouge() {
    let balp= document.querySelector("#monPara")
    balp.classList.remove("vert");
    balp.classList.add("rouge");
}
function foncVert() {
    let balp= document.querySelector("#monPara")
    balp.classList.remove("rouge");
    balp.classList.add("vert");
}

Après avoir testé l'exemple ci-dessus en cliquant sur fichier index.html, apportez les modifications nécessaires pour que les boutons rouge et vert permettent de modifier la couleur du titre h1

Activité IV.02

Créez la page web suivante :

si l'utilisateur clique sur le bouton Changer, le texte COUCOU ! devient rouge, si on appuie de nouveau sur le bouton Changer, le bouton redevient noir (si on appuie de nouveau sur le bouton, COUCOU ! redevient rouge...)

Activité IV.03

Soit la page HTML suivante :

index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Le trio</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div></div>
    </body>
    <script src="script.js"></script>
</html>

style.css

1
2
3
4
5
div {
    width : 200px;
    height : 100px;
    background-color : black;   
}

Modifiez le code ci-dessus pour que le survole de la div avec le curseur de la souris modifie la couleur de fond de la div (background-color).

Activité IV.04

Activité IV.05

Activité IV.06

Activité IV.07

Activité IV.08

Activité IV.09

Activité IV.10

Activité IV.11

Activité IV.12

Activité IV.13

Activité IV.14

Activité IV.15

Activité IV.16

Activité IV.17

Activité IV.18

Activité IV.19

Activité IV.20