Retour

Récupérez l'archive contenant les fichiers nécessaires aux exercices suivants et décompressez la dans votre espace de travail.

Cliquez sur le titre d'un exercice pour le découvrir.

Les fichiers créés au cours des différents exercices sont souvent réutilisés pour d'autres exercices ultérieurs. Veillez donc à toujours en avoir une version disponible.


Ici on commence les manipulations de l'arbre DOM.

Sélection par l'id, manipulations DOM et premiers événements.

Premières manipulations et sélection par l'id
Pour tout document web chargé dans un navigateur deux variables (objet) sont systématiquement définies par défaut : window et document.
  • window représente la fenêtre du navigateur dans laquelle le document est chargé (Il y a un objet différent window par onglet).
  • document représente l'arbre DOM chargé dans la fenêtre.
Ouvrez le fichier manipulation-dom.html et ouvrez une ardoise javascript pour ce document. Nous allons utiliser ce document pour commencer à explorer les manipulations de l'arbre DOM que permet javascript.
  1. La fonction getElementById de l'objet document permet de récupérer un objet désignant l'élément d'un document dont l'id est fourni.

    Dans l'ardoise évaluez les expressions suivantes et vérifiez que la variable pano est définie :

    						var pano = document.getElementById("panoramique");
    						pano;
    						
    Recherchez dans le document html à quel élément la variable pano correspond.
  2. Les attributs html sont des propriétés des objets éléments.

    Elles peuvent être consultées ou modifiées.

    1. Évaluez l'expression :
      							pano.src;
      à quoi correspond-elle ? Que constatez-vous  ?
    2. Évaluez l'expression
      						pano.src = "images/panoramique2.jpg";
      et observez le résultat dans la page web affichée dans le navigateur. Que s'est-il passé ?

      Vérifiez en évaluant à nouveau la valeur de pano.src.

    3. Quelle est la valeur de l'id de la première image du document ? Vous pouvez vérifier que cette image n'a pas d'attribut alt défini.

      Comment peut-on le vérifier avec une expression javascript

      Corrigez ce problème en donnant à cet attribut alt de cet élément la valeur "vague s'écrasant sur les rochers".

  3. Les propriétés innerHTML et textContent permettent un accès au contenu de l'élément.
    1. Repérez dans le document l'élément d'id intro.
    2. Après avoir défini une variable intro représentant cet élément, évaluez les expressions :
      					intro.innerHTML;
      					intro.textContent;
      Quelles différences observez-vous ? A quoi correspond chacun des résultats ?
    3. Évaluez successivement les deux expressions suivantes et observez à chaque fois le résultat dans la fenêtre du navigateur :
      					intro.innerHTML = "Une rapide présentation de la côte d'ajoncs.";
      					intro.textContent = "Une rapide présentation de la côte d'ajoncs.";
      Que constatez-vous ?
      Vous pouvez aussi sélectionner dans la fenêtre du navigateur les textes ajoutés à la souris avant de consulter le Code source de la sélection et comparer les résultats.
    4. Concluez sur les rôles respectifs des propriétés innerHTML et textContent.
    5. En utilisant la propriété innerHTML, modifiez le contenu de l'élément d'id timoleon pour ajouter au début du contenu de cet élément le code HTML correspondant à un élément img dont la source est le fichier mer2.jpg et de classe CSS droite.
    Il ne faut pas abuser de l'utilisation de la propriété innerHTML. Celle-ci pose des problèmes d'efficacité car elle provoque un recalcul complet de l'arbre DOM. De plus elle peut être source de problèmes de sécurité puisse qu'elle pourrait constituer une ouverture pour de l'injection de code malveillant.
  4. La propriété style permet d'agir sur les propriétés CSS d'un élément.

    Ainsi il est possible de travailler sur les propriétés CSS et pour chacune des propriétés CSS il existe une propriété associée pour style, accessible par la notation pointée. Les valeurs possibles pour ces propriétés sont toujours des chaînes de caractères et correspondent aux mêmes valeurs que celles possibles dans une feuille CSS.

    Le nom des propriétés CSS est le même en javascript après conversion camelback, ainsi font-size devient fontSize, border-right-style devient borderRightStyle.
    En supposant la variable intro définie comme précédemment évaluez successivement les expressions suivantes en observant à chaque fois le résultat dans le navigateur :
    					intro.style.color = "blue";
    					intro.style.fontSize = "18px";
    Les valeurs sont des chaînes de caractères correspondant exactement aux valeurs CSS telles qu'elles seraient écrites dans une feuille CSS, y compris les unités.
  5. Réalisez une fonction changeWidth qui prend deux paramètres : le premier doit être un objet élément désignant par hypothèse une image (attention ce paramètre doit un objet élément de type img, pas la source de l'image) et le second est un entier. Cette fonction n'a pas de résultat mais a pour effet de modifier la largeur de l'élément image en lui donnant une valeur en pixels égale au second paramètre.

    Utilisez cette fonction pour attribuer une largeur de 400px à l'image panoramique.

Premiers événements
Reprenez le fichier manipulation-dom.html et ouvrez une nouvelle ardoise javascript pour ce document.
  1. Lors d'un exercice précédent nous avons vu les manipulations qui permettaient de modifier l'image affichée par l'élément d'id panoramique.

    Écrivez une fonction changePano sans paramètre qui effectue ces manipulations c'est-à-dire qui a pour effet de donner à la source de l'élément img d'id panoramique la valeur du fichier panoramique2.jpg

  2. Depuis l'ardoise testez cette fonction, puis restaurez la situation initiale en rechargeant le document html dans le navigateur.
  3. Nous allons maintenant mettre en place la gestion d'événement de telle manière que le changement d'image se fasse automatiquement lorsque l'on passe la souris sur l'élément d'id panoramique.

    Pour cela nous allons utiliser la programmation événementielle qui consiste à déclencher l'exécution d'une fonction lorsqu'un événement se produit.

    Par exemple, l'événement mouseover est déclenché par un élément DOM lorsque la souris passe sur cet élément (plus précisément au moment où la souris entre au-dessus de la boîte CSS correspondant à cet élément). Nous allons donc lier (abonner) à cet événement le déclenchement de la fonction changePano pour l'élément d'id panoramique. Cela signifie qu'à chaque fois que l'évènement (ici mouseover) est déclenché par l'élément d'id panoramique la fonction (ici changePano) est exécutée. Voici comment procéder :

                            // on récupère l'élément d'id "panoramique"
                            var pano = document.getElementById("panoramique");
                            // on crée l'abonnement sur cet élément de la fonction "changePano" pour l'événement "mouseover"
                            pano.addEventListener("mouseover",changePano);							

    Après avoir rechargé le document, exécutez ces instructions dans l'ardoise, puis testez la bonne exécution de l'événement en survolant à la souris l'élément d'id panoramique.

  4. Sachant qu'un événement mouseout est déclenché lorsque la souris quitte un élément, reprenez la démarche appliquée dans les questions précédentes et faites les définitions de fonctions et ajouts de code nécessaires pour que l'élément d'id panoramique retrouve l'image d'origine (source panoramique.jpg) lorsque la souris arrête de la survoler. Testez.
Mise en place des événements au chargement de la page

A partir de maintenant il vous est fortement conseillé de créer vos codes javascript à l'aide d'un éditeur de textes adapté (Atom, Geany, etc.). Vous devez désormais utiliser de l'ardoise uniquement comme une zone de tests, pour vous permettre de vérifier le bon fonctionnement d'une fonction ou la valeur d'une expression par exemple.

Nous allons aborder maintenant comment faire en sorte que la gestion d'événements étudiée à l'exercice précédent soit mise en place automatiquement lors du chargement d'un document web et donc sans passer par l'ardoise.

Reprenez donc le fichier manipulation-dom.html.

  1. Commencez par créer danss un éditeur de texte un fichier pano.js (par exemple) dans lequel vous placerez les définitions des deux fonctions qui ont été définies dans l'exercice précédent (changePano et son acolyte que vous avez dû définir pour la dernière question).
  2. Définissez ensuite au début de ce fichier une fonction, que nous appellerons setupListeners, qui réalise les deux abonnements d'événement précédents.
  3. Nous avons besoin de faire en sorte que les abonnements aux événements soient définis lors du chargement du document web, c'est-à-dire que la fonction setupListeners soit exécutée automatiquement. Nous allons pour cela utiliser à nouveau le mécanisme des événements en exploitant l'événement load qui est déclenché par l'objet window lorsque le navigateur a fini le chargement du document. Il est en effet important d'attendre la fin du chargement du document car il est nécessaire de s'assurer que les éléments de la page ont été définis avant de mettre en place les événements. Sinon on prend le risque que window.getElementById nous renvoie undefined... Il faut donc réaliser l'abonnement par
                            window.addEventListener("load",setupListeners);
    Cette expression doit être placée dans le fichier pano.js après la définition de setupListeners.
    Le fichier pano.js doit donc avoir la structure suivante :
                            // mise en place des événements
                            var setupListeners = function() {
                                ... utilisation de "addEventListener"
                            }
                            // on prépare l'exécution de setupListeners après la chargement du document
                            window.addEventListener("load",setupListeners);
    						
                            // définition des fonctions d'écoute des événements (et des autres fonctions utiles)
                            var changePano = function() { 
                                ... 
                            }
                            ...
                            
    Il ne reste plus qu'à déclarer dans l'entête du fichier manipulation-dom.html l'utilisation du fichier pano.js.

    Faites-le puis testez.

  4. Cette démarche utilisant une fonction telle que setupListeners et l'évnement load sur l'objet window devra être reproduite systématiquement pour la mise en place de vos événements.pour la mise en place de vos événements. Vous devrez donc toujours retrouver une structure similaire à celle du fichier pano.js
    Le principe utilisé pour exécuter la fonction setupListeners au chargement de la page peut évidemment servir à toute exécution de code au chargement, pas uniquement pour la gestion des abonnements d'événement. Cette méthode permet donc de réaliser toute initialisation nécessaire au bon fonctionnement de la page. Dans la mesure où il est possible d'avoir plusieurs abonnements sur un même objet pour un même événement, il est possible d'avoir plusieurs fonctions d'initialisation chacune abonnée à l'événement load de l'objet window et qui seront donc toute exécutée au chargement de la page.
Conversion de températures

Le langage HTML définit un élément <input> qui lorsque son attribut type vaut "text" définit une zone de saisie de texte (cf. la page du MDN).

Comme tout élément HTML il est possible de lui associer un id et d'en définir l'aspect visuel à l'aide des propriétés CSS habituelles (par exemple la propriété width).

Un objet élément <input> dispose d'une propriété javascript value dont la valeur est une chaîne de caractères qui correspond au texte contenu dans la zone de saisie. Donc si l'on dispose d'une variable elt qui correspond à un élément input, on peut utiliser elt.value pour lire ou modifier le texte affiché dans l'élément au sein du document web.

Le langage HTML propose un élément <button> qui comme son nom l'indique permet de créer un élément de contrôle de type bouton cliquable (cf. la page du MDN).

Comme tout élément HTML il est possible de lui associer un id et d'en définir l'aspect visuel à l'aide des propriétés CSS habituelles.

  1. Etudiez le document fourni exo6/exo6.html et sa feuille de style. Repérez en particulier à quoi correspondent les éléments d'id celsius, fahrenheit, cToF et fToC.

    La suite de l'exercice consiste à appliquer la démarche de gestion et mise en place des événements abordées dans les exercices précédents en définissant dans un fichier scripts/temperature.js le code javascript qui permet la mise en place des comportements décrits.

  2. Vous avez dû déjà la réaliser dans un exercice précédent, reprenez donc la fonction de conversion des Celsius vers les Fahrenheit, sinon définissez la puis utilisez la pour définir une fonction qui
    1. récupère la valeur dans l'élément dont l'id est celsius
    2. convertit cette valeur en nombre et calcule la valeur équivalente en Fahrenheit
    3. écrit la valeur calculée dans l'élément dont l'id est fahrenheit
    Pensez à utiliser la fonction toFixed pour un affichage adapté.
  3. Lorsque l'utilisateur clique sur un élément avec la souris un événement de nom 'click' est produit.

    En reprenant la démarche précédente complétez votre fichier de script avec la mise en place du mécanisme événementiel pour qu'un clic sur le bouton d'id cToF ait pour effet d'exécuter la fonction que vous venez de définir. Ce comportement doit être actif dès le chargement de la page, faites donc le nécessaire sans oublier de charger le script dans le document HTML.

  4. Que se passe-t-il si l'utilisateur ne saisit pas un nombre ? Faites la modification pour que dans ce cas, le contenu de fahrenheit ne soit pas modifié.
  5. Faites de même pour la conversion de température inverse de Fahrenheit vers Celsius.
  6. Un événement change est produit par un élément <input> lorsque l'utilisateur modifie sa valeur. L'événement est déclenché lorsque l'élément perd le focus.
    Faites le nécessaire pour que lors de la saisie d'une valeur par l'utilisateur dans l'une des deux zones <input> le contenu de l'autre zone soit modifié en conséquence sans que l'on ait à cliquer sur les boutons (ceci deviennent d'ailleurs inutiles et peuvent ensuite être supprimés).
