BINARYFROG.FR
Accueil > Tutoriels > Développement > Apprendre le JAVASCRIPT

Apprendre le JAVASCRIPT

Vous avez mis en pratique le HTML et le CSS dans votre première page web. Cependant l'ensemble est statique est bien qu'il soit possible pour l'utilisateur de naviguer via des liens hypertextes il n'est pas possible de rendre le site interactif. Ça tombe bien c'est le rôle de JAVASCRIPT et c'est ce dont nous allons parler dans ce tutoriel.

Créer un script javascript et l'ajouter à son HTML:

Pour cela nous allons insérer la balise suivante :


    <script src="js/script.js"></script>

Une fois cette balise insérée nous allons pouvoir créer notre premier fichier js dans le dossier "js" et nous allons le nommer "script.js" comme indiqué dans la balise "< script >" récemment insérée dans la page HTML.

L'inspecteur

Dans les navigateurs modernes une fonctionnalité d'inspection est disponible, celle-ci comporte un onglet dédié à une console, voici un exemple avec Firefox.

Pour son usage : Consultez mon article sur le fonctionnement d'un site internet

Console log

Dans votre script "js/script.js" ajoutez la ligne suivante :


console.log("Hello World !")

Cela aura pour effet d'ajouter dans la console cela au chargement de la page :

Cette console nous permettra de voir les erreurs et d'afficher des informations.

Les variables


let mavariable = 0 // Peut s'écrire "var" au lieu de "let" mais cette manière de noter est obsolète

Cette ligne permet de créer la variable "mavariable" et de lui assigner la valeur 0.

Les constantes


const maconstante = 0

Cette ligne permet de créer la constante "maconstante" et de lui assigner la valeur 0, cette valeur contrairement à une variable ne pourra plus être modifiée.

Les tableaux


