Retour

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

Les fonctions créées au cours des différents exercices seront pour certaines réutilisées pour d'autres exercices ultérieurs. Veillez donc à toujours en avoir une version disponible.


Cette première série d'exercices portera sur le langage exclusivement. Elle a pour objectif de se familiariser avec javascript et sa syntaxe. Certains exercices auront déjà été vus en cours d'InitProg avec le langage ocaml, ce sera l'occasion de voir les différences de syntaxe.

On ne manipulera pas encore l'arbre DOM du document.

Exercices javascript

L'ardoise javascript

Firefox propose un outil appelé Ardoise javascript (scratchpad en anglais). Il permet d'expérimenter et de mettre au point du code indépendamment d'un document web. Nous allons découvrir cet outil.

  1. L'ardoise javascript s'ouvre par Outils puis Développeur web et enfin Ardoise javascript ou Shift+F4.

    Ouvrez l'ardoise javascript et lisez le texte en commentaire qui est affichée en entête de cette fenêtre.

    Une ardoise est attachée à un document web : celui qui était actif au moment où la console a été ouverte.

  2. Vous pouvez saisir du code javascript dans l'ardoise et le tester. Faites la déclaration suivante dans l'ardoise :
    var x = 1;
    
    Sélectionnez ce texte et faites Ctrl+r (ou clic droit puis Exécuter). Visuellement rien ne se passe mais la déclaration de variable a été réalisée. Pour le vérifier ajoutez la ligne :
    var x = 1;
    x; 
    
    Sélectionnez ce texte ajouté et faites Ctrl+l (ou clic droit puis Afficher). Le résultat de l'évaluation est affiché comme un commentaire.
    var x = 1;
    x;
    /*
    1
    */	
    
  3. L'utilisation d'une variable non déclarée se traduit par un message d'erreur. Essayez en évaluant une variable y (sans la définir).
Sur la plupart des versions du navigateur l'environnement est réinitialisé si l'on recharge le document . Vérifiez sur votre version en définissant dans l'ardoise une variable et en vérifiant sa valeur, puis en rechargeant la page à laquelle est attachée cette ardoise. Demandez maintenant à afficher la variable (sans réévaluer sa définition) et constatez qu'elle n'est plus définie.

Rechargez la page permettra donc de réinitialiser l'environnement.

Ardoises et environnements d'évaluation

L'utilisation des ardoises nécessite une certaine vigilance et de l'attention lorsque l'on travaille avec plusieurs documents web (le plus souvent ouverts dans des onglets différents).

La même ardoise peut-être utilisée pour les différents documents, mais chacun de ces documents possède son propre environnement javascript d'évaluation et les variables définies pour un document ne sont pas disponibles pour un autre : les environnements javascript des différents documents sont indépendants. Il en résulte que le résultat de l'évaluation au sein de l'ardoise d'une expression varie selon le document web actif dans le navigateur.

Il en est de même si l'on ouvre plusieurs ardoises. Peu importe le document web actif au moment de l'ouverture de chacune des ardoises, lorsque l'on réalise une évaluation dans l'une ou l'autre des ardoises, c'est l'environnement du document actif dans le navigateur qui est pris en compte. Toutes les ardoises partagent les environnement de chacun des documents. Une ardoise n'est pas liée au document qui était actif au moment de son ouverture. C'est le document web avtif au moment de l'utilisation qui importe.

En conséquence lorsque l'on réalise une évaluation au sein d'une ardoise il est absolument nécessaire d'être attentif au document web actif dans le navigateur.

