Atelier découverte HTML JS

Navigateur web, document HTML

Fonctionnalités utiles d'un navigateur web :

Raccourci clavier	Action
`F5` ou `ctrl R`	Rafraîchir la page
`ctrl U`	Voir la source
`F12`	Outils développement web

Sur votre machine, créez un nouveau dossier, en le nommant par exemple test-prog.
Dans ce dossier, créez un document vide nommé test1.html
Ouvrez test1.html dans un navigateur web. Une page blanche s'affiche.
Ouvrez test1.html avec notepad (bloc-note).
Avec notepad (bloc-note), écrivez dans le fichier test1.html :
```
Salut, il est 9h.
```
Rafraîchissez la page dans votre navigateur
Toujours avec notepad, modifiez le fichier test1.html :
```
Salut, il est 9h.

Il fait beau ce matin
```
Rafraîchissez la page dans votre navigateur. On constate que le saut de ligne n'est pas pris en compte.
Copiez le fichier test1.html, pour créer un document nommé test1.txt.
Ouvrez test1.txt dans votre navigateur ; vous constatez que le saut de ligne est bien affiché.

HTML

Parmi les nombreuses références disponibles, MDN, Mozilla Developer Network ou w3schools.com.

Notion de balise (tag en anglais), ouvrante et fermante.
Modifiez test1.html de manière à ce qu'il contienne :
```
<!DOCTYPE html>
<html>
<head>
</head>

<body>
Salut, il est 9h.

Il fait beau ce matin
</body>
</html>
```
On constate que le saut de ligne n'est toujours pas pris en compte.
Ajoutez des sauts de ligne :
```
Salut, il est 9h.
<br>
<br>Il fait beau ce matin
```
Il existe plusieurs moyens de faire des sauts de ligne : balises p, div, en utilisant css.

Modifiez le texte :

Salut, <b>il est 9h</b>.
<br>
<br>Il fait <i>beau</i> ce matin

Dans le head (entre les balises <head> et </head>), ajoutez

<title>Première page de test</title>

Lien hypertexte
- Copiez test1.html pour créer un fichier test2.html.
- Modifiez test2.html de manière à ce que son titre devienne "Seconde page de test", et que son contenu devienne "Bonjour, je suis test2".
- Dans le body de test1.html, ajoutez un lien vers test2.html :
```
<a href="test2.html">Lien vers test2</a>
```
- Modifiez test2.html de manière à faire un lien vers test1.html

Image

Modifiez test1.html

<br><img src="https://amio-fit.2isa.eu/pluginfile.php/1/theme_adaptable/logo/1632918530/AMIO_fond_bleuPetit-ConvertImage.png">

Javascript

Notions importantes en programmation : instruction, variable, opérateur, expression, test, boucle, fonction.

Exemple de référence : developer.mozilla.org

Incruster des instructions javascript dans une page

Modifiez test1.html :

<script>
    document.write("Je suis affiché par js.");
</script>

Définir une variable

A l'intérieur de la balise <script> :

let nom = "Mon nom";
document.write("<br>Je m'appelle " + nom);

let permet de déclarer une variable.
nom = "Mon nom" permet de lui affecter une valeur.
Donc l'instruction

let nom = "Mon nom";

fait deux choses à la fois ; on aurait pu écrire :

let nom; // déclaration
nom = "mon nom"; // affectation d'une valeur

A retenir : une variable a un nom et une valeur.

Types de donnée

De plus, chaque variable a un type, mais javascript fait partie des langages "non typés", c'est à dire que les développeurs n'ont à priori pas besoin de préciser le type des variables, le langage s'en charge.
Mais lorsqu'on programme, on est parfois (ou souvent) amené à se préoccuper du type des données qu'on manipule.

Javascript définit les types suivants :

string	Chaîne de caractères
number	Nombre
boolean	Booléen, pouvant prendre comme valeur `true` ou `false`
array	Tableau
object	Objet
null
undefined

let, const, var