const etang = ["Grenouille", "Nenuphar", "Eau", "Herbe"];
let nenuphar = etang[1];
  1. Cette ligne permet de créer la constante "etang" et de lui assigner un tableau de valeurs. (Celles-ci sont indexées de 0 à l'infini)
  2. Cette ligne permet de créer la variable "nenuphar" et de lui assigner uniquement la valeur ayant pour index "1" dans le tableau "etang"

Les objets


const animal = {type:"Grenouille", poid:"40g", couleur:"verte"};
let type = animal.type
  1. Cette ligne permet de créer la constante "animal" et de lui assigner un objet. (Ses caractéristiques sont accesibles via les propriétés que vous avez créées)
  2. Cette ligne permet de créer la variable "tyoe" et de lui assigner uniquement la valeur ayant pour propriété le "type" de l'objet "animal"

Les opérateurs de comparaison

  • == : égal à
  • === : valeur égale et type égal
  • != : pas égal
  • !== : ni valeur ni type égaux
  • > : supérieur à
  • < : inférieur à
  • >= : supérieur ou égal à
  • <= : inférieur ou égal à
  • ? : opérateur ternaire

Les conditions


const animal = {type:"Grenouille", poid:"40g", couleur:"verte"};

if (animal.type == "Grenouille" && animal.couleur == "rouge") { // Si l'animal est de type grenouille et que ça couleur est rouge alors ...
  console.log("Animal toxique")
}
else { // Sinon
  console.log("Animal non toxique")
}

Autre possibilité :


const animal = {type:"Grenouille", poid:"40g", couleur:"verte"};

if (animal.type == "Grenouille" && animal.couleur == "rouge") { // Si l'animal est de type grenouille et que ça couleur est rouge alors ...
  console.log("Animal toxique")
}
else if (animal.type != "Grenouille") { // Sinon si l'animal est de type différent de grenouille alors ...
  console.log("Cet animal n'est pas une Grenouille")
}
else { // Sinon
  console.log("Animal non toxique")
}

Et enfin pour un nombre de conditions plus importantes :


const repas = ["Mouche", "Herbe", "Viande", "Insecte"]; // Tableau des repas possibles
let indexAleatoire = Math.floor(Math.random() * repas.length); // Génére un index aléatoire sur la longueur du tableau (length est une propriété disponible par défaut sur les tableaux)

switch (repas[indexAleatoire]) {
  case "Mouche":
    console.log("C'est bon la mouche Mmmmh !");
    break;
  case "Herbe":
    console.log("Beurk, pas de l'herble !");
    break;
  case "Viande":
    console.log("Beurk, je ne suis pas carnivore !");
    break;
  case "Insecte":
    console.log("J'adore les insectes !");
    break;
  default: // Toutes les valeurs sont connues cette option ne s'exécutera donc pas, cependant dans le cas d'une interaction avec un visiteur pour une valeur personnalisée la valeur par défaut peut être utile
    console.log("Je ne connais pas cet aliment");
}

Les boucles

Il existe plusieurs type de boucles, je vais cependant n'en retenir que 2 dans ce tutoriel.

La boucle "for" :


const repas = ["Mouche", "Herbe", "Viande", "Insecte"];
let i

for (i = 0; i < repas.length; i++) { // Pour i initialisé à 0 et tant que i est inférieur au nombre d'éléments du tableau, j'ajoute +1 à i
  console.log(repas[i]); // J'affiche ensuite le repas indexé sur la valeur de i à chaque tour de boucle
}

La boucle "while" :


const repas = ["Mouche", "Herbe", "Viande", "Insecte"];
let i = 0

while (i < repas.length) { // Tant que i est inférieur au nombre d'éléments du tableau alors
  console.log(repas[i]); // J'affiche la valeur du tableau avec en variable "i" comme index à chaque tour de boucle
  i++ // Et j'incrémente de +1 la variable "i" à chaque tour de boucle pour que le prochain tour elle passe à i+1 
}

Ces deux codes font la même chose, c'est à dire lister dans la console l'ensemble des éléments du tableau "repas".
Chaque instruction entre les {} est exécuté à chaque tour de boucle. Attention, il est fréquent de faire des boucles infinies, c'est à dire que la condition de sortie ici "i < repas.length" n'est jamais réalisée. Cela peut être le cas si "repas.length" est indéfini par exemple.

Les fonctions

Les fonctions en programmation servent à encapsuler du code pour l'organiser, le réutiliser et le rendre plus modulaire.



function ElementAleatoire(tableau) { // Nouvelle fonction avec un paramètre "tableau"
  const tab = tableau // Création d'une constante qui récupètre le paramètre de la fonction
  let indexAleatoire = Math.floor(Math.random() * tab.length); // Création d'un index aléatoire
  
  return tab[indexAleatoire]; // Retour de l'élément du tableau passé en paramètre avec une valeur aléatoire
}

const repas = ["Mouche", "Herbe", "Viande", "Insecte"]; // Tableau des repas possibles

switch (ElementAleatoire(repas)) { // Récupération d'un élément aléatoire du tableau
  case "Mouche":
    console.log("C'est bon la mouche Mmmmh !");
    break;
  case "Herbe":
    console.log("Beurk, pas de l'herble !");
    break;
  case "Viande":
    console.log("Beurk, je ne suis pas carnivore !");
    break;
  case "Insecte":
    console.log("J'adore les insectes !");
    break;
  default: // Toutes les valeurs sont connues cette option ne s'exécutera donc pas, cependant dans le cas d'une interaction avec un visiteur pour une valeur personnalisée la valeur par défaut peut être utile
    console.log("Je ne connais pas cet aliment");
}

Ainsi grâce à cette fonction, je peux utiliser pour un autre tableau la recherche aléatoire d'un élément

Portée

Toutes les variables et constantes créées dans des {} ne peuvent être utilisées que dans les {}. Celles créees à l'extérieur sont accessibles partout.

Sélectionner un élément HTML

Comme pour le CSS le JAVASCRIPT est en mesure de pourvoir sélectionner un élément ou un ensemble d'élément du code HTML.



let element = document.getElementById("monElement"); // Par son id ex : <div id="monElement"></div>
let elements = document.getElementsByClassName("maClasse"); // Par sa classe ex : <div class="maClasse"></div>
let elements = document.getElementsByTagName("div"); // Par sa balise ex : <div></div>

let element = document.querySelector("#monElement"); // Par sa balise ex : <div id="monElement"></div>
let elements = document.querySelectorAll(".maClasse"); // <div class="maClasse"></div>
let elements = document.querySelectorAll("div"); // <div></div>

let elements = document.querySelectorAll("[data-mon-attribut='valeur']"); // <div data-mon-attribut="valeur"></div>

Les évènements

Pour chaque element sélectionné il est possible d'ajouter un "listener" qui va attendre que l'évènement désiré se produise



element.addEventListener(event, function, useCapture);
  • element : L'élément HTML auquel vous souhaitez attacher l'événement.
  • event : Le type d'événement auquel vous souhaitez répondre (par exemple, "click", "mouseover", "keydown", etc.).
  • function : La fonction à exécuter lorsque l'événement se produit.
  • useCapture : (Facultatif) Un booléen indiquant si l'événement doit être capturé dans la phase de capture. La valeur par défaut est false.

Mise en pratique

Nous allons créer un pop-up au démarrage de la page visant à recommander par exemple un e-book en téléchargement ou l'inscription à une newsletter.
Pour cela insérons le code HTML suivant dans notre page HTML



<div id="popup">
    <button>Fermer</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt purus sapien,
    at consectetur nisi suscipit ac. Ut sed nunc vestibulum, suscipit quam quis, sagittis odio.
    Ut at tellus euismod, hendrerit nibh non, aliquam nisi.
    Curabitur congue metus vel justo tincidunt, ut tincidunt odio rutrum.
    Sed ipsum nisl, gravida at fringilla et, consectetur eget lorem. Sed nisi dolor,
    aliquet sit amet elit sit amet, ornare rhoncus lacus.</p>
    <form method="post"><input type="text" value="" placeholder="Votre adresse mail" /><input type="submit" value="Valider"></form>
</div>
Ici j'ai ajouté pour l'exemple un concept que nous n'avons pas abordé dans la partie HTML, c'est celui du formulaire.
Un formulaire va permettre à l'utilisateur de renseigner du contenu. Nous y reviendrons plus tard.

Et le code CSS suivant dans notre feuille de style :


#popup {
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
    background-color: white;
    border: 2px solid black;
    position: absolute;
    margin-top: 5%; 
}

