Démarrage rapide avec Javascript

View more Tutorials:

1- L'objectif de la leçon

Javascript vs ECMAScript

Javascript et  ECMAScript sont deux noms différents, mais ils entretiennent des relations très étroites. Javascript lui-même est un langage développé selon les normes définies par ECMAScript. C'est pourquoi nous mettons les thèmes JavaScript et ECMAScript alternativement.
-
Si vous êtes débutant de  Javascript Je vous recommande de lire le post suivant pour mieux comprendre cette relation :
Javascript est un langage de programmation. Les extraits de code Javascript intégrés dans HTML permet au site Web d'interagir avec des utilisateurs. 
L'exemple suivant est une page HTML avec une étiquette <img src = "light-off.gif"> représentant une lumière qui est éteinte (off). Javascript peut changer la valeur de l'attribut src (<img src="light-on.gif">) pour remplacer l'ancienne image par une nouvelle image, l'image de la lumière qui est allumée (on).
L'objectif de cette leçon est de vous aider à comprendre comment intégrer JavaScript dans HTML et à vous entraîner avec quelques exemples simples. Tous ces exemples ne visent qu'à vous aider à vous familiariser avec Javascript avant de passer à des sujets plus détaillés. 

2- Écrire Javascript dans HTML

Le code  Javascript peut être écrit à l'intérieur de  HTML, plus précisément il est écrit dans l'étiquette  <script></script> :
Les étiquettes  <script> peuvent être mises dans l'étiquette  <head> ou dans l'étiquette  <body>. Tout d'abord, nous allons observer un exemple simple ci-dessous :
Créez un fichier  helloworld.html avec le contenu :
helloworld.html
<!DOCTYPE html>
<html>
   <head>
      <title>Hello Javascript</title>

      <script type = "text/javascript">

         function sayHello()  {
             alert("Hello Everyone!");
         }
      </script>

   </head>
   <body>

      <button onclick="sayHello()">Click me!</button>

   </body>
</html>

 
Exécutez le fichier helloworld.html sur le navigateur et observez le résultat :
Dans l'exemple ci-dessus, dans l'étiquette <script></script>, je crée la fonction sayHello(). Lorsque l'utilisateur clique sur le bouton, la fonction sayHello() est appelée et affiche un dialog avec le contenu "Hello Everyone!". Ne vous inquiétez pas si vous ne savez pas quelle est la fonction, ignorez temporairement cela.  

3- Écrire Javascript dans un fichier séparé

Écrivez le code Javascript dans un fichier séparé, puis  HTML va importer ce fichier pour qu'il vous permet de gérer le code  Javascript mieux et le fichier  Javascript puisse partagé en plusieur fichiers  HTML.
Le code  Javascript est écrit dans un fichier avec l'extension telle que  js. Les fichiers  HTML peuven importer le fichier  Javascript susmentionné à utiliser.
Le suivant est un exemple avec la lumière (Light). Dans cet exemple, nous avons besoin de 4 fichiers :  

light.js
function turnLightOn()  {
  var img = document.getElementById("myImage");
  img.src = "light-on.gif";
}

function turnLightOff()  {
  var img = document.getElementById("myImage");
  img.src = "light-off.gif";
}

 
light.html
<!DOCTYPE html>
<html>
   <head>
      <title>Light</title>

      <script type="text/javascript" src="light.js"></script>
      
   </head>
   <body>
      <h2>What Can JavaScript Do?</h2>
      <p>JavaScript can change HTML attribute values.</p>
      <p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

      <button onclick="turnLightOn()">Turn on the light</button>
      <img id="myImage" src="light-off.gif" style="width:100px">
      <button onclick="turnLightOff()">Turn off the light</button>
   </body>
</html>

 

View more Tutorials: