Vous êtes dans la categorie Tutoriel Javascript

Vérifier et valider les champs d'un formulaire avec JQuery et le plugin Validate

Rédigé par fab1 aucun commentaire

Il est possible depuis longtemps de vérifier et valider que les informations renseignées dans un formulaire HTML sont au bon format à l'aide de JavaScript, ce qui évite d'envoyer un formulaire pour rien au serveur. Cela évite des aller-retour sur votre serveur car il n'est pas possible pour l'internaute de soumettre un formulaire qui n'est rempli avec des informations correcte.

Bien évidemment, il serait malgré tout impensable de se passer de la vérification coté serveur car il est possible de désactiver le JavaScript dans votre navigateur préféré et surtout de trafiquer les informations envoyées à l'aide de Greasemonkey pour ne citer que lui. D'ailleurs, n'oubliez pas d'aller faire un tour sur les tutoriels concernant l'utilisation des expressions régulières, qui permettent un filtrage très fin et un contrôle précis en PHP des informations envoyées dans le formulaire.

La partie vérification du formulaire JavaScript est donc uniquement là pour valider les informations d'un internaute lambda, si notre script JavaScript trouve des erreurs de saisies dans un formulaire, pourquoi l'envoyer au serveur ? De plus, la partie vérification et validation du formulaire HTML en JavaScript permet de guider l'internaute en direct, si il y a une lettre dans un numéro de téléphone, si le mot de passe n'est pas assez sécurisé, etc ... Mais surtout, gardez bien à l'esprit qu'il faudra de toute façon bien revérifier les informations soumises en PHP sur votre serveur, sinon c'est s'exposer à de gros soucis avec les vilains pirates qui feront tout pour faire tomber votre application en ligne.

En réalité, ce n'est pas vraiment du JavaScript seul que nous allons utiliser, mais le célèbre JQuery qui est une bibliothèque JavaScript très utile, elle simplifie très fortement un très grand nombre de choses. N'oubliez d'aller voir mes autres tutoriels qui utilisent JQuery avec l'utilisation de l’auto-complétion dans un formulaire de recherche, ou encore avec un cas un peu plus concret qui permet de créer un moteur de recherche de fichiers avec auto complétion.

Dans ce tutoriel, nous allons voir l'utilisation de base du plugin jquery.validate qui vous permet de valider de façon très simple et en direct si un champ de formulaire est correctement rempli. Il ne sera pas possible de soumettre le formulaire HTML au serveur tant que les informations ne seront pas correctement renseignées, ce qui permet déjà d'éliminer beaucoup de cas d'erreurs et si votre serveur subit de grosses montées en charge, de ne pas soumettre des formulaires pour rien à vérifier en PHP, enfin au moins pour les internautes "normaux".

Il va donc falloir récupérer les éléments dont nous avons besoin à savoir :

- La bibliothèque JQuery (sans elle ça va vraiment être super compliqué sinon :p)

- Le plugin jquery.validate

- Le fichier additional-methods.js

- Le fichier de langue messages_fr.js (permet d'avoir les messages d'erreurs en Français)

Comme je suis gentil, vous pouvez récupérer l'ensemble de ces éléments dans l'archive zip qui est disponible au téléchargement à cette adresse, cela vous permettra d'éviter d'aller chercher partout sur la toile.

Vous avez maintenant l'ensemble des éléments de base pour commencer ce tutoriel dans de bonnes conditions, on passe donc à la partie HTML et notre formulaire d'exemple. Attention, il faudra bien faire attention au chemins des fichiers pour les différents scripts que vous allez appeler dans le head. J'ai choisi de tout ranger dans un dossier "js" mais libre à vous de faire autrement tant que les chemins sont correct. Vous remarquerez que j’appelle le fichier script.js, je vais en parler juste après cette première partie dédiée à la page de base. Ensuite un petit bout de CSS permet d'aligner un minimum les champs du formulaire et enfin nous avons notre formulaire qui est tout ce qu'il y a de plus basique. La clause class="required" vous permet d'indiquer qu'il faut rendre la saisie de ce champ obligatoire, si vous ne souhaitez pas l'appliquer sur l'ensemble des champs il suffit de retirer cette classe sur l'input.