#popup button {
    font-weight: bold;
    background-color: #eeeeee;
    padding: 10px;
    border: 1px solid #E6E6E6;
    margin: 5px;
    margin-top: 10px;
    text-transform: uppercase;
    width: 100%;
    margin: auto;
    text-align: right;
}

#popup p {
    text-align: justify;
    margin: 10px;
}

#popup input[type=text] {
    font-weight: bold;
    background-color: #eeeeee;
    padding: 10px;
    border: 1px solid #E6E6E6;
    margin: 5px;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
}

#popup input[type=submit] {
    font-weight: bold;
    background-color: darkseagreen;
    padding: 10px;
    border: 1px solid green;
    margin: 5px;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
}

@media screen and (max-width: 480px) {
    
    #popup {
        height: 60vh;
    }

}   

@media screen and (min-width: 480px) {

    #popup {
        height: 40vh;
    }
    
}
Ici j'ai ajouté pour l'exemple un concept que nous n'avons pas abordé dans la partie CSS, c'est celui du position que je met en "absolute". La propriété CSS position: absolute; est utilisée pour positionner un élément de manière absolue par rapport à son conteneur positionné le plus proche. Nous y reviendrons plus tard.

Maintenant ce que nous souhaitons c'est que lorsque l'utilisateur clique sur le bouton "Fermer" le pop-up n'appraisse plus sur la page.
Pour cela nous allons ajouter un identifiant au bouton :


    <button id="closepopup">Fermer</button>

Et nous allons créer notre premier script javascript dans le fichier "script.js" :



function hidediv(divId) { // Function qui attend 1 paramètre pour masquer un div
    let divAfermer = document.getElementById(divId); // Identifiant du div demandé par l'utilisateur
    divAfermer.style.display = "none"; // Masquer l'élément en lui attribuant un style display: none;
}

let closepoup = document.getElementById("closepoup"); // Création de la variable "closepoup" en récupérant l'ID "closepoup"
let popupId = "popup";  // Création de la variable "popupId" en récupérant l'ID "popup"

// Ajout d'un gestionnaire d'événements au clic sur closepoup
closepoup.addEventListener("click", function() {
    hidediv(popupId); // On exécute la fonction et on passe en paramètre l'ID à masquer
});

Cela aura pour effet de rendre le bouton "Fermer" fonctionnel suite au clic du visiteur :

Bravo ! Vous avez désormais mis en pratique du HTML, du CSS et du JAVASCRIPT.

Le code en entier :

