---
---

<link rel="stylesheet" href="styles.css" type="text/css">

<span id="Initial"><br><br></span>

# <span><a href="#Plan">[&nabla;]</a></span> <span><a href="#Final">[@]</a></span> <span style="color: red;">Introduction à JavaScript</span>

### Version 2020-10-17
### Licence cc-by-sa ModLibre.info sauf autres indications<br><br>

#### NB 1 : Page en cours de développement à partir du site [developer.mozilla.org](https://developer.mozilla.org/fr/docs/Apprendre/HTML/%C3%89crire_une_simple_page_HTML)<br>(sauf indications contraires). Consultez ce site pour une ***pédagogie active***.

#### NB 2 : Test d'une démonstration :

- Créez un nouveau fichier *test.html* avec votre éditeur usuel
- Copiez les instruction à tester dans *test.html*
- Sauvegardez ce fichier
- Cliquer sur ce fichier avec votre gestionnaire de fichier
- Le résultat devrait s'afficher dans votre navigateur

<span id="Plan"><br><br></span>

# <span><a href="#Message">[&nabla;]</a></span> <span><a href="#Initial">[&Delta;]</a></span> <span style="color: red;">Plan de l'introduction à JavaScript</span>

* [<STRONG>Affichage d'un message</STRONG>](#Message)
* [<STRONG>Affichage d'une image</STRONG>](#Libre)
* [<STRONG>Utilisation de l'élément CANVAS</STRONG>](#Canvas)
* [<STRONG>Utilisation d'une IMAGE de FOND</STRONG>](#Fond)
* [<STRONG>Soleil - Terre - Lune</STRONG>](#Orbites)
* [<STRONG>Démo  Soleil - Terre - Lune</STRONG>](#Orbites-Demo)
* [<STRONG>Fin<STRONG>](#Final)

<span id="Message"><br><br></span>

# <span><a href="#Libre">[&nabla;]</a></span> <span><a href="#Plan">[&Delta;]</a></span> <span style="color: red;">Affichage d'un message</span>

```
<!DOCTYPE html> = <Déclaration à insérer au début d'une nouvelle page html indépendante>
```
```
<html>
  <head>
    <title>Coucou</title>
  </head>
  <body>
    Cette page est une
    page toute simple
  </body>
</html>
```

<html>
  <head>
    <title>Coucou</title>
  </head>
  <body>
    Cette page est une
    page toute simple
  </body>
</html>

#### Référence : [Écrire une simple page HTML](https://developer.mozilla.org/fr/docs/Apprendre/HTML/%C3%89crire_une_simple_page_HTML)

<span id="Libre"><br><br></span>

# <span><a href="#Canvas">[&nabla;]</a></span> <span><a href="#Message">[&Delta;]</a></span> <span style="color: red;">Affichage d'une image</span>


```
<!DOCTYPE html> = <Déclaration à insérer au début d'une nouvelle page html indépendante>
```
```
<html>
  <head>
    <title>Coucou</title>
  </head>
  <body>
    Voici une image sur les logiciels et les données libres<br>
    <img src="images/montage_1x2_A_0525x0700_70.png" alt="Logiciels et données libres)" />
  </body>
</html>
```

<html>
  <head>
    <title>Coucou</title>
  </head>
  <body>
    Voici une image sur les logiciels et les données libres
    <img src="images/montage_1x3_A_1050x1550_70_cc-by-sa_JMT.png" alt="Logiciels et données libres)" />
  </body>
</html>

#### Référence : [Écrire une simple page HTML](https://developer.mozilla.org/fr/docs/Apprendre/HTML/%C3%89crire_une_simple_page_HTML)

<span id="Canvas"><br><br></span>

# <span><a href="#Fond">[&nabla;]</a></span> <span><a href="#Libre">[&Delta;]</a></span> <span style="color: red;">Utilisation de l'élément CANVAS</span>

```
<!DOCTYPE html> = <Déclaration à insérer au début d'une nouvelle page html indépendante>
```
```
<html>
  <head>
    <meta charset="utf-8"/>
    <script type="application/javascript">
      function draw() {
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>
```

<html>
  <head>
    <meta charset="utf-8"/>
    <script type="application/javascript">
      function draw() {
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

#### Référence : [Préparer un canvas](https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Utilisation_de_base)

<span id="Fond"><br><br></span>

# <span><a href="#Orbites">[&nabla;]</a></span> <span><a href="#Canvas">[&Delta;]</a></span> <span style="color: red;">Utilisation d'une IMAGE de FOND</span>

```
<!DOCTYPE html> = <Déclaration à insérer au début d'une nouvelle page html indépendante>
```
```
<html>
  <head>
    <meta charset="utf-8"/>
    <script type="application/javascript">

      function draw() {
        var ctx = document.getElementById('canvas').getContext('2d');
        var img = new Image();
        img.onload = function() {
          ctx.drawImage(img, 0, 0);
          ctx.beginPath();
          ctx.moveTo(30, 96);
          ctx.lineTo(70, 66);
          ctx.lineTo(103, 76);
          ctx.lineTo(170, 15);
          ctx.stroke();
        };
//      img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
        img.src = 'images/backdrop.png';
      }

    </script>
  </head>

  <body onload="draw();">
    <canvas id="canvas" width="180" height="150"></canvas>
  </body>
</html>
```
#### Référence : [Utilisation d'images](https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Utilisation_d'images)

<span id="Orbites"><br><br></span>

# <span><a href="#Orbites-Demo">[&nabla;]</a></span> <span><a href="#Fond">[&Delta;]</a></span> <span style="color: red;">Soleil - Terre - Lune</span>

```
<!DOCTYPE html> = <Déclaration à insérer au début d'une nouvelle page html indépendante>
```
```
<html>
  <head>
    <meta charset="utf-8"/>
    <script type="application/javascript">

      var sun = new Image();
      var moon = new Image();
      var earth = new Image();

      function init(){
//      sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
        sun.src = 'images/Canvas_sun.png';
//      moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
        moon.src = 'images/Canvas_moon.png';
//      earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
        earth.src = 'images/Canvas_earth.png';
        window.requestAnimationFrame(draw);
      }

      function draw() {
        var ctx = document.getElementById('canvas').getContext('2d');

        ctx.globalCompositeOperation = 'destination-over';
        ctx.clearRect(0,0,300,300); // effacer le canvas

        ctx.fillStyle = 'rgba(0,0,0,0.4)';
        ctx.strokeStyle = 'rgba(0,153,255,0.4)';
        ctx.save();
        ctx.translate(150,150);

//      Terre
        var time = new Date();
        ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
        ctx.translate(105,0);
        ctx.fillRect(0,-12,50,24); // Ombre
        ctx.drawImage(earth,-12,-12);

//      Lune
        ctx.save();
        ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
        ctx.translate(0,28.5);
        ctx.drawImage(moon,-3.5,-3.5);
        ctx.restore();

        ctx.restore();
  
        ctx.beginPath();
        ctx.arc(150,150,105,0,Math.PI*2,false); // Orbite terrestre
        ctx.stroke();
 
        ctx.drawImage(sun,0,0,300,300);

        window.requestAnimationFrame(draw);
      }

      init();

    </script>
  </head>
  <body onload="draw();">
    <canvas id="canvas" width="300" height="300"></canvas>
  </body>
</html>
```
<span id="Orbites-Demo"><br><br></span>

# <span><a href="#Final">[&nabla;]</a></span> <span><a href="#Orbites">[&Delta;]</a></span> <span style="color: red;">Démo Soleil - Terre - Lune</span>

<html>
  <head>
    <meta charset="utf-8"/>
    <script type="application/javascript">

      var sun = new Image();
      var moon = new Image();
      var earth = new Image();

      function init(){
//      sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
        sun.src = 'images/Canvas_sun.png';
//      moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
        moon.src = 'images/Canvas_moon.png';
//      earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
        earth.src = 'images/Canvas_earth.png';
        window.requestAnimationFrame(draw);
      }

      function draw() {
        var ctx = document.getElementById('canvas').getContext('2d');

        ctx.globalCompositeOperation = 'destination-over';
        ctx.clearRect(0,0,300,300); // effacer le canvas

        ctx.fillStyle = 'rgba(0,0,0,0.4)';
        ctx.strokeStyle = 'rgba(0,153,255,0.4)';
        ctx.save();
        ctx.translate(150,150);

//      Terre
        var time = new Date();
        ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
        ctx.translate(105,0);
        ctx.fillRect(0,-12,50,24); // Ombre
        ctx.drawImage(earth,-12,-12);

//      Lune
        ctx.save();
        ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
        ctx.translate(0,28.5);
        ctx.drawImage(moon,-3.5,-3.5);
        ctx.restore();

        ctx.restore();
  
        ctx.beginPath();
        ctx.arc(150,150,105,0,Math.PI*2,false); // Orbite terrestre
        ctx.stroke();
 
        ctx.drawImage(sun,0,0,300,300);

        window.requestAnimationFrame(draw);
      }

      init();

    </script>
  </head>
  <body onload="draw();">
    <canvas id="canvas" width="300" height="300"></canvas>
  </body>
</html>

<!-- [Référence](https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Utilisation_d'images) -->
#### Référence : [Animations de base](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations)

#### NB : Le site [PhET](https://phet.colorado.edu/fr/) propose un modèle plus complet écrit en HTML5-Javascript avec la [licence CC-BY](https://phet.colorado.edu/fr/licensing) (licence d'Attribution Creative Commons).

#### [Référence](https://phet.colorado.edu/fr/simulation/gravity-and-orbits)<br><br>

# <span><a href="#Final">[&nabla;]</a></span> <span><a href="#Orbites-Demo">[&Delta;]</a></span> <span style="color: red;">Travaux en cours !</span>

#### NB : Page en cours de développement à partir du site [developer.mozilla.org](https://developer.mozilla.org/fr/docs/Apprendre/HTML/%C3%89crire_une_simple_page_HTML)<br>(sauf indications contraires). Consultez ce site pour une ***pédagogie active***.

<span id="Final"><br><br></span>

# <span><a href="#Initial">[@]</a></span> <span><a href="#Orbites-Demo">[&Delta;]</a></span> <span style="color: red;">Fin</span>

***
##### [2020-10-17 &nbsp;&nbsp;&nbsp; © 2020 ModLibre.info](http://ModLibre.info) &nbsp;&nbsp;&nbsp; [licence cc-by-sa](http://creativecommons.org) &nbsp;&nbsp;&nbsp; [Source](JS.Rmd) &nbsp;&nbsp;&nbsp; [W3C](http://validator.w3.org/) &nbsp;&nbsp;&nbsp; [HTML5](https://fr.wikipedia.org/wiki/HTML5) &nbsp;&nbsp;&nbsp; [CSS](http://jigsaw.w3.org/css-validator/)
***
