diff --git a/TD1/M4103 TP1.pdf b/2019-2020/TD1/M4103 TP1.pdf similarity index 100% rename from TD1/M4103 TP1.pdf rename to 2019-2020/TD1/M4103 TP1.pdf diff --git a/TD1/README.MD b/2019-2020/TD1/README.MD similarity index 97% rename from TD1/README.MD rename to 2019-2020/TD1/README.MD index ac06ef5..b7cade4 100644 --- a/TD1/README.MD +++ b/2019-2020/TD1/README.MD @@ -1,88 +1,88 @@ -# Programmation Web – client riche - TD1 - -## Exercice 1 - -### La propriété document.title - -#### defTitre1() - -> 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()``. - -> 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. - -#### defTitre2() - -> 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``. - -#### defTitre3() - -> 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. - -#### defTitre4() - -> 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 - }``` - +# Programmation Web – client riche - TD1 + +## Exercice 1 + +### La propriété document.title + +#### defTitre1() + +> 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()``. + +> 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. + +#### defTitre2() + +> 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``. + +#### defTitre3() + +> 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. + +#### defTitre4() + +> 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 + }``` + diff --git a/TD1/[S4T][JS][G3][TD1]SrifiJose.pdf b/2019-2020/TD1/[S4T][JS][G3][TD1]SrifiPauline.pdf similarity index 100% rename from TD1/[S4T][JS][G3][TD1]SrifiJose.pdf rename to 2019-2020/TD1/[S4T][JS][G3][TD1]SrifiPauline.pdf diff --git a/TD1/css/main.css b/2019-2020/TD1/css/main.css similarity index 84% rename from TD1/css/main.css rename to 2019-2020/TD1/css/main.css index c0cd752..f74c98e 100644 --- a/TD1/css/main.css +++ b/2019-2020/TD1/css/main.css @@ -1,10 +1,10 @@ -.firstOrLast{ - color: red; -} -span{ - color: #090; -} - - - - +.firstOrLast{ + color: red; +} +span{ + color: #090; +} + + + + diff --git a/TD1/index.html b/2019-2020/TD1/index.html similarity index 97% rename from TD1/index.html rename to 2019-2020/TD1/index.html index 848ab09..6c4c0d2 100644 --- a/TD1/index.html +++ b/2019-2020/TD1/index.html @@ -1,56 +1,56 @@ - - - - - - - - M4103 - Programmation Web Client Riche - TD1 - - - - - -

Comme pour tous les autres td, les réponses aux questions sont disponibles ICI !

- - - -

Exercice 1

-
-

Mane 6 : ce sont les six personnages principaux de la série My Little Pony Friendship is Magic

-
- -

Applejack

-
- Poney terrestre de nature honnête et travailleuse elle travaille dans la « Sweet Apple Acres » avec le reste de la famille Apple.

-
- -

Rainbow Dash

-

Pégase de nature fière et sportive, elle est en charge de la gestion de la météo de Ponyville.

- -

Twilight Sparkle

-

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é.

- -

Rarity

-

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.

- -

Fluttershy

-

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.

- -

Pinkie Pie

-

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.

- -
-

Luna ne fait pas partie du mane 6 mais est très symaptique aussi :D

-
-
-

Luna est drôle bien qu'elle dise le contraire.

-
-

- -
-

Il reste - X jours avant le 19 juillet 2020 (un jour normal à Équestria).

- - + + + + + + + + M4103 - Programmation Web Client Riche - TD1 + + + + + +

Comme pour tous les autres td, les réponses aux questions sont disponibles ICI !

+ + + +

Exercice 1

+
+

Mane 6 : ce sont les six personnages principaux de la série My Little Pony Friendship is Magic

+
+ +

Applejack

+
+ Poney terrestre de nature honnête et travailleuse elle travaille dans la « Sweet Apple Acres » avec le reste de la famille Apple.

+
+ +

Rainbow Dash

+

Pégase de nature fière et sportive, elle est en charge de la gestion de la météo de Ponyville.

+ +

Twilight Sparkle

+

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é.

+ +

Rarity

+

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.

+ +

Fluttershy

+

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.

+ +

Pinkie Pie

+

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.

+ +
+

Luna ne fait pas partie du mane 6 mais est très symaptique aussi :D

+
+
+

Luna est drôle bien qu'elle dise le contraire.

+
+

+ +
+

Il reste + X jours avant le 19 juillet 2020 (un jour normal à Équestria).