Il existe plusieurs moyens en javascript de déclarer une variable :

let permet de déclarer une variable dont la valeur va pouvoir changer.
```
let i = 1;
i = i + 3;
```
const permet de déclarer une variable dont la valeur va être toujours la même.
```
const i = 1;
i = i + 3; // ERREUR
```
var permet de déclarer une variable qui va être associée au document HTML, variable globale accessible partout.

CONSEILS :

Utiliser const le plus souvent possible, car c'est la solution la plus "économique" (permet à javascript d'optimiser).
Si la variable est amenée à changer de valeur, alors utiliser let.
var est rarement utile.

ATTENTION : on trouve sur internet dans beaucoup d'exemples l'utilisation de var alors qu'il faudrait utiliser const ou let.
La raison est que, jusqu'en 2015, let et const n'existaient pas en javascript.

Opérateurs

Un opérateur permet de combiner des expressions pour fabriquer une nouvelle expression.

Types d'opérateur	Opérateurs	Exemples
Opérateurs arithmétiques	+ (addition) - (soustraction) * (multiplication) / (division)	`3 + 4 = 7`
Modulo	%	7 % 3 = 1
Concaténation de chaîne	+	'toto' + 'titi' = 'tototiti'
Opérateurs logiques	\|\| (ou) && (et) ! (négation)	(a > 4 \|\| b < 10) && nom == 'bonjour'
Opérateurs de comparaison	== (égal) != (différent) > (supérieur) >= (supérieur ou égal) < (inférieur) <= (inférieur ou égal)

Expression

Une expression est une combinaison d'identifiants ou de valeurs littérales qui peut prendre une valeur.
Par exemple

a = 3;
b = 5*a;

Commentaires

Commenter une seule ligne avec // :

// Je vais déclarer la variable a.
let a;
a = 3; // ici, j'ai affecté une valeur à ma variable.

Commenter plusieurs lignes avec /* */

/* 
    Ces deux lignes
    sont ignorées par javascript.
*/

Toujours dans test1.html,

Déclarez une variable x.
Affectez lui la valeur 10.
Déclarez une deuxième variable y.
Affectez à y : 5 plus 3 fois la valeur de x.
Affichez les valeurs de x et de y, de manière à obtenir :
```
Valeur de x : 10
Valeur de y : 35
```

Outils pour programmer

Console javascript

Les navigateurs fournissent un outil permettant de débugger lors de l'écriture d'une page.
Appuyez sur F12 pour voir cet outil (et à nouveau sur F12 pour le faire disparaître).
Choisissez l'onglet "Console".

Javascript fournit un objet appelé console, que l'on peut utiliser pour développer.
Au lieu d'utiliser

document.write()

qui ajoute du texte dans la page HTML, on peut utiliser

console.log()

qui affiche du texte dans la console.

Editeur de texte

Installer un éditeur de texte qui fait au moins la coloration syntaxique et l'indentation, par exemple Notepad++ ou VSCodium.

Fonctions

Permet d'isoler du code, qui peut être ensuite appelé depuis différents endroits.

Exemple : fonction qui calcule un prix TTC à partir d'un prix HT (TVA à 20%)

/** 
    Calcule le prix TTC à partir d'un prix hors taxe.
    Le pourcentage de taxe est de 20%
    @param  prixHT  Prix hors taxe
    @return prixHT augmenté de 20%
**/
function calculerPrixTTC_20pourcent(prixHT){
    let prixTTC = prixHT * 1.2;
    return prixTTC;
}

On aurait pu écrire directement :

function calculerPrixTTC_20pourcent(prixHT){
    return prixHT * 1.2;
}

Syntaxe générale :

function nomDeLaFonction(paramètres){
    corps de la fonction
}

