Adresse IP et date du jour en javascript


Accueil > Projets > Adresse IP et date du jour en javascript

Par Cymbler N., Gelly V. en novembre 2020

Dans cet article nous allons voir tout d’abord le but du projet que nous allons vous présenter. Puis, nous allons voir les différents codes de javascript que nous avons inséré dans la page HTML et leurs buts. Pour finir, nous allons vous expliquer les difficultés rencontrées durant la conception de cette page et les solutions que nous avons mis en œuvre pour résoudre ces derniers.

Le but du projet

Ce projet nous a été proposé par nos professeurs.
Le But : Faire de l’insertion de javascript dans une page HTML.
Différentes consignes nous avait été énoncées comme par exemple insérer un module, nous le verrons par la suite, mais aussi un menu et un ou plusieurs codes en javascript.
Au bout de ce projet nous devions donc écrire l’article que vous lisez en ce moment même.

Maintenant que nous vous avons exposé le but de ce projet nous allons donc pouvoir commencer à parler des différents codes qui sont présent dans la page HTML.

Les différents code de la page

La page est constitué d’un menu qui contient les différentes informations que donnent les codes que nous développerons ensuite. Le menu est généré par 3 lignes au début du code HTML et par 3 lignes qui se situent à chaque début de code, juste avant les codes javascript.
Les différentes lignes sont affichées ci-dessous :

  1. Accueil</button>
  2. Date</button>
  3. Adresse IP</button>

Télécharger

ci dessus sont affichées les lignes de codes qui permettent de créer le menu.
À chaque début de code intégré dans le code de la page HTML nous avons des lignes comme celles-ci :

  1.   <div id="Date" >
  2. </div>

Télécharger

qui permettent d’afficher l’information relatif à cette ligne lorsque l’on sélectionne une partie du menu.
Voici le résultat :

Le premier code dont nous allons parler est le module que nos enseignants nous ont imposé d’insérer. Ce module permettra, dans le futur, de relier les différentes pages des différents élèves.

  1. <script src="https://package.nsi.xyz/api/"></script>
  2. <nsi-xyz add="menu" ref="0NSI 2020"></nsi-xyz>

Télécharger

La première ligne permet d’exporter un script externe tandis que la seconde permet d’insérer le menu qui a été importer avec la ligne précédente
Au final, on obtient un menu dépliant qui se situe en haut à droite de la page HTML et une fois déplié on obtient ceci :

Maintenant nous allons parler des trois codes javascripts que nous avons insérés dans la page.

Le premier code est un code permettant de donner l’adresse IP de la personne qui ouvre la page.
Pour obtenir son adresse IP la personne qui a ouvert la page devra cliquer sur un "bouton" qui lancera le programme en javascript.
Le code est affiché ci dessous :

  1. cliquer ici pour avoir votre adresse ip</button>
  2.  <p id="lastcheck"></p>
  3. <script type="text/javascript">
  4. var i = 0;
  5. var prev;
  6. var timer = null;
  7. function stop() {
  8.   clearInterval(timer);
  9. }
  10. function start() {
  11.   checkIP();
  12.   clearInterval(timer);
  13.   timer = setInterval(function() {
  14.     checkIP();
  15.   }, 5000);
  16. }
  17. function checkIP() {
  18.   var text = "";
  19.   $.get("https://api.ipify.org", function(data) {
  20.     text =
  21.       "  L'adresse ip de votre ordinateur est : " + data;
  22.     document.getElementById("lastcheck").innerHTML = text;
  23.     if (data != prev) {
  24.       document.getElementById("log").innerHTML += text;
  25.     }
  26.     prev = data;
  27.   });
  28. }
  29. </script>

Télécharger

la partie du code :

  1. cliquer ici pour avoir votre adresse ip</button>

permet de créer un bouton qui lance le code.
tandis que la ligne :

  1.  text ="  L'adresse ip de votre ordinateur est : " + data

