Scribd Logo
Upload

Welcome to Scribd!

  • corrigéTD03

    Uploaded by

    Dhia Mok
    16 views4 pages
    The document contains code examples for using the Geolocation API to get a user's location and display it on a web page. It also shows how to handle errors when getting the location and how to continuously update the location by watching for changes. Additional examples demonstrate how to display information about files selected using a file input and how to store and retrieve simple data in the browser's local storage.

    Original Description:

    Original Title

    corrigéTD03 (2)

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains code examples for using the Geolocation API to get a user's location and display it on a web page. It also shows how to handle errors when getting the location and how to continuously update the location by watching for changes. Additional examples demonstrate how to display information about files selected using a file input and how to store and retrieve simple data in the browser's local storage.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    16 views4 pages

    corrigéTD03

    Uploaded by

    Dhia Mok
    The document contains code examples for using the Geolocation API to get a user's location and display it on a web page. It also shows how to handle errors when getting the location and how to continuously update the location by watching for changes. Additional examples demonstrate how to display information about files selected using a file input and how to store and retrieve simple data in the browser's local storage.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    Corrigé TD3

    Exercice1

    Question 1

    <!DOCTYPE html>
    <html >
    <head>
    <title>Geolocation Test</title>
    <script>
    function getLocation() {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
    function showPosition(position) {
    f.latitude.value=position.coords.latitude;
    f.longitude.value=position.coords.longitude;
    f.precision.value=position.coords.accuracy;

    }
    </script>
    </head>
    <body>
    <form name="f">
    latitude<input type="text" name="latitude" readonly /> <br/>
    longitude<input type="text" name="longitude" readonly /> <br/>
    precision<input type="text" name="precision" readonly /> <br/>

    <input type="button" value="Afficher" onclick="getLocation()" /> <br/>


    </form>
    </body>
    </html>

    Question 2-3

    <!DOCTYPE html>
    <html >
    <head>
    <title>Geolocation Test</title>
    <script>
    function getLocation() {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
    function MAJLocation(){
    watchID = navigator.geolocation.watchPosition(showPosition);
    }
    function STOPLocation(){
    navigator.geolocation.clearWatch(watchID);
    }
    function showPosition(position) {
    f.latitude.value=position.coords.latitude;
    f.longitude.value=position.coords.longitude;
    f.precision.value=position.coords.accuracy;
    }
    </script>
    </head>
    <body>
    <form name="f">
    latitude<input type="text" name="latitude" readonly /> <br/>
    longitude<input type="text" name="longitude" readonly /> <br/>
    precision<input type="text" name="precision" readonly /> <br/>
    <input type="button" value="Afficher" onclick="getLocation()" />
    <input type="button" value="Lancer surveillance" onclick="MAJLocation()" />
    <input type="button" value="Arreter surveillance" onclick="STOPLocation()" />
    </form>
    </body>
    </html>

    Exercice 2

    <!DOCTYPE html>
    <html >
    <head>
    <title>Geolocation Test</title>
    <script>
    function getLocation() {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
    }
    function showError(error) {
    switch(error.code) {
    case error.TIMEOUT:
    var info= "Timeout !";
    break;
    case error.PERMISSION_DENIED:
    var info= "Vous n’avez pas donné la permission";
    break;
    case error.POSITION_UNAVAILABLE:
    var info= "La position n’a pu être déterminée";
    break;
    case error.UNKNOWN_ERROR:
    var info= "Erreur inconnue";
    break;
    }
    f.erreur.value=info;
    }

    function showPosition(position) {
    f.latitude.value=position.coords.latitude;
    f.longitude.value=position.coords.longitude;
    f.precision.value=position.coords.accuracy;
    }
    </script>
    </head>
    <body>
    <form name="f">
    latitude<input type="text" name="latitude" readonly /> <br/>
    longitude<input type="text" name="longitude" readonly /> <br/>
    precision<input type="text" name="precision" readonly /> <br/>
    erreur<input type="text" name="erreur" readonly /> <br/>
    <input type="button" value="Afficher" onclick="getLocation()" />

    </form>
    </body>
    </html>

    Exercice3

    <script>
    function afficher() {
    var ch="";
    for(var i=0;i<f.f1.files.length;i++)
    ch=ch+f.f1.files[i].name+" "+f.f1.files[i].size+" "+f.f1.files[i].type+"<br>";

    document.getElementById("demo").innerHTML = ch;
    }
    </script>

    <p> Exemple file</p>


    <form name="f">
    <input type="file" name="f1" multiple />
    <input type="button" value="Ajouter " onclick="afficher()" />
    </form>
    <p id="demo"> </p>

    Exercice 4

    <!DOCTYPE html>
    <html >
    <head>
    <title>web storage</title>
    <script>
    function recuperer() {
    if(localStorage.getItem('fond'))
    document.getElementById("p1").style.background=localStorage.getItem('fond');
    if(localStorage.getItem('texte'))
    document.getElementById("p1").style.color=localStorage.getItem('texte');
    }
    function appliquer() {
    localStorage.setItem('fond',f.fond.value);
    localStorage.setItem('texte',f.texte.value);
    recuperer();
    }
    </script>
    </head>
    <body onload="recuperer()">
    <p id="p1"> Un exemple d'api web storage</p>
    <form name="f">
    couleur fond <input type="color" name="fond" /><br>
    couleur texte <input type="color" name="texte" /><br>
    <input type="button" value="appliquer" onclick="appliquer()" />
    </form>
    </body>
    </html>

    You might also like