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.
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\"/>";
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user