Exercice 1 :

for do while

 

Télécharger la source pour la séquence 4 ici.

 

Source pour la séquence : ICI

L'application ci-dessous permet de vous géolocaliser sur une carte google map.

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <meta name="author" content="Richard GAUTHIER">
       <title>La géolocalisation avec Html5</title>
       <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
           .bloc {
                margin: 20px auto 20px auto;
                padding : 5px 5px 5px 5px;
                max-width: 310px;
                background: #FFF;
                box-shadow: 0 0 8px #000;
              }

            #idPara {
                  margin: 0px 0px 0px 0px;
            }


           #map-canvas {
                width: 300px;
                height: 300px;
                margin: auto 2px auto 2px;
               }
        </style>

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGV3L7-a4qcJyDd-E8fb-yYMr5rFein0g&sensor=false">
</script>
</head>
<body>
<section class="bloc" >
<div id = "idPosition">
<button onclick="getLocalisation()">Me géolocaliser</button>
<p id="idPara"></p>
</div>
</section>
<section class="bloc" >
<article>
<div id="map-canvas"></div>
</article>
</section>

<script type="text/javascript">
//variables globales
var latitude = 48.2785062; //Géolocalisation de Carhaix
var longitude = -3.5510303;
var monId=document.getElementById("idPara");
var map;
var titre = "Lycée Paul Sérusier";
function getLocalisation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(maPosition);
}
else{monId.innerHTML="La géolocalisation n'est pas prise en charge par votre navigateur.";}
}

function maPosition(position)
{
monId.innerHTML ="Latitude: ";
latitude = position.coords.latitude;
monId.innerHTML += latitude + "°";
monId.innerHTML += "<br/>Longitude: ";
longitude = position.coords.longitude;
monId.innerHTML += longitude + "°";
monId.innerHTML += "<br/>Précision: ";
monId.innerHTML += position.coords.accuracy + "m";
monId.innerHTML += "<br/>Altitude: ";
monId.innerHTML += position.coords.altitude + "m";
monId.innerHTML += "<br/>Vitesse: ";
monId.innerHTML += position.coords.speed + "m/s<br/>";

var monBouton = document.createElement("button");
monBouton.onclick=afficherMaPosition;
var leTexte = document.createTextNode("Afficher ma position sur la carte");
monBouton.appendChild(leTexte);
document.getElementById("idPara").appendChild(monBouton); }
function initialise() {
     var mapOptions = {
               center: new google.maps.LatLng( latitude , longitude ),
               zoom: 12,
               //mapTypeId: google.maps.MapTypeId.ROADMAP
               //mapTypeId: google.maps.MapTypeId.SATELLITE
               //mapTypeId: google.maps.MapTypeId.TERRAIN
               mapTypeId: google.maps.MapTypeId.HYBRID
               };

map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);

          function setMarkers() {

var latlngset = new google.maps.LatLng(latitude, longitude);
var commentaire = "Code créé pour la spécialité ISN en S et la STI2D<br/>Auteur : Richard GAUTHIER";

// Options de la fenêtre
var myWindowOptions = {
content:
'<h4>'+ titre + '</h4>'+
'<p>'+ commentaire+ '</p>'
};

// Création de la fenêtre
var myInfoWindow = new google.maps.InfoWindow(myWindowOptions);

var marker = new google.maps.Marker({
map: map,
//icon: 'pin.png',
position: latlngset,
title: titre
});


// Affichage de la fenêtre au click sur le marker
google.maps.event.addListener(marker, 'click', function() {
myInfoWindow.open( map , marker);
});
}
//Mettre une marque sur la carte
setMarkers();

}//fin de la fonction initialise

function afficherMaPosition(){
titre = "Ma position";
initialise();

}

google.maps.event.addDomListener(window, 'load', initialise);


</script>
</body>
</html>

 

Pour utiliser google map, il vous faudra une clé API Access. Pour l'obtenir, vous devez avoir un compte Gmail et vous rendre ici.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Richard GAUTHIER">
<title>EaselJS Démo: Balle rebondissante</title>
<style type="text/css">
canvas {
border: solid 3px #000000;
background-color: #ffff00;
}
</style>
<script type='text/javascript' src='js/easeljs-0.7.0.min.js'></script>
<script type='text/javascript' >
//déclaration des variables globales
var stage; //la scene à animer
var balle;
var largeurEcran;
var hauteurEcran;
var deplaX;
var deplaY;
var angleDegre;
var vitesse = 20;
var rayon = 30;

//première fonction appelée lorsque la page html est chargée
function init() {

//lier la scène au canvas sUr la page html
stage = new createjs.Stage("rgCanvas");

largeurEcran = stage.canvas.width;
hauteurEcran = stage.canvas.height;

balle = new createjs.Shape();
balle.graphics.beginFill("red").drawCircle(0, 0, rayon);
//Positionne la balle au milieu de l'écran
balle.x = largeurEcran / 2;
balle.y = hauteurEcran / 2;
//Met la balle sur la scène.
stage.addChild(balle);


angleDegre = Math.random() * 360;
calcul(angleDegre);


//crée une fonction boucle à 20 images par secondes
createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.setFPS(20);

}//fin fonction init

function calcul( angleDegre )
{
this.angleDegre = angleDegre;
//Convertir l'angle en radian
var angleRadian = angleDegre * Math.PI / 180;

//gestion du déplacement suivant X et Y
deplaX = vitesse * Math.cos(angleRadian);
deplaY = - vitesse * Math.sin(angleRadian);

}//fin fonction calcul

//la boucle infinie pour animer la scène
function tick(event) {

balle.x += deplaX;
balle.y += deplaY;

//tests pour rester dans la scène
if (balle.x > largeurEcran - rayon) calcul(180 -angleDegre -2);
if (balle.x < rayon) calcul(180 -angleDegre -2);
if (balle.y < rayon) calcul(-angleDegre -2);
if (balle.y > hauteurEcran - rayon) calcul(-angleDegre -2);

//mise à jour de la scène
stage.update(event);

}//fin fonction tick

</script>
</head>
<body onload="init()" >
<h1>EaselJS Démo: Balle rebondissante</h1>
<canvas id="rgCanvas" width="300" height="300">
Dommage votre navigateur ne gère pas les canvas!
</canvas>
</body>
</html>

 Source : rebond.zip


Logo Lycée Paul Sérusier

J'enseigne au
Lycée Paul SERUSIER
Avenue de Waldkappel
29270 CARHAIX PLOUGUER
Tél : 02 98 99 29 29
Site : www.lycee-serusier.fr

footer2

Richard GAUTHIER
Professeur de Physique Appliquée
Certification ISN
Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.

 

 


Mentions légales


Plan du site

  Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.