I. Introduction▲

JavaScript est devenu un langage indispensable dans le développement des sites Web d'aujourd'hui.
Apprenez à utiliser ce puissant langage de programmation, en utilisant une méthode de formation structurée, pas à pas et orientée pratique.
Avec la méthode "Développement Facile", vous allez apprendre à développer des applications Web à la fois performantes, que vos visiteurs adoreront !
Retrouvez un extrait de la formation gratuite "JavaScript Facile", composée de plus de 40 cours professionnels pour vous aider à progresser rapidement avec la maîtrise du langage JavaScript.

II. Comment utiliser toutes les possibilités de string avec JavaScript▲

Découvrez dans cette vidéo comment manipuler les chaînes de caractères en JavaScript grâce à l'objet String.
Apprenez à utilisez les nombreuses méthodes de cet objet.


Ci-dessous, l'exemple de code.

 
Sélectionnez

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<!-- 
	/**

	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.

	  Contributor(s) :

	 */
	 --> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>String en JavaScript</title>
    
    <script type="text/javascript">

    function affiche()
    {
        var texte=prompt("Saisissez une chaîne de caractères :","Saisissez ici votre chaîne de caractères");

        document.write("<br />Le texte en gras :<br />");
        document.write(texte.bold());

        document.write("<br /><br />Le texte en italique : <br />");
        document.write(texte.italics());

        document.write("<br /><br />Le texte clignotant : <br />");
        document.write(texte.blink());

        document.write("<br /><br />Le texte en vert : <br />");
        document.write(texte.fontcolor("green"));

        document.write("<br /><br />Le texte barré : <br />");
        document.write(texte.strike());

        document.write("<br />Le texte en différentes tailles :");

        for (i=0;i<5;i++) 
           document.write( "<br />"+texte.fontsize(i*2) );

        return;
    }

    </script>

</head>

<body>
	<center>
		<div id="write"></div>
      	<br /><br />
      	Appuyer sur le bouton Valider <br/><br/>

 	    <input type="button" value="Valider" onclick="affiche()" /><br />
	</center>
</body>
</html>


Ci-dessous, un autre exemple de code.

 
Sélectionnez

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<!-- 
	/**
	
	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.
	
	  Contributor(s) :
	
	 */
	 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>String en JavaScript</title>
    
    <script type="text/javascript">

    function affiche()
    {
        var texte=prompt("Quel est votre texte ?", "Saisissez votre texte");

        var nPos1=prompt("A partir de quel caractère (sa position) découper votre texte ?", " Saisissez le numéro du caractère de départ");

        var nPos2=prompt("Jusqu'à quelle position ?", "Saisissez le numéro du dernier caractère");

        var sTxt = texte.substring(nPos1, nPos2);
        document.write("Voici la partie de votre texte : "+sTxt.fontcolor("blue"));

        return;
    }

    </script>
</head>

<body>
  
  <center>
      <div id="write"></div>
      <br /><br />
      Appuyer sur le bouton Valider <br/><br/>

      <input type="button" value="Valider" onclick="affiche()" /><br />
  </center>

</body>

</html>

III. Comment utiliser les fonctionnalités date avec JavaScript▲

L'objet date est très utilisé dans la réalisation de sites et applications Web, il vous sera indispensable.
Découvrez dans cette vidéo comment le manipuler en JavaScript.


Ci-dessous, l'exemple de code

 
Sélectionnez

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<!-- 
	/**

	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.

	  Contributor(s) :

	 */
	 --> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Date en JavaScript</title>
    
    <script type="text/javascript">

    function affiche()
    {
        oDate = new Date;
        var jour = oDate.getDate();
        
        if (jour<10)
          jour="0"+jour;
      

        var mois = oDate.getMonth()+1;
        if (mois<10)
          mois="0"+mois;

        var annee = oDate.getFullYear();

        var node = document.getElementById("write");
        node.innerHTML = "<p>Nous sommes le "+jour+"/"+mois+"/"+annee+"</p>";

        getHeure();
        return;
    }

    function getHeure() 
    {
        var oDate = new Date();

        heures = oDate.getHours();
        minutes = oDate.getMinutes();
        secondes = oDate.getSeconds();

        if(heures<10) heures="0"+heures;
        if(minutes<10) minutes="0"+minutes;
        if(secondes<10) secondes="0"+secondes;

        document.form.heure_locale.value=heures+"h"+minutes+"min"+secondes+"s"&#160;;

        setTimeout("getHeure()", 900);
    }

    </script>

