Programmation Web IUT Villetaneuse 1 Bases de Javascript Formation continue 2012 Les sources associées à ce TD sont dans http://www-iutv.univ-paris13.fr/~khafif/progweb. 1 Exercices Démarrage 1. Prenez le document test.html. Créez un ajax.css vide et un ajax.js vide. Vérifiez que vous arrivez à y accéder. 2. Modifiez le script pour qu il a che «Bienvenue» dans une popup, soit quand on clique sur le lien dans le document (première version), soit au chargement de la page (deuxième version). <!-- fichier test.html version 1 --> <!DOCTYPE html> <html><title>tp1 de Javascript</title> <script type="text/javascript" src="ajax.js"></script> <link rel="stylesheet" type="text/css" href="ajax.css" /></head> <body onload="javascript:bonjour()"> <p style="color: red" onclick="charger()">charger!</p> <!-- fichier test.html version 2 --> <!DOCTYPE html> <html><title>tp de Javascript</title> <script type="text/javascript" src="ajax.js"></script> <link rel="stylesheet" type="text/css" href="ajax.css"></link> <body onload="affichertableau()"> <div id="bandeau"> <h1 id="bonjour">bonjour</h1> <p class="bouton" onclick="charger()">charger!</p> </div> </body> </html> /*fichier ajax.css body { width:100% margin:0px; padding:0px;
Programmation Web IUT Villetaneuse 2 p.bouton { font-family: "Times New Roman"; font-weight: bold; color:black; border: 1px solid blue; background-color: blue; width:100px; text-align: center; margin-right: auto; margin-left: auto; div#bandeau { width:80%; height:40; margin-right: auto; margin-left: auto; border:1px solid black; /*fichier ajax.js function charger(){ alert("bonjour"); 3. Modifier le script pour qu il a che successivement les phrases contenues dans un tableau. Par exemple si var Messages = [ "Bienvenue", "sur ce site", "ennuyeux, non?" ]; la page a chera successivement 3 fenêtres popups. function affichertableau(){ var Messages = [ "Bienvenue", "sur ce site", "ennuyeux, non?" ]; for (i=0; i< Messages.length; i++){ alert(messages[i]); 2 Exercices Manipulation du DOM 1. Prenez les documents form.html et form.js. Modifiez la fonction formaction pour que si l utilisateur tape ABC, le texte a ché soit CBA. <!-- fichier form_inv_chaine.html --> <title>exercice 1</title> </head> <html><title>inversion d une chaîne de caractère</title> <script type="text/javascript" src="form_inv_chaine.js" ></script>
Programmation Web IUT Villetaneuse 3 <p>toto</p> <form name="formulaire"> <input type="text" id="valeur" name="valeur" onkeyup="formaction();"/> <p>chaine inversée=<span id="resultat"></span></p> </form> /* fichier form_inv_chaine.js function formaction() { var valeur = document.getelementbyid("valeur").value; var r = document.getelementbyid("resultat"); r.innerhtml = reverse(valeur); function reverse(s){ var rs; rs = ; var i= s.length; while(i>=0){ rs=rs + s.charat(i); i=i-1; return rs; 2. Copiez test.* sous un autre nom, et fabriquez une page qui permette de changer la couleur du fond de la page (indice : toute la page a chée est dans une balise BODY). <!-- fichier form_coul_fond.html --> <!DOCTYPE html> <html><title>je devrais changer ce titre</title> <script type="text/javascript" src="form_coul_fond.js" ></script> <link rel="stylesheet" type="text/css" href="form_coul_fond.css" /></head> <h1> Changement de couleur du fond de la page </h1> <form name="formulaire"> <input type="button" id="bbleu" name="bleu" value="bleu" onclick="formaction( bleu );"/> <input type="button" id="brouge" name="rouge" value="rouge" onclick="formaction( rouge );"/> </form> </body> </html> /* fichier form_coul_fond.css.bleu { background-color: blue;;.rouge { background-color: red; /* fichier form_coul_fond.js function formaction(coul) {
Programmation Web IUT Villetaneuse 4 var elt = document.getelementsbytagname( body )[0]; if (coul=="bleu"){ elt.classname="bleu"; else { elt.classname="rouge"; // elt.classname= coul== bleu? "bleu" : "rouge"; 3. Récupérez innertext.*. Définissez charger pour qu une popup a che le texte (et non pas les balises) du premier paragraphe de texte (class text) lorsqu on déclenche la fonction. <!-- fichier innertext.html --> <title>tp javascript Exercice 2 - question 1 </title> <title>tp javasscript - InnerText</title> <script type="text/javascript" src="innertext.js"></script> <link rel="stylesheet" type="text/css" href="innertext.css" /></head> <p id="premier" class="text">les <b>tortues</b> (<i>testudines</i>) <span title="api" class="api">[tt <p class="text">les tortues sont ovipares et les pontes ont lieu environ une fois par an. Les juvénil <p class="text">les 310 <a href="http://fr.wikipedia.org/wiki/esp%c3%a8ce" title="espèce">espèces</a> <p style="color: red" onclick="charger()">charger!</p> /* fichier innertext.js function charger() { var elt = document.getelementsbytagname("p")[2]; var ptext = elt.innerhtml; window.alert(ptext); 4. Modifiez la fonction charger pour qu elle insère une petite image à la fin de chaque lien (par exemple, http: //www.famfamfam.com/lab/icons/silk/icons/table_edit.png, que vous recopierez dans votre répertoire). <!-- fichier innertext_image.html --> <title>tp javascript - Exercice 2 - question 4 </title> <script type="text/javascript" src="innertext_image.js"></script> <link rel="stylesheet" type="text/css" href="innertext_image.css" />
Programmation Web IUT Villetaneuse 5 </head> <p id="premier" class="text">les <b>tortues</b> (<i>testudines</i>) <span title="api" class="api">[tt <p class="text">les tortues sont ovipares et les pontes ont lieu environ une fois par an. Les juvénil <p class="text">les 310 <a href="http://fr.wikipedia.org/wiki/esp%c3%a8ce" title="espèce">espèces</a> <p style="color: red" onclick="charger()">charger!</p> /* fichier innertext_image.html.text {background: #CCF; #vide {background: #FF0; /* fichier innertext_image.js function charger() { var tabelt = document.getelementsbytagname("a"); var l = tabelt.length; for (i=0; i<l; i++){ var nouveauimg = document.createelement("img"); // var noeud = document.createtextnode("essai de textnode");d nouveauimg.setattribute( src, http://www.famfamfam.com/lab/icons/silk/icons/table_edit.png ); nouveauimg.setattribute( alt, image de lien ); tabelt[i].appendchild(nouveauimg); 5. Si vous avancez vite : Modifiez la fonction charger pour qu elle insère à la fin du parent de chaque paragraphe qui contient un lien un élément du type [i] (où i est le numéro du lien à partir du début du document). Un même paragraphe peut donc se terminer par plusieurs références s il contient plusieurs liens (genre [1][2][3][4]...). 6. Modifiez maintenant la fonction charger pour qu au déclenchement, la division vide se remplisse de tous les paragraphes de classe texte sans les balises (comme ci-dessus). Les paragraphes doivent rester séparés. <!-- fichier innertext_image_index.html --> <title>tp javascript Exercice 2 - question 5 </title> <script type="text/javascript" src="innertext_image_index.js"></script> <link rel="stylesheet" type="text/css" href="innertext_image_index.css" /></head>
Programmation Web IUT Villetaneuse 6 <p id="premier" class="text">les <b>tortues</b> (<i>testudines</i>) <span title="api" class="api">[tt <p class="text">les tortues sont ovipares et les pontes ont lieu environ une fois par an. Les juvénil <p class="text">les 310 <a href="http://fr.wikipedia.org/wiki/esp%c3%a8ce" title="espèce">espèces</a> <p style="color: red" onclick="charger()">charger!</p> /* fichier innertext_image_index.css.text {background: #CCF; #vide {background: #FF0; /* fichier innertext_image_index.js function charger() { var tabelt = document.getelementsbytagname("a"); // Copy du tableau pour eviter que la taille de cs dernier ne soit // impacte par l ajout des nouveaux noeuds <a> var temp = []; for (var p = 0; p < tabelt.length; p++) { temp.push(tabelt[p]); tabelt = temp; // Ajout des images a la fin de chaque lien for (i=0; i<tabelt.length; i++){ var nouveauimg = document.createelement("img"); nouveauimg.setattribute( src, http://www.famfamfam.com/lab/icons/silk/icons/table_edit.png ); nouveauimg.setattribute( alt, image de lien ); tabelt[i].appendchild(nouveauimg); // Collecte des attribut du lien // var parenta = tabelt[i].parentnode; var ahref = tabelt[i].getattribute( href ); // Ajout des liens [1][2]... var nouveaua = document.createelement( a ); nouveaua.setattribute( href, ahref); var index = [ +(i+1)+ ] ; var texta = document.createtextnode(index);
Programmation Web IUT Villetaneuse 7 nouveaua.appendchild(texta); ; tabelt[i].parentnode.appendchild(nouveaua); //window.alert(tabelt.length); 7. Quand vous recréez les paragraphes en texte pur, ajoutez le code suivant (je suppose ici que a est l élément que vous ajoutez au DOM) : a.onclick=paintitred(a); Expliquez les nouvelles propriétés des éléments. Comparez en particulier avec l insertion à la place de : a.onclick=function() {a.style.background="red";; 3 Construction de page 1. Recopiez test.* en auto.*. Définissez dans le script un tableau Legumes=[ Radis noir, Betterave, Brocoli, Conc Modifiez la fonction charger pour qu elle créer dans la division vide le schéma suivant (en HTML) : Les 4 légumes sont : Radis noir Betterave Brocoli Concombre <!-- fichier auto_liste_tiret.html --> <title>tp javascript - Exercice 3 - question 1 </title> <script type="text/javascript" src="auto_list.js"></script> <link rel="stylesheet" type="text/css" href="auto_list.css" /> </head> <p onclick="charger()">charger!</p> /* fichier auto_list.js /* Affiche un liste avec comme puce un tiret contenant les informations contenues dans le tableau arg. Cette liste sera un enfant qui sera rattaché en bout de element input : arg contenant les informations à placer dans la liste element : futur pere de la liste qui sera créee
Programmation Web IUT Villetaneuse 8 function liste_tiret(arg,element){ var ulist = document.createelement( ul ); /* Pour la mise en place du tiret, on supprime le type de puce par defaut ulist.style.liststyletype= none ; for (i=0; i<arg.length; i++){ var elist =document.createelement( li ); /* Tiret sous forme d un noeud texte suivi du noeud texte contenant l information var item_tiret = document.createtextnode( - ); var item_info = document.createtextnode(arg[i]); elist.appendchild(item_tiret); elist.appendchild(item_info); ulist.appendchild(elist); element.appendchild(ulist); function charger(){ var Legumes=[ Radis noir, Betterave, Brocoli, Concombre ]; var e = document.getelementbyid( vide ); liste_tiret(legumes, e); 2. Modifiez cette fonction pour que la liste soit en fait un formulaire avec 4 cases à cocher : Radis noir X Betterave X Brocoli Concombre valider L appui sur le bouton valider devrait déclencher l a chage de Betterave/Brocoli dans une popup. <!-- fichier auto_liste_tiret.html --> <title>tp javascript - Exercice 3 - question 2 </title> <script type="text/javascript" src="auto_list_checkbox.js"></script> <link rel="stylesheet" type="text/css" href="auto_list_checkbox.css" /> </head> <p onclick="charger()">charger!</p>
Programmation Web IUT Villetaneuse 9 /* fichier auto_list.js /* Affiche un liste avec comme puce un tiret contenant les informations contenues dans le tableau arg. Cette liste sera un enfant qui sera rattaché en bout de element input : arg contenant les informations à placer dans la liste element : futur pere de la liste qui sera créee function creer_formulaire_checkbox(arg,element){ var _form = document.createelement( form ); _form.setattribute("action","auto_list_checkbox.php"); _form.setattribute("method","get"); _form.setattribute("id","select_legumes"); /* Pour la mise en place du tiret, on supprime le type de puce par défaut for (i=0; i<arg.length; i++){ var _input =document.createelement( input ); _input.setattribute("type","checkbox"); _input.setattribute("name","legumes"); _input.setattribute("value", arg[i]); /* Mise en place de la checkbox dans le formulaire avec un retour chariot _form.appendchild(_input); var _text = document.createtextnode(arg[i]); _form.appendchild(_text); var _br = document.createelement("br"); _form.appendchild(_br); var _input =document.createelement( input ); _input.setattribute("type","button"); _input.setattribute("onclick","valider()"); _input.setattribute("value", "Valider"); _form.appendchild(_input); element.appendchild(_form); function charger(){ var Legumes=[ Radis noir, Betterave, Brocoli, Concombre ]; var e = document.getelementbyid( vide ); creer_formulaire_checkbox(legumes, e); /* valider permet de constuire une chaine de caractères constituées des cases à cochées valider
Programmation Web IUT Villetaneuse 10 function valider(id){ /* comme toutes les checkbox ont le meme nom "legumes" alors c est un tableau "legumes" qui est envoyé par le formulaire var _elements = document.getelementsbyname("legumes"); /* Constuction de la chaine de caractère contenant la valeur des cases cochées _legumes=""; for (i=0; i<_elements.length; i++){ if (_elements[i].checked){ _legumes=_legumes+_elements[i].value; /* pour éviter un / à la fin de la chaîne de caractères if (i<_elements.length-1 && _elements[i+1].checked){ _legumes=_legumes+"/"; alert(_legumes);