18 Commits
Td1 ... Td4

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

BIN
TD1/M4103 TP1.pdf Normal file

Binary file not shown.

View File

@ -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 lappelle 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 lobjet 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 lobjet 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 quil 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 :

Binary file not shown.

501
TD1/reponseTD1.html Normal 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

Binary file not shown.

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

Binary file not shown.

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

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

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

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";
}
?>

View File

@ -15,6 +15,8 @@
<body>
<ul>
<li><a href="./TD1/">TD1</a></li>
<li><a href="./TD2/">TD2</a></li>
<li><a href="./TD3/">TD3</a></li>
</ul>
</body>