C’est quoi un événement en Javascript?

Un événement est par exemple un click de souris, une touche de clavier enfoncée, mais ça peut être purement logiciel, par exemple lorsque la page HTML a fini de se charger, il se produit un événement de type onload.

Un événement de requête AJAX

Ce type d’événement permet de détecter lorsqu’une requête AJAX est émise.

(function() {
    var origOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function() {
        console.log('request started!');
        this.addEventListener('load', function() {
            console.log('request completed!');
            console.log(this.readyState); //will always be 4 (ajax is completed successfully)
            var text = this.responseText
            toto = document.querySelector('#toto')
            toto.innerHTML = toto.innerHTML + text

        });
        origOpen.apply(this, arguments);
    };
})();

Vous avez sans doute souvent vu dans un script javascript moderne ceci:

import Component from '@/components/component'

Normalement si on veut importer un module Javascript, il faut utiliser les / et les .. soit pour remonter d’un niveau soit pour descendre d’un niveau, comme on le ferait dans n’importe quel langage de programmation.

Cette notation n’est pas du Javascript natif, elle est rendue possible par l’utilisation d’un plugin de type module loader ou module bundler.

C’est un plugin comme babel plugin root import, qui permet d’avoir cette syntaxe. Mais de quel root? le root du projet javascript en question. Ainsi quelque soit l’emplacement du plugin et de la page qui demande le plugin, on utilisera l’arobase pour atteindre un plugin comme si on le demandait depuis la racine du projet.

Cela permet d’éviter que la syntaxe suivante :

import Component from 'components/component'

Dans ce cas ça va chercher dans /node_modules.

Si on cherche un module dans le projet

import Component from './components/component'

setTimeout n’appartient pas à V8

Javascript est single threaded

Blocking

Async callback and call stack @ 11:25

console.log('hi'); // A

setTimeout(function(){  // B
    console.log('there');
},5000);

console.log('Hello');  // C

Ordre d’appel dans le callstack A, B, C mais le ‘there’ est affiché 5 secondes après. Javascript ne fait qu’une seule chose à la fois

Event Loop

L’event loop regarde s’il reste encore des opérations à faire dans le stack, si le stack est vide, l’Event loop va regarder dans le task queue.

Liens :

JS Async

Latentflip Loupe

Javascript engine talk

    const handleAccountCreation = async () => {
        const exist = await userExistCheck(result.email)
        console.warn('social login', exist)

        if (exist.exist !== null) {
            socialLogin(result.email)
            console.warn('social login')
        }
        else {
            createAccount(result.email)
            console.warn('social create account')
        }
    }

La condition dans le if échoue si exist est null, car exist.exist reverra une erreur undefined.

Il faut mettre une condition autrement

    const handleAccountCreation = async () => {
        const exist = await userExistCheck(result.email)
        console.warn('social login', exist)

        if (exist == null) {
             createAccount(result.email)
             console.warn('social login')
        }
        else {
            socialLogin(result.email)
            console.warn('social create account')
        }
    }

A ne pas confondre avec le null coalesce operator en Javascript ?? . Cet opérateur est encore appelé optional chaining operator.

        if (data.error?.message) {
          Alert.alert('Erreur carte',
            `Votre transaction ne s\'est pas terminée correctement Message de Stripe.com : ${data.error.message}`)
        } else {
          return data.id
        }

Si error n’existe pas alors data.error?.message évaluera en undefined

https://ponyfoo.com/articles/null-propagation-operator

La syntaxe JSX n’est pas forcément facile à appréhender, imaginez du HTML dans un return…

Pour faire une boucle sur un tableau afin d’afficher une liste par exemple d’élément JSX, il existe plusieurs façons, mais la plus répandue (99% semble-t-il) est d’utiliser map qui est une méthode de l’objet Array, qui retourne un tableau avec le même nombre d’éléments que le tableau d’entrée)

Façon ES6, la plus compacte avec fonction flèche

<div>
    {montableau.map((item, i) => <ObjectRow obj={item} key={i} />)}
</div>

Méthode avec le mot clé function

<div>
    {montableau.map(function(object, i){
        return <ObjectRow obj={item} key={i} />;
    })}
</div>

Avec la boucle for

Cette méthode est rarement vue mais elle marche

<div>
    for (var i=0; i < objects.length; i++) {
        <ObjectRow obj={objects[i]} key={i}>
    } 
</div>

https://stackoverflow.com/questions/22876978/loop-inside-react-jsx

Cette thématique est rarement abordée, mais je trouve qu’il est intéressant d’ajouter des raccourcis clavier à votre application. Il existe des plugin qui le font déjà, mais back to basics, regardons comment on le fait avec du Javascript pur

Ecouter les touches alpha numérique de base

document.addEventListener('keydown', function (event) {
  if (event.key === 'a') {
    //votre code javascript ici
  }
  if (event.key === 'd') {
    //votre code javascript ici
  }
});

Il est assez simple d’ajouter un listener, mais l’astuce est de le faire sur l’élément document, comme ça, ça concernera toute votre page et on utilisera la délégation d’événement.

Ecouter les touches spéciales

document.addEventListener('keydown', function (event) {
  // CTRL + D combo
  if (event.ctrlKey && event.key === 'd') {
    //votre code
  }
  // CTRL + L combo 
  if (event.ctrlKey && event.key === 'l') {
    //votre code
  }
});

Eviter les conflits avec les autres raccourcis clavier de votre navigateur, par exemple sur Windows ou Linux, CTRL + D sert à bookmarker une page, pour éviter cela on va utiliser le célèbre preventDefault !!

document.addEventListener('keydown', function (event) {
event.preventDefault()
  // CTRL + D combo
  if (event.ctrlKey && event.key === 'd') {
    //votre code
  }
  // CTRL + L combo 
  if (event.ctrlKey && event.key === 'l') {
    //votre code
  }
});

