Notes sur Javascript

Calcul

racine_carree

Exemple : racine carrée, version pour mobiles.

produits_rapides

TODO : carre_nombre_finissant_par_5, produit_nombres_inf_20, sur le modèle de racine carrée.

Date heure

alarme_oiseau

Projet de minuteur pour éviter les TMS (troubles musculo-squelettiques) pour: rappels réguyliers incitant à une détente régulière de quelques minutes (yeux, muscles du dos, ...).

Utilisation des fonctions javascript setTimeout, clearTimeout et du contrôle HTML audio.

En chantier.

Démo

Tester alarme_oiseau

Source 
<!DOCTYPE html>
<html>
<head>
  <title>Grive musicienne toutes les 15 mn</title>
</head>
<body>

<audio id="myAudio">
  <source src="grive_musicienne_25s_mono_64k.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<center>
  <button onclick="alarme15mn()">Oiseau toutes 15 mn</button>
  <br><br>
  <button onclick="stopAudio()" type="button">Stopper ce tour</button>
  <br><br>
  <button onclick="stop_all()" type="button">Tout stopper</button>
  <br><br>
  <label id="label_1">Label 1</label>
</center>

<script>
var x = document.getElementById("myAudio");
var labl = document.getElementById("label_1");

function playAudio()  { x.play(); labl.innerHTML = date_heure(); }
function pauseAudio() { x.pause(); }
function stopAudio() {
  x.pause();
  x.currentTime = 0;
  //~ x.src = x.src;
  //~ x.src = '';
  //~ clearTimeout ( le_chrono );
}

function stop_all() {
  labl.innerHTML = "Toutes alarmes stoppées";
  x.pause();
  x.currentTime = 0;
  //~ x.src = x.src;
  //~ x.src = '';
  clearTimeout ( le_chrono );
}

function alarme15mn() {
  le_chrono = setTimeout ( alarme15mn, 15*60000 );  // 15 mn * 60 secondes
  playAudio();
  }

function date_heure () { // https://tecadmin.net/get-current-date-time-javascript/
  var today = new Date();
  var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
  var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  var dateTime = date+' '+time;
  return dateTime;
}
</script>

</body>
</html>

date_election

Page plein écran, responsive (à vérifier), d'un compte à rebours jusqu'à une date donnée.

Le code javascript est inclus dans la page.

Démo

Exemple : Compte à rebours élection

Source 
<!DOCTYPE html>
<html>
<style>
body, html {
    height: 100%;
    margin: 0;
}

.bgimg {
    background-image: url('http://www.w3schools.com/w3images/forestbridge.jpg');
    height: 100%;
    background-position: center;
    background-size: cover;
    position: relative;
    color: white;
    font-family: "Courier New", Courier, monospace;
    font-size: 25px;
}

.topleft {
    position: absolute;
    top: 0;
    left: 16px;
}

.bottomleft {
    position: absolute;
    bottom: 0;
    left: 16px;
}

.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

hr {
    margin: auto;
    width: 40%;
}
</style>
<body>

<div class="bgimg">
  <div class="topleft">
    <p>France - 7 mai 2021</p>
  </div>
  <div class="middle">
    <h1>Allez voter !</h1>
    <hr>
    <p id="demo1" style="font-size:30px"></p>
    <p id="demo2" style="font-size:30px"></p>
  </div>
  <div class="bottomleft">
    <p></p>
  </div>
</div>

<script>
// Set the date we're counting down to
var countDownDate = new Date("May 7, 2021 08:00:00").getTime();
var countDownDate2 = new Date("May 7, 2021 20:00:00").getTime();

// Update the count down every 1 second
var countdownfunction = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var d1 = countDownDate - now;
    var d2 = countDownDate2 - now;

    // Time calculations for days, hours, minutes and seconds
    var days1 = Math.floor(d1 / (1000 * 3600 * 24));
    var hours1 = Math.floor((d1 % (1000 * 3600 * 24)) / (1000 * 3600));
    var minutes1 = Math.floor((d1 % (1000 * 3600)) / (1000 * 60));
    var seconds1 = Math.floor((d1 % (1000 * 60)) / 1000);

    // Time calculations for days, hours, minutes and seconds
    var days2 = Math.floor(d2 / (1000 * 3600 * 24));
    var hours2 = Math.floor((d2 % (1000 * 3600 * 24)) / (1000 * 3600));
    var minutes2 = Math.floor((d2 % (1000 * 3600)) / (1000 * 60));
    var seconds2 = Math.floor((d2 % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById("demo1").innerHTML =
        "Ouverture bureaux de vote<br><br>" +
        days1 + "j " + hours1 + "h " +
        minutes1 + "m " + seconds1 + "s ";

    // Output the result in an element with id="demo"
    document.getElementById("demo2").innerHTML =
        "<br><br>Fin scrutin<br><br>" +
        days2 + "j " + hours2 + "h " +
        minutes2 + "m " + seconds2 + "s ";

    //~ // If the count down is over, write some text
    //~ if (d1 < 0) {
        //~ clearInterval(countdownfunction);
        //~ document.getElementById("demo1").innerHTML = "Vote en cours";
    //~ }
    //~ // If the count down is over, write some text
    //~ if (d2 < 0) {
        //~ clearInterval(countdownfunction);
        //~ document.getElementById("demo2").innerHTML = "Vote fini";
    //~ }
}, 1000);
</script>

