Création de fonctions

1. Consultez les 2 pages suivantes : version 1, version 2
2. Voyez-vous des différences entre ces 2 versions ?
3. Consultez les codes HTML de ces 2 pages.
4. Quelles différences constatez-vous ? Qu'en pensez-vous ? L'un des deux fichiers HTML est-il plus facile à comprendre ? Si oui, lequel ?
5. Le château de Chambord se trouve aux coordonnées (47.616141,1.517105). Ajoutez pour chacun des 2 documents HTML l'affichage de ce monument. Cela vous semble-t-il plus facile, ou plus naturel, dans un cas que dans l'autre ?

D'après le comportement observé dans le document version 2, donnez une spécification (probable) de la fonction afficheMonument.

<script type="text/javascript" src="monuments-fonction.js"> </script> 

function afficheMonument (nomMonument, longitude, latitude) {
  var texte = texteMonument(nomMonument, longitude, latitude);
  document.writeln(texte);
}

Prenez quelques instants pour étudier attentivement le contenu de ce fichier, en particulier  :

1. Quelles sont les 3 fonctions définies dans ce fichier ?
2. Etudiez chacun des commentaires qui précédent les définitions. La spécification que vous avez proposée pour afficheMonument correspond-elle ? Ces commentaires vous permettent-ils d'utiliser les fonctions sans étudier de manière plus poussée le code de leur définition ? Cela serait-il aussi facile sans ces commentaires ?
3. Quel mot-clé introduit la définition de ces fonctions ?
4. Quelles sont les 2 fonctions qui produisent un résultat ?
5. Dans ces fonctions, quel mot-clé, absent dans la troisème fonction, vous semble leur permettre de produire ce résultat ?
6. Dans cette définition :

   var afficheMonument = function (nomMonument, longitude, latitude) {
       var texte = texteMonument(nomMonument, longitude, latitude);
       document.writeln(texte);
   }
   

   désignez les paramètres formels, les paramètres effectifs et les variables.

Déduisez de ce qui précède la syntaxe de la définition d'une fonction en Javascript.

