modifications des tp, exercices, ajouts d'indications en JS, d'exemples en gloutons, 3 semaines de boulot enfin voilà
This commit is contained in:
161
web/js/CORRECTION.md
Normal file
161
web/js/CORRECTION.md
Normal file
@@ -0,0 +1,161 @@
|
||||
# Correction des exercices - JavaScript
|
||||
|
||||
---------
|
||||
|
||||
## Exercice 1 : Pair ou impair
|
||||
|
||||
### Version simple avec prompt
|
||||
|
||||
```javascript
|
||||
const nombre = parseInt(prompt("Entrez un nombre :"));
|
||||
|
||||
if (nombre % 2 === 0) {
|
||||
document.write(nombre + " est pair");
|
||||
} else {
|
||||
document.write(nombre + " est impair");
|
||||
}
|
||||
```
|
||||
|
||||
### Version avec gestion des erreurs
|
||||
|
||||
```javascript
|
||||
const saisie = prompt("Entrez un nombre :");
|
||||
const nombre = parseInt(saisie);
|
||||
|
||||
if (isNaN(nombre)) {
|
||||
document.write("Erreur : vous n'avez pas entré un nombre valide");
|
||||
} else if (nombre % 2 === 0) {
|
||||
document.write(nombre + " est pair");
|
||||
} else {
|
||||
document.write(nombre + " est impair");
|
||||
}
|
||||
```
|
||||
|
||||
**Points importants :**
|
||||
- `%` est l'opérateur modulo (reste de la division)
|
||||
- Un nombre est pair si `nombre % 2` vaut 0
|
||||
- `isNaN()` vérifie si la valeur n'est pas un nombre (Not a Number)
|
||||
- `parseInt()` convertit une chaîne en entier
|
||||
|
||||
---------
|
||||
|
||||
## Exercice 2 : Calculatrice simple
|
||||
|
||||
### Version simple
|
||||
|
||||
```javascript
|
||||
const a = parseFloat(prompt("Entrez le premier nombre :"));
|
||||
const b = parseFloat(prompt("Entrez le deuxième nombre :"));
|
||||
const operation = prompt("Quelle opération ? (+, -, *, /)");
|
||||
|
||||
let resultat;
|
||||
|
||||
if (operation === "+") {
|
||||
resultat = a + b;
|
||||
} else if (operation === "-") {
|
||||
resultat = a - b;
|
||||
} else if (operation === "*") {
|
||||
resultat = a * b;
|
||||
} else if (operation === "/") {
|
||||
if (b === 0) {
|
||||
resultat = "Erreur : division par zéro impossible";
|
||||
} else {
|
||||
resultat = a / b;
|
||||
}
|
||||
} else {
|
||||
resultat = "Opération non reconnue";
|
||||
}
|
||||
|
||||
document.write(a + " " + operation + " " + b + " = " + resultat);
|
||||
```
|
||||
|
||||
### Version avec switch
|
||||
|
||||
```javascript
|
||||
const a = parseFloat(prompt("Entrez le premier nombre :"));
|
||||
const b = parseFloat(prompt("Entrez le deuxième nombre :"));
|
||||
const operation = prompt("Quelle opération ? (+, -, *, /)");
|
||||
|
||||
let resultat;
|
||||
|
||||
switch (operation) {
|
||||
case "+":
|
||||
resultat = a + b;
|
||||
break;
|
||||
case "-":
|
||||
resultat = a - b;
|
||||
break;
|
||||
case "*":
|
||||
resultat = a * b;
|
||||
break;
|
||||
case "/":
|
||||
if (b === 0) {
|
||||
resultat = "Erreur : division par zéro";
|
||||
} else {
|
||||
resultat = a / b;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
resultat = "Opération non reconnue";
|
||||
}
|
||||
|
||||
document.write(a + " " + operation + " " + b + " = " + resultat);
|
||||
```
|
||||
|
||||
**Points importants :**
|
||||
- `parseFloat()` convertit en nombre décimal (contrairement à `parseInt()` qui donne un entier)
|
||||
- Il faut vérifier la division par zéro
|
||||
- `switch` est une alternative à plusieurs `if/else if`
|
||||
- Chaque `case` doit se terminer par `break`
|
||||
|
||||
---------
|
||||
|
||||
## Exercice 3 : FizzBuzz
|
||||
|
||||
```javascript
|
||||
for (let i = 1; i <= 100; i++) {
|
||||
if (i % 3 === 0 && i % 5 === 0) {
|
||||
document.write("FizzBuzz<br>");
|
||||
} else if (i % 3 === 0) {
|
||||
document.write("Fizz<br>");
|
||||
} else if (i % 5 === 0) {
|
||||
document.write("Buzz<br>");
|
||||
} else {
|
||||
document.write(i + "<br>");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Version alternative avec concaténation
|
||||
|
||||
```javascript
|
||||
for (let i = 1; i <= 100; i++) {
|
||||
let resultat = "";
|
||||
|
||||
if (i % 3 === 0) {
|
||||
resultat = resultat + "Fizz";
|
||||
}
|
||||
if (i % 5 === 0) {
|
||||
resultat = resultat + "Buzz";
|
||||
}
|
||||
|
||||
if (resultat === "") {
|
||||
resultat = i;
|
||||
}
|
||||
|
||||
document.write(resultat + "<br>");
|
||||
}
|
||||
```
|
||||
|
||||
**Points importants :**
|
||||
- L'ordre des conditions est important : on teste d'abord "multiple de 3 ET 5"
|
||||
- `&&` est l'opérateur ET logique
|
||||
- La version alternative évite la répétition du test "multiple de 3 ET 5"
|
||||
|
||||
---------
|
||||
|
||||
Auteur : Florian Mathieu
|
||||
|
||||
Licence CC BY NC
|
||||
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> <br />Ce cours est mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>.
|
||||
682
web/js/README.md
682
web/js/README.md
@@ -1,8 +1,8 @@
|
||||
# Le JavaScript
|
||||
|
||||
> Crée en 1995, JavaScript est un langage inspiré de Java (mais de façon simplifiée) qui permet d’accéder aux objets dans les applications web notamment. Il est utilisé pour vérifier les champs de saisies dans les formulaires, pour faire des animations ou des effets de transitions.
|
||||
> Créé en 1995, JavaScript est un langage inspiré de Java (mais de façon simplifiée) qui permet d'accéder aux objets dans les applications web notamment. Il est utilisé pour vérifier les champs de saisies dans les formulaires, pour faire des animations ou des effets de transitions.
|
||||
>
|
||||
> JavaScript s’utilise principalement dans un navigateur (qui intègre un moteur JavaScript).
|
||||
> JavaScript s'utilise principalement dans un navigateur (qui intègre un moteur JavaScript).
|
||||
|
||||
---------
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
------
|
||||
|
||||
## Intégration
|
||||
## Intégration
|
||||
|
||||
Comme pour le CSS, on peut très facilement intégrer du code JS dans du code HTML :
|
||||
|
||||
@@ -53,11 +53,11 @@ Ici, j'ai placé deux fois du code JavaScript dans ma page HTML.
|
||||
|
||||
Ici, le code va se charger **avant** la page web, ce qui peut occasionner des pages blanches si votre code est très long à charger.
|
||||
|
||||
- Ensuite, dans le < body > de la page HTML
|
||||
- Ensuite, dans le < body > de la page HTML
|
||||
|
||||
Dans ce cas, le script chargera lorsqu'il apparaîtra. Il s'executera alors immédiatement.
|
||||
Dans ce cas, le script chargera lorsqu'il apparaîtra. Il s'exécutera alors immédiatement.
|
||||
|
||||
Si vous placez votre code dans un fichier, celui ci sera chargé lorsqu'il apparaîtra dans le code **mais** s'il contient des ***fonctions***, celles ci ne ***s'executeront*** que lorsqu'elles seront ***appelées***.
|
||||
Si vous placez votre code dans un fichier, celui-ci sera chargé lorsqu'il apparaîtra dans le code **mais** s'il contient des ***fonctions***, celles-ci ne ***s'exécuteront*** que lorsqu'elles seront ***appelées***.
|
||||
|
||||
#### Résumé :
|
||||
|
||||
@@ -69,7 +69,7 @@ Si vous placez votre code dans un fichier, celui ci sera chargé lorsqu'il appar
|
||||
|
||||
Le JavaScript est un langage **interprété** tout comme le HTML & le CSS : dès lors que votre navigateur web va rencontrer une balise "script" il n'essaiera plus de lire mais laissera le moteur JS faire le travail. Une fois la balise fermante atteinte, le navigateur web reprendra la main.
|
||||
|
||||
Il est donc possible d'exécuter du code au moment voulu dans une page web : lancer un calcul, demander une action à l'utilisateur...
|
||||
Il est donc possible d'exécuter du code au moment voulu dans une page web : lancer un calcul, demander une action à l'utilisateur...
|
||||
|
||||
À votre avis, à quoi sert le code suivant ?
|
||||
|
||||
@@ -85,13 +85,13 @@ Il est donc possible d'exécuter du code au moment voulu dans une page web : la
|
||||
|
||||
-----------------
|
||||
|
||||
## 1ere Activité
|
||||
## 1ère Activité
|
||||
|
||||
|
||||
|
||||
### **Premier programme**
|
||||
|
||||
- Créons une page HTML5 nommée index.html. Vous pouvez utiliser une copie de votre précédent site. Ajoutons ensuite une ligne de code qui va demander l’exécution du code JavaScript :
|
||||
- Créons une page HTML5 nommée index.html. Vous pouvez utiliser une copie de votre précédent site. Ajoutons ensuite une ligne de code qui va demander l'exécution du code JavaScript :
|
||||
|
||||
```
|
||||
<!doctype html>
|
||||
@@ -110,9 +110,9 @@ Il est donc possible d'exécuter du code au moment voulu dans une page web : la
|
||||
</html>
|
||||
```
|
||||
|
||||
Nous avons donc ajouté la balise "script", cette balise accepte un attribut "src" qui correspond au chemin du fichier JavaScript (extension .js) qui doit être exécuté. Dans notre exemple, notre fichier "JavaScript" sera dans le même dossier que notre fichier "HTML" et se nommera "monprogramme .js".
|
||||
Nous avons donc ajouté la balise "script", cette balise accepte un attribut "src" qui correspond au chemin du fichier JavaScript (extension .js) qui doit être exécuté. Dans notre exemple, notre fichier "JavaScript" sera dans le même dossier que notre fichier "HTML" et se nommera "monprogramme.js".
|
||||
|
||||
Nous allons maintenant créer et enregistrer un fichier "monprogramme .js" dans notepad++ :
|
||||
Nous allons maintenant créer et enregistrer un fichier "monprogramme.js" dans notepad++ :
|
||||
|
||||
```
|
||||
document.write("Hello World !");
|
||||
@@ -122,167 +122,639 @@ Enregistrez le fichier et ouvrez le fichier HTML (index.html) avec le navigateur
|
||||
|
||||
|
||||
|
||||
À ce stade, vous devez juste avoir compris que le code document.write vous permet d'afficher la chaîne de caractères contenue entre les guillemets (dans notre exemple : Hello World !). Il est aussi important de noter qu'en JavaScript, une ligne de code doit se terminer par un point virgule.
|
||||
À ce stade, vous devez juste avoir compris que le code document.write vous permet d'afficher la chaîne de caractères contenue entre les guillemets (dans notre exemple : Hello World !). Il est aussi important de noter qu'en JavaScript, une ligne de code doit se terminer par un point virgule.
|
||||
|
||||
Pour votre information, il est aussi possible d'inclure le code JavaScript directement dans le code HTML
|
||||
|
||||
### Les variables en JavaScript
|
||||
|
||||
Vous devez tout d'abord déclarer votre variable en utilisant le mot clé var. var point_de_vie;
|
||||
En JavaScript moderne, on utilise **deux mots-clés** pour déclarer des variables :
|
||||
|
||||
Puis vous pouvez affecter une valeur à votre variable
|
||||
| Mot-clé | Utilisation |
|
||||
|---------|-------------|
|
||||
| `const` | Pour les valeurs qui **ne changent pas** (constantes) |
|
||||
| `let` | Pour les valeurs qui **peuvent changer** |
|
||||
|
||||
```
|
||||
point_de_vie=15;
|
||||
> **Note historique** : Avant 2015, on utilisait `var` pour déclarer les variables. Vous le verrez encore dans d'anciens codes, mais préférez toujours `let` et `const`.
|
||||
|
||||
#### Déclarer une variable
|
||||
|
||||
```javascript
|
||||
// Avec const (valeur fixe)
|
||||
const PI = 3.14159;
|
||||
const NOM_DU_JEU = "Space Invaders";
|
||||
|
||||
// Avec let (valeur modifiable)
|
||||
let point_de_vie = 15;
|
||||
let score = 0;
|
||||
```
|
||||
|
||||
Ces 2 actions peuvent être couplées :
|
||||
#### Modifier une variable
|
||||
|
||||
```
|
||||
var point_de_vie=15;
|
||||
```javascript
|
||||
let compteur = 0;
|
||||
compteur = 1; // OK : let permet la réassignation
|
||||
compteur = 2; // OK
|
||||
|
||||
const MAX = 100;
|
||||
MAX = 200; // ERREUR : const ne permet pas la réassignation
|
||||
```
|
||||
|
||||
- Voici un premier exemple : modifiez et enregistrez le fichier "monprogramme.js": var point_de_vie=15;
|
||||
#### Quelle règle suivre ?
|
||||
|
||||
**Utilisez `const` par défaut**, et `let` uniquement si vous savez que la valeur va changer.
|
||||
|
||||
```javascript
|
||||
const age = 17; // L'âge ne change pas pendant l'exécution
|
||||
let nombreDeVies = 3; // Le nombre de vies va diminuer
|
||||
```
|
||||
|
||||
- Voici un premier exemple : modifiez et enregistrez le fichier "monprogramme.js" :
|
||||
|
||||
```javascript
|
||||
const point_de_vie = 15;
|
||||
document.write(point_de_vie);
|
||||
```
|
||||
|
||||
- Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat. ❑On peut aussi améliorer le message avec le code suivant :
|
||||
- Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat. On peut aussi améliorer le message avec le code suivant :
|
||||
|
||||
```
|
||||
var point_de_vie=15;
|
||||
```javascript
|
||||
const point_de_vie = 15;
|
||||
document.write("point_de_vie a pour valeur ", point_de_vie);
|
||||
```
|
||||
|
||||
***À votre avis, à quoi sert la virgule entre valeur et point_de_vie ?***
|
||||
|
||||
JavaScript est un langage faiblement typé, il n'est donc pas nécessaire de préciser le type de la variable. Attention, cela ne veut pas dire que votre variable n'a pas de type, juste que le programmeur n'a pas besoin de le préciser.
|
||||
JavaScript est un langage faiblement typé, il n'est donc pas nécessaire de préciser le type de la variable. Attention, cela ne veut pas dire que votre variable n'a pas de type, juste que le programmeur n'a pas besoin de le préciser.
|
||||
|
||||
En JavaScript les types possibles sont : string (chaîne de caractères), boolean, les nombres (number) qui regroupent les entiers (type integer) et les nombres à virgule (type float). Attention pour le type float vous devez utiliser le point à la place de la virgule, par exemple le nombre pi ne s'écrit pas 3,14 mais 3.14.
|
||||
En JavaScript les types possibles sont : string (chaîne de caractères), boolean, les nombres (number) qui regroupent les entiers (type integer) et les nombres à virgule (type float). Attention pour le type float vous devez utiliser le point à la place de la virgule, par exemple le nombre pi ne s'écrit pas 3,14 mais 3.14.
|
||||
|
||||
- La fonction typeof() renvoie le type de la variable qui a été passé en argument (dans les parenthèses). **var a=4;**
|
||||
- La fonction typeof() renvoie le type de la variable qui a été passé en argument (dans les parenthèses) :
|
||||
|
||||
```
|
||||
document.write ("a a pour valeur ", a, ". Elle est de type ", typeof(a), "</br>");
|
||||
var b="Hello";
|
||||
document.write ("b a pour valeur ", b, ". Elle est de type ", typeof(b), "</br>");
|
||||
```javascript
|
||||
const a = 4;
|
||||
document.write("a a pour valeur ", a, ". Elle est de type ", typeof(a), "<br>");
|
||||
|
||||
const b = "Hello";
|
||||
document.write("b a pour valeur ", b, ". Elle est de type ", typeof(b), "<br>");
|
||||
|
||||
const c = true;
|
||||
document.write("c a pour valeur ", c, ". Elle est de type ", typeof(c), "<br>");
|
||||
|
||||
let d;
|
||||
document.write("d a pour valeur ", d, ". Elle est de type ", typeof(d), "<br>");
|
||||
```
|
||||
|
||||
**var c=true;**
|
||||
> **Note** : On utilise `let d;` car une variable déclarée sans valeur initiale ne peut pas être `const`.
|
||||
|
||||
```
|
||||
document.write ("c a pour valeur ", c, ". Elle est de type ", typeof(c), "</br>");
|
||||
```
|
||||
Vous avez dû noter que pour une variable de type string, la valeur est entre guillemets.
|
||||
|
||||
**var d;**
|
||||
- Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.
|
||||
|
||||
```
|
||||
document.write ("d a pour valeur ", d, ". Elle est de type ", typeof(d), "</br>");
|
||||
```
|
||||
Deux choses à bien noter dans cet exemple :
|
||||
|
||||
Vous avez dû noter que pour une variable de type string, la valeur est entre guillemets.
|
||||
- ➢ Vous avez sans doute reconnu la balise <br> ("retour à ligne") du HTML.
|
||||
|
||||
- Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.
|
||||
- document.write vous permet d'écrire du code HTML, il est donc logique d'utiliser la balise <br> pour effectuer un retour à la ligne (toute autre balise est aussi utilisable, essayez avec une balise <strong> par exemple).
|
||||
- Enlevez les <br> du code pour vous convaincre de leur utilité. Enfin, attention, tout comme le texte, les balises HTML doivent être entre guillemets. La variable et la fonction typeof ne sont pas entre guillemets.
|
||||
|
||||
Deux choses à bien noter dans cet exemple :
|
||||
- ➢ Une variable quand elle a été déclarée, mais qu'aucune valeur ne lui a été attribué, a pour valeur undefined et est de type undefined.
|
||||
|
||||
- ➢ Vous avez sans doute reconnu la balise </br> ("retour à ligne") du HTML.
|
||||
- Que se passe-t-il quand on utilise une variable qui n'a même pas été déclarée ?
|
||||
|
||||
- document.write vous permet d'écrire du code HTML, il est donc logique d'utiliser la balise </br> pour effectuer un retour à la ligne (toute autre balise est aussi utilisable, essayez avec une balise <strong> par exemple).
|
||||
- Enlevez les </br> du code pour vous convaincre de leur utilité. Enfin, attention, tout comme le texte, les balises HTML doivent être entre guillemets. La variable et la fonction typeof ne sont pas entre guillemets.
|
||||
|
||||
- ➢ Une variable quand elle a été déclarée, mais qu'aucune valeur ne lui a été attribué, a pour valeur undefined et est de type undefined.
|
||||
|
||||
- Que se passe-t-il quand on utilise une variable qui n'a même pas été déclarée ?
|
||||
|
||||
```
|
||||
var a=4;
|
||||
document.write ("a a pour valeur ", a);
|
||||
document.write ("b a pour valeur ", b);
|
||||
var c="Hello";
|
||||
document.write ("c a pour valeur ", c);
|
||||
```javascript
|
||||
const a = 4;
|
||||
document.write("a a pour valeur ", a);
|
||||
document.write("b a pour valeur ", b);
|
||||
const c = "Hello";
|
||||
document.write("c a pour valeur ", c);
|
||||
```
|
||||
|
||||
- 1ère ligne nous déclarons la variable a et nous lui attribuons la valeur (numérique) 4.
|
||||
- 2ème ligne, nous utilisons la variable a
|
||||
- 1ère ligne : nous déclarons la constante `a` avec la valeur numérique 4.
|
||||
- 2ème ligne : nous utilisons la variable `a`
|
||||
- 3ème ligne : nous utilisons une variable `b` qui n'a pas été déclarée !
|
||||
- 4ème ligne : nous déclarons la constante `c` avec la valeur chaîne "Hello".
|
||||
- 5ème ligne : nous utilisons `c`.
|
||||
|
||||
- 3ème ligne nous utilisons une variable b qui n'a pas été déclarée !
|
||||
- 4ème ligne nous déclarons la variable c et nous lui attribuons la valeur (chaîne) "Hello".
|
||||
|
||||
- 5ème ligne nous utilisons c.
|
||||
|
||||
- Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.
|
||||
Le programme s’est arrêté à la 3ème ligne. Utiliser une variable non déclarée est une erreur qui provoque l'arrêt du programme.
|
||||
Problème, rien ne nous signale cette erreur dans le navigateur (c'est assez logique, à la base un navigateur n'est pas un outil de développement !).
|
||||
- Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.
|
||||
Le programme s'est arrêté à la 3ème ligne. Utiliser une variable non déclarée est une erreur qui provoque l'arrêt du programme.
|
||||
Problème, rien ne nous signale cette erreur dans le navigateur (c'est assez logique, à la base un navigateur n'est pas un outil de développement !).
|
||||
|
||||
### Les boites de dialogue
|
||||
|
||||
- Pour debugger des programmes il suffit souvent de placer des alertes à différents endroits du code.
|
||||
- Pour debugger des programmes il suffit souvent de placer des alertes à différents endroits du code.
|
||||
|
||||
```
|
||||
```javascript
|
||||
alert("Une alerte simple");
|
||||
var myText="Une alerte avec le message dans une variable";
|
||||
|
||||
const myText = "Une alerte avec le message dans une variable";
|
||||
alert(myText);
|
||||
var myNumber=13;
|
||||
alert("La variable contient la valeur" + myNumber);
|
||||
|
||||
const myNumber = 13;
|
||||
alert("La variable contient la valeur " + myNumber);
|
||||
```
|
||||
|
||||
- Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.
|
||||
Notez qu’ici pour la dernière ligne de code l’opérateur + est un opérateur de concaténation. En effet ajouter
|
||||
- Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.
|
||||
Notez qu'ici pour la dernière ligne de code l'opérateur + est un opérateur de concaténation. En effet ajouter
|
||||
|
||||
deux chaînes de caractères revient à les coller à la suite l’une de l’autre : c’est une concaténation.
|
||||
Nous allons maintenant étudier la méthode qui permet à l'utilisateur de rentrer des valeurs au clavier : la
|
||||
deux chaînes de caractères revient à les coller à la suite l'une de l'autre : c'est une concaténation.
|
||||
Nous allons maintenant étudier la méthode qui permet à l'utilisateur de rentrer des valeurs au clavier : la
|
||||
|
||||
méthode prompt(). Nous allons utiliser une structure de la forme : var maVariable = prompt (message).
|
||||
méthode `prompt()`. Nous allons utiliser une structure de la forme : `const maVariable = prompt(message);`
|
||||
|
||||
L'utilisateur va alors saisir (au clavier) du texte dans la zone de saisie. La validation avec le bouton OK permettra d'attribuer le texte entré par l'utilisateur à la variable maVariable. Au cas où l'utilisateur ne rentrerait rien ou qu'il appuierait sur Annuler on aura alors maVariable = null (pas de valeur).
|
||||
L'utilisateur va alors saisir (au clavier) du texte dans la zone de saisie. La validation avec le bouton OK permettra d'attribuer le texte entré par l'utilisateur à la variable maVariable. Au cas où l'utilisateur ne rentrerait rien ou qu'il appuierait sur Annuler on aura alors maVariable = null (pas de valeur).
|
||||
|
||||
- Voici un exemple :
|
||||
var prenom=prompt("Quel est votre prénom ?");
|
||||
|
||||
```
|
||||
document.write ("Bonjour ", prenom, ", vous allez bien ?");
|
||||
```javascript
|
||||
const prenom = prompt("Quel est votre prénom ?");
|
||||
document.write("Bonjour ", prenom, ", vous allez bien ?");
|
||||
```
|
||||
|
||||
❑Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.
|
||||
Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.
|
||||
|
||||
❑Testez ce qui se passe si l'utilisateur n'entre rien (ou appuie sur le bouton Annuler).
|
||||
Testez ce qui se passe si l'utilisateur n'entre rien (ou appuie sur le bouton Annuler).
|
||||
|
||||
Pour éviter ce genre de chose, nous verrons un peu plus loin l'utilisation du couple if/else (les conditions)
|
||||
Pour éviter ce genre de chose, nous verrons un peu plus loin l'utilisation du couple if/else (les conditions)
|
||||
|
||||
- Un autre exemple : une machine à additionner
|
||||
- Un autre exemple : une machine à additionner
|
||||
|
||||
```
|
||||
document.write ("Nous allons additionner 2 nombres, a et b </br>");
|
||||
var a=prompt("Entrer a ");
|
||||
var b=prompt("Entrer b ");
|
||||
var resultat=a+b;
|
||||
document.write ("Résultat ",a," + ",b," = ",resultat);
|
||||
```javascript
|
||||
document.write("Nous allons additionner 2 nombres, a et b <br>");
|
||||
const a = prompt("Entrer a ");
|
||||
const b = prompt("Entrer b ");
|
||||
const resultat = a + b;
|
||||
document.write("Résultat ", a, " + ", b, " = ", resultat);
|
||||
```
|
||||
|
||||
- Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.
|
||||
- Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.
|
||||
|
||||
- Pour essayer de comprendre ce qui se passe, faites un "typeof()" sur les variables a et b.
|
||||
- Pour essayer de comprendre ce qui se passe, faites un `typeof()` sur les variables `a` et `b`.
|
||||
|
||||
Les variables a et b sont toutes deux de type string. Or, nous avons vu que si nous avons affaire à des chaînes de caractères le signe + est le signe de concaténation (mise bout à bout de 2 chaînes de caractère). Si nous mettons bout à bout 5 et 15, nous obtenons bien 515.
|
||||
Les variables a et b sont toutes deux de type string. Or, nous avons vu que si nous avons affaire à des chaînes de caractères le signe + est le signe de concaténation (mise bout à bout de 2 chaînes de caractère). Si nous mettons bout à bout 5 et 15, nous obtenons bien 515.
|
||||
|
||||
Pour que notre programme fonctionne, il faut "transformer" notre chaîne (variable de type string) en nombre (variable de type integer). Nous allons faire du transtypage (convertir un type en un autre).
|
||||
Pour que notre programme fonctionne, il faut "transformer" notre chaîne (variable de type string) en nombre (variable de type integer). Nous allons faire du transtypage (convertir un type en un autre).
|
||||
|
||||
- Pour se faire, utilisons la méthode parseInt() :
|
||||
- Pour ce faire, utilisons la méthode `parseInt()` :
|
||||
|
||||
```
|
||||
document.write ("Nous allons additionner 2 nombres, a et b </br>");
|
||||
var as=prompt("Entrer a ");
|
||||
var bs=prompt("Entrer b ");
|
||||
var a=parseInt(as);
|
||||
var b=parseInt(bs);
|
||||
var resultat=a+b;
|
||||
document.write ("Résultat ",a," + ",b," = ",resultat);
|
||||
```javascript
|
||||
document.write("Nous allons additionner 2 nombres, a et b <br>");
|
||||
const as = prompt("Entrer a ");
|
||||
const bs = prompt("Entrer b ");
|
||||
const a = parseInt(as);
|
||||
const b = parseInt(bs);
|
||||
const resultat = a + b;
|
||||
document.write("Résultat ", a, " + ", b, " = ", resultat);
|
||||
```
|
||||
|
||||
- Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.
|
||||
as et bs sont de type string, a et b sont maintenant des nombres, le résultat est maintenant correct.
|
||||
- Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.
|
||||
|
||||
`as` et `bs` sont de type string, `a` et `b` sont maintenant des nombres, le résultat est maintenant correct.
|
||||
|
||||
-------
|
||||
|
||||
## Les opérateurs
|
||||
|
||||
### Opérateurs arithmétiques
|
||||
|
||||
| Opérateur | Description | Exemple |
|
||||
|-----------|-------------|---------|
|
||||
| `+` | Addition | `5 + 3` donne `8` |
|
||||
| `-` | Soustraction | `5 - 3` donne `2` |
|
||||
| `*` | Multiplication | `5 * 3` donne `15` |
|
||||
| `/` | Division | `10 / 3` donne `3.333...` |
|
||||
| `%` | Modulo (reste) | `10 % 3` donne `1` |
|
||||
| `**` | Puissance | `2 ** 3` donne `8` |
|
||||
|
||||
### Opérateurs de comparaison
|
||||
|
||||
| Opérateur | Description | Exemple |
|
||||
|-----------|-------------|---------|
|
||||
| `==` | Égalité (valeur) | `5 == "5"` donne `true` |
|
||||
| `===` | Égalité stricte (valeur ET type) | `5 === "5"` donne `false` |
|
||||
| `!=` | Différent (valeur) | `5 != 3` donne `true` |
|
||||
| `!==` | Différent strict | `5 !== "5"` donne `true` |
|
||||
| `<` | Inférieur | `3 < 5` donne `true` |
|
||||
| `>` | Supérieur | `3 > 5` donne `false` |
|
||||
| `<=` | Inférieur ou égal | `5 <= 5` donne `true` |
|
||||
| `>=` | Supérieur ou égal | `3 >= 5` donne `false` |
|
||||
|
||||
> **Important** : Préférez `===` à `==` pour éviter les conversions de type implicites.
|
||||
|
||||
### Opérateurs logiques
|
||||
|
||||
| Opérateur | Description | Exemple |
|
||||
|-----------|-------------|---------|
|
||||
| `&&` | ET logique | `true && false` donne `false` |
|
||||
| `\|\|` | OU logique | `true \|\| false` donne `true` |
|
||||
| `!` | NON logique | `!true` donne `false` |
|
||||
|
||||
-------
|
||||
|
||||
## Les conditions
|
||||
|
||||
Les conditions permettent d'exécuter du code uniquement si une certaine condition est vraie.
|
||||
|
||||
### Structure if / else
|
||||
|
||||
```javascript
|
||||
const age = 18;
|
||||
|
||||
if (age >= 18) {
|
||||
document.write("Vous êtes majeur");
|
||||
} else {
|
||||
document.write("Vous êtes mineur");
|
||||
}
|
||||
```
|
||||
|
||||
### Structure if / else if / else
|
||||
|
||||
```javascript
|
||||
const note = 15;
|
||||
|
||||
if (note >= 16) {
|
||||
document.write("Très bien !");
|
||||
} else if (note >= 14) {
|
||||
document.write("Bien !");
|
||||
} else if (note >= 10) {
|
||||
document.write("Passable");
|
||||
} else {
|
||||
document.write("Insuffisant");
|
||||
}
|
||||
```
|
||||
|
||||
### Exemple avec prompt
|
||||
|
||||
Reprenons l'exemple du prompt pour gérer le cas où l'utilisateur annule :
|
||||
|
||||
```javascript
|
||||
const prenom = prompt("Quel est votre prénom ?");
|
||||
|
||||
if (prenom === null || prenom === "") {
|
||||
document.write("Vous n'avez pas entré de prénom !");
|
||||
} else {
|
||||
document.write("Bonjour ", prenom, " !");
|
||||
}
|
||||
```
|
||||
|
||||
### Conditions imbriquées
|
||||
|
||||
```javascript
|
||||
const age = parseInt(prompt("Quel est votre âge ?"));
|
||||
const permis = prompt("Avez-vous le permis ? (oui/non)");
|
||||
|
||||
if (age >= 18) {
|
||||
if (permis === "oui") {
|
||||
document.write("Vous pouvez conduire");
|
||||
} else {
|
||||
document.write("Passez d'abord le permis !");
|
||||
}
|
||||
} else {
|
||||
document.write("Vous êtes trop jeune pour conduire");
|
||||
}
|
||||
```
|
||||
|
||||
### L'opérateur ternaire
|
||||
|
||||
Pour des conditions simples, on peut utiliser l'opérateur ternaire :
|
||||
|
||||
```javascript
|
||||
const age = 20;
|
||||
const statut = (age >= 18) ? "majeur" : "mineur";
|
||||
document.write("Vous êtes ", statut);
|
||||
```
|
||||
|
||||
Syntaxe : `condition ? valeurSiVrai : valeurSiFaux`
|
||||
|
||||
-------
|
||||
|
||||
## Les boucles
|
||||
|
||||
Les boucles permettent de répéter des instructions plusieurs fois.
|
||||
|
||||
### La boucle while
|
||||
|
||||
La boucle `while` répète tant que la condition est vraie :
|
||||
|
||||
```javascript
|
||||
let compteur = 1;
|
||||
|
||||
while (compteur <= 5) {
|
||||
document.write("Tour numéro ", compteur, "<br>");
|
||||
compteur = compteur + 1;
|
||||
}
|
||||
```
|
||||
|
||||
> **Note** : On utilise `let` car `compteur` est modifié à chaque tour de boucle.
|
||||
|
||||
Résultat :
|
||||
```
|
||||
Tour numéro 1
|
||||
Tour numéro 2
|
||||
Tour numéro 3
|
||||
Tour numéro 4
|
||||
Tour numéro 5
|
||||
```
|
||||
|
||||
> **Attention** : N'oubliez pas d'incrémenter le compteur, sinon la boucle sera infinie !
|
||||
|
||||
### La boucle for
|
||||
|
||||
La boucle `for` est plus compacte quand on connaît le nombre d'itérations :
|
||||
|
||||
```javascript
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
document.write("Tour numéro ", i, "<br>");
|
||||
}
|
||||
```
|
||||
|
||||
Structure : `for (initialisation; condition; incrémentation)`
|
||||
|
||||
- **Initialisation** : `let i = 1` (exécutée une seule fois au début)
|
||||
- **Condition** : `i <= 5` (vérifiée avant chaque tour)
|
||||
- **Incrémentation** : `i++` (exécutée après chaque tour)
|
||||
|
||||
> **Note** : `i++` est équivalent à `i = i + 1`
|
||||
|
||||
### Exemple : table de multiplication
|
||||
|
||||
```javascript
|
||||
const nombre = parseInt(prompt("Quelle table voulez-vous ?"));
|
||||
|
||||
document.write("<h2>Table de ", nombre, "</h2>");
|
||||
|
||||
for (let i = 1; i <= 10; i++) {
|
||||
const resultat = nombre * i;
|
||||
document.write(nombre, " x ", i, " = ", resultat, "<br>");
|
||||
}
|
||||
```
|
||||
|
||||
### Exemple : somme des nombres
|
||||
|
||||
```javascript
|
||||
const n = parseInt(prompt("Jusqu'à quel nombre ?"));
|
||||
let somme = 0;
|
||||
|
||||
for (let i = 1; i <= n; i++) {
|
||||
somme = somme + i;
|
||||
}
|
||||
|
||||
document.write("La somme des nombres de 1 à ", n, " est ", somme);
|
||||
```
|
||||
|
||||
### Les mots-clés break et continue
|
||||
|
||||
```javascript
|
||||
// break : sort de la boucle
|
||||
for (let i = 1; i <= 10; i++) {
|
||||
if (i === 5) {
|
||||
break; // Arrête la boucle quand i vaut 5
|
||||
}
|
||||
document.write(i, "<br>");
|
||||
}
|
||||
// Affiche : 1, 2, 3, 4
|
||||
|
||||
// continue : passe au tour suivant
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
if (i === 3) {
|
||||
continue; // Saute le tour quand i vaut 3
|
||||
}
|
||||
document.write(i, "<br>");
|
||||
}
|
||||
// Affiche : 1, 2, 4, 5
|
||||
```
|
||||
|
||||
-------
|
||||
|
||||
## Les fonctions
|
||||
|
||||
Une fonction est un bloc de code réutilisable qui effectue une tâche spécifique.
|
||||
|
||||
### Déclarer une fonction
|
||||
|
||||
```javascript
|
||||
function direBonjour() {
|
||||
document.write("Bonjour !<br>");
|
||||
}
|
||||
```
|
||||
|
||||
### Appeler une fonction
|
||||
|
||||
```javascript
|
||||
direBonjour(); // Affiche : Bonjour !
|
||||
direBonjour(); // Affiche : Bonjour !
|
||||
```
|
||||
|
||||
### Fonction avec paramètres
|
||||
|
||||
```javascript
|
||||
function direBonjour(prenom) {
|
||||
document.write("Bonjour ", prenom, " !<br>");
|
||||
}
|
||||
|
||||
direBonjour("Alice"); // Affiche : Bonjour Alice !
|
||||
direBonjour("Bob"); // Affiche : Bonjour Bob !
|
||||
```
|
||||
|
||||
### Fonction avec plusieurs paramètres
|
||||
|
||||
```javascript
|
||||
function addition(a, b) {
|
||||
const resultat = a + b;
|
||||
document.write(a, " + ", b, " = ", resultat, "<br>");
|
||||
}
|
||||
|
||||
addition(5, 3); // Affiche : 5 + 3 = 8
|
||||
addition(10, 20); // Affiche : 10 + 20 = 30
|
||||
```
|
||||
|
||||
### Fonction avec retour (return)
|
||||
|
||||
Une fonction peut **retourner** une valeur :
|
||||
|
||||
```javascript
|
||||
function carre(nombre) {
|
||||
return nombre * nombre;
|
||||
}
|
||||
|
||||
const resultat = carre(5);
|
||||
document.write("Le carré de 5 est ", resultat); // Affiche : 25
|
||||
```
|
||||
|
||||
### Exemple : fonction estMajeur
|
||||
|
||||
```javascript
|
||||
function estMajeur(age) {
|
||||
if (age >= 18) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const monAge = 20;
|
||||
if (estMajeur(monAge)) {
|
||||
document.write("Vous êtes majeur");
|
||||
}
|
||||
```
|
||||
|
||||
### Exemple : fonction maximum
|
||||
|
||||
```javascript
|
||||
function maximum(a, b) {
|
||||
if (a > b) {
|
||||
return a;
|
||||
} else {
|
||||
return b;
|
||||
}
|
||||
}
|
||||
|
||||
document.write("Le max de 5 et 8 est ", maximum(5, 8)); // Affiche : 8
|
||||
```
|
||||
|
||||
### Portée des variables
|
||||
|
||||
Les variables déclarées dans une fonction sont **locales** :
|
||||
|
||||
```javascript
|
||||
function test() {
|
||||
const variableLocale = "Je suis locale";
|
||||
document.write(variableLocale);
|
||||
}
|
||||
|
||||
test(); // Affiche : Je suis locale
|
||||
// document.write(variableLocale); // ERREUR : variable non définie
|
||||
```
|
||||
|
||||
> **Avantage de let/const** : Contrairement à `var`, les variables déclarées avec `let` et `const` ont une portée de **bloc** (entre `{}`), ce qui évite beaucoup de bugs.
|
||||
|
||||
-------
|
||||
|
||||
## Les tableaux (Arrays)
|
||||
|
||||
Un tableau permet de stocker plusieurs valeurs dans une seule variable.
|
||||
|
||||
### Créer un tableau
|
||||
|
||||
```javascript
|
||||
const fruits = ["Pomme", "Banane", "Orange"];
|
||||
const nombres = [1, 2, 3, 4, 5];
|
||||
const vide = [];
|
||||
```
|
||||
|
||||
> **Note** : On utilise `const` car la référence au tableau ne change pas, même si on modifie son contenu.
|
||||
|
||||
### Accéder aux éléments
|
||||
|
||||
Les indices commencent à **0** :
|
||||
|
||||
```javascript
|
||||
const fruits = ["Pomme", "Banane", "Orange"];
|
||||
|
||||
document.write(fruits[0]); // Affiche : Pomme
|
||||
document.write(fruits[1]); // Affiche : Banane
|
||||
document.write(fruits[2]); // Affiche : Orange
|
||||
```
|
||||
|
||||
### Modifier un élément
|
||||
|
||||
```javascript
|
||||
const fruits = ["Pomme", "Banane", "Orange"];
|
||||
fruits[1] = "Fraise"; // OK même avec const !
|
||||
// fruits vaut maintenant ["Pomme", "Fraise", "Orange"]
|
||||
```
|
||||
|
||||
> **Important** : Avec `const`, on ne peut pas réassigner le tableau (`fruits = autreTableau`), mais on peut modifier son contenu.
|
||||
|
||||
### Longueur d'un tableau
|
||||
|
||||
```javascript
|
||||
const fruits = ["Pomme", "Banane", "Orange"];
|
||||
document.write(fruits.length); // Affiche : 3
|
||||
```
|
||||
|
||||
### Parcourir un tableau
|
||||
|
||||
```javascript
|
||||
const fruits = ["Pomme", "Banane", "Orange"];
|
||||
|
||||
for (let i = 0; i < fruits.length; i++) {
|
||||
document.write(fruits[i], "<br>");
|
||||
}
|
||||
```
|
||||
|
||||
### Méthodes utiles
|
||||
|
||||
```javascript
|
||||
const fruits = ["Pomme", "Banane"];
|
||||
|
||||
// Ajouter à la fin
|
||||
fruits.push("Orange");
|
||||
// fruits = ["Pomme", "Banane", "Orange"]
|
||||
|
||||
// Retirer le dernier
|
||||
const dernier = fruits.pop();
|
||||
// dernier = "Orange", fruits = ["Pomme", "Banane"]
|
||||
|
||||
// Ajouter au début
|
||||
fruits.unshift("Fraise");
|
||||
// fruits = ["Fraise", "Pomme", "Banane"]
|
||||
|
||||
// Retirer le premier
|
||||
const premier = fruits.shift();
|
||||
// premier = "Fraise", fruits = ["Pomme", "Banane"]
|
||||
|
||||
// Trouver l'index d'un élément
|
||||
const index = fruits.indexOf("Banane"); // index = 1
|
||||
```
|
||||
|
||||
### Exemple : calculer la moyenne
|
||||
|
||||
```javascript
|
||||
const notes = [12, 15, 8, 14, 16];
|
||||
let somme = 0;
|
||||
|
||||
for (let i = 0; i < notes.length; i++) {
|
||||
somme = somme + notes[i];
|
||||
}
|
||||
|
||||
const moyenne = somme / notes.length;
|
||||
document.write("Moyenne : ", moyenne); // Affiche : 13
|
||||
```
|
||||
|
||||
-------
|
||||
|
||||
## Exercices
|
||||
|
||||
### Exercice 1 : Pair ou impair
|
||||
|
||||
Demandez un nombre à l'utilisateur et affichez si ce nombre est pair ou impair.
|
||||
|
||||
> **Indice** : Un nombre est pair si le reste de sa division par 2 est égal à 0.
|
||||
|
||||
### Exercice 2 : Calculatrice simple
|
||||
|
||||
Créez une calculatrice qui :
|
||||
1. Demande deux nombres à l'utilisateur
|
||||
2. Demande l'opération souhaitée (+, -, *, /)
|
||||
3. Affiche le résultat
|
||||
|
||||
### Exercice 3 : FizzBuzz
|
||||
|
||||
Affichez les nombres de 1 à 100, mais :
|
||||
- Pour les multiples de 3, affichez "Fizz"
|
||||
- Pour les multiples de 5, affichez "Buzz"
|
||||
- Pour les multiples de 3 ET 5, affichez "FizzBuzz"
|
||||
|
||||
> **[Voir la correction](./CORRECTION.md)**
|
||||
|
||||
-------
|
||||
|
||||
## Ressources
|
||||
|
||||
- [MDN - JavaScript](https://developer.mozilla.org/fr/docs/Web/JavaScript) : Documentation complète
|
||||
- [W3Schools - JavaScript](https://www.w3schools.com/js/) : Tutoriels et exemples
|
||||
- [JavaScript.info](https://fr.javascript.info/) : Tutoriel moderne et complet
|
||||
|
||||
-------
|
||||
|
||||
@@ -290,4 +762,4 @@ Auteur : Florian Mathieu
|
||||
|
||||
Licence CC BY NC
|
||||
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> <br />Ce cours est mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>.
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> <br />Ce cours est mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>.
|
||||
|
||||
Reference in New Issue
Block a user