Clic et désabonnement
  1. Créez un document html très simple qui contiendra :
    1. un élément div ayant pour id la valeur poke et dont le contenu est simplement le texte cliquez ici,
    2. un élément div pour id la valeur compteur dont le contenu est initialement 0

    Définissez (tout aussi rapidement) une feuille de style CSS pour fixer une couleur d'arrière plan et une largeur et une hauteur pour ces deux éléments div/

  2. En reprenant la démarche précédente ajouter un script à votre page qui fasse en sorte qu'un clic sur l'élément div#poke ait pour effet d'augmenter de 1 la valeur affichée dans l'élément div#compteur.

    Pour gérer le compteur, vous pouvez si vous voulez définir une variable globale compteur que vous initialiserez à 0 et dont la valeur augmente à chaque clic. Sinon vous pouvez exploiter la valeur contenue dans l'élément div#compteur.

  3. Testez votre travail.
  4. Il est possible de supprimer spécifiquement un abonnement pour un événement à l'aide de la fonction removeEventListener qui prend en paramètre l'événement concerné et la fonction d'écoute à désabonner.

    Ainsi, si on a mis en place une fonction d'écoute maFonction pour un événement clic sur un élément ainsi :

                            var unElement = document.getElementById(...);
    						unElement.addEventListener('click', maFonction);
    Il est possible d'annuler l'action du clic sur cet élément en exécutant l'expression suivante :
                            
                            pano.removeEventListener('click',maFonction);							

    On parle alors de désabonnement de la fonction maFonction au clic sur l'élément.

    Utilisez ce désabonnement pour faire en sorte qu'une fois que le compteur a atteint la valeur 5 les clics sur div#poke suivants restent sans effet. Donc seuls les 5 premiers clics sont actifs, les suivants sont inactifs.
