Demo du caractère asynchrone de JavaScript

<!DOCTYPE html>
<html>

  <head>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js" data-semver="2.1.4" data-require="jquery@*"></script>
    <script src = "script.js"></script>
    <link rel = "stylesheet" href = "style.css"
  </head>

  <body onload="execution();">
    <h1>Asynchrone</h1>
    <div class = "demo">
      <h2>Position de la balise</h2>
      <div>Contenu après affectation</div>
    </div>
    <div class = "demo">
      <h2>Extérieur de la fonction</h2>
      <div id="exterieur"></div>
    </div>
    <div class = "demo">
      <h2>Interieur de la fonction, avant chargement</h2>
      <div id="avant"></div>
    </div>
    <div class = "demo">
      <h2>Intérieur, à l'intérieur du chargement</h2>
      <div id="interieur"></div>
    </div>
    <div class = "demo">
      <h2>Interieur de la fonction, après chargement</h2>
      <div id="apres"></div>
    </div>
  </body>

</html>





var texte = "pas encore chargé";

// On essaie de remplir la div nommée "exterieur" (la première de la page)
$("#exterieur").html(texte);

function execution() {
  // on essaie de remplir la div nommée "avant" (la deuxième)
  $("#avant").html(texte);  

  $.get("README.md", function(data) {
    // On récupère le contenu texte du fichier "README.md" dans la variable texte
    texte = data;
    
    // On essaie de remplir la div nommée "interieur" (la troisième)
    $("#interieur").html(texte);
  });
  
  // on essaie de remplir la div nommée "apres" (la dernière)
  $("#apres").html(texte);  
}

# Démonstration de chargement asynchrone

JavaScript a un fonctionnement **asynchrone** : les chargements de fichiers 
(script, texte, ...) sont lancés en parallèle de l'exécution du code.

Voici une petite démonstration avec la librairie *jQuery*.

body {
  margin: 0;
  padding: 0;
}

.demo {
  margin-top: 10px;
  border: solid 1px #777;
}

.demo h2 {
  display: inline-block;
  width: 49%;
  font-size: 100%;
  vertical-align: top;
  margin: 0;
}

.demo div {
  display: inline-block;
  width: 49%;
}