Module 5Manipuler jQuery
Chapitre 15 sur 15
Examen blanc et fiche mémo
Te tester sur l'ensemble du module et garder une fiche mémo des syntaxes essentielles.
- ≈ 90 min
- 2 leçons
- 3 exercices
- TP
Module 5Manipuler jQuery
Chapitre 15 sur 15
Te tester sur l'ensemble du module et garder une fiche mémo des syntaxes essentielles.
Objectifs
Avec ce chapitre, tu sauras…
Fais cet examen en 2 heures 30, sans le cours. Les parties A et B se font sur papier, les parties C et D sur ordinateur. Corrige-toi avec le barème, puis retravaille les chapitres où tu as perdu le plus de points.
Leçon 1
| Partie | Contenu | Points | Chapitres |
|---|---|---|---|
| A | questions à choix multiples | 10 | 1 à 14 |
| B | prédire l'affichage et corriger du code | 10 | 4 à 7 |
| C | DOM, événements et formulaire | 12 | 8 à 12 |
| D | jQuery et AJAX | 8 | 13 et 14 |
| Total | 40 |
Leçon 2
| Notion | Syntaxe |
|---|---|
| variables | const x = 1; let y = 2; (plus de var) |
| gabarit | `Bonjour ${nom}` |
| comparaison | === !== > < >= <= ; ET && ; NON ! |
| types | typeof x ; Number(), String(), parseInt(), Number.isNaN() |
| condition | if (c) { } else if (c) { } else { } ; c ? a : b ; switch (x) { case 1: ...; break; default: ... } |
1JavaScript est un langage…
2La méthode HTTP pour créer une ressource est…
3const x; provoque…
4"10" === 10 vaut…
5[3, 1, 2].map(n => n * 2) vaut…
6new Date(2026, 11, 25).getMonth() vaut…
7JSON.stringify({ a: 1 }) renvoie…
8Pour obtenir uniquement les enfants éléments :
9Pour bloquer l'envoi d'un formulaire :
10En jQuery 3, on traite l'échec d'une requête $.ajax avec…
L'essentiel du chapitre
const / let, ===, textContent pour les saisies, et addEventListener.style ni textContent.| boucles | for (let i = 0; i < n; i++) ; while (c) ; do { } while (c) ; for (const v of tab) ; for (const k in obj) |
| fonctions | function f(a, b = 0) { return a + b; } ; const f = (a, b) => a + b; |
| tableaux | push pop shift unshift splice slice indexOf includes sort((a, b) => a - b) join |
| parcours | forEach(f) ; map(f) ; filter(f) ; reduce((acc, x) => ..., init) ; find(f) |
| chaînes | length toUpperCase() trim() split() substring() includes() replace() |
| objets | { cle: valeur, methode() { this... } } ; class A { constructor() { } } ; new A() |
| dates | new Date() ; getFullYear() getMonth() (0-11) getDate() getDay() (0 = dimanche) |
| Math | Math.round floor ceil max min random() |
| regex | /^\d{5}$/.test(ch) ; ch.replace(/js/gi, "JS") |
| JSON | JSON.parse(texte) → objet ; JSON.stringify(objet) → texte |
| asynchrone | setTimeout(f, ms) ; new Promise((resolve, reject) => ...) ; .then().catch().finally() ; async / await |
| erreurs | try { } catch (err) { err.name, err.message } finally { } ; throw new Error("...") |
| Besoin | Syntaxe |
|---|---|
| sélectionner | document.querySelector(".a") ; querySelectorAll("li") ; getElementById("x") |
| naviguer | parentElement children firstElementChild nextElementSibling |
| contenu | el.textContent (sûr) ; el.innerHTML ; input.value ; checkbox.checked |
| créer et ajouter | const p = document.createElement("p"); parent.append(p); prepend before after |
| supprimer | el.remove(); ; parent.removeChild(el); ; ancien.replaceWith(nouveau); |
| style | el.style.backgroundColor = "red"; ; el.classList.add / remove / toggle / contains("x") |
| attributs | getAttribute setAttribute("href", url) removeAttribute ; el.dataset.prix |
| événement | el.addEventListener("click", (e) => { e.target; e.preventDefault(); }); |
| souris, clavier | click dblclick mouseenter mouseleave mousemove ; keydown keyup ; e.key |
| formulaire | form.addEventListener("submit", e => { e.preventDefault(); ... }); ; input change |
| délégation | parent.addEventListener("click", e => { if (e.target.matches("button")) ... }); |
| Besoin | Syntaxe |
|---|---|
| prêt | $(function () { ... }); |
| sélection et action | $(".a").hide(); .text("x") .html() .val() .attr() .css() .addClass() |
| effets | .fadeIn() .fadeOut() .slideUp() .slideDown() .toggle() ; chaînage .css().slideUp().slideDown() |
| événements | .on("click", f) ; .click(f) ; .trigger("click") ; .on("click", "li", f) |
| AJAX jQuery | $.ajax(url, { type, data, dataType, success, error }) ; $.getJSON(url).done(f).fail(g) ; $(sel).load(url) |
| XMLHttpRequest | x.open("GET", url, true); x.onload = ...; x.send(); ; readyState === 4 && status === 200 |
| fetch | const r = await fetch(url); if (!r.ok) throw ...; const data = await r.json(); |
Crée une page contenant un formulaire (nom du module, note sur 20) et un tableau vide.
Tableau: Le langage
Avec JSONPlaceholder (https://jsonplaceholder.typicode.com/todos?userId=1) :
fetch et async / await, et affiche-les dans une liste ; les tâches terminées (completed: true) sont barrées. Gère l'erreur de chargement. (5 pts)fadeToggle(), et change son texte en conséquence. (3 pts)(a) Donne l'affichage de ce programme (5 points).
let total = 0;
const notes = [14, 8, 17, 11, 6];
for (const n of notes) {
if (n < 10) continue;
total += n;
}
console.log(total);
console.log(notes.filter(n => n >= 10).length);
console.log(typeof total, typeof String(total));
console.log("5" * "2", "5" + "2");
setTimeout(() => console.log("fin"), 0);
console.log(notes.indexOf(17), notes.includes(20));(b) Ce code contient quatre erreurs. Trouve-les et corrige-les (5 points).
const prix = prompt("Prix ?");
const quantite = prompt("Quantité ?");
const total = prix + quantite * 1.2;
const items = document.getElementsByClassName("ligne");
items.style.color = "red";
let regex = "JS";
console.log(regex.test("Cours JS"));Tableau: Le DOM et les événements
Tableau: jQuery et AJAX