Manipulation du style : style et getComputedStyle
Reprenez le fichier manipulation-dom.html d'un exercice précédent et pour cet exercice uniquement ouvrez à nouveau une ardoise javascript
  1. La propriété style ne permet pas toujours d'accéder en lecture aux valeurs des propriétés CSS. Il faut en effet tenir compte des calculs faits par le navigateur, par exemple pour les valeurs exprimées en pourcentage.

    Les valeurs de propriétés CSS utilisées (et donc calculées) par le navigateur pour un élément sont disponibles en lecture (et uniquement en lecture) à l'aide du résultat de l'appel de la méthode getComputedStyle de l'objet window avec pour paramètre l'élément ciblé. Le résultat d'un appel à cette méthode est un objet qui regroupe toutes les propriétés CSS qui s'appliquent à l'élément qui a été ciblé. Les valeurs de ces propriétés sont ensuite accessibles grâce à la notation pointée.

    Ainsi, pour connaître la largeur d'un élément telle qu'elle est calculée, et donc utilisée, par le navigateur on procède de la manière suivante :

    					
    					var element = document.getElementById("timoleon");
    					var proprietes = window.getComputedStyle(element);
    					proprietes.width ;        /* la valeur de la largeur de l'élément dont l'id est 'timoleon'*/

    Vérifiez avec l'inspecteur la valeur de la largeur fournie. Ensuite, modifiez la largeur de la fenêtre du navigateur et évaluez à nouveau dans l'ardoise l'expression proprietes.width.

    Par comparaison, quelle est la valeur obtenue en évaluant l'expression

    					element.style.width;      
                    

    Qu'en concluez-vous ?

    Lorsqu'elles correspondent à des dimensions les valeurs calculées fournies par getComputedStyle sont toujours exprimées en pixels. Les couleurs seront elles exprimées en rgb.
  2. Rechargez le document dans le navigateur et ouvrez une nouvelle ardoise puis évaluez les expressions suivantes les unes après les autres. Observez et analysez les résultats obtenus.
    				var element = document.getElementById("timoleon");
    				element.style.width = "50%";
    				var proprietes = window.getComputedStyle(element);
    				proprietes.width ;        
    				element.style.width;      

    Quelles conclusions tirez-vous ?

    Pour être précis, la propriété style vous permet d'accéder en lecture aux valeurs des propriétés CSS seulement dans le cas où ces propriétés sont définies dans la code html (en ligne), mais nous avons vu que ceci n'était pas une bonne pratique. Une valeur est également accessible par style si elle a été définie via javascript en utilisant style comme ci-dessus. Cependant la valeur sera exprimée telle qu'elle a été définie, par exemple si cette valeur est en pourcentage la valeur obtenue reste en pourcentage. On n'obtient donc pas la valeur de la propriété pour l'élément affichée dans le navigateur.
    A la différence de style, la valeur fournie par getComputedStyle ne permet pas d'accéder aux raccourcis sur les propriétés, seules les propriétés détaillées sont accessibles. Par exemple, marginLeft est utilisable mais pas margin. Vous pouvez le vérifier en étudiant les évaluations suivantes :
    						var element = document.getElementById("timoleon");
    						element.style.margin = "10px";
    						var proprietes = window.getComputedStyle(element);
    						proprietes.margin ;      
    						proprietes.marginLeft ;               
  3. En appliquant ce qui a été vu dans les questions précédentes, réalisez une fonction loupe qui prend pour paramètre un nœud de l'arbre DOM et multiplie par 2 la taille de sa police (propriété CSS :font-size). Testez cette fonction avec différents éléments, ceux d'id gr34, milieu ou timoleon par exemple.
