Scribd Logo
Importer

Bienvenue sur Scribd !

  • 24 vues

    TP5 2

    Transféré par

    hayfa bellazreg

    Droits d'auteur :

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

    TP5 2

    Transféré par

    hayfa bellazreg
    24 vues4 pages

    Titre original

    TP5-2

    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
    24 vues4 pages

    TP5 2

    Transféré par

    hayfa bellazreg

    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
    Vous êtes sur la page 1sur 4

    LSI-GL2 - Programmation WEB

    Travaux Pratiques-5
    Exercice1 :
    Soit le document html suivant :

    <!doctype html>
    <html>
    <head>
    <title>Ecriture d'une fonction</title>
    <meta charset="utf-8">
    </head>
    <body>
    <h1>Ecriture d'une fonction</h1>
    <p>Cliquez sur le bouton pour lancer la fonction:
    <button onclick="SurfaceRectangle()">Lancer la fonction</button>
    </p>
    </body>
    </html>

    Compléter le document ci-dessus pour que le clic sur le bouton lance une fonction. Cette fonction
    demande la saisie d'une largeur, d'une longueur et affiche la surface du rectangle correspondant.

    Exercice2 :
    Ecrire une page (Figure1) qui contient :
    Une zone de texte de type date
    Un bouton dont la valeur est calculez votre âge
    Une zone de texte pour afficher l’âge en année
    Une zone de texte pour afficher l’âge complet
    Réaliser un script JavaScript qui permet de calculer l’âge en fonction de la date de naissance ainsi
    donnée par l’utilisateur.

    Figure1 : calcul d’âge

    1
    Exercice 3 :
    Soit le document suivant :

    <!doctype html>
    <html>
    <head>
    <title>styles</title>
    <meta charset="utf-8">
    </head>
    <body>
    <p id="parag1">
    Le DOM, qui signifie Document Object Model (c'est-à-dire "modèle d'objet de
    document", en français), est une interface de programmation qui est une
    représentation du HTML d'une page web et qui permet d'accéder aux éléments de
    cette page web et de les modifier avec le langage JavaScript.
    </p>
    <button onclick="changer_style()">Changer Style</button>
    </body>
    </html>

    Questions:
    1. Ecrire la fonction changer_style qui permet de styler le paragraphe au clic du bouton par :
    Une couleur blanche
    Un background noir
    Une bordure noire pointillée de 1px
    Un retrait de 5px
    2. Définir les propriétés précédentes dans une classe active et modifier la fonction changer_style
    de telle façon qu'elle ajoute la classe active au paragraphe.

    Exercice 4 :
    Ecrire un script JS qui permet de contrôler l’affichage d’un bloc de texte à l’aide d’un bouton. Par défaut
    le bloc de texte est affiché et le texte du bouton est « cacher le bloc ». Le clic sur le bouton engendre
    la disparition du bloc et le texte du bouton devient « afficher le bloc ». Le clic sur le bouton de nouveau
    permet de retourner à la situation initiale.

    2
    Exercice 5 :
    1- Un écrire un programme HTML qui permet de créer le formulaire ci-dessus.

    2- Ajouter un script JS qui permet de récupérer les données saisies par l’utilisateur et de les
    afficher dans la page Web et ce, suite au clic sur le bouton valider. Le clic sur Annuler engendre
    la réinitialisation du formulaire.
    3- Transformer le formulaire de façon à ce que la saisie se fasse sur trois étapes comme indiqué
    par les captures d’écran ci-dessous.

    3
    4- Transformer le fonctionnement du formulaire de saisie de façon à ce que chaque choix
    d’option engendre la proposition d’un ensemble de modules qui lui est spécifique dans la rubrique
    « Choix des modules ». Ces modules sont donnés par le tableau suivant :

    Option Génie logiciel Multimédia


    Patron de conception Infographie
    Liste des modules associés Java Traitement d’images
    Bases de données

    Vous aimerez peut-être aussi

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy