School-DUT-info/M413-Programmation-Web-Client-Riche
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

merge into: School-DUT-info:Td4
Branches Tags
School-DUT-info:master
School-DUT-info:Td4
School-DUT-info:Td3
School-DUT-info:Td2
School-DUT-info:Td1
...
pull from: School-DUT-info:master
Branches Tags
School-DUT-info:master
School-DUT-info:Td4
School-DUT-info:Td3
School-DUT-info:Td2
School-DUT-info:Td1

5 Commits
Td4 ... master

Author SHA1 Message Date
JunkJumper
b512011380 fin td1 2021-01-21 13:26:19 +01:00
JunkJumper
efc5c4b539 defineTitle1 ok 2021-01-21 09:55:22 +01:00
JunkJumper
176f9446bb /2019-2020/ 2021-01-21 09:39:15 +01:00
JunkJumper
a2e304bb63 refonte debut module 2021-01-21 09:37:31 +01:00
JunkJumper
baaf398e5d
Update README.md 2020-07-30 11:20:32 +02:00
60 changed files with 1209 additions and 1205 deletions
Show Stats Expand all files Collapse all files

0
TD1/M4103 TP1.pdf → 2019-2020/TD1/M4103 TP1.pdf
View File

176
TD1/README.MD → 2019-2020/TD1/README.MD
View File

@ -1,88 +1,88 @@
# Programmation Web – client riche - TD1 # Programmation Web – client riche - TD1
## Exercice 1 ## Exercice 1
### La propriété document.title ### La propriété document.title
#### defTitre1() #### defTitre1()
> Quel sera l’évènement qui déclenchera l’appelle de votre fonction ? > Quel sera l’évènement qui déclenchera l’appelle de votre fonction ?
C'est l'évènnement ``init()`` qui se charge d'appeler ma fonction ``defTitre1()``. C'est l'évènnement ``init()`` qui se charge d'appeler ma fonction ``defTitre1()``.
> Quelle méthode avez-vous utilisée pour récupérer l’objet représentant votre balise h1 ? > Quelle méthode avez-vous utilisée pour récupérer l’objet représentant votre balise h1 ?
J'ai utilisé la méthode ``document.getElementById()`` pour récupérer le titre. J'ai utilisé la méthode ``document.getElementById()`` pour récupérer le titre.
> Quelle propriété de l’objet représentant votre balise h1 avez-vous utilisée pour récupérer le texte de celui-ci ? > Quelle propriété de l’objet représentant votre balise h1 avez-vous utilisée pour récupérer le texte de celui-ci ?
J'ai utilisé le ``innerText`` de l'objet. J'ai utilisé le ``innerText`` de l'objet.
#### defTitre2() #### defTitre2()
> Quelle(s) méthode(s) avez-vous utilisée pour récupérer l’objet représentant votre balise h2 ? > Quelle(s) méthode(s) avez-vous utilisée pour récupérer l’objet représentant votre balise h2 ?
J'ai utilisé ``document.getElementsByTagName`` que j'ai affecté à une variable nommée ``firstH2``. Puis je l'ai utilisée avec son attribut ``innerText``. J'ai utilisé ``document.getElementsByTagName`` que j'ai affecté à une variable nommée ``firstH2``. Puis je l'ai utilisée avec son attribut ``innerText``.
#### defTitre3() #### defTitre3()
> Comment faire pour connaitre le nombre de balise h2 du document ? > Comment faire pour connaitre le nombre de balise h2 du document ?
On utilise la propriété ``.lenght`` pour connaitre le nombre de balises h2 du document. On utilise la propriété ``.lenght`` pour connaitre le nombre de balises h2 du document.
#### defTitre4() #### defTitre4()
> Quelle méthode avez-vous utilisée pour récupérer l’objet de votre classe ? > Quelle méthode avez-vous utilisée pour récupérer l’objet de votre classe ?
J'ai utilisé ``document.getElementsByClassName`` que j'ai affecté à une variable nommée ``choosenH``. Puis je l'ai utilisée avec son attribut ``innerText``. J'ai utilisé ``document.getElementsByClassName`` que j'ai affecté à une variable nommée ``choosenH``. Puis je l'ai utilisée avec son attribut ``innerText``.
> Quant est-il avec Internet Explorer ? > Quant est-il avec Internet Explorer ?
La page ne s'affiche pas La page ne s'affiche pas
> Comment avez-vous déterminé si un nombre est pair ? > Comment avez-vous déterminé si un nombre est pair ?
Avec un modulo 2. Avec un modulo 2.
### Les propriétés innerHTML, innerText, outerHTML, outerText et textContent ### Les propriétés innerHTML, innerText, outerHTML, outerText et textContent
#### invertText() #### invertText()
> Quelles différences existe-t-il entre les 5 propriétés de cette section ? > Quelles différences existe-t-il entre les 5 propriétés de cette section ?
``InnerHTML`` conserve les balises "pures" du HTML alors que ``InnerText`` ne garde que le texte. ``InnerHTML`` conserve les balises "pures" du HTML alors que ``InnerText`` ne garde que le texte.
> Y a-t-il une différence avec Internet Explore, FireFox et d’autres navigateurs à votre disposition concernant ces > Y a-t-il une différence avec Internet Explore, FireFox et d’autres navigateurs à votre disposition concernant ces
propriétés ? propriétés ?
Oui, chaque navigateur a sa propre méthode de rendu. Oui, chaque navigateur a sa propre méthode de rendu.
### La propriété document.lastModified ### La propriété document.lastModified
> Comment modifier votre code pour qu’il permette de sélectionner le 1 er auteur de la liste ? > Comment modifier votre code pour qu’il permette de sélectionner le 1 er auteur de la liste ?
J'ai mis la balise auteur en premier. J'ai mis la balise auteur en premier.
J'ai fait une méthode qui utilise un switch case pour changer le mois et le jour du numéro par le texte mais j'aurai pu aussi faire un tableau et apperler une méthode ``jour[numeroJour]``. J'ai fait une méthode qui utilise un switch case pour changer le mois et le jour du numéro par le texte mais j'aurai pu aussi faire un tableau et apperler une méthode ``jour[numeroJour]``.
## Exercice 2 - L'objet Date : ## Exercice 2 - L'objet Date :
J'avais commencé à écrire deux petites condition en if/else mais une autre solution me semble plus simple : J'avais commencé à écrire deux petites condition en if/else mais une autre solution me semble plus simple :
```js ```js
var now = new Date(); var now = new Date();
var selectedDay = new Date('2020-7-19'); var selectedDay = new Date('2020-7-19');
var diffD = selectedDay.getDate - now.getDate; var diffD = selectedDay.getDate - now.getDate;
var diffM = selectedDay.getMonth - now.getMonth; var diffM = selectedDay.getMonth - now.getMonth;
if (diffM % 2 == 0) { //on regarde s'il y a un nombre pair de mois if (diffM % 2 == 0) { //on regarde s'il y a un nombre pair de mois
diffM = (diffM * 30) + (diffM / 2); diffM = (diffM * 30) + (diffM / 2);
} else { //si nombre impair de mois } else { //si nombre impair de mois
diffM = ((diffM * 30) + (diffM / 2)) + 1; diffM = ((diffM * 30) + (diffM / 2)) + 1;
} }
if ((now.getMonth == 2) || (selectedDay.getMonth == 2)) { //la on va voir si on passe par févrirer pour faire la comparaison if ((now.getMonth == 2) || (selectedDay.getMonth == 2)) { //la on va voir si on passe par févrirer pour faire la comparaison
diffM = diffM - 2; //si il y a février, on retire deux jours diffM = diffM - 2; //si il y a février, on retire deux jours
}``` }```

0
TD1/[S4T][JS][G3][TD1]SrifiJose.pdf → 2019-2020/TD1/[S4T][JS][G3][TD1]SrifiPauline.pdf
View File

20
TD1/css/main.css → 2019-2020/TD1/css/main.css
View File

@ -1,10 +1,10 @@
.firstOrLast{ .firstOrLast{
color: red; color: red;
} }
span{ span{
color: #090; color: #090;
} }

110
TD1/index.html → 2019-2020/TD1/index.html
View File

@ -1,56 +1,56 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name='author' content="JunkJumper" /> <meta name='author' content="JunkJumper" />
<meta charset='utf-8' /> <meta charset='utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge' /> <meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>M4103 - Programmation Web Client Riche - TD1</title> <title>M4103 - Programmation Web Client Riche - TD1</title>
<meta name='viewport' content='width=device-width, initial-scale=1' /> <meta name='viewport' content='width=device-width, initial-scale=1' />
<meta name="description" content="Page TD1 M413" /> <meta name="description" content="Page TD1 M413" />
<meta name="keywords" content="JavaScript, TD1" /> <meta name="keywords" content="JavaScript, TD1" />
<link rel='stylesheet' type='text/css' media='screen' href='./css/main.css'> <link rel='stylesheet' type='text/css' media='screen' href='./css/main.css'>
<script src='./js/main.js'></script> <script src='./js/main.js'></script>
<p>Comme pour tous les autres td, les réponses aux questions sont disponibles <strong><a href="https://github.com/JunkJumper/M4103-Programmation-Web-Client-Riche/tree/master/TD1" target="_blank">ICI</a></strong> !</p> <p>Comme pour tous les autres td, les réponses aux questions sont disponibles <strong><a href="https://github.com/JunkJumper/M4103-Programmation-Web-Client-Riche/tree/master/2019-2020/TD1" target="_blank">ICI</a></strong> !</p>
</head> </head>
<body onload="init();"> <body onload="init();">
<h1 id="titre" class="firstOrLast">Exercice <span>1</span></h1> <h1 id="titre" class="firstOrLast">Exercice <span>1</span></h1>
<div> <div>
<p>Mane 6 : ce sont les six personnages principaux de la série My Little Pony Friendship is Magic</p> <p>Mane 6 : ce sont les six personnages principaux de la série My Little Pony Friendship is Magic</p>
</div> </div>
<h2>Applejack</h2> <h2>Applejack</h2>
<div> <div>
<p<>Poney terrestre de nature <strong>honnête et travailleuse</strong> elle travaille dans la « Sweet Apple Acres » avec le reste de la famille Apple.</p> <p<>Poney terrestre de nature <strong>honnête et travailleuse</strong> elle travaille dans la « Sweet Apple Acres » avec le reste de la famille Apple.</p>
</div> </div>
<h3 class="firstOrLast">Rainbow Dash</h3> <h3 class="firstOrLast">Rainbow Dash</h3>
<p>Pégase de nature fière et sportive, elle est en charge de la gestion de la météo de Ponyville.</p> <p>Pégase de nature fière et sportive, elle est en charge de la gestion de la météo de Ponyville.</p>
<h2 class="firstOrLast">Twilight Sparkle</h2> <h2 class="firstOrLast">Twilight Sparkle</h2>
<p>Licorne de nature intellectuelle et réfléchie, elle est l’élève de la Princesse Celestia. Elle est chargée d’apprendre le plus possible en ce qui concerne l’amitié.</p> <p>Licorne de nature intellectuelle et réfléchie, elle est l’élève de la Princesse Celestia. Elle est chargée d’apprendre le plus possible en ce qui concerne l’amitié.</p>
<h3>Rarity</h3> <h3>Rarity</h3>
<p>Licorne de nature généreuse, elle travaille à la fois comme créatrice de mode et comme couturière dans sa propre boutique de Ponyville, la Boutique Carrousel.</p> <p>Licorne de nature généreuse, elle travaille à la fois comme créatrice de mode et comme couturière dans sa propre boutique de Ponyville, la Boutique Carrousel.</p>
<h3>Fluttershy</h3> <h3>Fluttershy</h3>
<p>Pégase de nature timide et réservée, elle s’occupe des animaux dans son chalet qui lui sert également de résidence principale.</p> <p>Pégase de nature timide et réservée, elle s’occupe des animaux dans son chalet qui lui sert également de résidence principale.</p>
<h3>Pinkie Pie</h3> <h3>Pinkie Pie</h3>
<p>Poney terrestre de nature joyeuse et souriante qui adore faire la fête, elle travaille au Sugar Cube Corner en préparant des gâteaux pour les habitants de Ponyville.</p> <p>Poney terrestre de nature joyeuse et souriante qui adore faire la fête, elle travaille au Sugar Cube Corner en préparant des gâteaux pour les habitants de Ponyville.</p>
<div> <div>
<p id="1">Luna ne <span>fait pas partie</span> du mane 6 mais est très symaptique aussi :D</p> <p id="1">Luna ne <span>fait pas partie</span> du mane 6 mais est très symaptique aussi :D</p>
</div> </div>
<div> <div>
<p id="2">Luna <span>est drôle</span> bien qu'elle dise le contraire.</p> <p id="2">Luna <span>est drôle</span> bien qu'elle dise le contraire.</p>
</div> </div>
<button type="button" onclick="invertText()">Boop !</button><br /><br /> <button type="button" onclick="invertText()">Boop !</button><br /><br />
<div id="date_modif"></div> <div id="date_modif"></div>
<p onClick="majNbJours()">Il reste <p onClick="majNbJours()">Il reste
<strong id="deadline">X</strong> jours avant le 19 juillet 2020 (un jour normal à Équestria).</p> <strong id="deadline">X</strong> jours avant le 19 juillet 2020 (un jour normal à Équestria).</p>
</body> </body>
</html> </html>

368
TD1/js/main.js → 2019-2020/TD1/js/main.js
View File

@ -1,185 +1,185 @@
console.log("JavaScript is linked"); /**Cette méthode permet de vérifier que Javascript est bien activé **/ console.log("JavaScript is linked"); /**Cette méthode permet de vérifier que Javascript est bien activé **/
function init() { function init() {
sayHello(); sayHello();
//defTitre1(); //defTitre1();
//defTitre2(); //defTitre2();
//defTitre3(); //defTitre3();
defTitre4(); defTitre4();
datemodif(); datemodif();
} }
function sayHello() { /**Cette méthode permet de vérifier que la console de log est activée. **/ function sayHello() { /**Cette méthode permet de vérifier que la console de log est activée. **/
console.log("Hello Everypony !"); console.log("Hello Everypony !");
} }
function defTitre1() { /**Cette méthode permet de forcer letitre de la page avec le contenu de la balise dont l'id est titre **/ function defTitre1() { /**Cette méthode permet de forcer letitre de la page avec le contenu de la balise dont l'id est titre **/
if (document.title = document.getElementById("titre").innerText) { if (document.title = document.getElementById("titre").innerText) {
console.log("<title> set : Ok Everypony !"); console.log("<title> set : Ok Everypony !");
} }
} }
function defTitre2() { /**Cette méthode permet de forcer letitre de la page avec le contenu de la première balise H2 **/ function defTitre2() { /**Cette méthode permet de forcer letitre de la page avec le contenu de la première balise H2 **/
var firstH2 = document.getElementsByTagName("h2"); var firstH2 = document.getElementsByTagName("h2");
if (firstH2 != null) { if (firstH2 != null) {
document.title = firstH2[0].innerText; document.title = firstH2[0].innerText;
console.log("<title> set : Ok Everypony !"); console.log("<title> set : Ok Everypony !");
} }
} }
function defTitre3() { /**Cette méthode permet de forcer letitre de la page avec le contenu de la dernière balise H2 ou avec le nom de l'auteur si il n'y a pas de balises H2**/ function defTitre3() { /**Cette méthode permet de forcer letitre de la page avec le contenu de la dernière balise H2 ou avec le nom de l'auteur si il n'y a pas de balises H2**/
var lastH2 = document.getElementsByTagName("h2"); var lastH2 = document.getElementsByTagName("h2");
if (lastH2 != null) { if (lastH2 != null) {
document.title = lastH2[lastH2.length - 1].innerText; document.title = lastH2[lastH2.length - 1].innerText;
console.log("<title> set : Ok Everypony !"); console.log("<title> set : Ok Everypony !");
} else { } else {
document.title = "Page par Pauline Célestiale"; document.title = "Page par Pauline Célestiale";
console.warn("There is no H2 tag on this page Everypony ! /:") console.warn("There is no H2 tag on this page Everypony ! /:")
} }
} }
function defTitre4() { /**Cette méthode permet de forcer letitre de la page avec le contenu de la dernière balise H3 si il y a un nombre impair de H3, avec la première balise H3 si il y en a un nombre pair ou avec le nom de l'auteur si il n'y a pas de balises H2**/ function defTitre4() { /**Cette méthode permet de forcer letitre de la page avec le contenu de la dernière balise H3 si il y a un nombre impair de H3, avec la première balise H3 si il y en a un nombre pair ou avec le nom de l'auteur si il n'y a pas de balises H2**/
var choosenH = document.getElementsByClassName("firstOrLast"); var choosenH = document.getElementsByClassName("firstOrLast");
if (choosenH != null) { if (choosenH != null) {
if (choosenH.length % 2 == 0) { if (choosenH.length % 2 == 0) {
document.title = choosenH[0].innerText; document.title = choosenH[0].innerText;
console.log("<title> set first H : Ok Everypony !"); console.log("<title> set first H : Ok Everypony !");
} else { } else {
document.title = choosenH[choosenH.length - 1].innerText; document.title = choosenH[choosenH.length - 1].innerText;
console.log("<title> set last H : Ok Everypony !"); console.log("<title> set last H : Ok Everypony !");
} }
} else { } else {
document.title = "Page par Pauline Célestiale"; document.title = "Page par Pauline Célestiale";
console.warn("There is no H2 tag on this page Everypony ! /:") console.warn("There is no H2 tag on this page Everypony ! /:")
} }
} }
function invertText() { /**Cette fonction inverses deux lignes entre elles **/ function invertText() { /**Cette fonction inverses deux lignes entre elles **/
var buffer; var buffer;
var un = document.getElementById("1"); //C'est la première ligne que l'on veux inverser var un = document.getElementById("1"); //C'est la première ligne que l'on veux inverser
var deux = document.getElementById("2"); // C'est la deuxième ligne que l'on veut inverser var deux = document.getElementById("2"); // C'est la deuxième ligne que l'on veut inverser
buffer = un.innerText; //on garde en mémoire la ligne 1 buffer = un.innerText; //on garde en mémoire la ligne 1
un.innerText = deux.innerText; //on affecte le contenu de la ligne 2 à la ligne 1 un.innerText = deux.innerText; //on affecte le contenu de la ligne 2 à la ligne 1
deux.innerText = buffer; //on affecte le contenu de la ligne 1 à la ligne 2 via ce que l'on a stocké dans le buffer deux.innerText = buffer; //on affecte le contenu de la ligne 1 à la ligne 2 via ce que l'on a stocké dans le buffer
} }
function datemodif() { function datemodif() {
var now = new Date(); var now = new Date();
var dN = now.getDay(); //dN for Day Name var dN = now.getDay(); //dN for Day Name
var d = now.getDate(); //d for Day var d = now.getDate(); //d for Day
var m = now.getMonth(); //m for Month var m = now.getMonth(); //m for Month
var y = now.getFullYear(); // y for Year var y = now.getFullYear(); // y for Year
var laDate = d2S(dN) + " " + d + " " + m2S(m) + " " + y; //on concatène le String au complet. var laDate = d2S(dN) + " " + d + " " + m2S(m) + " " + y; //on concatène le String au complet.
var lastauthor = document.getElementsByTagName("meta"); //on va chercher les eta et on gardera que le dernier var lastauthor = document.getElementsByTagName("meta"); //on va chercher les eta et on gardera que le dernier
var setModifSentence = ""; //on initialise la variable var setModifSentence = ""; //on initialise la variable
var div2change = document.getElementById("date_modif"); //la balise div vide en fin de page. var div2change = document.getElementById("date_modif"); //la balise div vide en fin de page.
if (lastauthor != null) { if (lastauthor != null) {
setModifSentence = setModifSentence + "Document modifié le " + laDate + " par " + lastauthor[0].content; // on botient la phrase finale setModifSentence = setModifSentence + "Document modifié le " + laDate + " par " + lastauthor[0].content; // on botient la phrase finale
} }
//console.log(setModifSentence); //console.log(setModifSentence);
div2change.innerText = setModifSentence; //on affiche la date au complet div2change.innerText = setModifSentence; //on affiche la date au complet
} }
function majNbJours() { function majNbJours() {
var now = new Date(); var now = new Date();
var selectedDay = new Date('2020-7-19'); var selectedDay = new Date('2020-7-19');
var msNow = now.getTime; var msNow = now.getTime;
var msSelectedDay = selectedDay.getTime; var msSelectedDay = selectedDay.getTime;
var diff = (msSelectedDay - msNow) / (24 * 1000 * 3600); //24h, 1000 ms = 1 s, 3600s = 1h var diff = (msSelectedDay - msNow) / (24 * 1000 * 3600); //24h, 1000 ms = 1 s, 3600s = 1h
console.log(msNow); console.log(msNow);
console.log(msSelectedDay); console.log(msSelectedDay);
console.log(diff); console.log(diff);
var text2replace = document.getElementById("deadline"); var text2replace = document.getElementById("deadline");
text2replace.innerHTML = diff; text2replace.innerHTML = diff;
} }
function d2S(d) { //renvoi le nom du jour au lieu du chiffre function d2S(d) { //renvoi le nom du jour au lieu du chiffre
switch (d) { switch (d) {
case 0: case 0:
return "dimanche"; return "dimanche";
break; break;
case 1: case 1:
return "lundi"; return "lundi";
break; break;
case 2: case 2:
return "mardi" return "mardi"
break; break;
case 3: case 3:
return "mercredi" return "mercredi"
break; break;
case 4: case 4:
return "jeudi" return "jeudi"
break; break;
case 5: case 5:
return "vendredi" return "vendredi"
break; break;
case 6: case 6:
return "samedi" return "samedi"
break; break;
default: default:
break; break;
} }
} }
function m2S(m) { //renvoi le nom du mois au lieu du chiffre function m2S(m) { //renvoi le nom du mois au lieu du chiffre
switch (m) { switch (m) {
case 0: case 0:
return "janvier"; return "janvier";
break; break;
case 1: case 1:
return "février"; return "février";
break; break;
case 2: case 2:
return "mars" return "mars"
break; break;
case 3: case 3:
return "avril" return "avril"
break; break;
case 4: case 4:
return "mai" return "mai"
break; break;
case 5: case 5:
return "juin" return "juin"
break; break;
case 6: case 6:
return "juillet" return "juillet"
break; break;
case 7: case 7:
return "août" return "août"
break; break;
case 8: case 8:
return "septembre" return "septembre"
break; break;
case 9: case 9:
return "octobre" return "octobre"
break; break;
case 10: case 10:
return "novembre" return "novembre"
break; break;
case 11: case 11:
return "décembre" return "décembre"
break; break;
default: default:
break; break;
} }
} }

22
TD2/README.MD → 2019-2020/TD2/README.MD
View File

