Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

ANIBOU CHAIMAE 3IR EMSI Introduction : Le Javascript est un langage de script i

ANIBOU CHAIMAE 3IR EMSI 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(); JAVA SCRIPT 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 permet de styler le paragraphe au clic du bouton par :  une couleur blanche  un background noir.  une bordure noire pointillée de 1px 2. Définir les propriétés précédentes dans une classe "active" et modifier la fonction change_style de telle façon qu'elle ajoute la classe "active" au paragraphe. Exercice 5 : Soit le fichier html suivant: 1. Ecrire une fonction JavaScript (showContent) qui permet d'afficher le contenu du div correspondant au titre sur lequel on clique. 2. Ecrire une fonction JavaScript qui permet de masquer le contenu de tout les div du document <!doctype html> <html> <head> <meta charset="utf-8"> <title>styles</title> </head> <body> <p id="parag1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </p> <button onclick="change_style()">Changer Style</button> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Mon titre</title> <script type="text/javascript" src=" .js"></script> </head> <body> <h1 onClick="showContent(1)">Partie 1</h1> <div id="title1" style="display:none"> <p>Mon premier paragraphe</p> <p>Mon second paragraphe</p> </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 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. <!DOCTYPE html> <html> <body> <p id="par">Click the button to delete my HTML content </p> <button onclick="myFunction()">supprimer</butt on> </body> </html> uploads/s3/ java-script-tp-cours.pdf