[∇] [@] Introduction à JavaScript
Version 2020-10-17
Licence cc-by-sa ModLibre.info sauf autres indications
NB 1 : Page en cours de développement à partir du site developer.mozilla.org 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
[∇] [Δ] Plan de l’introduction à JavaScript
[∇] [Δ] Affichage d’un message <!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>
Coucou
Cette page est une page toute simple
[∇] [Δ] Affichage d’une image <!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>
Coucou
Voici une image sur les logiciels et les données libres
[∇] [Δ] Utilisation de l’élément CANVAS <!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>
[∇] [Δ] Utilisation d’une IMAGE de FOND <!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>
[∇] [Δ] Soleil - Terre - Lune <!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>
[∇] [Δ] Démo Soleil - Terre - Lune
NB : Le site PhET propose un modèle plus complet écrit en HTML5-Javascript avec la licence CC-BY (licence d’Attribution Creative Commons).
[∇] [Δ] Travaux en cours !
NB : Page en cours de développement à partir du site developer.mozilla.org pédagogie active