</head>

<body>
 
  <center>
      <div id="write"></div>
      <br /><br />
      Appuyer sur le bouton Valider <br/><br/>
      
      <form name="form" method="post" action="">
        <input name="heure_locale" type="text" id="heure_locale" size="20">
        <input type="button" value="Valider" onclick="affiche()" /><br />
      </form>
  </center>

</body>
</html>

IV. Les tableaux JavaScript array n'auront plus de secret pour vous▲

L'utilisation des tableaux est un concept essentiel dans n'importe quel langage de programmation.
Découvrez dans cette vidéo l'objet array et ses méthodes en JavaScript.


Ci-dessous, l'exemple de code

 
Sélectionnez

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<!-- 
	/**

	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.

	  Contributor(s) :

	 */
	 --> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Array en JavaScript</title>
    
    <script type="text/javascript">

    function affiche()
    {
        var aDebut=["lundi", "mardi", "mercredi"] ;
        var aFin=["jeudi", "vendredi", "samedi", "dimanche"];

        var sSemaine = aDebut.concat(aFin);

        var aSemaine2 = ["lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi", "dimanche"];

        sPartie1 = aSemaine2.splice(0,2);// supprime les 2 premiers éléments du tableau aSemaine2
        sPartie2 = aSemaine2.splice(1,2);


        var aSemaine3 = ["mardi", "mercredi", "jeudi", "vendredi", "samedi", "dimanche"];
        aSemaine3.unshift("Lundi");// ajoute lundi


        var node = document.getElementById("write");
        node.innerHTML = "<p>"+sSemaine+"<br/>Les 2 premiers jours de la semaine : "+sPartie1+"<br />Les 2 derniers jours de la semaine : "+sPartie2+"<br />La semaine complète : "+aSemaine3+"<br /></p>";

 
        return;
    }


    </script>

</head>

<body>
  
  <center>
      <div id="write"></div>
      <br /><br />
      Appuyer sur le bouton Valider <br/><br/>
      
      <form name="form" method="post" action="">
        <input type="button" value="Valider" onclick="affiche()" /><br />
      </form>
  </center>

</body>

</html>

V. Utilisez la puissance des tableaux array à plusieurs dimensions avec JavaScript▲

Maintenant que vous maîtrisez les tableaux simples, vous allez découvrir l'utilisation des tableaux à plusieurs dimensions en JavaScript.


Ci-dessous, l'exemple de code

 
Sélectionnez

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<!-- 
	/**

	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.

	  Contributor(s) :

	 */
	 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Array en JavaScript</title>
    
    <script type="text/javascript">

    function affiche()
    {
        var aSemaine = new Array();
        aSemaine[0] = new Array();
        aSemaine[1] = new Array();
        aSemaine[2] = new Array();
        aSemaine[3] = new Array();
        aSemaine[4] = new Array();

        aSemaine[0][0]="lundi";
        aSemaine[0][1]="PHP";

        aSemaine[1][0]="mardi";
        aSemaine[1][1]="JavaScript";

        aSemaine[2][0]="mercredi";
        aSemaine[2][1]="ActionScript";

        aSemaine[3][0]="jeudi";
        aSemaine[3][1]="ASM";

        aSemaine[4][0]="vendredi";
        aSemaine[4][1]="MySQL";

        var node = document.getElementById("write");
        node.innerHTML = "<p>Voici le code du lundi : "+aSemaine[0][1]+" le code du jeudi : "+aSemaine[3][1]+"<br /></p>";

 
        return;
    }

    </script>