<html>
<head>
<title>Reposcript.com - Tuto JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="./js/jquery.js"></script>
	<script type="text/javascript" src="./js/jquery.validate.js"></script>
	<script type="text/javascript" src="./js/additional-methods.js"></script>
	<script type="text/javascript" src="./js/messages_fr.js"></script>
	<script type="text/javascript" src="./js/script.js"></script>

<style>
span{
display: inline-block;
width: 250px;
}
</style>
</head>

<body>
<form id="formulaire" method="POST" action="">
	<div><span>Nom :</span><input type="text" name="nom" class="required"/></div>
	<div><span>Prenom :</span><input type="text" name="prenom" class="required"/></div>
	<div><span>Tel :</span><input type="digits" name="tel" class="required"/></div>
	<div><span>Email :</span><input type="email" name="mail" class="required"/></div>
	<input type="submit" name="submit" value="Envoyer"/>
</form>
</body>
</html>

On va donc maintenant s'occuper de notre fichier script.js qui sera le seul que l'on va vraiment écrire. Il déterminera le comportement de base du plugin plugin jquery.validate. Nous verrons d'un un autre tutoriel comment faire des choses un peu plus poussées, je voulais ici vraiment me concentrer sur le fonctionnement de base. Le contenu de notre fichier script.js :

$(document).ready(function(){
    // Ajout d'une méthode
    $.validator.addClassRules({
    checkinput:{
        required: true,
        digits: true
    },
    checkemail:{
        required: true,
        email: true
    }	
	
});
    // Execution du plugin du plugin
    $("#formulaire").validate();
});

Avec le code suivant, si le nom ou le prénom est vide vous aurrez un message d'erreur, si le numéro de téléphone ne comporte pas que des chiffres ce sera le cas aussi et enfin vous pourrez même vérifier l’émail. Voila pour la base avec ce plugin jquery.validate. On verra prochainement comment personnaliser les messages d'erreurs, ajouter d'autres clauses de vérifications et etc ...

Classé dans : Tutoriel Javascript

Comment réaliser un moteur de recherche de fichiers avec autocomplétion sur du XML

Rédigé par fab1 aucun commentaire

Dans ce tutoriel, vous allez apprendre à créer un petit moteur de recherche de fichier, avec dans un premier temps la création au préalable d'un fichier index qui sera au format XML. Ensuit, nous verrons comment explorer cette index et surtout exploiter l’auto complétion qui est toujours une fonctionnalité agréable pour guider la recherche et l'affiner au fur et à mesure. C'est ce que l'on retrouve sur le moteur de recherche Google par exemple, qui propose des mots au fur et à mesure que l'on écrit notre requête. D'ailleurs un tutoriel concernant l'autocomplétion est déjà disponible sur le site, mais il exploite une base de données MySQL, ici notre auto-complétion se fera via l'exploitation d'un fichier XML, ce qui implique quelques changements par rapport à l'autre tutoriel.

On passe donc maintenant aux choses sérieux et l'on va commencer par la génération de notre fichier XML qui va nous servir d'index car il n'est pas possible de rechercher directement sur les fichiers et donc profiter de cette fameuse auto-complétion. Le but n'est pas de générer proprement notre fichier XML car ce n'est pas l'objet de ce tutoriel, pour la création de ce fichier XML, on va donc le faire via notre petit script suivant :

<?php
header('Content-type: text/plain');

$id = 0;
$xml = '<?xml version="1.0" encoding="UTF-8"?>'."\n";
$xml .= '<index>'."\n"; 
$dir = __DIR__;
$iterator = new RecursiveDirectoryIterator($dir, FilesystemIterator::SKIP_DOTS);

foreach(new RecursiveIteratorIterator($iterator) as $file) {
	$id = $id + 1;
	$xml .= '	<item>'."\n";
	$xml .= '		<fileid>'. $id .'</fileid>'."\n";
	$xml .= '		<filename>' . $file->getfilename() . '</filename>'."\n";
	$xml .= '		<filepath>' . $file . '</filepath>'."\n";
	$xml .= '	</item>'."\n";	
	
}
$xml .= '</index>'."\n"; 
echo $xml;

// suppression ancien index
// unlink("index.xml");

// creation nouvel index
$fp = fopen ("index.xml", "a+");   
fseek ($fp, 0);     
fputs ($fp, $xml);     
fclose ($fp);

