Skip to content
GitLab
Commits (3)
  • salim's avatar
    mvc · be0198aa
    salim a écrit
    be0198aa
  • salim's avatar
    JS · 7c4ac4a4
    salim a écrit
    7c4ac4a4
  • salim's avatar
    Add new event handling examples and update index.html reference · fbc601a5
    salim a écrit 
    Introduced additional examples for parent/child DOM traversal and event propagation, including phases like capture and bubbling. Updated index.html to reference the new `event_2.md` file, highlighting expanded content on JavaScript events.
    fbc601a5
Tout étendre Masquer les modifications d'espaces
En ligne Côte à côte
.yarn/releases/yarn-4.4.0.cjs 0 → 100755
Voir le fichier @ fbc601a5
Ce diff est replié.
.yarnrc.yml 0 → 100644
Voir le fichier @ fbc601a5
yarnPath: .yarn/releases/yarn-4.4.0.cjs
nodeLinker: node-modules
img/mvc.svg 0 → 100644
Voir le fichier @ fbc601a5
Ce diff est replié.
index.html
Voir le fichier @ fbc601a5
......@@ -17,17 +17,23 @@
<body>
<div class="reveal">
<div class="slides">
<section data-auto-animate data-markdown="md/php/presentation.md" data-separator="^---$" data-separator-vertical="^\+\+\+$"></section>
<section data-auto-animate data-markdown="md/php/HTML.md" data-separator="^---$" data-separator-vertical="^\+\+\+$"></section>
<section data-auto-animate data-markdown="md/php/php.md" data-separator="^---$" data-separator-vertical="^\+\+\+$"></section>
<section data-auto-animate data-markdown="md/php/tableau.md" data-separator="^---$" data-separator-vertical="^\+\+\+$"></section>
<section data-auto-animate data-markdown="md/php/fonction.md" data-separator="^---$" data-separator-vertical="^\+\+\+$"></section>
<section data-auto-animate data-markdown="md/php/poo.md" data-separator="^---$" data-separator-vertical="^\+\+\+$"></section>
<section data-auto-animate data-markdown="md/php/formulaire.md" data-separator="^---$" data-separator-vertical="^\+\+\+$"></section>
<!-- <section data-auto-animate data-markdown="md/php/presentation.md" data-separator="^-&#45;&#45;$" data-separator-vertical="^\+\+\+$"></section>-->
<!-- <section data-auto-animate data-markdown="md/php/HTML.md" data-separator="^-&#45;&#45;$" data-separator-vertical="^\+\+\+$"></section>-->
<!-- <section data-auto-animate data-markdown="md/php/php.md" data-separator="^-&#45;&#45;$" data-separator-vertical="^\+\+\+$"></section>-->
<!-- <section data-auto-animate data-markdown="md/php/tableau.md" data-separator="^-&#45;&#45;$" data-separator-vertical="^\+\+\+$"></section>-->
<!-- <section data-auto-animate data-markdown="md/php/fonction.md" data-separator="^-&#45;&#45;$" data-separator-vertical="^\+\+\+$"></section>-->
<!-- <section data-auto-animate data-markdown="md/php/poo.md" data-separator="^-&#45;&#45;$" data-separator-vertical="^\+\+\+$"></section>-->
<!-- <section data-auto-animate data-markdown="md/php/formulaire.md" data-separator="^-&#45;&#45;$" data-separator-vertical="^\+\+\+$"></section>-->
<!-- <section data-auto-animate data-markdown="md/php/mvc.md" data-separator="^---$" data-separator-vertical="^\+\+\+$"></section>-->
<!-- <section data-auto-animate data-markdown="md/php/bdd.md" data-separator="^-&#45;&#45;$" data-separator-vertical="^\+\+\+$"></section>-->
<!-- <section data-auto-animate data-markdown="md/php/session.md" data-separator="^-&#45;&#45;$" data-separator-vertical="^\+\+\+$"></section>-->
<!-- <section data-auto-animate data-markdown="md/htmlpresentation.md" data-separator="^-&#45;&#45;$" data-separator-vertical="^\+\+\+$"></section>-->
<!-- <section data-auto-animate data-markdown="md/html/html.md" data-separator="^-&#45;&#45;$" data-separator-vertical="^\+\+\+$"></section>-->
<!-- <section data-auto-animate data-markdown="md/html/css.md" data-separator="^-&#45;&#45;$" data-separator-vertical="^\+\+\+$"></section>-->
<!-- <section data-auto-animate data-markdown="md/html/bootstrap.md" data-separator="^-&#45;&#45;$" data-separator-vertical="^\+\+\+$"></section>-->
<!-- <section data-auto-animate data-markdown="md/js/intro.md" data-separator="^-&#45;&#45;$" data-separator-vertical="^\+\+\+$"></section>-->
<!-- <section data-auto-animate data-markdown="md/js/dom.md" data-separator="^-&#45;&#45;$" data-separator-vertical="^\+\+\+$"></section>-->
<!-- <section data-auto-animate data-markdown="md/js/event.md" data-separator="^-&#45;&#45;$" data-separator-vertical="^\+\+\+$"></section>-->
<section data-auto-animate data-markdown="md/js/event_2.md" data-separator="^---$" data-separator-vertical="^\+\+\+$"></section>
</div>
</div>
......@@ -41,11 +47,16 @@
// - https://revealjs.com/config/
Reveal.initialize({
hash: true,
slideNumber: true,
slideNumber: 'c/t',
showSlideNumber: 'all',
mouseWheel:true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ],
// Activate the scroll view
view: 'scroll',
// Force the scrollbar to remain visible
scrollProgress: true,
});
</script>
</body>
......
md/js-old/dom.md 0 → 100644
Voir le fichier @ fbc601a5
### introduction au DOM
```html
<body>
<div id="myId">
Contenu de mon élément
</div>
</body>
```
```js [1-4|6-12|14-18]
// Accéder à l'élément HTML avec l'id "myId"
const myElement = document.getElementById("myId");
// Affiche l'objet représentant l'élément <div> avec l'id "myId"
console.log(myElement);
// Modifier le contenu de l'élément
myElement.innerHTML = "Nouveau contenu";
// Modifier les styles de l'élément
myElement.style.color = "red";
myElement.style.backgroundColor = "blue";
// Ajouter une classe CSS à l'élément
myElement.classList.add("maClasse");
// Récupérer la valeur d'un attribut HTML
const myAttributeValue = myElement.getAttribute("id");
console.log(myattributeValue); // Affiche "myId"
// Modifier la valeur d'un attribut HTML
myElement.setAttribute("title", "Mon élément");
```
Note:
Cet exemple montre comment utiliser la méthode document.getElementById() pour accéder à un élément HTML en spécifiant son identifiant unique. Une fois l'élément sélectionné, il est possible de modifier son contenu en utilisant la propriété innerHTML, de modifier ses styles en utilisant la propriété style, d'ajouter une classe CSS à l'aide de la propriété classList, de récupérer la valeur d'un attribut HTML à l'aide de la méthode getAttribute(), et de modifier la valeur d'un attribut HTML à l'aide de la méthode setAttribute().
---
### Séléction du DOM
```html
<div>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
</div>
```
```javascript [1-3|5-8|10-12|14-18]
// Sélectionner tous les éléments <p> à l'intérieur de la balise <div>
const paragraphs = document.querySelectorAll("div p");
console.log(paragraphs); // Affiche des éléments <p>
// Modifier le contenu de tous les paragraphes
paragraphs.forEach(function(p) {
p.innerHTML = "Nouveau contenu";
});
// Sélectionner le premier élément <p>
const firstParagraph = document.querySelector("p");
console.log(firstParagraph); // Affiche du premier élément <p>
// Modifier le style de tous les paragraphes
const paragraphs = document.querySelectorAll("p");
paragraphs.forEach(function(p) {
p.style.color = "red";
});
```
Note:
Cet exemple montre comment utiliser la méthode document.querySelectorAll() pour sélectionner tous les éléments correspondant à un sélecteur CSS donné, ici tous les éléments <p> à l'intérieur d'une balise <div>. Il est également possible de sélectionner un seul élément en utilisant la méthode document.querySelector() qui va sélectionner le premier élément correspondant au sélecteur. Il est possible de parcourir les éléments sélectionnés avec une boucle forEach pour effectuer des actions sur chacun d'entre eux, comme ici, changer le contenu ou le style.
Ces méthodes sont très utiles pour sélectionner des éléments de manière efficace et précise, sans avoir à parcourir tous les éléments de la page. Il est important de noter que ces méthodes ne sélectionnent que les éléments qui existent dans le DOM au moment où elles sont appelées, il faut donc s'assurer que les éléments que l'on souhaite sélectionner sont bien présents dans le DOM avant de les manipuler.
---
### Parcours du DOM
```html [12-18|23-32|34-38]
<!DOCTYPE html>
<html>
<head>
<title>Exemple de parcours du DOM avec des enfants</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="parent">
<p>Ceci est un paragraphe.</p>
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
<span>Ceci est un span.</span>
</div>
<script>
// Récupère l'élément parent
var parent = document.getElementById("parent")
// Parcours tous les enfants de l'élément parent et ajoute une classe
for (var i = 0; i < parent.childNodes.length; i++) {
var child = parent.childNodes[i]
if (child.nodeType === 1) { // Vérifie que l'enfant est un élément HTML
child.classList.add("highlight")
}
}
for (var i = 0; i < parent.children.length; i++) {
var child = parent.children[i]
child.classList.add("highlight")
}
}
</script>
</body>
</html>
```
---
## Création d'un élément
```javascript
// Création d'un élément
const newElement = document.createElement('div')
// Modification de ses attributs et contenu
newElement.innerText = 'Nouvel élément ajouté'
newElement.classList.add('nouvelle-classe')
// Ajout de l'élément au DOM
document.body.appendChild(newElement)
```
---
## Création d'un élément
```html
<div>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
</div>
```
```javascript [2|4-6|8-10]
// Création d'un élément
const div = document.querySelector("p")
const p4 = document.createElement('p')
p4.innerText = 'Paragraphe 4'
div.insertAdjacentElement('beforeend',p4)
const p4 = document.createElement('p')
p4.innerText = 'Paragraphe 0'
div.insertAdjacentElement('afterbegin',p0)
```
---
## Création d'un élément
```html
<div>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
</div>
```
```javascript [2|4-6|8-10]
// Création d'un élément
const div1 = document.querySelector("div")
const div0 = document.createElement('div')
div1.insertAdjacentElement('beforebegin',div0)
const div2 = document.createElement('div')
div1.insertAdjacentElement('afterend',div2)
```
---
## Gestion des tableaux
```html
<table id="myTable">
<tr> <th>Header 1</th> <th>Header 2</th> </tr>
<tr> <td>Value 1</td> <td>Value 2</td> </tr>
<tr> <td>Value 3</td> <td>Value 4</td> </tr>
</table>
```
```javascript [1-2|4-6|8-13|15-22]
const table = document.getElementById("myTable");
console.log(table); // Affiche l'objet <table>
// Accéder aux lignes du tableau
const rows = table.rows;
console.log(rows); // Affiche un objet HTMLCollection contenant les lignes <tr>
// Accéder à une cellule spécifique en utilisant les propriétés row et cell
const cell = table.rows[1].cells[1];
console.log(cell); // Affiche l'objet représentant la cellule <td> "Value 2"
// Modifier le contenu d'une cellule
cell.innerHTML = "Nouvelle valeur";
//Ajouter une ligne au tableau
const newRow = table.insertRow(-1);
const newCell1 = newRow.insertCell(0);
newCell1.innerHTML = "Value 5";
const newCell2 = newRow.insertCell(1);
newCell2.innerHTML = "Value 6";
```
Note:
Cet exemple montre comment utiliser la méthode document.querySelectorAll() pour sélectionner tous les éléments correspondant à un sélecteur CSS donné, ici tous les éléments <p> à l'intérieur d'une balise <div>. Il est également possible de sélectionner un seul élément en utilisant la méthode document.querySelector() qui va sélectionner le premier élément correspondant au sélecteur. Il est possible de parcourir les éléments sélectionnés avec une boucle forEach pour effectuer des actions sur chacun d'entre eux, comme ici, changer le contenu ou le style.
Ces méthodes sont très utiles pour sélectionner des éléments de manière efficace et précise, sans avoir à parcourir tous les éléments de la page. Il est important de noter que ces méthodes ne sélectionnent que les éléments qui existent dans le DOM au moment où elles sont appelées, il faut donc s'assurer que les éléments que l'on souhaite sélectionner sont bien présents dans le DOM avant de les manipuler.
md/js-old/event.md 0 → 100644
Voir le fichier @ fbc601a5
### Gestion des evenememts
```html
<button id="btn">Cliquez ici</button>
<script>
const btn = document.getElementById("btn");
// Ajout d'un listener
btn.addEventListener("click", function(event) {
console.log("Le lien a été cliqué !");
});
</script>
```
---
### Gestion des evenememts
```html
<button id="btn">Cliquez ici</button>
<script>
const btn = document.getElementById("btn");
// Ajout d'un listener
btn.addEventListener("click", function(event) {
event.target.innerText="Vous avez cliqué"
event.target.disabled = true
});
</script>
```
---
### Gestion des evenememts
```html
<button id="btn1">Cliquez ici</button>
<button id="btn2">Ou ici</button>
<script>
function clickEvent(event) {
event.target.innerText="Vous avez cliqué"
event.target.disabled = true
}
const btn1 = document.getElementById("btn1")
const btn2 = document.getElementById("btn2")
btn1.addEventListener("click",clickEvent);
btn2.addEventListener("click",clickEvent);
</script>
```
---
### Gestion des evenememts
```html[1-30|1-7|10-12|14-24|26-28]
<div id="outer" style="border: 2px solid red; padding: 20px;">
<div id="middle" style="border: 2px solid green; padding: 20px;">
<div id="inner" style="border: 2px solid blue; padding: 20px;">
Cliquez ici!
</div>
</div>
</div>
<script>
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');
outer.addEventListener('click', function() {
console.log('outer (Capture)');
}, true);
middle.addEventListener('click', function() {
console.log('middle (Capture)');
}, true);
inner.addEventListener('click', function() {
console.log('inner (Capture)');
}, true);
/**
Clic sur l'élément outer (Capture)
Clic sur l'élément middle (Capture)
Clic sur l'élément inner (Capture)
*/
</script>
```
---
### Gestion des evenememts
```html[1-30|1-7|10-12|14-25|27-28]
<div id="outer" style="border: 2px solid red; padding: 20px;">
<div id="middle" style="border: 2px solid green; padding: 20px;">
<div id="inner" style="border: 2px solid blue; padding: 20px;">
Cliquez ici!
</div>
</div>
</div>
<script>
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');
outer.addEventListener('click', function() {
console.log('outer (Capture)');
}, true);
middle.addEventListener('click', function(event) {
console.log('middle (Capture)');
event.preventDefault();
}, true);
inner.addEventListener('click', function() {
console.log('inner (Capture)');
}, true);
/**
Clic sur l'élément outer (Capture)
Clic sur l'élément middle (Capture)
*/
</script>
```
---
### Gestion des evenememts
```html[1-30|1-7|10-12|14-24|26-28]
<div id="outer">
<div id="middle">
<div id="inner">
Cliquez ici!
</div>
</div>
</div>
<script>
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');
outer.addEventListener('click', function() {
console.log('outer (Propagation)');
}, true);
middle.addEventListener('click', function() {
console.log('middle (Propagation)');
}, true);
inner.addEventListener('click', function() {
console.log('inner (Propagation)');
}, true);
/**
Clic sur l'élément outer (Propagation)
Clic sur l'élément middle (Propagation)
Clic sur l'élément inner (Propagation)
*/
</script>
```
---
### Gestion des evenememts
```html [1-12|14-27]
<form id="myForm">
<label for="name">Nom :</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email :</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message :</label>
<textarea id="message" name="message"></textarea><br><br>
<button type="submit">Envoyer</button>
</form>
<script>
// Exemple de code JavaScript pour la gestion de l'événement de soumission du formulaire
var myForm = document.getElementById("myForm");
function submitCallback(event) {
event.preventDefault(); // Empêche le formulaire de se soumettre
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var message = document.getElementById("message").value;
console.log("Nom : " + name);
console.log("Email : " + email);
console.log("Message : " + message);
}
myForm.addEventListener("submit", submitCallback);
</script>
```
---
| Type d'Événement | Rôle |
|-----------------------|---------------------------------------------------------------------|
| `click` | cliqué avec la souris. |
| `mousedown`/`mouseup` | bouton de la souris est enfoncé /relâché |
| `mousemove` | mouvement de souris est détecté. |
| `keydown` / `keyup` | touche du clavier est enfoncée / relâchée. |
| `keypress` | touche du clavier est enfoncée et libérée. |
---
| Type d'Événement | Rôle |
|-----------------------|---------------------------------------------------------------------|
| `change` | valeur d'un élément de formulaire change. |
| `submit` | formulaire est soumis. |
| `focus` | élément reçoit le focus. |
| `blur` | élément perd le focus. |
| `load` | la page ou une ressource est entièrement chargée. |
md/js/dom.md
Voir le fichier @ fbc601a5
### introduction au DOM
```html
# Le DOM
## Document Object Model
---
## Recheche par id
```html []
<body>
<div id="myId">
Contenu de mon élément
</div>
<script>
// Sélectionner un élément par son ID (unique)
const element =
document.getElementById("myId");
element.innerHTML = 'Nouveau Contenu de mon élément'
</script>
</body>
```
```js [1-4|6-12|14-18]
// Accéder à l'élément HTML avec l'id "myId"
const myElement = document.getElementById("myId");
// Affiche l'objet représentant l'élément <div> avec l'id "myId"
console.log(myElement);
// Modifier le contenu de l'élément
myElement.innerHTML = "Nouveau contenu";
// Modifier les styles de l'élément
myElement.style.color = "red";
myElement.style.backgroundColor = "blue";
// Ajouter une classe CSS à l'élément
myElement.classList.add("maClasse");
// Récupérer la valeur d'un attribut HTML
const myAttributeValue = myElement.getAttribute("id");
console.log(myattributeValue); // Affiche "myId"
// Modifier la valeur d'un attribut HTML
myElement.setAttribute("title", "Mon élément");
```
Note:
Cet exemple montre comment utiliser la méthode document.getElementById() pour accéder à un élément HTML en spécifiant son identifiant unique. Une fois l'élément sélectionné, il est possible de modifier son contenu en utilisant la propriété innerHTML, de modifier ses styles en utilisant la propriété style, d'ajouter une classe CSS à l'aide de la propriété classList, de récupérer la valeur d'un attribut HTML à l'aide de la méthode getAttribute(), et de modifier la valeur d'un attribut HTML à l'aide de la méthode setAttribute().
---
### Séléction du DOM
```html
<div>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
</div>
```
```javascript [1-3|5-8|10-12|14-18]
// Sélectionner tous les éléments <p> à l'intérieur de la balise <div>
const paragraphs = document.querySelectorAll("div p");
console.log(paragraphs); // Affiche des éléments <p>
// Modifier le contenu de tous les paragraphes
paragraphs.forEach(function(p) {
p.innerHTML = "Nouveau contenu";
});
// Sélectionner le premier élément <p>
const firstParagraph = document.querySelector("p");
console.log(firstParagraph); // Affiche du premier élément <p>
// Modifier le style de tous les paragraphes
const paragraphs = document.querySelectorAll("p");
paragraphs.forEach(function(p) {
p.style.color = "red";
});
## Recheche par class
```html []
<body>
<ul>
<li class="titre">a</li>
<li class="titre">b</li>
<li class="titre">c</li>
<li class="titre">d</li>
</ul>
<script>
// Sélectionner un élément par son ID (unique)
const elements =
document.getElementsByClassName("titre");
elements[0].innerHTML = 'Nouveau Contenu de mon élément'
</script>
</body>
```
Note:
Cet exemple montre comment utiliser la méthode document.querySelectorAll() pour sélectionner tous les éléments correspondant à un sélecteur CSS donné, ici tous les éléments <p> à l'intérieur d'une balise <div>. Il est également possible de sélectionner un seul élément en utilisant la méthode document.querySelector() qui va sélectionner le premier élément correspondant au sélecteur. Il est possible de parcourir les éléments sélectionnés avec une boucle forEach pour effectuer des actions sur chacun d'entre eux, comme ici, changer le contenu ou le style.
Ces méthodes sont très utiles pour sélectionner des éléments de manière efficace et précise, sans avoir à parcourir tous les éléments de la page. Il est important de noter que ces méthodes ne sélectionnent que les éléments qui existent dans le DOM au moment où elles sont appelées, il faut donc s'assurer que les éléments que l'on souhaite sélectionner sont bien présents dans le DOM avant de les manipuler.
---
### Parcours du DOM
```html [12-18|23-32|34-38]
<!DOCTYPE html>
<html>
<head>
<title>Exemple de parcours du DOM avec des enfants</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
## Recheche par class
```html []
<body>
<div id="parent">
<p>Ceci est un paragraphe.</p>
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
<span>Ceci est un span.</span>
</div>
<script>
// Récupère l'élément parent
var parent = document.getElementById("parent")
// Parcours tous les enfants de l'élément parent et ajoute une classe
for (var i = 0; i < parent.childNodes.length; i++) {
var child = parent.childNodes[i]
if (child.nodeType === 1) { // Vérifie que l'enfant est un élément HTML
child.classList.add("highlight")
}
}
for (var i = 0; i < parent.children.length; i++) {
var child = parent.children[i]
child.classList.add("highlight")
}
}
</script>
<div class="titre">
Contenu de mon élément
</div>
<script>
// Sélectionner un élément par sa class
const elements =
document.getElementsByTagName("div");
elements[0].innerHTML = 'Nouveau Contenu de mon élément'
</script>
</body>
</html>
```
---
## Création d'un élément
```javascript
// Création d'un élément
const newElement = document.createElement('div')
// Modification de ses attributs et contenu
newElement.innerText = 'Nouvel élément ajouté'
newElement.classList.add('nouvelle-classe')
// Ajout de l'élément au DOM
document.body.appendChild(newElement)
## Recheche comme en css
```html []
<body>
<div class="titre">
Contenu de mon élément
</div>
<script>
// Sélectionner le premier élément correspondant à un sélecteur CSS
const firstElement =
document.querySelector(".titre");
// Sélectionner tous les éléments correspondant à un sélecteur CSS
const allElements =
document.querySelectorAll(".titre");
</script>
</body>
```
---
## Création d'un élément
```html
<div>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
</div>
```
## Manipulation des éléments
```javascript [1-15|1-2|4-5|7-8|10-11|13-16]
// Modifier le contenu textuel
element.textContent = "Nouveau contenu"; // Remplace le texte de l&apos;élément
```javascript [2|4-6|8-10]
// Création d'un élément
const div = document.querySelector("p")
// Modifier un attribut (par exemple, une classe CSS)
element.setAttribute("required", true); // Ajoute l&apos;attribut &apos;required&apos; et le définit à true
const p4 = document.createElement('p')
p4.innerText = 'Paragraphe 4'
div.insertAdjacentElement('beforeend',p4)
// Ajouter du style en ligne
element.style.color = "red"; // Applique une couleur rouge au texte de l&apos;élément
const p4 = document.createElement('p')
p4.innerText = 'Paragraphe 0'
div.insertAdjacentElement('afterbegin',p0)
// Remplace tout le contenu de l&apos;élément par HTML
element.innerHTML = "<strong>Ceci est du texte avec des balises HTML.</strong>"
// Modifier la classe de l&apos;élément
element.classList.add("nouvelleClasse"); // Ajoute une nouvelle classe à l&apos;élément
element.classList.remove("ancienneClasse"); // Supprime une classe de l&apos;élément
element.classList.toggle("toggleClasse"); // Bascule entre l&apos;ajout et la suppression de la classe
```
---
## Création d'un élément
```html
<div>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
</div>
```
```javascript [2|4-6|8-10]
// Création d'un élément
const div1 = document.querySelector("div")
const div0 = document.createElement('div')
div1.insertAdjacentElement('beforebegin',div0)
## Création et ajout des éléments a la fin
```javascript
// Crée un nouvel élément <p>
const newElement = document.createElement("p");
const div2 = document.createElement('div')
div1.insertAdjacentElement('afterend',div2)
// Ajoute du texte à cet élément
newElement.textContent = "Ceci est un paragraphe.";
// Ajoute cet élément à la fin du body de la page
document.body.appendChild(newElement);
```
---
## Gestion des tableaux
```html
<table id="myTable">
<tr> <th>Header 1</th> <th>Header 2</th> </tr>
<tr> <td>Value 1</td> <td>Value 2</td> </tr>
<tr> <td>Value 3</td> <td>Value 4</td> </tr>
</table>
```
```javascript [1-2|4-6|8-13|15-22]
const table = document.getElementById("myTable");
console.log(table); // Affiche l'objet <table>
// Accéder aux lignes du tableau
const rows = table.rows;
console.log(rows); // Affiche un objet HTMLCollection contenant les lignes <tr>
## Création et ajout des éléments au début
```javascript
// Crée un nouvel élément <p>
const anotherElement = document.createElement("p");
// Accéder à une cellule spécifique en utilisant les propriétés row et cell
const cell = table.rows[1].cells[1];
console.log(cell); // Affiche l'objet représentant la cellule <td> "Value 2"
// Ajoute du texte à cet élément
anotherElement.textContent = "Ceci est un paragraphe au début.";
// Modifier le contenu d'une cellule
cell.innerHTML = "Nouvelle valeur";
// Ajoute cet élément au début du body
document.body.prepend(anotherElement);
```
---
## Création et ajout des éléments avant un autre
```javascript
// Sélectionner un élément existant
const referenceElement = document.getElementById("someId");
//Ajouter une ligne au tableau
const newRow = table.insertRow(-1);
// Crée un nouvel élément <p>
const newElementBefore = document.createElement("p");
const newCell1 = newRow.insertCell(0);
newCell1.innerHTML = "Value 5";
// Ajoute du texte à cet élément
newElementBefore.textContent = "Ceci est un paragraphe avant un autre élément.";
const newCell2 = newRow.insertCell(1);
newCell2.innerHTML = "Value 6";
// Ajoute cet élément avant le référencé
document.body.insertBefore(newElementBefore, referenceElement);
```
Note:
Cet exemple montre comment utiliser la méthode document.querySelectorAll() pour sélectionner tous les éléments correspondant à un sélecteur CSS donné, ici tous les éléments <p> à l'intérieur d'une balise <div>. Il est également possible de sélectionner un seul élément en utilisant la méthode document.querySelector() qui va sélectionner le premier élément correspondant au sélecteur. Il est possible de parcourir les éléments sélectionnés avec une boucle forEach pour effectuer des actions sur chacun d'entre eux, comme ici, changer le contenu ou le style.
Ces méthodes sont très utiles pour sélectionner des éléments de manière efficace et précise, sans avoir à parcourir tous les éléments de la page. Il est important de noter que ces méthodes ne sélectionnent que les éléments qui existent dans le DOM au moment où elles sont appelées, il faut donc s'assurer que les éléments que l'on souhaite sélectionner sont bien présents dans le DOM avant de les manipuler.
---
##
md/js/event.md
Voir le fichier @ fbc601a5
# Fonction et événements
---
### Les fonctions
```javascript []
// Définir une fonction classique
const noms = ["Alice", "Bob", "Charlie"];
function saluer(nom) {
return `Bonjour, ${nom} !`;
}
const messages = noms.map(saluer);
console.log(messages);
// ["Bonjour, Alice!", "Bonjour, Bob!", "Bonjour, Charlie!"]
```
---
### Les fonctions
```javascript []
// Fonction anonyme utilisée avec map
const noms = ["Alice", "Bob", "Charlie"];
const messages = noms.map(function(nom) {
return `Bonjour, ${nom} !`;
});
console.log(messages);
// ["Bonjour, Alice!", "Bonjour, Bob!", "Bonjour, Charlie!"]
```
---
### Les fonctions
```javascript []
// Définir une fonction classique
const noms = ["Alice", "Bob", "Charlie"];
const messages = noms.map((nom) => {
return `Bonjour, ${nom} !`;
});
console.log(messages);
// ["Bonjour, Alice!", "Bonjour, Bob!", "Bonjour, Charlie!"]
```
---
### Les fonctions
```javascript []
// Définir une fonction classique
const noms = ["Alice", "Bob", "Charlie"];
const messages = noms.map(nom => `Bonjour, ${nom} !`);
console.log(messages);
// ["Bonjour, Alice!", "Bonjour, Bob!", "Bonjour, Charlie!"]
```
---
### Gestion des evenememts
```html
```html []
<button id="btn">Cliquez ici</button>
<script>
......@@ -12,7 +62,7 @@
```
---
### Gestion des evenememts
```html
```html []
<button id="btn">Cliquez ici</button>
<script>
......@@ -26,7 +76,7 @@
```
---
### Gestion des evenememts
```html
```html []
<button id="btn1">Cliquez ici</button>
<button id="btn2">Ou ici</button>
......@@ -43,159 +93,3 @@
btn2.addEventListener("click",clickEvent);
</script>
```
---
### Gestion des evenememts
```html[1-30|1-7|10-12|14-24|26-28]
<div id="outer" style="border: 2px solid red; padding: 20px;">
<div id="middle" style="border: 2px solid green; padding: 20px;">
<div id="inner" style="border: 2px solid blue; padding: 20px;">
Cliquez ici!
</div>
</div>
</div>
<script>
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');
outer.addEventListener('click', function() {
console.log('outer (Capture)');
}, true);
middle.addEventListener('click', function() {
console.log('middle (Capture)');
}, true);
inner.addEventListener('click', function() {
console.log('inner (Capture)');
}, true);
/**
Clic sur l'élément outer (Capture)
Clic sur l'élément middle (Capture)
Clic sur l'élément inner (Capture)
*/
</script>
```
---
### Gestion des evenememts
```html[1-30|1-7|10-12|14-25|27-28]
<div id="outer" style="border: 2px solid red; padding: 20px;">
<div id="middle" style="border: 2px solid green; padding: 20px;">
<div id="inner" style="border: 2px solid blue; padding: 20px;">
Cliquez ici!
</div>
</div>
</div>
<script>
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');
outer.addEventListener('click', function() {
console.log('outer (Capture)');
}, true);
middle.addEventListener('click', function(event) {
console.log('middle (Capture)');
event.preventDefault();
}, true);
inner.addEventListener('click', function() {
console.log('inner (Capture)');
}, true);
/**
Clic sur l'élément outer (Capture)
Clic sur l'élément middle (Capture)
*/
</script>
```
---
### Gestion des evenememts
```html[1-30|1-7|10-12|14-24|26-28]
<div id="outer">
<div id="middle">
<div id="inner">
Cliquez ici!
</div>
</div>
</div>
<script>
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');
outer.addEventListener('click', function() {
console.log('outer (Propagation)');
}, true);
middle.addEventListener('click', function() {
console.log('middle (Propagation)');
}, true);
inner.addEventListener('click', function() {
console.log('inner (Propagation)');
}, true);
/**
Clic sur l'élément outer (Propagation)
Clic sur l'élément middle (Propagation)
Clic sur l'élément inner (Propagation)
*/
</script>
```
---
### Gestion des evenememts
```html [1-12|14-27]
<form id="myForm">
<label for="name">Nom :</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email :</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message :</label>
<textarea id="message" name="message"></textarea><br><br>
<button type="submit">Envoyer</button>
</form>
<script>
// Exemple de code JavaScript pour la gestion de l'événement de soumission du formulaire
var myForm = document.getElementById("myForm");
function submitCallback(event) {
event.preventDefault(); // Empêche le formulaire de se soumettre
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var message = document.getElementById("message").value;
console.log("Nom : " + name);
console.log("Email : " + email);
console.log("Message : " + message);
}
myForm.addEventListener("submit", submitCallback);
</script>
```
---
| Type d'Événement | Rôle |
|-----------------------|---------------------------------------------------------------------|
| `click` | cliqué avec la souris. |
| `mousedown`/`mouseup` | bouton de la souris est enfoncé /relâché |
| `mousemove` | mouvement de souris est détecté. |
| `keydown` / `keyup` | touche du clavier est enfoncée / relâchée. |
| `keypress` | touche du clavier est enfoncée et libérée. |
---
| Type d'Événement | Rôle |
|-----------------------|---------------------------------------------------------------------|
| `change` | valeur d'un élément de formulaire change. |
| `submit` | formulaire est soumis. |
| `focus` | élément reçoit le focus. |
| `blur` | élément perd le focus. |
| `load` | la page ou une ressource est entièrement chargée. |
md/js/event_2.md 0 → 100644
Voir le fichier @ fbc601a5
# Événements et parcour
---
### Parcours Père/Fils dans le DOM
```html [8-11|13-19]
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Parcours Père/Fils</title>
</head>
<body>
<div id="parent">
<div id="child">Element enfant</div>
</div>
<script>
const child = document.getElementById("child");
// Trouver l'élément parent le plus proche
const parentDiv = child.parentElement
console.log("Parent <div> trouvé : ", parentDiv);
console.log("enfants du parent trouvé : ", parentDiv.children);
</script>
</body>
</html>
```
---
### Parcours Père/Fils dans le DOM
```html [8-14|17-21]
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Parcours Père/Fils</title>
</head>
<body>
<div id="parent">
<div>
<ul>
<li id="child">Lorem ipsum</li>
</ul>
</div>
</div>
<script>
const child = document.getElementById("child");
// Trouver l'élément parent le plus proche
const parentDiv = closest('#parent')
console.log("Parent <div> trouvé : ", parentDiv);
</script>
</body>
</html>
```
---
### La propagation par défaut
```html []
<a id="link" href="cour.salimkhraimeche.fr">Le cours de JS</a>
<script>
const link = document.getElementsBy('link');
// Arrêt de propagation sur l'enfant
link.addEventListener("click", (event) => {
console.log("Clic sur le lien");
event.preventDefault(); // Arrête la propagation ici
});
parent.addEventListener("click", () => console.log("Clic sur le parent"));
</script>
```
---
### La propagation
```html []
<div id="parent" style="width: 200px; height: 200px; background-color: lightblue;">
<button id="child">Cliquez sur moi</button>
</div>
<script>
const parent = document.getElementById("parent");
const child = document.getElementById("child");
// Ajout de gestionnaires d'événements
parent.addEventListener("click", () => console.log("Clic sur le parent (bouillonnement)"));
child.addEventListener("click", () => console.log("Clic sur l'enfant"));
// Résultat en cliquant sur l'enfant :
// - "Clic sur l'enfant"
// - "Clic sur le parent (bouillonnement)"
</script>
```
---
### La propagation
```html []
<div id="parent" style="width: 200px; height: 200px; background-color: lightblue;">
<button id="child">Cliquez sur moi</button>
</div>
<script>
const parent = document.getElementById("parent");
const child = document.getElementById("child");
// Phase de capture
parent.addEventListener("click", () => console.log("Clic capturé sur le parent"), true);
child.addEventListener("click", () => console.log("Clic capturé sur l'enfant"), true);
// Résultat en cliquant sur l'enfant :
// - "Clic capturé sur le parent" (Phase de capture)
// - "Clic capturé sur l'enfant" (Phase de capture)
// - "Clic sur l'enfant" (Phase de cible)
// - "Clic sur le parent (bouillonnement)" (Phase de bouillonnement)
</script>
```
---
md/js/intro.md 0 → 100644
Voir le fichier @ fbc601a5
# Introduction au JavaScript
---
## Structure d'une page HTML avec JavaScript
```html[1-15|9-11|13]
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META -->
</head>
<body>
<h1>Ma première page JavaScript</h1>
<!-- Ajouter JavaScript directement -->
<script>
console.log("Bonjour depuis le script intégré !");
</script>
<!-- Lien vers un fichier JS -->
<script src="script.js"></script>
</body>
</html>
```
---
## Déclaration des variables
#### Déclaration avec const
```javascript []
const pi = 3.14;
console.log(pi); // 3.14
// Exemple de modification d'un tableau avec const
const arr = [1, 2, 3];
arr.push(4); // Ok, modification du contenu
console.log(arr); // [1, 2, 3, 4]
```
---
## Déclaration des variables
#### Déclaration avec let
```javascript []
let age = 25;
age = 26; // Ok
console.log(age); // 26
```
---
## Déclaration des variables
#### Déclaration avec var
```javascript []
// var : ancien mot-clé, à ne plus utiliser, peut avoir des fonctionnements étranges
var name = "Alice";
name = "Bob"; // Ok
console.log(name); // Bob
```
---
## Les types de données
```javascript []
// Chaîne de caractères
const message = "Bonjour !";
// Nombre
const age = 30;
// Booléen
const isStudent = true;
// Tableau
const fruits = ["pomme", "banane", "cerise"];
```
---
## Les types de données
```javascript []
// Objet
const utilisateur = {
nom: "Alice",
age: 30,
hobbies: ["lecture", "voyage", "cuisine"],
adresse: {
rue: "123 Rue Exemple",
ville: "Paris",
codePostal: "75001"
}
}
console.log(utilisateur.hobbies[0]); // Affiche "lecture"
console.log(utilisateur.adresse.ville); // Affiche "Paris"
```
---
## Afficher des informations dans la console
```javascript []
console.log("Bonjour, monde !");
console.log("Age :", age);
console.error("/!\\ Une erreur est survenue /!\\");
console.table(fruits);
```
---
## Boucles et itérations
#### Parcourir un tableau avec for
```javascript []
const fruits = ["pomme", "banane", "cerise"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]); // Affiche chaque fruit du tableau
}
for (let fruit of fruits) {
console.log(fruit); // Affiche chaque fruit du tableau
}
```
#### Parcourir un tableau avec forEach
```javascript []
fruits.forEach((fruit) => {
console.log(fruit); // Affiche chaque fruit du tableau
});
```
---
## Boucles et itérations
#### Parcourir un objet
```javascript []
const personne = { nom: "Alice", age: 25 };
for (let key in personne) {
console.log(key, ":", personne[key]);
}
Object.keys(personne).forEach(key => {
console.log(key, ":", personne[key]);
});
```
md/php/bdd.md 0 → 100644
Voir le fichier @ fbc601a5
# Base de données avec PHP
---
<img src="../../img/mvc.svg" alt="Logo Wyzen" style="margin-top:-45px">
---
## Les Repository
Appelé par les services, ils ont comme rôle de faire le lien entre la source de données et l'application.
---
## Le constructeur du Repository
### le Pattern Singleton
```php
<?php
require_once '../app/core/Repository.php';
class CategoryRepository
{
private $pdo;
public function __construct()
{
$this->pdo = Repository::getInstance()->getPDO();
}
}
```
---
## Le constructeur du Repository
### le Pattern Singleton
```php
<?php
require_once '../config/config.php';
class Repository {
private static $instance = null; // Instance unique de la classe
protected $pdo;
// Le constructeur est maintenant privé pour empêcher une instanciation directe
private function __construct() {
$this->pdo = $this->getDatabaseConnection();
}
// Méthode pour obtenir l'instance unique de la classe (Singleton)
public static function getInstance() {
if (self::$instance === null) {
self::$instance = new Repository();
}
return self::$instance;
}
// Fonction pour se connecter à la base de données
protected function getDatabaseConnection() {
$dsn = 'pgsql:host=' . DB_HOST . ';port=' . DB_PORT . ';dbname=' . DB_NAME;
try {
$pdo = new PDO($dsn, DB_USER, DB_PASS);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // Mode d'erreur
return $pdo;
} catch (PDOException $e) {
die('Erreur de connexion : ' . $e->getMessage());
}
}
// Méthode pour obtenir la connexion PDO
public function getPDO() {
return $this->pdo;
}
// Empêche le clonage de l'objet
private function __clone() {}
}
```
---
## Execution d'une requête
```php
public function findAll(): array
{
$stmt = $this->pdo->query("SELECT * FROM category");
$categories = [];
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$categories[] = $this->createCategoryFromRow($row);
}
return $categories;
}
```
---
## Construction de l'objet
```php
private function createCategoryFromRow(array $row): Category
{
return new Category(
(int) $row['id'],
$row['name']
);
}
```
---
## Execution d'une requête avec des paramètres
```php
public function findById(int $id): ?Category
{
$stmt = $this->pdo->prepare("SELECT * FROM category WHERE id = :id");
$stmt->execute(['id' => $id]);
$row = $stmt->fetch(PDO::FETCH_ASSOC);
if ($row) {
return $this->createCategoryFromRow($row);
}
return null;
}
```
---
## Pourquoi utiliser des requêtes preparé ?
```php
$login = 'admin';
$password = "' OR 1=1";
$sql = "SELECT id, nom, email
FROM utilisateurs
WHERE login = '" . $login . "' AND password = '" . $password . "'";
```
---
## Pourquoi utiliser des requêtes preparé ?
```sql
SELECT id, nom, email
FROM utilisateurs
WHERE login = 'admin' AND password = '' OR 1=1;
```