Les autres touches péciales Alt, Shift etc

alt :  event.altKey
shift : event.shiftKey

Les hook sont apparus avec la version de React 16.8.

Le Hook UseState en ReactJS

Le hook UseState se charge du state dans les composants fonctionnels. Dans le composant de classe on avait :

this.setState(nouveauState)
#avec useState
const [state,setState] = useState(initialState)

Le hook useEffect

Il est l’équivalent de plusieurs fonction de cycle dans les composant de classe. Il remplace ComponentDidMount, ComponentDidUpdate.

#invocation au premier rendu
useEffect( () => {

},[])

#invocation au premier rendu et à chaque update du state
useEffect( () => {

},[variable])


#invocation uniquement à chaque update (et pas au premier chargement)

const isInitialMount = useRef(true);

useEffect(() => {
  if (isInitialMount.current) {
     isInitialMount.current = false; //grâce à cette astuce on bypasse l'exécution du code d'update au premier rendu
  } else {
      // le code pour chaque update
  }
});

Une des choses qui m’énervent le plus (et les développeur) est que dans certains processus de build avec NodeJs, on est confronté à des erreurs qui résultent de droits d’accès à des répertoires parce qu’on n’est pas utilisateur root. Ce problème se produit surtout en environnement MacOS et Linux. sous Windows vous travaillez en Administrateur en général.

Sur le site de NPM, il vous est expliquée ue procédure d’installation de NodeJS qui vous évite cet écueil. Le principe consiste à changer le répertoire par défaut de NPM.

https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally

Lorsque l’on code et que l’on est débutant ou intermédiaire, il y a des bonnes chances de faire du code touffu ou en spaghetti, illisible, et souvent buggé. Nous allons voir avec des exemples concrets comment à partir d’un code issu du monde réel, on peut améliorer la lisibilité du code, la concision, et l’efficacité tout en évitant des bugs.

Lecture d’un tableau d’objet en Javascript

L’exemple ci-dessous est tiré d’une application Handlebars, le snippet lit un tableau d’objet en deux dimensions.

if(enfantsObject.EnfantsComm != null || enfantsObject.EnfantsP1 != null || enfantsObject.EnfantsP2 != null){
            if(Object.keys(enfantsObject).length){
                $.each(enfantsObject, function(index,value){
                    if(value != null && value != "{}" && jQuery.isNumeric( value )){
                        $.each(value, function(index2, value2){
                            if(value2.pension !== undefined){
                                montPens += Number(value2.pension);
                            }
                        })
                    }
                })
            }
        }

Le model à lire était un tableau d’objets avec les propriétés suivantes, un seul niveau d’imbriquement. Il y a plusieurs choses qui me surprennent, le fait d’utiliser la fonction de Jquery each, qui sert à itérer dans les éléments du DOM (les tags HTML), elle est ici utilisée alors qu’elle ne devrait pas l’être, inapproprié.

Le problème c’est que les propriétés sont changeante, elles peuvent ne pas être présentessuivant la façon dont l’objet a été initialisé. Voir l’exemple ci-dessous :

Dans l’exemple ci-dessus, les propriétés pension et pensionDate ne sont pas présentes ! Mauvaise pratique qui va nous compliquer le code, soit on retravaille l’initialisation, soit on checke les objets quand ils sont utilisés.

Ensuite il y a le Object.keys, elle est utilisée ici pour détecter que l’objet possède des clés (enfantCommuns, enfantP1, etc). Ceci n’est pas du tout stable, c’est en amont que les choses devraient être faites, notamment en initialisant proprement les différents propriétés de l’objet enfantsObject, y mettre un objet vide nous assure de la présence de la propriété et ne pas à avoir faire ce check inutile.

Première étape on simplifie le code

Si vous voulez améliorer votre code, mais que vous ne savez pas par où commencer, choisissez la lisibilité, qui doit être l’ultime but recherché, pas de code intelligent qui marche mais difficile à lire pour les autres développeur. Quitte à faire une simple boucle for au lieu de faire un map comme en programmation déclarative.

Ci-dessous, j’ai scindé en trois parties (attention il ya duplication de code similaire), ce qui n’est pas bon, mais cette étape intermédiaire nous permettra de refactorer en une fonction réutilisable.

J’ai du faire varier les différents cas sur l’interface pour voir les cas limites, et vous verrez un check pour s’assurer que c’est un tableau, en effet, quand il n’y a pas d’enfant présent, on n’a pas un tableau vide mais un objet ! (pourquoi ne pas revoir l’initialisation vous me direz? pour des impératifs de budget tout simplement)

Preuve que répéter du code n’est pas bon, parfois j’oublie de renommer à certains endroits et le programme plante.

        var pensionEnfantscommun = 0;
        var pensionEnfantPers1 = 0;
        var pensionEnfantPers2 = 0;

        if(enfantsObject.EnfantsComm != null && Array.isArray(enfantsObject.EnfantsComm)){
            for(i=0;i<enfantsObject.EnfantsComm.length;i++){
                if(enfantsObject.EnfantsComm[i].pension != undefined && enfantsObject.EnfantsComm[i].pension != ""){
                    pensionEnfantscommun += parseInt(enfantsObject.EnfantsComm[i].pension);
                }
            }    
        }

        if(enfantsObject.EnfantsP1 != null && Array.isArray(enfantsObject.EnfantsP1)){
            for(i=0;i<enfantsObject.EnfantsP1.length;i++){
                if(enfantsObject.EnfantsP1[i].pension != undefined && enfantsObject.EnfantsP1[i].pension != ""){
                    pensionEnfantPers1 += parseInt(enfantsObject.EnfantsP1[i].pension);
                }
            }    
        }

        if(enfantsObject.EnfantsP2 != null && Array.isArray(enfantsObject.EnfantsP2)){
            for(i=0;i<enfantsObject.EnfantsP2.length;i++){
                if(enfantsObject.EnfantsP2[i].pension != undefined && enfantsObject.EnfantsP2[i].pension != ""){
                    pensionEnfantPers2 += parseInt(enfantsObject.EnfantsP2[i].pension);
                }
            }    
        }

