JavaScript Tutoriel => Démarrer avec JavaScript

Remarques

JavaScript (à ne pas confondre avec Java ) est un langage dynamique faiblement typé utilisé pour les scripts côté client et côté serveur.

JavaScript est un langage sensible à la casse. Cela signifie que la langue considère les lettres majuscules comme étant différentes de leurs homologues minuscules. Les mots-clés en JavaScript sont tous en minuscules.

JavaScript est une implémentation fréquemment référencée de la norme ECMAScript.

Les rubriques de cette balise font souvent référence à l'utilisation de JavaScript dans le navigateur, sauf indication contraire. Les fichiers JavaScript ne peuvent pas être exécutés directement par le navigateur. il est nécessaire de les intégrer dans un document HTML. Si vous souhaitez essayer un code JavaScript, vous pouvez l'intégrer dans un contenu d'espace réservé comme celui-ci et enregistrer le résultat sous example.html :

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test page</title>
  </head>
  <body>
    Inline script (option 1):
    <script>
      // YOUR CODE HERE
    </script>
    External script (option 2):
    <script src="your-code-file.js"></script>
  </body>
</html>

Versions

Version	Date de sortie
1	1997-06-01
2	1998-06-01
3	1998-12-01
E4X	2004-06-01
5	2009-12-01
5.1	2011-06-01
6	2015-06-01
7	2016-06-14
8	2017-06-27

Utiliser l'API DOM

DOM signifie Document de référence O bjet M odèle. C'est une représentation orientée objet de documents structurés tels que XML et HTML .

La définition de la propriété textContent d'un Element est une façon de générer du texte sur une page Web.

Par exemple, considérez la balise HTML suivante:

<p id="paragraph"></p>

Pour changer sa propriété textContent , nous pouvons exécuter le code JavaScript suivant:

document.getElementById("paragraph").textContent = "Hello, World";

Cela sélectionnera l'élément avec le paragraph id et définira son contenu textuel sur "Hello, World":

<p id="paragraph">Hello, World</p>

(Voir aussi cette démo)

Vous pouvez également utiliser JavaScript pour créer un nouvel élément HTML par programmation. Par exemple, considérez un document HTML avec le corps suivant:

<body>
   <h1>Adding an element</h1>
</body>

Dans notre JavaScript, nous créons une nouvelle <p> avec une propriété textContent de et l’ajoutons à la fin du corps html:

var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //add the newly created element to the DOM

Cela va changer votre corps HTML à ce qui suit:

<body>
   <h1>Adding an element</h1>
   <p>Hello, World</p>
</body>

Notez que pour manipuler des éléments dans le DOM en utilisant JavaScript, le code JavaScript doit être exécuté après la création de l'élément correspondant dans le document. Pour ce faire, placez les balises JavaScript <script> après tous vos autres contenus <body> . Vous pouvez également utiliser un écouteur d'événement pour écouter, par exemple. window événement onload window , l'ajout de votre code à cet écouteur d'événements retardera l'exécution de votre code jusqu'à ce que tout le contenu de votre page ait été chargé.

Une troisième façon de vous assurer que tout votre DOM a été chargé consiste à envelopper le code de manipulation DOM avec une fonction de délai d'attente de 0 ms . De cette façon, ce code JavaScript est remis en file d'attente à la fin de la file d'attente d'exécution, ce qui permet au navigateur de terminer certaines tâches non-JavaScript qui attendaient d'être terminées avant de se lancer dans cette nouvelle partie de JavaScript.

Utiliser console.log ()

introduction

Tous les navigateurs Web modernes, NodeJ ainsi que presque tous les autres environnements JavaScript prennent en charge l'écriture de messages sur une console à l'aide d'une suite de méthodes de journalisation. La plus courante de ces méthodes est console.log() .

Dans un environnement de navigateur, la fonction console.log() est principalement utilisée à des fins de débogage.