oc-courses / javascript-web Goto Github PK

Pour nommer une variable qui représente une div, quelle convention adopter : div, elementDiv, divElement, divElt ?

J'hésite à englober systématiquement le code JS dans une IIFE :

(function() {
  // the code here is executed once in its own scope
})();

Je trouve que ça alourdit le code pour des débutants. Je ne l'ai pas fait pour le précédent cours JS.

/*
Activité 1
*/

// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)
var listeLiens = [
{
titre: "So Foot",
url: "http://sofoot.com",
auteur: "yann.usaille"
},
{
titre: "Guide d'autodéfense numérique",
url: "http://guide.boum.org",
auteur: "paulochon"
},
{
titre: "L'encyclopédie en ligne Wikipedia",
url: "http://Wikipedia.org",
auteur: "annie.zette"
}
];

// TODO : compléter ce fichier pour ajouter les liens à la page web
var divElt = document.getElementsByTagName("div");
var styleElement = getComputedStyle(divElt);

listeLiens.forEach(function (mot) {
var pElt = document.createElement("p");
pElt.textContent = mot.url + "/n Ajouté par " + mot.auteur;
pElt.style.backgroundColor = "white";

var aElt = document.createElement("a");
aElt.href = mot.url;
aElt.textContent = mot.titre;
aElt.textContent.style.color = "#428bca";

pElt.appendChild(aElt);
divElt.appendChild(pElt);

});

document.body.appendChild(divElt);

Ajouter use strict; partout ?
Pour l'instant, il n'est pas utilisé dans le cours JS précédent

@bpesquet, merci beaucoup de nous apprendre Javascript et de prendre le temps de décortiquer les bases.

Je m'interroge sur l'exercice 1 du chapitre 3 relatif à la modification de la structure de la page.
Ceci revient-il au même que votre correction :

document.getElementById("contenu").innerHTML += '<p>En voici une ' + 
    '<a href = "https://fr.wikipedia.org/wiki/Liste_des_langages_de_programmation">liste</a>' +
    ' plus complète</p>'; 

?

A savoir particulièrement, est-ce plus gourmand en ressources/ temps d'exécution que votre correction ou bien est-ce égal mais moins riche d'un point de vue pédagogique?

Merci encore pour vos cours et les exercices!

Je pense présenter uniquement childNodes et parentNode.
first/last[Element]Child, next/previous[Element]Sibling : utiles ou pas ?