On vérifie que tout fonctionne (en tant que développeur il faut toujours bien tester ce que l’on fait). Maintenant nous pouvons faire une fonction réutilisable.

Seconde étape on refactore avec des fonctions

        // sous fonction 
        const majorationPension = function(enfant){
            if(enfant.pensionDate != undefined && enfant.pensionDate != ""){
                return Math.min(parseInt(enfant.pension) * 1.25,PARAM.SEUIL_JUGEMENT) 
            } else {
                return parseInt(enfant.pension)
            }
        }

        // fonction locale de calcul de fonction
        const sumPension = function(arrayEnfants){
                            const pensionEnfants = 0
                                if(arrayEnfants != null && Array.isArray(arrayEnfants)){
                                            for(i=0;i< arrayEnfants.length;i++){
                                                if(arrayEnfants[i].pension != undefined && arrayEnfants[i].pension != ""){
                                                    pensionEnfants += majorationPension(arrayEnfants[i]);
                                                }
                                            }    
                                        }
                                        return pensionEnfants
                                    }
        var montPens = 0;
        var pensionEnfantscommun = 0;
        var pensionEnfantPers1 = 0;
        var pensionEnfantPers2 = 0;

        pensionEnfantscommun = sumPension(enfantsObject.EnfantsComm)
        pensionEnfantPers1 = sumPension(enfantsObject.EnfantsP1)
        pensionEnfantPers2 = sumPension(enfantsObject.EnfantsP2)

J’ai ajouté une sous fonction majorationPension parce qu’il était nécessaire de faire un filtrage, et on n’oublie pas le parseInt, qui permet de convertir en véritable entier, sinon on aurait des erreurs de type NaN (not a number)

Notez l’utilisation de const pour des variable locales, une bonne pratique à prendre.

Conclusion

Maintenant on a sauvé quelques lignes, et surtout obtenu un code plus lisible pour la maintenance ou les évolutions plus tard.

Voici le code minimal pour faire une tabulation (des onglets que l’on peut cliquer pour changer de contenu)

Comment faire des onglets cliquable en javascript?

Le principe :

On a en fait une rangée d’éléments cliquables, que l’on va mettre dans des <li>, mais ce n’est pas obligatoire, et ensuite les différentes <div> que l’on va révéler ou cacher suivant les <lI> cliquer.

<html>
<head>
<title>Tutorial theme</title>
</head>

<body>
    <style>
        .tab-menu {
            padding: 0;
        }
        .tab-menu li {
            display: inline-block;
        }
        .tab-menu .active {
            background: yellow;
        }
    </style>

        <ul class="tab-menu">
            <li><a href="#tab-1">Tab 1</a></li>
            <li><a href="#tab-2">Tab 2</a></li>
            <li><a href="#tab-3">Tab 3</a></li>

        </ul>

<div id="tab-1" class="tab-content" >
Contenu du tab 1
</div>
<div id="tab-2" class="tab-content" >
Contenu du tab 2
</div>
<div id="tab-3" class="tab-content" >
Contenu du tab 3
</div>


</body>
    <script type="text/javascript">
        $(document).ready(function() {
          $('.tab-content').slice(1).hide();
            $('.tab-menu li').eq(0).addClass('active');
            $('.tab-menu li a').click(function(e) {
                e.preventDefault();
                var content = $(this).attr('href');
                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active');
                $(content).show();
                $(content).siblings('.tab-content').hide();
            });
        });
    </script>
</html>

Donc pour résumer en cliquant un lien, ce lien a sa classe css à active, les autres qui sont à côté sont inactifs, content est égal à ce qu’il y a dans l’attribut href, $(content) va en réalité sélectionner l’élément ayant l’id (unique cela va de soi), et le montre, tous ses voisins sont cachés.

 

 

 

Imaginez que vous ayez un projet front end, par exemple personnalisation d’un thème d’une boutique Magento, cela ne concerne que le CSS et HTML (voire du javascript), les fichiers sont gros, pouvant faire dix milles lignes en CSS, hors de question de le faire directement en CSS, il y a beaucoup mieux le Sass. Le Sass est un « langage » qui va se compiler en CSS, l’avantage est qu’il est facilement  compréhensible, car sa syntaxe est structurée.

/* Sass */
div > p {
  color:blue;
  a {
    color : red;
  }
}

/* converti en CSS */

div > p {
  color: blue;
}
div > p a {
  color: red;
}

L’exemple ci-dessus illustre la lisibilité de la notation en Sass, hiérachisée mais pas forcément plus concise, en revanche très lisible, la syntaxe Sass est beaucoup plus riche et plus puissante que ne le montre l’exemple ci-dessus. En comparaison, la notation CSS est plus plate et répétitive, et bien sûr moins lisible.

NPM va nous permettre d’installer les dépendances, et dans le cas du Sass, on va installer node-sass pour compiler le Sass en CSS à chaque fois qu’on enregistre le fichier Sass (extension .scss).

Initialisation d’un projet NPM

npm init

Après cette commande vous devez répondre à un tas de questions comme le nom du projet, le propriétaire, la licence, pas mal de champs sont optionnels rassurez-vous etc.

Un fichier package.json est généré.

