Afficher le mois et le jour en toutes lettres

1. L'objet Array

Pour afficher en toutes lettres le jour de la semaine et le mois, nous utilisons l'objet Array qui permet de représenter une collection d'objets simples tels que des valeurs numériques et des chaînes de caractères ou des objets plus complexes commes des dates, des images, des formulaires. On traduira le terme array en français par 'vecteur' ou 'tableau' ou encore, pour reprendre la terminologie de Microsoft, par le mot 'collection'.

Les jours de la semaine 'lundi', 'mardi', 'mercredi', ... forment une collection. Pour représenter cette collection en JavaScript, nous écrivons :

nomsDesJours = new Array("dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi") ;

De même, on peut écrire pour les noms de mois :

nomsDesMois = new Array("janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre") ;

Dans ces instructions nous faisons appel au constructeur d'objet Array() (un objet natif, donc une majuscule initiale !) en lui transmettant en paramètre la liste des valeurs à conserver. Il est possible de créer un tableau vide et de le remplir par après :

T1 = new Array() ;

On accède à un élément d'un tableau par son indice. Celui-ci n'est autre qu'une valeur numérique indiquant sa position dans le tableau, sachant que la première position a l'indice 0. L'indice de l'élément auquel on doit accéder est indiqué entre crochets. Ainsi nomDeMois[0] vaut 'janvier'. On se souvient que la méthode getMonth() renvoie le numéro du mois dans l'année et que le mois de janvier est en position 0. Par conséquent, nomDeMois[d.getMonth()] vaut "janvier".

2. Mieux structurer les scripts : les fonctions

Il est conseillé de regrouper le code dans une fonction que l'on conserve dans l'élément head du document ou même dans un autre fichier et d'appeler cette fonction depuis l'élément body. Cette technique permet de séparer le code html et la programmation JavaScript et de faciliter ainsi le travail collaboratif par lequel plusieurs personnes travaillent sur le même projet mais à des tâches différentes: une personne est chargée du contenu et de la mise en page en HTML, une autre gère les couleurs et la typographie par les feuilles de style et un programmeur veille à la dynamique et à l'interactivité. Un autre avantage de l'utilisation des fonctions est de retarder l'exécution d'un script jusqu'à l'échéance d'un événement (souris, clavier, horloge, ...).

2.1. Créer une fonction

On crée une fonction au moyen de l'instruction function et du nom de la fonction suivi d'une paire de parenthèses qui serviront à recevoir les paramètres éventuels. Le corps de la fonction est formé d'une paire d'accolades qui contiennent les instructions.

function mfFonctionVide()
{

}

Nous prendrons l'habitude de préfixer les noms de fonction par mf afin de distinguer plus facilement ce qui est notre création et ce qui est JavaScript.

Le code ci-dessous illustre la création d'une fonction dans l'élement head :
<head>
<script type="text/javascript">

function mfJourDeLaSemaine()
{
nomsDesJours = new Array("dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi") ;
j = new Date().getDay() ;
document.write("Nous sommes " + nomsDesJours[j] ) ;
}
</script>
</head>

Et voici comment il faut appeler cette fonction depuis la section body. Notons bien que l'appel de la fonction doit lui aussi être placé entre balises <script>

<body>
<script type="text/javascript">


mfJourDeLaSemaine() ;

</script>
</body>

2.2. Renvoyer une valeur

La fonction mfJourDeLaSemaine() écrit le nom du jour dans le document. On pourrait concevoir une fonction qui détermine le jour de la semaine sans toutefois l'afficher. Il faudrait alors que la fonction renvoie le résultat à l'instruction appelante. C'est là le rôle de l'instruction return.

<script type="text/javascript">
// déclaration globale car en dehors d'une fonction
nomsDesJours = new Array("dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi") ;

function mfJourDeLaSemaine() {
j = new Date().getDay() ;
return nomsDesJours[j] ;

}

</script>

Pour exploiter le résultat renvoyé par la fonction, il faut soit l'affecter à une variable soit l'utiliser dans une expression.

Affectation du résultat d'une fonction à une variable

<body>
<script type="text/javascript">


jds = mfJourDeLaSemaine() ;
document.write("Nous sommes " + jds ) ;

</script>
</body>

Utilisation du résultat dans une expression

<body>
<script type="text/javascript">


document.write("Nous sommes " + mfJourDeLaSemaine()) ;


</script>
</body>

3. Variables globales et locales

Dès qu'elle a été initialisée, une variable est connue dans toute la page et par toutes les fonctions de cette page. Pour limiter la visibilité d'une variable à une fonction, il faut la déclarer à l'intérieur de cette fonction à l'aide d'une instruction var. Elle est ainsi déclarée localement et est cachée à toutes les fonctions de la page.

<head>
<script>

function foo(){
plats = new Array("macaroni", "spaghetti", "canellonni") ;
}

function bar() {
document.write(plats[1]) ;
}

</script>

</head>

<body>
<script>

foo() ;
bar() ;

</script>

</body>

Dans le script ci-dessus, la fonction bar() affiche correctement plats[1] parce que la fonction foo() a initialisé le tableau plats.

Pour créer une variable plats connue uniquement de la fonction foo(), il faut déclarer cette variable par l'instruction var, comme ci-dessous :

function foo(){
var plats = new Array("macaroni", "spaghetti", "canellonni") ;
}

4. Scripts externes

Il est possible de conserver le code JavaScript dans un fichier externe. Cela permet de le réutiliser dans toutes les pages d'un projet. Le fichier ne doit contenir aucun élément html, même pas l'élément script. Dans la page appelante, on indique l'origine de la source du script par l'attribut src.

<html>
<head>
<script
src="../scripts/cb.js">
</script>

</head>

<body>
<script type="text/javascript">

jds = mfJourDeLaSemaine() ;
document.write("Nous sommes " + jds ) ;
</script>
</body>
</html>

Dans le fichier cb.js

nomsDesJours = new Array("dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi") ;
function mfJourDeLaSemaine() {
j = new Date().getDay() ;
return nomsDesJours[j] ;

}

Valid XHTML 1.0!