@ -1,11 +1,11 @@
# Programmation Web – client riche - TD2 # Programmation Web – client riche - TD2
## Exercice 1 ## Exercice 1
> Comment avez-vous ajouté l’écouteur d’évènement et sur quel objet? > Comment avez-vous ajouté l’écouteur d’évènement et sur quel objet?
La méthode de base à utiliser est ``document.{object}.addEventListener({action à écouter}, {objet à appeler})`` et je l'ai affecté à mon body pour écrier dans la console pour tester dans un premier temps :``document.body.addEventListener("click", initSelection)``. La méthode de base à utiliser est ``document.{object}.addEventListener({action à écouter}, {objet à appeler})`` et je l'ai affecté à mon body pour écrier dans la console pour tester dans un premier temps :``document.body.addEventListener("click", initSelection)``.
> Que se passe-t-il si vous utilisez currentTarget en lieu et place de target ? > Que se passe-t-il si vous utilisez currentTarget en lieu et place de target ?
Ca force la sélection sur l'élément sur lequel on a placé le listener et pas sur chaque balise séparemment. Ca force la sélection sur l'élément sur lequel on a placé le listener et pas sur chaque balise séparemment.

0
TD2/TP2_JS_M413_2016.pdf → 2019-2020/TD2/TP2_JS_M413_2016.pdf
View File

0
TD2/[S4T][JS][G3][TD2]SrifiJose.pdf → 2019-2020/TD2/[S4T][JS][G3][TD2]SrifiPauline.pdf
View File

96
TD2/css/main.css → 2019-2020/TD2/css/main.css
View File

@ -1,49 +1,49 @@
body { body {
font-family: serif; font-family: serif;
} }
h1, h1,
h2, h2,
h3 { h3 {
font-family: sans-serif; font-family: sans-serif;
} }
h1 { h1 {
background-color: #def; background-color: #def;
padding: 10px; padding: 10px;
margin-left: 10px; margin-left: 10px;
} }
h2 { h2 {
background-color: #abc; background-color: #abc;
padding: 10px; padding: 10px;
margin-left: 60px; margin-left: 60px;
} }
h3 { h3 {
background-color: #789; background-color: #789;
padding: 10px; padding: 10px;
margin-left: 110px; margin-left: 110px;
} }
div { div {
background-color: #ddd; background-color: #ddd;
padding: 20px; padding: 20px;
margin-left: 110px; margin-left: 110px;
} }
p { p {
background-color: #eee; background-color: #eee;
padding: 20px; padding: 20px;
} }
.red { .red {
background-color: rgb(184, 12, 40); background-color: rgb(184, 12, 40);
} }
#imgMelou, #imgMelou,
#butMelou { #butMelou {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }

0
TD2/img/melou.jpeg → 2019-2020/TD2/img/melou.jpeg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 60 KiB

106
TD2/index.html → 2019-2020/TD2/index.html
View File

@ -1,54 +1,54 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name='author' content="JunkJumper" /> <meta name='author' content="JunkJumper" />
<meta charset='utf-8' /> <meta charset='utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge' /> <meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>M4103 - Programmation Web Client Riche - TD1</title> <title>M4103 - Programmation Web Client Riche - TD1</title>
<meta name='viewport' content='width=device-width, initial-scale=1' /> <meta name='viewport' content='width=device-width, initial-scale=1' />
<meta name="description" content="Page TD1 M413" /> <meta name="description" content="Page TD1 M413" />
<meta name="keywords" content="JavaScript, TD1" /> <meta name="keywords" content="JavaScript, TD1" />
<link rel='stylesheet' type='text/css' media='screen' href='./css/main.css'> <link rel='stylesheet' type='text/css' media='screen' href='./css/main.css'>
<script src='./js/main.js'></script> <script src='./js/main.js'></script>
<p>Comme pour tous les autres td, les réponses aux questions sont disponibles <strong><a href="https://github.com/JunkJumper/M4103-Programmation-Web-Client-Riche/tree/master/TD2" target="_blank">ICI</a></strong> !</p> <p>Comme pour tous les autres td, les réponses aux questions sont disponibles <strong><a href="https://github.com/JunkJumper/M4103-Programmation-Web-Client-Riche/tree/master/2019-2020/TD2" target="_blank">ICI</a></strong> !</p>
</head> </head>
<body onload="init();"> <body onload="init();">
<h1>Pierre Lees-Melou</h1> <h1>Pierre Lees-Melou</h1>
<h2>Courte présentation</h2> <h2>Courte présentation</h2>
<div id="presentation"> <div id="presentation">
<p>Pierre Lees-Melou, est un footballeur français. Il évolue au poste de milieu offensif à l'OGC Nice.</p> <p>Pierre Lees-Melou, est un footballeur français. Il évolue au poste de milieu offensif à l'OGC Nice.</p>
<img src="./img/melou.jpeg" width="15%" alt="melou" id="imgMelou" /> <img src="./img/melou.jpeg" width="15%" alt="melou" id="imgMelou" />
</div> </div>
<h2>Son parcours et ses stats</h2> <h2>Son parcours et ses stats</h2>
<div id="parcours"> <div id="parcours">
<p>Voici les clubs par lequel notre numéro <span>8</span> <a href="https://www.ogcnice.com/fr/">du gym</a> est passé</p> <p>Voici les clubs par lequel notre numéro <span>8</span> <a href="https://www.ogcnice.com/fr/">du gym</a> est passé</p>
<ul> <ul>
<li>2010-2012 | Langon FC</li> <li>2010-2012 | Langon FC</li>
<li>2012 | FCE Mérignac Arlac</li> <li>2012 | FCE Mérignac Arlac</li>
<li>2013-2015 | US Lège-Cap-Ferret</li> <li>2013-2015 | US Lège-Cap-Ferret</li>
<li>2015-2017 | Dijon FCO</li> <li>2015-2017 | Dijon FCO</li>
<li>2017-Aujoud'hui | OGC Nice</li> <li>2017-Aujoud'hui | OGC Nice</li>
</ul> </ul>
<p>Il a marqué en pro par saison :</p> <p>Il a marqué en pro par saison :</p>
<ul> <ul>
<li>5 buts avec le Dijon FCO en 2015-2016</li> <li>5 buts avec le Dijon FCO en 2015-2016</li>
<li>7 buts avec le Dijon FCO 2016-2017</li> <li>7 buts avec le Dijon FCO 2016-2017</li>
<li>5 buts avec l'OGC Nice 2017-2018</li> <li>5 buts avec l'OGC Nice 2017-2018</li>
<li>2 buts avec l'OGC Nice 2018-2019</li> <li>2 buts avec l'OGC Nice 2018-2019</li>
<li>4 buts avec l'OGC Nice cette saison 2019-2020</li> <li>4 buts avec l'OGC Nice cette saison 2019-2020</li>
</ul> </ul>
</div> </div>
<a href="https://www.youtube.com/watch?v=6Hz19CiexU4&t=3s" target="_blank"> <a href="https://www.youtube.com/watch?v=6Hz19CiexU4&t=3s" target="_blank">
<h2>Son dernier but</h2> <h2>Son dernier but</h2>
</a> </a>
</body> </body>
</html> </html>

64
TD2/js/main.js → 2019-2020/TD2/js/main.js
View File

