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.]]>def]]>let]]>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 leecho "Hello"]]>print("Hello")]]>puts "Hello"]]>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.onClick = f]]>onclick (toutbtn.click = f]]>.click est une méthode (pourbtn.addEventListener("click", f)]]>btn.listen(f)]]>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 ounull si aucun)]]>querySelector acceptequerySelectorAll quitextContent etinnerHTML ?]]>textContent pour éviter les attaques XSStextContent traite la valeur comme du texte brut (échappant les balises) ; innerHTML interprète le HTML]]>el.textContent =
"<b>x</b>" affiche littéralement<b>x</b> ; el.innerHTML = "<b>x</b>"x en gras.]]>textContent n'existe pas]]>innerHTML est plus rapide]]>if (x > 0) {
console.log("positif");
}]]>if x > 0 then
console.log("positif")
end]]>if x > 0:
console.log("positif")]]>if x > 0:
console.log "positif"]]>for JavaScript itère 5 fois ?]]>for...of (itérer surfor...inforEach (méthode des tableaux).]]>for i in range(5)]]>for i = 0 to 5]]>loop 5 times]]>for (let i = 0; i < 5; i++) { ... }]]>for : initialisation, condition,;).]]>const carre = x => x * x;. Plus concisethis.]]>def carre(x): return x * x]]>method carre(x) { ... }]]>method globalcarre(x) -> x * x]]>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), insertBeforeadd("p", "Hello");]]>new HTMLElement("p");]]>document.body.innerHTML = "<p>Hello</p>";]]><body>. Pas équivalent (et peu sûr).]]>const p = document.createElement("p");
p.textContent = "Hello";
document.body.appendChild(p);]]>== et === en=== sauf!== plutôt que !=.]]>== compare avec conversion de type (5 == "5" est true) ; === compare strictement (sans conversion : 5 === "5" est false)]]>=== pour== n'existe pas en JS moderne]]>=== est 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);]]>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)document.getElementByIdnull. Pourquoi ?]]><script> à<body>, (2) <script defer><head>, (3) document.addEventListener
("DOMContentLoaded", ...).]]><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<script>...</script>, le code malveillanttextContent (qui échappe) ouinnerHTML est obsolète]]>addEventListener 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 parlet que si on a vraimentvarvar]]>var autorise au contraire lafunction]]>function sert à déclarer uneconst]]>const interdit lalet]]>let déclare une variable dont laconst.]]>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éeclassName, 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 unequerySelector ne fonctionne que sur les pages chargées par AJAX]]>querySelector fonctionne sur toutid vaut titre (s'il existe)]]>getElementById est plus rapide et plusquerySelector accepte toutgetElementByIdquerySelector accepte.maClasse).]]>