script.js danssrc), script<script>...</script>), moduletype="module"). Toujours préférer le<link href="script.js">]]><link> est pour les feuilles<script src="script.js"></script>]]><script> avecsrc. Préférable de placer en bas du<body> (ou avec defer dans <head>)<import "script.js">]]><js src="script.js"></js>]]>var (ancien, à éviter),let (modifiable), const (constante,const parlet quand on doit modifier.]]>var]]>let.]]>Let]]>Let x = 5; provoque unelet]]>let x = 5; déclare uneint]]>console.warn, console.error,console.table (pour les objets/tableaux),console.dir (pour les éléments DOM).]]>console.log("Hello")]]>console.log est leConsole.log("Hello")]]>console, tout en minuscules ;Console n'est pas définiconsole.log "Hello"]]>log("Hello")]]>log seul n'est pasconsole, il fautconsole.log.]]>id="titre" ?]]>document.querySelector("#titre") (acceptegetElementById(titre)]]>document. et lesdocument.find("#titre")]]>document.getId("titre")]]>document.getElementById("titre")]]>null sieltextContent (texte pur) vs innerHTMLtextContent quand onel.value = "..."]]>value concerne les champs de<input>, <select>).]]>el.text = "..."]]>el.textContent = "..."]]>textContent modifie leinnerHTMLel.changeText("...")]]><html>]]>f quand onbtn ?]]>addEventListener est la méthode standard."click", "input", "submit"...),btn.addEventListener("onclick", f)]]>"click", sans le préfixe on. Aucun"onclick" n'existe : labtn.addEventListener("click", f())]]>f() appelle la fonction toutundefined) à addEventListener. Il fautf, sansbtn.addEventListener("click", f)]]>btn.onclick("click", f)]]>onclick est une propriété àbtn.onclick = f), pas une méthode àlet x = 5;
x = x + 3;
console.log(x);5 + "3" = "53" en JS53 (concaténation)]]>5]]>8]]>document.querySelector(".bouton") ?]]>querySelector(sel) = premier élément ;querySelectorAll(sel) = NodeList. PlusgetElementById /getElementsByClassName.]]>querySelectordocument.activeElement ouquerySelector acceptequerySelectorAll quitextContent etinnerHTML ?]]>textContent pour éviter les attaques XSStextContent = texte brut, innerHTML = HTML]]>el.textContent =
"<b>x</b>" affiche littéralement<b>x</b> ; el.innerHTML = "<b>x</b>"x en gras.]]>textContent n'existe pas en JavaScript]]>innerHTML est systématiquement plus rapide]]>if (x > 0) {
console.log("positif");
}]]>if x > 0 {
console.log("positif");
}]]>if oubliées : enif (x > 0). Sansif x > 0:
console.log("positif")]]>if (x > 0):
console.log("positif");]]>: après lafor JavaScript itère 5 fois ?]]>for...of (itérer surfor...inforEach (méthode des tableaux).]]>for (let i = 0; i <= 5; i++) { ... }]]><=, la variablefor (let i = 0, i < 5, i++) { ... }]]>for sontfor (let i = 0; i > 5; i++) { ... }]]>i > 5 est faussefor (let i = 0; i < 5; i++) { ... }]]>for : initialisation, condition,;).]]>const carre = x => x * x;. Plus concisethis.]]>carre(x) { return x * x; }]]>function oublié : sans lui, cereturn seFunction carre(x) { return x * x; }]]>function, tout en minuscules.Function avec majuscule désigne unconst carre = x -> x * x;]]>=> et non ->. Avec->, SyntaxError.]]>function carre(x) { return x * x; }]]>function,return pour lasrc d'une image ?]]>src, href,alt, id...), on accède directement parsetAttribute/getAttribute.]]>img.attribute("src", "...")]]>img.changeSrc("...")]]>img.src = "nouvelle.jpg"]]>img.setAttribute("src", "nouvelle.jpg").]]>img.attr.src = "..."]]>.attr n'existe pas.]]><p> et l'ajouter au <body> ?]]>appendChild (à laprepend (au début), insertBeforeconst p = document.createElement("p");
p.textContent = "Hello";]]>document.body.appendChild(p), rien neconst p = document.createElement("p");
p.textContent = "Hello";
document.body.appendChild("p");]]>appendChild attend un nœud,"p" provoque uneTypeError. Il faut lui passer l'élémentp.]]>const p = "<p>Hello</p>";
document.body.innerHTML = p;]]>innerHTML remplace<body> par ce fragment.const p = document.createElement("p");
p.textContent = "Hello";
document.body.appendChild(p);]]>== et === en=== sauf!== plutôt que !=.]]>== convertit le type, === non]]>=== pour== n'existe pas en JS moderne]]>=== est totalement obsolète]]>let t = [1, 2, 3];]]>t[0] (= 1). Méthodes :t.push, t.pop, t.length...]]>Array(1, 2, 3)]]>[1, 2, 3].]]>let t = {1, 2, 3};]]>{} désigne un objet en JS,{cle: valeur}.]]>let t = (1, 2, 3);]]>t vaut le nombre 3.]]>event est passé automatiquementevent.target (qui a déclenché),event.type (type d'événement),event.preventDefault() (annuler leevent, automatiquementevent.target (passé au callback)]]>btn.addEventListener("click", (e) =>
console.log(e.target)); affichedebugger; pour mettre un pointconsole.table(arr) pourconsole.dir(elem)<head> sans defer,document.getElementById("menu") maisnull. L'élément id="menu" existe<script> à<body>, (2) <script defer><head>, (3) document.addEventListener
("DOMContentLoaded", ...).]]>id est correct. La<script> est dans<head> sans defer, il s'exécute avant<body>. Solutions : placer le<body>, utiliserdefer, ou encapsuler dans unDOMContentLoaded.]]>"5" + 3 en JavaScript ?]]>"5" - 3 = 2 (le - forceNumber(s) ou parseInt(s).]]>+, si l'un desel.innerHTML = userInput; est-ilinnerHTML. PréférertextContent, ou un nettoyage avec uneuserInput contient<img src=x onerror="...">,<script> insérés viainnerHTML ne s'exécutent pas, mais lestextContent (qui échappe) ouinnerHTML serait totalement obsolète]]>innerHTML ; XSS est l'une desaddEventListener permet d'ajouter plusieurs gestionnaires d'événements à un élément]]>onclick =.]]>document.getElementById(id) renvoie le premier élément ou null]]>== et === sont synonymes en JavaScript]]>== fait0 == false,"" == 0...) ; === est uneconst t = [1];
t.push(2);const garantit que le nom pointe toujours versconstlet seulement quand la variable doitvar.]]>const interdit la réaffectation de t, pas la modification du tableau]]>const fige le lien entret et le tableau, pas le tableaupush, t vaut [1, 2].t = [9]; lèverait uneTypeError (réaffectation interdite).]]>TypeError est levée, car t est déclaré constant]]>const rend laTypeError ne survientt = ...),push.]]>t avec let pour pouvoir le modifier]]>let n'est nécessaire que pourconst.]]>t vaut toujours [1] : le push est ignoré en silence]]>const ne protègepush s'exécutet vaut [1, 2]. Pour gelerObject.freeze(t).]]>actif à un élément elquerySelector, quelle instructionclassList : on n'écrase pas lestoggle("actif") est un raccourci pratique pourel.style.actif = true]]>style permet deactif.]]>el.addClass("actif")]]>addClass n'est pas une méthodeel.classList.add("actif")]]>classListadd, remove, toggle,contains. C'est la méthode recommandéeel.class = "actif"]]>className, pas class (qui est un motdocument.getElementById("titre")document.querySelector("#titre") ?]]>getElementById quandquerySelector lorsqu'on a besoin d'un sélecteurnav > a.actif:first-child).querySelectorAll renvoie une NodeListgetElementById renvoie un seulnull). C'est getElementsByClassNamequerySelectorAll qui renvoient unenull pour le second, car querySelector ne fonctionne que sur les pages chargées par AJAX]]>querySelector fonctionne sur tout#titre.]]>getElementById est plus rapide et plusquerySelector accepte toutgetElementById cible bien unquerySelector, lui, accepte.maClasse).]]>