Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 1c718d51e3 | |||
| 48082672e0 | |||
| bb5799b276 | |||
| 8626688363 | |||
| 91ea5938ff | |||
| 0a2643231e | |||
| 03fc3678c8 | |||
| a30007ab8b |
BIN
TD1/M4103 TP1.pdf
Normal file
BIN
TD1/M4103 TP1.pdf
Normal file
Binary file not shown.
@ -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 :
|
||||
|
||||
|
||||
BIN
TD1/[S4T][JS][G3][TD1]SrifiJose.pdf
Normal file
BIN
TD1/[S4T][JS][G3][TD1]SrifiJose.pdf
Normal file
Binary file not shown.
501
TD1/reponseTD1.html
Normal file
501
TD1/reponseTD1.html
Normal file
File diff suppressed because one or more lines are too long
11
TD2/README.MD
Normal file
11
TD2/README.MD
Normal file
@ -0,0 +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.
|
||||
BIN
TD2/TP2_JS_M413_2016.pdf
Normal file
BIN
TD2/TP2_JS_M413_2016.pdf
Normal file
Binary file not shown.
BIN
TD2/[S4T][JS][G3][TD2]SrifiJose.pdf
Normal file
BIN
TD2/[S4T][JS][G3][TD2]SrifiJose.pdf
Normal file
Binary file not shown.
49
TD2/css/main.css
Normal file
49
TD2/css/main.css
Normal file
@ -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;
|
||||
}
|
||||
BIN
TD2/img/melou.jpeg
Normal file
BIN
TD2/img/melou.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
54
TD2/index.html
Normal file
54
TD2/index.html
Normal file
@ -0,0 +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</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 rel='stylesheet' type='text/css' media='screen' href='./css/main.css'>
|
||||
<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>
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<h1>Pierre Lees-Melou</h1>
|
||||
<h2>Courte présentation</h2>
|
||||
<div id="presentation">
|
||||
<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" />
|
||||
</div>
|
||||
|
||||
<h2>Son parcours et ses stats</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<ul>
|
||||
<li>2010-2012 | Langon FC</li>
|
||||
<li>2012 | FCE Mérignac Arlac</li>
|
||||
<li>2013-2015 | US Lège-Cap-Ferret</li>
|
||||
<li>2015-2017 | Dijon FCO</li>
|
||||
<li>2017-Aujoud'hui | OGC Nice</li>
|
||||
</ul>
|
||||
|
||||
<p>Il a marqué en pro par saison :</p>
|
||||
|
||||
<ul>
|
||||
<li>5 buts avec le Dijon FCO en 2015-2016</li>
|
||||
<li>7 buts avec le Dijon FCO 2016-2017</li>
|
||||
<li>5 buts avec l'OGC Nice 2017-2018</li>
|
||||
<li>2 buts avec l'OGC Nice 2018-2019</li>
|
||||
<li>4 buts avec l'OGC Nice cette saison 2019-2020</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a href="https://www.youtube.com/watch?v=6Hz19CiexU4&t=3s" target="_blank">
|
||||
<h2>Son dernier but</h2>
|
||||
</a>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
33
TD2/js/main.js
Normal file
33
TD2/js/main.js
Normal file
@ -0,0 +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 = "" +
|
||||
"<input type=\"button\" value=\"DIV\" onclick=\"insertB('div')\"/>" +
|
||||
"<input type=\"button\" value=\"P\" onclick=\"insertB('p')\"/>" +
|
||||
"<input type=\"button\" value=\"H2\" onclick=\"insertB('h2')\"/>" +
|
||||
"<input type=\"text\" id=\"toInsert\"/>";
|
||||
}
|
||||
@ -15,6 +15,7 @@
|
||||
<body>
|
||||
<ul>
|
||||
<li><a href="./TD1/">TD1</a></li>
|
||||
<li><a href="./TD2/">TD2</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user