1. Activez Firebug et ouvrez le document dans sa version 2.
2. Ouvrez l'onglet script et choisissez le fichiermonuments-fonction.js contenant le code des fonctions que nous voulons analyser.
3. Placez un point d'arrêt sur la première ligne de code du corps de la fonction afficheMonument en cliquant dans la marge du code :
4. Rechargez la page. Celle-ci commence à être évaluée, comme l'indique l'affichage du contenu de la balise h1 puis le traitement s'arrête et dans la zone Firebug la ligne sur laquelle nous avions mis un point d'arrêt est surlignée. Dans la marge un curseur en forme de triangle nous indique que le traitement du code est en attente avant l'évaluation de cette ligne.
5. Dans la zone de droite de Firebug, activez l'onglet Pile. Celui-ci indique par quel chemin (qui se lit de bas en haut) on est arrivé à ce point d'arrêt. Vous pouvez cliquer sur les noms pour accéder directement aux codes impliqués.
6. Dans l'image ci-dessus on peut apercevoir un groupe de boutons, située au-dessus de la zone contenant le code Javascript. Passez en laissant un peu votre souris au-dessus de chacun d'entre eux pour voir apparaitre leur rôle.
7. Nous allons commencer par utiliser le troisième appelé Pas à pas détaillé.
   Appuyez sur ce bouton jusqu'à la fin du traitement de l'appel de la fonction afficheMonument en cours (c'est-à-dire jusqu'à l'affichage de la tour eiffel par le navigateur). Soyez attentif à la séquence d'opérations exécutées et notamment à ce qui se passe lorsqu'une fonction en appelle une autre et lors du "retour" de cette fonction. Surveillez notamment le contenu de la zone Pile sur la droite.
8. Recommencez jusqu'à affichage du Mont Saint-Michel.
9. Appuyez cette fois sur le second bouton (appelé Continuer).
10. Placez un point d'arrêt sur la première ligne de chacune des 2 autres fonctions puis, en observant ce qui se passe, utilisez le bouton Continuer jusqu'à afficher le chateau de Chambord. Donnez une description de l'action de ce bouton.

Faites les modifications demandées pour les 2 versions précédentes et comparez le travail à faire dans chacun des cas :

1. passez le facteur de zoom de 17 à 16
2. modifiez la taille d'affichage des images de 400 à 500
3. modifiez le titre qui précède chaque monument :
   1. remplacez le texte Monument  par Voici :
   2. créez une feuille de style qui définit une classe CSS pour un texte blanc sur fond bleu et affectée cette classe aux éléments h2 de titre des monuments
   3. ajoutez après le nom du monument ses coordonnées GPS, par exemple pour avoir La tour Eiffel se trouve aux coordonnées (48.85826,2.294591)

1. Dans un fichier temperature.js écrivez le code une fonction fahrenheitEnCelsius qui prend un paramètre numérique représentant une température exprimée en degré Fahrenheit et a pour résultat la même température exprimée en degré Celsius.
2. Avez-vous rédigé la partie documentation ? Si non, c'est un tort elle fait partie de la fonction et est tout aussi indispensable que le code lui-même. Pourquoi selon vous ?
3. Ecrivez une page HTML qui utilise la définition de cette fonction dans ce fichier pour, après avoir demandé une température en Fahrenheit affiche la valeur en Celsius correspondante.
4. Testez.
5. Définissez la fonction qui réalise la conversion inverse et testez-la également.

Calcul de la date de Pâques.
Le calcul de la date de Pâques est loin d'être une chose si facile. La définition actuelle de la date de Pâques est celle définie en 325 lors du concile de Nicée : "Pâques est le dimanche qui suit le quatorzième jour de la Lune qui atteint cet âge au 21 mars ou immédiatement après". Le quatorzième jour de la Lune étant le jour de la pleine Lune et le 21 mars correspondant à la date de l´équinoxe de printemps.
L'algorithme de Oudin permet le calcul de la date de pâques pour une année donnée. Il est présenté ci-dessous sous sa forme non simplifiée donc utilisable pour toute année postérieure à 1583 (après l'apparition du calendrier grégorien).
Dans la suite, RESTE représente le reste dans la division entière et QUO le quotient entier

• G = annee RESTE 19
• C = annee QUO 100
• D = C - C QUO 4
• E = (8 x C + 13) QUO 25
• I = (19x G + 15) RESTE 30
• H=(D - E + 19xG + 15) RESTE 30
• K = H QUO 28
• P = 29 QUO (H + 1)
• Q = (21 - G) QUO 11
• I = H - K x (1 - K x P x Q)
• J=(annee+annee QUO 4 + I + 2 -D) RESTE 7
• R = 28+I-

Le résultat R représente le nombre de jours après le 1er mars correspondant au dimanche de Pâques.
En Javascript l'opérateur RESTE se note %. S'il n'existe pas d'opérateur prédéfini correspondant à QUO, on peut sur les nombres positifs composer l'opérateur de division avec la fonction Math.floor qui fournit la valeur arrondie par défaut. En exploitant les conversions de type implicites de Javascript (ici de Float vers String) on peut aussi utiliser de manière détournée la fonction parseInt :

  var n = 12;
  n % 3            ==>  0        // reste de la division de n par 3
  n % 5            ==>  2
  n / 5            ==>  2.4      // division flottante
  Math.floor(n/5)  ==>  2        // valeur arrondie par défaut de la division flottante
  parseInt(n/5)    ==>  2        //  permet d'obtenir le quotient 
  Math.floor(n/3)  ==>  4       

1. Dans un fichier écrivez le code d'une fonction qui prend pour paramètre une année et a pour résultat le nombre de jours après le 1er mars de cette année correspondant au dimanche de Pâques.
2. Ecrivez un document HTML qui utilise cette fonction pour
   1. afficher le nombre de jours qui sépare le dimanche de Pâques du 1er mars pour l'année en cours (reprenez ce qui a été vue sur le type Date !)
   2. demander à l'utilisateur de fournir une année et affiche la même information pour l'année fournie
3. Faites plusieurs tests et utilisez Firebug pour suivre pas à pas l'exécution de votre fonction.