Ce cours est un pense-bête (en français/anglais) du cours w3.js (en anglais). Par rapport à ce site, l'ordre de présentation n'est pas toujours respecté. Ici, version 1.04 (Avril 2019). Version 1.03 = December 2017

Pré-requis :

avoir suivi les mini-cours dédiés au HTML, CSS et JavaScript
connaître l'anglais écrit

Introduction

w3.js est une JavaScript library conçue pour simplifier le développement de projets web. Ce fichier pèse 13 Ko (version 1.04, avril 2019, 12 374 octets, (codé inchangé en décembre 2022). Compte tenu de sa puissance et de son faible poids, w3.js devrait être lié à toute page web.

Toutefois, w3P.js est une version modifiée de w3.js

/* w3P.js version 2024-06-21
w3-repeat -> data-w3-repeat (4 fois)
w3-include-html -> data-w3-include-html (2 fois)
.substr() -> .substring() (2 fois)
https://incels.eu/w3P.js
Original : W3.JS 1.04 April 2019 by w3schools.com */

Cela vous permettra :

d'intégrer un data object dans une zone
de filtrer le contenu d'une balise
de trier le contenu d'une balise
de cacher / montrer une zone de la page web
d'utiliser des slideshows
d'inclure du HTML dans le HTML
d'ajouter / retirer des class à des balises
d'ajouter du CSS à toute balise

Il est obligatoire de placer l'appel à ce Javacript dans le <head>, si w3.includeHTML() est utilisée. Vu son faible poids, 13 Ko, w3P.js sera, pratiquement, toujours appelé dans le <head>.

    <script src="https://www.w3schools.com/lib/w3.js"></script>
  </head>
  ...

Avec le code ci-dessus, l'application web ne fonctionnera que si l'utilisateur est connecté à internet. Elle ne fonctionnera pas si l'utilisateur est connecté à un serveur local.

    <script src="../../w3P.js"></script>
  </head>

Avec ce code, l'application web fonctionnera dans tous les cas, que l'utilisateur soit connecté via le protocole http(s):// ou file:///

Lors de tests sur un serveur, il se peut que le fichier JS utilisé soit celui mis en cache. Il faut alors vider le cache du navigateur pour que le fichier JS modifié soit pris en compte.

Gestion des données

Données dans une base de données

Vue générale du processus permettant d'afficher les données : HTML <---> JS <---> PHP

Le fichier PHP ne sert qu'à créer le data-object.

Exemple d'affichage des données : data-w3-repeat
```
function myCtrl(data) {w3.displayObject("tableau", data)}
w3.getHttpObject("fichier.php", myFunction);
```
Données dans un fichier JSON

HTML <---> JS <---> JSON

Bien que les données ne soient pas dans une base de données, ni que leur traitement requiert le PHP, la méthode w3.getHttpObject vise un fichier placé sur un serveur => le serveur doit être lancé ...

Il est utile de placer des données (rarement modifiées) dans un fichier JSON, par exemple :
- lorsque les données doivent être affichées ET utilisées (par un fichier PHP)
- lorsque des données doivent être affichées dans deux fichiers HTML différents
  l'un affichant tout dans un tableau, l'autre totalisant des montants par compte IBAN
De cette façon, les données utilisées par un programme sont bien celles affichées sur une page web de l'application.

Exemple : Les taux d'intérêts légaux (modifiés annuellement) mis dans un fichier JSON peuvent être affichés dans une page de l'application web et utilisés dans une autre page de cette même application.
```
function myCtrl(data) {w3.displayObject("tableau",{lignes:data})}
w3.getHttpObject("fichier.json", myCtrl);
```
Données dans un fichier JS

HTML <---> JS

Dans ce cas, les données (rarement modifiées) ne doivent pas être cherchées dans une base de données, ni dans un fichier JSON. La fonction w3.getHttpObject() ne doit pas être utilisée et l'affichage peut se faire hors connexion (à un serveur).
```
var data={
lignes:[
{CustomerName : "Alfreds Futterkiste",City : "Berlin",Country : "Germany"},
{CustomerName : "Berglunds snabbköp",City : "Luleå",Country : "Sweden"},
{CustomerName : "Vaffeljernet",City : "Århus",Country : "Denmark"},
{CustomerName : "Wolski Zajazd",City : "Warszawa",Country : "Poland"}
]};

 w3.displayObject("tableau", data);
```
Dans ce cas, les clés peuvent (mais ne doivent pas) être entourées de guillemets.

Afficher le tableau ci-dessus : w3_display.htm

Servers

Si les données à afficher sont stockées dans un SGBDR (MySQL ou SQLite), il faut, au préalable, que le fichier php.ini soit correctement configuré.

php.ini

Avec XAMPP (sous Windows), on peut consulter le fichier php.ini

; Notes for Windows environments :
;
; - Many DLL files are located in the extensions/ (PHP 4) or ext/ (PHP 5+)
;   extension folders as well as the separate PECL DLL download (PHP 5+).
;   Be sure to appropriately set the extension_dir directive.
;
extension=bz2
extension=curl
extension=fileinfo
extension=gd2
extension=gettext
;extension=gmp
;extension=intl
;extension=imap
;extension=interbase
;extension=ldap
extension=mbstring
extension=exif      ; Must be after mbstring as it depends on it
extension=mysqli
;extension=oci8_12c  ; Use with Oracle Database 12c Instant Client
;extension=odbc
;extension=openssl
;extension=pdo_firebird
extension=pdo_mysql
;extension=pdo_oci
;extension=pdo_odbc
;extension=pdo_pgsql
extension=pdo_sqlite
;extension=pgsql
;extension=shmop

Une fois le fichier php.ini correctement configuré, il faut créer une connexion à la base de données.

PHP et MySQL (PDO)

<?php
header("Content-Type: application/json; charset=UTF-8");

// connexion ----------------------------------------------
$typDB="mysql";
  $host="localhost";
  $dbname=""; // 'cc1'
  $root=""; // 'root'
  $password=""; // ''
$cnx=$typDB.":host=".$host.";dbname=".$dbname;
$options = array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8');
try { $bdd = new PDO($cnx, $root, $password, $options); }
catch (Exception $e) { die('Erreur de connexion : ' . $e->getMessage()); }

// requête ------------------------------------------------
$sql = "SELECT id AS a, email AS b FROM table";
$rep=$bdd->query($sql);
if ($rep===FALSE) die;
$data=$rep->fetchAll(PDO::FETCH_ASSOC);
echo "{\"lignes\":".json_encode($data)."}";
?>

PHP et SQLite (PDO)

Requête de sélection : query()

<?php
header("Content-Type: application/json; charset=UTF-8");
$bdd = new PDO("sqlite:test.db");
$sql="..."; // echo $sql."<br>";
$rep = $bdd->;query($sql);
$data=$rep->fetchAll(PDO::FETCH_ASSOC);

/* // ajout d'une ligne vide, car liste déroulante
$lignVide=["id_group"=>"0","nom"=>""];
array_unshift($data,$lignVide);
*/

echo "{\"lignes\":".json_encode($data)."}";
?>

Requête d'action : exec()

$bdd = new PDO("sqlite:test.db");
$sql="...";
$ok=$bdd->exec($sql); /* Retourne TRUE si succès */

if(!$ok) {echo "La requête SQL a été exécutée avec succès.";}
else{echo "N'a été exécutée avec succès la requête SQL suivante :
$sql
";}

echo "<br>Retour à la <a href='index.htm'>page d'accueil</a>";

Plus d'info : PHP - SQLite, Manuel PHP > SQLite 3, PHP SQLite3 tutorial

Autres connexions

PHP and MySQL (non PDO)

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$conn = new mysqli("myServer", "user", "pass", "myDB");

$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");

$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
  if ($outp != "") {$outp .= ",";}
  $outp .= '{"Name":"'  . $rs["CompanyName"] . '",';
  $outp .= '"City":"'   . $rs["City"]        . '",';
  $outp .= '"Country":"'. $rs["Country"]     . '"}';
}
$outp ='{"customers":['.$outp.']}';

$conn->close();

echo($outp);
?>

W3Data

On constate qu'une seule ligne de code change dans les fichiers PHP. Celle liée à la requête SQL : $sql="...";. Ainsi, tous les fichiers JS pourraient appeler le même fichier PHP, si on l'appelait avec comme paramètre la requête SQL.

Toutefois, pour ne pas dévoiler une partie de la structure de la base de données (et ainsi réduire le risque d'attaque), il est préférable de passer en paramètre l'ID de la requête SQL.

Générer un ID

w3.getHttpObject("data.php?ID=9gXv5", myCtrl);
...

Si l'ID correspond à un nombre ordonné, un curieux pourrait, en incrémentant ce nombre, et découvrir une réponse destinée à des administrateurs.

data.php

<?php
/*header("Access-Control-Allow-Origin: *");*/
header("Content-Type: application/json; charset=UTF-8");

$sql="";$ID=""; if (isset($_GET['ID'])) $ID=$_GET['ID'];
switch ($ID) {
  case '9gXv5': $sql="..."; break;
  default:$sql="";
}
/*if($sql=="") die("Veuillez vérifier l'identifiant de la requête SQL");*/

require("../res/php/inc_connexion_tmp.php");
$rep=$bdd->query($sql);
/*if ($rep===FALSE) sortir(1,"");*/
$data=$rep->fetchAll(PDO::FETCH_ASSOC);
echo "{\"lignes\":".json_encode($data)."}";
// print_r("{\"lignes\":".json_encode($data)."}");
?>

w3.getHttpObject("fileName",myFunction)

Cette méthode w3.getHttpObject() lit un fichier situé sur un serveur contenant (ou renvoyant) un (seul) data-object au format JSON.

L'utilisation de cette méthode implique que le fichier JS est situé sur un serveur (local ou distant).

Le premier paramètre est le nom de ce fichier (qui peut être un fichier PHP, TXT, JSON ...)

Le premier paramètre pourrait être un fichier JSON, tel que :
w3.getHttpObject("customers.json", myCtrl);
Attention. Un fichier JSON ne contient pas de commentaires et la clé est entourée de guillemets.

Ce data-object ressemble à une string particulière, souvent très longue.

Ce data-object est un objet contenant un :

tableau d'objets
tableau de valeurs

Le second paramètre de la méthode w3.getHttpObject(), ici myCtrl, n'est pas une string, mais le nom d'une fonction qui doit être identique à celui de la fonction déclarée dans ce fichier JS.

function myCtrl(myDataObject) {
  /* Ici, code éventuel de traitement des données à afficher */
  w3.displayObject(...);
}
w3.getHttpObject("localites.php", myCtrl);

Ce nom de fonction peut être quelconque. Autant ne pas le changer. Nous verrons ci-dessous que cette fonction, MyCtrl(), servira au traitement des données avant d'appeler la méthode w3.displayObject() pour afficher les données.

data-object

Le data-object peut être contenu dans une variable du fichier JS. Ceci permet d'afficher les données sans être connecté à un serveur.

data-object : Tableau d'objets

Exemple de fichier contenant un data-object valide : customers.js

{"lignes":[
{"key1":"value1","key2":"values", ...},
{...},
...
{...}
]}

Le nom de la clé, ici lignes, ayant pour valeur un tableau (d'objets), est identique à celui indiqué dans le fichier HTML, au niveau de la ligne du tableau, devant être répétée. (Exemple : Voir le code HTML ci-dessous)

Exemple de codes HTML, JS et PHP

Extrait du fichier localites.htm :

      <div class="w3-responsive">
        <p>
          Nom recherché : <input oninput="w3.filterHTML('#tableau', '.item', this.value)"
          placeholder="Nom de la localité, code postal" style="width:35%" id="champ1" />
        </p>
        <table class="w3-table-all w3-hoverable" id="tableau">
          <thead>
            <tr class="w3-black">
              <th style="width:20%">
                Code Postal
              </th>
              <th style="width:80%">
                Nom de la localité
              </th>
            </tr>
          </thead>
          <tbody>
            <tr class="item" data-w3-repeat="lignes">
              <td>
                {{a}}
              </td>
              <td>
                {{b}}
              </td>
            </tr>
          </tbody>
        </table>
      </div>

Ce code affiche un champ de recherche au dessus du tableau, qui fait appel à la fonction w3.filterHTML()

L'identifiant du champ de recherche, ici id="champ1", est utilisé dans la dernière ligne du fichier JS, document.getElementById('champ1').focus();, pour placer le curseur dans ce champ à la fin du chargement de la page.

L'identifiant du tableau, ici id="tableau", est celui utilisé comme premier paramètre de la fonction w3.displayObject() présente dans le fichier JS, souvent de même nom que le fichier HTML.

w3-repeat n'est pas un attribut HTML5
w3-repeat -> data-w3-repeat => modifier la version 1.03 de w3.js (= w3P.js)

localites.js :

function myCtrl(myDataObject) {
  /* Ici, code éventuel de traitement des données à afficher */
  w3.displayObject(...);
}
w3.getHttpObject("localites.php", myCtrl);

localites.php :

<?php
/*header("Access-Control-Allow-Origin: *");*/
header("Content-Type: application/json; charset=UTF-8");
require("../res/php/inc_connexion_tmp.php");
$sql = "SELECT cp AS a, nomLocalite AS b FROM localites ORDER BY cp";
$rep=$bdd->query($sql);
if ($rep===FALSE) sortir(1,"");
$data=$rep->fetchAll(PDO::FETCH_ASSOC);
echo "{\"lignes\":".json_encode($data)."}";
// print_r("{\"lignes\":".json_encode($data)."}");
?>

Cross-Site HTTP Requests : Requests for data from a different server (other than the requesting page), are called cross-site HTTP requests. Cross-site requests are common on the web. Many pages load css, images, or scripts from different servers. However, in modern browsers, HTTP requests from scripts are restricted to the same site for security reasons. The following line (in the PHP example above) allows access to the page from a cross-site :
header("Access-Control-Allow-Origin: *");
La ligne, header("Content-Type: application/json; charset=UTF-8"); est importante. Elle détermine le type de renvoi de la fonction echo.
La ligne, echo "{\"lignes\":".json_encode($data)."}"; retourne au fichier appelant le data-object (au lieu de l'afficher).
Autre exemple : tableauPro

data-object : Tableau de valeurs

{"lignes":[
"0001_4GE1_80d9ecef6439e4fd3ef614c2d7f349e1.txt",
"0003_4GE1_80d9ecef6439e4fd3ef614c2d7f349e1.txt",
"0004_6GE1_80d9ecef6439e4fd3ef614c2d7f349e1.txt"
]}

Par rapport, au tableau d'objets vu précédemment, ici, chaque objet est remplacé par une valeur (ici, une string).

Exemple de codes HTML, JS et PHP

Code HTML, extrait du fichier publier.htm :

        <div class="w3-responsive">
          <p>
            Nom recherché : <input oninput="w3.filterHTML('#tableau', '.item', this.value)"
            placeholder="Numéro, type ou auteur" style="width:35%" id="champ1" />
          </p>
          <table class="w3-table-all w3-hoverable" id="tableau">
            <thead>
              <tr class="w3-black">
                <th style="width:90%">
                  QCM
                </th>
                <th style="width:10%">
                  Action
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="item" data-w3-repeat="a in lignes">
                <td>
                  {{a}}
                </td>
                <td>
                  TODO
                </td>
              </tr>
            </tbody>
          </table>
        </div>

Lorsque le data-object est un tableau de valeurs, la différence au niveau du code HTML est a in lignes

publier.js :

function myCtrl(myDataObject) {
  if(myDataObject.lignes.length>0) { /* myDataObject.lignes = un tableau */
    w3.displayObject("tableau", myDataObject); w3.show('#QCM_list');
  } else w3.show("#noQCM");
}
document.getElementById('champ1').focus(); w3.hide('#noQCM');  w3.hide('#QCM_list');
w3.getHttpObject("publier.php", myCtrl);

Il est logique de n'afficher un tableau que s'il contient des données. D'où la condition, où lignes est la clé de l'objet myDataObject (cfr la dernière ligne du fichier PHP, ci-dessous).

publier.php :

<?php
  $data = []; /* un tableau indexé (=> non associatif) */
  ...
  echo "{\"lignes\":".json_encode($data)."}";
?>

Rappel : Lorsque la valeur est une string, elle doit être codée en UTF-8, vu l'exigence imposée par la fonction PHP json.encode().

Affichage en fonction d'une liste déroulante : Exemple

On peut aussi permettre à l'utilisateur de sélectionner, en plus de filtrer (voire de trier). Cela provoquera un rechargement de la page.

localites2.htm :

        <div class="w3-row">
          <p class="w3-half">
            Province : <select id="province" onchange="chargement()">
              <option value="-1" placeholder="">
                Choisissez
              </option>
              <option value="3">
                Brabant Wallon
              </option>
              <option value="4">
                Bruxelles-Capitale
              </option>
              <option value="7">
                Hainaut
              </option>
              <option value="8">
                Liège
              </option>
              <option value="10">
                Luxembourg
              </option>
              <option value="11">
                Namur
              </option>
            </select>
          </p>
          <p class="w3-half">
            Localité recherchée : <input oninput=
            "w3.filterHTML('#tableau', '.item', this.value)" placeholder=
            "Nom de la localité, code postal" id="champ1" />
          </p>
        </div>

localites2.js :

chargement();

function chargement(){
  document.getElementById('champ1').value="";
  var province=document.getElementById('province').value;
  w3.getHttpObject("data.php?ID=9gXv5&where="+province,myCtrl);
  function myCtrl(myDataObject) {w3.displayObject("tableau", myDataObject);}
  document.getElementById('champ1').focus();
}

La fonction myCtrl() est déclarée dans la fonction chargement(). Ce controller ne traite pas les données du data-object. Ce controller ne fait (contrôle) rien. myCtrl() se contente, ici, d'appeler la méthode w3.displayObject(). Normalement, le traitement a lieu avant la demande d'affichage.

data.php :

/*header("Access-Control-Allow-Origin: *");*/
header("Content-Type: application/json; charset=UTF-8");
require("../res/php/inc_connexion_tmp.php");

$sql="";$ID=""; if (isset($_GET['ID'])) $ID=$_GET['ID'];
$where="";   if (isset($_GET['where'])) $where=$_GET['where'];
$orderBy=""; if (isset($_GET['orderBy'])) $orderBy=$_GET['orderBy'];
$limit="";   if (isset($_GET['limit'])) $limit=$_GET['limit'];

switch ($ID) {
  case '9gXv5':
  if($where!="") $where=" WHERE numProvince=".$where;
  $orderBy=" ORDER BY cp";
  $sql="SELECT cp AS a, nomLocalite AS b FROM localites".$where.$orderBy.$limit; break;

  default:$sql="";
}
/*die ("--". $sql);*/
/*if($sql=="") die("Veuillez vérifier l'identifiant de la requête SQL");*/

$rep=$bdd->query($sql);
/*if ($rep===FALSE) sortir(1,"");*/
$data=$rep->fetchAll(PDO::FETCH_ASSOC);
echo "{\"lignes\":".json_encode($data)."}";
/* print_r("{\"lignes\":".json_encode($data)."}");*/

myCtrl(myDataObject)

Une fois que le data-object existe (grâce au code PHP ou présent dans un fichier JS), les données qu'il contient peuvent être traitées avant leur affichage via la méthode w3.displayObject().

A controller is a function you write to control your data. With a self-written controller, you can modify data anyway you want : Convert to upper case, Convert currencies, Calculate and Summarize, Round values, Substitute values, Change colors according to values, Anything else you are able to program

Si les valeurs d'une colonne doivent être transformées avant l'affichage, par commodité, une colonne est ajoutée à l'objet JSON initial. Une colonne supplémentaire par colonne dont les valeurs doivent être modifiées avant affichage. Ce dédoublement fait grossir l'objet JSON inital. La colonne supplémentaire contiendra les données à afficher et la colonne dédoublée contient les données brutes sur lesquelles se feront les calculs.

function myCtrl(myDataObject) {
  var x = myDataObject.transactions; /* x = tableau d'objets (de lignes) */

  /* Les colonnes "b", "c" et "d" étant respectivement
  une date au format aaaa-mm-jj et deux number représentant un montant
  myObjet est modifié ( ajout des colonnes "bb", "cc" et "dd")
  NB : myObject étant passé à la fonction par référence, il sera modifié
  (Il contiendra donc trois colonnes de plus). x[i] représente une ligne. */

  for (var i = 0; i < x.length; i++) {
    x[i]["bb"] = dateFr(x[i]["b"]);
    x[i]["cc"] = x[i]["c"].toLocaleString('fr-BE',{ style:'currency',currency:'EUR'});
    x[i]["dd"] = x[i]["d"].toLocaleString('fr-BE',{ style:'currency',currency:'EUR'});
  }

  w3.displayObject("tableau", myDataObject);
}

/* Convertit une chaîne aaaa-mm-jj en chaîne telle que 3 jan 2018 */
function dateFr(aaaa_mm_jj){
  var parts = aaaa_mm_jj.split("-");
  var j=parts[2]; if (parts[2][0]=="0") j=parts[2][1];
  return j+" "+mois[parseInt(parts[1]-1)]+" "+parts[0];
}

Ici, le controller appelle une fonction externe dateFr() pour faire le traitement nécessaire.

Exemple d'un controller qui transforme un tableau de valeurs en un tableau d'objets :

function myCtrl(myDataObject) {
  if(myDataObject.lignes.length>0) {
    var x = myDataObject.lignes, y=[], myDataObject2={};
    for (let i = 0; i < x.length; i++) { let obj={}; obj.a=x[i];
      if(location.hash=="#y"){
        obj.b="<a href='copier.php?file="+x[i]+"' style='text-decoration: none;'>🗊</a>";
      }else{
        obj.b="<a href='effacer.php?file="+x[i]+"' style='text-decoration: none;'>❌</a>";
      }
      y.push(obj);
    }
    myDataObject2.lignes=y;
    w3.displayObject("tableau", myDataObject2); w3.show('#QCM_list');
  } else w3.show("#noQCM");
}

let obj={}; doit être déclaré dans la boucle.

Exemple : Summarize Price in a Table

w3.displayObject("id",myObject)

Cette méthode est l'une des plus intéressantes de ce framework, car elle permet de remplir :

un tableau (<table>)
une liste (<li>)
une liste déroulante (<option>)
une zone (<div>)
...

... sans être connecté à un serveur (local ou distant), simplement via un seul objet JS qui contient toutes les données à afficher.

Le premier paramètre est une string, entourée de guillemets (ou d'apostrophes), ayant comme valeur la valeur de l'attribut id d'une balise HTML, indiquant la zone dans laquelle les remplacements ont lieu.

Cette valeur ne doit pas être précédée par #.

Si la valeur du premier paramètre n'est pas celle de l'attribut id d'une balise HTML, se produit une erreur (qui s'affiche dans l'outil de développement du navigateur : CTRL+MAJ+I).

Le second paramètre est le nom du data-object contenant les données (au format JSON).

Ce data-object n'a qu'une seule clé et la valeur doit être un tableau.

Ce tableau est un tableau de valeurs ou un tableau d'objets (au format JSON).

Exemples :

var myDataObjet={"lignes":[,,...]};
var myDataObjet={"lignes":[{...},{...},...{...}]};

Voir : data-w3-repeat.htm

Lorsqu'il doit exister une connexion, la méthode w3.getHttpObject() est appelée avant cette méthode d'affichage (dans le même fichier JS).

Attention : L'appel de cette fonction DOIT être située après la construction / déclaration du data-object (second paramètre)

Il suffit alors d'ajouter les doubles accolades, {{ }}, à toute balise HTML identifiée (par le premier paramètre) pour réserver l'espace pour les données. Au final, après l'appel de la méthode w3.displayObject() s'afficheront les données dans la page web.

L'utilisation de ces doubles accolades, {{ }}, est permise comme valeur d'un attribut mais, dans ce cas, elle sera considérée comme une erreur lors d'un test de validation du code HTML (W3C). Exemples :

<a href= "mailto:{{e_mail}}">{{e_mail}}</a>
<a href="details.php?id_fiche={{a}}">{{a}}</a>

Le fichier HTML peut avoir un code HTML identique à celui vu avec la méthode w3.getHttpObject().

L'utilisation de w3.displayObject() peut aussi être utile avec un data-object qui n'est pas issu d'une base de données, pour remplir un simple texte.

Un data-object peut ne contenir qu'un seul enregistrement.

Et, une zone applicative peut contenir une zone applicative ! (imbrication.htm)

Avec ou sans data-w3-repeat

myObject est toujours un objet JSON. Il est donc

soit un tableau de couples :

{"customers":[
  {"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
  {"CustomerName":"Around the Horn","City":"London","Country":"UK"},
...
]}

soit un tableau de valeurs :

{"cars":[
"Volvo", "Ford", "BMW", "Mercedes"
]}

soit une collection de couples :

{"firstName" : "John", "lastName" : "Doe"}

soit ...

Généralement, une base de données renvoye un tableau de couples (ou un tableau de valeurs)
L'objet le plus court est myObject={key:value};

JSON = tableau de couples

Cette fonction, w3.displayObject(), devient très utile lorsque le nombre de couples key:value ou de collections de couples devient très important et/ou lorsque les valeurs ne peuvent pas être connues avant le codage en HTML. Par exemple, lorsque ces couples proviennent d'une base de données.

avec `data-w3-repeat`

dans une liste déroulante sans `value`

Code HTML :

<select id="id01">
  <option data-w3-repeat="customers">{{CustomerName}}</option>
</select>

Code JS :

var myObject = {"customers":[
{"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"CustomerName":"Around the Horn","City":"London","Country":"UK"},
...
]};

w3.displayObject("id01", myObject);

dans une liste déroulante avec `value`

Code HTML :

<select id="conteneur" name="conteneur">
  <option data-w3-repeat="lignes" value="{{a}}">{{b}}</option>
</select>

La couleur syntaxique de l'éditeur de code HTML peut induire en erreur.

Code JS :

var conteneur = {"lignes":[
{"a":"4","b":"Me"},
{"a":"17","b":"Me2"},
{"a":"18","b":"Me3"}
]};
w3.displayObject("conteneur",conteneur);

JSON = tableau de valeurs

Ici, la value de l'objet myObject est un tableau de collections.

Ou, si la value de l'objet cars est un tableau de valeurs.

<select id="id01">
  <option data-w3-repeat="x in cars">{{x}}</option>
</select>

<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>

JSON = collections de couples

sans `data-w3-repeat`

Code HTML :

<div id="id01">
{{firstName}} {{lastName}}
</div>

Code JS :

var myObject = {"firstName" : "John", "lastName" : "Doe"};
w3.displayObject("id01", myObject);

Ici, l'objet myObject est une collection de couples key:value séparés par une virgule.

Ou, via le script :

w3.includeHTML(myCallback); /* ?????????? */

function myCallback() {
    w3.displayObject("id01", myObject);
}

Exemple - tryw3js_display_table

Exemple : Remplissage d'un tableau de manière professionnelle (PHP-MySQL-W3.js au format JSON).

Exemple : Remplissage d'une liste déroulante avec les 1599 localités de la région wallonne et bruxelloise

Remplissage d'une liste déroulante, puis sélection d'une option :

/* récupération de l'ID de l'option devant être sélectionnée */
var id_group=document.getElementById("titre").getAttribute("data");

function myCtrl(oData) {
  /* remplissage d'une liste déroulante */
  w3.displayObject("num_group",oData);

  /* sélection d'une option */
  document.getElementById("num_group").value=id_group;
  }
w3.getHttpObject("group_all.php", myCtrl);

Autres exemples

Plus d'info : w3.displayObject

Gestion de l'apparence

w3.filterHTML("#id",'#id .item', this.value)

Le premier paramètre est une string, entourée de guillemets (ou d'apostrophes), ayant comme valeur # suivi de la valeur de l'attribut id d'une balise HTML.
Le second paramètre est une string, entourée de guillemets (ou d'apostrophes), indiquant la ligne sur laquelle sera appliqué le filtre.
Le troisième paramètre est le nom d'une variable JS ayant comme valeur une string, ou une string entourée de guillemets (ou d'apostrophes). Les caractères de cette string sont insensibles à la casse (ne tient pas compte des majuscules/minuscules).

Filtrer un tableau :

Les lignes ne contenant pas le terme recherché seront cachées.

Dès lors, le fait qu'une ligne sur deux ait une couleur de fond différente ne sera plus respecté.
La recherche ne portera pas sur une colonne, ni qu'au début de la string. Ce qui rend le filtrage effectué par w3.filterHTML() non optimal.
Si w3.filterHTML('#id01', '.item', this.value) => le filtrage s'appliquera aux éventuelles autres tables ...
Il serait possible d'appliquer le filtre sur une colonne, si <td class="item">Alfreds Futterkiste</td>
Exemple : filterHTML.htm

<input oninput="w3.filterHTML('#id01', '#id01 .item', this.value)" />

<table id="id01">
  <tr>
    <th>Customer</th>
    <th>City</th>
    <th>Country</th>
  </tr>
  <tr class="item">
    <td>Alfreds Futterkiste</td>
    <td>Berlin</td>
    <td>Germany</td>
  </tr>
  <tr class="item">

Filtrer une liste :

  <input oninput="w3.filterHTML('#id01', 'li', this.value)" />

  <ul id="id01">
    <li>...</li>
  </ul>

Exemple : w3js_filters

w3.sortHTML("#id", '.item'[, 'td:nth-child(n)'])

Trier alphabétiquement une table

Exemple : sortHTML.htm

Le troisième paramètre indique la colonne.
Où n (= numéro d'une colonne) varie de 1 à ...

<table id="myTable">
  <tr>
    <th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(1)')">Name</th>
    <th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(2)')">Country</th>
  </tr>
  <tr class="item">
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr class="item">

Le tri ne porte que sur les string (et non les number, les dates, currencies, ...). Ajoutons que plus le tableau contient de cellules, plus le tri est lent ! Pratiquement, le tableau devrait être limité à 500 cellules.

Trier alphabétiquement une liste

<button onclick="w3.sortHTML('#id01', 'li')">Sort</button>

<ul id="id01">

Exemple : tryw3js_sort_table

w3.includeHTML(`param`)

Pour qu'une application web fonctionne (aussi) sur le disque dur (= sans serveur), le contenu HTML devra être inclu via :
document.getElementById("...").innerHTML = ...

Cette fonction, faisant appel à un fichier (htm, txt, ...), requiert que le fichier appelant (*.js) soit situé sur un serveur web (local ou distant) et que le moteur JS du navigateur soit activé. Cette fonction est donc idéalement utilisée dans des applications web.

param peut être :

soit un nom de fichier (mis entre guillemets)
soit un nom de fonction (voir plus bas)

Le fichier w3.js doit être chargé avant l'appel de cette fonction, w3.includeHTML(). =>

    <script src="../../w3P.js"></script>
  </head>

Son usage est très pratique lorsque le code HTML devient long. En effet, l'ajout inopportun d'une <div> suivi d'une mise en forme automatique du code (via Tidy) peut entraîner une longue perte de temps pour corriger. Le code HTML devient plus propre (car plus court)

Le paramètre de l'attribut data-w3-include-html est un nom du fichier qui peut avoir n'importe quelle extension (dont txt).

Comme le contenu du fichier à inclure contient du code HTML, il est logique que l'extension de ce fichier soit ".htm"

Il bénéficiera alors de la coloration syntaxique, si le code HTML devait être retravaillé plus tard (ce qui est probable).

De plus, si le fichier à inclure contient des liens, il pourra alors être analysé comme n'importe quel fichier htm par un programme externe qui chercherait à établir une cartographie du site (tel que makeDot.py)

Il est préférable que le nom soit préfixé par "inc_" (ou "xxx_") suivi du nom du fichier l'incluant. Par exemple : inc_index.htm

xxx.htm :

    <script src="w3P.js"></script>
    <link rel="stylesheet" href="w3P.css" />
  </head>
  <body>

    <div data-w3-include-html="summary.htm"></div>
    <div data-w3-include-html="xxxModales.txt"></div>

    <script src="includeHTML.js"></script>   conseillé 
  </body>

L'appel (unique) de cette fonction, juste avant la balise </body>, inclut tous les fichiers. Ci-dessus, deux : summary.htm et xxxModales.txt. Ici, le fichier summary.htm sera utilisé dans plusieurs fichiers.

L'utilisation d'un fichier JS ne contenant qu'une seule ligne se justifie par la volonté de ne pas avoir de code JS dans du code HTML. Cela devient une nécessité lorsque le code HTML est nettoyé via Tidy.

includeHTML.js :

w3.includeHTML(); /* appel d'une fonction de w3P.js qui, lui, est chargé dans le <head> */

Code HTML déconseillé :

    <script>w3.includeHTML();</script>  déconseillé 
  </body>

L'appel de cette fonction, w3.includeHTML(), via l'inclusion d'une balise <script> dans du code HTML n'est pas recommandée (surtout, si on utilise Tidy pour améliorer la présentation de son code HTML).

Attention : On évitera de mettre du code JS, tel que des appels de fonctions dans le fichier à inclure. (Auquel cas, cette fonction devra être placée dans une callback function ?)

Une fois testé, le code HTML peut être compressé via
http://minifycode.com/html-minifier/

Pour qu'une modale (nommée ici, "alerte") puisse afficher un contenu différent (= factorisation du code HTML), il est même possible d'ajouter l'attribut data-w3-include-html via du JS, puis d'appeler la fonction w3.includeHTML().

function contenu_1(){
  document.getElementById("contenuAlerte").setAttribute("data-w3-include-html","../privacy.html");
  w3.includeHTML(); w3.show("#alerte");
}

Il suffit de créer autant de fonctions contenu_N pour utiliser le même code HTML de la fenêtre modale.

Exemple - tryw3js_html_include_2

Les fonctions ci-dessous intéresseront surtout les designers ...

Selectors

W3.JS agit sur les balises sélectionnées :

w3.action(selector)

Ci-dessus, action() est une fonction qui agit les balises sélectionnées
selector est un sélecteur CSS (une chaîne de caractères, spéciale).

Si l'action s'applique à la balise même, le mot-clé this peut être utilisé comme sélecteur

w3P.js utilise la syntaxe utilisée en CSS pour sélectionner, comme JQuery.
CSS Selectors Reference

w3.hide('p')  /* Hide all <p> elements */

Un sélecteur ne peut pas commencer par un chiffre. Plus d'info :

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F". (Source)

w3.slideshow(selector, interval)

<img class="nature" src="img_snowtops.jpg">
<img class="nature" src="img_mountains.jpg">
<img class="nature" src="img_nature.jpg">

<script>w3.slideshow(".nature", 1000);</script>

Le premier paramètre est une string = la valeur est celle de l'attribut id de la balise visée, mise entre guillemets.

Le second paramètre est un nombre représentant des millisecondes.

To prevent the slideshow from starting automatically, set the interval parameter to 0.

When you initiate a slideshow, the w3.slideshow() function returns an object representing the slideshow :

var myShow = w3.slideshow(".nature", 0);

The slideshow object contain properties and methods, such as next() and previous() :

Exemple - tryw3js_slideshow

w3.hide() / w3.show() / w3.toggleShow()

Le paramètre peut être "#id" pour cacher/montrer une balise ayant un ID, "nom_balise" pour cacher/montrer toutes les balises ayant ce nom, ".nom_classe" pour cacher/montrer toutes les balises ayant dans son attribut class, ce nom_classe.

Sans JavaScript, via le couple de balises : details / summary.

Solution

  <details>
    <summary>Solution</summary>
    <div>
      <p>Voici la réponse : ...</p>
    </div>
  </details>

  Le code ci-dessus est minimaliste. Il peut être amélioré comme ceci :
  <summary style="cursor:pointer">

  Mieux, le fichier CSS accompagnant le fichier HTML devrait contenir :
  summary{cursor:pointer; text-decoration:underline}

La solution devant être cachée avant le clic, il faut alors créer (ou compléter) un fichier JS (souvent du même nom que le fichier HTML), appelé à la fin du code HTML, ayant un code semblable à :

w3.hide('.solution');  /* ici, on utilise une 'class' pour pouvoir cacher plusieurs solutions */

Solution

Voici la réponse : ...

  <button onclick="w3.show('#div1')">w3.show()</button>
  <button onclick="w3.hide('#div1')">w3.hide()</button>
  <button onclick="w3.toggleShow('#div1')">w3.toggleShow()</button>

w3.toggleShow(selector) égal, en jQuery, à $(selector).toggle()

Avec jQuery, on peut choisir le temps (en millisecondes)
De plus, avec jQuery, existent : .fadeIn(), .fadeOut(), .fadeToggle(), .fadeTo(), .slideDown(), .slideUp(), .slideToggle()

Documentation

Add Style

w3.addStyle(selector,'property','value')

  <button onclick="w3.addStyle('#London','background-color','red')">Add Style</button>

Un style ne peut être retiré, mais il sera "écrasé" par le dernier style donné. Pour un seul élément, identifié par son id, cette fonction est peu utile. Mais, le selector peut être une classe, ... (et viser plusieurs éléments)

Exemple - tryw3js_add_style_id

Add / Remove / Toggle Class

w3.addClass(selector,'class')
w3.addClass(selector,'class1 class2 class3')

w3.removeClass(selector,'class')
w3.removeClass(selector,'class1 class2 class3')

w3.toggleClass(selector,'class')
w3.toggleClass(selector,'class1 class2 class3')

  <button onclick="w3.toggleClass('#London','marked')">Toggle Class</button>

Exemple - tryw3js_ref_toggle_class

Introduction

Gestion des données

Données dans une base de données

Données dans un fichier JSON

Données dans un fichier JS

Servers

PHP et MySQL (PDO)

PHP et SQLite (PDO)

PHP and MySQL (non PDO)

W3Data

w3.getHttpObject("fileName",myFunction)

data-object

data-object : Tableau d'objets

data-object : Tableau de valeurs

myCtrl(myDataObject)

w3.displayObject("id",myObject)

JSON = tableau de couples

avec data-w3-repeat

dans une liste déroulante sans value

dans une liste déroulante avec value

JSON = tableau de valeurs

JSON = collections de couples

sans data-w3-repeat

Gestion de l'apparence

w3.filterHTML("#id",'#id .item', this.value)

Filtrer un tableau :

Filtrer une liste :

w3.sortHTML("#id", '.item'[, 'td:nth-child(n)'])

Trier alphabétiquement une table

Trier alphabétiquement une liste

w3.includeHTML(param)

Selectors

w3.slideshow(selector, interval)

w3.hide() / w3.show() / w3.toggleShow()

Add Style

Add / Remove / Toggle Class

Liens

avec `data-w3-repeat`

dans une liste déroulante sans `value`

dans une liste déroulante avec `value`

sans `data-w3-repeat`

w3.includeHTML(`param`)