fin td1
This commit is contained in:
parent
efc5c4b539
commit
b512011380
@ -1 +1,87 @@
|
||||
# M413 - TD1 : Réponses aux Questions
|
||||
# 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
|
||||
}```
|
||||
|
||||
@ -9,8 +9,9 @@
|
||||
<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 src='./js/td1.js'></script>
|
||||
<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>
|
||||
|
||||
@ -50,7 +51,7 @@
|
||||
|
||||
<div id="date_modif"></div>
|
||||
<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 2021 (un jour normal à Équestria).</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -5,11 +5,11 @@ let message = 'JavaScript is ok :)';
|
||||
// alert( message);
|
||||
console.log(message);
|
||||
|
||||
function onLoad() {
|
||||
function onLoad() { /* À vous de choisir quel titre définir ici :D */
|
||||
console.log('In onLoad() function…');
|
||||
sayHello();
|
||||
defineHeading1();
|
||||
//defineHeading2();
|
||||
//defineHeading1();
|
||||
defineHeading2();
|
||||
//defineHeading3();
|
||||
//defineHeading4();
|
||||
// Your JavaScript code goes here !
|
||||
@ -23,4 +23,166 @@ function defineHeading1() { /**Cette méthode permet de forcer letitre de la pag
|
||||
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;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user