Horloge en javascript [10 mn de lecture - paru le 5/6/2004 7:24:42 PM - Public : Débutant]

Auteur

Marc Edouard HODEBOURG Elève-Ingénieur Supinfo Paris Promotion SUPINFO 2007    Lui écrire    Tous les projets de cet auteur    Le mini-CV de cet auteur

2. Le code

Ci dessous la source d'un horloge dynamique, (le fonctionnement de cette horloge est expliquer apres) :

* Déclaration des fonctions

Pour déclarer ou définir une fonction, on utilise le mot (réservé) function.
La syntaxe d'une déclaration de fonction est la suivante :

function nom_de_la_fonction(arguments) {
... code des instructions ...
}

Le nom de la fonction suit les mêmes règles que celles qui régissent le nom de variables (nombre de caractères indéfini, commencer par une lettre, peuvent inclure des chiffres...). Pour rappel, Javascript est sensible à la case. Ainsi fonction() ne sera pas égal à Fonction(). En outre, Tous les noms des fonctions dans un script doivent être uniques.

La mention des arguments est facultative mais dans ce cas les parenthèses doivent rester. C'est d'ailleurs grâce à ces parenthèses que l'interpréteur Javascript distingue les variables des fonctions.

Le fait de définir une fonction n'entraîne pas l'exécution des commandes qui la composent. Ce n'est que lors de l'appel de la fonction que le code de programme est exécuté

* La déclaration de variable

Les variables peuvent se déclarer de deux façons :

• soit de façon explicite. On dit à Javascript que ceci est une variable.
  La commande qui permet de déclarer une variable est le mot var . Par exemple
  var Numero = 1
  var Prenom = "Luc"
  
• soit de façon implicite. On écrit directement le nom de la variable suivi de la valeur que l'on lui attribue et Javascript s'en accommode. Par exemple
  Numero = 1
  Prenom = "Luc"

* L' objet date

• new Date();
  Cette méthode renvoie toutes les informations "date et heure" de l'ordinateur de l'utilisateur.
  
• var DateActuel = new Date();
  Ces informations sont enregistrées par Javascript sous le format dans la variable DateActuel :

  "Fri Dec 17 09:23:30 1998"

On recupere ensuite dans la variable tous les elements dont on a besoin :

• var heure = DateActuel.getHours();
  Retourne l'heure dans variable_date sous forme d'un entier compris entre 0 et 23.
  
• var minutes = DateActuel.getMinutes();
  Retourne les minutes dans variable_date sous forme d'un entier compris entre 0 et 59.
  
• var secondes = DateActuel.getSeconds();
  Retourne les secondes dans variable_date sous forme d'un entier compris entre 0 et 59.

* Les conditions

• "Si, sinon si..." ou l'expression if
  A un moment ou à un autre de la programmation, on aura besoin de tester une condition. Ce qui permettra d'exécuter ou non une série d'instructions.

  Dans sa formulation la plus simple, l'expression if se présente comme suit

if (heure == 0) {
heure = "0" + heure;
}

Ainsi, si la condition est vérifiée, les instructions s'exécutent. Si elle ne l'est pas, les instructions ne s'exécutent pas et le programme passe à la commande suivant l'accolade de fermeture.

Ici, on affecte a la vartiable horloge, les valeurs des autre variables, on y ajoute aussi des champs texte :

<font size = 5> et </font>

Grace à ces champs texte, on pourra définir la taille de l'horloge, une couleur, un style etc etc ...

• <font size = 5> : pour la taille de l'horloge.
• <font color="#FF0000"> : ici pour avoir notre horloge en rouge.
• <font title="mi projet lapo"> : pour mettre un commentaire sur un texte (il faut trouver l'utilité :-))
• <font style="background:#FF0000"> : Pour avoir une couleur de fond.
• <font face="Arial"> : pour changer la police.

Il ne faut pas oublier le </font> a la fin pour fermer la balise <font>

Un exemple en image :

Les 2 if(s) :

Le premier if, vérifie la présence"Id" dans la page si oui il affecte la valeur de notre variable "Horloge".

Le second if, vérifie la présence de "layers" dans la page si oui , il écrit la valeur de la variable "Horloge".