Permet elle de donnée par écrie l’adresse IP
Et on obtient donc au final :

le second code que nous avons inséré est un code permettant de donner la date. Contrairement au code précédent nous n’avons pas inséré de boutons car cela n’est pas nécessaire. Ce code est associé à un troisième que nous verrons ultérieurement.
Le code qui permet de donné la date à l’écrit est le suivant :

  1. <script type="text/javascript">
  2.         var mois=new Array(13);
  3.         mois[1]="Janvier";
  4.         mois[2]="Février";
  5.         mois[3]="Mars";
  6.         mois[4]="Avril";
  7.         mois[5]="Mai";
  8.         mois[6]="Juin";
  9.         mois[7]="Juillet";
  10.         mois[8]="Août";
  11.         mois[9]="Septembre";
  12.         mois[10]="Octobre";
  13.         mois[11]="Novembre";
  14.         mois[12]="Décembre";
  15.         var time=new Date();
  16.         var month=mois[time.getMonth() + 1];
  17.         var date=time.getDate();
  18.         var year=time.getYear();
  19.         if (year < 2000)
  20.         year = year + 1900;
  21.         document.write("Nous sommes le  " +date + " ");
  22.         document.write(month + " " + year);
  23. </script>

Télécharger

Ce code est relativement court comparé aux autres mais il permet de donner la date à laquelle on ouvre la page.

