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 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 effectuer des redirections JavaScript avec l'objet location

Dans ce cours découvrez l'objet location en détail avec ses propriétés et ses méthodes vous permettant d'accéder et de manipuler l'adresse URL de la page Web.


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>Location en JavaScript</title>
    
    <script type="text/javascript">

    function affiche()
    {
        var sTxt = "";

        sTxt += "Nom de domaine de la page actuelle :"+window.location.hostname+"<br />";

        sTxt += "Le chemin de la page actuelle :"+window.location.pathname+"<br />";

        sTxt += "Le protocole utilisé :"+window.location.protocol+"<br />";

        sTxt += "URL de la page actuelle :"+window.location.href+"<br />";

        //window.location.href="http://www.developpement-facile.com"; // redirection vers un site web

        var node = document.getElementById("write");
        node.innerHTML = "<p>"+sTxt+"<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>

III. Comment modifier les liens d'une page Web avec JavaScript et link

Dans ce cours vidéo, vous verrez comment modifier dynamiquement les liens de votre page Web.
Découvrez l'objet link avec ses propriétés et ses méthodes.


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>Link en JavaScript</title>
    
    <script type="text/javascript">

    function seeLinks()
    {
        var sTxt = "";

        sTxt += "Il y a : "+document.links.length+" liens sur cette page.";

        for (i=0;i<document.links.length;i++)
        {
          sTxt += "<br /><br />Le texte du lien "+(i+1)+" :"+document.links[i].text;
          sTxt += "<br />La cible du lien "+ (i+1)+" :"+document.links[i].target;
        }

        var node = document.getElementById("write");
        node.innerHTML = "<p>"+sTxt+"<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="seeLinks()" /><br />
		</form>
		
		<p>
		<a href="http://www.actionscript-facile.com" target="_blank">AS3</a><br>
		<a href="http://www.developpement-facile.com" target="_self">Dev Facile</a><br>
		</p>
	</center>

</body>

</html>

IV. Comment optimiser vos algorithmes avec la classe JavaScript Math

Dans ce cours, simplifiez vous la vie pour constituer vos algorithmes. Découvrez la classe Math en JavaScript avec ses propriétés et ses méthodes.


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>Math en JavaScript</title>
    
    <script type="text/javascript">

    function affiche()
    {
        var sTxt = "";

        var nRayon = prompt("Donnez le rayon de votre cercle :");
        var nPerimetre = 2*nRayon*Math.PI;
        sTxt += "Le périmètre du cercle est :"+nPerimetre+"<br />";

        sTxt += "Nombre aléatoire : "+aleatoire(13);

        var node = document.getElementById("write");
        node.innerHTML = "<p>"+sTxt+"<br /></p>";

 
        return;
    }


    function aleatoire(nVal)
    {
        return (Math.floor( nVal*Math.random()+1) );
    }

    </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. Profitez de la puissance des événements JavaScript avec Event

Capturez les événements extérieurs, comme une pression de touche du clavier, grâce à la classe Event en JavaScript.
Découvrez ses propriétés et ses méthodes dans ce cours vidéo.


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>Event souris en JavaScript</title>
    
    <script type="text/javascript">



    function affiche(event)
    {
        var nPosX = event.clientX;
        var nPosY = event.clientY;

        console.log("déplacement de la souris : x = "+nPosX+" et y = "+nPosY);

        var sTxt = "Coordonnées de la souris : x = "+nPosX+" et y = "+nPosY;

        window.status=sTxt;


        var node = document.getElementById("write");
        node.innerHTML = "<p>"+sTxt+"<br /></p>";

 
        return;
    }

    </script>

</head>

<body onmouseover="affiche(event)">
      
	<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(event)" /><br />
		</form>
	</center>

</body>

</html>

VI. Utilisez les cookies JavaScript pour conserver les informations de vos visiteurs

Dans ce cours, apprenez à utiliser les cookies pour stocker des informations dans le navigateur de votre visiteur.
En JavaScript vous pourrez facilement manipuler les cookies et les sécuriser.


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>Cookies en JavaScript</title>
    
    <script type="text/javascript">


    /**
     * Création d'un cookie Javascript
     * 
     * @param  {[type]} name     le nom du cookie
     * @param  {[type]} value    la valeur du cookie
     * @param  {[type]} nNbreDay le nomber de jours de validité du cookie
     * 0 -> le cookie rdy effacé à la fermeture du navigateur.
     * un nombre négatif de jours -> le cookie est effacé immédiatement.
     *  
     * @return /
     */
    function createCookie(name,value, nNbreDay)
    {
        var expires = "";

        if ( nNbreDay)
        {
            var oDate = new Date();
            oDate.setTime(oDate.getTime()+( nNbreDay*24*60*60*1000));
            expires = "; expires="+oDate.toGMTString();
        }

        document.cookie = name+"="+value+expires+"; path=/";
    }

    /**
     * Lecture d'un cookie
     * @param  {[type]} name le nom du cookie
     * @return {[type]}      la valeur du cookie
     */
    function readCookie(name)
    {
        var nameEQ = name + "=";
        var oCookieSplit = document.cookie.split(';');

        for(var i=0;i < oCookieSplit.length;i++)
        {
            var oCookie = oCookieSplit[i];
            while (oCookie.charAt(0)==' ')
                oCookie = oCookie.substring(1,oCookie.length);

            if (oCookie.indexOf(nameEQ) == 0)
                return oCookie.substring(nameEQ.length,oCookie.length);
        }
        return 0;
    }

    /**
     * Supprime un cookie
     * @param  {[type]} name le nom du cookie
     * 
     */
    function deleteCookie(name)
    {
        createCookie(name,"",-1);
    }


    function affiche(event)
    {
        var sTxt = "";
        var sName ="Nom du cookie";
        var sVal = "une nouvelle valeur"&#160;;

        var sCookie = readCookie(sName);

        if( sCookie == 0 )
        {
            sTxt = "il n'y a pas de cookie";
            createCookie(sName, sVal, 7);
        }
        else
        {
            document.cookie = sName+"="+sVal+";expires=Thu,31-Dec-2015 00:00:01 GMT;domain=dev-facile.com";
            var nCookieSize = document.cookie.length;
            sTxt = "Cookie déjà enregistré<br />Sa valeur : ";
            sTxt += sCookie;

            deleteCookie(sName);
            sTxt += "<br /> Cookie supprimé";
        }

        var node = document.getElementById("write");
        node.innerHTML = "<p>"+sTxt+"<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(event)" /><br />
		</form>
	</center>

</body>

</html>

VII. Optimisez vos formulaires JavaScript

Dans cette vidéo, découvrez la suite du cours sur les formulaires que vous pouvez suivre dans un autre article.
Ici vous verrez comment envoyer un mail à partir d'un formulaire et imprimer un formulaire en entier.


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>Formulaires en JavaScript</title>
    
    <script type="text/javascript">

    function donnesObligatoire()
    {
        if(form.nom.value == '')
                alert("ce champ est obligatoire");
        
        return;
    }

    function testCheckBox()
    {
        var sTxt = "";

        if(form.java.checked ==true)
          sTxt += "\nVous avez coché JavaScript !";

        if(form.as.checked ==true)
           sTxt += "\nVous avez coché ActionScript !";

        if(form.php.checked ==true)
           sTxt += "\nVous avez coché PHP !";

        alert(sTxt);
        return;
    }

    function testBtnRadio()
    {
       var sTxt = "JavaScript pas Facile...";

       if(form.javascript[0].checked ==true)
          sTxt = "\nYes JavaScript Facile !";


        alert(sTxt);

        return;
    }


    function testListe()
    {
        var sTxt = "";

        if(form.langage.selectedIndex == 0)
            sTxt = "Yes ActionScript Facile !";
        else if(form.langage.selectedIndex == 1)
            sTxt = "Yes PHP Facile !";
        else if(form.langage.selectedIndex == 2)
            sTxt = "Yes JavaScript Facile !";
        else
            sTxt = "Aucun choix...";

        alert(sTxt);
        return;
    }


    function testListeProg()
    {
      var sTxt = "Votre sélection : \n";

      var nb=form.prog.length;// le nombre de langages possibles

      // parcours de tous les éléments
      for (var i = 0;i<nb;i++)
      {
            if(form.prog.options[i].selected)
            {
               sLangageName=form.prog.options[i].value;
               sTxt += sLangageName+" est sélectionné\n";
            }
      }

      alert(sTxt);
      return;
    }

    </script>

</head>

<body>  

	<center>
	Appuyer sur le bouton Valider <br/><br/>
	
	<form id="form" name="form" method="" action="" >
	<p><input name="nom" type="text" id="nom"> </p>
	<p><input type="submit" name="Submit" value="Valider" onClick="donnesObligatoire()" /></p>
	
	<p>
	<td><input name="java" type="checkbox" id="java" value="checkbox">JavaScript</td>
	<td><input name="as" type="checkbox" id="as" value="checkbox">ActionScript</td>
	<td><input name="php" type="checkbox" id="php" value="checkbox">PHP</td>
	
	<input type="submit" name="Submit" value="Valider" onClick="testCheckBox()" />
	</p>
	
	<p>
	<td><input name="javascript" type="radio" id="javascript" value="oui"> Oui, JavaScript Facile</td>
	<td><input name="javascript" type="radio" id="javascript" value="non"> Non</td>
	
	<input type="submit" name="Submit" value="Valider" onClick="testBtnRadio()" />
	</p>
	
	<p>Quel est le langage le plus facile ? </p>
	<select name="langage" id="langage">
	  <option>ActionScript</option>
	  <option>PHP</option>
	  <option>JavaScript</option>
	  </select>
	  <input type="submit" name="Submit" value="Valider" onClick="testListe()" />
	 </p>
	
	  
	  <p>Quel est le langage le plus facile ? </p>
	  <select name="prog" multiple id="prog">
	    <option value="ActionScript">ActionScript</option>
	    <option value="PHP">PHP</option>
	    <option value="JavaScript">JavaScript</option>
	</select>
	<input type="submit" name="Submit" value="Valider" onClick="testListeProg()" />
	  </p>
	
	<p>
	  <input name="btn_erase" type="reset" id="btn_erase" value="Effacer les champs">
	</p>
	
	
	</form>

	</center>

</body>

</html>

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.