PHP
JAVASCRIPT
<button id="monbouton" name="button">Click me</button> <script> function faire_un_truc(){ // faire quelque chose alert('truc fait'); } document.getElementById('monbouton').addEventListener('click', faire_un_truc); //ou document.querySelector('#monbouton').addEventListener('click', faire_un_truc); // pour enlever document.querySelector('#monbouton').removeEventListener('click', faire_un_truc); // avec la fonction incorporé document.querySelector('#monbouton').addEventListener("click", function(){ alert('truc fait'); }); // idem avec référence à l'objet appelant (le bouton devient rouge) document.querySelector('#monbouton').addEventListener("click", function(){ this.style.backgroundColor = "red"; }); </script> // Autre façon code plus facile à maintenir car le bouton appelle l'action // avec les listener il n'est pas rare de s'y perdre <button onClick="faire_un_truc();">Click me</button>
Méthode pour exécuter du code asynchrone
<button name="button" onClick="testPromise();">Click me</button> <div id="log"></div> <script> $('#message1').html('promise page chargée') 'use strict'; var comptePromesse = 0; function testPromise() { var thisComptePromesse = ++comptePromesse; var log = document.getElementById('log'); log.insertAdjacentHTML('beforeend', thisComptePromesse + ') Started (<small>Debut du code synchrone</small>)<br/>'); // on crée une nouvelle promesse : var p1 = new Promise( // La fonction de résolution est appelée avec la capacité de // tenir ou de rompre la promesse function(resolve, reject) { var tst; log.insertAdjacentHTML('beforeend', thisComptePromesse + ') Promise started (<small>Debut du code asynchrone</small>)<br/>'); // Voici un exemple simple pour créer un code asynchrone /*window.setTimeout( function() { // On tient la promesse ! resolve(thisComptePromesse+'aaaaaa'); }, Math.random() * 2000 + 1000 );*/ // un autre exemple tst=Math.random(); if(tst>0.5){resolve('OKOKOKOK');}else{reject('NONONONONO');} //resolve('OK'); } ); // On définit ce qui se passe quand la promesse est tenue // et ce qu'on appelle (uniquement) dans ce cas // La méthode catch() définit le traitement à effectuer // quand la promesse est rompue. p1.then( // On affiche un message avec la valeur function(val) { log.insertAdjacentHTML('beforeend', val +') Promise fulfilled (<small>Fin du code asynchrone</small>)<br/>'); } ).catch( // Promesse rejetée function(val) { //console.log("promesse rompue"+val); log.insertAdjacentHTML('beforeend', val +') Promise rompue (<small>Fin du code asynchrone</small>)<br/>'); } ); log.insertAdjacentHTML('beforeend', thisComptePromesse + ') Promise made (<small>Fin du code synchrone</small>)<br/>'); } </script>
Clique sur bouton -> testPromise()
Création objet p1 new Promise -> function(resolve, reject) en asynchrone
p1.then est appelé par resolve(‘truc en retour’)
p1.then().catch() est appelé par reject(‘un autre truc en retour’)
http://www.html5rocks.com/en/tutorials/es6/promises/
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise
Le code javascript contenu dans une page à tendance à s’exécuter au moment ou il est lu (chargé) par le navigateur. Si le code interprété utilise par exemple un DIV qui n’est pas encore arrivé au navigateur -> PB. Pour cela il existe
<script type="text/javascript"> $(document).ready(function(){ // code à executer }); </script>
Il est possible d’avoir plusieurs document.ready dans une page
Ne pas oublier jquery, avec un truc du genre
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>