JavaScript – Principes de base

LEÇON

 

Qu'est-ce que JavaScript ?

JavaScript est un langage de programmation conçu pour offrir au développeur web la possibilité de créer des scripts qui seront exécutés côté client.

Rappel du concept de programmation côté client :

  • Le développeur prépare un script et le mettre à disposition sur le serveur comme du HTML ou des images.
  • Le navigateur récupère le script au même temps que le HTML, CSS, fichiers images, etc
  • Le script est exécuté par le navigateur au moment prévu par le développeur (soit au moment du chargement de la page, soit suite à un événement type clic souris ou autre)
  • Remarque : Plusieurs scripts peuvent être préparés pour et agir sur la même page web

 

Utilité

  • contenu animé (diaporama d'images par exemple)
  • interaction dynamique avec l'utilisateur (aide/validation pendant le remplissage d'un formulaire par exemple)
  • communications / rafraîchissements asynchrones (appels AJAX pour mettre à jour une partiue de la page par exemple)
  • modification de contenu ou de styles de façon interactive (cacher/afficher/modifier/restyler les éléments affichés selon l'action de l'utilisateur par exemple)

 

Quel rapport avec le langage de programmation Java ?

A part quelques similarités dans la syntaxe, JavaScript n'a rien à voir avec Java.

 

Exemple

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Display none</title>

<script type="text/javascript" language="JavaScript"><!--
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>

    </head>
    <body>
        <h1>FAQ</h1>
        <h3><a href="javascript:ReverseDisplay('q1')">Quelle est la réponse à la grande question sur la vie, l'univers et le reste ?</a></h3>
        <div id="q1" style="display:none;"><p>42.</p></div>
        <h3><a href="javascript:ReverseDisplay('q2')">Quelle est la question ?</a></h3>
        <div id="q2" style="display:none;"><p>Quel est le produit de six par neuf ?</p></div>
    </body>
</html>

 

 


 

EXERCICES

  1. Imaginer devoir décrire JavaScript à quelqu'un qui ne le connaît pas. Comment faites-vous?
  2. Recréer le document HTML ci-dessus et l'ouvrir dans un navigateur. Remarquer que le code en JavaScript est visible à l'internaute via le code source de la page !