Eclipse
  1. Etudiez le document fourni exo5/exo5.html et sa feuille de style. Repérez en particulier à quoi correspondent les éléments d'id sun, plus et moins.

    La suite de l'exercice consiste à définir dans le fichier scripts/exo5.js le code javascript qui permet la mise en place des comportements décrits.

    Evidemment vous ne devez pas oublier d'ajouter le chargement de ce fichier de scripts dans le document exo5/exo5.html.

  2. On souhaite qu'un clic sur le bouton + ait pour effet d'agrandir la largeur de l'image de 20px jusqu'à un maximum de 500px, au delà le clic est sans effet.

    En reproduisant la démarche adoptée dans l'exercice précédent mettez en place la gestion d'événement qui permet d'obtenir ce comportement.

  3. De manière similaire faites en sorte qu'un clic sur le bouton - diminue la taille de l'image de 20px jusqu'à un minimum de 250px
  4. Faites maintenant le nécessaire pour qu'un clic sur l'image remplace son contenu par images/eclipse.jpg.
  5. Faites en sorte qu'un nouveau clic sur l'image restaure l'image initiale.
    Pour arriver à ce résultat vous pouvez utiliser le mécanisme de désabonnement d'événement.
API Map : manipulations simples

Une API (pour Application Programming Interface), que l'on pourrait aussi appeler bibliothèque logicielle, est un ensemble d'outils qui sont mis à disposition des progammeurs pour réaliser des fonctionnalités bien identifiées. Ici nous allons explorer une API pour manipuler des cartes (satellites ou routières).

