Écrivez votre premier code JavaScript


  • Français


  • JavaScript est un langage de programmation plein d’agréables surprises. Beaucoup de gens découvrent d’abord JavaScript comme langage pour le Web. Il existe un moteur JavaScript dans tous les principaux navigateurs, il existe des frameworks populaires tels que JQuery, Cash et Bootstrap pour faciliter la conception de sites Web, et il existe même des environnements de programmation écrits en JavaScript. Il semble être partout sur Internet, mais il s’avère que c’est aussi un langage utile pour des projets comme Électron, une boîte à outils open source pour créer des applications de bureau multiplateformes avec JavaScript.

    JavaScript est un langage étonnamment polyvalent avec un large assortiment de bibliothèques pour bien plus que simplement créer des sites Web. Apprendre les bases de la langue est facile, et c’est une passerelle vers la construction de tout ce que vous imaginez.

    Installer JavaScript

    Au fur et à mesure que vous progressez avec JavaScript, vous souhaiterez peut-être des bibliothèques et des environnements d’exécution JavaScript avancés. Cependant, lorsque vous débutez, vous n’avez pas du tout besoin d’installer JavaScript. Tous les principaux navigateurs Web incluent un moteur JavaScript pour exécuter le code. Vous pouvez écrire du JavaScript à l’aide de votre éditeur de texte préféré, le charger dans votre navigateur Web et voir ce que fait votre code.

    Démarrer avec JavaScript

    Pour écrire votre premier code JavaScript, ouvrez votre éditeur de texte préféré, tel que Notepad++, Atom ou VSCode. Parce qu’il a été développé pour le Web, JavaScript fonctionne bien avec HTML, donc d’abord, essayez simplement du HTML de base :

    
    

    Save the file, and then open it in a web browser.

    To add JavaScript to this simple HTML page, you can either create a JavaScript file and refer to it in the page’s head or just embed your JavaScript code in the HTML using the <script> tag. In this example, I embed the code:

    <html>
      <head>
        <title>JS</title>
      </head>
      <body>
        <p id="example">Nothing here.</p>

        <script>
          let myvariable = "Hello world!";

          document.getElementById("example").innerHTML = myvariable;
        </script>
       
      </body>
    </html>

    Rechargez la page dans votre navigateur.

    Comme vous pouvez le voir, le <p> La balise telle qu’elle est écrite contient toujours la chaîne “Nothing here”, mais lorsqu’elle est rendue, JavaScript la modifie pour qu’elle contienne “Hello world” à la place. Oui, JavaScript a le pouvoir de reconstruire (ou simplement d’aider à construire) une page Web.

    Le JavaScript dans ce script simple fait deux choses. Tout d’abord, il crée une variable appelée myvariable et place la chaîne “Hello world!” dans ça. Enfin, il recherche dans le document actuel (la page Web telle que le navigateur la rend) tout élément HTML avec l’ID example. Quand il localise example, il utilise le innerHTML fonction pour remplacer le contenu de l’élément HTML par le contenu de myvariable.

    Bien sûr, l’utilisation d’une variable personnalisée n’est pas nécessaire. Il est tout aussi facile de remplir l’élément HTML avec quelque chose créé dynamiquement. Par exemple, vous pouvez le remplir avec un horodatage :

    
    

    Reload the page to see a timestamp generated at the moment the page is rendered. Reload a few times to watch the seconds increment.

    JavaScript syntax

    In programming, syntax refers to the rules of how sentences (or “lines”) are written. In JavaScript, each line of code must end in a semicolon (;) so that the JavaScript engine running your code understands when to stop reading.

    Words (or “strings”) must be enclosed in quotation marks ("), while numbers (or “integers”) go without.

    Almost everything else is a convention of the JavaScript language, such as variables, arrays, conditional statements, objects, functions, and so on.

    Creating variables in JavaScript

    Variables are containers for data. You can think of a variable as a box where you can put data to share with your program. Creating a variable in JavaScript is done with two keywords you choose based on how you intend to use the variable: let and var. The var keyword denotes a variable intended for your entire program to use, while let creates variables for specific purposes, usually inside functions or loops.

    JavaScript’s built-in typeof function can help you identify what kind of data a variable contains. Using the first example, you can find out what kind of data myvariable contains by modifying the displayed text to:

    <string>
    let myvariable = "Hello world!";
    document.getElementById("example").innerHTML = typeof(myvariable);
    </string>

    Cela rend “string” dans votre navigateur Web car la variable contient “Hello world!” Stockage de différents types de données (comme un entier) dans myvariable entraînerait l’impression d’un type de données différent sur votre exemple de page Web. Essayez de modifier le contenu de myvariable à votre numéro préféré, puis rechargez la page.

    Création de fonctions en JavaScript

    Les fonctions de programmation sont des processeurs de données autonomes. Ils sont ce qui rend la programmation modulaire. C’est parce que les fonctions existent que les programmeurs peuvent écrire des bibliothèques génériques qui, par exemple, redimensionnent des images ou gardent une trace du passage du temps pour que d’autres programmeurs (comme vous) les utilisent dans leur propre code.

    Vous créez une fonction en fournissant un nom personnalisé pour votre fonction suivi d’une quantité de code entre accolades.

    Voici une page Web simple comportant une image redimensionnée et un bouton qui analyse l’image et renvoie les dimensions réelles de l’image. Dans cet exemple de code, le <button> L’élément HTML utilise la fonction JavaScript intégrée onclick pour détecter l’interaction de l’utilisateur, ce qui déclenche une fonction personnalisée appelée get_size:

    <html>
      <head>
        <title>Imager</title>
      </head>
      <body>

        <div>
          <button onclick="get_size(document.getElementById('myimg'))">
            Get image size
        </button>
        </div>
       
        <div>
          <img style="width: 15%" id="myimg" src="penguin.png" />
        </div>
       
        <script>
          function get_size(i) {
            let w = i.naturalWidth;
            let h = i.naturalHeight;
            alert(w + " by " + h);
          }
        </script>
       
      </body>
    </html>

    Enregistrez le fichier et chargez-le dans votre navigateur Web pour essayer le code.

    Applications multiplateformes avec JavaScript

    Vous pouvez voir à partir de l’exemple de code comment JavaScript et HTML fonctionnent en étroite collaboration pour créer une expérience utilisateur cohérente. C’est l’une des grandes forces de JavaScript. Lorsque vous écrivez du code en JavaScript, vous héritez de l’une des interfaces utilisateur les plus courantes de l’informatique moderne, quelle que soit la plate-forme : le navigateur Web. Votre code est par nature multiplateforme, donc votre application, qu’il s’agisse d’un simple analyseur de taille d’image ou d’un éditeur d’images complexe, d’un jeu vidéo ou de tout ce que vous imaginez, peut être utilisée par tout le monde avec un navigateur Web (ou un ordinateur de bureau , si vous fournissez une application Electron).

    Apprendre JavaScript est facile et amusant. Il existe de nombreux sites Web avec des tutoriels disponibles. Il existe également plus d’un million de bibliothèques JavaScript pour vous aider à vous connecter avec des appareils, des périphériques, l’Internet des objets, des serveurs, des systèmes de fichiers et bien plus encore. Et pendant que vous apprenez, gardez notre Aide-mémoire JavaScript à proximité afin que vous vous souveniez des petits détails de la syntaxe et de la structure.

    Source

    Houssen Moshinaly

    Pour contacter personnellement le taulier :

    Laisser un commentaire

    Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    Copy code