Quelques retours sur le Javascript¶

Voici quelques retours sur des notions de Javascript de base.

Déclaration de variables¶

let : crée une variable dont l'accessibilité est déterminée par la zone où elle est créée

Ainsi, la variable existe uniquement le temps d'exécution des accolades où elle est déclarée.

Avantages :
- Réserver de l'espace mémoire uniquement lorsque nécessaire
- Libérer la mémoire rapidement pour ne pas la surcharger inutilement
- Sécurité des données avec une durée de vie restreinte
- Réutilisation de noms de variables possible dans les fonctions

Autres méthodes de déclaration de variables :

const : crée une variable constante dont le contenu ne change pas, de même accessibilité qu'avec un let

La constante est très utile pour déclarer des valeurs qui pourraient changer dans le temps. Ainsi, au lieu de chercher dans le code la valeur à modifier, on modifie la valeur de la variable déclarée en début de code. Exemple : le taux de taxes

La constante est aussi très utile pour déclarer des valeurs qui doivent rester la même dans tout le traitement et évite de se tromper de nom de variable et modifier sa valeur en cours de traitement. Exemple : la valeur PI ne change jamais.
var : crée une variable globale au navigateur ou locale à une fonction

Ne devrait être utilisé que pour supporter d'anciens navigateurs ou pour des cas spéciaux d'accessibilité

Déclaration d'une fonction¶

Une fonction s'exécute lorsqu'elle est appelée, généralement suite à une action d'un utilisateur.

Fonction

Événements déclencheurs¶

Les événements sont des actions effectuées par l'utilisateur: touche du clavier, mouvement de souris, clic de souris, etc.

Ils sont détectés dans le HTML et peuvent déclencher l'exécution d'une fonction :

Événement	Description
onload	Appelé lorsque l'élément fini de charger dans la page. Il est plus souvent utilisé sur la balise `<body>` pour lancer un script lorsque la page complète fini de charger. `<body onload="myFunction()">`
onclick	Appelé lorsque l'élément est cliqué (bouton gauche de la souris appuyé et relâché). `<p onclick="afficherSuite()">Cliquer le paragraphe pour lancer le script.</p>`
onmouseover	Appelé lorsque la souris passe au-dessus d'un élément. `<img onmouseover="transformerBigImg()" src="smiley.gif" alt="Smiley">`
onchange	Appelé lorsque un champ de formulaire change de valeur puis perd le focus. `<input type="text" onchange="validerValeur()">`
oninput	Appelé immédiatement lorsque un champ de formulaire change de valeur. `<input type="text" oninput="afficherValeursPossibles()">`

Lire la valeur d'un champ¶

À partir de l'objet document (le document présentement ouvert dans le navigateur), il existe plusieurs méthodes pour lire le contenu des champs.

Deux exemples :

Champs

Valider un formulaire¶

Valider un formulaire consiste à vérifier :

Si les champs obligatoire (required) ont une valeur
Si les champs respectent le format (exemple : email nécessite un @ et un .)
Si les pattern sont respectés (si on ajoute un pattern dans les attributs du champ)

Étapes :

Extraire le formulaire
Demander au navigateur de valider les champs
Vérifier la validité et stoper l'exécution si non valide

Champs

Quand valider ?

Cette méthode s'utilise avec les boutons de type button.

Les boutons de type submit font trois choses :

Valident déjà le formulaire
Essaient d'envoyer le formulaire à un serveur
Rafraîchissent la page

Ainsi, on ne doit pas utiliser de bouton submit si le traitement du formulaire est entièrement géré par notre code Javascript.

Créer du nouveau contenu¶

Les pages web sont souvent construites dynamiquement selon les besoins immédiats de l'utilisateur.

Exemples :

Page de résultats de recherche Google
Page de produits après application de filtres
Panier d'achats après ajout de produits

Ces pages ont du contenu dynamique qui est ajouté au besoin.

Creation

Appeler une fonction à partir d'une autre¶

Une notion importante en programmation est qu'une fonction n'a qu'une seule tâche.

Si cette dernière doit faire plus d'une tâche, alors elle appelle une autre fonction.

Exemple :

function validerInfosCommande()
{
    let formulaireClient = document.getElementById("info_reservation");

    let valide = formulaireClient.reportValidity();

    if (valide == false) {
        return;
    }

    //Appeler une autre fonction
    afficherResumeCommande();
}

function afficherResumeCommande()
{
     let formulaireCommande = document.getElementById("form_commande");

     /*Insérer ici le code pour l'affichage de la commande*/
}