?>

En ajoutant quelques fichiers dans le même dossier que le petit script qui construit le fichier XML, chez moi le résultat est alors le suivant sur ce fichier d'index des fichiers :

<?xml version="1.0" encoding="UTF-8"?>
<index>
	<item>
		<fileid>1</fileid>
		<filename>annuairev42.sql</filename>
		<filepath>C:\wamp\www\opty\annuairev42.sql</filepath>
	</item>
	<item>
		<fileid>2</fileid>
		<filename>stripes.html</filename>
		<filepath>C:\wamp\www\opty\css\stripes.html</filepath>
	</item>
	<item>
		<fileid>3</fileid>
		<filename>csv2sql.php</filename>
		<filepath>C:\wamp\www\opty\csv2sql.php</filepath>
	</item>
	<item>
		<fileid>4</fileid>
		<filename>csv2sqlv2.php</filename>
		<filepath>C:\wamp\www\opty\csv2sqlv2.php</filepath>
	</item>
	<item>
		<fileid>5</fileid>
		<filename>fete.php</filename>
		<filepath>C:\wamp\www\opty\fete.php</filepath>
	</item>
	<item>
		<fileid>6</fileid>
		<filename>form-chercherFichier.php</filename>
		<filepath>C:\wamp\www\opty\form-chercherFichier.php</filepath>
	</item>
	<item>
		<fileid>7</fileid>
		<filename>form.html</filename>
		<filepath>C:\wamp\www\opty\form.html</filepath>
	</item>
	<item>
		<fileid>8</fileid>
		<filename>form2.html</filename>
		<filepath>C:\wamp\www\opty\form2.html</filepath>
	</item>
	<item>
		<fileid>9</fileid>
		<filename>getStoresOnPO.xml</filename>
		<filepath>C:\wamp\www\opty\getStoresOnPO.xml</filepath>
	</item>
	<item>
		<fileid>10</fileid>
		<filename>index.xml</filename>
		<filepath>C:\wamp\www\opty\index.xml</filepath>
	</item>
	<item>
		<fileid>11</fileid>
		<filename>indexsearchfile.txt</filename>
		<filepath>C:\wamp\www\opty\indexsearchfile.txt</filepath>
	</item>
	<item>
		<fileid>12</fileid>
		<filename>jquery.autocomplete.min.js</filename>
		<filepath>C:\wamp\www\opty\jquery.autocomplete.min.js</filepath>
	</item>
	<item>
		<fileid>13</fileid>
		<filename>jquery.min.js</filename>
		<filepath>C:\wamp\www\opty\jquery.min.js</filepath>
	</item>
	<item>
		<fileid>14</fileid>
		<filename>maj-index-chercherFichier.php</filename>
		<filepath>C:\wamp\www\opty\maj-index-chercherFichier.php</filepath>
	</item>
	<item>
		<fileid>15</fileid>
		<filename>jquery.min.js</filename>
		<filepath>C:\wamp\www\opty\matrix\jquery.min.js</filepath>
	</item>
	<item>
		<fileid>16</fileid>
		<filename>matrix.html</filename>
		<filepath>C:\wamp\www\opty\matrix\matrix.html</filepath>
	</item>
	<item>
		<fileid>17</fileid>
		<filename>index.zip</filename>
		<filepath>C:\wamp\www\opty\menu\index.zip</filepath>
	</item>
	<item>
		<fileid>18</fileid>
		<filename>index2.zip</filename>
		<filepath>C:\wamp\www\opty\menu\index2.zip</filepath>
	</item>
	<item>
		<fileid>19</fileid>
		<filename>index3.zip</filename>
		<filepath>C:\wamp\www\opty\menu\index3.zip</filepath>
	</item>
	<item>
		<fileid>20</fileid>
		<filename>index.php</filename>
		<filepath>C:\wamp\www\opty\paserXML\index.php</filepath>
	</item>
	<item>
		<fileid>21</fileid>
		<filename>rss.xml</filename>
		<filepath>C:\wamp\www\opty\paserXML\rss.xml</filepath>
	</item>
	<item>
		<fileid>22</fileid>
		<filename>Regex_echellon.php</filename>
		<filepath>C:\wamp\www\opty\Regex_echellon.php</filepath>
	</item>
	<item>
		<fileid>23</fileid>
		<filename>remplirv4.php</filename>
		<filepath>C:\wamp\www\opty\remplirv4.php</filepath>
	</item>
	<item>
		<fileid>24</fileid>
		<filename>remplirv42.sql</filename>
		<filepath>C:\wamp\www\opty\remplirv42.sql</filepath>
	</item>
	<item>
		<fileid>25</fileid>
		<filename>index.php</filename>
		<filepath>C:\wamp\www\opty\search\index.php</filepath>
	</item>
	<item>
		<fileid>26</fileid>
		<filename>search.php</filename>
		<filepath>C:\wamp\www\opty\search\search.php</filepath>
	</item>
	<item>
		<fileid>27</fileid>
		<filename>tuto.html</filename>
		<filepath>C:\wamp\www\opty\tuto.html</filepath>
	</item>
	<item>
		<fileid>28</fileid>
		<filename>image1.png</filename>
		<filepath>C:\wamp\www\opty\tutodiv\image1.png</filepath>
	</item>
	<item>
		<fileid>29</fileid>
		<filename>image2.png</filename>
		<filepath>C:\wamp\www\opty\tutodiv\image2.png</filepath>
	</item>
	<item>
		<fileid>30</fileid>
		<filename>image3.png</filename>
		<filepath>C:\wamp\www\opty\tutodiv\image3.png</filepath>
	</item>
	<item>
		<fileid>31</fileid>
		<filename>tutodiv.html</filename>
		<filepath>C:\wamp\www\opty\tutodiv\tutodiv.html</filepath>
	</item>
	<item>
		<fileid>32</fileid>
		<filename>uptime.php</filename>
		<filepath>C:\wamp\www\opty\uptime.php</filepath>
	</item>
	<item>
		<fileid>33</fileid>
		<filename>vidertable.php</filename>
		<filepath>C:\wamp\www\opty\vidertable.php</filepath>
	</item>
