Javascript – Les bases

Tout savoir sur les bases en Javascript

Javascript est un langage de programmation utilisé principalement pour le web. Il est aussi utilisé pour les serveurs accompagné de nodeJS.

Quel est l’utilité de Javascript sur le web ?

Javascript aide à dynamiser les pages web. Mettre à jour des informations, afficher ou cacher des éléments d’un simple clique sans rechargement de page et complètement transparent à l’oeil d’un utilisateur. Javascript est extrêmement rapide, ce qui renvoi une très bonne expérience utilisateur.
Toutes les singlePage du web fonctionne avec Javascript, ou TypeScript pour Angular.

Premiers pas avec Javascript

Nous allons commencé par créer une simple page web nommé index.html (Le nom n’a pas d’importance..). On va y insérer ceci :

<!DOCTYPE html>
<html lang="fr">
<head>    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Tutoriels Javascript - Les bases</title>
</head>
<body>    
</body>
</html>

Plusieurs possibilités pour insérer du javascript..

1ere solution : entre les balises SCRIPT :

<script type="text/javacript">
// SCRIPT ICI
</script>

2ème solution : dans un fichier .js (conseillé) :

<script type="text/javacript" src="script.js"></script> <!-- sans async ou defer -->
<script async="" type="text/javascript" src="script.js"></script> <!-- en asynchrone -->
<script defer="" type="text/javascript" src="srcipt.js"></script> <!-- en mode diffr -->

Nous pouvons rajouter “async” ou “defer” dans la balise script.
async : sert à charger le script en asynchrone, ce qui rend le chargement de la page web plus rapide en chargeant le Javascript sans bloquer le rendu HTML.
defer : sert à différé l’exécution du fichier js à la fin.

Nous pouvons placer nos balises script à deux endroits différents :

– Soit dans le head
– Soit à la fin du body

Dans cet exemple je les placerais à la fin du body, mais vous pouvez faire comme bon vous semble 🙂 .

Voici notre rendu :

<!DOCTYPE html>
<html lang="fr">
<head>    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Tutoriels Javascript - Les bases</title>
</head>
<body>    

    <script async tpye="text/javascript" src="script.js">
</body>
</html>

Nous avons alors ces 2 fichiers comme ci-dessous :

Les deux fichiers HTML et JS

Nous allons maintenant attaquer le Javascript !

Tout d’abord il est important de savoir le commencement !

Pour sélectionner un élément nous allons utiliser l’interface ‘document’.

Qu’est-ce qu’une interface et qu’est-ce que ‘document’ ?

Une interface est un ensemble de méthodes, tout simplement.

‘document’ est donc une interface qui à plusieurs méthodes.

Voici la documentation nécessaire à ‘document’ : https://developer.mozilla.org/fr/docs/Web/API/Document

Pour le moment notre fichier JS est vide, je vous proposes plusieurs choses à faire, a vous de choisir, vous pouvez :

– afficher / cacher un élément HTML en Javascript
– Modifier la valeur d’un élément HTML en Javascript

Nous allons d’abord créer un élément HTML à afficher ou cacher :

<!DOCTYPE html>
<html lang="fr">
<head>    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Tutoriels Javascript - Les bases</title>
</head>
<body>    
    <div id="element">
        <h1>Ma super page en JS</h1>
        <h2>VIVE LE JAVASCRIPT</h2>
    </div>
    <script async tpye="text/javascript" src="script.js">
</body>
</html>

On va rajouter un peu de css pour bien distinguer le rendu :

#element{
    background-color: #520000;
    color: white;
    border: 2px solid black;
    box-shadow: 10px 5px 5px black;
}

Nous pouvons enregistrer et voir le rendu qui devrait être comme ceci :

Rendu de la page en HTML

Nous allons créer un bouton, afin de pouvoir afficher et cacher l’élément :

<!DOCTYPE html>
<html lang="fr">
<head>    <!-- partie head -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Tutoriels Javascript - Les bases</title>
</head>
<body>    <!-- partie body -->
    <button>Afficher / Cacher</button> <!-- notre boutton afficher / cacher -->
    <div id="element"> <!-- notre div a cacher ou afficher et son contenu -->
        <h1>Ma super page en JS</h1>
        <h2>VIVE LE JAVASCRIPT</h2>
    </div>
    <script async tpye="text/javascript" src="script.js"> <!-- notre script -->
</body>
</html>

Comme dis plus haut, nous allons utiliser l’interface ‘document’.
Nous avons créé une div portant l’id ‘element’, nous allons donc récupérer cette div :

Dans notre fichier script.js :

var madiv = document.getElementById('element'); /* Nous recuperons l'element portant l'id 'element' afin de le stocker dans 'madiv' */

Ensuite, nous allons créer une fonction qui sera appelé à chaque clique sur le boutton, pour cela , nous avons un événement en Javascript appelé ‘onclick’.
https://www.w3schools.com/tags/ev_onclick.asp

Nous allons juste ajouter un attribut à notre boutton :

<button onclick="myFunc()">Afficher / Cacher</button>

Retournons maintenant dans notre script.js, et ajoutons la fonction :

var madiv = document.getElementById('element'); /* Nous recuperons l'element portant l'id 'element' afin de le stocker dans 'madiv' */

function myFunc(){
    /*
        Une fonction simple et pratique peut etre utilise ici, il y a plusieurs maniere de le faire, mais la plus simple est d'utiliser classList.toggle. 
   */
    madiv.classList.toggle('hide'); /* recupere les classes et verifie si toggle existe, si oui, la class nommee 'hide' s'enlevera, si non, la class 'hide' s'ajoutera. */
}

Nous allons donc maintenant créer la class hide :

.hide{
    display: none;
}

Nous pouvons enregistrer et observer le résultat !

Essayer aussi la modification de données en temps réel !

Modifier des valeurs en Javascript

Nous allons voir ensemble comment modifier une valeur en Javascript d’un élément HTML en utilisant l’interface ‘document’.

Nous allons d’abord compléter notre HTML afin d’avoir le nécessaire :

<!DOCTYPE html>
<html lang="fr">
<head>    <!-- head -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Tutoriels Javascript - Les bases</title>
</head>
<body> <!-- body --> 
    <button onclick="myFunc()">Changez le titre</button> <!-- boutton avec function qui changera la value du titre -->   
    <h1 id="titre">Mon titre</h1> <!-- notre titre -->
    <script async tpye="text/javascript" src="script.js">
</body>
</html>

J’ai rajouté l’attribut “onclick” sur le bouton, “onclick” est un événement qui appellera la fonction passés à chaque clique.

Nous allons maintenant voir la partie Javascript :

var titre = document.getElementyId('titre'). /* recupere l'element avec l'id 'titre' */
function myFunc(){
    titre.innerText = "Bonjour, j'ai change mon titre !"; /* On recupere titre, puis on change la valeur avec 'innerText' */
}

Vous n’avez plus qu’à enregistrer et observer le résultat ! 🙂

Voilà, c’est fini pour aujourd’hui, n’hésitez pas à aller voir d’autres Tutoriels Javascript !

N’hésitez pas à laisser des commentaires !

Au prochain tuto ! Bye 😀

By root

5 thoughts on “Javascript – Les bases”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.