</body>
</html>

Formulaire

form_submit

Soumettre un formulaire dès qu'on choisit une option dans un select avec onchange="document.nom_du_formulaire.submit();"

Source 
<html>
<head>
<title>Bookmark Keeper</title>

</head>
<body bgcolor="lightGray">

<center>
<hr width="50%">
<h1>Bookmark keeper</h1>
<hr width="50%">
<small><i>Retrouvez vos signets partout où vous allez</i></small><br />
<small><i>Your bookmarks anywhere you go</i></small>
<br>
<br>

<form name="frmsubmit" action="kb6.php" method="post">
  <select name="username" size="8" onchange="document.frmsubmit.submit();">
    <option value="test1">test1</option>
    <option value="test2">test2</option>
    <option value="test3">test3</option>
    <option value="test4">test4</option>
    <option value="test5">test5</option>
    <option value="test6">test6</option>
    <option value="test7">test7</option>
    <option value="test8">test8</option>
  </select>
</form>

<small>
<a href="index.htm">Version avec mot de passe/Password enabled version</a>
</small>

</center>
</body>
</html>

keypress_body

Intercepter les touches clavier sur la page HTML (body), pour naviguer au clavier

IMPORTANT : ne pas utiliser dans une page interactive où des données doivent être entrées au clavier.

Démo keypress_body.html
Source 
<!DOCTYPE html>
<html>
<head>
<title>Keypress body</title>
<script>
function GetCharG (event){
    // chCode est un nombre
    var chCode = ('charCode' in event) ? event.charCode : event.keyCode;
    alert('chCode = ' + chCode);
    menuG(chCode, "");
}
</script>
</head>
<body onkeypress="GetCharG (event);">
  <h2>Keypress body</h2>
  <p>Appuyer sur une touche pour voir son code</p>
</body>
</html>

trier

Quelques routines js utiles à trier

Source 
function validateForm() {
 // si on a supprimé des lignes, il se peut que gcurseur
 // soit trop haut
 var txtarea = document.getElementById("id_sites");
 gtoutes_les_lignes = txtarea.value.replace(/\n/gi, "\|\|");
 var sizesites = gtoutes_les_lignes.length
 if ( sizesites > SITESMAXSIZE )
    { gtoutes_les_lignes = gtoutes_les_lignes.substring(0, SITESMAXSIZE - 1);
      aff('La taille totale autorisée est de 65000 caractères'+'\n'+'Les sites prennent ' + sizesites + ' octets.');
      return false; }
 // aff('[validateForm] gtoutes_les_lignes='+gtoutes_les_lignes);
 maj_gdiv1();

 update_id_curseur_id_curseur2();

  // TODO Sélectionner le texte fautif avec selectionStart et selectionEnd');
  var t = document.getElementById("id_sites").value.split('\n');
  // source : http://help.dottoro.com/ljtfkhio.php
  var input = document.getElementById("id_sites");
    input.selectionStart = 1;
    input.selectionEnd = 300;
    input.focus ();


// Removes ending whitespaces
function RTrim( value ) {
    var re = /((\s*\S+)*)\s*/;
    return value.replace(re, "$1");
}

// Removes ending '\n'
function RTrim_n( value ) {
    var re = /((\s*\S+)*)\n/;
    return value.replace(re, "$1");
}

// Removes leading '\n'
function LTrim_n( value ) {
    var re = /\n((\s*\S+)*)/;
    return value.replace(re, "$1");
}

Système

dimensions_ecran

responsive, dimensions écran.

is_mobile

Détecter en javascript si on est sur un mobile (à vérifier car peut-être ancien).

Tester is_mobile.html.

plein_ecran

W3schools, un bouton pour basculer plein écran en javascript : js_fullscreen.
Voir l'exemple w3schools exporté.

Voir aussi : Going full screen with vanilla JS et une exemple.