Nous allons utiliser l'API (MapQuest) qui offre des outils pour manipuler des cartes. MapQuest permet d'obtenir gratuitement une clef d'accès qui permet 15000 chargements de cartes gratuits par mois. Vous pouvez demander à obtenir votre clef personnelle si vous souhaitez faire des essais avec cette API. Il faudrait alors dans ce qui suit remplacer la clef proposée.

La première chose à faire est de déclarer l'utilisation de l'API utilisée. Dans notre cas cela se fait en ajoutant les lignes suivantes dans la partie head de la page HTML, avant la déclaration de nos propres scripts :

<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>

Il faudra également que notre page HTML contienne un élément identifié qui accueillera l'image de la carte désirée. Donc quelque chose comme :

<div id="maCarte"></div>
Il est nécessaire de définir une largeur à cet élément sous peine d'avoir une carte de taille 0. Cela doit se faire dans une feuille de style annexe. Et on peut bien sûr ajouter à cet élément une ou des classes CSS class="..."

Pour avoir le droit de télécharger les images correspondant aux cartes il faut fournir une clef valide (voir ci-dessus). Pour fournir cette clef il faut exécuter le code suivant :

L.mapquest.key = 'ZVodyqDT7AUZtGGEs9cVsT0U3CD1og7L';

Le chargement de l'API nous permet d'en utiliser les définitions. En particulier nous avons maintenant accès à un nouveau type de données représentant les cartes : L.mapquest.map. Pour créer une telle donnée, il faut donner deux informations. La première est l'id de l'élément HTML de la page qui contiendra la carte, le second est une donnée représentant des options pour la carte. Ces options définissent en particulier :

  • les coordonnées (latitude, longitude) du centre de la carte : option center, de type L.latLng
  • le facteur de zoom : option zoom, un entier
  • le type de carte utilisée : option layers. Les valeurs sont, par exemple : L.mapquest.tileLayer('map'), L.mapquest.tileLayer('satellite'), L.mapquest.tileLayer('hybrid').