@ -1,33 +1,33 @@
console.log("JavaScript is linked"); /**Cette méthode permet de vérifier que Javascript est bien activé **/ console.log("JavaScript is linked"); /**Cette méthode permet de vérifier que Javascript est bien activé **/
function init() { function init() {
sayHello(); sayHello();
document.body.addEventListener("click", selection); //vérification que le listener est ok document.body.addEventListener("click", selection); //vérification que le listener est ok
ajoutDiv(); ajoutDiv();
} }
function sayHello() { /**Cette méthode permet de vérifier que la console de log est activée. **/ function sayHello() { /**Cette méthode permet de vérifier que la console de log est activée. **/
console.log("Bevengutti Nissart ! !"); console.log("Bevengutti Nissart ! !");
} }
function initSelection() { function initSelection() {
sayHello(); sayHello();
} }
function selection(event) { function selection(event) {
console.log(event.target.tagName); //cela indique quel balise est sélectionnée par le click console.log(event.target.tagName); //cela indique quel balise est sélectionnée par le click
var element = event.target; var element = event.target;
element.classList.toggle("red"); element.classList.toggle("red");
} }
function ajoutDiv() { function ajoutDiv() {
var div = document.createElement("div"); var div = document.createElement("div");
div.setAttribute("id", "divAinserer"); div.setAttribute("id", "divAinserer");
document.body.insertBefore(div, document.body.firstChild); document.body.insertBefore(div, document.body.firstChild);
document.getElementById("divAinserer").innerHTML = "" + document.getElementById("divAinserer").innerHTML = "" +
"<input type=\"button\" value=\"DIV\" onclick=\"insertB('div')\"/>" + "<input type=\"button\" value=\"DIV\" onclick=\"insertB('div')\"/>" +
"<input type=\"button\" value=\"P\" onclick=\"insertB('p')\"/>" + "<input type=\"button\" value=\"P\" onclick=\"insertB('p')\"/>" +
"<input type=\"button\" value=\"H2\" onclick=\"insertB('h2')\"/>" + "<input type=\"button\" value=\"H2\" onclick=\"insertB('h2')\"/>" +
"<input type=\"text\" id=\"toInsert\"/>"; "<input type=\"text\" id=\"toInsert\"/>";
} }

10
TD3/README.MD → 2019-2020/TD3/README.MD
View File

@ -1,5 +1,5 @@
# Programmation Web – client riche - TD3 # Programmation Web – client riche - TD3
## Exercice 1 ## Exercice 1
Alors j'ai utilisé un buffer pour stocker le innerHTML afin de terminer toutes les instructions concernant un objet/une variable avant de passer à/au suivant.e. Alors j'ai utilisé un buffer pour stocker le innerHTML afin de terminer toutes les instructions concernant un objet/une variable avant de passer à/au suivant.e.

0
TD3/TP3_JS_M413_2016.pdf → 2019-2020/TD3/TP3_JS_M413_2016.pdf
View File

84
TD3/css/td3-exo1.css → 2019-2020/TD3/css/td3-exo1.css
View File

@ -1,43 +1,43 @@
html { html {
font-size: 62.5%; font-size: 62.5%;
} }
body { body {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
#jeu { #jeu {
border-style:solid; border-style:solid;
border-width:1px; border-width:1px;
background-color:#00008B; background-color:#00008B;
margin:0px; margin:0px;
width: 306px; width: 306px;
height:306px; height:306px;
position: absolute; position: absolute;
} }
.case { .case {
border-style:solid; border-style:solid;
border-width:1px; border-width:1px;
background-color:#1E90FF; background-color:#1E90FF;
margin:0px; margin:0px;
padding: 0px; padding: 0px;
width: 100px; width: 100px;
height:100px; height:100px;
position: absolute; position: absolute;
z-index:1; z-index:1;
transition-property : top, left; transition-property : top, left;
transition-duration : 1s; transition-duration : 1s;
} }
div{ div{
padding:0px; padding:0px;
} }
h1{ h1{
text-align: center; text-align: center;
font-size: 4rem; font-size: 4rem;
margin:0; margin:0;
padding: 27px 0px; padding: 27px 0px;
} }
.vide { .vide {
background-color:#00008B; background-color:#00008B;
z-index:0; z-index:0;
border:none border:none
} }

78
TD3/css/td3-exo2.css → 2019-2020/TD3/css/td3-exo2.css
View File

