Activité : amélioration de pages web en javascript

  • Thierry Vaira <>

  • 07/12/2015 (rev. 1)

Amélioration de pages web en javascript

Expression du besoin

Les caméras IP hébergent souvent des serveurs web embarqués pour accéder à leurs services. Les pages générées sont au format HTML (Hypertext Markup Language), le format de données conçu pour les représenter. Ces pages sont interprétes côté client par le navigateur. Elles peuvent contenir du code javascript, un langage de programmation permettant d’ajouter de l’interactivité.

Javascript

JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives côté client. C’est un langage orienté objet inspiré de nombreux langages dont Java mais il reste très différent de celui-ci.

Le langage est maintenant une implémentation de la norme ECMA-262 (standard ECMAScript).

Remarque : Le langage a été créé en 1995 par Brendan Eich, membre de la fondation Mozilla, pour le compte de Netscape Communications Corporation.

Les scripts Javascript :

  • sont de simples fichiers ”texte” (extension conseillée .js) à créer avec un éditeur de texte.
  • sont intégrés au sein des pages web (dans le code HTML ou dans des fichiers séparés).
  • sont exécutés côté client par le navigateur web.

Généralement, JavaScript sert :

  • à contrôler les données saisies dans des formulaires HTML
  • à interagir avec le document HTML via l’interface DOM (Document Object Model) fournie par le navigateur (on parle alors parfois de HTML dynamique ou DHTML)
  • à modifier le contenu des pages web par programmation avec la méthode Ajax (Asynchronous Javascript And XML)
  • pour réaliser des services dynamiques, parfois futiles, strictement cosmétiques ou à des fins ergonomiques

Liens : cours Javascript et tp Javascript

Le code javascript est généralement inséré entre les balises <HEAD> et </HEAD> :

<HTML>
    <HEAD>
        <SCRIPT TYPE="text/javascript">
            // Du code Javascript
            alert("Hello world !"); // affiche une boîte de dialogue modale
        </SCRIPT>
    </HEAD>
    <BODY>
    </BODY>
</HTML>

Au chargement de la page, on obtient :

Le programmeur préfèrera souvent rassembler son code javascript dans des fichiers de scripts qu’il intègrera alors dans les pages web de son site de la manière suivante :

<HTML>
    <HEAD>
        <SCRIPT TYPE="text/javascript" SRC="monscript.js"></SCRIPT>
    </HEAD>
    <BODY>
    </BODY>
</HTML>

C’est un langage de programmation (à typage faible et dynamique) qui permet de modifier un document HTML via l’interface DOM (document.write()), ici le contenu du monscript.js :

// Des variables
var entier = 10;
chaine = "salut";

// Une fonction
function test()
{
    entier = 5;
    var reel = 1.789;

    document.write("Dans la fonction test() : <BR>");
    document.write(entier + " is a " + typeof(entier) + "<BR>");
    document.write(reel + " is a " + typeof(reel) + "<BR>");
    document.write(chaine + " is a " + typeof(chaine) + "<BR>");
    document.write("<BR>");
}

// Appel de la fonction test()
test();

Au chargement de la page, on obtient :

Travail demandé

Objectif : Être capable de modifier des scripts embarqués dans des documents HTML afin des les améliorer.

Il vous faudra accéder par telnet à la caméra afin d’accéder aux pages HTML du serveur web embarqué.

Vous pouvez éditer une page existante avec vi mais soyez prudent ! Le copier/coller entre votre poste de travail et l'accès telnet à votre caméra est possible.

Les fichiers composant l’interface web sont stockés à la racine du serveur HTTP :

# ls -l /system/www/
/system/www/index.htm          /system/www/admin.htm             /system/www/mobile.htm
...

 Séquence 1 : variable javascript

La page index.htm initialise quelques variables javascript utilisées par l’ensemble des pages web :

...
<script>
var cookieuser='';
var cookiepass='';
var cookiepri=255;
var reboot_seconds=30;
var goback_page = "";
var language = '';
var varRebootInfo = "";
</script>
...

On constate qu’il existe une variable language qui permet de sélectionner la langue par défaut pour l’interface web (la valeur 3 correspond au français).

Pour la page administration, il faudra modifier la page admin.htm :

...
<script>
top.language = 3;
</script>
...
  1. Modifier la page index.htm pour configurer l’application web en langue française de manière permanente.

Actuellement, la page mobile.htm de la caméra IP n’est pas fonctionnelle directement (il faut suivre le lien à partir de la page d’accueil). Ceci est du au fait que le cookie qui contient les paramètres du compte utilisateur n’est pas défini.