Cet exercice a pour objectif de mettre ces points en évidence au travers de quelques manipulations.

  1. Dans le navigateur ouvrez deux documents dans deux onglets. Effectuez les manipulations suivantes :
    1. Sélectionnez l'onglet du premier document, il devient le document actif. Ouvrez alors une ardoise (Shift+F4).
    2. Dans cette ardoise, définissez une variable x et vérifiez-en la valeur :
      var x = 1;
      x; 
      

      Vous devez constaster qu'évidemment dans cet environnement la variable x est définie et est évaluée à 1.

    3. Maintenant sélectionnez dans le navigateur le second document pour le rendre actif. Ce document étant actif, retournez dans l'ardoise et testez à nouveau l'évaluation de la variable x (uniquement la variable sans sa définition). Que constatez-vous ? Que pouvez-vous conclure de la valeur de x dans l'environnement d'évaluation de ce second document ?
    4. Poursuivons avec ce second document actif. Dans la console évaluez la définition :
      var x = 10;
      
      et vérifiez la valeur de x dans cet environnement.
    5. En activant tour à tour chacun des deux documents, évaluez à chaque fois la valeur de l'expression x*7 dans chacun des environnements. Que constatez-vous ?
    On constate donc combien il est important d'être attentif à l'environnement d'évaluation (et donc au document actif) car le résultat obtenu dépend de celui-ci.
  2. Notez que le rechargement dans le navigateur réinitialise l'environnement javascript qui est lié à ce document. Pour vous convaincre testez les manipulations suivantes :
    1. Sélectionnez le premier des deux documents précédemment ouverts et rechargez-le (F5) au sein du navigateur.
    2. Dans l'ardoise faites l'évaluation de la variable x. Que constatez-vous ?
    3. Activez maintenant le second document dans le navigateur, sans le recharger. Dans l'ardoise renouvelez l'évaluation de la variable x et constatez.
  3. Nous allons voir que le problème des environnements reste le même si plusieurs ardoises sont ouvertes.
    1. Fermez l'ardoise et faites recharger les deux documents précédents par le navigateur pour réinitialiser leurs environnements javascript.
    2. Activez le premier document, ouvrez une ardoise et évaluez-y les expressions :
      var x = 1;
      x; 
      
    3. Activez maintenant le second document, ouvrez une seconde ardoise et évaluez-y les expressions :
      var y = 12;
      y; 
      
    4. Vérifiez que dans cet environnement (c.-à-d. avec le second document actif comme c'est le cas) la variable x n'est pas définie.
    5. Activez le premier document web, puis dans la seconde ardoise ouverte évaluez la variable x. Que constatez-vous ?

      Dans cette configuration, évaluez la variable y. Que constatez-vous ?

    C'est donc toujours le document web actif qui détermine l'environnement d'évaluation javascript utilisé.
Premiers pas
  1. Dans une nouvelle ardoise javascript saisissez la définition de fonction suivante :
    var add = function (x,y) {
        return x + y;
    }
    
    Évaluez cette définition.
  2. Constatez le résultat de l'évaluation de la variable add.
  3. Testez cette fonction pour différentes valeurs de x et y.
    L'ardoise permet de tester le code javascript que vous écrivez. Il est indispensable et obligatoire de tester toute fonction écrite.
  4. Copiez-collez exactement ce code dans l'ardoise
    def calcul = function(x, y) {
        var pi = 3.14;
        if x > 0:
            return (x + y) * pi;
        else:
            return y *pi;
    }
    
    1. Évaluez cette définition et lisez le message d'erreur. Quel est le problème ?
    2. Corrigez le problème avant de réévaluer la définition. Quel est le nouveau problème ?
    3. Corrigez à nouveau puis évaluez la définition de fonction et recommencez jusqu'à ne plus avoir d'erreur dans la définition de la fonction. Procédez ensuite à quelques tests pour différentes valeurs de x et y.
    L'ardoise permet de vérifier la syntaxe du code javascript que vous produisez.
  5. Définissez une fonction moyenne qui a pour résultat la moyenne arithmétique de ses deux paramètres (supposés être des nombres).

    N'oubliez pas de tester votre fonction pour différentes valeurs

  6. Il est important de documenter le code écrit, notamment pour en faciliter la réutilisation ou l'évolution. Vous prendrez donc l'habitude d'ajouter juste avant la définition d'une fonction un commentaire qui décrira son action ainsi que le rôle des paramètres. Par exemple (même si dans ce cas cela semble un peu tiré par les cheveux...) :
    /* add : calcule la somme de ses 2 paramètres (des nombres par hypothèse)
       Paramètres :
         x : un nombre
    	 y : un nombre
       Résultat : la somme de x et y
    */
    var add = function (x, y) {
        return x + y;
    }
    
    Rédigez le commentaire de documentation pour la fonction moyenne.
    Il est indispensable de rédiger les documentations des fonctions écrites.
  7. Il est possible de sauvegarder le travail réalisé dans l'ardoise. Il suffit de cliquer sur le bouton Enregistrer ou d'utiliser le raccourci Ctrl+S.

    Sauvegardez les trois définitions de fonction précédentes dans un fichier premier.js.

  8. Un travail enregistré peut être rechargé dans une ardoise. Fermez l'ardoise précédente, rechargez le document web actuel puis ouvrez une nouvelle ardoise pour ce document.

    Chargez le fichier premier.js à l'aide du bouton Ouvrir un fichier..., ou du raccourci Ctrl+O (pour open). Vous pouvez à nouveau en utiliser les définitions.

Premières fonctions (nombres)
Réaliser une fonction c'est la spécifier, la commenter, la coder et la tester.
Travaillez dans une ardoise javascript. Pensez à tester et documenter chacune des fonctions écrites.
  1. Réalisez une fonction max qui a pour résultat le plus grand des 2 nombres qui lui sont passés en paramètre.
  2. Réalisez une fonction max3 qui a pour résultat le plus grand des 3 nombres qui lui sont passés en paramètre.

    Vous écrirez deux versions de cette fonction (max3 et max3bis) : l'une utilisant la structure if et l'autre sans utiliser if mais à l'aide de la fonction max.

  3. Avez-vous rédigé les documentations des fonctions précédentes ? Sinon faites-le.
  4. Pensez à sauvegarder votre travail dans un fichier pour en garder une trace.
  5. Que se passe-t-il si on passe deux chaînes de caractères (quelconques) en paramètre de la fonction max ?

    Que pensez-vous alors de la documentation que vous avez rédigée ? Modifiez la si nécessaire.

  6. Lisez sur le site du MDN la documentation de la fonction javascript prédéfinie Math.floor.
    1. Utilisez cette fonction pour définir un prédicat estEntier dont le résultat est true si et seulement si son paramètre est un nombre entier.
    2. Testez (avec 2.3, 2, -10, etc.) et documentez votre fonction.
    3. Essayez votre fonction avec pour valeur de paramètres : "timoleon", "deux", "2.3", "2".
    4. Ces différents résultats sont-ils conformes à ce que vous attendiez ?
    5. Que faut-il éventuellement modifier dans votre fonction pour que dans le dernier cas le résultat soit false ?
  7. La fonction Math.random() fournit un nombre aléatoire entre 0 inclus et 1 exclu. Vous pouvez la tester dans l'ardoise.

    Utilisez-la pour réaliser une fonction alea, qui prend en paramètre un entier n et a pour résultat un entier aléatoire entre 0 inclus et n exclu.

    Testez votre fonction.

Intégration dans une page web

Pour une première interaction avec la page web, nous utiliserons les fonctions document.writeln et window.prompt évoquées dans le cours.

  1. Relisez sur le MDN les pages consacrées à document.writeln et à window.prompt.
  2. On s'intéresse à la conversion de températures exprimées en Fahrenheit ou en Celsius.
    1. Recherchez sur le web les 2 formules de conversion.
    2. Réalisez une fonction qui prend en paramètre un nombre représentant une température en Fahrenheit et a pour résultat la température exprimée en °C équivalente.
    3. Réalisez une fonction qui prend en paramètre un nombre représentant une température en Celsius et a pour résultat la température exprimée en Fahrenheit équivalente.
  3. Enregistrez les définitions de ces deux fonctions dans un fichier conversion.js.
  4. Créez un document html qui charge dans son entête (head) le fichier de script conversion.js.

    Dans le corps de ce document (partie body) écrivez un script dont le comportement est le suivant :

    1. en utilisant window.prompt demander à l'utilisateur de fournir une température en Celsius et mémoriser cette valeur dans une variable,
    2. à l'aide de document.writeln, écrire dans le document un texte annonçant la valeur de conversion de cette température en Fahrenheit (quelque chose comme Une valeur de température de ccc °C équivaut à une valeur de fff en Fahrenheit.)).
    3. puis faire de même pour une température en Fahrenheit à convertir cette fois en Celsius.
  5. Modifiez le code du script précédent pour que dans chacun des cas les températures apparaissent comme contenu d'un élément <span> de classe temperature. Vous définirez ensuite une feuille de style CSS qui définit (au moins) un style particulier pour ces éléments, par exemple une couleur d'affichage différente.
    La méthode toFixed (voir ici) permet d'obtenir à partir d'une nombre une chaîne de caractères en fixant le nombre de décimales utilisées.
    var pi = 3.141592;
    pi.toFixed(2);             /* "3.14" */          
    pi.toFixed(10);            /* "3.1415920000" */
    
    /* /!\ attention le résultat est une chaîne de caractères /!\ */
    pi.toFixed(10)+"123"       /* "3.1415920000123" */							
    pi.toFixed(10)+123       /* "3.1415920000123" */
Si vous constatez un problème lors du chargement de la page, commencez par consulter la console web (Ctrl+Shift+K) où des messages d'erreur apparaitront en cas de problème lors du chargement du code javascript, ou des CSS comme nous l'avions déjà vu.
Attention au type des données...
  1. Dans un fichier, de nom petit.js par exemple, codez les petites fonctions suivantes :
    var foisCent = function(x) {
    	return 100 * x;
    }
    var plusCent = function(x) {
    	return 100 + x;
    }
    				
  2. Vérifiez le comportement de ces fonctions dans l'ardoise en évaluant les expressions foisCent(5), foisCent(123), plusCent(5) et plusCent(123) (par exemple).
  3. De manière similaire à l'exercice précédent, créez une page HTML qui contient un script qui :
    1. demande à l'utilisateur de saisir une valeur numérique,
    2. affiche le résultat produit par l'appel de la fonction foisCent avec pour paramètre la valeur qui a été saisie par l'utilisateur.
    Testez le comportement de votre page et ce qu'elle affiche quand l'utilisateur saisit comme valeur 5 ou 123.
  4. Complétez votre script pour qu'il affiche en plus le résultat produit par l'appel de la fonction plusCent avec pour paramètre la valeur qui a été saisie par l'utilisateur.
  5. Testez le comportement de votre page et ce qu'elle affiche quand l'utilisateur saisit comme valeur 5 ou 123.

    Que constatez-vous ? Comment expliquer ce comportement ? Comment le corriger ?

Images google map
  1. Le code HTML pour afficher une image google map ressemble à ceci :
    <img src="http://maps.googleapis.com/maps/api/staticmap?center=50.609731,3.137511&zoom=17&size=400x400&sensor=false" />
    Les informations qui suivent center correspondent aux coordonnées du point central de la carte. Il est facile de comprendre à quoi correspondent les valeurs qui suivent zoom et size.

    Créez une page HTML qui contient le code html ci-dessus et visualisez le résultat.

    Ensuite faites varier les valeurs numériques placées après center= et observez ce qui se passe au rechargement de la page.

    Vous pouvez aussi faire varier les valurs après zoom= ou size=. Déduisez-en à quoi correspondent ces informations.

    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.
  2. Modifiez la page HTML précédente pour que le code ci-dessus soit exactement écrit dans la page par un script javascript, à l'aide la fonction document.writeln. Comme ceci :
    <script>
       document.writeln('<img src="http://maps.googleapis.com/maps/api/staticmap?center=50.609731,3.137511&zoom=17&size=400x400&sensor=false" />');
    </script>
    Testez votre page.
  3. Modifiez maintenane le script dans votre page HTML pour que désormais ce script commence par demander la saisie de 2 valeurs numériques correspondant à une latitude et une longitude sous forme de nombres à virgule puis utilise ces informations pour afficher ensuite l'image "google map" centrée sur ces coordonnées.
  4. Avez-vous transformé les données lues en données de type float ? Si oui, fallait-il absolument le faire ? Si non, pourquoi n'était-ce pas indispensable ?
  5. Modifiez la page afin que l'utilisateur ait à fournir en plus la valeur du facteur de zoom et la taille d'affichage (on pourra conserver une image carrée) avant l'affichage.
  6. Testez !
Découvertes de quelques fonctions sur les chaînes de caractères
On rappelle qu'en javascript il n'y a pas de type caractère, dans la suite lorsque l'on parlera d'une donnée de type caractère il faudra comprendre une chaîne de longueur 1.
  1. Ouvrez une ardoise javascript et définissez une variable s de valeur "timoleon" et copiez-y le code suivant :
    var s1 = "abcd";
    var s2 = "ABCDEF";
    s1+s2;
    
    s1>s2;
    s1<"timoleon";
    s1<"aaaaa";
    
    var lettre = "x"
    lettre >= "a"
    lettre <= "z"
    
    s1.length;
    s2.length;
    
    s1.charAt(0);
    s1.charAt(3);
    s2.charAt(4);
    s1[3];
    s2[1] < s2[4];
    
    s1.toUpperCase();
    s2.toLowerCase();
    s1.toLowerCase();
    s1.charAt(3).toLowerCase();
    
    var s3 = String.fromCharCode(104,101,108,108,111);
    s3;
    s3.charCodeAt(0);
    s3.charCodeAt(1);
    
    s1.charCodeAt(0);
    s1.charCodeAt(1);
    s2.charCodeAt(0);	
    Évaluez ces différentes expressions et à partir des résultats obtenus déduisez-en le rôle des différentes fonctions qui apparaissent.
    1. Proposez un test qui permet de savoir si un caractère c (donc une chaîne de longueur 1) correspond à une lettre minuscule  ?
    2. Réalisez une fonction toutEnMinuscules qui vaut vrai si et seulement si son paramètre, une chaîne de caractères, n'est composé que de lettres minuscules.

      Deux versions de cette fonction sont possibles en utilisant ou non une boucle for. Codez les deux versions.

    3. Proposez un test permet de savoir si un caractère c correspond à une lettre majuscule  ?
    4. Déduisez en un prédicat estUneLettre qui vaut vrai si et seulement si son paramètre est un caractère représentant une lettre, minuscule ou majuscule.
    5. Utilisez ce prédicat pour réaliser une fonction queDesLettres qui prend en paramètre une chaîne de caractères et qui a pour résultat une nouvelle chaîne obtenue à partir du paramètre en en supprimant tous les caractère qui ne sont pas des lettres.
      		queDesLettres("tiMoLeon");      /* "tiMoLeon" */
      		queDesLettres("timo444Leon");   /* "timoLeon" */
      		queDesLettres("ti.mo@le-on");   /* "timoleon */
      		
  2. Réalisez une fonction à deux paramètres, une chaîne s quelconque et un caractère c et qui pour résultat le nombre d'occurrences de c dans s.
    nombreOccurrences("timoleon","o");      /* 2 */
    nombreOccurrences("timoleon","t");      /* 1 */
    nombreOccurrences("timoleon","z");      /* 0 */
    
  3. Évaluez les expressions suivantes dans une ardoise et déduisez-en la spécification de la fonction substring.
    var s = "timoleon";
    s.length;
    
    s.substring(2,5);
    s.substring(2,7);
    s.substring(2,8);
    s.substring(2,2);
    s.substring(2);
    s.substring(5);
    s.substring(2,9);
    s.substring(0,4);
    s.substring(-2,4);
    
    s.substring(2,5);
    s.substring(5,2);
    
    Vérifiez votre solution ici.
  4. Réalisez une fonction nomPropre qui prend en paramètre une chaîne de caractères et a pour résultat une chaîne construite à partir des mêmes lettres mais dont le premier caractère sera nécessairement une majuscule et les autres des minuscules.
    nomPropre("timoleon");     /* "Timoleon" */
    nomPropre("tiMoLeon");     /* "Timoleon" */
    nomPropre("TiMoLeon");     /* "Timoleon" */
    nomPropre("TiMo@888Leon");     /* "Timo@888leon" */
    
  5. Même question que pour la fonction substring mais avec la fonction substr et les expressions :
    var s = "timoleon";
    
    s.substr(2,5);
    s.substr(2,7);
    s.substr(2,8);
    s.substr(2);
    s.substr(5);
    s.substr(0,4);
    s.substr(0,-1);
    s.substr(10);
    
    s.substr(-3);
    s.substr(-5);
    s.substr(-5,2);
    
    Vérifiez votre solution ici.
  6. La méthode indexOf de l'objet String fournit l'indice de la première occurrence d'une chaîne au sein de la chaîne appelante (voir ici). Testez les expressions suivantes :
    var s1 ="timoleon";
    s1.indexOf("m");
    s1.indexOf("o");
    s1.indexOf("z");
    s1.indexOf("le");
    s1.indexOf("la");
    
    Déduisez-en une pression qui permet de savoir si une chaîne s1 contient une chaîne s2.
Formatage d'élément
  1. Créez une fonction formatElement qui prend deux chaînes de caractères en paramètre. La première représente un nom de balise html (supposée existante), la seconde correspond au contenu d'un élément. Le résultat de cette méthode est une chaîne de caractères dont le contenu est le code html d'un élément ayant pour balise le premier paramètre et comme contenu le second. On ne gérera pas dans cette fonction le cas des balise auto-fermantes comme <img>.
    formatElement("p","il était une fois ...");   /* <p>il était une fois...</p> */
    formatElement("div","le contenu de l'élément"); /* <div>le <strong>contenu</strong> de l'élément</div> */
    
  2. En utilisant formatElement, donnez l'expression qui permet d'obtenir la chaîne "<p>utilisez la <em>composition</em> de fonction</p>" à partir des trois variables suivantes
    var s1 = "utilisez la";
    var s2 = "composition";
    var s3 = "de fonction";
    
    Vérifiez évidemment votre proposition dans une ardoise.
  3. Modifiez la fonction formatElement en lui ajoutant un troisième paramètre : une chaîne de caractères correspondant au code des attributs à placer dans la balise ouvrant de l'élément.

    En html, les valeurs des attributs sont encadrées de ". Quel appel de fonction permet d'obtenir pour résultat la chaîne '<a href="http://www.fil.univ-lille1.fr">le site du FIL</a>' ?

  4. Quel appel à cette fonction permet d'obtenir l'un des résultats précédents, sans attribut, par exemple :"<p>il était une fois...</p>" ?
  5. Javascript autorise à ne pas préciser tous les paramètres lors d'un appel de fonction.
    1. Testez, avec la version à trois paramètres de la fonction, l'appel suivant :
      formatElement("div","le contenu de l'élément"); 	
    2. Déduisez du résultat obtenu la valeur d'un paramètre lorsqu'il n'est pas précisé à l'appel.
    3. Modifiez une nouvelle fois la fonction formatElement pour obtenir comme résultat un code html valide si le troisième paramètre n'est pas précisé.
Codage par décalage
  1. On ne considère que des lettres minuscules.
    1. Soit c le code d'une lettre l et n un entier, quelle expression javascript permet d'obtenir le code de la nème lettre qui suit l dans l'alphabet, sachant que l'on considère que "a" suit immédiatement "z" et donc "c" est la 3ème lettre qui suit "z" etc.
    2. Déduisez en fonction decalageLettreMinuscule qui prend comme paramètre un caractère k et un entier n et a pour résultat le nème caractère qui suit k dans l'alphabet.
  2. Faites de même pour une fonction decalageLettreMajuscule
  3. Réalisez une fonction decalage qui prend comme paramètre un caractère s et un entier n et qui a pour résultat la chaîne de caractères obtenue en décalant toutes les lettres, minuscules et majuscules, de s de n lettres. Les autres caractères de s restent inchangés.
    decalage("tiMoLeon",2);      			/* "vkOqNgqp" */
    decalage("xyoxzxaxyox", 3);     		/* "abracadabra" */
    decalage("fil.univ-lille1.fr", 3);      /* "ilo.xqly-olooh1.iu */
    		
    Un décalage de 1 correspond au code de César. Un décalage de 13 au code ROT-13.
  4. Rédigez une page html qui :
    1. demande à l'utilisateur de saisir une phrase,
    2. demande un entier positif correspondant à un décalage,
    3. affiche la phrase obtenue en appliquant le décalage demandé.
Array : les bases
Appuyez vous sur les notes de cours sur le type Array pour répondre à ces questions.
  1. La fonction Math.random() fournit un nombre aléatoire entre 0 inclus et 1 exclu. Réalisez une fonction alea, qui prend en paramètre un entier n et a pour résultat un entier aléatoire entre 0 inclus et n exclu.
  2. Réalisez une fonction conforme à cette spécification
    /* creeTableauAleatoire : construit un tableau de nombres entiers positifs choisis aléatoirement
    Paramètres : 
      - n (entier > 0): le nombre d'éléments du tableau construit
      - max (entier > 0) : la valeur maximale (incluse) des éléments du tableau
    Résultat :
      un tableau de taille n dont les éléments dont des nombres entiers aléatoirement choisis en 0 et max exclus  
    Exemple :
    creeTableauAleatoire(5,100)   -> [3, 85, 43, 75, 20]
    */
    
  3. Réalisez une fonction sommeElements qui calcule la somme des éléments d'un tableau.

    Testez la en calculant la somme des éléments de tableaux construits avec la fonction de la question 1.

  4. Sur le même modèle que la fonction creeTableauAleatoire de la question 1, réalisez une fonction creeMatriceAleatoire qui prend trois paramètres. Les deux premiers sont les dimensions n et p de la matrice et le troisième est la valeur maximale des éléments de la matrice.

    Proposez deux versions de cette fonction, l'une utilisera creeTableauAleatoire, l'autre non.

    Dans la suite de l'exercice le terme matrice désignera des tableaux à deux éléments similaires à ceux construits à cette question.
  5. Réalisez une fonction sommeElementsMatrice qui calcule la somme des éléments d'une matrice.

    A nouveau proposez deux versions de votre fonction, l'un utilisant sommeElements l'autre non.

  6. Quelle expression permet de calculer la moyenne des éléments d'une matrice ?
  7. Réalisez une fonction sommeDiagonale qui calcule la somme des éléments de la diagonale d'une matrice carrée.
Génération de menus
La méthode split de l'objet String permet de découper la chaîne de caractères selon le délimiteur précisé. Le résultat est le tableau des chaînes obtenues lors du découpage. Voir ici.
  1. Testez les expressions suivantes
    var s1 ="timoleon";
    s1.split("o");
    var t = s1.split("o");
    t.length;
    t[1];
    s1.split("m");
    s1.split("mole");
    s1.split("");
    s1.split();
    var s2 = "voici un exemple de phrase";
    s2.split(" ");
    
  2. Réalisez une fonction qui à partir d'une chaîne de caractères représentant un texte composé de phrases construit une chaîne correspondant au code html d'un élément <ul> dont chacun des éléments <li> sera l'une des phrases du texte.
    On remarquera que deux phrases successives sont séparées par un point et un espace (". ").
    var s ="Ceci est une première phrase. En voici une autre. Et enfin la dernière phrase.";
    genereListe(s);
    
    a pour résultat la chaîne de caractères
    <ul>
     <li>Ceci est une première phrase</li>
     <li>En voici une autre</li>
     <li>Et enfin la dernière phrase</li>
    </ul>
    
    Pensez à réutiliser la fonction formatElement.
    Vous pouvez dans un premier temps construire la chaîne contenant les <li> puis lui ajouter l'élément <ul>.
  3. Modifiez la fonction précédente pour que l'on puisse de manière facultative fournir un second paramètre représentant la classe CSS de la liste <ul>.

    Ainsi l'appel genereListe(s); fournira le même résultat que précédemment alors que l'appel genereListe(s,"liste"); produira un code où l'élément ouvrant est <ul class="liste">, le reste du code restant inchangé.

  4. On suppose que l'on dispose d'un chaîne de caractères dont le contenu est une succession de textes de la forme : Texte [url]..
    1. Réalisez une fonction qui à partir d'une chaîne de la forme Texte [url] produit une chaîne de caractères dont le contenu est le code html <a href="url">Texte</a>
    2. Réalisez une fonction qui à partir d'une telle chaîne construit le code html d'un menu sous la forme d'une liste <ul class="menu"> dont les éléments <li> ont pour contenu <a href="url">texte</a>. Ainsi
      var s ="choix 1 [doc/page1.html]. choix 2 [doc/page2.html]. lien externe [http://www.ailleurs.net]. le FIL [http://fil.univ-lille1.fr]";
      genereMenu(s);
      
      a pour résultat la chaîne de caractères
      <ul class="menu">
       <li><a href="doc/page1.html">choix 1</a></li>
       <li><a href="doc/page2.html">choix 2</a></li>
       <li><a href="http://www.ailleurs.net">lien externe</a></li>
       <li><a href="http://fil.univ-lille1.fr">le FIL</a></li>
      </ul>