</index>

Enfin, nous arrivons à cette fameuse page qui va s'occuper d'afficher notre petit système d'autocomplétion qui utilise JQuery comme sur l'autre tutoriel avec MySQL, cette fichier JavaScript est décidément capable de beaucoup de choses ! Le code pour exploiter l’auto-complétion de JQuery sur notre fichier XML est alors le suivant :

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>Moteur de recherche de fichier via du XML</title>	
	<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
	<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
	<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
	<script>
	var keyword = {}
  $.ajax({
        type: "POST",
        async: true,
        timeout: null,
        url: "index.xml",
        dataType: "xml",
        data: { xmlDoc: keyword },
        success: function (xmlResponse) {
            var data = $("item", xmlResponse).map(function () {
                return {
                    value: $("filename", this).text(),
                    id: $("fileid", this).text(),
					path: $("filepath", this).text()
                };
            }).get();
            $("#formulaire").autocomplete({
                source: data
            });
        }
    });  
	</script>
</head>
<body>
<input id="formulaire">
</body>
</html>

Le résultat est plutôt sympathique et donne alors quelque chose qui ressemble à ça si je tape .php, l'interrogation de mon fichier XML donne alors par exemple :

Classé dans : Tutoriel Javascript

Comment afficher l'heure de facon dynamique avec du javascript

Rédigé par fab1 aucun commentaire

Il est toujours agréable de profiter des bons cotés du langage de programmation JavaScript et notamment le fait qu'il s’exécute coté client. Il est ainsi possible à l'aide de Javascript de profiter d'un comportement en temps réel pour l'utilisateur pour peut alors avoir des modifications sur la page qu'il consulte sans à avoir besoin de la recharger ce qui au passage soulage le serveur ... Après avoir affiché la date de façon statique sur ce tutoriel nous passons donc à l'affichage de l'heure de façon dynamique et donc qui se met à jour en temps réel à chaque seconde.

Vous trouverez de nombreuses solutions sur Internet pour réaliser ce genre de chose, mais en général c'est beaucoup trop compliqué pour ce que c'est, et aujourd'hui je vais vous proposer de quelque chose de vraiment simple pour afficher l’heure en temps réel. Inutile de se compliquer la vie quand on peut faire simple ... Si vous êtes arrivé ici, c'est donc que vous cherchez probablement à faire la chose suivante :