Un cookie est défini par le protocole de communication HTTP comme étant une suite d'informations envoyée par un serveur HTTP à un client HTTP, que ce dernier retourne lors de chaque interrogation du même serveur HTTP sous certaines conditions. Le cookie est l'équivalent d'un petit fichier texte stocké sur le poste de l'internaute. Existants depuis plus de 20 ans, ils permettent aux développeurs de sites internet de conserver des données utilisateur afin de faciliter leur navigation et de permettre certaines fonctionnalités. Les cookies ont toujours été plus ou moins controversés car contenant des informations personnelles résiduelles pouvant potentiellement être exploitées par des tiers.

On va donc modifier la page mobile.htm pour y ajouter ce bout de code javascript au tout début :

if (typeof top.cookieuser === 'undefined') {
    top.cookieuser=loginuser;
    top.cookiepass=loginpass;
}
  1. Modifier la page mobile.htm pour permettre son accès direct à partir du navigateur.

 Séquence 3 : interactivité

La séquence suivante est liée à l’activité sur les fichiers HTML. On a créé une page mobile2.htm pour obtenir ceci :

Pour rendre fonctionnel les changements effectués, il faut ajouter le traitement javascript associés à ces nouvelles actions (résolution, brillance et contraste).

Par exemple pour l’augmentation ou la diminution de la luminosité (brillance), on a intégré des images cliquables ‘+’ et ‘-’ ainsi qu’une zone de saisie (désactivée) pour afficher sa valeur :

<div id = "id_pos_plusbrightness">
    <img src="images/plus_up.gif" name="plus_brightness" id="plus_brightness" onClick="plus_brightness_onclick()" onMouseDown="this.src=plus_down.src" onMouseUp="this.src=plus_up.src" ondragstart="return false" >
</div>
<div id = "id_pos_brightness">
        <input id="brightness_input" readonly maxlength="2" class="s3" size="4">
</div>
<div id = "id_pos_minusbrightness">
    <img src="images/minus_up.gif" name="minus_brightness" id="minus_brightness" onClick="minus_brightness_onclick()" onMouseDown="this.src=minus_down.src" onMouseUp="this.src=minus_up.src" ondragstart="return false" >
</div>

La valeur de la luminosité sera affichée dans un élément INPUT de nom brightness_input. Les gestionnaires de l’évènement onClick sont les fonctions javascript plus_brightness_onclick() pour son augmentation et minus_brightness_onclick() pour sa diminition :

function plus_brightness_onclick() {
    // on récupère la valeur de l'élément INPUT pour la luminosité
    val=brightness_input.value;
    
    // on augmente sa valeur par pas de 10
    for(m=0; m<10;m++)
        val++;

    // on la limite à 255
    if (val>255) {
        val=255;
    }
    
    // on affiche la nouvelle valeur
    brightness_input.value=val;
    
    // on commande la caméra avec la nouvelle valeur
    camera_control(1,val);      
}

function minus_brightness_onclick() {
    val=brightness_input.value;
    
    // on diminue par pas de 10
    val-=10;
    
    // limitée à 1
    if (val<=0) {
        val=1;
    }
        
    brightness_input.value=val;
    camera_control(1,val);      
}

On a vu dans l’activité de mise en oeuvre da la caméra l’utilisation de scripts CGI pour commander celle-ci. On va écrire une fonction javascript camera_control() qui permettra d’envoyer une nouvelle valeur pour un paramètre :

function camera_control(param,value) {
    var url;

    url='camera_control.cgi?';
    url+='&loginuse='+top.cookieuser+'&loginpas='+encodeURIComponent(top.cookiepass);
    url+='&param='+param;
    url+='&value='+value;
    url+='&' + new Date().getTime() + Math.random();
                                                                                    
    $.getScript(url);
}

Il reste à initialiser la valeur de luminosité au chargement de la page. L’évènement onLoad associé est géré par la fonction javascript body_onload(). On récupère la valeur courante de la caméra dans une variable vbright (initialisée par le script get_camera_params.cgi) que l’on affecte à notre élèment INPUT de nom brightness_input :

function body_onload()
{
    ...
    
    if(vbright<=0) vbright=1;
        brightness_input.value=vbright;
    
    ...
}
  1. Modifier la page mobile2.htm et la rendre fonctionnel pour les nouvelles actions (résolution, brillance et contraste).

Retour au sommaire

© 2016 Thierry Vaira