On définit une fonction en utilisant le mot-clé function.
Une fonction a un nom, ici calculerPrixTTC_20pourcent.
Attention, règles précises pour nommer une fonction, voir par exemple cette page.
Une fonction peut avoir zéro ou plusieurs paramètres.
Ici, il y a un seul paramètre, qui a comme nom prixHT.
Si une fonction a zéro paramètre, on écrit simplement des parenthèses vides:
```
function uneFonctionSansParametre(){ ... }
```
Après les paramètres, on écrit le corps de la fonction, situé entre des accolades.
Le corps de la fonction est l'ensemble des instructions qu'exécute la fonction.
Les paramètres peuvent être utilisés dans le corps de la fonction.
Une fonction peut éventuellement renvoyer une valeur, en utilisant le mot-clé return.

Une fois qu'on a défini une fonction, on peut l'utiliser ;

let prixTTC = calculerPrixTTC_20pourcent(20);
document.write("<br>Le prix TTC est " + prixTTC);

prixTTC = calculerPrixTTC_20pourcent(30);
document.write("<br>Le prix TTC est " + prixTTC);

Organiser son code

Jusqu'à présent, on a écrit du js à l'intérieur d'une balise <script>.
On peut aussi séparer le code js du html à l'aide de l'attribut src.
On pourrait par exemple organiser son code de la manière suivante :

test-prog/
    ├── js
    │   └── taxes.js
    └── test-taxes.html

Travailler de cette manière est pratique, car cela permet par exemple de "ranger" les fonctions dans des fichiers js, et de les utiliser depuis plusieurs pages HTML.

Avec cette organisation, on aurait :
test-taxes.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Calcul de taxes</title>
    <script src="js/taxes.js"></script>
</head>

<body>
<script>
    let prixTTC, prixHT;
    
    prixHT = 20;
    prixTTC = calculerPrixTTC_20pourcent(prixHT);
    document.write("<br>Le prix TTC de " + prixHT + " est " + prixTTC);
    
    prixHT = 30;
    prixTTC = calculerPrixTTC_20pourcent(prixHT);
    document.write("<br>Le prix TTC de " + prixHT + " est " + prixTTC);
</script>
</body>
</html>

Et taxes.js contient la définition des fonctions :

/** 
    Calcule le prix TTC à partir d'un prix hors taxe.
    Le pourcentage de taxe est de 20%
    @param  prixHT  Prix hors taxe
    @return prixHT augmenté de 20%
**/
function calculerPrixTTC_20pourcent(prixHT){
    let prixTTC = prixHT * 1.2;
    return prixTTC;
}

Taxes

Dans taxes.js, écrivez une fonction calculerPrixTTC() en vous inspirant de la fonction calculerPrixTTC_20pourcent(), de manière à passer en paramètre aussi le pourcentage de taxe.
Dans test-taxes.html, écrivez du code js qui utilise cette fonction.

Addition, soustraction, multiplication, division

On va utiliser la possibilité d'avoir du code js commun à différentes pages.

Créez une page addition.html
Créez dans votre dossier js un nouveau fichier maths.js
Dans maths.js, écrivez une fonction additioner() qui prend en paramètre deux nombres, et qui renvoie la somme de ces deux nombres.
Ecrivez du code dans la page addition.html qui utilise la fonction additioner()
Dans maths.js, écrivez une autre fonction, multiplier()qui prend en paramètre deux nombres, et qui renvoie le produit de ces deux nombres.

Créez une nouvelle page, addition.html, et un nouveau document javascript nommé maths.js dans le dossier js/.
Dans maths.js, écrivez une fonction additionner(), qui prend en paramètre deux nombres et qui renvoie la somme de ces deux nombres.
Ecrivez dans addition.html un script js qui utilise cette fonction.

Fahrenheit / Celsius

Pour convertir un nombre de degrés fahrenheit en un nombre de degrés celsius, on utilise la formule :
C = (F - 32) * 5 / 9
(Notations : F = fahrenheit ; C = celsius)