Et le dernier code est complémentaire du précédent car il fait afficher un calendrier pour se situer dans le mois.
Le code permettant cela est le suivant :

  1. <div id="Date" class="tabcontent">
  2.  
  3.          <br>
  4.          <script type="text/javascript">
  5.          <!--
  6.          var d = new Date();
  7.          var dm = d.getMonth() + 1;
  8.          var dan = d.getYear();
  9.          if(dan < 999) dan+=1900;
  10.          calendrier(dm,dan);
  11.          function calendrier(mois,an) {
  12.          nom_mois = new Array
  13.          ("Janvier","F&eacute;vrier","Mars","Avril","Mai","Juin","Juillet",
  14.          "Ao&ucirc;t","Septembre","Octobre","Novembre","D&eacute;cembre");
  15.          jour = new Array ("Lu","Ma","Me","Je","Ve","Sa","Di");
  16.          var police_entete = "Verdana,Arial"; /* police entête de calendrier  */
  17.          var taille_pol_entete = 3;           /* taille de police 1-7 entête de calendrier  */
  18.          var couleur_pol_entete = "#FFFF00";     /* couleur de police entête de calendrier  */
  19.          var arrplan_entete = "#000066";        /* couleur d'arrière plan entête de calendrier  */
  20.          var police_jours = "Verdana,Arial"; /* police affichage des jours  */
  21.          var taille_pol_jours = 3;           /* taille de police 1-7 affichage des jours  */
  22.          var coul_pol_jours = "#000000";     /* couleur de police affichage des jours  */
  23.          var arrplan_jours = "#D0F0F0";        /* couleur d'arrière plan affichage des jours  */
  24.          var couleur_dim = "#E00000";        /* couleur de police pour dimanches  */
  25.          var couleur_cejour = "#FFFF00";        /* couleur d'arrière plan pour aujourd'hui  */
  26.          var maintenant = new Date();
  27.          var ce_mois = maintenant.getMonth() + 1;
  28.          var cette_annee = maintenant.getYear();
  29.          if(cette_annee < 999) cette_annee+=1900;
  30.          var ce_jour = maintenant.getDate();
  31.          var temps = new Date(an,mois-1,1);
  32.          var Start = temps.getDay();
  33.          if(Start > 0) Start--;
  34.          else Start = 6;
  35.          var Stop = 31;
  36.          if(mois==4 ||mois==6 || mois==9 || mois==11 ) --Stop;
  37.          if(mois==2) {
  38.           Stop = Stop - 3;
  39.           if(an%4==0) Stop++;
  40.           if(an%100==0) Stop--;
  41.           if(an%400==0) Stop++;
  42.          }
  43.          document.write('<table border="3" cellpadding="1" cellspacing="1">');
  44.          var entete_mois = nom_mois[mois-1] + " " + an; inscrit_entete(entete_mois,arrplan_entete,couleur_pol_entete,taille_pol_entete,police_entete);
  45.          var nombre_jours = 1;
  46.          for(var i=0;i<=5;i++) {
  47.            document.write("<tr>");
  48.            for(var j=0;j<=5;j++) {
  49.              if((i==0)&&(j < Start))     inscrit_cellule("&#160;",arrplan_jours,coul_pol_jours,taille_pol_jours,police_jours);
  50.              else {
  51.                if(nombre_jours > Stop)           inscrit_cellule("&#160;",arrplan_jours,coul_pol_jours,taille_pol_jours,police_jours);
  52.                else {
  53.                  if((an==cette_annee)&&(mois==ce_mois)&&(nombre_jours==ce_jour))                  inscrit_cellule(nombre_jours,couleur_cejour,coul_pol_jours,taille_pol_jours,police_jours);
  54.                  else             inscrit_cellule(nombre_jours,arrplan_jours,coul_pol_jours,taille_pol_jours,police_jours);
  55.                  nombre_jours++;
  56.                  }
  57.                }
  58.              }
  59.              if(nombre_jours > Stop)           inscrit_cellule("&#160;",arrplan_jours,couleur_dim,taille_pol_jours,police_jours);
  60.              else {
  61.                if((an==cette_annee)&&(mois==ce_mois)&&(nombre_jours==ce_jour))           inscrit_cellule(nombre_jours,couleur_cejour,couleur_dim,taille_pol_jours,police_jours);
  62.                else              inscrit_cellule(nombre_jours,arrplan_jours,couleur_dim,taille_pol_jours,police_jours);
  63.                nombre_jours++;
  64.              }
  65.              document.write("<\/tr>");
  66.            }
  67.          document.write("<\/table>");
  68.          }
  69.          function inscrit_entete(titre_mois,couleurAP,couleurpolice,taillepolice,police) {
  70.          document.write("<tr>");
  71.          document.write('<td align="center" colspan="7" valign="middle" bgcolor="'+couleurAP+'">');
  72.          document.write('<font size="'+taillepolice+'" color="'+couleurpolice+'" face="'+police+'"><b>');
  73.          document.write(titre_mois);
  74.          document.write("<\/b><\/font><\/td><\/tr>");
  75.          document.write("<tr>");
  76.          for(var i=0;i<=6;i++)
  77.            inscrit_cellule(jour[i],couleurAP,couleurpolice,taillepolice,police);
  78.          document.write("<\/tr>");
  79.          }
  80.          function inscrit_cellule(contenu,couleurAP,couleurpolice,taillepolice,police) {
  81.          document.write('<td align="center" valign="middle" bgcolor="'+couleurAP+'">');
  82.          document.write('<font size="'+taillepolice+'" color="'+couleurpolice+'" face="'+police+'"><b>');
  83.          document.write(contenu);
  84.          document.write("<\/b><\/font><\/td>");
  85.          }
  86.          //-->
  87.          </script>

Télécharger

Grâce à ce code on obtient ceci :

