Dans le cours "Dynamisez vos sites Web avec JavaScript", je trouve que les exercices donné à la fin des chapitres manque de cohérence. Ils sont donné sans contexte "pratique". Du coup, j'ai souvent du mal à les réussir car ils n'ont pour moi aucune logique. J'ai suivi d'autres tutoriel en ligne, où les mêmes notions ont été abordé dans un contexte où chaque exercice s'enchaînent pour amener à la réalisation de quelque chose de concret et cela me semblait plus clair.
Le cours parle de dynamiser nos sites web mais les exercices ne sont pas utilisé dans ce contexte, c'est vraiment dommage. J'en suis au 11ème chapitre et aucun exemple donnés ne s'inscrit dans cette dynamique.
De plus, le HTML est truffé de balise auto-fermante largement dépréciées (<hr />, <br />, ...).
A propos du Mini-TP n°1 : recréer une structure DOM, voici une autre solution possible
function run(){
let output = document.getElementById('output'),
divTp1 = document.createElement('div'),
elements= ['strong','a'],
texts = [
'Le ',
'World Wide Web Consortium',
', abrégé par le sigle ',
'W3C',
', est un ',
'Organisme de standardisation ',
'à but non-lucratif chargé de promouvoir la compatibilité des technologies du ',
'World Wide Web'
];
divTp1.id ='divTP1';
for(let i = 0, j = elements.length; i<j; i++){
for (let k = 0, l = j ; k<l; k++){
let element = document.createElement(elements[i]);
divTp1.appendChild(element);
}
}
let children = divTp1.children;
//alert(children[0].nodeName);
//console.log(children);
let i = 0;
for(let j = 2 ,k = (texts.length/2) - 1 ; j < k; j++){
for(let l = 0, m = children.length ; l < m; l++){
let text_before = document.createTextNode(texts[i]);
let text_child = document.createTextNode(texts[i+1]);
i +=2;
divTp1.insertBefore(text_before,children[l]);
children[l].appendChild(text_child);
if(children[l].nodeName.toLowerCase() === 'a'){
children[l].href = 'http://fr.wikipedia.org/wiki/'+text_child.textContent.replace(" ", "_");
children[l].title = text_child.data;
}
}
}
output.appendChild(divTp1);
}
Ainsi, on obtient le code html suivant:
<div id="divTP1">
<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>
</div>
Il doit y avoir une erreur de frappe dans la réponse de la dernière question du questionnaire à choix multiples du chapitre 6 de la partie 1:
Oui, ça fonctionne. La portée d'une variable déclarée avec var est locale à la fonctionne, et non au bloc if/else. Mais c'est vraiment une mauvaise pratique : préférez déclarer vos variables avec var dès le début de la fonction.
Quand je regarde la solution, il y a des "if" partout mais leur présence n'est pas expliqué, alors qu'ils n'ont pas été mis dans les cours.
la solution donnée :
var output, button;
if (output = document.getElementById("output")) {
if (button = output.getElementsByTagName("button")) {
button.onclick = function() {
this.innerHTML = "Vous m'avez cliqué";
};
}
}
J'aimerai donc comprendre pourquoi mon code ne fonctionne pas, pourquoi il faut mettre des "if" ? Merci !
Réponse à BaptisteL'H "getElementsByTagName" renvoie la liste de toutes les balises "a" de la page, il faut donc indiquer entre crochet quelle balise tu veux cibler (si c'est la toute première ou s'il n'y en a qu'une seule dans la page, il faut mettre [0]).
@CécileGallioz1 Bonjour, la question est négative "quel procédé ne faut-il pas utiliser?". Donc la réponse à la question est bien element.class puisque les deux autre réponses sont correct en JS.
@Anya et tous ceux qui comme moi n'auraient peut-être pas compris la solution de cet exercice du premier coup.
Je suis aussi le cours et je pense avoir la réponse (corrigez-moi si je me trompe) :
Comme tu peux le voir sur la doc de la méthode getElementsByTagName(), la recherche porte sur le sous-arbre de l'élément spécifié.
Ce qui veut donc dire que tu dois d'abord cibler l'élément parent du Button. C'est ce que l'on fait en déclarant la variable output et en y mettant l'élément Div. Ensuite, on déclare la variable button et on y place l'élément Button grâce à la fameuse méthode (qui renvoie un tableau, d'où l'utilité de mettre [0] à la fin pour cibler la première "case" de ce tableau).
Enfin, on change le texte avec onclick.
Pour ce qui est des conditions If(), elles ne semblent pas être obligatoires car mon code fonctionne sans-elles, cependant, il me semble que c'est une astuce pour éviter d'exécuter du code si le Div n'existe pas, par exemple.
Si il n'existe pas, la première condition renvoie False et le code ne s'exécute pas.
Concernant l'exercice du chapitre 7 "Afficher un tableau à deux dimensions", je me doute de la réponse mais je pose la question quand même : Pourquoi on ne se contente pas de ce code ?
Il y a de magnifiques erreurs de frappes pour les exercices "Écrire une fonction pour comparer deux nombres" et "Déclarer une fonction qui demande un nombre à l'utilisateur" (chapitre 6) Surtout pour le dernier. Et au chapitre 7 "Tableau à deux dimensions avec while"
Les effets de la bière sans doute
Cours très complet, on ne m'a jamais aussi bien appris le Javascript, depuis le temps que je cherche.
concernant les exercices dont le but est de remplir les champs laissés blancs, il n'y a pas de possibilité d'afficher la réponse si on ne parvient pas à la trouver, ce qui peut s'avérer être assez frustrant.
Je rencontre un problème un peu frustrant. Après avoir terminé le cours sur le JavaScript, j'ai décidé de retourner sur ce site que j'avais découvert et beaucoup apprécié il y a quelques années. J'étais enthousiaste à l'idée de mettre en pratique mes nouvelles compétences et de pouvoir m'exercer.
Cependant, je me heurte à un obstacle inattendu : je ne peux accéder à aucun des exercices proposés sur le site. Au début, je pensais que le problème pouvait venir de mon navigateur. Mais même après en avoir changé, le souci persiste.
Je voulais simplement signaler ce problème aux auteurs du site, au cas où.
Ksk
Laurence
~ Hell is empty and all the devils are here. ~
Donatien
MR