Horloge locale

Imprimer
A propos

Scripts

mon_fichier.htm

<!DOCTYPE html> <html lang="fr"> <HEAD> <TITLE>Test de mon script</TITLE> </HEAD> <BODY> Coucou ..<P> <P>... Truc </BODY> </HTML>
    Créez un fichier mon_fichier.htm

    Pour respecter la norme HTML nous ajoutons

    Le type de document : DOCTYPE html

    Un titre dans l'en-tête <HEAD>
    englobé par les balises <TITLE>

    Le corps du message commence par <BODY>

    Pour le moment on affiche Coucou puis Truc


Nous allons afficher la date

mon_fichier.htm

<!DOCTYPE html> <html lang="fr"> <HEAD> <TITLE>Test de mon script</TITLE> </HEAD> <BODY> Coucou ..<P> <script> document.write("Bonjour nous sommes le : "); document.write(new Date()); </script> <P>... Truc </BODY> </HTML>

    Insertion d'un script

    Nous allons insérer du script entre Coucou et Truc
    délimité par les balises script

    Ici on affiche avec document.write()
    la variable système new Date()

    Les instructions sont terminées par ;

    C'est simple, mais l'affichage ... n'est pas terrible.


Pour améliorer la présentation de la date

mon_fichier.htm

<!DOCTYPE html> <html lang="fr"> <HEAD> <TITLE>Test de mon script</TITLE> </HEAD> <BODY> Coucou ..<P> <script> date = new Date(); n_jour = date.getDate(); // de 1 a 31 if(n_jour<10) { n_jour = "0"+n_jour; } n_mois = date.getMonth(); // entre 0 et 11 mois = new Array('Janvier','Fevrier','Mars','Avril','Mai','Juin', 'Juillet','Aout','Septembre','Octobre','Novembre','Decembre'); j_sem = date.getDay(); // entre 0 et 6 jour = new Array('dimanche','lundi','mardi','mercredi','jeudi','vendredi','samedi'); annee = date.getFullYear(); resultat = jour[j_sem]+' '+n_jour+' '+mois[n_mois]+' '+annee; document.write(resultat); </script> <P>... Truc </BODY> </HTML>

    Il faut rajouter du code:

    Je récupère la variable système new Date()

    J'extrais le jour et je l'affiche en 2 chiffres,

    puis les variables date.getMonth() et date.getDay() et j'affecte un texte en fonction de leur valeur.

    Après avoir récupérer le siècle date.getFullYear()
    Il reste à afficher le résultat avec document.write()

    ***

    Les instructions se terminent par ;
    // précèdent les commentaires.

    Le code entre les balises script peut devenir assez long et alourdir la compréhension de votre fichier htm.


Bon, y'a moyen de faire plus clair

Nous allons simplifier le fichier mon_fichier.htm
et placer tout le code dans un fichier javascript : mon_java.js

mon_fichier.htm

<!DOCTYPE html> <html lang="fr"> <HEAD> <TITLE>Test de mon script</TITLE> <script src="mon_java.js"></script> </HEAD> <BODY> <P>Nous sommes le <script>date('mon_java');</script> et il est <script>heure('mon_java');</script> </BODY> </HTML>
 
mon_java.js

function date() { date = new Date(); n_jour = date.getDate(); // de 1 a 31 if(n_jour<10) { n_jour = "0"+n_jour; } n_mois = date.getMonth(); // entre 0 et 11 mois = new Array('Janvier','Fevrier','Mars','Avril','Mai','Juin', 'Juillet','Aout','Septembre','Octobre','Novembre','Decembre'); j_sem = date.getDay(); // entre 0 et 6 jour = new Array('dimanche','lundi','mardi','mercredi','jeudi','vendredi','samedi'); annee = date.getFullYear(); resultat = jour[j_sem]+' '+n_jour+' '+mois[n_mois]+' '+annee; document.write(resultat); return true; } // ---------------------------- Ajout Heure ------------------------------------------- function heure() { h = date.getHours(); if(h<10) { h = "0"+h; } m = date.getMinutes(); if(m<10) { m = "0"+m; } resultat = h+':'+m; document.write(resultat); return true; }