Cet exercice s'inscrit dans le cadre des Mini-TP présentés dans le tutoriel. Afin de s'entraîner à créer avec le DOM, voici quatre petits TP, dont ceci est le troisième. Pour chacun d'eux, une structure DOM sous forme de code HTML vous est donnée, et il vous est demandé de recréer cette structure en utilisant le DOM en Javascript.
Utilisez le <div id="output"> pour insérer votre structure DOM. Pour ce troisième Mini-TP, le code que vous devez recréer est donné ci-dessous.
<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>
Écrivez le code qui permet de faire ça. Dès que c'est fait, cliquez sur le bouton Exécuter le script pour exécuter le code.
Écrivez votre code
Console d'erreurs
Pas d'erreurs d'exécution ou de syntaxe
Rendu #output
Source HTML
Solutions
La manière longue et propre
C'est le corrigé de base, avec la belle technique comme elle doit être !
// On crée l'élément conteneur
var mainDiv = document.createElement('div');
mainDiv.id = 'divTP3';
// On place le texte dans des objets, eux-mêmes placés dans un tableau
// Par facilité, la création des nœuds textuels se fera dans la boucle
var languages = [
{ 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 le paragraphe
var paragraph = document.createElement('p');
var paragraphText = document.createTextNode('Langages basés sur ECMAScript :');
paragraph.appendChild(paragraphText);
// On crée la liste, et on boucle pour ajouter chaque item
var defList = document.createElement('dl'),
defTerm, defTermText,
defDefn, defDefnText;
for (var i = 0, c=languages.length; i < c; i++) {
defTerm = document.createElement('dt');
defDefn = document.createElement('dd');
defTermText = document.createTextNode(languages[i].t);
defDefnText = document.createTextNode(languages[i].d);
defTerm.appendChild(defTermText);
defDefn.appendChild(defDefnText);
defList.appendChild(defTerm);
defList.appendChild(defDefn);
}
// On insère le tout dans mainDiv
mainDiv.appendChild(paragraph);
mainDiv.appendChild(defList);
// On insère mainDiv dans le #output
document.getElementById('output').appendChild(mainDiv);
Un commentaire ? Un bug ? Contactez-moi !
Vous souhaitez proposer une autre solution ?
Un autre exercice ou une précision ?
Vous avez rencontré une erreur ?
Un exercice ne fonctionne pas ?
OpenClassrooms
Commentez directement dans le sujet dédié aux exercices