NuxBSD: Free Infos

Retour d'un niveau
Retour à l'accueil

• Partie 1: Le DOM
• Partie 2: Naviguer entre les nœuds

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);

Retour d'un niveau
Retour à l'accueil