Ensuite installons le paquet node-sass. Ce dernier permet de surveiller les modifications d’un fichier Sass et de compiler en CSS automatiquement.

$ npm install -D node-sass nodemon
#le D signifie une dev dependency

Dans votre package.json, ajoutez ces lignes

“scripts”: {
  “build-css”: “node-sass --include-path scss scss/main.scss   public/css/main.css”
}

#Pour lancer la compilation
$ npm run build-css

Mieux encore watcher pour automatiquement compiler au moindre changement puis sauvegarde du fichier sass.

“scripts”: {
 “build-css”: “node-sass --include-path scss scss/main.scss public/css/main.css”,
 “watch-css”: “nodemon -e scss -x \”npm run build-css\””
},

lien : https://medium.com/@brianhan/watch-compile-your-sass-with-npm-9ba2b878415b

Sur ce blog, quand je parle de Javascript, je parle de Javascript pur, et non de JQuery, cette extension étant trop célèbre, sur les forums les gens ont même tendance à proposer une solution en JQuery alors que c’est en Javascript pur (Vanilla Javascript) que la question était posée.

Sélectionner des tags HTML en Vanilla Javascript

Supposons que vous avez une page HTML, vous agrémentez d’un script Javascript en fin de page, on va utiliser la méthode querySelectorAll, qui est une fonction très importante, car elle permet de sélectionner des tags HTML selon divers critères. Par exemple, si on veut les liens hypertextes présents sur la page courante :

var links = querySelectorAll("a")

Pour comprendre comme ça marche, le sélecteur est « a » comme ancre, c’est comme en CSS, si je veux que des div, je mets « div », si je veux les div et ancres :

var elem = document.querySelectorAll("a","div")

Maintenant on va faire un peu plus compliqué :). Supposons que nous voulions seulement les liens nofollow, sur une page HTML un lien nofollow est spécifié avec l’attribut « rel » :

<a href="https://www.google.fr" rel="nofollow" />Lien</a>

Pour sélectionner ce lien, on fera :

var links = document.querySelectorAll("a[rel=nofollow]")

querySelectorAll pour sélectionner dans un sous ensemble de HTML

Parfois on a besoin de faire une sélection sur un ensemble plus petit, parce que la page est complexe, on veut dégrossir le travail. On peut dans ce cas sélectionner un élément HTML d’ordre supérieur, et faire un querySelectorAll sur ce sous ensemble.

var contenu = document.querySelectorAll("div[id=main]")
var links = contenu.querySelectorAll("a")

Ceci est rendu possible par le mécanisme d’héritage de type prototypal (pas un héritage classique au sens classe).

querySelector pour ne sélectionner que le premier

Il peut arrive qu’on n’a besoin que d’un élément (quand on est sûr), et cela pour éviter d’avoir à itérer sur un tableau, on utiliser alors QuerySelector, qui nous retourne alors un seul élément. Dans le jargon, on parle d’un node retourné, là où querySelectorAll retourne un nodeList.

Créer le bookmarklet le plus simple du monde en 10 secondes

<a href="javascript: alert('Un bookmarklet !');">Fav moi</a>

Cela va créer lien Fav moi, que vous allez glisser déposer sur la barre des favoris.

En fait ce n’est rien de plus qu’une ligne de javascript que vous auriez fait de façon classique, sauf que c’est mis dans un lien, et que vous avez mis en favori ce lien, astucieux comme concept non?

Pour c’est super intéressant de savoir faire un bookmarklet? C’est plus simple que de faire faire un addon pour Firefox ou Chrome, par exemple, et c’est presque croos browser de nos jours aux différences d’implémentation de Javascript près.

Parce que ça augmente les fonctionnalité du browser, donc de faire des trucs super intéressant sur les pages web, comme par exemple surligner les liens hypertexte, ou remplacer le logo de Google par celui de Bing ! et vice versa.

Pour les SEO cela peut être intéressant, faites travailler votre imagination.

Les différents degrés de sophistication de conception des bookmarklet

Nous avons vu que la première et plus simple manière de faire un bookmarklet est de mettre directement le Javascript dans un lien hypertexte. Ok c’est cool mais si le code Javascript est plus conséquent?

Un bookmarklet est un code qui va s’exécuter sur la page courante. Vous pouvez définir une fonction anonyme dans la section script et l’appeler dans le lien hypertexte.

1. Le javascript dans le lien directement (voir ci-dessus)
2. Le javascript dans une fonction anonyme quand le code est plus conséquent
3. Le javascript dans un fichier externe (on fait une inclusion avec <link>)
4. Plus badass, incluez AngularJS ou VueJS ou toute autre librairie

