Accueil    Javascript    Débuter en javascript
 



Débuter en javascript  Débuter en javascript

Index Javascript


Présentation



Pour débuter en javascript, il faut principalement essayer, prendre le temps de comprendre les bases avant de passer à des choses plus évoluées. Il est également important de prévoir un découpage simple lorsque l'on souhaite réaliser une fonctionnalité complexe, pour avoir d'une part une meilleure lisibilité et maintenabilité du code, mais aussi pour détecter plus rapidement des erreurs éventuelles.

Les exemples qui suivent montrent des utilisations très basiques du javascript mais laissent entrevoir une partie du potentiel de ce que l'on peut faire avec ce langage.



Insérer un script avec un message d'alerte





<!DOCTYPE html>
<html>
   <head>
      <title>Bienvenue !</title>

   </head>
   <body>

   <script type="text/javascript">
   //<![CDATA[
   alert("Bienvenue !");
   //]]>
   </script>

   </body>
</html>


Afficher l'exemple



Déclencher un évènement javascript





<!DOCTYPE html>
<html>
   <head>
      <title>Déclenchement d'un évènement javascript</title>

   </head>
   <body>

   <input type="button" value="Bienvenue" onclick="alert('Bienvenue !');" />

   </body>
</html>


Afficher l'exemple



Afficher un texte avec la fonction document.write





<!DOCTYPE html>
<html>
   <head>
      <title>Bienvenue !</title>

   </head>
   <body>

   <script type="text/javascript">
   //<![CDATA[
   document.write("Bienvenue !");
   //]]>
   </script>

   </body>
</html>


Afficher l'exemple



Obtenir et modifier le texte d'un élément html





<!DOCTYPE html>
<html>
   <head>
      <title>Modification du texte d'un élément html</title>

   </head>
   <body>

<p id="ptest">Paragraphe avec l'identifiant ptest</p>

   <script type="text/javascript">
   //<![CDATA[
   vat elem = document.getElementById("ptest");
   alert(elem.innerHTML);
   elem.innerHTML = "Mon texte modifié";
   //]]>
   </script>

   </body>
</html>


Afficher l'exemple



Modifier la classe d'un élément html





<!DOCTYPE html>
<html>
   <head>
      <title>Modification de la classe d'un élément html</title>

      <style type="text/css">
      .p-rendu{font-family:arial; font-size:12px; color:black;}
      .p-rendu-modif{font-family:verdana; font-size:14px; color:red;}
      </style>
   </head>
   <body>

   <p id="ptest" class="p-rendu">Paragraphe avec l'identifiant ptest</p>

   <input type="button" value="Modifier le style" onclick="ChangeClass();" />
   <script type="text/javascript">
   //<![CDATA[
   function ChangeClass(){
      var elem = document.getElementById("ptest");
      elem.className = "p-rendu-modif";
   }
   //]]>
   </script>

   </body>
</html>


Afficher l'exemple