Introduction au JavaScript


précédentsommairesuivant

II. Syntaxe

II-A. Instructions - Conditions - Boucles

Il est fortement recommandé de terminer l'ensemble des instructions JavaScript par un point virgule (même si, en effet, ce n'est pas toujours nécessaire).
Les instructions ci-dessous ne se terminent pas par un point virgule :

Les définitions de fonctions
Sélectionnez

function maFonction()
{
    ...............
}
Les conditions
Sélectionnez

if (var1==var2)
{
    ...............
}
else
{
    ...............
}

Syntaxe des conditions :

  • égalité : == (cette syntaxe est également utilisée pour comparer deux chaînes de caractères)
  • différent de : != (même remarque que ci-dessus)
  • inférieur ou égal à : =<
  • supérieur ou égal à : >=
  • inférieur à : <
  • supérieur à : >
  • et logique : &&
  • ou logique : ||
  • identique à : ===
  • non identique à : !==
  • et bit à bit : &
  • ou bit à bit : |
Les boucles for
Sélectionnez

for (i=0; i<5; i++)
{
    ...............
}
Les boucles while
Sélectionnez

while (a<b)
{
    ...............
}
 
do
{
    ...............
}while (a<b)

II-B. Scripts dans l'en-tête du fichier HTML

Tout script est encadré des balises <script> </script>, on précise également le type MIME grâce à l'attribut type :

Script dans l'en-tête du fichier HTML
Sélectionnez

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    <title>Titre</title>
 
    <script type="text/javascript">
    <!--
 
 
    //-->
    </script>
 
    </head>
<body>
 
</body>
 
</html>

Les commentaires restent présents pour une raison historique : les premiers navigateurs n'interprétant pas le JavaScript et pour éviter un affichage du texte dans la page web, les scripts étaient encadrés de commentaires.
De plus, omettre les commentaires amènent les validateurs à tenter d'interpréter le code JavaScript comme du HTML, ce qui implique des erreurs de validation non justifiées.

Ne pas confondre les commentaires HTML et les commentaires JavaScript.

Commentaire HTML
Sélectionnez

<!--    Ceci est un commentaire HTML -->
Commentaire JavaScript
Sélectionnez

// Ceci est un commentaire JavaVascript sur une ligne
/* Ceci est un commentaire JavaScript
sur plusieurs lignes */ 

Ces balises script sont généralement insérées dans le head de la page, ou entre les balises body. Dans ce dernier cas les scripts sont exécutés au fur et à mesure du chargement de la page.
Il est possible d'insérer du code JavaScript dans les balises HTML. Cependant, il faut que le code inséré soif bref pour des questions de lisibilité (dans le cas des événements).

II-C. Scripts externes

On peut enregistrer le script dans un fichier indépendant de la page Web. Dans ce cas, on précise dans le head le lien vers ce fichier. L'avantage est que l'on peut ainsi réutiliser le script pour une autre page.

Lien vers un script externe
Sélectionnez

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>    </title>
        <script type="text/javascript" src="MonFichier.js"></script>
    </head>
<body>
 
</body>
</html>

II-D. Commentaires

Il existe les commentaires « multilignes » : ils commencent par /* et se terminent par */

Commentaire JavaScript
Sélectionnez

/* un commentaire 
sur plusieurs lignes */ 

et des commentaires sur une ligne : ils débutent par //

Commentaire Javascript
Sélectionnez

// un commentaire une ligne

Il semblerait que la présence des accents et des apostrophes dans ces commentaires contribuerait à une mauvaise interprétation des scripts. Cette source d'erreurs peut-être levée en précisant le charset du fichier JavaScript.
Les DOCTYPE en HTMLFAQ : les DOCTYPE
De plus, l'utilisation de commentaires multilignes peut perturber l'interprétation dans le cas d'utilisation d'expressions régulières du fait de la présence possible des caractères /* ou */ dans celles-ci.

II-E. Objets internes

Les objets internes JavaScript commencent par une majuscule : String, Math, Array, Boolean, Date, Number, Function (à ne pas confondre avec le mot-clef function), RegExp, etc…

Les méthodes ainsi que les propriétés d'un objet commencent par une minuscule. Toutes les méthodes internes à JavaScript sont sensibles à la casse (« case sensitive »).

  • exemple de méthodes : toLowerCase() ; getElementById() ; charAt() ; fromCharCode() ; etc.
  • exemple de propriétés : id ; type ; innerHTML ; tagName ; style ; etc.

L'accès à une méthode ou à une propriété d'un objet se fait en plaçant un point entre le nom de l'objet et la propriété ou la méthode.

 
Sélectionnez

var monObjet = document.getElementById("idObjet");
monObjet.style.display = "none";

ou

 
Sélectionnez

document.getElementById("idObjet").style.display = "none";

Le langage JavaScript est un langage « case sensitive » : les variables, les méthodes, les attributs, les mots-clefs, etc. ont une syntaxe très précise. Le non-respect de cette règle peu conduire à une mauvaise exécution des scripts.

II-F. Accolades

Plusieurs écoles : les accolades ouvrantes sont placées sur la même ligne que la condition ou la boucle ; ou un retour à la ligne est effectué pour l'accolade ouvrante.

Accolades ouvrantes en fin de ligne
Sélectionnez

function maFonction() {
    if (test1) {
        .................
        .................
    }
    else{
        .................
        .................
    }
 
    for (i=0; i<n; i++){
        .................
        .................
    }
}
Accolades ouvrantes après un retour à la ligne
Sélectionnez

function maFonction() 
{
    if (test1) 
    {
        .................
        .................
    }
    else
    {
        .................
        .................
    }
 
    for (i=0; i<n; i++)
    {
        .................
        .................
    }
}

On préconisera la seconde syntaxe à la première dans la mesure où elle offre une meilleure lisibilité dans le code.

II-G. Variables

En JavaScript les variables ne sont pas typées. Il faut néanmoins les déclarer grâce au mot clef var. Une variable peut, au cours du programme, être tour à tour un entier, une chaîne de caractères, ou un booléen. Même si cette possibilité de programmation est offerte, il ne faut surtout pas s'y laisser tenter. Une variable doit garder le même type du début à la fin. Et donc ne pas hésiter à créer autant de variables que nécessaire.

A ne pas faire
Sélectionnez

var i;         //déclaration
i = 2;         //entier
i = "bonjour";    //chaîne de caractères
i = true;    //booléen
Ce qu'il faut faire
Sélectionnez

var i, chaine, bool;    //Déclaration de 3 variables
i = 2;
chaine = "bonjour";
bool = true;

Bannir des noms de variables :

  • du genre : truc, machin, toto, bidule… ;
  • « kilométriques » : ceciEstLeNomDeMaJolieVariable ;
  • avec des accents : maChaîneDeCaractères.

Les variables ne doivent pas être des mots-clefs JavaScript : var, form, int, document, etc..


précédentsommairesuivant

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Auteur. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.