JAVASCRIPT
SCRIPTS ET TUTORIELS :
Scripts et tutoriels Javascript :

Vous trouverez ici :

Comment afficher la date du jour et l'heure ? Comment afficher le jour et le mois en toutes lettres ? Comment afficher l'heure en temps réel ? Comment décompter les jours suivant une certaine date ? Comment afficher une image selon le jour de la semaine ? Comment afficher un texte selon le mois ? Comment tirer un numéro au hasard ? Comment afficher une image au hasard ? Comment rediriger une Page Web ? Quelle est la résolution de votre écran ? Quelle est la résolution de votre navigateur ? Comment passer une variable de PHP à JavaScript ?

Date et heure :

Comment afficher la date du jour et l'heure sur une page web en javascript ?

<script language="JavaScript">
today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
var hh = today..getHours();
var mn = today.getMinutes();
var sc = today.getSeconds();
if (dd<10) { dd='0'+dd; }
if (mm<10) { mm='0'+mm; }
if (hh<10) { hh='0'+hh; }
if (mn<10) { mn='0'+mn; }
if (sc<10) { sc='0'+sc; }
document.write("Nous sommes le ",dd,"/",mm,"/",yyyy)
document.write("<br>") document.write(" il est déjà ",hh,":",mn,":",sc);
document.write("<br>"today.toDateString());
</script>

Résultat :

Jour et mois en lettres :

Comment afficher le jour et le mois en toutes lettres sur une page web en javascript ?

<script language="JavaScript">
 nom_mois = new Array
("janvier","février","mars","avril","mai","juin","juillet",
"août","septembre","octobre","novembre","décembre");

jour = new Array ("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");

var maintenant=new Date();
var ce_jour=maintenant.getDate();
var mois=maintenant.getMonth()+1;
var an=maintenant.getFullYear();
var le_jour=maintenant.getDay();

var entete_mois = jour[le_jour] + " " + ce_jour + " " + nom_mois[mois-1] + " " + an;

document.write(entete_mois); 
</script>

Résultat :

Aujourd'hui :
Heure en temps réel :

Comment afficher l'heure en temps réel sur une page web en javascript ?

<script language="JavaScript">
 function quelle_heure_est_il(id)
{
        date = new Date;
        h = date.getHours();
        if(h<10)
        {
                h = "0"+h;
        }
        m = date.getMinutes();
        if(m<10)
        {
                m = "0"+m;
        }
        s = date.getSeconds();
        if(s<10)
        {
                s = "0"+s;
        }
        resultat = 'Il est '+h+':'+m+':'+s;
        document.getElementById(id).innerHTML = resultat;
        setTimeout('quelle_heure_est_il("'+id+'");','1000');
        return true;
}
</script>
<div id="affiche_heure"></div>
 <script language="JavaScript">window.onload = quelle_heure_est_il('affiche_heure');</script>

Résultat :

Décompter les jours :

Comment décompter les jours suivant une certaine date ? Pour l'exemple ici combien de jours reste-t-il entre aujourd'hui et le 1 janvier 2030. Vous pouvez modifier la date pour par exemple compter le nombre de jours avant votre anniversaire.

<script language="JavaScript">
function chrono()
{
jour=Date.parse("Jan 1, 2030 GMT") - Date.parse(new Date);
return(Math.round(jour/(24*60*60*1000)))
}
document.write("Il reste "+chrono()+" jours avant l'an 2030");
</script>

Résultat :

Une image par jour :

Comment afficher une image selon le jour de la semaine ?
Ici pour l'exemple un dossier "photos" avec 7 images gif (0.gif dimanche 1.gif lundi...)

<script language="JavaScript">
now = new Date();
day = now.getDay();
document.write("<img src='photos/" + day + ".gif' width=300 height=100 alt='Image du jour'>");
</script>

Résultat :

Texte du mois :

Comment afficher un texte selon le mois ? Dans l'exemple ci-dessous le code javascript affiche le dicton du mois.