</head>

<body>
  
  <center>
      <div id="write"></div>
      <br /><br />
      Appuyer sur le bouton Valider <br/><br/>
      
      <form name="form" method="post" action="">
        <input type="button" value="Valider" onclick="affiche()" /><br />
      </form>
  </center>

</body>

</html>

VI. Manipulez les images directement avec JavaScript▲

Découvrez dans cette vidéo comment manipuler les images avec JavaScript.
Créez des bannières défilantes ou des albums photo grâce à ce cours.
Apprenez à utiliser l'objet image avec ses propriétés et ses méthodes.


Ci-dessous, l'exemple de code. Cliquez ici pour récupérer les fichiers images de l'exempleCliquez ici pour récupérer les images de l'exemple

 
Sélectionnez

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<!-- 
	/**

	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.

	  Contributor(s) :

	 */
	 --> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Images en JavaScript</title>
    
    <script type="text/javascript">

    var oImage1 = new Image(513,139);
    oImage1.src = "21-logo-dev-facile.png";

    var oImage2 = new Image(180,180);
    oImage2.src = "21-logo-as3-facile.jpg";

    function affiche()
    {
        var node = document.getElementById("write");
        node.innerHTML = "<p>Mise à jour des images !<br /></p>";

        updateImage(oImage2);
        return;
    }


    function updateImage(oImage) 
    {
        document.images[1].src = oImage.src;
        
        return;
    }

    var iNbreImageMax = 4;
    var iNumeroImage = 0;

    function changeImage()
    {
      iNumeroImage++;
      if ( iNumeroImage >= iNbreImageMax ) iNumeroImage = 1;// repars à la première

      document.images[0].src = "21-"+iNumeroImage+".png";
      return;
    }

    function startChrono()
    {
        var id=setInterval("changeImage()", 5000);
        return;
    }

    </script>

</head>

<body onLoad="startChrono()">
  
  <center>
      <div id="write"></div>
      <br /><br />
      <img src="21-logo-as3-facile.jpg" name="logo">
      <br /><br />
      Appuyer sur le bouton Valider <br/><br/>
      
      <form name="form" method="post" action="">
        <input type="button" value="Valider" onclick="affiche()" /><br />
      </form>

      <p>
        <img src="21-logo-dev-facile.png" onMouseOver="updateImage(oImage2)" onMouseOut="updateImage(oImage1)">
      </p>
  </center>

</body>

</html>

VII. Comment l'objet JavaScript history vous donne un tas d'informations▲

Accédez à l'historique des pages du navigateur de vos internautes grâce à l'objet history.
Dans ce cours, découvrez l'objet history au travers de ses méthodes et d'un exemple concret.

VIII. Recevez gratuitement la formation "JavaScript Facile"▲

Si vous souhaitez aller plus loin dans la création d'applications performantes, vous pouvez recevoir gratuitement la formation "JavaScript Facile" avec des cours pas à pas, accompagnés des codes source commentés.
Ainsi, vous progressez à votre rythme, avec un suivi personnalisé et individuel. Vous avez la possibilité de poser toutes vos questions techniques sous chaque cours.
Vous allez ainsi découvrir comment utiliser la technologie AJAX, la syntaxe XML, XSL, le DOM, la gestion des événements, les tableaux array, les classes Math, Date…

Formation JavaScript Facile !
Cliquez simplement ici pour recevoir gratuitement la formation "JavaScript Facile" !Cliquez simplement ici pour recevoir gratuitement la formation JavaScript Facile !

IX. Remerciements▲

Merci beaucoup à l'équipe de rédaction de Developpez.com de contribuer à la diffusion de ce tutoriel.
J'adresse également un merci tout particulier à Jacques Jeanjacques_jean pour sa relecture orthographique.