@ -1,40 +1,40 @@
html { font-size: 62.5%; } html { font-size: 62.5%; }
body { margin: 0px; padding: 0px; color : black} body { margin: 0px; padding: 0px; color : black}
#jeu { #jeu {
border-style:solid; border-style:solid;
border-width:1px; border-width:1px;
background-color:#00008B; background-color:#00008B;
margin:0px; margin:0px;
width: 408px; width: 408px;
height:408px; height:408px;
} }
#commande { #commande {
margin:0px; margin:0px;
height:30px; height:30px;
position: absolute; position: absolute;
left : 410px; left : 410px;
top: 0px; top: 0px;
} }
.case { .case {
border-style:solid; border-style:solid;
border-width:1px; border-width:1px;
border-color:black; border-color:black;
background-color:#1E90FF; background-color:#1E90FF;
margin:0px; margin:0px;
padding: 0px; padding: 0px;
width: 100px; width: 100px;
height:100px; height:100px;
position: absolute; position: absolute;
z-index:1; z-index:1;
transition-property : top, left; transition-property : top, left;
transition-duration : 1s; transition-duration : 1s;
text-align: center; text-align: center;
font-size: 4rem; font-size: 4rem;
line-height: 100px; line-height: 100px;
} }
.new { .new {
color : red; color : red;
} }
.videold { background-color:#00008B; z-index:0; border:none} .videold { background-color:#00008B; z-index:0; border:none}

40
TD3/index.html → 2019-2020/TD3/index.html
View File

@ -1,21 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>M4103 - Programmation Web Client Riche</title> <title>M4103 - Programmation Web Client Riche</title>
<meta name='viewport' content='width=device-width, initial-scale=1'> <meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='../css/main.css'> <link rel='stylesheet' type='text/css' media='screen' href='../css/main.css'>
<h1>M4103 - Programmation Web Client Riche</h1> <h1>M4103 - Programmation Web Client Riche</h1>
<h2>Sommaire TD3</h2> <h2>Sommaire TD3</h2>
</head> </head>
<body> <body>
<ul> <ul>
<li><a href="./td3-exo1.html">Le jeu du taquin</a></li> <li><a href="./td3-exo1.html">Le jeu du taquin</a></li>
<li><a href="./td3-exo2.html">Le jeu du 2048</a></li> <li><a href="./td3-exo2.html">Le jeu du 2048</a></li>
</ul> </ul>
</body> </body>
</html> </html>

56
TD3/js/td3-exo1.js → 2019-2020/TD3/js/td3-exo1.js
View File

@ -1,29 +1,29 @@
console.log("Chargement..."); console.log("Chargement...");
function init() { function init() {
console.log("Initialisation..."); console.log("Initialisation...");
var div = document.querySelectorAll(".case"); var div = document.querySelectorAll(".case");
for (var i = 0; i < div.length; i++) { for (var i = 0; i < div.length; i++) {
div[i].addEventListener("click", selection); div[i].addEventListener("click", selection);
} }
} }
function selection(event) { function selection(event) {
var maCase = event.currentTarget; var maCase = event.currentTarget;
var vide = document.body.querySelector(".case.vide"); var vide = document.body.querySelector(".case.vide");
if ((maCase.offsetTop == vide.offsetTop && Math.abs(maCase.offsetLeft - vide.offsetLeft) == 102) || if ((maCase.offsetTop == vide.offsetTop && Math.abs(maCase.offsetLeft - vide.offsetLeft) == 102) ||
(maCase.offsetLeft == vide.offsetLeft && Math.abs(maCase.offsetTop - vide.offsetTop) == 102)) { (maCase.offsetLeft == vide.offsetLeft && Math.abs(maCase.offsetTop - vide.offsetTop) == 102)) {
console.log("Déplacement effectué !"); console.log("Déplacement effectué !");
maCase.className = "case vide"; maCase.className = "case vide";
var buff = maCase.innerHTML; var buff = maCase.innerHTML;
maCase.innerHTML = ""; maCase.innerHTML = "";
vide.className = "case"; vide.className = "case";
vide.innerHTML = buff; vide.innerHTML = buff;
} }
var e = event.target; var e = event.target;
} }

8
TD3/js/td3-exo2.js → 2019-2020/TD3/js/td3-exo2.js
View File

@ -1,5 +1,5 @@
console.log("js linkef"); console.log("js linkef");
function init() { function init() {
console.log("init ok"); console.log("init ok");
} }

42
TD3/td3-exo1.html → 2019-2020/TD3/td3-exo1.html
View File

@ -1,22 +1,22 @@
<!doctype html> <!doctype html>
<html lang="fr"> <html lang="fr">
<head> <head>
<title>Taquin</title> <title>Taquin</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/td3-exo1.css" media="all"> <link rel="stylesheet" type="text/css" href="css/td3-exo1.css" media="all">
<script type="text/javascript" src="js/td3-exo1.js"></script> <script type="text/javascript" src="js/td3-exo1.js"></script>
</head> </head>
<body onload="init();"> <body onload="init();">
<div id="jeu"> <div id="jeu">
<div style="top:0px;left:0px;" class="case"><h1>6</h1></div> <div style="top:0px;left:0px;" class="case"><h1>6</h1></div>
<div style="top:0px;left:102px;" class="case"><h1>1</h1></div> <div style="top:0px;left:102px;" class="case"><h1>1</h1></div>
<div style="top:0px;left:204px;" class="case"><h1>7</h1></div> <div style="top:0px;left:204px;" class="case"><h1>7</h1></div>
<div style="top:102px;left:0px;" class="case"><h1>3</h1></div> <div style="top:102px;left:0px;" class="case"><h1>3</h1></div>
<div style="top:102px;left:102px;" class="case"><h1>4</h1></div> <div style="top:102px;left:102px;" class="case"><h1>4</h1></div>
<div style="top:102px;left:204px;" class="case"><h1>8</h1></div> <div style="top:102px;left:204px;" class="case"><h1>8</h1></div>
<div style="top:204px;left:0px;" class="case"><h1>5</h1></div> <div style="top:204px;left:0px;" class="case"><h1>5</h1></div>
<div style="top:204px;left:102px;" class="case"><h1>2</h1></div> <div style="top:204px;left:102px;" class="case"><h1>2</h1></div>
<div style="top:204px;left:204px;" class="case vide"><h1> </h1></div> <div style="top:204px;left:204px;" class="case vide"><h1> </h1></div>
</div> </div>
</body> </body>
</html> </html>

74
TD3/td3-exo2.html → 2019-2020/TD3/td3-exo2.html
View File

@ -1,37 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<title>Jeu 2048</title> <title>Jeu 2048</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/td3-exo2.css" /> <link rel="stylesheet" type="text/css" href="css/td3-exo2.css" />
<script type="text/javascript" src="js/td3-exo2.js"> </script> <script type="text/javascript" src="js/td3-exo2.js"> </script>
</head> </head>
<body onload="init();"> <body onload="init();">
<div id="jeu"> <div id="jeu">
<div class="ligne"> <div class="ligne">
<div style="top:0px;left:0px;" class="case"></div> <div style="top:0px;left:0px;" class="case"></div>
<div style="top:0px;left:102px;" class="case"></div> <div style="top:0px;left:102px;" class="case"></div>
<div style="top:0px;left:204px;" class="case"></div> <div style="top:0px;left:204px;" class="case"></div>
<div style="top:0px;left:306px;" class="case"></div> <div style="top:0px;left:306px;" class="case"></div>
</div> </div>
<div class="ligne"> <div class="ligne">
<div style="top:102px;left:0px;" class="case"></div> <div style="top:102px;left:0px;" class="case"></div>
<div style="top:102px;left:102px;" class="case"></div> <div style="top:102px;left:102px;" class="case"></div>
<div style="top:102px;left:204px;" class="case"></div> <div style="top:102px;left:204px;" class="case"></div>
<div style="top:102px;left:306px;" class="case"></div> <div style="top:102px;left:306px;" class="case"></div>
</div> </div>
<div class="ligne"> <div class="ligne">
<div style="top:204px;left:0px;" class="case"></div> <div style="top:204px;left:0px;" class="case"></div>
<div style="top:204px;left:102px;" class="case"></div> <div style="top:204px;left:102px;" class="case"></div>
<div style="top:204px;left:204px;" class="case"></div> <div style="top:204px;left:204px;" class="case"></div>
<div style="top:204px;left:306px;" class="case"></div> <div style="top:204px;left:306px;" class="case"></div>
</div> </div>
<div class="ligne"> <div class="ligne">
<div style="top:306px;left:0px;" class="case"></div> <div style="top:306px;left:0px;" class="case"></div>
<div style="top:306px;left:102px;" class="case"></div> <div style="top:306px;left:102px;" class="case"></div>
<div style="top:306px;left:204px;" class="case"></div> <div style="top:306px;left:204px;" class="case"></div>
<div style="top:306px;left:306px;" class="case"></div> <div style="top:306px;left:306px;" class="case"></div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

64
2019-2020/index.php Normal file
View File

@ -0,0 +1,64 @@
<?php
$dirT = getcwd();
$dir = basename(($dirT));
?>
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title><?php echo "Displaying content of " .$dir?></title>
<link href="https://www.junkjumper-projects.com/images/ls/css/bootstrap.min.css" rel="stylesheet">
<link href="https://www.junkjumper-projects.com/images/ls/css/sticky-menu.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<a class="navbar-brand page-scroll" href="">Pauline's M413 Web Folder</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
</ul>
</div> <!-- .navbar-collapse -->
</div> <!-- .container -->
</nav>
<!-- Welcome -->
<section id="welcome" class="welcome-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="https://www.junkjumper-projects.com/images/ls/img/banner.png" alt="content" id="h2" />
<br />
<?php
$path = ".";
$dh = opendir($path);
$i=1;
while (($file = readdir($dh)) !== false) {
if($file != "." && $file != ".." && $file != "index.php" && $file != ".htaccess" && $file != "error_log" && $file != "src" && $file != ".git" && $file != "LICENSE.md" && $file != "README.md" && $file != "cgi-bin" && $file != ".gitignore") {
if (filetype($file) == "dir")
{
echo "<a href='$path/$file' class='ls-s'><img src='./src/folder.png' alt='folder' class='icon' />$file</a><br />";
} else {
echo "<a href='$path/$file' class='ls-s'><img src='./src/file.png' alt='folder' class='icon' />$file</a><br />";
}
$i++;
}
}
closedir($dh);
?>
</div>
</div>
</div>
</section>
</body>
</html>

BIN
2019-2020/src/banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
2019-2020/src/file.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

BIN
2019-2020/src/folder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

BIN
2019-2020/src/umming_lines_paint.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 570 KiB

BIN
2020-2021/TD1/M413-TD1-v1.7.pdf Normal file
View File

Binary file not shown.

87
2020-2021/TD1/README.md Normal file
View File

@ -0,0 +1,87 @@
# M413 - TD1 : Réponses aux Questions
## Exercice 1
### La propriété document.title
#### defineHeading1()
> Quel sera l’évènement qui déclenchera l’appelle de votre fonction ?
C'est l'évènnement ``init()`` qui se charge d'appeler ma fonction ``defineHeading1()``.
> Quelle méthode avez-vous utilisée pour récupérer l’objet représentant votre balise h1 ?
J'ai utilisé la méthode ``document.getElementById()`` pour récupérer le titre.
> Quelle propriété de l’objet représentant votre balise h1 avez-vous utilisée pour récupérer le texte de celui-ci ?
J'ai utilisé le ``innerText`` de l'objet.
#### defineHeading2()
> Quelle(s) méthode(s) avez-vous utilisée pour récupérer l’objet représentant votre balise h2 ?
J'ai utilisé ``document.getElementsByTagName`` que j'ai affecté à une variable nommée ``firstH2``. Puis je l'ai utilisée avec son attribut ``innerText``.
#### defineHeading3()
> Comment faire pour connaitre le nombre de balise h2 du document ?
On utilise la propriété ``.lenght`` pour connaitre le nombre de balises h2 du document.
#### defineHeading4()
> Quelle méthode avez-vous utilisée pour récupérer l’objet de votre classe ?
J'ai utilisé ``document.getElementsByClassName`` que j'ai affecté à une variable nommée ``choosenH``. Puis je l'ai utilisée avec son attribut ``innerText``.
> Quant est-il avec Internet Explorer ?
La page ne s'affiche pas
> Comment avez-vous déterminé si un nombre est pair ?
Avec un modulo 2.
### Les propriétés innerHTML, innerText, outerHTML, outerText et textContent
#### invertText()
> Quelles différences existe-t-il entre les 5 propriétés de cette section ?
``InnerHTML`` conserve les balises "pures" du HTML alors que ``InnerText`` ne garde que le texte.
> Y a-t-il une différence avec Internet Explore, FireFox et d’autres navigateurs à votre disposition concernant ces
propriétés ?
Oui, chaque navigateur a sa propre méthode de rendu.
### La propriété document.lastModified
> Comment modifier votre code pour qu’il permette de sélectionner le 1 er auteur de la liste ?
J'ai mis la balise auteur en premier.
J'ai fait une méthode qui utilise un switch case pour changer le mois et le jour du numéro par le texte mais j'aurai pu aussi faire un tableau et apperler une méthode ``jour[numeroJour]``.
## Exercice 2 - L'objet Date :
J'avais commencé à écrire deux petites condition en if/else mais une autre solution me semble plus simple :
```js
var now = new Date();
var selectedDay = new Date('2020-7-19');
var diffD = selectedDay.getDate - now.getDate;
var diffM = selectedDay.getMonth - now.getMonth;
if (diffM % 2 == 0) { //on regarde s'il y a un nombre pair de mois
diffM = (diffM * 30) + (diffM / 2);
} else { //si nombre impair de mois
diffM = ((diffM * 30) + (diffM / 2)) + 1;
}
if ((now.getMonth == 2) || (selectedDay.getMonth == 2)) { //la on va voir si on passe par févrirer pour faire la comparaison
diffM = diffM - 2; //si il y a février, on retire deux jours
}```

BIN
2020-2021/TD1/assets/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
2020-2021/TD1/assets/images/0.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 999 B

BIN
2020-2021/TD1/assets/images/1.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 936 B

BIN
2020-2021/TD1/assets/images/2.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 996 B

BIN
2020-2021/TD1/assets/images/3.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1005 B

BIN
2020-2021/TD1/assets/images/4.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 979 B

BIN
2020-2021/TD1/assets/images/5.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1002 B

BIN
2020-2021/TD1/assets/images/6.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1011 B

BIN
2020-2021/TD1/assets/images/7.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 962 B

BIN
2020-2021/TD1/assets/images/8.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1012 B

BIN
2020-2021/TD1/assets/images/9.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1020 B

BIN
2020-2021/TD1/assets/images/minus.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 851 B

BIN
2020-2021/TD1/assets/images/plus.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 856 B

7
2020-2021/TD1/css/td1.css Normal file
View File

@ -0,0 +1,7 @@
.firstOrLast {
color: red;
}
span {
color: #090;
}

57
2020-2021/TD1/index.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta name='author' content="JunkJumper" />
<meta charset='utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>M4103 - Programmation Web Client Riche - TD1</title>
<meta name='viewport' content='width=device-width, initial-scale=1' />
<meta name="description" content="Page TD1 M413" />
<meta name="keywords" content="JavaScript, TD1" />
<link href="assets/favicon.ico" rel="icon" type="image/x-icon" />
<link rel='stylesheet' type='text/css' media='screen' href='./css/td1.css'>
<script defer="defer" src='./js/td1.js'></script>
<p>Comme pour tous les autres td, les réponses aux questions sont disponibles <strong><a href="https://github.com/JunkJumper/M4103-Programmation-Web-Client-Riche/tree/master/2019-2020/TD1" target="_blank">ICI</a></strong> !</p>
</head>
<body onload="onLoad();">
<h1 id="title" class="firstOrLast">Exercice <span>1</span></h1>
<div>
<p>Mane 6 : ce sont les six personnages principaux de la série My Little Pony Friendship is Magic</p>
</div>
<h2>Applejack</h2>
<div>
<p<>Poney terrestre de nature <strong>honnête et travailleuse</strong> elle travaille dans la « Sweet Apple Acres » avec le reste de la famille Apple.</p>
</div>
<h3 class="firstOrLast">Rainbow Dash</h3>
<p>Pégase de nature fière et sportive, elle est en charge de la gestion de la météo de Ponyville.</p>
<h2 class="firstOrLast">Twilight Sparkle</h2>
<p>Licorne de nature intellectuelle et réfléchie, elle est l’élève de la Princesse Celestia. Elle est chargée d’apprendre le plus possible en ce qui concerne l’amitié.</p>
<h3>Rarity</h3>
<p>Licorne de nature généreuse, elle travaille à la fois comme créatrice de mode et comme couturière dans sa propre boutique de Ponyville, la Boutique Carrousel.</p>
<h3>Fluttershy</h3>
<p>Pégase de nature timide et réservée, elle s’occupe des animaux dans son chalet qui lui sert également de résidence principale.</p>
<h3>Pinkie Pie</h3>
<p>Poney terrestre de nature joyeuse et souriante qui adore faire la fête, elle travaille au Sugar Cube Corner en préparant des gâteaux pour les habitants de Ponyville.</p>
<div>
<p id="1">Luna ne <span>fait pas partie</span> du mane 6 mais est très symaptique aussi :D</p>
</div>
<div>
<p id="2">Luna <span>est drôle</span> bien qu'elle dise le contraire.</p>
</div>
<button type="button" onclick="invertText()">Boop !</button><br /><br />
<div id="date_modif"></div>
<p onClick="majNbJours()">Il reste
<strong id="deadline">X</strong> jours avant le 19 juillet 2021 (un jour normal à Équestria).</p>
</body>
</html>

188
2020-2021/TD1/js/td1.js Normal file
View File

@ -0,0 +1,188 @@
'use strict';
// M413 - TD1
let message = 'JavaScript is ok :)';
// alert( message);
console.log(message);
function onLoad() { /* À vous de choisir quel titre définir ici :D */
console.log('In onLoad() function…');
sayHello();
//defineHeading1();
defineHeading2();
//defineHeading3();
//defineHeading4();
// Your JavaScript code goes here !
}
function sayHello() { /**Cette méthode permet de vérifier que la console de log est activée. **/
console.log("Hello Everypony !");
}
function defineHeading1() { /**Cette méthode permet de forcer letitre de la page avec le contenu de la balise dont l'id est titre **/
if (document.title = document.getElementById("title").innerText) {
console.log("<title> set as : 'Exercice 1' !");
}
}
function defineHeading2() { /**Cette méthode permet de forcer letitre de la page avec le contenu de la première balise H2 **/
var firstH2 = document.getElementsByTagName("h2");
if (firstH2 != null) {
document.title = firstH2[0].innerText;
console.log("<title> set : Ok Everypony !");
}
}
function defineHeading3() { /**Cette méthode permet de forcer letitre de la page avec le contenu de la dernière balise H2 ou avec le nom de l'auteur si il n'y a pas de balises H2**/
var lastH2 = document.getElementsByTagName("h2");
if (lastH2 != null) {
document.title = lastH2[lastH2.length - 1].innerText;
console.log("<title> set : Ok Everypony !");
} else {
document.title = "Page par Pauline Célestiale";
console.warn("There is no H2 tag on this page Everypony ! /:")
}
}
function defineHeading4() { /**Cette méthode permet de forcer letitre de la page avec le contenu de la dernière balise H3 si il y a un nombre impair de H3, avec la première balise H3 si il y en a un nombre pair ou avec le nom de l'auteur si il n'y a pas de balises H2**/
var choosenH = document.getElementsByClassName("firstOrLast");
if (choosenH != null) {
if (choosenH.length % 2 == 0) {
document.title = choosenH[0].innerText;
console.log("<title> set first H : Ok Everypony !");
} else {
document.title = choosenH[choosenH.length - 1].innerText;
console.log("<title> set last H : Ok Everypony !");
}
} else {
document.title = "Page par Pauline Célestiale";
console.warn("There is no H2 tag on this page Everypony ! /:")
}
}
function invertText() { /**Cette fonction inverses deux lignes entre elles **/
var buffer;
var un = document.getElementById("1"); //C'est la première ligne que l'on veux inverser
var deux = document.getElementById("2"); // C'est la deuxième ligne que l'on veut inverser
buffer = un.innerText; //on garde en mémoire la ligne 1
un.innerText = deux.innerText; //on affecte le contenu de la ligne 2 à la ligne 1
deux.innerText = buffer; //on affecte le contenu de la ligne 1 à la ligne 2 via ce que l'on a stocké dans le buffer
}
function datemodif() {
var now = new Date();
var dN = now.getDay(); //dN for Day Name
var d = now.getDate(); //d for Day
var m = now.getMonth(); //m for Month
var y = now.getFullYear(); // y for Year
var laDate = d2S(dN) + " " + d + " " + m2S(m) + " " + y; //on concatène le String au complet.
var lastauthor = document.getElementsByTagName("meta"); //on va chercher les eta et on gardera que le dernier
var setModifSentence = ""; //on initialise la variable
var div2change = document.getElementById("date_modif"); //la balise div vide en fin de page.
if (lastauthor != null) {
setModifSentence = setModifSentence + "Document modifié le " + laDate + " par " + lastauthor[0].content; // on botient la phrase finale
}
//console.log(setModifSentence);
div2change.innerText = setModifSentence; //on affiche la date au complet
}
function majNbJours() {
var now = new Date();
var selectedDay = new Date(2021, 7, 19);
var msNow = now.getTime;
var msSelectedDay = selectedDay.getTime;
var diff = (msSelectedDay - msNow) / (24 * 1000 * 3600); //24h, 1000 ms = 1 s, 3600s = 1h
console.log(msNow);
console.log(msSelectedDay);
console.log(diff);
var text2replace = document.getElementById("deadline");
text2replace.innerHTML = diff;
}
function d2S(d) { //renvoi le nom du jour au lieu du chiffre
switch (d) {
case 0:
return "dimanche";
break;
case 1:
return "lundi";
break;
case 2:
return "mardi"
break;
case 3:
return "mercredi"
break;
case 4:
return "jeudi"
break;
case 5:
return "vendredi"
break;
case 6:
return "samedi"
break;
default:
break;
}
}
function m2S(m) { //renvoi le nom du mois au lieu du chiffre
switch (m) {
case 0:
return "janvier";
break;
case 1:
return "février";
break;
case 2:
return "mars"
break;
case 3:
return "avril"
break;
case 4:
return "mai"
break;
case 5:
return "juin"
break;
case 6:
return "juillet"
break;
case 7:
return "août"
break;
case 8:
return "septembre"
break;
case 9:
return "octobre"
break;
case 10:
return "novembre"
break;
case 11:
return "décembre"
break;
default:
break;
}
}

64
2020-2021/index.php Normal file
View File

@ -0,0 +1,64 @@
<?php
$dirT = getcwd();
$dir = basename(($dirT));
?>
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title><?php echo "Displaying content of " .$dir?></title>
<link href="https://www.junkjumper-projects.com/images/ls/css/bootstrap.min.css" rel="stylesheet">
<link href="https://www.junkjumper-projects.com/images/ls/css/sticky-menu.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<a class="navbar-brand page-scroll" href="">Pauline's M413 Web Folder</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
</ul>
</div> <!-- .navbar-collapse -->
</div> <!-- .container -->
</nav>
<!-- Welcome -->
<section id="welcome" class="welcome-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="https://www.junkjumper-projects.com/images/ls/img/banner.png" alt="content" id="h2" />
<br />
<?php
$path = ".";
$dh = opendir($path);
$i=1;
while (($file = readdir($dh)) !== false) {
if($file != "." && $file != ".." && $file != "index.php" && $file != ".htaccess" && $file != "error_log" && $file != "src" && $file != ".git" && $file != "LICENSE.md" && $file != "README.md" && $file != "cgi-bin" && $file != ".gitignore") {
if (filetype($file) == "dir")
{
echo "<a href='$path/$file' class='ls-s'><img src='./src/folder.png' alt='folder' class='icon' />$file</a><br />";
} else {
echo "<a href='$path/$file' class='ls-s'><img src='./src/file.png' alt='folder' class='icon' />$file</a><br />";
}
$i++;
}
}
closedir($dh);
?>
</div>
</div>
</div>
</section>
</body>
</html>

BIN
2020-2021/src/banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
2020-2021/src/file.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

BIN
2020-2021/src/folder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

BIN
2020-2021/src/umming_lines_paint.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 570 KiB

2
README.md
View File

@ -1,4 +1,4 @@
# M4103-Programmation-Web-Client-Riche # M4103-Programmation-Web-Client-Riche
M4103–Programmation-Web-Client-Riche M4103–Programmation-Web-Client-Riche
[https://junkjumper.github.io/M4103-Programmation-Web-Client-Riche](https://junkjumper.github.io/M4103-Programmation-Web-Client-Riche) https://2019-2020-iut.github.io/M413-Programmation-Web-Client-Riche/

501
TD1/reponseTD1.html
View File

File diff suppressed because one or more lines are too long

3
css/main.css
View File

@ -1,3 +0,0 @@
h1, h2, ul {
text-align: center;
}

23
index.html
View File

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>M4103 - Programmation Web Client Riche</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='./css/main.css'>
<script src='./main.js'></script>
<h1>M4103 - Programmation Web Client Riche</h1>
<h2>Sommaire des TD</h2>
</head>
<body>
<ul>
<li><a href="./TD1/">TD1</a></li>
<li><a href="./TD2/">TD2</a></li>
<li><a href="./TD3/">TD3</a></li>
</ul>
</body>
</html>

64
index.php Normal file
View File

@ -0,0 +1,64 @@
<?php
$dirT = getcwd();
$dir = basename(($dirT));
?>
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title><?php echo "Displaying content of " .$dir?></title>
<link href="https://www.junkjumper-projects.com/images/ls/css/bootstrap.min.css" rel="stylesheet">
<link href="https://www.junkjumper-projects.com/images/ls/css/sticky-menu.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<a class="navbar-brand page-scroll" href="">Pauline's M413 Web Folder</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
</ul>
</div> <!-- .navbar-collapse -->
</div> <!-- .container -->
</nav>
<!-- Welcome -->
<section id="welcome" class="welcome-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="https://www.junkjumper-projects.com/images/ls/img/banner.png" alt="content" id="h2" />
<br />
<?php
$path = ".";
$dh = opendir($path);
$i=1;
while (($file = readdir($dh)) !== false) {
if($file != "." && $file != ".." && $file != "index.php" && $file != ".htaccess" && $file != "error_log" && $file != "src" && $file != ".git" && $file != "LICENSE.md" && $file != "README.md" && $file != "cgi-bin" && $file != ".gitignore") {
if (filetype($file) == "dir")
{
echo "<a href='$path/$file' class='ls-s'><img src='./src/folder.png' alt='folder' class='icon' />$file</a><br />";
} else {
echo "<a href='$path/$file' class='ls-s'><img src='./src/file.png' alt='folder' class='icon' />$file</a><br />";
}
$i++;
}
}
closedir($dh);
?>
</div>
</div>
</div>
</section>
</body>
</html>

0
js/main.js
View File

BIN
src/banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
src/file.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

BIN
src/folder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

BIN
src/umming_lines_paint.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 570 KiB