Pour obtenir cet affichage de l'heure en temps réel, il faut alors créer une div ou un span, et le remplir à l'aide d'une simple ligne de JavaScript. La mise à jour se fera toute les secondes, par la fonction setInterval et il suffit de modifier la valeur "1000" pour changer l’intervalle de mise à jour, "2000" correspondant à un affichage toutes les deux secondes, "5000" toutes les 5 secondes et etc ... C'est à vous de voir ! Maintenant, place au code source pour afficher l'heure de façon dynamique en JavaScript :

<div id="afficherheure"></div>
<script type="text/javascript">
setInterval(function(){
    document.getElementById('afficherheure').innerHTML = new Date().toLocaleTimeString();
}, 1000);
</script>

Classé dans : Tutoriel Javascript

Comment créer un calendrier simple avec du JavaScript

Rédigé par fab1 aucun commentaire

Le langage de programmation JavaScript permet de faire vraiment beaucoup de choses très intéressantes et surtout des choses qui ne sont pas forcément possible autrement, comme du contenu qui se met à jour coté client, mais ce n'est pas ce qui nous intéresse particulièrement ici. Nous allons voir comment réaliser de façon assez simple, un calendrier via JavaScript qui est capable de trouver le jour auquel on se trouve dans le mois, de naviguer entre les mois de l'année et enfin de passer d'une année à l'autre.

Ensuite, vous pourrez modifier et améliorer ce calendrier selon vos gouts et besoins en changeant par exemple le style, en ajoutant un lien vers une page sur chaque jour et tout ce que vous pouvez encore imaginer ! Avec le code qui va suivre, vous obtenez alors un résultat qui rassemble à quelque chose comme ça :

Pour obtenir ce petit calendrier tout simple avec la journée du jour, le mois et année en cours ainsi que la visualisation de la semaine avec du JavaScript, il faut utiliser le code source suivant pour intégrer ce beau calendrier à votre site web :

