Javascript, dynamiser votre site

Rendre votre site dynamique permettra de rendre plus attrayant la navigation sur vos pages pour les utilisateurs. Le javascript permettra de créer de rendre plus vivante vos pages. Si vous avez déjà créé des pages internets pour votre site, vous vous êtes certainement rendu-compte qu’une fois chargée, la page est relativement statique. Afin de créer des animations, des modification sans recharger une page voire même de créer une zone de chat, il existe le javascript.

Javascript

Le javascript est un langage de programmation orienté objet à part entière mais qui n’est pas forcément considéré comme tel. Si vous le pensez aussi, permettait moi de vous dire que vous vous trompez (je sais que ce n’est pas très bien d’affirmer cela aussi franchement mais parfois un choc est nécessaire).

Je ne vais pas vous faire un cours sur l’histoire du javascript mais sachez qu’il est très vieux et est rapidement devenu incontournable. Tous les jours, lors de vos navigations, des scripts javascripts sont exécutés sans même que vous en ayez conscience. Si vous créez des sites, vous avez certainement déjà utilisés du javascript.

Il est principalement utilisé côté client (c’est-à-dire sur votre navigateur) dans différentes situations :

  • validation d’un formulaire
  • création d’animation
  • modification de la fenêtre sans rechargement
  • envoi et réception de requête vers le serveur
  • ….

Mais il n’est pas cantonné à ça, il peut être utilisé en serveur (comme Apache, Nginx) avec l’utilisation de NodeJs. Son fonctionnement bas niveau en fait un langage efficace et puissant mais qui nécessite plus d’effort lors de la mise en place (mise en place de port d’écoute, redirection …). Vous allez donc pouvoir faire :

  • un serveur web
  • un serveur de chat
  • une application
  • modifier la mise en page

Javascript bien qu’ancien devient de plus en plus populaire car, vous l’aurez compris, ses utilisations sont diverses.

Utilisation de Javascript

Les puristes vont certainement me haïr, nous allons voir ici deux méthodes pour l’utilisation de Javascript :

  • le javascript pur et dur
  • Jquery

Le Javascript pur et dur fonctionne sans importer de bibliothèque particulière mais il peut y avoir des problèmes de compatibilité en fonction des navigateurs, l’Ajax va permettre de corriger certaines de ces incompatibilité (notamment lors de requête HTTP)

Pour ces deux utilisations, nous allons utilisé une base commune, index.php:

<DOCTYPE! html>
<html>
     <head>
          <title>Test Javascript</title>
          <meta charset="utf-8" />
     </head>
     <body>
          <!-- Entre ces balises le corps de ma page -->
          <div id="info_champ"></div>
          <input type="text" id="champ" />
          <button id="valider" >Envoyer</button>
     </body>
</html>

Nous allons simplement voir pour l’exemple, la validation d’un champ, la mise à jour d’une div avec le contenu de ce champ en fonction d’un bouton. Si le champ est trop court ou trop long, un message sera transmis.

Javascript pur et dur

Tout d’abord, Javascript est implémenté de base dans la quasi-totalité des navigateurs actuels, pour faire appel à du script javascript, il suffira d’indiquer simplement le code dans des balises propres.

Vous pouvez :

  • soit intégré le code directement dans la page
  • soit intégré un fichier dans les balises <head>

Où placer le code

Vous avez le choix, vous pouvez le placer dans les balises head mais on préféra juste avant la balise </body>, ceci pour une question de performance.

Exemple

Insérer le code suivant avant la balise </body> :

<script type="text/javascript">
  document.getElementById("champ").value = "";
  document.getElementById("champ").addEventListener("keyup", update);
  function update() {
    var champ = document.getElementById("champ");
    var info = document.getElementById('info_champ');
    var resultat = document.getElementById('resultat');
    var bouton = document.getElementById('valider');
    if(champ.value.length < 15 && champ.value.length > 5){
      info.style.color = "green";
      champ.style.backgroundColor = "green";
      info.innerHTML = "Longueur correct";
      bouton.disabled = false;
    }else{
      info.style.color = "red";
      champ.style.backgroundColor = "red";
      info.innerHTML = "Pas assez ou trop de caractères";
      bouton.disabled = true;
    }
  }
  document.getElementById("valider").addEventListener("click", affichage);
  function affichage(){
    var champ = document.getElementById("champ");
    var resultat = document.getElementById('resultat');
    resultat.innerHTML = champ.value;
          resultat.style.fontWeight = "bold";
  }
  update();
</script>
javascript dynamiser votre site
javascript dynamiser votre site
javascript dynamiser votre site
javascript dynamiser votre site

Vous pouvez également créer un fichier script.js, placer au même niveau que le fichier index.html. Y écrire le script précédent sans les balises <script> et </script>.

Au sein de la balise <head>, intégrer  : <script type="text/javascript" src="script.js"></script>

JQuery

JQuery est une bibliothèque à importer sur votre page avant de pouvoir l’utiliser. Elle permet de régler pas mal de problème de compatibilités avec les différents navigateurs tout en continuant d’utiliser le Javascript.

Comment intégrer JQuery

Pour intégrer JQuery vous allez devoir importer la bibliothèque soit en téléchargeant et en indiquant dans votre page le script soit en passant par une bibliothèque en ligne.

Intégrer JQuery en local

Commencer par télécharger la dernière version sur le site jquery.com, dézipper et le placer dans votre arborescence et y faire référence dans le <head> : <script type="text/javascript" src="/chemin/vers/jquery.js"></script>

Intégrer jquery en ligne

Vous pouvez passer par par un fournisseur CDN, il en existe principalement 3 :

Il s’agit des versions non-minimisées.

Pour les intégrer, il suffit de placer : <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Exemple

En reprenant le même exemple que précédemment :

<script type="text/javascript">
  jQuery(document).ready(function(){
    var champ = $('#champ');
    var info = $('#info_champ');
    var bouton = $('#valider');
    var resultat = $('#resultat');
    champ.val('');
    $('#champ').keyup(function(){					
      if(champ.val().length < 15 && champ.val().length > 5){
        info.css('color','green');
        champ.css('backgroundColor',"green");
        info.html("Longueur correct");
        bouton.prop('disabled', false);
      }else{
        info.css('color','red');
        champ.css('backgroundColor',"red");
        info.html("Pas assez ou trop de caracteres");
        bouton.prop('disabled', true);
      }
    });
    $('#valider').click(function(){
      resultat.html(champ.val());
      resultat.css('fontWeight','bold');
      info.html('Mise a jour du champ');
      champ.removeAttr('style');
      champ.val('');

    });
  });
</script>

Le résultat sera identique au premier script purement javascript.

Conclusion

Javascript est un outil puissant qu’il faut apprendre à apprivoiser. Il peut paraître un peu compliqué car il utilise principalement les évènements tout en étant orienté objet mais permettra une programmation efficace.

Laisser un commentaire