<script language="JavaScript">
var tab_message = new Array(12);
tab_message[0] = "Dicton: Jour de l'an beau mois d'août chaud.";//Janvier
tab_message[1] = "Dicton: Février, Quand la bise oublie févier, elle arrive en mai.";//fevrier
tab_message[2] = "Dicton: Brouillard en mars gelée en mai.";//Mars
tab_message[3] = "Dicton: Avril pluvieux fait mai joyeux.";//Avril
tab_message[4] = "Dicton: Averse de mai a plus de pouvoir que dix arrosoirs.";//Mai
tab_message[5] = "Dicton: Qui pêche en juin ne pêche que fretin.";//Juin
tab_message[6] = "Dicton: Souvent juillet orageux annance hiver rigoureux.";//Juillet
tab_message[7] = "Dicton: En août, quiconque dormira sur midi s'en repentira.";//Aout
tab_message[8] = "Dicton: L'hirondelle en septembre abandonne le ciel refroidi de l'automne.";//Septembre
tab_message[9] = "Dicton: Octobre en brumes, mois à rhumes.";//Octobre
tab_message[10] = "Dicton: Vent de Toussaint, Terreur de marin.";//Novembre
tab_message[11] = "Dicton: Froid et neige de décembre, du blé à revendre.";//Decembre
var LaDate = new Date();
var LeMois = LaDate.getMonth();
document.write(tab_message[LeMois]);
</script>

Résultat :

Tirage aleatoire :

Comment tirer un numéro au hasard ? Dans l'exemple un numéro de 1 à 100 sera afficher.

<script language="JavaScript">
function Tirage() {
document.getElementById("affiche_numero").innerHTML = 'Numéro : '+ (Math.floor(Math.random() * 100) + 1);
}
</script>

<div id="affiche_numero"></div>
<button onclick="Tirage()">Tirer un numéro</button>

Résultat :

Simulateur Loto :

Comment tirer 5 numéros au hasard sans doublon ? Ici dans l'exemple 5 numéros de 1 à 49.

<script language="JavaScript">
// tire un numéro
function loto_aleatoire(nb)
{
nombre= Math.floor(Math.random() * nb)+1;
}
tirage = new Array;
nombres=""
// 
nb= 6
for (i=1 ;i<nb ;i++)
{
loto_aleatoire(49);
tirage[i]= nombre;
for (t=1 ; t<i ;t++){
if (tirage[t]==nombre)
{
i=i-1;
}
}
}
for (i=1 ;i<nb ;i++)
{
nombres= nombres+" ("+tirage[i]+") ";
}
document.write(nombres);
</script>

Résultat :

Images au hasard :

Comment afficher une image au hasard ?
Ici pour l'exemple un dossier "lesdes" avec 6 images gif (1.gif, 2.gif, 3.gif...)

<script language="JavaScript">
function Lance_dede() {
nm = Math.floor(Math.random() * 6) + 1;
document.getElementById("piste_dede").innerHTML = ("<img src='lesdes/" + nm + ".gif' width=57 height=61 alt='Javascript image aléatoire'>");
}
</script>

<div id="piste_dede"></div>
<button onclick="Lance_dede()">Lancer le dé</button>

Résultat :

Redirection d'url :

Comment rediriger un visiteur vers une Page Web ?

Redirection direct :

<script language="JavaScript">
document.location.href="pageredirection.html";
</script>

Redirection apres 3 secondes :

<script language="JavaScript">
window.setTimeout("location=('https://www.yakafaire.eu');",3000);
</script>
Résolution d’écran et navigateur :

Quelle est la résolution de votre écran ? Quelle est la résolution de votre navigateur ? Information de la page web.

<p id="screen"></p>
<p id="window"></p>
<p id="page"></p>

<script language="JavaScript">
// résolution écran
var screenWidth = screen.width;
var screenHeight = screen.height;

// résolution navigateur
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

// résolution de la page
const pageWidth  = document.documentElement.scrollWidth;
const pageHeight = document.documentElement.scrollHeight;

// Affiche les résolutions
var x = document.getElementById("screen");
x.innerHTML = "Résolution de votre écran :<br> Largeur : " + screenWidth + ", Hauteur : " + screenHeight + ".";

var y = document.getElementById("window");
y.innerHTML = "Résolution de votre navigateur :<br> Largeur : " + windowWidth + ", Hauteur : " + windowHeight + ".";

var z = document.getElementById("page");
z.innerHTML = "Informations de la page web :<br> Largeur : " + pageWidth + ", Hauteur : " + pageHeight + ".";
</script>

Variable PHP à JavaScript :

Comment passer une variable de PHP à JavaScript ?

<?php
$variablePHP = "Une variable PHP";
?>;
<script>
 var variableJavascript = <?php echo json_encode($variablePHP); ?>;
 document.write('Javascript affiche ' +variableJavascript);
</script>

Résultat :

Scripts à venir :

Page mis à jour le 06/01/2023.