Scribd Logo
Importer

Bienvenue sur Scribd !

  • Java Script TP Cours

    Transféré par

    Meriem EL Hiba
    100 vues4 pages

    Titre original

    java script tp cours

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, 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 DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    100 vues4 pages

    Java Script TP Cours

    Transféré par

    Meriem EL Hiba

    Droits d'auteur :

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

    ANIBOU CHAIMAE 3IR EMSI

    JAVA SCRIPT
    Introduction :
    Le Javascript est un langage de script incorporé dans un document HTML. Ce langage est un
    langage de programmation qui permet d'apporter des améliorations au langage HTML en
    permettant d'exécuter des commandes du côté client, c'est-à-dire au niveau du navigateur
    et non du serveur web. 
    Principe:
    Javascript va diviser la page en objets et surtout va vous permettre d'accéder à ces
    objets, d'en retirer des informations et de les manipuler.

    1. Pour référencer un script externe appelé monScript.js dans une page html:
    <script src="monScript.js"></script>
    2. Pour ajouter un commentaire en JavaScript :
    /* Ceci est un commentaire */

    3. Pour déclarer une variable maVariable:


    Var maVariable;
    Let maVariable;
    4. Pour créer une fonction en JavaScript qui se nomme maFonction :
    Function maFonction(){};
    5. Pour exécuter une fonction déjà crée qui s’appelle maFonction :
    maFonction();
    ANIBOU CHAIMAE 3IR EMSI

    Section: Boites de dialogues

    Exercice1:

    Ecrire un script qui affiche le message "Hello World !" dans une boite de dialogue.

    Exercice 2:

    Ecrire un script qui affiche le message "Hello World" après le clic sur le premier bouton, et lors du clic
    sur le  deuxième bouton  demander à l'utilisateur de saisir son nom. Ensuite demander
    une confirmation du nom de l'utilisateur. Si le nom est confirmé, afficher ce dernier dans une boîte de
    dialogue.

    Exercice 3:

    Ecrire un script qui affiche un bouton sur la page. Lorsque le bouton est pressé, une boîte de dialogue
    apparaît avec le message "Hello World !".

    Section : Manipulation du DOM en Java Script

    NB: HTML DOM permet à java script de modifier le contenu des éléments html

    Exercice 4:

    1. Créer un document html


    contenant des champs de type range
    et un titre dans un tableau html (voir
    l'exemple sur la figure ci-dessous) :

    2. Créer le script qui permet


    de changer les propriétés

    (background,padding,height,width,arrondi,rotation) du titre en milieu en changeant


    leurs valeurs via les inputs de type range.
    ANIBOU CHAIMAE 3IR EMSI

    Exercice 4:
    Soit le document html suivant:
    1. Ecrire la fonction change_style qui
    <!doctype html> permet de styler le paragraphe au clic du
    <html> bouton par :
    <head>
     une couleur blanche
    <meta charset="utf-8">
     un background noir.
    <title>styles</title>
    </head>  une bordure noire pointillée de 1px

    <body> 2. Définir les propriétés précédentes dans


    <p id="parag1">Lorem ipsum une classe "active" et modifier la fonction
    dolor sit amet, consectetur change_style de telle façon qu'elle ajoute la
    adipisicing elit, sed do eiusmod classe "active" au paragraphe.
    </p>

    <button
    onclick="change_style()">Changer
    Style</button>

    Exercice 5 :
    Soit le fichier html suivant:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 1. Ecrire une fonction
    <title>Mon titre</title> JavaScript (showContent) qui permet
    <script type="text/javascript" src=" .js"></script> d'afficher le contenu
    </head> du div correspondant au titre sur
    <body> lequel on clique.
    <h1 onClick="showContent(1)">Partie 1</h1> 2. Ecrire une fonction JavaScript qui
    <div id="title1" style="display:none">
    permet de masquer le contenu de tout
    <p>Mon premier paragraphe</p>
    <p>Mon second paragraphe</p>
    les  div du document
    </div>
    <h1 onClick="showContent(2)">Partie 2</h1>
    <div id="title2" style="display:none">
    <p>Mon premier paragraphe</p>
    <p>Mon second paragraphe</p>
    </div>
    <p>
    <input type="submit" value="Masquer" onClick="hideAllDivs()"/>
    </p>
    <p>
    Titre n°: <input type="text" id="title"/>
    <input type="submit" value="Afficher" onClick="alertTitle()"/>
    </p>
    </body>
    </html>
    ANIBOU CHAIMAE 3IR EMSI

    <!DOCTYPE html>
    <html>
    <body>
    <p id="par">Click the button to
    delete my HTML content </p>
    <button
    onclick="myFunction()">supprimer</butt
    on>
    </body>
    </html>

    Exercice 6:
    Créer une fonction qui permet de supprimer le contenu d'un paragraphe.

    Exercice 7:

    Ecrire une fonction d'authentification, qui permet de vérifier le login et le password avant d'envoyer
    le formulaire à une autre page.

    Vous aimerez peut-être aussi