corrections de presentation
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
3daeea726d
commit
47bdd2fda3
@ -28,7 +28,7 @@ JavaScript a été créé en 1995 par **Brendan Eich** chez Netscape. Il ne faut
|
|||||||
### 🔑 Mots-clés courants
|
### 🔑 Mots-clés courants
|
||||||
|
|
||||||
| Mot-clé | Description |
|
| Mot-clé | Description |
|
||||||
|-------------|-------------|
|
|-------------|---------------------------------------------------------------|
|
||||||
| `var` | Déclare une variable (ancienne méthode, portée fonctionnelle) |
|
| `var` | Déclare une variable (ancienne méthode, portée fonctionnelle) |
|
||||||
| `let` | Déclare une variable à portée de bloc |
|
| `let` | Déclare une variable à portée de bloc |
|
||||||
| `const` | Déclare une constante à portée de bloc |
|
| `const` | Déclare une constante à portée de bloc |
|
||||||
@ -49,7 +49,7 @@ JavaScript a été créé en 1995 par **Brendan Eich** chez Netscape. Il ne faut
|
|||||||
### 🔧 Fonctions intégrées utiles
|
### 🔧 Fonctions intégrées utiles
|
||||||
|
|
||||||
| Fonction | Description |
|
| Fonction | Description |
|
||||||
|------------------|-------------|
|
|------------------|-----------------------------------------|
|
||||||
| `alert()` | Affiche une boîte de dialogue d’alerte |
|
| `alert()` | Affiche une boîte de dialogue d’alerte |
|
||||||
| `console.log()` | Affiche un message dans la console |
|
| `console.log()` | Affiche un message dans la console |
|
||||||
| `prompt()` | Demande une saisie utilisateur |
|
| `prompt()` | Demande une saisie utilisateur |
|
||||||
@ -78,6 +78,7 @@ if (nom) {
|
|||||||
## 🌱 Les bases de JavaScript
|
## 🌱 Les bases de JavaScript
|
||||||
|
|
||||||
### Intégration dans une page HTML
|
### Intégration dans une page HTML
|
||||||
|
|
||||||
``` { .html .copy }
|
``` { .html .copy }
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
@ -99,6 +100,7 @@ Ou directement dans une balise `<script>` :
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Variables
|
### Variables
|
||||||
|
|
||||||
``` { .js .copy }
|
``` { .js .copy }
|
||||||
let nom = "Alice"; // variable modifiable
|
let nom = "Alice"; // variable modifiable
|
||||||
const PI = 3.14; // constante
|
const PI = 3.14; // constante
|
||||||
@ -106,6 +108,7 @@ var age = 30; // ancienne syntaxe, à éviter
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Types de données
|
### Types de données
|
||||||
|
|
||||||
- `string` : `"Bonjour"`
|
- `string` : `"Bonjour"`
|
||||||
- `number` : `42`, `3.14`
|
- `number` : `42`, `3.14`
|
||||||
- `boolean` : `true`, `false`
|
- `boolean` : `true`, `false`
|
||||||
@ -114,9 +117,10 @@ var age = 30; // ancienne syntaxe, à éviter
|
|||||||
- `object`, `array`, `function`
|
- `object`, `array`, `function`
|
||||||
|
|
||||||
### Opérateurs
|
### Opérateurs
|
||||||
|
|
||||||
- Arithmétiques : `+`, `-`, `*`, `/`, `%`
|
- Arithmétiques : `+`, `-`, `*`, `/`, `%`
|
||||||
- Comparaison : `==`, `===`, `!=`, `!==`, `<`, `>`, `<=`, `>=`
|
- Comparaison : `==`, `===`, `!=`, `!==`, `<`, `>`, `<=`, `>=`
|
||||||
- Logiques : `&&`, `||`, `!`
|
- Logiques : `&&`, `||`, `!` // et, ou et inverse
|
||||||
|
|
||||||
#### 🔍 `==` vs `===` en JavaScript
|
#### 🔍 `==` vs `===` en JavaScript
|
||||||
|
|
||||||
@ -141,6 +145,7 @@ var age = 30; // ancienne syntaxe, à éviter
|
|||||||
## Contrôle de flux
|
## Contrôle de flux
|
||||||
|
|
||||||
### Conditions
|
### Conditions
|
||||||
|
|
||||||
``` { .js .copy }
|
``` { .js .copy }
|
||||||
if (age > 18) {
|
if (age > 18) {
|
||||||
console.log("Majeur");
|
console.log("Majeur");
|
||||||
@ -155,6 +160,7 @@ let message = (age > 18) ? "Majeur" : "Mineur";
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Boucles
|
### Boucles
|
||||||
|
|
||||||
``` { .js .copy }
|
``` { .js .copy }
|
||||||
for (let i = 0; i < 5; i++) {
|
for (let i = 0; i < 5; i++) {
|
||||||
console.log(i);
|
console.log(i);
|
||||||
@ -170,6 +176,7 @@ while (i < 5) {
|
|||||||
---
|
---
|
||||||
|
|
||||||
## Fonctions
|
## Fonctions
|
||||||
|
|
||||||
``` { .js .copy }
|
``` { .js .copy }
|
||||||
function saluer(nom) {
|
function saluer(nom) {
|
||||||
return `Bonjour ${nom}`;
|
return `Bonjour ${nom}`;
|
||||||
@ -183,6 +190,7 @@ const direBonjour = (nom) => `Bonjour ${nom}`;
|
|||||||
## Tableaux et objets
|
## Tableaux et objets
|
||||||
|
|
||||||
### Tableaux
|
### Tableaux
|
||||||
|
|
||||||
``` { .js .copy }
|
``` { .js .copy }
|
||||||
let fruits = ["pomme", "banane"];
|
let fruits = ["pomme", "banane"];
|
||||||
fruits.push("kiwi");
|
fruits.push("kiwi");
|
||||||
@ -190,6 +198,7 @@ console.log(fruits[0]); // pomme
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Objets
|
### Objets
|
||||||
|
|
||||||
``` { .js .copy }
|
``` { .js .copy }
|
||||||
let personne = {
|
let personne = {
|
||||||
nom: "Alice",
|
nom: "Alice",
|
||||||
@ -210,16 +219,19 @@ personne.parler();
|
|||||||
[Definition DOM](https://fr.wikipedia.org/wiki/Document_Object_Model)
|
[Definition DOM](https://fr.wikipedia.org/wiki/Document_Object_Model)
|
||||||
|
|
||||||
### Sélection des éléments
|
### Sélection des éléments
|
||||||
|
|
||||||
``` { .js .copy }
|
``` { .js .copy }
|
||||||
const titre = document.querySelector("h1");
|
const titre = document.querySelector("h1");
|
||||||
```
|
```
|
||||||
|
|
||||||
### 5.2 Modification du contenu
|
### Modification du contenu
|
||||||
|
|
||||||
``` { .js .copy }
|
``` { .js .copy }
|
||||||
titre.textContent = "Nouveau Titre";
|
titre.textContent = "Nouveau Titre";
|
||||||
```
|
```
|
||||||
|
|
||||||
### 5.3 Événements
|
### Événements
|
||||||
|
|
||||||
``` { .js .copy }
|
``` { .js .copy }
|
||||||
document.querySelector("button").addEventListener("click", () => {
|
document.querySelector("button").addEventListener("click", () => {
|
||||||
alert("Clic !");
|
alert("Clic !");
|
||||||
@ -244,9 +256,10 @@ document.getElementById("incrementer").addEventListener("click", () => {
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 6. Asynchrone et AJAX
|
## Asynchrone et AJAX
|
||||||
|
|
||||||
### setTimeout / setInterval
|
### setTimeout / setInterval
|
||||||
|
|
||||||
``` { .js .copy }
|
``` { .js .copy }
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
console.log("1 seconde");
|
console.log("1 seconde");
|
||||||
@ -254,6 +267,7 @@ setTimeout(() => {
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Promesses
|
### Promesses
|
||||||
|
|
||||||
``` { .js .copy }
|
``` { .js .copy }
|
||||||
fetch("https://api.example.com/data")
|
fetch("https://api.example.com/data")
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
@ -266,6 +280,7 @@ fetch("https://api.example.com/data")
|
|||||||
## Concepts avancés
|
## Concepts avancés
|
||||||
|
|
||||||
### Closures
|
### Closures
|
||||||
|
|
||||||
``` { .js .copy }
|
``` { .js .copy }
|
||||||
function createCounter() {
|
function createCounter() {
|
||||||
let count = 0;
|
let count = 0;
|
||||||
@ -277,6 +292,7 @@ console.log(counter()); // 1
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Classes
|
### Classes
|
||||||
|
|
||||||
``` { .js .copy }
|
``` { .js .copy }
|
||||||
class Animal {
|
class Animal {
|
||||||
constructor(nom) {
|
constructor(nom) {
|
||||||
@ -290,6 +306,7 @@ class Animal {
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Modules (ES6)
|
### Modules (ES6)
|
||||||
|
|
||||||
``` { .js .copy }
|
``` { .js .copy }
|
||||||
// fichier.js
|
// fichier.js
|
||||||
export function addition(a, b) {
|
export function addition(a, b) {
|
||||||
@ -301,6 +318,7 @@ import { addition } from "./fichier. { .js .copy }";
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Async / Await
|
### Async / Await
|
||||||
|
|
||||||
``` { .js .copy }
|
``` { .js .copy }
|
||||||
async function getData() {
|
async function getData() {
|
||||||
try {
|
try {
|
||||||
@ -320,4 +338,5 @@ async function getData() {
|
|||||||
- [MDN JavaScript Guide](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide)
|
- [MDN JavaScript Guide](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide)
|
||||||
- [JavaScript.info](https://javascript.info/)
|
- [JavaScript.info](https://javascript.info/)
|
||||||
- [W3Schools JavaScript](https://www.w3schools.com/js/)
|
- [W3Schools JavaScript](https://www.w3schools.com/js/)
|
||||||
|
- [Codingame](https://www.codingame.com/start/fr/)
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user