Tp java script . Des exercices, Exercises of Law

Download Tp java script . Des exercices and more Exercises Law in PDF only on Docsity! 5 Direction de la Recherche et L’Ingénierie de Formation Digital I Infrastructure digitale Concevoir un réseau informatique Version : 01/12/2021 Office de la formation professionnelle et de la promotion du travail Direction de la Recherche et Ingénierie de formation Technicien spécialisé 1ère Année Filière : Développement Digital (Tronc commun) Secteur : Digital & IA Manuel des travaux pratiques M105 : Programmer en JavaScript 1 Direction de la Recherche et L’Ingénierie de Formation Digital & IA I Développement digitale La DRIF remercie les personnes qui ont contribué à l’élaboration du présent document : Les utilisateurs de ce document sont invités à communiquer à la DRIF et au CDC Digital & IA toutes les remarques et suggestions afin de les prendre en considération pour l’enrichissement et l’amélioration de ce module. Remerciements Équipe de conception : BOUDIAF Saida Digital learning manager/ Project manager MIHOUBI Fattoum, Cheffe de projet pédagogique/ Ingénieure pédagogique CROUZOULON Jonathan, Directeur pédagogique/ Chef de projet pédagogique Équipe de rédaction : ENAANAI Adil, Assistant Professor in Computer science ( Faculty of science Tetouan)/Enseignant-chercheur en informatique Programmer en Javascript Compétences visées : Recommandations clés : Activité 1 Comparer un langage de script avec un langage compilé • Définir un langage de script • Comprendre le fonctionnement d'un langage de script 01 heures • Suivre les instructions du TP et organiser le dossier de travail • Utiliser le résumé théorique pour réaliser le projet de synthèse CONSIGNES • Demander aux apprenants de suivre les étapes décrites dans le résumé théorique du cours et d'appliquer les procédures • Demander aux apprenants de réaliser le travail de synthèse • Installer VS Code et y ajouter les extensions recommandées • Créer un dossier de travail dans VS Code et y créer les fichiers des réalisations • Support de résumé théorique accompagnant • Le stagiaire est-il capable de : ➢ Comprendre le fonctionnement d’un script ➢ Maitriser l’écriture des scripts JS associés au code HTML 1. Pour le formateur : 2. Pour l’apprenant : 3. Conditions de réalisation : 4. Critères de réussite : 6Copyright - Tout droit réservé - OFPPT PA R TI E 1 Activité 1 : Comparaison entre langage de script et langage compilé 1. Qu’est-ce que JavaScript ? 2. Quelle est la différence entre Java et JavaScript ? 3. Quels sont les avantages de JavaScript ? 4. Quelle entreprise a développé JavaScript ? 5. Quelles sont les compétences techniques nécessaires pour devenir développeur front-end ? 6. Dans quelle balise HTML peut-on placer le code JavaScript ? 7. Le fichier externe de JavaScript doit-il contenir la balise <script> ? 8. Quel est le bon endroit pour insérer un code JavaScript ? 9. Est-ce que Javascript peut accéder au système de fichiers ? Exercice 1 : Compétences visées : Recommandations clés : Activité 2 Comprendre l’architecture client/serveur • Comprendre la composition d’une architecture client/serveur • Comprendre le fonctionnement d'un système client/serveur pour le cas d’une architecture Web 01 heures • Suivre les instructions du TP et organiser le dossier de travail • Utiliser le résumé théorique pour réaliser le projet de synthèse CONSIGNES • Demander aux apprenants de suivre les étapes décrites dans le résumé théorique du cours et d'appliquer les procédures • Demander aux apprenants de réaliser le travail de synthèse • Installer VS Code et y ajouter les extensions recommandées • Créer un dossier de travail dans VS Code et y créer les fichiers des réalisations • Support de résumé théorique accompagnant • Le stagiaire est-il capable de : ➢ Maîtriser la notion du client et du serveur ? ➢ Comprendre la communication client / serveur ? 1. Pour le formateur : 2. Pour l’apprenant : 3. Conditions de réalisation : 4. Critères de réussite : 11Copyright - Tout droit réservé - OFPPT PA R TI E 1 Activité 2 : Comprendre l’architecture client/serveur 1. Est-ce qu'une machine personnelle pourra jouer le rôle d'un serveur ? 2. Quel est le nombre maximum de clients que peut accepter un serveur ? 3. Citer les différentes limites matérielles d'un serveur quand le nombre de clients est trop grand. 4. Citer les différents types de serveurs de point de vue logiciel. 5. Avec un serveur Web, quel est le logiciel qu'il faut installer chez les clients ? 6. Quelle est la nature des requêtes envoyées par les clients vers le serveur ? 7. Est-ce qu'on peut installer plusieurs serveurs Web dans une même machine ? Exercice 1 : CONSIGNES • Demander aux apprenants de suivre les étapes décrites dans le résumé théorique du cours et d'appliquer les procédures • Demander aux apprenants de réaliser le travail de synthèse • Installer VS Code et y ajouter les extensions recommandées • Créer un dossier de travail dans VS Code et y créer les fichiers des réalisations • Support de résumé théorique accompagnant • Le stagiaire est-il capable de : ➢ Présenter les bibliothèques JS les plus utilisées et discuter de leurs différences ? 1. Pour le formateur : 2. Pour l’apprenant : 3. Conditions de réalisation : 4. Critères de réussite : 15Copyright - Tout droit réservé - OFPPT PA R TI E 1 Acticité 3 : Découvrir l’écosystème de développement 1. Quel est le meilleur environnement de développement des applications web ? Citer pourquoi. 2. Quel est le format de transfert de données le plus utilisé entre les applications front-end et back-end ? Citer pourquoi. 3. Est-ce qu'on peut écrire un serveur web avec Javascript ? 4. A quoi sert Jquery ? 5. Activité de recherche : • Comparer les deux frameworks : 1. Angular 2. React Exercice 1 : 16Copyright - Tout droit réservé - OFPPT PA R TI E 1 Acticité 3 : Découvrir l’écosystème de développement 1. Quel est le meilleur environnement de développement des applications web ? Citer pourquoi. • Le meilleur environnement de développement est l'UNIX, parce que la plupart des sites Internet et des applications web sont hébergés et tournent sur des environnements Linux. 2. Quel est le format de transfert de données le plus utilisé entre les applications front-end et back-end ? Citer pourquoi. • C'est le format JSON, car il est plus léger et permet de transférer les objets complexe d'une manière simple. 3. Est-ce qu'on peut écrire un serveur web avec Javascript ? • Oui, c'est l'idée de NodeJS. 4. A quoi sert Jquery ? • Jquery est une bibliothèque javascript qui permet de fournir des fonctionnalités de haut niveau afin de faciliter le développement Javascript. Solution (Exercice 1) : CONSIGNES • Demander aux apprenants de suivre les étapes décrites dans le résumé théorique du cours et d'appliquer les procédures • Demander aux apprenants de réaliser le travail de synthèse • Installer VS Code et y ajouter les extensions recommandées • Créer un dossier de travail dans VS Code et y créer les fichiers des réalisations. • Support de résumé théorique accompagnant • Le stagiaire est-il capable de : ➢ Présenter les bibliothèques JS les plus utilisées et discuter de leurs différences ? Pour le formateur : Pour l’apprenant : Conditions de réalisation : Critères de réussite : 20Copyright - Tout droit réservé - OFPPT PA R TI E 2 Exercice 1 : Activité 1 : Maîtriser la syntaxe javascript et ses notions fondamentales Quel est le résultat de l'exécution de chacune de ces lignes dans la console ? Pourquoi ? 1. var a; typeof a; 2. var s = '1s'; s++; 3. !!"false" 4. !!undefined 5. typeof -Infinity 6. 10 % "0" 7. undefined == null 8. false === "" 9. typeof "2E+2" 10. a = 3e+3; a++; 21Copyright - Tout droit réservé - OFPPT PA R TI E 2 Solution (Exercice 1) : Activité 1 : Maîtriser la syntaxe javascript et ses notions fondamentales 1. undefined 2. NaN 3. true 4. false 5. number 6. NaN 7. true 8. false 9. string 10. 3000 24Copyright - Tout droit réservé - OFPPT PA R TI E 2 Exercice 3 : Activité 1 : Maîtriser la syntaxe javascript et ses notions fondamentales 1. Créer l'interface HTML suivante puis créer une fonction qui permet de calculer la somme des valeurs saisies dans les deux champs et de mettre le résultat dans un élément <label> 2. Créer l'interface suivante puis le code javascript qui permet de permuter les valeurs des deux champs de saisie 3. Créer l'interface suivante, puis une fonction qui permet de séparer le nom et le prénom et les mettre dans des éléments <label>. On considère que le nom et le prénom sont constitués d'un seul mot (Utiliser les fonctions indexOf et slice) 25Copyright - Tout droit réservé - OFPPT PA R TI E 2 Solution (Exercice 3) : Activité 1 : Maîtriser la syntaxe javascript et ses notions fondamentales 1. <!DOCTYPE html> <html lang="en"> <head> <title>Exercice 3-Q1</title> <script src="test.js"></script> </head> <body> <input id="n1" type="text"> +<input id="n2" type="text"> =<label id="resultat"></label> <button onclick="calculer()">Calculer</button> </body> </html> function calculer() { n1 = parseFloat(document.getElementById("n1").value); n2 = parseFloat(document.getElementById("n2").value); document.getElementById("resultat").innerHTML = n1+n2; } 26Copyright - Tout droit réservé - OFPPT PA R TI E 2 Solution (Exercice 3) : Activité 1 : Maîtriser la syntaxe javascript et ses notions fondamentales 2. <!DOCTYPE html> <html lang="en"> <head> <title>Exercice 3-Q2</title> <script src="test.js"></script> </head> <body> <input id="n1" type="text"> <input id="n2" type="text"> <button onclick="permuter()">Permuter</button> </body> </html> function permuter() { const temp = document.getElementById("n1").value; document.getElementById("n1").value=document.getElementById("n2").value; document.getElementById("n2").value=temp; } CONSIGNES • Demander aux apprenants de suivre les étapes décrites dans le résumé théorique du cours et d'appliquer les procédures • Demander aux apprenants de réaliser le travail de synthèse • Installer VS Code et y ajouter les extensions recommandées • Créer un dossier de travail dans VS Code et y créer les fichiers des réalisations. • Support de résumé théorique accompagnant • Le stagiaire est-il capable de : ➢ Présenter les bibliothèques JS les plus utilisées et discuter de leurs différences ? 1. Pour le formateur : 2. Pour l’apprenant : 3. Conditions de réalisations : 4. Critères de réussite : 30Copyright - Tout droit réservé - OFPPT PA R TI E 2 Exercice 1 : Activité 2 : Maîtriser les structures de contrôle 1. Ecrire un programme Javascript qui permet de calculer la valeur absolue d'un nombre saisi dans un champ. 2. Ecrire un programme Javascript qui permet de calculer la somme des valeurs absolues de deux nombres. 3. Ecrire un programme Javascript qui permet de réaliser le calcul selon l'opération choisie. 31Copyright - Tout droit réservé - OFPPT PA R TI E 2 Solution (Exercice 1) : Activité 2 : Maîtriser les structures de contrôle 1. function calculer() { const nombre = document.querySelector("#nombre").value if (nombre<0) { document.querySelector("#valeur_absolue").innerHTML=-nombre } else { document.querySelector("#valeur_absolue").innerHTML=nombre } } <!DOCTYPE html> <html lang="en"> <head> <title>Exercice1-Q1</title> <script src="test.js"></script> </head> <body> <input id="nombre" type="nombre" placeholder="Nombre"> <button onclick="calculer()">Valeur absolue</button><br> Valeur absolue:<label id="valeur_absolue"></label><br> </body> </html> 34Copyright - Tout droit réservé - OFPPT PA R TI E 2 Solution (Exercice 1) : Activité 2 : Maîtriser les structures de contrôle 3. function calculer() { let nombre1 = parseFloat(document.querySelector("#nombre1").value) let nombre2 = parseFloat(document.querySelector("#nombre2").value) const operation = document.querySelector("#operation").value let resultat switch (operation){ case '+':resultat = nombre1+nombre2 break case '-':resultat = nombre1-nombre2 break case 'x':resultat = nombre1*nombre2 break case '/':resultat = nombre1/nombre2 break } document.querySelector("#resultat").innerHTML=resultat } 35Copyright - Tout droit réservé - OFPPT PA R TI E 2 Exercice 2 : Activité 2 : Maîtriser les structures de contrôle 1. Dans une page HTML, réaliser un script permettant d’afficher les nombres de 20 à 0 avec décrémentation d’un pas égal à 2. 2. Créer un script qui demande à l’utilisateur de saisir trois variables numériques via une boite prompt. L’utilisateur est averti s’il ne saisit pas un nombre, et le script lui demande de saisir une valeur numérique. Une fois que l’utilisateur saisit trois valeurs numériques, le script teste les trois variables : • Si elles sont égales, écrire : "Les trois variables sont identiques." • Si seulement deux sont identiques, écrire :« Deux des variables sont de valeurs égales." • Sinon, écrire :"Les trois variables sont différentes." 3. Utilisez une (ou deux) boucle for() pour produire l’affichage suivant : * ** *** **** ***** ****** ******* ******** ********* 4. Ecrire un programme Javascript qui permet de demander à l'utilisateur de saisir une note comprise entre 0 et 20 à l'aide de la commande "prompt". Si l'utilisateur saisit une valeur hors de l'intervalle [0,20], on lui demande de saisir à nouveau la valeur et ainsi de suite. Remarque • utilisez la méthode d’affichage : document.write (“élément à afficher”). 36Copyright - Tout droit réservé - OFPPT PA R TI E 2 Solution (Exercice 2) : Activité 2 : Maîtriser les structures de contrôle 1. <!DOCTYPE html> <html lang="en"> <head> <title>Exercice2-Q1</title> </head> <body> <script> for (i=20; i>=0; i-=2) { if(i!=0) document.writeln(i+" - "); else document.writeln(i); } </script> </body> </html> Compétences visées : Recommandations clés : Activité 3 Utiliser des fonctions • Manipuler les fonctions et les expressions lambdas • Manipuler les appels asynchrones (callBack, Promise) • Maitriser la gestion des exceptions 06 heures • Suivre les instructions du TP et organiser le dossier de travail • Utiliser le résumé théorique pour réaliser le projet de synthèse CONSIGNES • Demander aux apprenants de suivre les étapes décrites dans le résumé théorique du cours et d'appliquer les procédures • Demander aux apprenants de réaliser le travail de synthèse • Installer VS Code et y ajouter les extensions recommandées • Créer un dossier de travail dans VS Code et y créer les fichiers des réalisations. • Support de résumé théorique accompagnant • Le stagiaire est-il capable de : ➢ Présenter les bibliothèques JS les plus utilisées et discuter de leurs différences ? 1. Pour le formateur : 2. Pour l’apprenant : 3. Conditions de réalisation : 4. Critères de réussite : 41Copyright - Tout droit réservé - OFPPT PA R TI E 2 Activité 3 : Utiliser des fonctions 1. Créez une fonction qui : • demande la saisie d'un rayon. • retourne la surface du cercle correspondant. 2. Affichez le résultat de l'appel à cette fonction en cliquant sur un bouton. Exercice 1 : 1. Créez deux variables globales a et b, initialisées respectivement à 3 et à 2. 2. Créez une fonction « multiplie » qui prend un argument x avec la valeur par défaut 8, et qui envoie le résultat de la multiplication de x par 3 3. Créez une fonction affiche, appelée au clic sur le bouton, qui affiche dans des boîtes d'alerte successivement le résultat de « multiplie » appliquée aux variables a et b, puis sans aucun paramètre (en exécutant donc la fonction avec la valeur de x par défaut). Exercice 2 : Écrivez trois fonctions fléchées, appelées fonction1, fonction2 et fonction0 : 1. fonction1 prend un paramètre x et renvoie x+5 ; 2. fonction2 prend deux paramètres x et y et renvoie x+y ; 3. fonction0 ne prend aucun paramètre, demande la saisie par l'utilisateur d'un nombre et renvoie l'addition de 2 à ce nombre. Exercice 3 : 44Copyright - Tout droit réservé - OFPPT PA R TI E 2 function surfaceCercle() { var rayon=parseFloat(prompt("Entrez le rayon du cercle : ")); return Math.PI*rayon*rayon; } Activité 3 : Utiliser des fonctions Solution (Exercice 1) : Solution (Exercice 2) : var fonction1 = (x) => x+5; var fonction2 = (x, y) => x+y; var fonction0 = () => parseFloat(prompt("Saisissez un nombre"))+2; Solution (Exercice 3) : var a=3; var b=-2; function multiplie(x=8) { return 3*x; } function affiche() { alert(multiplie(a)); alert(multiplie(b)); alert(multiplie()) } 45Copyright - Tout droit réservé - OFPPT PA R TI E 2 Solution (Exercice 4) : Activité 3 : Utiliser des fonctions setInterval(()=>{ date = new Date() document.querySelector("#montre").innerHTML=date.toLocaleTimeString('fr-FR') if (date.getSeconds()%10==0){ myPromise = new Promise(function(resolve,reject){ document.getElementById("marquer").style.display="block" setTimeout(()=>{reject()},5000) setInterval(()=>{ if (document.getElementById("marquer").style.display=="none"){resolve()} },200) }) myPromise.then(()=>{ document.getElementById("presence").innerHTML="Présent" }).catch(()=>{ document.getElementById("presence").innerHTML="Absent" document.getElementById("marquer").style.display="none"; }) } },1000) function marquer() { document.getElementById("marquer").style.display="none" } 46Copyright - Tout droit réservé - OFPPT PA R TI E 2 Solution (Exercice 5) : Activité 3 : Utiliser des fonctions function marquer() { document.getElementById("marquer").style.display="none" } function calculerSurface(dim1, dim2) { if (isNaN(dim1) || isNaN(dim2)) { throw 'Paramètre erroné!'; } return dim1*dim2 } try { calculerSurface(3, 'A'); } catch (e) { console.error(e); } CONSIGNES • Demander aux apprenants de suivre les étapes décrites dans le résumé théorique du cours et d'appliquer les procédures • Demander aux apprenants de réaliser le travail de synthèse • Installer VS Code et y ajouter les extensions recommandées • Créer un dossier de travail dans VS Code et y créer les fichiers des réalisations. • Support de résumé théorique accompagnant • Le stagiaire est-il capable de : ➢ Présenter les bibliothèques JS les plus utilisées et discuter de leurs différences ? 1. Pour le formateur : 2. Pour l’apprenant : 3. Conditions de réalisation : 4. Critères de réussite : 50Copyright - Tout droit réservé - OFPPT PA R TI E 2 Activité 4 : Manipuler les objets : Création d’objet • Créez une classe appelée « Personne » qui accepte le nom d'une personne sous forme de chaîne et son âge sous forme de nombre. • La classe « Personne » doit avoir une méthode appelée « Décrire » qui renvoie une chaîne avec la syntaxe suivante : " nom, âge ans". Ainsi, par exemple, si la personne Ali a 19 ans alors la fonction « Décrire » de son objet renverra « Ali, 19 ans". Exercice 1 : • Créez un objet appelé « Formateur » dérivé de la classe « Personne » et implémentez une méthode appelée « Former » qui reçoit une chaîne appelée « Sujet » et qui affiche : [Nom du formateur] enseigne [Sujet] Exercice 2 : 51Copyright - Tout droit réservé - OFPPT PA R TI E 2 Activité 4 : Manipuler les objets : Création d’objet 1. Créez une autre classe appelée « Livre ». Chaque livre doit avoir les propriétés suivantes : • Titre, Genre, Auteur • Lu (vrai ou faux) • Date de lecture: peut être vide, sinon doit être un objet Date de JS. 2. Créez une classe appelée « ListeLivres » via le modèle d'appel du constructeur. Cette classe a les propriétés suivantes : • Nombre de livres marqués comme lus • Nombre de livres marqués pas encore lus • Livre suivant à lire (objet livre) • Livre en cours de lecture (objet livre) • Dernier livre lu (objet livre) • Un tableau de tous les livres. Exercice 3 : 3. Chaque liste de livres devrait avoir les méthodes suivantes : • ajouter(livre) qui ajoute un livre à la liste des livres. • terminerLivreEnCours() • Doit marquer le livre en cours de lecture comme lu • Modifiez la propriété dernierLivre en lui affectant le livre lu • Modifiez la propriété livreEnCours pour pointer vers le contenu de la propriété livreSuivant ; • Modifiez la propriété livreSuivant pour qu'elle soit le premier livre non lu de la liste des livres. 4. Proposez d’autres méthodes pour compléter les traitements au niveau des classes listeLivres. 54Copyright - Tout droit réservé - OFPPT PA R TI E 2 Solution (Exercice 3) : Activité 4 : Manipuler les objets : Création d’objet var livre = function(titre, genre, auteur, lu, dateLecture) { this.titre = titre || "Sans titre"; this.genre = genre || "Fiction"; this.auteur = auteur || "Sans auteur"; this.lu = lu || false; this.dateLecture = new Date(dateLecture); } var ListeLivres = function(livres) { if (!typeof livres == "array") { livres = false; } this.tousLivres = livres || []; //vérifier s'il y a des livres à traiter if (this.tousLivres.length > 0) { //Parcourir la liste de tous les livres de l'argument « livres » //Utiliser la fonction "ajouter" pour ajouter un livre à la liste } 55Copyright - Tout droit réservé - OFPPT PA R TI E 2 Solution (Exercice 3) : Activité 4 : Manipuler les objets : Création d’objet this.ajouter = function(livre) { this.tousLivres.push(livre); } this.terminerLivreEnCours = function() { if (this.livreEnCours) { this.livreEnCours.lu = true; this.dernierLivre = this.livreEnCours this.livreEnCours = this.livreSuivant } else { console.log("Il faut se mettre à la lecture") } } } Dans ce module, vous allez : PARTIE 3 Manipuler les éléments d’une page avec dom • Comprendre l’arbre DOM, les nœuds parents et enfants • Connaître les bases de la manipulation du DOM en JavaScript • Manipuler les éléments HTML 30 heures 59Copyright - Tout droit réservé - OFPPT PA R TI E 3 Exercice 1 : Activité 1 : Comprendre l’arbre dom, les nœuds parents et enfants Créer l'application suivante en respectant les consignes ci-dessous : • Le clic sur le bouton « Ajouter » permet d’insérer la ville saisie dans la zone de texte à la fin de la liste. • Le clic sur une ville provoque le changement de sa couleur afin de montrer l'état de sélection (On peut sélectionner plusieurs villes) • Le clic sur le bouton « Supprimer » permet de supprimer les villes sélectionnées. 60Copyright - Tout droit réservé - OFPPT PA R TI E 3 Exercice 2 : Activité 1 : Comprendre l’arbre dom, les nœuds parents et enfants L’objectif est de créer un comportement similaire à celui de Facebook : • On ajoute les posts sur le champ de saisie le plus haut. • Pour chaque post on ajoute des commentaires à la fin. 61Copyright - Tout droit réservé - OFPPT PA R TI E 3 Solution (Exercice 1) : Activité 1 : Comprendre l’arbre dom, les nœuds parents et enfants function ajouterVille(){ var liste = document.querySelector("#liste"); var li = document.createElement('li'); li.className="unselected"; li.innerHTML=document.querySelector("#ville").value; li.addEventListener("click",changerCouleur); liste.appendChild(li); } function changerCouleur() { const c=event.target.className; if (c=="unselected") { event.target.className="selected"; } else { event.target.className="unselected"; } } function supprimerVille() { const listeElements=document.querySelectorAll("#liste > li"); const liste=document.querySelector("#liste"); //Expression lambda listeElements.forEach(e=>{ if (e.className=="selected"){ liste.removeChild(e); } }); } <body> <input type="text" id="ville"> <button onclick="ajouterVille()">Ajouter</button> <button onclick="supprimerVille()">Supprimer</button> <ul id="liste"></ul> </body> 64Copyright - Tout droit réservé - OFPPT PA R TI E 3 Exercice de synthèse : Activité 1 : Comprendre l’arbre dom, les nœuds parents et enfants Créer l'application suivante en respectant les consignes : • Quand l'utilisateur clique sur le bouton « Ajouter », on afficher le formulaire d'ajout ; • Quand on clique sur le bouton « Ajouter », les éléments saisis seront ajoutés à la fin du tableau ; • Quand on clique sur « Annuler », le formulaire d'ajout disparait ; • Quand on sélectionne une ligne, elle est coloriée en vert ; • Quand on clique sur « Supprimer », la ligne entière sera supprimée. Dans ce module, vous allez : PARTIE 4 Gérer les événements utilisateur • Comprendre la notion d’événement pour gérer l’interactivité • Gérer les éléments d’un formulaire 20 heures Compétences visées : Recommandations clés : Activité 1 Comprendre la notion d’événement pour gérer l’interactivité • Utiliser la méthode addEventListener • Manipuler les événements MouseEvents et l’interaction avec le clavier 18 heures • Suivre les instructions du TP et organiser le dossier de travail • Utiliser le résumé théorique pour réaliser le projet de synthèse 69Copyright - Tout droit réservé - OFPPT PA R TI E 4 Solution (Exercice 1) : Activité 1 : Comprendre la notion d’événement pour gérer l’interactivité <script> function raconterHistoire() { var histoireDiv = document.getElementById("histoire"); var personne = document.getElementById("pers").value; var adjectif = document.getElementById("adj").value; var nom = document.getElementById("nom").value; histoireDiv.innerHTML = personne + " mange " + adjectif + " " + nom + "... bizarre !"; } var btn = document.getElementById('raconter'); btn.addEventListener('click', raconterHistoire); </script> 70Copyright - Tout droit réservé - OFPPT PA R TI E 4 Activité 1 : Comprendre la notion d’événement pour gérer l’interactivité • Ajoutez un élément d'ancrage à une page HTML qui renvoie vers un site Web de votre choix. Lorsque vous cliquez sur l'ancre, vous devez empêcher le chargement de la nouvelle page Web. Exercice 2 : • Créer un programme Javascript qui permet d'afficher un menu contextuel suite au clic droit de la souris dans un objet DIV et le masque quand le curseur sort de la zone DIV. • Améliorer le programme pour qu'il affiche la position du curseur (x et y) sur un objet label. Exercice 4 : • Ajoutez un écouteur d'événements pour les événements du clavier à l'élément html d'une page Web. Lorsqu'une combinaison spécifique de touches est enfoncée (par exemple, a, b, c, d), un message s'affiche pour indiquer que la combinaison a été saisie correctement. Exercice 3 : 71Copyright - Tout droit réservé - OFPPT PA R TI E 4 Solution (Exercice 2) : Activité 1 : Comprendre la notion d’événement pour gérer l’interactivité <!DOCTYPE html> <html> <head> <title></title> </head> <body> <a href="http://www.ofppt.ma">Site de l'OFPPT</a> <script> var lien = document.querySelector('a'); lien.addEventListener('click', function(event) { event.preventDefault(); console.log("Redirection interdite"); }) </script> </body> </html> 74Copyright - Tout droit réservé - OFPPT PA R TI E 4 Exercice 5 : Activité 1 : Comprendre la notion d’événement pour gérer l’interactivité 1. Ajoutez un écouteur d'événement pour les événements de clic sur un élément d'image. 2. Ajoutez un bouton à la page qui permet de supprimer l'écouteur d'événement sur l'image. 3. Ajoutez un écouteur d'événement pour l'événement DOMContentLoaded afin d'afficher l'heure actuelle sur une page Web lorsque la page est chargée. 4. Ajoutez un écouteur d'événement « blur » à un élément d'entrée (input) qui vérifie que la valeur entrée dans l'élément est une chaîne composée de 9 caractères au moins. Ajoutez une bordure rouge à l'élément si ce n'est pas le cas. 5. Ajoutez un écouteur d'événement qui gère les événements tactiles mais qui n'est plus invoqué pour les événements de clic. 75Copyright - Tout droit réservé - OFPPT PA R TI E 4 Solution (Exercice 5) : Activité 1 : Comprendre la notion d’événement pour gérer l’interactivité img id="" src="oiseau.jpg" width="200" height="200"/> <button>Supprimer evenement</button> <input type="text" id="input1"/> <p id="element"></p> <script> var img = document.querySelector('img'); var btn = document.querySelector('button'); var input1 = document.getElementById('input1'); img.addEventListener('click', EntrerImage); btn.addEventListener('click' , supprimerEvenImg); document.addEventListener('DOMContentLoaded', afficherHeure); input1.addEventListener('blur', function(e) { var input = e.target; var input1 = document.getElementById('input1'); var inputStyle = input1.style; if(input.value.length < 9) { inputStyle.border = '1px solid red'; console.log(input.value); } else { inputStyle.border = '1px solid green’; } }); 76Copyright - Tout droit réservé - OFPPT PA R TI E 4 Solution (Exercice 5) : Activité 1 : Comprendre la notion d’événement pour gérer l’interactivité document.addEventListener('touchstart', function(e) { console.log('touche'); }) document.addEventListener('touchstart', function(e) { if(e.sourceCapabilities.fireTouchEvents) { return false; } console.log('clic'); }) function afficherHeure(e) { var p = document.getElementById('element'); p.textContent = event.type + " " + new Date().toLocaleTimeString() ; } function EntrerImage(e) { var img = e.target; console.log(img); } function supprimerEvenImg(e) { img.removeEventListener('click', EntrerImage); } </script> 79Copyright - Tout droit réservé - OFPPT PA R TI E 4 Exercice 1 : Activité 2 : Comprendre la notion d’événement pour gérer l’interactivité • Soit le formulaire suivant : • Créer le code javascript de validation pour ce formulaire sachant que tous les champs sont obligatoires. <body> <h1 style="text-align: center;">Formulaire d'inscription</h1> <form name="formInscp" action="" onsubmit="return validation()" method="post"> <p>Nom: <input type="text" size="65" name="nom" /></p> <p>Adresse: <input type="text" size="65" name="adresse" /></p> <p>Adresse E-mail : <input type="email" size="65" name="email" /></p> <p>Mot de passe : <input type="password" size="65" name="motPasse" /></p> <p>Telephone: <input type="text" size="65" name="telephone" /></p> <p>Langue : <select type="text" value="" name="langue"> <option>Anglais</option> <option>Français</option> <option>Arabe</option> </select> </p> <p>Commentaire: <textarea cols="55" name="commentaire"> </textarea></p> <p><input type="submit" value="Valider" name="Valider" /> <input type="reset" value="Annuler" name="Annuler" /></p> </form> </body> 80Copyright - Tout droit réservé - OFPPT PA R TI E 4 Solution (Exercice 1) : Activité 2 : Comprendre la notion d’événement pour gérer l’interactivité function validation() { var nom = document.forms["formInscp"]["nom"]; var email = document.forms["formInscp"]["email"]; var tel = document.forms["formInscp"]["telephone"]; var lang = document.forms["formInscp"]["langue"]; var pass = document.forms["formInscp"]["motPasse"]; var adr = document.forms["formInscp"]["adresse"]; if (nom.value == "") { window.alert("Merci de saisir le nom."); nom.focus(); return false; } if (adr.value == "") { window.alert("Merci de saisir l'adresse."); adr.focus(); return false; } if (email.value == "") { window.alert("Merci de saisir une adresse mail."); email.focus(); return false; } if (pass.value == "") { window.alert("Merci de saisir le mot de passe"); pass.focus(); return false; } if (tel.value == "") { window.alert("Merci de saisir le numéro de téléphone."); tel.focus(); return false; } if (lang.selectedIndex < 1) { alert("Merci de choisir une langue."); lang.focus(); return false; } return true; } Dans ce module, vous allez : PARTIE 5 Manipuler jquery • Découvrir jQuery • Découvrir AJAX 10 heures 84Copyright - Tout droit réservé - OFPPT PA R TI E 5 Exercice 1 : Activité 1 : Découvrir jquery Programmez les événements suivants : 1. En cliquant sur un bouton, affichez un message de bienvenue. 2. En cliquant dans une zone de texte, sa couleur de fond passe au jaune. 3. Soit un élément html (paragraphe, titre, …). Supprimez et ajoutez un style différent à cet élément en utilisant JQuery. Pour cela, créez deux classes de style et appliquez par défaut une première à un élément. En cliquant sur un bouton, changez la propriété associée des éléments à un autre style. 4. Basculer les propriétés de style de d’un élément suite à un événement de clic. 5. Créez un bouton et une zone de texte. En cliquant sur le bouton, le texte écrit dans la zone de texte doit s'afficher sur le bouton. 85Copyright - Tout droit réservé - OFPPT PA R TI E 5 Solution (Exercice 1) : Activité 1 : Découvrir jquery 1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> … <button type='button' id=boutton>Cliquez ici</button> <span id=affichage></span> <script> $(document).ready(function() { $("#boutton").click(function(){ $("#affichage").html('Bienvenue au cours de Jquery'); }) }) </script> 86Copyright - Tout droit réservé - OFPPT PA R TI E 5 Solution (Exercice 1) : Activité 1 : Découvrir jquery 2. <script> $(document).ready(function() { $(".t_input").click(function(){ $(this).css("background-color", "yellow"); }) }) </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> … <input type='text' class='t_input'/> 89Copyright - Tout droit réservé - OFPPT PA R TI E 5 Solution (Exercice 1) : Activité 1 : Découvrir jquery 5. <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <input type='text' id='t1'/> <button type='button' id='b1'>Cliquez ici</button> <script> $(document).ready(function() { $("#b1").click(function(){ var texte=$('#t1').val(); $('#b1').html(texte); }) }) </script> </body> 90Copyright - Tout droit réservé - OFPPT PA R TI E 5 Exercice 2 : Activité 1 : Découvrir jquery 1. Créez une balise div et qui affiche un message de bienvenue (en utilisant Jquery). 2. Créez deux balises div et avec couleur d'arrière-plan de votre choix à l'aide de JQuery. 3. Afficher et masquer le message affiché dans une balise div en cliquant sur deux boutons. Utilisez les fonctions Jquery show() et hide(). 4. Affichez et masquez le message affiché dans une balise div à l'aide d'un seul bouton. Utiliser la fonction Jquery toggle(). 91Copyright - Tout droit réservé - OFPPT PA R TI E 5 Solution (Exercice 2) : Activité 1 : Découvrir jquery 1. <div id=affichage></div> <script> $(document).ready(function() { $("#affichage").html('Bienvenue à l\'ofppt'); }) </script> 94Copyright - Tout droit réservé - OFPPT PA R TI E 5 Solution (Exercice 2) : Activité 1 : Découvrir jquery 4. <button type='button' id='b3'>Show & Hide</button> <div id="affichage"> Bienvenue à l'ofppt </div> <script> $(document).ready(function() { $("#b3").click(function(){ $("#affichage").toggle(); }) }) </script> 95Copyright - Tout droit réservé - OFPPT PA R TI E 5 Exercice 3 : Activité 1 : Découvrir jquery 1. Créez une classe CSS et nommez-la « erreur » , donnez sa couleur de bordure en rouge et sa couleur d'arrière-plan en jaune. Appliquez cette classe à la zone de texte lorsque le focus est déplacé hors de celle-ci et si les données saisies sont supérieures à 10. 2. Créez deux zones de texte et un bouton avec la valeur « Addition ». En cliquant sur le bouton, il faut afficher la somme des deux nombres entrés dans les zones de texte. De même, ajoutez les boutons « Soustraction », « Multiplication » et « Division ». 3. Vos boutons dans le code ci-dessus resteront désactivés jusqu'à ce que les deux entrées soient remplies. (Utilisez une fonction pour activer ou désactiver les boutons. Déclenchez cette fonction avec l’événement « Blur » des zones de texte) 96Copyright - Tout droit réservé - OFPPT PA R TI E 5 Solution (Exercice 3) : Activité 1 : Découvrir jquery 1. <style> .erreur { border : 1px solid red; background-color: yellow; } </style> <input type='text' id='t1'/> <script> $(document).ready(function() { $('#t1').blur(function(){ var my_val=parseInt($('#t1').val()); if(my_val >10 ){ $('#t1').addClass('erreur'); } }) }) </script>