doctitle juve
download 
Plainte Transcription
title juve
M41B2 Technologies Javascript AngularJS / NodeJS TP 1 Jérôme Landré – [email protected] bureau C203 (GMP) DUT Métiers du Multimédia et de l'Internet I.U.T. de Troyes Université de Reims Champagne-Ardenne 1) Moyenne de notes en JS ● Saisir et exécuter le fichier « moy.html » suivant : <!DOCTYPE html> <html lang="fr"> <head> <title>Moyenne</title> <meta charset="utf-8" /> </head> <body> <h1>Moyenne</h1> Note 1 : <input type="text" id="n1" /><br /> Note 2 : <input type="text" id="n2" /><br /> <button onclick="moy() ;">Moyenne</button> <p id="res"></p> <script> function moy() { var n1 = document.getElementById("n1").value; var n2 = document.getElementById("n2").value; document.getElementById("res").innerHTML="Moy. : "+ } </script> </body> </html> ; 2 1) Moyenne de deux notes AngularJS ● Traduire votre programme en AngularJS sous le nom « moy_angularjs1.html » : <!DOCTYPE html> <html lang="fr"> <head> <title>Moyenne</title> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"> </script> </head> <body > <h1>Moyenne</h1> Note 1 : <input type="text" id="n1" /><br /> Note 2 : <input type="text" id="n2" /><br /> <p>Moyenne : </p> </body> </html> ● Ajouter un ng-if pour éviter l'affichage de NaN (Not a Number) au chargement de la page (dans le fichier « moy_angularjs2.html ») ! 3 1) Moyenne de deux notes AngularJS ● Tester votre programme pour obtenir : 4 2) Simulation de footer ● ● Ecrire un programme AngularJS « menu.html », qui simule un footer comme celui-ci : On donne la variable JSON qui doit être utilisée : menus= [ {"nom":"google","lien":"http://www.google.fr"}, {"nom":"bing","lien":"http://www.bing.fr"}, {"nom":"yahoo","lien":"http://www.yahoo.fr"}, {"nom":"mozbot","lien":"http://www.mozbot.fr"}, {"nom":"lemoteur","lien":"http://www.lemoteur.fr"}, {"nom":"orindon","lien":"http://http://www.orindon.com"} ] 5 3) Affichage conditionnel de texte ● On veut afficher du texte complémentaire pour illustrer un article selon un bouton de type checkbox : 6 3) Affichage conditionnel de texte ● Compléter le programme AngularJS suivant : <!DOCTYPE html> <html lang="fr"> <head> <title>Les news du foot</title> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"> </script> </head> <body style="font-family: sans-serif;"> <h1>Football Féminin : </h1> <p> Amical : France 2 - Brésil 0, le 24 novembre 2014, stade Gerland de Lyon<br /> </p> <p> Les Bleues concluent 2014 en beauté avec la première victoire de leur histoire face au Brésil, quelques semaines après le premier succès en Allemagne. Après quatre nuls face à la Seleçao, les joueuses de Philippe Bergerôo poursuivent de belle manière leur préparation au Mondial 2015 devant les 11.000 spectateurs du stade Gerland de Lyon. Ce 17ème rendez-vous de l'année est l'occasion pour Kenza Dali d'inscrire son premier but avec les A.<br /> source : site "www.fff.fr". </p> </body> </html> 7 4) Les footballeurs ● On donne la variable JSON suivante : footballeurs=[{"photo":"zidane.jpg","nom":"ZIDANE", "prenom":"Zinédine", "selections":108, "buts":31, "clubs":[{"nom":"AS Cannes"},{"nom":"Girondins de Bordeaux"},{"nom":"Juventus de Turin"},{"nom":"Real Madrid"}]}, {"photo":"henry.jpg","nom":"HENRY", "prenom":"Thierry", "selections":123, "buts":51, "clubs":[{"nom":"AS Monaco FC"},{"nom":"Juventus de Turin"},{"nom":"Arsenal FC"},{"nom":"FC Barcelone"}, {"nom":"New York Red Bulls"},{"nom":"Arsenal FC"}]}, {"photo":"platini.jpg","nom":"PLATINI", "prenom":"Michel", "selections":72, "buts":41, "clubs": [{"nom":"AS Nancy-Lorraine"},{"nom":"AS SaintÉtienne"},{"nom":"Juventus de Turin"}]}] 8 4.a) Les footballeurs ● Ecrire un programme « footballeurs1.html » en AngularJS qui réalise l'affichage suivant : 9 4.b) Les footballeurs ● Ecrire un programme « footballeurs2.html » en AngularJS qui réalise les affichages conditionnels (selon les cases à cocher) : 10