Cependant si vous copier ces codes vous n’obtiendrez malheureusement pas le même résultat car il manque le code CSS qui permet de mettre en "forme" et en "couleur" la page.
Donc en premier lieu nous allons voir la mise en page en générale puis nous verrons partie par partie les différents code qui permettent de faire la même mise en page finale.

  1. <style>
  2. body {margin:0;}
  3. body {
  4.     margin: 15;
  5.     border : ;
  6.     background-color: #black;
  7.                 font-family: 'Gadugi';
  8. }
  9. h3 {
  10.     color : #EFEFEF;
  11.     text-align : center;
  12.     font-family : ;
  13.     font-weight : bold;
  14.         font-size : 20px;
  15.         font-family: 'Gadugi';
  16. }
  17. h2 {
  18.         font-family : ;
  19.     color :#EFEFEF;
  20.     text-align : center;
  21.         font-size : 30px;
  22.                 font-family: 'Gadugi';

Télécharger

Cette partie du code permet de faire la mise en page avec la couleur de fond, de définir la police des texte qui auront la balise h2 et h3.

Ensuite nous avons le code qui permet de modifier le "bouton" pour le programme de l’adresse IP :

  1. .bouton {
  2.     padding: 10px 10px;
  3.     background: #CCCCCC;
  4.     color: #39304A;
  5.     border-radius: 30px;
  6.         }

Télécharger

Et enfin voici le code CSS qui permet de faire la mise en page du menu, qui contient toutes les informations, que donnent les codes que nous avons vus précédemment.
Le code est ci-dessous :

  1. /* Style the tab */
  2. .tab {
  3.   float: left;
  4.   border: 1px solid #839788;
  5.   background-color: #BDBBB6;
  6.   width: 30%;
  7.   height: 300px;
  8. }
  9. .tab button {
  10.   display: block;
  11.   background-color: inherit;
  12.   color: black;
  13.   padding: 22px 16px;
  14.   width: 100%;
  15.   border: none;
  16.   outline: none;
  17.   text-align: left;
  18.   cursor: pointer;
  19.   font-size: 17px;
  20. }
  21. .tab button:hover {
  22.   background-color: #ddd;
  23. }
  24. .tab button.active {
  25.   background-color: #ccc;
  26. }
  27. .tabcontent {
  28.   float: left;
  29.   padding: 0px 12px;
  30.   border: 1px solid #ccc;
  31.   width: 70%;
  32.   border-left: none;
  33.   height: 300px;
  34.   display: none;
  35. }
  36. .clearfix::after {
  37.   content: "";
  38.   clear: both;
  39.   display: table;
  40. }

Télécharger

Les lignes de codes ci-dessus permettent la mise page du tableau qui contient les informations données par les codes en javascript.

Nous en avons donc fini avec les différentes lignes de codes qui composent notre page HTML

Les problèmes rencontrés et leurs solutions

Durant la conception de notre page HTML nous avons rencontrés très peu de problèmes concernant les codes. Cependant nous avons eux quelques fois le menu, permettant de faire le lien entre les futures pages des élèves, qui ne s’affichait plus. Le problème était tout simplement que le code n’était pas bien positionné, il se situait dans le partie CSS alors qu’il fallait tout simplement le mettre dans la partie "head".
Le plus gros problème a été de réussir à trouver des codes qui fonctionnaient correctement et qui n’étaient pas trop complexe ni trop simples.

Les différentes modifications apportées aux codes

Durant la création de la page nous avons très légèrement modifié certains codes. Il y avait des éléments qui paraissaient inutiles.
Par exemple :

  • Le code qui donne l’adresse IP avait une autre partie de code qui permettait de se souvenir de l’adresse IP du précédent utilisateur du programme. Cela ne faisait que mettre la même adresse, ce qui paraissait un peut inutile, nous l’avons donc supprimé.
  • Nous avons aussi modifié la couleur et la forme du bouton qui permet de lancer le code qui donnait l’adresse IP.

Conclusion et code final

Voici donc ce compte rendu terminé j’espère que nous vous aurons aidé à comprendre les différentes lignes des codes que nous vous avons proposé.
Vous trouverez donc ci-joint le code final, entièrement complété qui vous permettra d’avoir la même page que la mienne.

page_valentin_gelly.zip (ZIP - 2.9 ko)
page_valentin_gelly.zip

Merci de votre lecture.

Mots-clés