+ + \ No newline at end of file diff --git a/TD1/js/main.js b/2019-2020/TD1/js/main.js similarity index 96% rename from TD1/js/main.js rename to 2019-2020/TD1/js/main.js index 049fd85..45a845f 100644 --- a/TD1/js/main.js +++ b/2019-2020/TD1/js/main.js @@ -1,185 +1,185 @@ -console.log("JavaScript is linked"); /**Cette méthode permet de vérifier que Javascript est bien activé **/ - - - -function init() { - sayHello(); - //defTitre1(); - //defTitre2(); - //defTitre3(); - defTitre4(); - datemodif(); - -} - -function sayHello() { /**Cette méthode permet de vérifier que la console de log est activée. **/ - 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 **/ - if (document.title = document.getElementById("titre").innerText) { - console.log(" set : Ok Everypony !"); - } -} - -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"); - if (firstH2 != null) { - document.title = firstH2[0].innerText; - 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**/ - 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 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"); - 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('2020-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; - } +console.log("JavaScript is linked"); /**Cette méthode permet de vérifier que Javascript est bien activé **/ + + + +function init() { + sayHello(); + //defTitre1(); + //defTitre2(); + //defTitre3(); + defTitre4(); + datemodif(); + +} + +function sayHello() { /**Cette méthode permet de vérifier que la console de log est activée. **/ + 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 **/ + if (document.title = document.getElementById("titre").innerText) { + 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 **/ + var firstH2 = document.getElementsByTagName("h2"); + if (firstH2 != null) { + document.title = firstH2[0].innerText; + 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**/ + 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 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"); + 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('2020-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; + } } \ No newline at end of file diff --git a/TD2/README.MD b/2019-2020/TD2/README.MD similarity index 98% rename from TD2/README.MD rename to 2019-2020/TD2/README.MD index f97be8e..ae8a06b 100644 --- a/TD2/README.MD +++ b/2019-2020/TD2/README.MD @@ -1,11 +1,11 @@ -# Programmation Web – client riche - TD2 - -## Exercice 1 - -> 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)``. - -> 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. +# Programmation Web – client riche - TD2 + +## Exercice 1 + +> 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)``. + +> 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. diff --git a/TD2/TP2_JS_M413_2016.pdf b/2019-2020/TD2/TP2_JS_M413_2016.pdf similarity index 100% rename from TD2/TP2_JS_M413_2016.pdf rename to 2019-2020/TD2/TP2_JS_M413_2016.pdf diff --git a/TD2/[S4T][JS][G3][TD2]SrifiJose.pdf b/2019-2020/TD2/[S4T][JS][G3][TD2]SrifiPauline.pdf similarity index 100% rename from TD2/[S4T][JS][G3][TD2]SrifiJose.pdf rename to 2019-2020/TD2/[S4T][JS][G3][TD2]SrifiPauline.pdf diff --git a/TD2/css/main.css b/2019-2020/TD2/css/main.css similarity index 92% rename from TD2/css/main.css rename to 2019-2020/TD2/css/main.css index 64f3388..a2dd41f 100644 --- a/TD2/css/main.css +++ b/2019-2020/TD2/css/main.css @@ -1,49 +1,49 @@ -body { - font-family: serif; -} - -h1, -h2, -h3 { - font-family: sans-serif; -} - -h1 { - background-color: #def; - padding: 10px; - margin-left: 10px; -} - -h2 { - background-color: #abc; - padding: 10px; - margin-left: 60px; -} - -h3 { - background-color: #789; - padding: 10px; - margin-left: 110px; -} - -div { - background-color: #ddd; - padding: 20px; - margin-left: 110px; -} - -p { - background-color: #eee; - padding: 20px; -} - -.red { - background-color: rgb(184, 12, 40); -} - -#imgMelou, -#butMelou { - display: block; - margin-left: auto; - margin-right: auto; +body { + font-family: serif; +} + +h1, +h2, +h3 { + font-family: sans-serif; +} + +h1 { + background-color: #def; + padding: 10px; + margin-left: 10px; +} + +h2 { + background-color: #abc; + padding: 10px; + margin-left: 60px; +} + +h3 { + background-color: #789; + padding: 10px; + margin-left: 110px; +} + +div { + background-color: #ddd; + padding: 20px; + margin-left: 110px; +} + +p { + background-color: #eee; + padding: 20px; +} + +.red { + background-color: rgb(184, 12, 40); +} + +#imgMelou, +#butMelou { + display: block; + margin-left: auto; + margin-right: auto; } \ No newline at end of file diff --git a/TD2/img/melou.jpeg b/2019-2020/TD2/img/melou.jpeg similarity index 100% rename from TD2/img/melou.jpeg rename to 2019-2020/TD2/img/melou.jpeg diff --git a/TD2/index.html b/2019-2020/TD2/index.html similarity index 97% rename from TD2/index.html rename to 2019-2020/TD2/index.html index 7ae0a7e..6fc6436 100644 --- a/TD2/index.html +++ b/2019-2020/TD2/index.html @@ -1,54 +1,54 @@ -<!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 - - - - - -

Comme pour tous les autres td, les réponses aux questions sont disponibles ICI !

- - - -

Pierre Lees-Melou

-

Courte présentation

-
-

Pierre Lees-Melou, est un footballeur français. Il évolue au poste de milieu offensif à l'OGC Nice.

- melou -
- -

Son parcours et ses stats

- -
-

Voici les clubs par lequel notre numéro 8 du gym est passé

- - - -

Il a marqué en pro par saison :

- - -
- - -

Son dernier but

-
- - + + + + + + + + M4103 - Programmation Web Client Riche - TD1 + + + + + +

Comme pour tous les autres td, les réponses aux questions sont disponibles ICI !

+ + + +

Pierre Lees-Melou

+

Courte présentation

+
+

Pierre Lees-Melou, est un footballeur français. Il évolue au poste de milieu offensif à l'OGC Nice.

+ melou +
+ +

Son parcours et ses stats

+ +
+

Voici les clubs par lequel notre numéro 8 du gym est passé

+ + + +

Il a marqué en pro par saison :

+ + +
+ + +

Son dernier but

+
+ + \ No newline at end of file diff --git a/TD2/js/main.js b/2019-2020/TD2/js/main.js similarity index 97% rename from TD2/js/main.js rename to 2019-2020/TD2/js/main.js index 2a75c80..0c16015 100644 --- a/TD2/js/main.js +++ b/2019-2020/TD2/js/main.js @@ -1,33 +1,33 @@ -console.log("JavaScript is linked"); /**Cette méthode permet de vérifier que Javascript est bien activé **/ - -function init() { - sayHello(); - document.body.addEventListener("click", selection); //vérification que le listener est ok - ajoutDiv(); -} - -function sayHello() { /**Cette méthode permet de vérifier que la console de log est activée. **/ - console.log("Bevengutti Nissart ! !"); -} - -function initSelection() { - sayHello(); -} - -function selection(event) { - console.log(event.target.tagName); //cela indique quel balise est sélectionnée par le click - var element = event.target; - element.classList.toggle("red"); - -} - -function ajoutDiv() { - var div = document.createElement("div"); - div.setAttribute("id", "divAinserer"); - document.body.insertBefore(div, document.body.firstChild); - document.getElementById("divAinserer").innerHTML = "" + - "" + - "" + - "" + - ""; +console.log("JavaScript is linked"); /**Cette méthode permet de vérifier que Javascript est bien activé **/ + +function init() { + sayHello(); + document.body.addEventListener("click", selection); //vérification que le listener est ok + ajoutDiv(); +} + +function sayHello() { /**Cette méthode permet de vérifier que la console de log est activée. **/ + console.log("Bevengutti Nissart ! !"); +} + +function initSelection() { + sayHello(); +} + +function selection(event) { + console.log(event.target.tagName); //cela indique quel balise est sélectionnée par le click + var element = event.target; + element.classList.toggle("red"); + +} + +function ajoutDiv() { + var div = document.createElement("div"); + div.setAttribute("id", "divAinserer"); + document.body.insertBefore(div, document.body.firstChild); + document.getElementById("divAinserer").innerHTML = "" + + "" + + "" + + "" + + ""; } \ No newline at end of file diff --git a/TD3/README.MD b/2019-2020/TD3/README.MD similarity index 97% rename from TD3/README.MD rename to 2019-2020/TD3/README.MD index 90b95dd..563502d 100644 --- a/TD3/README.MD +++ b/2019-2020/TD3/README.MD @@ -1,5 +1,5 @@ -# Programmation Web – client riche - TD3 - -## 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. +# Programmation Web – client riche - TD3 + +## 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. diff --git a/TD3/TP3_JS_M413_2016.pdf b/2019-2020/TD3/TP3_JS_M413_2016.pdf similarity index 100% rename from TD3/TP3_JS_M413_2016.pdf rename to 2019-2020/TD3/TP3_JS_M413_2016.pdf diff --git a/TD3/css/td3-exo1.css b/2019-2020/TD3/css/td3-exo1.css similarity index 93% rename from TD3/css/td3-exo1.css rename to 2019-2020/TD3/css/td3-exo1.css index fcdffdc..5c9a791 100644 --- a/TD3/css/td3-exo1.css +++ b/2019-2020/TD3/css/td3-exo1.css @@ -1,43 +1,43 @@ -html { - font-size: 62.5%; -} -body { - margin: 0px; - padding: 0px; -} -#jeu { - border-style:solid; - border-width:1px; - background-color:#00008B; - margin:0px; - width: 306px; - height:306px; - position: absolute; -} -.case { - border-style:solid; - border-width:1px; - background-color:#1E90FF; - margin:0px; - padding: 0px; - width: 100px; - height:100px; - position: absolute; - z-index:1; - transition-property : top, left; - transition-duration : 1s; -} -div{ - padding:0px; -} -h1{ - text-align: center; - font-size: 4rem; - margin:0; - padding: 27px 0px; -} -.vide { - background-color:#00008B; - z-index:0; - border:none +html { + font-size: 62.5%; +} +body { + margin: 0px; + padding: 0px; +} +#jeu { + border-style:solid; + border-width:1px; + background-color:#00008B; + margin:0px; + width: 306px; + height:306px; + position: absolute; +} +.case { + border-style:solid; + border-width:1px; + background-color:#1E90FF; + margin:0px; + padding: 0px; + width: 100px; + height:100px; + position: absolute; + z-index:1; + transition-property : top, left; + transition-duration : 1s; +} +div{ + padding:0px; +} +h1{ + text-align: center; + font-size: 4rem; + margin:0; + padding: 27px 0px; +} +.vide { + background-color:#00008B; + z-index:0; + border:none } \ No newline at end of file diff --git a/TD3/css/td3-exo2.css b/2019-2020/TD3/css/td3-exo2.css similarity index 94% rename from TD3/css/td3-exo2.css rename to 2019-2020/TD3/css/td3-exo2.css index e5e561c..aba65fe 100644 --- a/TD3/css/td3-exo2.css +++ b/2019-2020/TD3/css/td3-exo2.css @@ -1,40 +1,40 @@ -html { font-size: 62.5%; } -body { margin: 0px; padding: 0px; color : black} -#jeu { - border-style:solid; - border-width:1px; - background-color:#00008B; - margin:0px; - width: 408px; - height:408px; -} - -#commande { - margin:0px; - height:30px; - position: absolute; - left : 410px; - top: 0px; -} -.case { - border-style:solid; - border-width:1px; - border-color:black; - background-color:#1E90FF; - margin:0px; - padding: 0px; - width: 100px; - height:100px; - position: absolute; - z-index:1; - transition-property : top, left; - transition-duration : 1s; - text-align: center; - font-size: 4rem; - line-height: 100px; -} -.new { - color : red; -} - +html { font-size: 62.5%; } +body { margin: 0px; padding: 0px; color : black} +#jeu { + border-style:solid; + border-width:1px; + background-color:#00008B; + margin:0px; + width: 408px; + height:408px; +} + +#commande { + margin:0px; + height:30px; + position: absolute; + left : 410px; + top: 0px; +} +.case { + border-style:solid; + border-width:1px; + border-color:black; + background-color:#1E90FF; + margin:0px; + padding: 0px; + width: 100px; + height:100px; + position: absolute; + z-index:1; + transition-property : top, left; + transition-duration : 1s; + text-align: center; + font-size: 4rem; + line-height: 100px; +} +.new { + color : red; +} + .videold { background-color:#00008B; z-index:0; border:none} \ No newline at end of file diff --git a/TD3/index.html b/2019-2020/TD3/index.html similarity index 96% rename from TD3/index.html rename to 2019-2020/TD3/index.html index aaf06e2..ffd7f34 100644 --- a/TD3/index.html +++ b/2019-2020/TD3/index.html @@ -1,21 +1,21 @@ - - - - - - - M4103 - Programmation Web Client Riche - - -

M4103 - Programmation Web Client Riche

-

Sommaire TD3

- - - - - - + + + + + + + M4103 - Programmation Web Client Riche + + +

M4103 - Programmation Web Client Riche

+

Sommaire TD3

+ + + + + + \ No newline at end of file diff --git a/TD3/js/td3-exo1.js b/2019-2020/TD3/js/td3-exo1.js similarity index 96% rename from TD3/js/td3-exo1.js rename to 2019-2020/TD3/js/td3-exo1.js index d574b6c..99d2a92 100644 --- a/TD3/js/td3-exo1.js +++ b/2019-2020/TD3/js/td3-exo1.js @@ -1,29 +1,29 @@ -console.log("Chargement..."); - - -function init() { - console.log("Initialisation..."); - var div = document.querySelectorAll(".case"); - - for (var i = 0; i < div.length; i++) { - div[i].addEventListener("click", selection); - } - -} - -function selection(event) { - - var maCase = event.currentTarget; - var vide = document.body.querySelector(".case.vide"); - - if ((maCase.offsetTop == vide.offsetTop && Math.abs(maCase.offsetLeft - vide.offsetLeft) == 102) || - (maCase.offsetLeft == vide.offsetLeft && Math.abs(maCase.offsetTop - vide.offsetTop) == 102)) { - console.log("Déplacement effectué !"); - maCase.className = "case vide"; - var buff = maCase.innerHTML; - maCase.innerHTML = ""; - vide.className = "case"; - vide.innerHTML = buff; - } - var e = event.target; +console.log("Chargement..."); + + +function init() { + console.log("Initialisation..."); + var div = document.querySelectorAll(".case"); + + for (var i = 0; i < div.length; i++) { + div[i].addEventListener("click", selection); + } + +} + +function selection(event) { + + var maCase = event.currentTarget; + var vide = document.body.querySelector(".case.vide"); + + if ((maCase.offsetTop == vide.offsetTop && Math.abs(maCase.offsetLeft - vide.offsetLeft) == 102) || + (maCase.offsetLeft == vide.offsetLeft && Math.abs(maCase.offsetTop - vide.offsetTop) == 102)) { + console.log("Déplacement effectué !"); + maCase.className = "case vide"; + var buff = maCase.innerHTML; + maCase.innerHTML = ""; + vide.className = "case"; + vide.innerHTML = buff; + } + var e = event.target; } \ No newline at end of file diff --git a/TD3/js/td3-exo2.js b/2019-2020/TD3/js/td3-exo2.js similarity index 94% rename from TD3/js/td3-exo2.js rename to 2019-2020/TD3/js/td3-exo2.js index 37341b3..f006a78 100644 --- a/TD3/js/td3-exo2.js +++ b/2019-2020/TD3/js/td3-exo2.js @@ -1,5 +1,5 @@ -console.log("js linkef"); - -function init() { - console.log("init ok"); +console.log("js linkef"); + +function init() { + console.log("init ok"); } \ No newline at end of file diff --git a/TD3/td3-exo1.html b/2019-2020/TD3/td3-exo1.html similarity index 97% rename from TD3/td3-exo1.html rename to 2019-2020/TD3/td3-exo1.html index abfbcc9..59adb25 100644 --- a/TD3/td3-exo1.html +++ b/2019-2020/TD3/td3-exo1.html @@ -1,22 +1,22 @@ - - - - Taquin - - - - - -
-

6

-

1

-

7

-

3

-

4

-

8

-

5

-

2

-

-
- + + + + Taquin + + + + + +
+

6

+

1

+

7

+

3

+

4

+

8

+

5

+

2

+

+
+ \ No newline at end of file diff --git a/TD3/td3-exo2.html b/2019-2020/TD3/td3-exo2.html similarity index 97% rename from TD3/td3-exo2.html rename to 2019-2020/TD3/td3-exo2.html index fd3e33b..82858be 100644 --- a/TD3/td3-exo2.html +++ b/2019-2020/TD3/td3-exo2.html @@ -1,37 +1,37 @@ - - - - Jeu 2048 - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - + + + + Jeu 2048 + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/css/main.css b/2019-2020/css/main.css similarity index 95% rename from css/main.css rename to 2019-2020/css/main.css index 0b0813f..038a21e 100644 --- a/css/main.css +++ b/2019-2020/css/main.css @@ -1,3 +1,3 @@ -h1, h2, ul { - text-align: center; +h1, h2, ul { + text-align: center; } \ No newline at end of file diff --git a/2019-2020/index.php b/2019-2020/index.php new file mode 100644 index 0000000..d2b8e29 --- /dev/null +++ b/2019-2020/index.php @@ -0,0 +1,64 @@ + + + + + + + <?php echo "Displaying content of " .$dir?> + + + + + + +
+
+
+
+ content + + +
+ folder$file
"; + } else { + echo "folder$file
"; + } + + $i++; + } + } + closedir($dh); + ?> +
+
+
+
+ + + diff --git a/js/main.js b/2019-2020/js/main.js similarity index 100% rename from js/main.js rename to 2019-2020/js/main.js diff --git a/2019-2020/src/banner.png b/2019-2020/src/banner.png new file mode 100644 index 0000000..df9dd04 Binary files /dev/null and b/2019-2020/src/banner.png differ diff --git a/2019-2020/src/file.png b/2019-2020/src/file.png new file mode 100644 index 0000000..7d8d354 Binary files /dev/null and b/2019-2020/src/file.png differ diff --git a/2019-2020/src/folder.png b/2019-2020/src/folder.png new file mode 100644 index 0000000..81df3c3 Binary files /dev/null and b/2019-2020/src/folder.png differ diff --git a/2019-2020/src/umming_lines_paint.png b/2019-2020/src/umming_lines_paint.png new file mode 100644 index 0000000..91f3a57 Binary files /dev/null and b/2019-2020/src/umming_lines_paint.png differ diff --git a/2020-2021/index.php b/2020-2021/index.php new file mode 100644 index 0000000..d2b8e29 --- /dev/null +++ b/2020-2021/index.php @@ -0,0 +1,64 @@ + + + + + + + <?php echo "Displaying content of " .$dir?> + + + + + + +
+
+
+
+ content + + +
+ folder$file
"; + } else { + echo "folder$file
"; + } + + $i++; + } + } + closedir($dh); + ?> +
+
+
+
+ + + diff --git a/2020-2021/src/banner.png b/2020-2021/src/banner.png new file mode 100644 index 0000000..df9dd04 Binary files /dev/null and b/2020-2021/src/banner.png differ diff --git a/2020-2021/src/file.png b/2020-2021/src/file.png new file mode 100644 index 0000000..7d8d354 Binary files /dev/null and b/2020-2021/src/file.png differ diff --git a/2020-2021/src/folder.png b/2020-2021/src/folder.png new file mode 100644 index 0000000..81df3c3 Binary files /dev/null and b/2020-2021/src/folder.png differ diff --git a/2020-2021/src/umming_lines_paint.png b/2020-2021/src/umming_lines_paint.png new file mode 100644 index 0000000..91f3a57 Binary files /dev/null and b/2020-2021/src/umming_lines_paint.png differ diff --git a/TD1/reponseTD1.html b/TD1/reponseTD1.html deleted file mode 100644 index c805a82..0000000 --- a/TD1/reponseTD1.html +++ /dev/null @@ -1,501 +0,0 @@ - - - -README.MD - - - - - - - - - - - - -

Programmation Web – client riche - TD1

-

Exercice 1

-

La propriété document.title

-

defTitre1()

-
-

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().

-
-

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.

-

defTitre2()

-
-

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.

-

defTitre3()

-
-

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.

-

defTitre4()

-
-

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 :

-
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 - }``` - -
- - - diff --git a/index.html b/index.html deleted file mode 100644 index 0c772ea..0000000 --- a/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - M4103 - Programmation Web Client Riche - - - -

M4103 - Programmation Web Client Riche

-

Sommaire des TD

- - - - - - - \ No newline at end of file diff --git a/index.php b/index.php new file mode 100644 index 0000000..d2b8e29 --- /dev/null +++ b/index.php @@ -0,0 +1,64 @@ + + + + + + + <?php echo "Displaying content of " .$dir?> + + + + + + +
+
+
+
+ content + + +
+ folder$file
"; + } else { + echo "folder$file
"; + } + + $i++; + } + } + closedir($dh); + ?> +
+
+
+
+ + + diff --git a/src/banner.png b/src/banner.png new file mode 100644 index 0000000..df9dd04 Binary files /dev/null and b/src/banner.png differ diff --git a/src/file.png b/src/file.png new file mode 100644 index 0000000..7d8d354 Binary files /dev/null and b/src/file.png differ diff --git a/src/folder.png b/src/folder.png new file mode 100644 index 0000000..81df3c3 Binary files /dev/null and b/src/folder.png differ diff --git a/src/umming_lines_paint.png b/src/umming_lines_paint.png new file mode 100644 index 0000000..91f3a57 Binary files /dev/null and b/src/umming_lines_paint.png differ