À la demande, voici quelques exercices de JavaScript.

Boucle

Voici une boucle qui va de 0 à 9 (soit dix boucles).
exercice 1 : faire une boucle pour 7 à 77.
exercice 2 : faire une boucle qui affiche 0, 10, 20 … 90.

for(var i = 0; i<10 ; i++){
  console.log(i);
}

Démo

Éléments du document

En stockant un élément dans une variable, on peut manipuler celui-ci.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p id="test"></p>
<script>
  var test = document.querySelector('#test');
  test.textContent = "Helvetica";
  test.style.color = "#f60";
</script>
</body>
</html>

démo
exercice 3 : mettre le texte en gras (il y a un piège).

suite

Voici une requête qui stocke tous les éléments du sélecteur.

var elements = document.querySelectorAll('p');

Hélas, JavaScript ne sait pas faire elements.style.color = "#f60"; pour manipuler plusieurs éléments, il faudra les appeler via des crochets p[0] pour le premier, p[1] pour le deux!ème… et si vous avez une variable avec un chiffre ‘a = 1’ vous pouvez écrire p[a].

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p>helvetica</p>
  <p>arial</p>
  <p>lucida</p>
<script>
  var p = document.querySelectorAll('p');
  p[0].style.color = "#f60";
  p[1].style.color = "#f60";
  p[2].style.color = "#f60";
</script>
</body>
</html>

Boucle + sélecteur

On combine les deux !

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p>helvetica</p>
  <p>arial</p>
  <p>lucida</p>
<script>
  var p = document.querySelectorAll('p');
  for(i=0;i<3;i++){
    ****.style.color = "#f60"; //**** = exercice 
  }
</script>
</body>
</html>
Ces exercices n’ont aucune application ‚mais sont des bases pour réaliser des choses plus complexes.