Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b39919420f | |||
| 6e0dd6b841 | |||
| e9dd3c6b69 | |||
| 89f237666e |
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -1,11 +0,0 @@
|
|||||||
# 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.
|
|
||||||
Binary file not shown.
Binary file not shown.
@ -1,49 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
@ -1,54 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
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\"/>";
|
|
||||||
}
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
# Programmation Web – client riche - TD3
|
|
||||||
|
|
||||||
## Exercice 1
|
|
||||||
|
|
||||||
> Que pouvez-vous dire de l’architecture de l’application ?
|
|
||||||
|
|
||||||
Binary file not shown.
@ -1,43 +0,0 @@
|
|||||||
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
|
|
||||||
}
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
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}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset='utf-8'>
|
|
||||||
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
|
||||||
<title>M4103 - Programmation Web Client Riche</title>
|
|
||||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
|
||||||
<link rel='stylesheet' type='text/css' media='screen' href='../css/main.css'>
|
|
||||||
<h1>M4103 - Programmation Web Client Riche</h1>
|
|
||||||
<h2>Sommaire TD3</h2>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<ul>
|
|
||||||
<li><a href="./td3-exo1.html">Le jeu du taquin</a></li>
|
|
||||||
<li><a href="./td3-exo2.html">Le jeu du 2048</a></li>
|
|
||||||
</ul>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
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("ok");
|
|
||||||
maCase.className = "case vide";
|
|
||||||
var buff = maCase.innerHTML;
|
|
||||||
maCase.innerHTML = "";
|
|
||||||
vide.className = "case";
|
|
||||||
vide.innerHTML = buff;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(event.currentTarget.className + " : " + event.currentTarget.innerText);
|
|
||||||
var e = event.target;
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
console.log("js linkef");
|
|
||||||
|
|
||||||
function init() {
|
|
||||||
console.log("init ok");
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="fr">
|
|
||||||
<head>
|
|
||||||
<title>Taquin</title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<link rel="stylesheet" type="text/css" href="css/td3-exo1.css" media="all">
|
|
||||||
<script type="text/javascript" src="js/td3-exo1.js"></script>
|
|
||||||
</head>
|
|
||||||
<body onload="init();">
|
|
||||||
<div id="jeu">
|
|
||||||
<div style="top:0px;left:0px;" class="case"><h1>6</h1></div>
|
|
||||||
<div style="top:0px;left:102px;" class="case"><h1>1</h1></div>
|
|
||||||
<div style="top:0px;left:204px;" class="case"><h1>7</h1></div>
|
|
||||||
<div style="top:102px;left:0px;" class="case"><h1>3</h1></div>
|
|
||||||
<div style="top:102px;left:102px;" class="case"><h1>4</h1></div>
|
|
||||||
<div style="top:102px;left:204px;" class="case"><h1>8</h1></div>
|
|
||||||
<div style="top:204px;left:0px;" class="case"><h1>5</h1></div>
|
|
||||||
<div style="top:204px;left:102px;" class="case"><h1>2</h1></div>
|
|
||||||
<div style="top:204px;left:204px;" class="case vide"><h1> </h1></div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="fr">
|
|
||||||
<head>
|
|
||||||
<title>Jeu 2048</title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<link rel="stylesheet" type="text/css" href="css/td3-exo2.css" />
|
|
||||||
<script type="text/javascript" src="js/td3-exo2.js"> </script>
|
|
||||||
</head>
|
|
||||||
<body onload="init();">
|
|
||||||
<div id="jeu">
|
|
||||||
<div class="ligne">
|
|
||||||
<div style="top:0px;left:0px;" class="case"></div>
|
|
||||||
<div style="top:0px;left:102px;" class="case"></div>
|
|
||||||
<div style="top:0px;left:204px;" class="case"></div>
|
|
||||||
<div style="top:0px;left:306px;" class="case"></div>
|
|
||||||
</div>
|
|
||||||
<div class="ligne">
|
|
||||||
<div style="top:102px;left:0px;" class="case"></div>
|
|
||||||
<div style="top:102px;left:102px;" class="case"></div>
|
|
||||||
<div style="top:102px;left:204px;" class="case"></div>
|
|
||||||
<div style="top:102px;left:306px;" class="case"></div>
|
|
||||||
</div>
|
|
||||||
<div class="ligne">
|
|
||||||
<div style="top:204px;left:0px;" class="case"></div>
|
|
||||||
<div style="top:204px;left:102px;" class="case"></div>
|
|
||||||
<div style="top:204px;left:204px;" class="case"></div>
|
|
||||||
<div style="top:204px;left:306px;" class="case"></div>
|
|
||||||
</div>
|
|
||||||
<div class="ligne">
|
|
||||||
<div style="top:306px;left:0px;" class="case"></div>
|
|
||||||
<div style="top:306px;left:102px;" class="case"></div>
|
|
||||||
<div style="top:306px;left:204px;" class="case"></div>
|
|
||||||
<div style="top:306px;left:306px;" class="case"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -16,7 +16,6 @@
|
|||||||
<ul>
|
<ul>
|
||||||
<li><a href="./TD1/">TD1</a></li>
|
<li><a href="./TD1/">TD1</a></li>
|
||||||
<li><a href="./TD2/">TD2</a></li>
|
<li><a href="./TD2/">TD2</a></li>
|
||||||
<li><a href="./TD3/">TD3</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user