Exercice 1 :
- Écrit par : Richard GAUTHIER
- Affichages : 4833
for do while
Télécharger la source pour la séquence 4 ici.
- Écrit par : Richard GAUTHIER
- Affichages : 4985
Source pour la séquence : ICI
- Écrit par : Richard GAUTHIER
- Affichages : 5760
L'application ci-dessous permet de vous géolocaliser sur une carte google map.
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Richard GAUTHIER">
<title>La géolocalisation avec Html5</title>
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>
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGV3L7-a4qcJyDd-E8fb-yYMr5rFein0g&sensor=false">
</script>
<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";
{
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); }
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
titre = "Ma position";
initialise();
}
google.maps.event.addDomListener(window, 'load', initialise);
</script>
</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.
- Écrit par : Richard GAUTHIER
- Affichages : 7255
<!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
- Écrit par : Richard GAUTHIER
- Affichages : 7331