javascript:(function(){// code javascript })();

Voici un exemple de bookmarklet que j’ai fait pour remplir le champ « Legende », »Alt » et « Description » dans l’interface d’ajout d’image.

<a href="javascript:(function(){var t=document.querySelectorAll('div.media-sidebar label input');var a=t[2];var u=document.querySelectorAll('div.media-sidebar textarea');var b=u[0];var v=document.querySelectorAll('div.media-sidebar label input');var c=u[1];b.innerHTML=c.innerHTML=a.value;this.stop;})()">copy</a>

Inclure une feuille de Javascript externe quand vraiment le code est trop volumineux. Dans ce cas il vous placer le script dans une url accessible sur le web.

javascript: (function () { 
   var jsCode = document.createElement('script'); 
   jsCode.setAttribute('src', 'http://domaine.com/file.js');                  
 document.body.appendChild(jsCode); 
}());

Souvenez vous que votre bookmarklet ne doit pas avoir de collission avec le JS de la page sur laquelle elle sera utilisée. Dans l’exemple ci-dessus c’est une fonction à invocation immédiate qui est utilisée, évitant justement la collision de variable.

Si vous chargez un script et que vous voulez être sûr  qu’il soit chargé, voici un tuto sur un site https://idiallo.com/javascript/async-jquery

Element de langage en javascript utile pour les bookmarklets

Les bookmarklets font beaucoup de traversing de DOM ou de sélection de DOM, vous devez en général le faire en Javascript pure voici quelques commandes pour vous simplifier le travail

querySelectorAll

Cette fonction est très utilisée pour matcher des éléments du DOM, elle va vous retourner un objet de type NodeList. NodeList n’est pas un tableau, vous ne pouvez pas le traverser avec une boucle for traditionnelle, ni map(), filter() ou slice(), il faut le convertir en tableau avant.

#sélection des liens 
var a=document.querySelectorAll('a') // NodeList
#sélection des div avec la classe 'primary'
var a = document.querySelectorAll('div.primary')

Convertir un NodeList en tableau

# Array.from()
var array = Array.from(a)

#spread operator
var array = [...a] // rendu possible car a est iterable

A shell for executing javascript in a bookmarklet !

A shell in a bookmarklet

Can you believe that? a bookmarklet is a short javascript code snippet (usually shorter than 1024 characters), that performs various tasks, and you can bookmark them = execute them by clicking on the bookmark, neat huh? For example if you are a member of the social bookmarking site Delicious, there is a bookmarklet that let you bookmark a site without copy pasting a url into the form, all you need to do is click on the bookmarklet, it’s (almost) done !

With the bookmarklet that I am talking, you have a console like a Unix shell, type you javascript command or script, press enter and the code is executed. Go fetch the shell bookmarklet.

Once you are on the webpage, drag the « Shell » bookmarklet in your bookmark area, that’s all. Just clik on the bookmark to open a popup window (the console) and start playing with javascript !

A quoi sert la notation JSON

Le JSON ( Javascript Object Notation) est un format d’échange de données très utilisé dans le domaine du web et pas forcément que dans du Javascript. En fait PHP aussi possède des fonction pour encoder un tableau associatif en tableau JSON.

Vous aurez besoin de JSON quand vous allez faire de l’AJAX. Où quand vous allez faire appel à une API chez n’importe quel fournisseur de service Saas possédant une API digne du nom.

Explication de la syntaxe JSON

Un objet JSON est écrit dans des accolades.

{action:edit,id:1956} cette chaîne JSON va inclure comme clé de tableau action et id. Par exemple vous avez une application web en AJAX qui permet d’éditer, d’effacer, un article ou un item identifié par son id. Quand vous cliquez sur le lien « Editer », une action AJAX va envoyer un tableau JSON contenant comme information le type d’action et l’id de l’objet à effacer.

Utiliser en PHP et AJAX

On utilise couramment JQuery pour des traitement AJAX, n’essyez pas de le coder vous même en Javascript pure (compliqué, sujet aux erreus)

Imaginons que vous avez une page html dynamique écrite avec PHP et que vous avez un bouton qui va rafraichir une partie de la page (cours de bourse de Michelin par exemple), en cliquant sur le lien « Rafraichir cours de bourse », un appel AJAX est fait à un script PHP « update_cours_de_bourse.php » (dans la réalité je le nommerais do.php tout simplement).

Ce fichier do.php va calculer le cours de bourse de Michelin et retourner un tableau JSON, on utilisera simplement la commande echo de PHP pour afficher les valeurs JSON :

echo {label:michelin,cours:26.5}

le résultat sera lu par JQuery de la page appelante, grâce à une fonction callback (une fonction qui lit la valeur retournée par la page do.php).

JSON (JavaScript Object Notation) : le guide complet pour comprendre et utiliser JSON

Par Yvon Huynh – Mise à jour 2026

À quoi sert la notation JSON ?

Le JSON (JavaScript Object Notation) est aujourd’hui le format d’échange de données le plus utilisé sur Internet. Bien qu’il soit né avec JavaScript, il est désormais compatible avec pratiquement tous les langages de programmation : PHP, Python, Java, C#, Go, Rust, Node.js, Ruby et bien d’autres. Son principal avantage est d’offrir un format de données léger, facilement lisible par un humain tout en étant très simple à interpréter par une machine.

Dans une application web moderne, JSON est omniprésent. Chaque fois qu’un navigateur communique avec un serveur, qu’une application mobile consulte une API REST, qu’un framework JavaScript comme React, Vue.js ou Angular récupère des données, il y a de très fortes chances que ces informations transitent au format JSON. Même les applications de bureau, les objets connectés (IoT), les services Cloud et les bases de données NoSQL comme MongoDB utilisent massivement JSON.

Vous utiliserez également JSON lorsque vous développerez des appels AJAX, lorsque vous consommerez une API publique (Google Maps, Stripe, OpenAI, GitHub…), ou encore lorsque vous sauvegarderez des paramètres de configuration dans un fichier.

Pourquoi JSON est-il devenu un standard ?

Avant JSON, de nombreuses applications échangeaient leurs données au format XML. Ce dernier est toujours utilisé dans certains domaines (banques, administration, SOAP), mais il est beaucoup plus verbeux et plus difficile à manipuler.

JSON est devenu le standard pour plusieurs raisons :

• il est beaucoup plus compact ;
• il est très facile à lire ;
• il est directement interprétable en JavaScript ;
• il existe des bibliothèques dans tous les langages ;
• il réduit la quantité de données échangées sur le réseau.

Aujourd’hui, lorsque vous consultez une API REST, la réponse est presque toujours au format JSON. C’est également le format utilisé par les applications mobiles Android et iOS pour dialoguer avec leurs serveurs. Si vous souhaitez devenir développeur web, savoir manipuler JSON est tout simplement indispensable.

Comprendre la syntaxe JSON

Un objet JSON est toujours écrit entre accolades.

Exemple :

{
  "action": "edit",
  "id": 1956
}

Contrairement à JavaScript où certaines écritures sont tolérées, un document JSON valide impose des règles strictes :

• toutes les clés doivent être entourées de guillemets doubles ;
• les chaînes de caractères doivent également être entre guillemets ;
• les nombres ne sont pas entourés de guillemets ;
• les booléens sont écrits true ou false ;
• les valeurs nulles sont écrites null.

Beaucoup de développeurs débutants oublient les guillemets autour des propriétés ou ajoutent une virgule après le dernier élément. Ces erreurs rendent immédiatement le JSON invalide et provoquent des erreurs lors du décodage.

Les différents types de données en JSON

JSON sait représenter plusieurs types de données.

Une chaîne de caractères :

{
  "nom": "Michel"
}

Un nombre :

{
  "age": 42
}

Un booléen :

{
  "admin": true
}

Une valeur nulle :

{
  "telephone": null
}

Un tableau :

{
  "notes": [12, 15, 18, 20]
}

Un objet imbriqué :

{
  "utilisateur": {
    "nom": "Martin",
    "ville": "Toulouse"
  }
}

Ces quelques structures suffisent à représenter pratiquement toutes les données d’une application moderne.

Les tableaux JSON

Un tableau JSON est représenté entre crochets.

Par exemple :

[
  "PHP",
  "JavaScript",
  "Python"
]

ou encore :

[
  {
    "id": 1,
    "nom": "Paul"
  },
  {
    "id": 2,
    "nom": "Julie"
  }
]

C’est le format le plus courant lorsqu’une API retourne une liste de produits, de clients, de formations ou d’articles.

JSON et PHP

PHP possède deux fonctions extrêmement importantes :

• json_encode()
• json_decode()

Transformer un tableau PHP en JSON :

$personne = [
    "nom" => "Martin",
    "age" => 32
];

echo json_encode($personne);

Résultat :

{
  "nom": "Martin",
  "age": 32
}

Dans l’autre sens :

$json = '{"nom":"Martin","age":32}';

$data = json_decode($json, true);

echo $data["nom"];

Le deuxième paramètre de json_decode() est souvent oublié. En mettant true, PHP retourne un tableau associatif au lieu d’un objet, ce qui simplifie énormément le développement.

JSON et AJAX

L’un des usages les plus populaires de JSON est la communication AJAX.

Imaginons une application qui affiche le cours de bourse de Michelin. Lorsqu’un utilisateur clique sur le bouton Actualiser, le navigateur envoie une requête HTTP vers un script PHP.

Le fichier do.php pourrait retourner :

echo json_encode([
    "label" => "Michelin",
    "cours" => 26.50
]);

Le navigateur reçoit alors :

{
  "label": "Michelin",
  "cours": 26.5
}

Le JavaScript met simplement à jour la partie concernée de la page sans effectuer un rechargement complet. C’est ce mécanisme qui rend les applications web modernes beaucoup plus fluides.

Aujourd’hui, on utilise Fetch plutôt que jQuery

En 2017, jQuery était pratiquement incontournable pour effectuer des appels AJAX. Ce n’est plus le cas aujourd’hui.

Les navigateurs disposent désormais de l’API Fetch, intégrée nativement.

Exemple :

fetch("do.php")
    .then(response => response.json())
    .then(data => {
        console.log(data.cours);
    });

Cette approche est devenue le standard du développement JavaScript moderne et fonctionne sans bibliothèque supplémentaire.

JSON et les API REST

Lorsque vous utilisez une API, vous envoyez généralement des données JSON au serveur et celui-ci vous répond également en JSON.

Par exemple :

Requête :

{
  "email": "contact@test.com",
  "password": "secret"
}

Réponse :

{
  "success": true,
  "token": "eyJhbGciOi..."
}

Les API de Stripe, GitHub, OpenAI, Google Maps, Facebook ou encore Notion utilisent toutes JSON comme format principal d’échange.

Les erreurs les plus fréquentes avec JSON

La majorité des erreurs rencontrées par les développeurs concernent la syntaxe.

Les plus courantes sont :

• oublier les guillemets autour des clés ;
• mettre une virgule après le dernier élément ;
• utiliser des apostrophes au lieu des guillemets doubles ;
• oublier d’échapper certains caractères spéciaux ;
• envoyer du HTML au lieu d’un document JSON ;
• mélanger JSON et objet JavaScript.

Une autre erreur très fréquente est d’envoyer un message d’erreur PHP avant le JSON. Une simple notice PHP affichée avant le document JSON rend toute la réponse invalide.

Comment valider un document JSON ?

Lorsque votre JSON semble incorrect, il existe de nombreux validateurs en ligne permettant de vérifier rapidement la syntaxe.

Vous pouvez également utiliser les outils de développement de Chrome, Firefox ou Edge pour inspecter les réponses des requêtes AJAX et visualiser directement le JSON retourné par votre serveur.

La majorité des éditeurs modernes (Visual Studio Code, PhpStorm, IntelliJ IDEA) mettent également en évidence les erreurs de syntaxe JSON au moment de la saisie.

JSON.parse() et JSON.stringify()

En JavaScript, deux fonctions sont incontournables.

Transformer une chaîne JSON en objet JavaScript :

let utilisateur = JSON.parse(json);

Transformer un objet JavaScript en chaîne JSON :

let texte = JSON.stringify(utilisateur);

Ces deux méthodes sont utilisées quotidiennement dans pratiquement toutes les applications web modernes. Elles servent notamment lors des appels API, du stockage dans le Local Storage ou de la communication entre le navigateur et le serveur.

JSON et le Local Storage

Le Local Storage du navigateur ne peut stocker que des chaînes de caractères.

Pour sauvegarder un objet :

localStorage.setItem(
    "user",
    JSON.stringify(utilisateur)
);

Pour le récupérer :

let user = JSON.parse(
    localStorage.getItem("user")
);

C’est probablement l’une des utilisations les plus fréquentes de JSON.stringify() dans une application JavaScript.

JSON ou XML : lequel choisir ?

Aujourd’hui, dans l’immense majorité des projets web, JSON est préféré à XML.

JSON est :

• plus léger ;
• plus rapide à analyser ;
• plus facile à lire ;
• plus simple à produire ;
• parfaitement adapté aux API REST.

XML reste encore utilisé dans certains secteurs historiques (banques, administration, SOAP, documents bureautiques), mais pour une nouvelle application web, JSON est quasiment toujours le meilleur choix.

Bonnes pratiques pour utiliser JSON

Pour terminer, voici quelques bonnes pratiques largement adoptées par les développeurs :

• toujours produire un JSON valide ;
• utiliser des noms de propriétés explicites (firstName plutôt que fn) ;
• éviter les structures trop profondément imbriquées ;
• documenter le format des échanges lorsqu’on développe une API ;
• vérifier systématiquement les erreurs lors du décodage (json_last_error() en PHP) ;
• utiliser UTF-8 pour éviter les problèmes d’encodage ;
• ne jamais construire du JSON à la main en concaténant des chaînes de caractères, mais toujours utiliser les fonctions prévues (json_encode() en PHP, JSON.stringify() en JavaScript).

Ces bonnes pratiques permettent de rendre vos applications plus robustes, plus maintenables et plus faciles à faire évoluer.

Conclusion

JSON est devenu un pilier du développement web moderne. Que vous développiez une application PHP, Node.js, Python, Java, C# ou Go, vous manipulerez quotidiennement ce format d’échange de données. Maîtriser JSON, savoir créer des objets, des tableaux, utiliser json_encode(), json_decode(), JSON.parse() et JSON.stringify(), comprendre les appels AJAX et les API REST constitue aujourd’hui une compétence incontournable pour tout développeur web.

En maîtrisant JSON, vous serez capable d’échanger des données entre un navigateur, un serveur, une base de données ou un service Cloud. C’est une compétence essentielle pour développer des applications modernes, des API REST, des applications mobiles, des architectures microservices et des solutions basées sur le Cloud.

Découvrez les fonctions fléchées en Javascript

 

Dans javascript on connaissait jusqu’en ES6 deux façon de déclarer des fonctions, les fonctions nommées et les fonctions anonymes.

Déclaration de fonctions nommées :

function saluer(nom){
    console.log('Bonjour ' + nom)
}

Les fonctions anonymes

function (nom){
    console.log('Bonjour ' + nom)
}

Depuis ES6 vous pouvez déclarer les fonction flèches !

Attention les fonctions flèches ne sont pas équivalentes aux fonction nommées. Une fonction flèche n’a pas de this . Les fonctions flèches sont toujours anonymes. Elles ne peuvent être utilisé comme constructeur.

const add = (a) => return a + 5

add(5) //10

Les fonctions flèches ne sont pas à utiliser en tant que méthode

D’abord c’est quoi la différence entre une fonction et une méthode?

une méthode est une fonction définie en tant que propriété d’un objet, sinon pas de différence au niveau de la syntaxe. Dans le cas des fonctions flèches, il y a une différence de comportement vis à vis de this.

L’exemple ci-dessous  :

var obj = {
i: 10,
b: () => console.log(this.i, this),
c: function() {
    console.log(this.i, this)
    }
}

obj.b(); // undefined Window {...}
obj.c(); // 10  Object{i:10}

Alors qu’une fonction anonyme connait son propre this, une fonction flèche n’a pas son propre this, comme l’atteste l’affichage, le this de la fonction se réfère à l’objet Window.

Les fonctions flèches n’ont pas de constructeur

var Foo = function{}()
var f = new Foo()

var Bar = () => {}
var b = new Bar() //Uncaught TypeError : Foo is not a constructor

Aujourd’hui en 2017 si vous développez en HTML/CSS directement dans le dur, je vous prédis que vous allez souffrir.

On ne développe plus ne CSS directement, on passe par le LESS ou le SASS.

Personnellement j’utilise le SASS, c’est un lagage qui va être transformé en CSS grâce à un programme qu’on appelle un compilateur.

Mais voyons tout de suite les avantage d’utiliser le SASS:

Supposons que vous ayez une div à l’intérieur d’une autre.

<div class="outer">
    <div class="inner">
        <a href="//google.fr">Google</a>
    </div>
</div>

Pour styler les div, vous faites en CSS:

.outer {font-size:12px}

.inner{font-size:10px}
.inner a {color : blue}

 

Programmer en ECMASCRIPT 6 alias ES2015

Si vous faites du Web, vous avez sans doute entendu abondamment parler de Ecmascript 6. C’est une norme qui décrit la syntaxe du langage Javascript (pour simplifier)

Voyons les innovations syntaxiques que vous devez absolument connaitre car tous les navigateurs les utilisent aujourd’hui.

Déclaration de variable avec var (méthode historique)

Jusqu’à présent vous ne déclariez les variables qu’avec var.

Or il cause beaucoup de poblèmes : son scope est global à l’objet window.

var prenom = "Yvon"

On dit que son scope (sa portée) est globale. Si vous venez du monde du php, vous avez dû voir qu’on peut déclarer une variable comme globale avec le mot clé global.

Pour des raisons de bonne pratique de sécurité, il faut éviter de déclarer des variables globales.

Revenons au Javascript, var déclare une variable de porté globale, c’est à dire qu’elle peut être utilisée partout.

Jusqu’à récemment avant ES6, nous ne pouvions déclarer de variable de porté de type bloc. Un bloc est tout ce qui est compris dans une parie d’accolade.

Une variable de type bloc, de portée bloc, n’existe que dans la paire d’accolade, en dehors on ne la connait pas.

Historiquement var a été introduit pou faciliter la programmation, afin que les programmeurs novices puissent utiliser rapidement Javascript. Mais au fil du temps cela s’est avéré être un mauvais choix. Aujourd’hui (seulement) les concepteur du langage on décidé d’introduire deux nouvelles façons de déclarer une variable. Ces deux nouvelles façons const et let déclarent des variables de porté de bloc.

Déclaration de variable avec const

A la différence de PHP par exemple, const ne déclare pas une constante ! La signification de const est que le binding est constant, invariable, vous ne pouvez pas réassigner la variable à un pointeur différent, mais vous pouvez modifier sa valeur. En Javascript, la notion de constante existe dans le cadre de la programmation fonctionnelle via des librairie comme immutable.js .

cont prenom = "Yvon"

Pour vous montrer que const a sa valeur qui peut changer :

const prenom = 'Yvon' prenom = 'Julien' console.log(prenom) // Erreur Uncaught TypeError: Assignment to constant variable. 

Le code ci-dessus montre que la valeur de la primitive n’est pas modifiable. Par contre, si on déclare un objet litéral :

const eleve = { prenom :'Yvon', nom : 'Huynh'} eleve.prenom = 'Julien' console.log(eleve.prenom) // Julien

 

On peut modifier une propriété d’un objet litéral. eleve est bindée par référence à cet objet. Mais si on essai de réaffecter par référence :

const eleve = { prenom : 'yvon', nom : 'huynh' } eleve = { prenom : 'toto' } console.log(eleve.prenom) // Uncaught TypeError: Assignment to constant variable.

Une autre particularité de const est que vous devez initialiser dè sla déclaration de la variable, sinon vous avez une erreur.

const pays; //Uncaught SyntaxError: Missing initializer in const declaration

Block scope avec const

Enfin regardons l’aspect le plus important concernant const, il est block scoped, c’est à dire qu’en dehors (à l’extérieur) des accolades où la variable a été définie, elle n’existe pas.

function saluer(ami){ const pays = 'France' if(pays === 'France'){ const greet = ' Monsieur' console.log('Bienvenue en ' + pays + greet) } console.log('A une autre fois en ' + pays) console.log('Au revoir ' + greet) } saluer('Yvon') // imprime Bienvenue en France Monsieur,A une autre fois en France, mais affiche Uncaught ReferenceError: greet is not defined

Alors que pays reste en valable, greet n’est plus connue en dehors des accolades où greet a été définie.

Un exemple encore plus flagrant on va créer deux variables portant le même nom,mais avec des valeurs différentes :

const ville = 'Paris' function saluer(nom){ const ville = 'Nantes' console.log('bienvenue à ' + ville) } saluer('Yvon') //bienvenue à Nantes console.log('Euh non on est à ' + ville) //Euh non on est à Paris

Nantes ne peut exister en dehors des accolades de la fonction.

 

Peut on rendre une variable const vraiment immuable?

Même si dans votre vie vous aurez probablement peu l’opportunitéde rendre un objet immuable, il existe une façon de rendre immuable une variable déclarée avec const.

const eleve = Object.freeze( {prenom : 'yvon', adresse : { rue : ' De gaulle', ville : 'Nantes', codepostal : 44000} }) eleve.prenom ='Julien' console.log(eleve.prenom) // yvon

Vous remarquez que la propriété prenom est inchangée. Si vous utilisez « use strict »; vous aurez une erreur Uncaught TypeError: Cannot assign to read only property ‘prenom’ of object ‘#

Object.freeze est ‘shallow’ comme on dit en anglais, cela veut dire que vous pouvez quand même altérer les propriétés des objets imbriquée.

"use strict"; const eleve = Object.freeze( {prenom : 'yvon', adresse : { rue : ' De gaulle', ville : 'Nantes', codepostal : 44000} }) eleve.adresse.codepostal = 44100 console.log(eleve.adresse.codepostal) // 44100

Le code ci-dessus est tout à fait valide.

A quoi ça sert const en Javascript?

On dit que les variables déclarées avec const sont « block scoped ». Un bloc c’est ce qui est entre accolade dans la définition d’une fonction. C’est pour pallier au défaut de var (qui est défini dans les accolades d’une fonction, on dit que var est function scoped), qu’on a introduit const afin de mieux structurer son code et d’éviter des collisions.

 

Qu’est ce que la Temporal Dead Zone?

Lorsqu’un code javascrip est exécuté, une variable ne peut être settée ou gettée tant que l’exécution n’a pas atteint la ligne de code où la variable a été définie.

function saluer(name){ // début de la fonction if(name === 'yvon'){ //début du block var ville = 'Paris' console.log('Pays = ' + pays + ' Ville destination = ' + ville) var pays = 'France' } } saluer('yvon') // Pays = undefined Ville destination = Paris

On voit que la variable pays étant définie après le console.log, il est à undefined. Par contre que se passe-t-il si on a const à la place de var ?

function saluer(name){ // début de la fonction if(name === 'yvon'){ //début du block var ville = 'Paris' console.log('Pays = ' + pays + ' Ville destination = ' + ville) const pays = 'France' } } saluer('yvon') //Uncaught ReferenceError: pays is not defined

Vous avez une erreur (un avertissement) comme quoi votre variable n’est pas définie. Au moment ou le console.log s’exécute, pays n’est pas encore définie, elle n’a pas de valeur attribuée. L’utilité de la Temporal Dead Zone (TDZ) est de vous permettre de coder plus proprement, en lançant des avertissements.