Pour créer une carte, il faut donc définir ces données ce qui donne quelque chose comme :

					var leCentre = L.latLng(50.609731,3.137511);
					var mapOtions = {
						center: leCentre,
						layers: L.mapquest.tileLayer('map'),
						zoom: 15
					};
					// 'maCarte' correspond à l'id de l'élément  
ci-dessus var laCarte = L.mapquest.map('maCarte', mapOptions);

L'API propose en plus sur les données de type carte des fonctions telles que setView, setZoom, addLayer et removeLayer qui ont pour effet de modifier les options correspondantes pour la carte concernée. Ainsi

laCarte.setZoom(15);                    

fixe le facteur de zoom de la donnée laCarte à 15.

  1. Le script de l'API et les informations sur les images sont obtenues à partir d'information récupérées par le réseau. Pour éviter des problèmes d'affichage du document, il est donc préférable des déclencher la création de la carte après le chargement complet de la page. On utilisera (comme pour la fonction de mise en place des événements setupListeners) l'événement load sur l'élément window qui appellera une fonction dont le traitement correspondra au code ci-dessus.

    Rassemblez les différentes informations ci-dessus, placez-les dans une fonction et utilisez le tout pour construire une page html contenant votre première carte Google Map non statique.

    Vous devriez obtenir ce résultat.

  2. Adaptez les options précédentes pour centrer la carte sur l'endroit de votre choix.
    Pour obtenir les coordonnées d'un point particulier, rendez-vous sur le site http://maps.google.fr/, affichez une carte contenant ce point, cliquez-droit dessus et choisissez Plus d'infos sur cet endroit. Les coordonnées s'affichent alors dans la zone de texte en haut.
  3. Ajoutez aux options déjà gérées celle-ci :
    zoomControl : false,
    et testez.
  4. Idem pour celle-ci 
    scrollWheelZoom : false
  5. Pour faciliter le travail qui suit, nous allons gérer dans une variable globale pour représenter la donnée laCarte de type L.mapquest.map créée ci-dessus. Faites la modification nécessaire qui consiste à placer la déclaration
    var laCarte;                    
    en dehors de toute fonction et à ne pas la masquer par une déclaration locale au sein d'une fonction.
  6. Ajoutez à votre page un champ de saisie (<input>) dans lequel l'utilisateur peut fournir un entier. A chaque changement de valeur, le facteur de zoom de la carte est changé. Vous pouvez aussi ajouter deux boutons +/- qui permette d'incrémenter/décrémenter le facteur de zoom.
  7. Ajoutez deux nouveaux champs de saisie, un pour la latitude, un pour la longitude, à chaque changement de l'un ou l'autre on change le centre de la carte en conséquence (setView prend en paramètre des données latitude et longitude et centre la carte sur ce point).
  8. Ajoutez un "bouton" qui permet de basculer entre les affichages en mode "satellite" et "route", sachant qu'initialement le mode est "route".
Conversion de bases
Dans le même esprit que l'exercice de conversion de températures ci-dessus, il s'agit de réaliser une page permettant l'écriture d'un nombre dans différentes bases. Nous considérerons les bases 2, 10 et 16.
  1. Créez un document html qui comprend trois zones de saisie : pour l'écriture du nombre dans chaque base. Mettez en place la gestion des événements pour qu'un changement dans l'une des zones de saisie se répercute dans les deux autres zones en appliquant la conversion de base appropriée.
    Pour faciliter les opérations de conversion de base, vous pouvez utiliser la fonction parseInt et la fonction toString pour les nombres :
    • parseInt(chaine, base) (voir sur MDN) produit un entier en base 10 à partir de la chaîne de caractères chaine en utilisant la base base pour analyser chaine. Par exemple parseInt("110", 2) vaut 6
    • number.toString(base) (voir sur MDN) produit une chaîne de caractères correspondant à l'écriture dans la base base de number.