mise à jour javascript
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
cdb2a26d92
commit
9c849a5eac
@ -1,5 +1,5 @@
|
||||
|
||||
# 🎓 Support de cours de JavaScript
|
||||
# 🎓 Cours de JavaScript
|
||||
|
||||
## 📘 Théorie de base
|
||||
|
||||
@ -65,7 +65,7 @@ JavaScript a été créé en 1995 par **Brendan Eich** chez Netscape. Il ne faut
|
||||
|
||||
### Exemple d’utilisation de mots-clés
|
||||
|
||||
```js
|
||||
``` { .js .copy }
|
||||
const nom = prompt("Quel est votre nom ?");
|
||||
|
||||
if (nom) {
|
||||
@ -78,12 +78,12 @@ if (nom) {
|
||||
## 1. 🌱 Les bases de JavaScript
|
||||
|
||||
### 1.1 Intégration dans une page HTML
|
||||
```html
|
||||
``` { .html .copy }
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Mon script</title>
|
||||
<script src="script.js" defer></script>
|
||||
<script src="script. { .js .copy }" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello World</h1>
|
||||
@ -99,7 +99,7 @@ Ou directement dans une balise `<script>` :
|
||||
```
|
||||
|
||||
### 1.2 Variables
|
||||
```js
|
||||
``` { .js .copy }
|
||||
let nom = "Alice"; // variable modifiable
|
||||
const PI = 3.14; // constante
|
||||
var age = 30; // ancienne syntaxe, à éviter
|
||||
@ -132,7 +132,8 @@ var age = 30; // ancienne syntaxe, à éviter
|
||||
> ✅ `==` convertit les types avant comparaison.
|
||||
> ✅ `===` compare valeur **et** type sans conversion.
|
||||
|
||||
🎯 **Bonne pratique :** utiliser `===` pour éviter les surprises liées à la coercition de type.
|
||||
!!! tips
|
||||
utiliser `===` pour éviter les surprises liées à la coercition de type.
|
||||
|
||||
|
||||
---
|
||||
@ -140,7 +141,7 @@ var age = 30; // ancienne syntaxe, à éviter
|
||||
## 2. Contrôle de flux
|
||||
|
||||
### 2.1 Conditions
|
||||
```js
|
||||
``` { .js .copy }
|
||||
if (age > 18) {
|
||||
console.log("Majeur");
|
||||
} else {
|
||||
@ -149,12 +150,12 @@ if (age > 18) {
|
||||
```
|
||||
|
||||
Opérateur ternaire :
|
||||
```js
|
||||
``` { .js .copy }
|
||||
let message = (age > 18) ? "Majeur" : "Mineur";
|
||||
```
|
||||
|
||||
### 2.2 Boucles
|
||||
```js
|
||||
``` { .js .copy }
|
||||
for (let i = 0; i < 5; i++) {
|
||||
console.log(i);
|
||||
}
|
||||
@ -169,7 +170,7 @@ while (i < 5) {
|
||||
---
|
||||
|
||||
## 3. Fonctions
|
||||
```js
|
||||
``` { .js .copy }
|
||||
function saluer(nom) {
|
||||
return `Bonjour ${nom}`;
|
||||
}
|
||||
@ -182,14 +183,14 @@ const direBonjour = (nom) => `Bonjour ${nom}`;
|
||||
## 4. Tableaux et objets
|
||||
|
||||
### 4.1 Tableaux
|
||||
```js
|
||||
``` { .js .copy }
|
||||
let fruits = ["pomme", "banane"];
|
||||
fruits.push("kiwi");
|
||||
console.log(fruits[0]); // pomme
|
||||
```
|
||||
|
||||
### 4.2 Objets
|
||||
```js
|
||||
``` { .js .copy }
|
||||
let personne = {
|
||||
nom: "Alice",
|
||||
age: 30,
|
||||
@ -207,17 +208,17 @@ personne.parler();
|
||||
## 5. DOM (Document Object Model)
|
||||
|
||||
### 5.1 Sélection des éléments
|
||||
```js
|
||||
``` { .js .copy }
|
||||
const titre = document.querySelector("h1");
|
||||
```
|
||||
|
||||
### 5.2 Modification du contenu
|
||||
```js
|
||||
``` { .js .copy }
|
||||
titre.textContent = "Nouveau Titre";
|
||||
```
|
||||
|
||||
### 5.3 Événements
|
||||
```js
|
||||
``` { .js .copy }
|
||||
document.querySelector("button").addEventListener("click", () => {
|
||||
alert("Clic !");
|
||||
});
|
||||
@ -231,7 +232,7 @@ HTML :
|
||||
```
|
||||
|
||||
JavaScript :
|
||||
```js
|
||||
``` { .js .copy }
|
||||
let compteur = 0;
|
||||
document.getElementById("incrementer").addEventListener("click", () => {
|
||||
compteur++;
|
||||
@ -244,16 +245,16 @@ document.getElementById("incrementer").addEventListener("click", () => {
|
||||
## 6. Asynchrone et AJAX
|
||||
|
||||
### 6.1 setTimeout / setInterval
|
||||
```js
|
||||
``` { .js .copy }
|
||||
setTimeout(() => {
|
||||
console.log("1 seconde");
|
||||
}, 1000);
|
||||
```
|
||||
|
||||
### 6.2 Promesses
|
||||
```js
|
||||
``` { .js .copy }
|
||||
fetch("https://api.example.com/data")
|
||||
.then(response => response.json())
|
||||
.then(response => response. { .js .copy }on())
|
||||
.then(data => console.log(data))
|
||||
.catch(error => console.error(error));
|
||||
```
|
||||
@ -263,7 +264,7 @@ fetch("https://api.example.com/data")
|
||||
## 7. Concepts avancés
|
||||
|
||||
### 7.1 Closures
|
||||
```js
|
||||
``` { .js .copy }
|
||||
function createCounter() {
|
||||
let count = 0;
|
||||
return () => ++count;
|
||||
@ -274,7 +275,7 @@ console.log(counter()); // 1
|
||||
```
|
||||
|
||||
### 7.2 Classes
|
||||
```js
|
||||
``` { .js .copy }
|
||||
class Animal {
|
||||
constructor(nom) {
|
||||
this.nom = nom;
|
||||
@ -287,22 +288,22 @@ class Animal {
|
||||
```
|
||||
|
||||
### 7.3 Modules (ES6)
|
||||
```js
|
||||
``` { .js .copy }
|
||||
// fichier.js
|
||||
export function addition(a, b) {
|
||||
return a + b;
|
||||
}
|
||||
|
||||
// main.js
|
||||
import { addition } from "./fichier.js";
|
||||
import { addition } from "./fichier. { .js .copy }";
|
||||
```
|
||||
|
||||
### 7.4 Async / Await
|
||||
```js
|
||||
``` { .js .copy }
|
||||
async function getData() {
|
||||
try {
|
||||
const response = await fetch("https://api.example.com/data");
|
||||
const data = await response.json();
|
||||
const data = await response. { .js .copy }on();
|
||||
console.log(data);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
@ -316,5 +317,5 @@ async function getData() {
|
||||
|
||||
- [MDN JavaScript Guide](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide)
|
||||
- [JavaScript.info](https://javascript.info/)
|
||||
- [W3Schools JavaScript](https://www.w3schools.com/js/)
|
||||
- [W3Schools JavaScript](https://www.w3schools.com/ { .js .copy }/)
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user
