TP01 Recréer la structure DOM suivante :
<div id="divTP1"> Le <strong>World Wide Web Consortium</strong>, abrégé par le sigle <strong>W3C</strong>, est un <a href="http://fr.wikipedia.org/wiki/Organisme_de_normalisation" title="Organisme de normalisation">organisme de standardisation</a> à but non-lucratif chargé de promouvoir la compatibilité des technologies du <a href="http://fr.wikipedia.org/wiki/World_Wide_Web" title="World Wide Web">World Wide Web</a>. </div>
/* Structure TP 01 * * N1 = niveau 1, N2 = niveau 2, etc ... * /* la structure HTML * * N1 N2 * -div #text Le * --strong #text World Wide Web Consortium * #text , abrégé par le sigle * #text W3C * --strong #text , est un * --a #text organisme de standardisation * #text à but non-lucratif chargé de promouvoir la compatibilité des technologies du * --a #text World Wide Web * #text . */ // BESOINS (analyse) // 1 balise <div> + i attribut id --> document.createElement() // 9 nœuds texte --> méthode document.createTextNode() // 2 balises <strong> --> document.createElement() // 2 balises <a> --> document.createElement() // + 2 attributs href + 2 attributs title // insertion du conteneur <div> dans la page --> document.body.appendChild() // on crée un élément div (parent) var tagMainDiv = document.createElement('div'); // on donne un id à nore nouvelle élément tagMainDiv.id = "divTP1"; // création des noeuds texte avec la méthode createTextNode() dans un tableau var tabTxt = [ document.createTextNode('Le '), document.createTextNode('World Wide Web Consortium'), document.createTextNode(', abrégé par le sigle '), document.createTextNode('W3C'), document.createTextNode(', est un '), document.createTextNode('organisme de standardisation'), document.createTextNode(' à but non-lucratif chargé de promouvoir la compatibilité des technologies du '), document.createTextNode('World Wide Web'), document.createTextNode('.') ]; // on crée les deux éléments strong var tagStrong1 = document.createElement('strong'); var tagStrong2 = document.createElement('strong'); // on affecte les éléments strong tagStrong1 = tagMainDiv.appendChild(tabTxt[1]); tagStrong2 = tagMainDiv.appendChild(tabTxt[3]); // on crée les deux éléments a var tagA_odn = document.createElement('a'); var tagA_www = document.createElement('a'); // affectation des attributs aux éléments a tagA_odn.href = 'http://fr.wikipedia.org/wiki/Organisme_de_normalisation'; tagA_odn.title = 'Organisme de normalisation'; tagA_odn.appendChild(tabTxt[5]); // organisme de standardisation (partie txt avant la fermeture de la balise a) tagA_www.href = 'http://fr.wikipedia.org/wiki/World_Wide_Web'; tagA_www.title = 'World Wide Web'; tagA_www.appendChild(tabTxt[7]); // World Wide Web // insertion des élément avec la méthode appendChild() tagMainDiv.appendChild(tabTxt[0]); // Le tagMainDiv.appendChild(tagStrong1); tagMainDiv.appendChild(tabTxt[2]); tagMainDiv.appendChild(tagStrong2); tagMainDiv.appendChild(tabTxt[4]); tagMainDiv.appendChild(tagA_odn); tagMainDiv.appendChild(tabTxt[6]); tagMainDiv.appendChild(tagA_www); tagMainDiv.appendChild(tabTxt[8]); // on insere la tagMainDiv dans le body document.body.appendChild(tagMainDiv);
TP04 Recréer la structure DOM suivante :
Utiliser une boucle for pour les 4 éléments <li>.
<div id="divTP2"> <p>Langages basés sur ECMAScript :</p> <ul> <li>JavaScript</li> <li>JScript</li> <li>ActionScript</li> <li>EX4</li> </ul> </div>
/* Structure TP 02 * * N1 N2 N3 * -div --p #text * --ul ---li #text * ---li #text * ---li #text * ---li #text */ // BESOINS (analyse) // 1 balise <div> --> document.createElement() // 5 nœuds texte --> méthode document.createTextNode() // 2 balises <ul> --> document.createElement() // 4 balises <li> --> document.createElement() // insertion des balises <li> dans le conteneur <ul> element_ul.appendChild(element_li) // insertion du conteneur <div> dans la page --> document.body.appendChild() // On crée l'élément div et on lui affecte un id var elementMainDiv = document.createElement('div'); elementMainDiv.id = 'divTP2'; // On crée un tableau avec les noeuds texte var tabTxt = [ document.createTextNode('JavaScript'), //0 document.createTextNode('JScript'), //1 document.createTextNode('ActionScript'), //2 document.createTextNode('EX4') //3 ]; // On crée l'élément p et on l'affecte le noeud texte var elementP = document.createElement('p'); elementP = document.createTextNode('Langages basés sur ECMAScript :'); // On crée l'élément ul et li var elementUl = document.createElement('ul'); var elementLi; // On crée une boucle pour créer: // l'élémént li, l'affecter et affecter l'élément ul for(var i = 0; i < tabTxt.length; i++){ //crée l'élément li elementLi = document.createElement('li'); //on affecte l'élémént li elementLi.appendChild(tabTxt[i]); // on affecte l'élément ul en lui passant l'élément li elementUl.appendChild(elementLi); } // Insertion des éléments p et ul dans l'élement div (lire de droite à gauche) elementMainDiv.appendChild(elementP); elementMainDiv.appendChild(elementUl); // Insertion de l'élément div dans le body document.body.appendChild(elementMainDiv);
TP03 Recréer la structure DOM suivante :
Infos Balises
dl entourent la structure
dt entourent un terme à définir
dd entourent la définition
<div id="divTP3"> <p>Langages basés sur ECMAScript :</p> <dl> <dt>JavaScript</dt> <dd>JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi coté serveur.</dd> <dt>JScript</dt> <dd>JScript est le nom générique de plusieurs implémentations d'ECMAScript 3 créées par Microsoft.</dd> <dt>ActionScript</dt> <dd>ActionScript est le langage de programmation utilisé au sein d'applications clientes (Adobe Flash, Adobe Flex) et serveur (Flash media server, JRun, Macromedia Generator).</dd> <dt>EX4</dt> <dd>ECMAScript for XML (E4X) est une extension XML au langage ECMAScript.</dd> </dl> </div>
/* la structure HTML * * N1 N2 N3 * -div --p #text * --dl ---dt #text * ---dd #text * ---dt #text * ---dd #text * ---dt #text * ---dd #text * ---dt #text * ---dd #text */ // BESOINS (analyse) // 1 balise div --> méthode document.createElement() + un attribut id // 9 noeuds textes --> méthode document.createTextNode() // 1 balise conteneur dl // -- 4 balises conteneurs dt // -- 4 balises dd // SOLUS AVEC UN OBJET LITTERAL // On crée l'élément div et on lui affecte un id var elementMainDiv = document.createElement('div'); elementMainDiv.id = 'divTP3'; // On crée un objet litéral var tabTxt = [ {t: 'JavaScript', d: 'JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi coté serveur.' }, {t: 'JScript', d: 'JScript est le nom générique de plusieurs implémentations d\'ECMAScript 3 créées par Microsoft.' }, {t: 'ActionScript', d: 'ActionScript est le langage de programmation utilisé au sein d\'applications clientes (Adobe Flash, Adobe Flex) et serveur (Flash media server, JRun, Macromedia Generator).' }, {t: 'EX4', d: 'ECMAScript for XML (E4X) est une extension XML au langage ECMAScript.'} ]; // On crée l'élément p et on l'affecte le noeud texte var element_p = document.createElement('p'); element_p = document.createTextNode('Langages basés sur ECMAScript :'); var element_dl = document.createElement('dl'); var element_dt, element_dt_txt; var element_dd, element_dd_txt; // dl dt dd for(var i = 0; i < tabTxt.length; i++){ // je crée la balise dt element_dt = document.createElement('dt'); // je crée la balise dd element_dd = document.createElement('dd'); // j'affecte du texte à le balise dt element_dt_txt = document.createTextNode(tabTxt[i].t); // j'affecte du texte à le balise dd element_dd_txt = document.createTextNode(tabTxt[i].d); // j'affecte la balise dt element_dt.appendChild(element_dt_txt); // j'affecte la balise dd element_dd.appendChild(element_dd_txt); // j'affecte la balise dl element_dl.appendChild(element_dt); element_dl.appendChild(element_dd); } // Insertion des éléments p et ul dans l'élement div (lire de droite à gauche) elementMainDiv.appendChild(element_p); elementMainDiv.appendChild(element_dl); // Insertion de l'élément div dans le body document.body.appendChild(elementMainDiv);
TP03 Recréer la structure DOM suivante :
// SOLUS AVEC UN TABLEAU // On crée l'élément div et on lui affecte un id var elementMainDiv = document.createElement('div'); elementMainDiv.id = 'divTP3'; // On tableau avec tout les noeuds texte var tabTxt = [ document.createTextNode('JavaScript'), document.createTextNode('JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi coté serveur.'), document.createTextNode('JScript'), document.createTextNode('JScript est le nom générique de plusieurs implémentations d\'ECMAScript 3 créées par Microsoft.'), document.createTextNode('ActionScript'), document.createTextNode('ActionScript est le langage de programmation utilisé au sein d\'applications clientes (Adobe Flash, Adobe Flex) et serveur (Flash media server, JRun, Macromedia Generator).'), document.createTextNode('EX4'), document.createTextNode('ECMAScript for XML (E4X) est une extension XML au langage ECMAScript.') ]; // On crée l'élément p et on l'affecte le noeud texte var element_p = document.createElement('p'); element_p = document.createTextNode('Langages basés sur ECMAScript :'); var element_dl = document.createElement('dl'); var element_dt, element_dt_txt; var element_dd, element_dd_txt; // dl dt dd for(var i = 0; i < tabTxt.length; i = i + 2){ var j; j = i + 1; // je crée la balise dt element_dt = document.createElement('dt'); // je crée la balise dd element_dd = document.createElement('dd'); // j'affecte du texte à le balise dt element_dt_txt = element_dt.appendChild(tabTxt[i]); // j'affecte du texte à le balise dd element_dd_txt = element_dd.appendChild(tabTxt[j]); // j'affecte la balise dt (je l'a rempli avec du txt) element_dt.appendChild(element_dt_txt); // j'affecte la balise dd (je l'a rempli avec du txt) element_dd.appendChild(element_dd_txt); // j'affecte la balise dl element_dl.appendChild(element_dt); element_dl.appendChild(element_dd); } // Insertion des éléments p et ul dans l'élement div (lire de droite à gauche) elementMainDiv.appendChild(element_p); elementMainDiv.appendChild(element_dl); // Insertion de l'élément div dans le body document.body.appendChild(elementMainDiv);
TP04 Recréer la structure DOM suivante :
<div id="divTP4"> <form enctype="multipart/form-data" method="post" action="upload.php"> <fieldset> <legend>Uploader une image</legend> <div style="text-align: center"> <label for="inputUpload">Image à uploader :</label> <input type="file" name="inputUpload" id="inputUpload" /> <br /><br /> <input type="submit" value="Envoyer" /> </div> </fieldset> </form> </div>
/* N1 N2 N3 N4 N5 * -div --form * ---fieldset * ----legend #text * ----div * ----- label #text * ----- input * ----- br * ----- br * ----- input */ // BESOINS (analyse) // 1 balise div --> méthode document.createElement() + un attribut id // 1 balise --> méthode document.createElement() + 3 attributs // 1 balise fieldset // 1 balise legend // 1 balise div + attribut // 1 balise label + 1 attribut // 1 balise input + 3 attributs // 2 balises br // 1 balise input + 2 attributs // 2 noeuds textes --> méthode document.createTextNode() // NIVEAU 1 création de la div principale var elementMainDiv = document.createElement('div'); elementMainDiv.id = 'divTP4'; // Tableau des noeuds text var tabTxt = [ document.createTextNode('Uploader une image'), document.createTextNode('Image à uploader :') ]; // NIVEAU 2 Création et affectation var element_form = document.createElement('form'); element_form.enctype = 'multipart/form-data'; element_form.method = 'post'; element_form.action = 'upload.php'; // NIVEAU 3 Création var element_fieldset = document.createElement('fieldset'); // NIVEAU 4 Création var element_legend = document.createElement('legend'); element_legend.appendChild(tabTxt[0]); // Création var element_div = document.createElement('div'); element_div.style = 'text-align: center'; // NIVEAU 5 Création et affectation var element_label = document.createElement('label'); element_label.for = 'inputUpload'; element_label.appendChild(tabTxt[1]); // Création et affectation var element_input1 = document.createElement('input'); element_input1.type = 'file'; element_input1.name = 'inputUpload'; element_input1.id = 'inputUpload'; // Création var element_br1 = document.createElement('br'); var element_br2 = document.createElement('br'); // Création et affectation var element_input2 = document.createElement('input'); element_input2.type = 'submit'; element_input2.value = 'Envoyer'; // C'est içi que l'on emboite les poupées russes ! // insertion du niveau 2 dans le 1 elementMainDiv.appendChild(element_form); // insertion du niveau 3 dans le 2 element_form.appendChild(element_fieldset); // insertion du niveau 4 dans le 3 element_fieldset.appendChild(element_legend); element_fieldset.appendChild(element_div); // insertion du niveau 5 dans le 4 element_div.appendChild(element_label); element_div.appendChild(element_input1); element_div.appendChild(element_br1); element_div.appendChild(element_br2); element_div.appendChild(element_input2); // Insertion de la div principale niveau 1 dans le body niveau 0 document.body.appendChild(elementMainDiv);