School-DUT-info/M413-Programmation-Web-Client-Riche
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: School-DUT-info:Td1
Branches Tags
School-DUT-info:master School-DUT-info:Td4 School-DUT-info:Td3 School-DUT-info:Td2 School-DUT-info:Td1
..
compare: School-DUT-info:Td4
Branches Tags
School-DUT-info:master School-DUT-info:Td4 School-DUT-info:Td3 School-DUT-info:Td2 School-DUT-info:Td1

18 Commits
Td1 ... Td4

Author SHA1 Message Date
JunkJumper
97590ec7f0 depot 17h34 2020-03-04 17:34:26 +01:00
JunkJumper
2d94439b83 fin exo1 2020-02-19 18:09:40 +01:00
JunkJumper
a450d020de fix console log 2020-02-19 17:25:24 +01:00
JunkJumper
6d849d6bc7 Merge pull request #3 from JunkJumper/Td3 
LE TAQUIN FONCTIONNE !!!!
 2020-02-19 16:15:27 +01:00
JunkJumper
7b1bd3b081 LE TAQUIN FONCTIONNE !!!! 2020-02-19 16:14:31 +01:00
JunkJumper
d7b74d77eb Merge pull request #2 from JunkJumper/Td3 
Td3
 2020-02-12 18:36:59 +01:00
JunkJumper
42a7326d48 fin séance 1 TD3 2020-02-12 18:36:12 +01:00
JunkJumper
5017da42b5 17h25 2020-02-12 17:25:20 +01:00
JunkJumper
2d38d12955 depot initial TD3 2020-02-12 17:01:08 +01:00
JunkJumper
e0ebb54c8d Merge pull request #1 from JunkJumper/Td2 
rendu tp 2
 2020-02-12 16:19:46 +01:00
JunkJumper
1c718d51e3 rendu tp 2 2020-02-12 16:19:16 +01:00
JunkJumper
48082672e0 "Fin seance vendredi" 2020-02-07 11:15:04 +01:00
JunkJumper
bb5799b276 "rendu TD1" 2020-02-07 10:33:34 +01:00
JunkJumper
8626688363 Update index.html 2020-02-07 10:13:17 +01:00
JunkJumper
91ea5938ff "depot fin mardi" 2020-02-04 18:39:27 +01:00
JunkJumper
0a2643231e "bak 18h15" 2020-02-04 18:15:16 +01:00
JunkJumper
03fc3678c8 "debut rejout ennoncés tds" 2020-02-04 16:54:27 +01:00
JunkJumper
a30007ab8b "debut td2" 2020-02-04 16:41:20 +01:00
27 changed files with 1005 additions and 0 deletions
Expand all files Collapse all files

BIN
TD1/M4103 TP1.pdf Normal file
View File

Binary file not shown.

501
TD1/reponseTD1.html Normal file
View File

File diff suppressed because one or more lines are too long

11
TD2/README.MD Normal file
View 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
View File

Binary file not shown.

BIN
TD2/[S4T][JS][G3][TD2]SrifiJose.pdf Normal file
View File

Binary file not shown.

49
TD2/css/main.css Normal file
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

54
TD2/index.html Normal file
View 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
View 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\"/>";
}

5
TD3/README.MD Normal file
View File

@ -0,0 +1,5 @@
# Programmation Web – client riche - TD3
## Exercice 1
Alors j'ai utilisé un buffer pour stocker le innerHTML afin de terminer toutes les instructions concernant un objet/une variable avant de passer à/au suivant.e.

BIN
TD3/TP3_JS_M413_2016.pdf Normal file
View File

Binary file not shown.

43
TD3/css/td3-exo1.css Normal file
View File

@ -0,0 +1,43 @@
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
}

40
TD3/css/td3-exo2.css Normal file
View File

@ -0,0 +1,40 @@
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}

21
TD3/index.html Normal file
View File

@ -0,0 +1,21 @@
<!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>

29
TD3/js/td3-exo1.js Normal file
View File

