Scribd Logo
Importer

Bienvenue sur Scribd !

  • TP1 Cratt M1dec 2020

    Transféré par

    wassim
    19 vues2 pages

    Titre original

    TP1 CRATT M1DEC 2020

    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é ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    19 vues2 pages

    TP1 Cratt M1dec 2020

    Transféré par

    wassim

    Droits d'auteur :

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

    UBBA/FMI – TP module CRA3T – Master 1 informatique Décisionnelle – 2019/2020

    Travaux Pratiques Série 1 : Présentation IHM, Traitements locaux


    Outils nécessaires : NotePad, Navigateur (créer un fichier tp.html avec NotePad)

    IHM Traitements locaux Traitements globaux Données


    Travail Pratique 1 (Création de page HTML simple avec Formulaire) :

    Construire avec HTML un formulaire (cf. figure 1). Servez-vous par ces balises :

    1. Formulaire : <form name=" " action="url cible" method="post ou get" > </form>
    2. Créer un champ texte : Nom: <input type="text" size="40" name="nom">
    3. Créer un bouton envoyer: <input type="submit" value="Envoyer">
    4. Créer un bouton Annuler : <input type="reset" value="Annuler">
    5. Pour retourner à la ligne : <br>
    6. Les «input» doivent être ajouter à l’intérieur de balise formulaire

    Figure 1 Formulaire

    Travail Pratique 2 (Traitements locaux sur un Formulaire) :

    A. Introduction à JavaScript :

    Les scripts JavaScript sont exécutés dans le navigateur de l'utilisateur côté client et non pas sur
    le serveur où les pages Web se trouvent, aussi on ne peut pas tout faire avec JavaScript !!!!

    1. Script dans HTML: <script type="text/javascript"> alert("Bonjour mon père!"); </script>


    2. Vous pouvez créer un script dans un fichier séparé, très utile si vous voulez utiliser les
    mêmes fonctions JavaScript dans plusieurs fichiers HTML :
    o Créer un fichier : nomFichier.js et écrire le script sans l’utilisation des balises script
    o Appeler le script dans HTML: <script src="nomFichier.js" type="text/javascript">
    3. Déclarer une fonction : function nomDeFonction() { alert("Bonjour ma mère!"); }
    4. Déclarer une variable : var resultat = "Bonjour mon frère" ; alert(resultat);
    N’hésiter pas de tester ces scripts avant de continuer !!!
    5. Conditionnel : if (document.nomFormulaire.nomChamp.value == "" ) {return false ;}
    6. Boucle : for(i=0;i<50;++i){} var i=0; while (i<50){i++;}
    7. Relation formulaire-Script :
    o Pour récupérer la valeur de champ : document.nomFormulaire.nomChamp.value ; ou bien
    document.getElementById("nomChamp")
    o Pour appeler une fonction : <input type="button" value="Calculer" onClick="nomFonction()">
    Exemple simple «n’hésiter pas de le tester» :
    <html> <head><title>Test JavaScript</title>
    <script type="text/javascript">
    function carre() {
    var resultat = document.form.nombre.value * document.form.nombre.value;
    alert("Le carré de " + document.form.nombre.value + " = " + resultat); }
    </script>
    </head>
    <body>
    <form name="form" action="">
    <input type="text" name="nombre" size="3">
    <input type="button" value="Calculer le carré" onClick="carre()"></form></body> </html>
    8. Retester l’exemple précédent en séparant le script dans un fichier
    B. Contrôle de formulaire avant l’envoi :
    Avant de permettre aux utilisateurs d’envoyer leur formulaire (cf. figure 1) il faut qu’on contrôle
    la saisie comme suit :

    1. Créer une fonction générale pour vérifier tous les champs.


    2. Tous les champs doivent être remplis.
    3. Le champ email doit au moins contenir le symbole @ pour cela utiliser cette technique
    pour vérifier l’existence de @ : document.nomFormulaire.nomChamp.value.indexOf('@') == -1
    4. Le champ Age doit être un nombre [0,9], utiliser cette technique :
    o Pour récupérer la longueur de champ : document.nomFormulaire.champ.value.length
    o Pour lire un caractère : document.nomFormulaire.nomChamp.value.charAt(i)
    o Exemple pour vérifier un nombre :
    var isNombre = true; var i =0;
    while (i<document.formulaire.age.value.length && isNombre == true){
    if(document.formulaire.age.value.charAt(i) < "0" || document.formulaire.age.value.charAt(i) > "9")
    {
    isNombre = false;
    alert("Cette mention n'est pas un nombre!");
    document.formulaire.age.focus();
    return false;
    } i++; }

    5. Pour positionner le curseur sur le champ qui a un problème de contrôle utiliser cette
    technique : document.nomFormulaire.nomChamp.focus();
    6. Voici un exemple simple de vérification pour le champ prenom:
    function nomFonction(){
    if(document.formulaire.prenom.value == "") {
    alert("Veuillez entrer votre prenom!");
    document.formulaire.prenom.focus(); La fonction va retourner soit true soit false
    return false; }}
    7. Maintenant vous avez terminé votre fonction de contrôle il vous reste uniquement la
    liaison avec le formulaire pour cela utiliser cette technique :
    <form name="formulaire" action="url destination" method="post" onSubmit="return nomFonction()">
    Nom: <input type="text" size="40" name="nom"> <br>
    Prénom: <input type="text" size="40" name="prenom"> <br>
    Si return false : l’envoi est empêché
    Email: <input type="text" size="40" name="email"> <br>
    Âge: <input type="text" size="40" name="age"> <br> Sinon l’envoi s’effectue
    <input type="submit" value="Envoyer"><input type="reset" value="Annuler">
    </form>

    On peut toujours utiliser du JavaScript côté client pour manipuler la page HTML. Ça, ça ne change pas. La
    nouveauté 2011, Node.js offre un environnement côté serveur qui nous permet aussi d'utiliser le langage
    JavaScript pour générer des pages web. En gros, il vient en remplacement de langages serveur comme PHP,
    Java EE, ASP.net, etc.

    Vous aimerez peut-être aussi