diff --git a/TD1/M4103 TP1.pdf b/TD1/M4103 TP1.pdf new file mode 100644 index 0000000..bbf9a19 Binary files /dev/null and b/TD1/M4103 TP1.pdf differ diff --git a/TD1/README.MD b/TD1/README.MD index 47ad6ce..ac06ef5 100644 --- a/TD1/README.MD +++ b/TD1/README.MD @@ -1,8 +1,10 @@ -# Exercice 1 +# Programmation Web – client riche - TD1 -## La propriété document.title +## Exercice 1 -### defTitre1() +### La propriété document.title + +#### defTitre1() > Quel sera l’évènement qui déclenchera l’appelle de votre fonction ? @@ -16,19 +18,19 @@ J'ai utilisé la méthode ``document.getElementById()`` pour récupérer le titr 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 ? 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 ? 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 ? @@ -42,9 +44,9 @@ La page ne s'affiche pas 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 ? @@ -55,7 +57,7 @@ propriétés ? 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 ? @@ -63,7 +65,7 @@ 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 : +## Exercice 2 - L'objet Date : J'avais commencé à écrire deux petites condition en if/else mais une autre solution me semble plus simple : diff --git a/TD1/[S4T][JS][G3][TD1]SrifiJose.pdf b/TD1/[S4T][JS][G3][TD1]SrifiJose.pdf new file mode 100644 index 0000000..61ce29e Binary files /dev/null and b/TD1/[S4T][JS][G3][TD1]SrifiJose.pdf differ diff --git a/TD1/reponseTD1.html b/TD1/reponseTD1.html new file mode 100644 index 0000000..c805a82 --- /dev/null +++ b/TD1/reponseTD1.html @@ -0,0 +1,501 @@ + + + +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/TD2/README.MD b/TD2/README.MD new file mode 100644 index 0000000..e275abd --- /dev/null +++ b/TD2/README.MD @@ -0,0 +1,7 @@ +# 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)`` \ No newline at end of file diff --git a/TD2/TP2_JS_M413_2016.pdf b/TD2/TP2_JS_M413_2016.pdf new file mode 100644 index 0000000..107ea5f Binary files /dev/null and b/TD2/TP2_JS_M413_2016.pdf differ diff --git a/TD2/css/main.css b/TD2/css/main.css new file mode 100644 index 0000000..64f3388 --- /dev/null +++ b/TD2/css/main.css @@ -0,0 +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; +} \ No newline at end of file diff --git a/TD2/img/melou.jpeg b/TD2/img/melou.jpeg new file mode 100644 index 0000000..68b93aa Binary files /dev/null and b/TD2/img/melou.jpeg differ diff --git a/TD2/index.html b/TD2/index.html new file mode 100644 index 0000000..ee621e2 --- /dev/null +++ b/TD2/index.html @@ -0,0 +1,44 @@ + + + + + + + + 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é

+ + +
+ + +

Son dernier but

+ + + + \ No newline at end of file diff --git a/TD2/js/main.js b/TD2/js/main.js new file mode 100644 index 0000000..95e0d23 --- /dev/null +++ b/TD2/js/main.js @@ -0,0 +1,21 @@ +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 +} + +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"); + +} \ No newline at end of file diff --git a/index.html b/index.html index b3dd737..f2ee54b 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@