@ -0,0 +1,29 @@
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("Déplacement effectué !");
maCase.className = "case vide";
var buff = maCase.innerHTML;
maCase.innerHTML = "";
vide.className = "case";
vide.innerHTML = buff;
}
var e = event.target;
}

5
TD3/js/td3-exo2.js Normal file
View File

@ -0,0 +1,5 @@
console.log("js linkef");
function init() {
console.log("init ok");
}

22
TD3/td3-exo1.html Normal file
View File

@ -0,0 +1,22 @@
<!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>

37
TD3/td3-exo2.html Normal file
View File

@ -0,0 +1,37 @@
<!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>

4
TD4/README.MD Normal file
View File

@ -0,0 +1,4 @@
# Programmation Web – client riche - TD4
## Exercice 1

BIN
TD4/TP4_JS_M413_2016.pdf Normal file
View File

Binary file not shown.

43
TD4/css/td3-exo1.css Normal file
View File

@ -0,0 +1,43 @@
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
}

40
TD4/css/td3-exo2.css Normal file
View File

@ -0,0 +1,40 @@
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}

34
TD4/index.html Normal file
View File

@ -0,0 +1,34 @@
<?php $url = $_POST["rssURL"]; if ($url != ""){ $monRSSDoc = new DOMDocument(); if ($monRSSDoc->load($url)){ header('Content-Type: text/xml'); echo $monRSSDoc->saveXML(); }else{ echo "erreur de lecture"; } }else{ echo "URL vide"; } ?>
<!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>
</head>
<body>
<h2>Un nouveau TD</h2>
<form>
<div id="inputs">
<input type="radio" onchange="selectionRSS(this.value)" id="url" name="url" value="http://www.societe-informatique-de-france.fr/feed/" /><label for="sif">La sif</label><br />
<input type="radio" onchange="selectionRSS(this.value)" id="url" name="url" value="http://filuns.unice.fr/accueil/@@rss_view" /><label for="unice">Unniversité de Nice</label><br />
<input type="radio" onchange="selectionRSS(this.value)" id="url" name="url" value="http://filuns.unice.fr/accueil/@@rss_view" /><label for="sophia">Sophia Antipolis</label><br />
<input type="radio" onchange="selectionRSS(this.value)" id="url" name="url" value="http://pro.clubic.com/actualites.rss" /><label for="clubic">Clubic</label><br />
<input type="radio" onchange="selectionRSS(this.value)" id="url" name="url" value="https://leponeyblanc.fr/api/rss/feed/" /><label for="clubic">Le Poney Blanc</label><br />
<input type="radio" onchange="selectionRSS(this.value)" id="url" name="url" value="https://www.otk-expert.fr/wp-content/plugins/forum-server/feed.php?topic=all" /><label for="clubic">OTK Expert</label><br />
<input type="radio" onchange="selectionRSS(this.value)" id="url" name="url" value="http://localhost/M4103-Programmation-Web-Client-Riche/jj64.txt" /><label for="sif">JJ64</label><br />
</div>
</form>
</body>
<p>Reçu :</p><br />
<div id="retour"></div>
<script src="./js/main.js"></script>
</html>

18
TD4/js/main.js Normal file
View File

@ -0,0 +1,18 @@
console.log("Chargement...");
function init() {
console.log("Initialisation...");
}
function selectionRSS(site) {
document.getElementById("retour").innerHTML = "";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("retour").innerHTML = this.responseText;
}
};
console.log(site);
xhttp.open("GET", site, true);
xhttp.send();
}

BIN
TD4/mémo http.pdf Normal file
View File

Binary file not shown.

15
TD4/proxy.php Normal file
View File

@ -0,0 +1,15 @@
<?php
$url = $_POST["rssURL"];
if ($url != ""){
$monRSSDoc = new DOMDocument();
if ($monRSSDoc->load($url)){
header('Content-Type: text/xml');
echo $monRSSDoc->saveXML();
} else {
echo "erreur de lecture";
}
} else {
echo "URL vide";
}
?>

1
index.html
View File

@ -16,6 +16,7 @@
<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>