Dans js/degres.js, écrivez une fonction nommée fahrenheit2celsius qui prend en paramètre un nombre de °F et renvoie sa valeur exprimée en °C.
Dans test-degres.html, écrivez du code javascript qui utilise cette fonction pour afficher en °C combien valent 0°F, puis 100°F.
Etablissez la formule inverse, permettant de calculer le nombre de °C à partir du nombre de °F.
En utilisant cette formule, écrivez dans js/degres.js une fonction nommée celsius2fahrenheit qui prend en paramètre un nombre de °C et renvoie sa valeur exprimée en °F.
Dans test-degres.html, écrivez du code javascript qui utilise cette fonction pour afficher en °F combien valent 0°C, puis 100°C.

Tests

Exemple :

    let nombre = 4;
    if(nombre > 10){
        document.write("<br>Le nombre est supérieur à 10");
    }
    else{
        document.write("<br>Le nombre est inférieur à 10");
    }

Booléens

C'est un type de donnée qui peut prendre comme valeur true ou false
La condition nombre > 10 est une expression dont la valeur est un booléen.
Les opérateurs de comparaison (==, !=, > etc.) renvoient un booléen.
Les booléens peuvent être combinés avec des opérateurs logiques et (&&), ou (||), négation (!).

Ecrire une fonction estPair(), qui prend en paramètre un nombre et qui renvoie un booléen : true si le nombre est pair, false sinon.
Utiliser l'opérateur modulo (%).
Ecrire du code js qui utilise cette fonction.

Boucles

    for(let i=0; i < 10; i = i+1){
        document.write("<br>La valeur de i est " + i);
    }

Signification : « Pour i allant de 0 à 9, affiche "<br>La valeur de i est " + i »

Syntaxe générale :

    for(initialisation; test; update){
        instructions
    }

Pour l'exemple précédent :

La première fois, définis une variable i et affecte lui la valeur 0.
Tant que i est inférieur à 10, effectue le contenu de la boucle, situé entre les accolades.
A la fin de l'exécution de chaque itération, ajoute 2 à i.

En utilisant votre fonction estPair(), affichez tous les nombres pairs compris entre 1 et 20.

Triangles de chiffres

Ecrire une fonction dessinerTriangle(), qui prend en paramètre un chiffre entre 1 et 9, et qui renvoie une chaîne de caractères.
Par exemple,
```
dessinerTriangle(6);
```
renvoie la chaîne
```
1
22
333
4444
55555
666666
```
Aide : vous pouvez commencer à écrire dans cette fonction une boucle qui affiche
```
1
2
3
4
5
6
```
et la modifier ensuite pour afficher le triangle.
Modifiez votre fonction de manière à ce que, si le paramètre n n'est pas compris entre 1 et 9, ou si n n'est pas un nombre, la fonction renvoie un message d'erreur.
Utiliser la fonction isNaN() fournie par javascript.
```
dessinerTriangle('toto');
```
```
Le nombre doit être compris entre 1 et 9
```

Chaînes de caractères

Une chaîne de caractères (string) peut être vue comme une liste de caractères.
JavaScript (comme tous les autres langages) compte en commençant à 0.
Par exemple, dans la chaîne bonjour,
- b est le caractère 0
- o est le caractère 1
- n est le caractère 2
etc.

Javascript propose de nombreuses fonctions (méthodes) pour travailler avec des chaînes de caractères (string en anglais).
Voir par exemple developer.mozilla.org ou w3schools.com pour une liste plus complète de fonctions permettant de travailler avec des chaînes de caractères.

Quelques exemples (cliquez ici pour exécuter) :

<script>
let str1 = 'Une string définie avec des simples quotes';
let str2 = "Une string définie avec des doubles quotes";
let str3 = `Une string définie avec des "backticks" (au clavier : AltGr 7, deux fois)
<br>Bien pratique, car elle peut être définie sur plusieurs lignes.
<br>De plus, on peut y insérer du code javascript entre accolades précédées d'un signe $ : 3+ 4 = ${3 + 4}
`;

document.write('<br>');
document.write('<br>str1 = ' + str1);
document.write('<br>str2 = ' + str2);
document.write('<br>str3 = ' + str3);