<style type="text/css">
span.label {color:black;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
span.c1 {cursor:hand;color:black;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
span.c2 {cursor:hand;color:red;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 13px Arial}
span.c3 {cursor:hand;color:#b0b0b0;width:30;height:16;text-align:center;margin-top:0;background:#ffF;font:bold 12px Arial}
</style>
<script type="text/javascript">
function maxDays(mm, yyyy){
var mDay;
	if((mm == 3) || (mm == 5) || (mm == 8) || (mm == 10)){
		mDay = 30;
  	}
  	else{
  		mDay = 31
  		if(mm == 1){
   			if (yyyy/4 - parseInt(yyyy/4) != 0){
   				mDay = 28
   			}
		   	else{
   				mDay = 29
  			}
		}
  }
return mDay;
}
function changeBg(id){
	if (eval(id).style.backgroundColor != "yellow"){
		eval(id).style.backgroundColor = "yellow"
	}
	else{
		eval(id).style.backgroundColor = "#ffffff"
	}
}
function writeCalendar(){
var now = new Date
var dd = now.getDate()
var mm = now.getMonth()
var dow = now.getDay()
var yyyy = now.getFullYear()
var arrM = new Array("January","February","March","April","May","June","July","August","September","October","November","December")
var arrY = new Array()
	for (ii=0;ii<=4;ii++){
		arrY[ii] = yyyy - 2 + ii
	}
var arrD = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")

var text = ""
text = "<form name=calForm>"
text += "<table border=1>"
text += "<tr><td>"
text += "<table width=100%><tr>"
text += "<td align=left>"
text += "<select name=selMonth onChange='changeCal()'>"
	for (ii=0;ii<=11;ii++){
		if (ii==mm){
			text += "<option value= " + ii + " Selected>" + arrM[ii] + "</option>"
		}
		else{
			text += "<option value= " + ii + ">" + arrM[ii] + "</option>"
		}
	}
text += "</select>"
text += "</td>"
text += "<td align=right>"
text += "<select name=selYear onChange='changeCal()'>"
	for (ii=0;ii<=4;ii++){
		if (ii==2){
			text += "<option value= " + arrY[ii] + " Selected>" + arrY[ii] + "</option>"
		}
		else{
			text += "<option value= " + arrY[ii] + ">" + arrY[ii] + "</option>"
		}
	}
text += "</select>"
text += "</td>"
text += "</tr></table>"
text += "</td></tr>"
text += "<tr><td>"
text += "<table border=1>"
text += "<tr>"
	for (ii=0;ii<=6;ii++){
		text += "<td align=center><span class=label>" + arrD[ii] + "</span></td>"
	}
text += "</tr>"
aa = 0
	for (kk=0;kk<=5;kk++){
		text += "<tr>"
		for (ii=0;ii<=6;ii++){
			text += "<td align=center><span id=sp" + aa + " onClick='changeBg(this.id)'>1</span></td>"
			aa += 1
		}
		text += "</tr>"
	}
text += "</table>"
text += "</td></tr>"
text += "</table>"
text += "</form>"
document.write(text)
changeCal()
}
function changeCal(){
var now = new Date
var dd = now.getDate()
var mm = now.getMonth()
var dow = now.getDay()
var yyyy = now.getFullYear()
var currM = parseInt(document.calForm.selMonth.value)
var prevM
	if (currM!=0){
		prevM = currM - 1
	}
	else{
		prevM = 11
	}
var currY = parseInt(document.calForm.selYear.value)
var mmyyyy = new Date()
mmyyyy.setFullYear(currY)
mmyyyy.setMonth(currM)
mmyyyy.setDate(1)
var day1 = mmyyyy.getDay()
	if (day1 == 0){
		day1 = 7
	}
var arrN = new Array(41)
var aa
	for (ii=0;ii<day1;ii++){
		arrN[ii] = maxDays((prevM),currY) - day1 + ii + 1
	}
	aa = 1
	for (ii=day1;ii<=day1+maxDays(currM,currY)-1;ii++){
		arrN[ii] = aa
		aa += 1
	}
	aa = 1
	for (ii=day1+maxDays(currM,currY);ii<=41;ii++){
		arrN[ii] = aa
		aa += 1
	}
	for (ii=0;ii<=41;ii++){
		eval("sp"+ii).style.backgroundColor = "#FFFFFF"
	}
var dCount = 0
	for (ii=0;ii<=41;ii++){
		if (((ii<7)&&(arrN[ii]>20))||((ii>27)&&(arrN[ii]<20))){
			eval("sp"+ii).innerHTML = arrN[ii]
			eval("sp"+ii).className = "c3"
		}
		else{
			eval("sp"+ii).innerHTML = arrN[ii]
			if ((dCount==0)||(dCount==6)){
				eval("sp"+ii).className = "c2"
			}
			else{
				eval("sp"+ii).className = "c1"
			}
			if ((arrN[ii]==dd)&&(mm==currM)&&(yyyy==currY)){
				eval("sp"+ii).style.backgroundColor="#90EE90"
			}
		}
	dCount += 1
		if (dCount>6){
			dCount=0
		}
	}
}
</script>

<script type="text/javascript">writeCalendar()</script>

Classé dans : Tutoriel Javascript

Comment afficher une date avec le jour, mois et année de facon statique en JavaScript

Rédigé par fab1 aucun commentaire

Il existe déjà surement de très nombreux sujet sur Internet qui traitent cette problématique, mais ce site me permet de stocker mes sources de façon propre avec du code qui est directement fonctionnel. Aujourd’hui, nous allons donc voir l'affichage d'une date en JavaScript de manière statique. De toute façon, pour afficher le jour, le mois et l'année, pas besoin de se compliquer la vie et la mise à jour se fera à l'affichage de la page comportant le script JavaScript. Maintenant, place à ce petit script JavaScript qui suffit d'intégrer dans votre page HTML ou PHP :

<meta charset="UTF-8">
<h1>Afficher la date en Javascript de facon statique</h1>

<script>
var now = new Date();

var days = new Array('Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi','Dimanche');

var months = new Array('Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Aout','Septembre','Octobre','Novembre','Décembre');

var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();

function fourdigits(number)	{
	return (number < 1000) ? number + 1900 : number;
}
today =  days[now.getDay()] + ", " +
         months[now.getMonth()] + " " +
         date + ", " +
         (fourdigits(now.getYear())) ;

document.write(today);
</script>

Vous êtes maintenant capable d'afficher une date toute simple via JavaScript qui se mettra bien évidemment automatiquement à jour ...

Classé dans : Tutoriel Javascript