<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&eacute;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>