// Longueur d'une chaîne
document.write('<br>');
document.write('<br>str1.length = ' + str1.length);

// Extraire un caractère d'une chaîne
document.write('<br>');
document.write('<br>Utilisation de charAt() : ');
for(let i=0; i < str1.length; i++){
    document.write(str1.charAt(i) + ' ');
}

// Convertir en majuscules / minuscules
document.write('<br>');
document.write('<br>str1.toUpperCase() = ' + str1.toUpperCase());
document.write('<br>str1.toLowerCase() = ' + str1.toLowerCase());

// Trouver la position d'un caractère dans une chaîne
document.write('<br>');
// Position du premier e dans la chaîne
document.write("<br>str1.indexOf('e') = " + str1.indexOf('e'));
// Position du dernier e dans la chaîne
document.write("<br>str1.lastIndexOf('e') = " + str1.lastIndexOf('e'));

// Extraire une sous-chaîne, 1ère forme
document.write('<br>');
// Chaîne commençant au caractère d'index = 2 (donc le 3ème), et d'une longueur de 5
document.write('<br>str1.substr(2, 5) = ' + str1.substr(2, 5));
// Chaîne commençant au caractère d'index = 2, jusqu'à la fin
document.write('<br>str1.substr(2) = ' + str1.substr(2));

// Extraire une sous-chaîne, 2ème forme
document.write('<br>');
// Chaîne commençant au caractère d'index = 2 (donc le 3ème),
// jusqu'au caractère d'index = 5, non compris
// donc les caractères d'index 2, 3, 4
document.write('<br>str1.substring(2, 5) = ' + str1.substring(2, 5));
// Chaîne commençant au caractère d'index = 2, jusqu'à la fin
document.write('<br>str1.substrinf(2) = ' + str1.substring(2));

document.write('<br>');
// Remplacer un caractère par un autre (ne remplace que le premier e)
document.write("<br>str1.replace('e', 'X') = " + str1.replace('e', 'X'));
// Remplacer tous les caractères par un autre
document.write("<br>str1.replaceAll('e', 'X') = " + str1.replaceAll('e', 'X'));
</script>

Note sur la troisième forme, avec les backticks :
Lorsqu'on utilise les simples ou doubles quotes pour affecter une valeur à une chaîne, javascript prend tout le contenu entre les quotes et le stocke tel quel dans la chaîne.
Avec la syntaxe backticks, javascript fait pareil sauf lorsqu'il rencontre ${ ... }.
Dans ce cas là, il considère que le contenu situé entre les accolades est du code javascript, qu'il va exécuter, et stocker le résultat de cette exécution dans la chaîne.

Majuscule / minuscule

Ecrivez un script qui demande un nom (en utilisant prompt()) et qui affiche :

Le nom en majuscule.
Le nom en minuscule.
Le nom en minuscule, mais avec la première lettre en majuscule.
Le nom en minuscule, mais avec la première et la dernière lettre en majuscule.
Le nom avec une lettre sur deux en majuscule et une lettre sur deux en minuscule, en réutilisant votre fonction estPair().

Exemple :

Entrez un nom :
bonjour

BONJOUR
bonjour
Bonjour
BonjouR

Palindrome

Ecrivez une fonction inverser(), qui prend en paramètre une chaîne de caractères et renvoie cette chaîne écrite à l'envers.
Ecrire du code js qui utilise cette fonction.
Exemple :
```
inverser('Bonjour') = ruojnoB
```
Un palindrome est un mot qui s'écrit de la même manière à l'endroit comme à l'envers. Ex : été, radar, tôt.
Utilisez votre fonction inverser() pour écrire une fonction isPalindrome(), qui prend en entrée une string et renvoie un booléen.
Exemples :
```
isPalindrome('Bonjour') = false
isPalindrome('ressasser') = true
```
Optionnel (plus difficile) : Améliorez votre fonction isPalindrome() de manière à gérer les majuscules, les accents, la ponctuation et les cas particuliers (comme le ç), de manière à avoir par exemple :
```
isPalindrome("Tu l'as trop écrasé, César, ce Port-Salut") = true
```
Vous pouvez tester votre fonction avec les exemples présents sur fr.wikipedia.org.

