Scribd Logo
Importer

Bienvenue sur Scribd !

  • 10 vues

    2023-2024 SMI S3 TechWeb SessionNormale Ennoncé

    Transféré par

    Youssouf EL ALLIOUI

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd

    2023-2024 SMI S3 TechWeb SessionNormale Ennoncé

    Transféré par

    Youssouf EL ALLIOUI
    10 vues4 pages

    Titre original

    2023-2024_SMI_S3_TechWeb_SessionNormale_Ennoncé

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    10 vues4 pages

    2023-2024 SMI S3 TechWeb SessionNormale Ennoncé

    Transféré par

    Youssouf EL ALLIOUI

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    sur 4

    Royaume du Maroc ‫اﻟﻤﻤﻠﻜﺔ اﻟﻤﻐﺮﺑﯿﺔ‬

    Université Sultan Moulay Slimane ‫ﺟﺎﻣﻌﺔ اﻟﺴﻠﻄﺎن ﻣﻮﻻي ﺳﻠﯿﻤﺎن‬


    Faculté Polydisciplinaire de Khouribga ‫ ﺧﺮﯾﺒﻜﺔ‬- ‫اﻟﻜﻠﯿﺔ اﻟﻤﺘﻌﺪدة اﻟﺘﺨﺼﺼﺎت‬

    Département de mathématiques et d'informatique


    Filière SMI, Semestre 3
    M19 : Technologie du web
    Examen
    2023/2024 Session normale 1h30min

    Indications :
    • Les questions des exercices 1, 2 et 3 sont indépendantes les unes des autres. Vous pouvez répondre
    à chaque question séparément.
    • Les réponses doivent être concises et directes, en utilisant les connaissances que vous avez
    acquises dans le cours.

    Exercice 1 : HTML & CSS


    1) Expliquez la différence entre les propriétés margin et padding en CSS. Donnez un exemple d'utilisation de
    chaque propriété.
    2) Écrivez du code CSS pour créer un effet de survol (hover) sur un lien (<a>) qui change la couleur du texte
    lorsqu'il est survolé par la souris.
    3) Utilisez la balise <table> pour créer un tableau simple avec trois colonnes et trois lignes. Ajoutez un style pour
    que le texte dans les cellules soit centré et que chaque cellule ait une bordure.
    4) Créez une liste non ordonnée (balise <ul>) avec au moins trois éléments de liste (balise <li>). Appliquez une
    couleur de fond différente à chaque élément de la liste en utilisant uniquement des règles CSS.

    Exercice 2 : JS

    1) Quel sera le résultat de ce code ?


    var tableau = [1, 2, 3, 4, 1, 2, 3, 4];
    var resultat = 0;
    for (var i = 0; i < tableau.length; i++) {
    if (tableau[i] % 2 === 0) {
    resultat += tableau[i];
    }
    }
    alert(resultat);

    2) Quel sera le résultat de ce code ?


    var tableau = [1, 2, 3, 4, 1, 2, 3, 4];
    var resultat = [];
    for (var i = 0; i < tableau.length; i++) {
    resultat.push(tableau[i] * 2);
    }
    alert(resultat);

    3) Quel sera le résultat de ce code ?


    var tableau = [1, 2, 3, 4, 1, 2, 3, 4];
    function f(tableau) {
    var resultat = tableau[0];
    var position = 0;
    for (var i = 1; i < tableau.length; i++) {
    if (tableau[i] <= resultat) {
    resultat = tableau[i];
    Page 1 sur 4
    position = i;
    }
    }
    Resultat = position;
    return resultat;
    }
    alert(f(tableau));

    Exercice 3 : DOM
    1) Créez une fonction JavaScript appelée changeColor qui prend en paramètre un identifiant d'élément
    HTML et une couleur. Cette fonction doit changer la couleur du fond de l'élément correspondant à
    l'identifiant donné.
    2) Expliquez la différence entre document.getElementById et document.querySelector. Donnez un
    exemple d'utilisation de chaque méthode.
    3) Écrivez une fonction appelée addElement qui crée un nouveau paragraphe (<p>) avec le texte "Nouvel
    élément ajouté" et l'ajoute à la fin du corps (<body>) du document.
    4) Utilisez l'événement "click" pour déclencher la fonction changeColor lorsque l'utilisateur clique sur un
    bouton avec l'ID "colorButton". Assurez-vous que la couleur à appliquer est une couleur différente à
    chaque clic.
    5) Créez une fonction nommée removeElement qui prend en paramètre l'identifiant d'un élément HTML
    et le supprime du document.

    Exercice 4 : Pratique
    Vous devez créer une application calculatrice en utilisant HTML, CSS et JavaScript. La calculatrice doit être
    capable d'effectuer les opérations d'addition, de soustraction, de multiplication et de division. Le code HTML
    et CSS de base est fourni ci-dessous. Votre tâche consiste à compléter le code JavaScript pour permettre le
    fonctionnement correct de la calculatrice.
    Code HTML :
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculatrice</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <div class="calculator">
    <input type="text" id="display" readonly>
    <div class="buttons">
    <button onclick="appendNumber('7')">7</button>
    <button onclick="appendNumber('8')">8</button>
    <button onclick="appendNumber('9')">9</button>
    <button onclick="appendOperator('/')">/</button>

    <button onclick="appendNumber('4')">4</button>
    <button onclick="appendNumber('5')">5</button>
    <button onclick="appendNumber('6')">6</button>
    <button onclick="appendOperator('*')">*</button>

    <button onclick="appendNumber('1')">1</button>
    <button onclick="appendNumber('2')">2</button>
    <button onclick="appendNumber('3')">3</button>
    <button onclick="appendOperator('-')">-</button>

    <button onclick="appendNumber('0')">0</button>
    <button onclick="clearDisplay()">C</button>
    <button onclick="calculateResult()">=</button>
    Page 2 sur 4
    <button onclick="appendOperator('+')">+</button>
    </div>
    </div>
    <script src="script.js"></script>
    </body>
    </html>

    Code CSS : Résultat attendu


    body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    }
    .calculator {
    text-align: center;
    }
    #display {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 1.5em;
    }
    .buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    }
    button {
    padding: 15px;
    font-size: 1.2em;
    }

    Tâches à accomplir :
    1) Complétez le fichier script.js, fourni dans la feuille de réponse (Page 4 sur 4), pour implémenter les
    fonctions nécessaires pour la calculatrice.
    2) Vous devez permettre l'addition, la soustraction, la multiplication et la division.
    3) Assurez-vous que le résultat s'affiche correctement dans la zone de l'affichage (#display).
    4) Gérez le bouton "C" pour effacer l'affichage.

    Page 3 sur 4
    Royaume du Maroc ‫اﻟﻤﻤﻠﻜﺔ اﻟﻤﻐﺮﺑﯿﺔ‬
    Université Sultan Moulay Slimane ‫ﺟﺎﻣﻌﺔ اﻟﺴﻠﻄﺎن ﻣﻮﻻي ﺳﻠﯿﻤﺎن‬
    Faculté Polydisciplinaire de Khouribga ‫ ﺧﺮﯾﺒﻜﺔ‬- ‫اﻟﻜﻠﯿﺔ اﻟﻤﺘﻌﺪدة اﻟﺘﺨﺼﺼﺎت‬

    Département de mathématiques et d'informatique


    Filière SMI, Semestre 3
    M19 : Technologie du web
    Examen
    2023/2024 Session normale 1h30min

    FEUILLE DE RÉPONSE (Exercice 4)

    Code javascript :

    // Fonction pour ajouter un chiffre à l'affichage


    function appendNumber(number) {
    ………………………………………………………………………………………………………………;
    }

    // Fonction pour ajouter un opérateur à l'affichage


    function appendOperator(operator) {
    ………………………………………………………………………………………………………………;
    }

    // Fonction pour effacer l'affichage


    function clearDisplay() {
    ………………………………………………………………………………………………………………;
    }

    // Fonction pour calculer le résultat


    function calculateResult() {
    try {
    // Utilisation de la fonction eval() pour évaluer l'expression mathématique
    const result = eval(………………………………………………………………………);

    // Affichage du résultat
    ………………………………………………………………………………………………………;
    } catch (error) {
    // Gestion des erreurs (par exemple, division par zéro)
    ………………………………………………………………………………………………………;
    }
    }

    Nom & Prénom : ……………………………………………………… Num d’Examen : …………………………


    Page 4 sur 4

    Vous aimerez peut-être aussi