HTML



    <!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Mon projet</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        
    <div id="popup">
        <button id="closepoup">Fermer</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt purus sapien,
        at consectetur nisi suscipit ac. Ut sed nunc vestibulum, suscipit quam quis, sagittis odio.
        Ut at tellus euismod, hendrerit nibh non, aliquam nisi.
        Curabitur congue metus vel justo tincidunt, ut tincidunt odio rutrum.
        Sed ipsum nisl, gravida at fringilla et, consectetur eget lorem. Sed nisi dolor,
        aliquet sit amet elit sit amet, ornare rhoncus lacus.</p>
        <form method="post"><input type="text" value="" placeholder="Votre adresse mail" /><input type="submit" value="Valider"></form>
    </div>

    <header>
        <h1>Mon projet</h1>
    </header>

    <nav>
        <ul id="monmenu">
            <li class="actif">Accueil</li>
            <li>A propos</li>
            <li>Contact</li>
        </ul>
    </nav>

    <main>
        
    <p><img src="images/test.png" alt="Mon article" /></p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt purus sapien,
    at consectetur nisi suscipit ac. Ut sed nunc vestibulum, suscipit quam quis, sagittis odio.
    Ut at tellus euismod, hendrerit nibh non, aliquam nisi.
    Curabitur congue metus vel justo tincidunt, ut tincidunt odio rutrum.
    Sed ipsum nisl, gravida at fringilla et, consectetur eget lorem. Sed nisi dolor,
    aliquet sit amet elit sit amet, ornare rhoncus lacus.
    Praesent porttitor mattis sem vitae mollis.
    Ut cursus sem ante, id tristique quam sodales eget.
    Fusce et dignissim metus, condimentum sodales velit.
    Quisque metus arcu, blandit nec elit sit amet, vestibulum pharetra eros.
    Etiam dignissim mauris non elementum tristique.
    Fusce facilisis ultricies ultrices.</p>
        
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt purus sapien,
    at consectetur nisi suscipit ac. Ut sed nunc vestibulum, suscipit quam quis, sagittis odio.
    Ut at tellus euismod, hendrerit nibh non, aliquam nisi.
    Curabitur congue metus vel justo tincidunt, ut tincidunt odio rutrum.
    Sed ipsum nisl, gravida at fringilla et, consectetur eget lorem. Sed nisi dolor,
    aliquet sit amet elit sit amet, ornare rhoncus lacus.
    Praesent porttitor mattis sem vitae mollis.
    Ut cursus sem ante, id tristique quam sodales eget.
    Fusce et dignissim metus, condimentum sodales velit.
    Quisque metus arcu, blandit nec elit sit amet, vestibulum pharetra eros.
    Etiam dignissim mauris non elementum tristique.
    Fusce facilisis ultricies ultrices.</p>

    </main>

    <footer> <a href="#">Mon lien</a> 2024  </footer>
        
    <script src="js/script.js"></script>

    </body>
</html>

CSS


body {
    margin: 0;
    padding: 0px;
    background-color: #eeeeee;
    font-family: Arial;
}

header {
    margin: auto;
    padding: 10px;
    background-color: #e6e6e6;
    margin-bottom: 10px;
}

h1 {
    font-size: 50px;
    text-align: center;
}

nav {
    width: 100%;
    margin: auto;
    display: flex;
}

main {
    margin: auto;
    border: 5px solid #E6E6E6;
    padding: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
}

main p img {
    width: 100%;
}

main p  {
    text-align: justify;
}

footer {
    width: 100%;
    margin: auto;
    text-align: center;
    background-color: #616161;
    height: 100px;
    padding: 20px;
    color: white;
}

footer a {
    color: white;
}

#monmenu {
    margin: auto;
    list-style-type: none;
    padding: 0;
}

nav #monmenu li {
    font-weight: bold;
    float: left;
    background-color: #eeeeee;
    padding: 10px;
    border: 1px solid #E6E6E6;
    list-style: none;
    margin: 5px;
    margin-top: 10px;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
}

nav #monmenu li.actif {
  background-color: darkslategrey;
  color: white;
}

#popup {
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
    background-color: white;
    border: 2px solid black;
    position: absolute;
    margin-top: 5%;
}

#popup button {
    font-weight: bold;
    background-color: #eeeeee;
    padding: 10px;
    border: 1px solid #E6E6E6;
    margin: 5px;
    margin-top: 10px;
    text-transform: uppercase;
    width: 100%;
    margin: auto;
    text-align: right;
}

#popup p {
    text-align: justify;
    margin: 10px;
}

#popup input[type=text] {
    font-weight: bold;
    background-color: #eeeeee;
    padding: 10px;
    border: 1px solid #E6E6E6;
    margin: 5px;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
}

#popup input[type=submit] {
    font-weight: bold;
    background-color: darkseagreen;
    padding: 10px;
    border: 1px solid green;
    margin: 5px;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
}

@media screen and (max-width: 480px) {

    main {
        width: 90%;
    }

    nav #monmenu li {
        width: 90%;
    }

    #popup {
        height: 60vh;
    }

}

@media screen and (min-width: 480px) {

    header {
        width: 100%;
    }

    main {
        width: 60%;
    }

    #popup {
        height: 40vh;
    }

}

JAVASCRIPT


function hidediv(divId) {
    // Sélection de l'élément à fermer
    let divAfermer = document.getElementById(divId);
    // Masquer l'élément en lui attribuant un style display: none;
    divAfermer.style.display = "none";
}

let closepoup = document.getElementById("closepoup"); 
let popupId = "popup";

// Ajout d'un gestionnaire d'événements au clic sur closepoup
closepoup.addEventListener("click", function() {
    hidediv(popupId);
});