Tableaux

Un tableau (array en anglais) permet de stocker plusieurs valeurs dans une seule variable.

Les exemples peuvent être exécutés sur cette page.

On utilise les crochets [ et ].
Exemple :

let langages = ['javascript', 'php', 'python'];

Les valeurs stockées dans un tableau sont appelées les éléments du tableau.
On accède aux éléments du tableau à partir de leur index.
Les index commencent à 0.

document.write(`<br>langages[0] = '${langages[0]}'`);
document.write(`<br>langages[1] = '${langages[1]}'`);
document.write(`<br>langages[2] = '${langages[2]}'`);

langages[0] = 'javascript'
langages[1] = 'php'
langages[2] = 'python'

Si on cherche à accéder à un élément qui n'existe pas, javascript renvoie le type undefined.

document.write(`<br>langages[3] = '${langages[3]}'`);

langages[3] = 'undefined'

On peut modifier un élément d'un tableau :

langages[1] = 'java';

On peut aussi ajouter un élément :

langages[3] = 'go';

Javascript permet d'afficher un tableau entier :

document.write('<br>langages = ' + langages);

langages = javascript,java,python,go

length

Un tableau a une propriété, length, qui indique le nombre de ses éléments.

document.write(`<br>langages.length = ${langages.length}`);

langages.length = 4

Ainsi,
- le premier élément a pour index 0
- le dernier élément a pour index length - 1

document.write(`<br>Premier élément = '${langages[0]}'`);
document.write(`<br>Dernier élément = '${langages[langages.length - 1]}'`);

Parcourir un tableau

On peut parcourir les éléments d'un tableau en utilisant une boucle for :

document.write('<br>');
for(let i=0; i < langages.length; i++){
    document.write(`<br>langages[${i}] = '${langages[i]}'`);
}

Il existe une autre syntaxe pour parcourir un tableau, en utilisant forEach :

langages.forEach(afficher);

function afficher(str){
    document.write('<br>' + str);
}

La signification de

langages.forEach(afficher);

est : "Pour chaque élément du tableau, exécute la fonction afficher() en lui passant en paramètre l'élément courant.
Pour que cela marche, il faut qu'il existe une fonction afficher(), et que cette fonction accepte un paramètre.
Dans ce cas, javascript va appeler la fonction pour chaque élément du tableau.

Fusionner 2 tableaux

Ecrire une fonction qui prend en paramètres deux tableaux et qui renvoie un nouveau tableau contenant les éléments des deux tableaux.
Par exemple :

let langages1 = ['javascript', 'php', 'python'];
let langages2 = ['go', 'rust', 'java'];
document.write(fusionner(langages1, langages2);

['javascript', 'php', 'python', 'go', 'rust', 'java']

Max et moyenne

Créer un tableau contenant les éléments suivants :
12, 87, 56, 4, -5 et 18
Calculer et afficher :

La valeur maximale du tableau
L'index contenant cette valeur maximale
La somme des éléments du tableau
La moyenne arithmétique des éléments de ce tableau (= somme des éléments du tableau divisée par le nombre des éléments du tableau).

Objets

TODO

Interagir avec le document HTML

A voir avant : introduction au CSS.

Un document HTML est constitué de tags (balises), qui peuvent être représentés comme une arborescence.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
</head>

<body>
<h1>Titre</h1>

<p>
    Un paragraphe
</p>
</body>
</html>

peut être représenté par cet arbre :

html
  ├── body
  │   ├── h1
  │   └── p
  └── head
      └── title

L'arbre qui représente la hiérarchie des tags html s'appelle le DOM, Document Object Model.
Javascript fournit des méthodes pour parcourir et modifier le DOM, ce qui permet d'interagir avec la page HTML.