Import all

This commit is contained in:
2020-05-05 09:53:14 +02:00
parent 0e4c9c0fea
commit 7de4bab059
1411 changed files with 163444 additions and 0 deletions

View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DIU-EIL : bloc 1, programmation WEB - test automatisés</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
</head>
<body>
<h1 id="main-test">Tests automatisés</h1>
<div id="mocha"></div>
<script src="https://unpkg.com/chai/chai.js"></script>
<script src="https://unpkg.com/mocha/mocha.js"></script>
<script src="DIU-EIL-WEB.js"></script>
<script src="DIU-EIL-WEB-test.js"></script>
</body>
</html>

View File

@@ -0,0 +1,62 @@
/* global mocha suite test chai fibonacci */
// voir la documentation https://mochajs.org/#running-mocha-in-the-browser
'use strict';
document.addEventListener('DOMContentLoaded', () => {
// initialisation de Mocha
mocha.setup('tdd');
mocha.globals(['__VUE_DEVTOOLS_TOAST__']);
mocha.checkLeaks();
// ////////////////////////////////////////////////////////////////////
// Suites de tests
// ////////////////////////////////////////////////////////////////////
// Voir pour la syntaxe des assertions https://www.chaijs.com/api/assert/
suite('Tests pour la fonction fibonacci', () => {
test('Type de résultats : nombre', () => {
chai.assert.isNumber(fibonacci(0));
});
test('Paramètre négatif : résultat indéfini', () => {
chai.assert.isUndefined(fibonacci(-1));
});
test('Paramètre mauvais type : résultat indéfini', () => {
chai.assert.isUndefined(fibonacci({}));
chai.assert.isUndefined(fibonacci(() => 0));
chai.assert.isUndefined(fibonacci([]));
chai.assert.isUndefined(fibonacci('test'));
chai.assert.isUndefined(fibonacci());
chai.assert.isUndefined(fibonacci(true));
});
test('Test valeurs initiales', () => {
chai.assert.strictEqual(fibonacci(0), 0);
chai.assert.strictEqual(fibonacci(1), 1);
chai.assert.strictEqual(fibonacci(2), 1);
});
test('Test valeur haute ', () => {
chai.assert.strictEqual(fibonacci(30), 832040);
});
});
suite('Tests pour la fonction fibonacci', () => {
test('Start est à 0 par defaut', () => {
chai.assert.strictEqual(range(0,10), range(10));
});
test('Comportement attendu', () => {
chai.assert.strictEqual(range(10), [0,1,2,3,4,5,6,8,9]);
chai.assert.Equal(range(10, 4, 2) == [4,6,8]);
});
test('Liste vide quand end > start', () => {
chai.assert.Equal(range(-2, 0), []);
});
})
// Lancement des tests
mocha.run();
}, false);

View File

@@ -0,0 +1,17 @@
.soft-btn {
background-color:gray;
border: none;
color: white;
padding: 1em 2em ;
text-align: center;
}
.dot {
position: absolute;
pointer-events: none;
height: 50px;
width: 50px;
border-radius: 25px;
background-color: #bbb;
}

View File

@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>DIU-EIL : bloc 1 - introduction à la programmation WEB</title>
<link href="DIU-EIL-WEB.css" rel="stylesheet" media="all" type="text/css">
</head>
<body>
<header id="header">
<h1>Activité pratique &laquo;programmation web&raquo;</h1>
</header>
<main>
<nav id="menu">
<h2>Menu</h2>
<ul>
<li><a href="#content-partie-1">Partie 1</a></li>
<li><a href="#content-partie-2">Partie 2</a></li>
</ul>
</nav>
<section id="container">
<section id="content-partie-1">
<h2>Partie 1</h2>
<h3>Un premier boutton</h3>
<div>
<button id="btn-exec">Exécuter</button>
</div>
<h3>Un formulaire pour une fonction JS</h3>
<div>
<div>
<ul>
<li>Stop<input type="text" id="input-range-stop" value="10"/></li>
<li>Start<input type="text" id="input-range-start" value=""/></li>
<li>Step<input type="text" id="input-range-step" value=""/></li>
</ul>
</div>
<button class="soft-btn" id="btn-range-eval">Range</button>
<button class="soft-btn" id="btn-range-reset">Reset</button>
</div>
<code id="output"></code>
</section>
<section id="content-partie-2">
<h2>Partie 2</h2>
</section>
</section>
</main>
<footer id="footer">
Contenus à partir de Pierre-Antoine Champin, Emmanuel Coquery, Fabien Duchateau et Romuald Thion.
</footer>
<script src="DIU-EIL-WEB.js"></script>
</body>
</html>

View File

@@ -0,0 +1,55 @@
/* eslint-disable no-unused-vars */
'use strict';
// //////////////////////////////////////////////////////////////////////////////
// Exercice : bases du langage et utilisation de la console
// //////////////////////////////////////////////////////////////////////////////
function fibonacci(n) {
if (!Number.isInteger(n) || n < 0) {
return undefined;
}
if (n === 0 || n === 1) {
return n;
}
return (fibonacci(n - 1) + fibonacci(n - 2));
}
// range //////////////////////////////////////////////////////////////////////////////
// Fonction range, pas trop de choix ici dans l'écriture
function range(stop, start = 0, step = 1) {
const res = [];
// je mets une "garde" ici pour éviter des boucles sans fin si step est nul ou négatif
if (!Number.isInteger(step) || step < 1) return res;
// for "à l'ancienne" du C ou java. On ne peut pas faire bien mieux
for (let i = start; i < stop; i += step) {
res.push(i);
}
return res;
}
// //////////////////////////////////////////////////////////////////////////////
// Exercice : Téléchargement asynchrone
// //////////////////////////////////////////////////////////////////////////////
function download_json(callback) {
const url = 'https://perso.liris.cnrs.fr/romuald.thion/files/Enseignement/DIU-EIL/DIU-EIL-WEB.json';
fetch(url)
.then(response => response.json())
.then(callback)
.catch(console.error);
}
// //////////////////////////////////////////////////////////////////////////////
document.addEventListener('DOMContentLoaded', () => {
console.log('Document entièrement chargé.');
document.getElementById('btn-exec').onclick= () => alert('clic');
}, false);

View File

@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>L'apprentissage de Linux</title>
</head>
<body>
<header>
<h1>Super table</h1>
<nav>
</nav>
</header>
<section id="corps">
<table id="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="datatable">
</tbody>
</table>
<button id="addRow" type="button">Ajouter ligne</button>
</section>
<footer>
</footer>
</body>
<script src="script.js"></script>
</html>

View File

@@ -0,0 +1,103 @@
/* eslint-disable no-unused-vars */
'use strict';
let datas = [
{
firstname: "Jill",
lastname: "Smith",
age: 50
},
{
firstname: "Eve",
lastname: "Jackson",
age: 94
},
]
let editing = false;
document.addEventListener('DOMContentLoaded', () => {
updateTable(datas);
//console.log(Array.from(document.getElementsByClassName('modifier')));
document.getElementById('addRow').onclick = () => appendQueryLine();
}, false);
function toggleEditing() {
editing = !editing
}
function feedDatas (datas) {
return datas.reduce( (acc, d) => {
return acc.concat(`<tr>
<th>${d.firstname}</th>
<th>${d.lastname}</th>
<th>${d.age}</th>
<th><button class="modifier">Mod</button><button class="remover">Del</button></th>
</tr>`)
}, "")
}
function updateTable () {
let tbody = document.getElementById("datatable");
tbody.innerHTML = feedDatas(datas)
Array.from(document.getElementsByClassName('modifier')).map(d => d.onclick = () => modifyPersonne(d));
}
function appendQueryLine () {
if (!editing) {
editing = true
let tbody = document.getElementById("datatable");
tbody.innerHTML += `<tr>
<th><input id="firstname"></input></th>
<th><input id="lastname"></input></th>
<th><input id="age"></input></th>
<th><button id="save">Ok</button><button id="cancel">Ann</button></th>
</tr>`
document.getElementById('save').onclick= () => savePersonne();
document.getElementById('cancel').onclick= () => removeQueryLine();
} else {
console.log("Already editing")
}
}
function removeQueryLine () {
if (editing) {
feedDatas(datas)
updateTable()
toggleEditing()
}
}
function modifyPersonne (d) {
toggleEditing()
let cells = d.parentElement.parentElement.children
d.parentElement.innerHTML = `<button id="save">Ok</button><button id="cancel">Ann</button>`
document.getElementById('save').onclick= () => savePersonne();
document.getElementById('cancel').onclick= () => removeQueryLine();
let firstname = cells[0].firstChild.nodeValue
let lastname = cells[1].firstChild.nodeValue
let age = cells[2].firstChild.nodeValue
cells[0].innerHTML = `<input id="firstname" value=${firstname} ></input></th>`
cells[1].innerHTML = `<input id="lastname" value=${lastname} ></input></th>`
cells[2].innerHTML = `<input id="age" value=${age} ></input></th>`
}
function savePersonne () {
let firstname = document.getElementById("firstname");
let lastname = document.getElementById("lastname");
let age = document.getElementById("age");
datas.push(
{
firstname: firstname.value,
lastname: lastname.value,
age: age.value
}
)
updateTable()
toggleEditing()
}

View File

@@ -0,0 +1,53 @@
body
{
margin: auto;
overflow: hidden;
}
section
{
height: 100vh;
}
thead
{
background-color: #333;
color: #fff;
}
th
{
width: 100px;
}
input
{
width: 90px;
}
button
{
width: 100px;
}
#mod
{
background-color: yellow;
}
#del
{
background-color: red;
}
#cancel
{
background-color: red;
}
#save
{
background-color: yellow;
}

View File

@@ -0,0 +1,42 @@
body
{
margin: 0px;
margin: auto;
max-width: 50rem;
overflow: hidden;
}
section
{
height: 100vh;
max-width: 50rem;
}
p
{
text-align: center;
margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
}
nav
{
text-align: center;
}
a
{
text-decoration: none;
padding: 5px;
margin: 5px;
}
li:nth-child(2n+1) > a
{
background-color: lightgreen;
border-radius: 60px;
}
li:nth-child(2n) > a
{
background-color: lightblue;
border-radius: 60px;
}

View File

@@ -0,0 +1,204 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Page HTML dont vous êtes le héros</title>
</head>
<body>
<section id="sec1">
<p>1. Alors que vous pénétrez dans les ruines du donjon,
apparemment abandonnées,
la lourde grille se referme derrière vous, comme par magie.
Il va vous falloir trouver une autre sortie !</p>
<nav>
<ul>
<li><a href="#sec2">Rendez vous au 2</a></li>
</ul>
</nav>
</section>
<section id="sec2">
<p>2. Vous êtes dans le hall d'entrée.
La porte sud est toujours condamnée par une grille,
mais trois autres portes sont encores ouvertes.</p>
<nav><ul>
<li><a href="#sec8">Pour aller à l'ouest, rendez vous au 8</a></li>
<li><a href="#sec14">Pour aller au nord, rendez vous au 14</a></li>
<li><a href="#sec10">Pour aller à l'est, rendez vous au 10</a></li>
</ul></nav>
</section>
<section id="sec3">
<p>3. Plus au sud, un ébouli vous empêche de poursuivre plus loin.</p>
<nav><ul>
<li>Pour revenir sur vos pas, rendez vous au 16</li>
</ul></nav>
</section>
<section id="sec4">
<p>4. Vous entrez dans une grande pièce octogonale,
munie de trois portes.</p>
<nav><ul>
<li>Pour aller au nord, rendez vous au 17</li>
<li>Pour aller à l'est, rendez vous au 14</li>
<li>Pour aller au sud, rendez vous au 8</li>
</ul></nav>
</section>
<section id="sec5">
<p>5. Au centre de la pièce se trouve une fosse sombre
d'où sortent des grognements inquiétants.
Au bord, un étroit passage relie les deux seules issues de la pièce.</p>
<nav><ul>
<li>Pour aller à l'ouest, rendez vous au 12</li>
<li>Pour aller au sud, rendez vous au 9</li>
</ul></nav>
</section>
<section id="sec6">
<p>6. Vous êtes au pied d'un escalier de pierre qui monte vers l'est.
Un couloir humide part vers le nord.</p>
<nav><ul>
<li>Pour aller au nord, rendez vous au 18</li>
<li>Pour monter l'escalier, rendez vous au 16</li>
</ul></nav>
</section>
<section id="sec7">
<p>7. Vous marchez dans un couloit étroit qui tourne à angle droit.</p>
<nav><ul>
<li>Pour aller à l'ouest, rendez vous au 15</li>
<li>Pour aller au sud, rendez vous au 11</li>
</ul></nav>
</section>
<section id="sec8">
<p>8. Vous êtes dans une salle sombre dont les seules issues sont
à l'est et au nord.</p>
<nav><ul>
<li>Pour aller au nord, rendez vous au 4</li>
<li>Pour aller à l'est, rendez vous au 2</li>
</ul></nav>
</section>
<section id="sec9">
<p>9. Vous vous trouvez dans une grande pièce circulaire,
percée de trois portes.</p>
<nav><ul>
<li>Pour aller à l'ouest, rendez vous au 17</li>
<li>Pour aller au nord, rendez vous au 5</li>
<li>Pour aller à l'est, rendez vous au 18</li>
</ul></nav>
</section>
<section id="sec10">
<p>10. Ce couloir est un cul de sac.</p>
<nav><ul>
<li>Pour revenir sur vos pas, rendez vous au 2</li>
</ul></nav>
</section>
<section id="sec11">
<p>11. Cette salle a dû être autrefois une salle des gardes.
Deux portes donnent vers l'ouest et le nord,
tandis qu'une échelle au sud permet de monter sur les murailles.</p>
<nav><ul>
<li>Pour aller à l'ouest, rendez vous au 18</li>
<li>Pour aller au nord, rendez vous au 7</li>
<li>Pour monter à l'échelle, rendez vous au 16</li>
</ul></nav>
</section>
<section id="sec12">
<p>12. Vous marchez le long d'un large couloir
formant une courbe régulière.</p>
<nav><ul>
<li>Pour aller à l'est, rendez vous au 5</li>
<li>Pour aller au sud, rendez vous au 17</li>
</ul></nav>
</section>
<section id="sec13">
<p>13. Vous attendez que vos yeux s'habituent à la lumière du soleil
avant d'oser y croire, mais ça y est :
vous êtes sorti du donjon !</p>
</section>
<section id="sec14">
<p>14. Vous êtes au pied d'une haute tour ronde.
Deux portes donnent à l'ouest et au sud,
et au centre, un escalier en colimaçon monte vers
l'étage supérieur.</p>
<nav><ul>
<li>Pour aller à l'ouest, rendez vous au 4</li>
<li>Pour aller au sud, rendez vous au 2</li>
<li>Pour monter l'escalier, rendez vous au 19</li>
</ul></nav>
</section>
<section id="sec15">
<p>15. Vous êtes dans un grand hall,
semblable à celui par lequel vous êtes entré dans le donjon.
En plus de la porte par laquelle vous êtes arrivé à l'est,
une lourde porte occupe la majeure partie du mur nord.</p>
<nav><ul>
<li>Pour aller au nord, rendez vous au 13</li>
<li>Pour aller à l'est, rendez vous au 7</li>
</ul></nav>
</section>
<section id="sec16">
<p>16. Vous marchez sur ce qui doit être l'ancien chemin de ronde.
L'à-pic vertigineux rend hélas impossible
toute fuite depuis cet endroit.
À l'extrémité nord, une échelle redescend à l'intérieur du donjon,
tandis qu'un escalier de pierre descend vers l'ouest.
Le chemin de ronde continue vers le sud.</p>
<nav><ul>
<li>Pour aller à l'ouest, rendez vous au 6</li>
<li>Pour aller au nord, rendez vous au 11</li>
<li>Pour aller au sud, rendez vous au 3</li>
</ul></nav>
</section>
<section id="sec17">
<p>17. Vous êtes dans une grand pièce,
faiblement éclairée par des fenêtres grillagées infranchissables.
Vous apercevez trois portes.</p>
<nav><ul>
<li>Pour aller au nord, rendez vous au 12</li>
<li>Pour aller à l'est, rendez vous au 9</li>
<li>Pour aller au sud, rendez vous au 4</li>
</ul></nav>
</section>
<section id="sec18">
<p>18. La lumière vous aveugle et
vous croyez un moment avoir trouvé la sortie.
Vous êtes en fait dans un ancien jardin intérieur,
comme en témoignent les terre-pleins envahis par les mauvaises herbes
et une fontaine asséchée.
Sous les arcades, vous distinguez trois portes.</p>
<nav><ul>
<li>Pour aller à l'ouest, rendez vous au 9</li>
<li>Pour aller à l'est, rendez vous au 11</li>
<li>Pour aller au sud, rendez vous au 6</li>
</ul></nav>
</section>
<section id="sec19">
<p>19. Du sommet de la tour, vous pouvez voir la totalité du donjon,
entouré de douves profondes.
En plus du pont levis par lequel vous êtes entré, au sud,
vous en apercevez un autre, sur la face nord.
Votre espoir de fuite ?
</p>
<nav><ul>
<li>Pour redescendre, rendez vous au 14</li>
</ul></nav>
</section>
</body>
</html>

View File

@@ -0,0 +1,4 @@
Notes du jours 2: WEB
#####################
CSS zen garden

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 935 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -0,0 +1,100 @@
body
{
margin: auto;
max-width: 60rem;
}
header
{
border-bottom: 2px solid green;
}
header>img,h1
{
display: inline;
}
nav
{
text-align: center;
}
nav>ul
{
margin-bottom: 0px;
}
nav>ul>li
{
display: inline;
color: green;
border: solid;
border-width: 2px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
nav>ul>li:hover
{
background-color: green;
}
nav>ul>li>a
{
color: black;
text-decoration: none;
padding: 5px;
}
section
{
flex-direction: row;
}
article
{
float: left;
width: 65%;
margin-top: 20px;
}
aside
{
float: right;
width: 30%;
background-color: lightgreen;
border: unset;
border-radius: 10px;
padding: 10px;
border-radius: 10px;
margin-top: 20px;
}
#logos_distrib
{
background-color: white;
text-align: center;
border-radius: 5px;
}
footer
{
clear: left;
display: block;
border-top: 2px solid green;
text-align: center;
}
footer>ul>li
{
/*border: solid;*/
display: inline;
padding: 0px 10px;
}
footer>ul>li:first-child
{
border-right: 2px solid black;
}
footer>ul>li:last-child
{
border-left: 2px solid black;
}

View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="assets/style.css">
<title>L'apprentissage de Linux</title>
</head>
<body>
<header>
<img src="assets/images/NewTux.png" alt="Le Pingouin de Linux" />
<h1>Linux à l'IUT</h1>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">SE Linux</a></li>
<li><a href="#">Programmation Système</a></li>
</ul>
</nav>
</header>
<section id="corps">
<article>
<h1>Historique de l'enseignement de linux à l'IUT</h1>
<p>Montius nos tumore inusitato quodam et novo ut rebellis et maiestati
recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod
contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem
formidine tenus iusserim custodiri.</p>
<p>Accedat huc suavitas quaedam oportet sermonum atque morum, haudquaquam
mediocre condimentum amicitiae. Tristitia autem et in omni re severitas habet
illa quidem gravitatem, sed amicitia remissior esse debet et liberior et
dulcior et ad omnem comitatem facilitatemque proclivior.</p>
<p>Circa hos dies Lollianus primae lanuginis adulescens, Lampadi filius ex
praefecto, exploratius causam Maximino spectante, convictus codicem noxiarum
artium nondum per aetatem firmato consilio descripsisse, exulque mittendus,
ut sperabatur, patris inpulsu provocavit ad principem, et iussus ad eius
comitatum duci, de fumo, ut aiunt, in flammam traditus Phalangio Baeticae
consulari cecidit funesti carnificis manu.</p>
<p>Et quia Mesopotamiae tractus omnes crebro inquietari sueti praetenturis
et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae
subsederat extimas partes, novum parumque aliquando temptatum commentum
adgressus. quod si impetrasset, fulminis modo cuncta vastarat. erat autem
quod cogitabat huius modi.</p>
<p>Eodem tempore Serenianus ex duce, cuius ignavia populatam in Phoenice
Celsen ante rettulimus, pulsatae maiestatis imperii reus iure postulatus
ac lege, incertum qua potuit suffragatione absolvi, aperte convictus familiarem
suum cum pileo, quo caput operiebat, incantato vetitis artibus ad templum
misisse fatidicum, quaeritatum expresse an ei firmum portenderetur imperium,
ut cupiebat, et cunctum.</p>
</article>
<aside>
<section>
<h1>Choisir sa distribution</h1>
<p id="logos_distrib">
<img src="assets/images/mint-logo.jpg" alt="Logo de Mint" />
<img src="assets/images/debian-logo.png" alt="Logo de Debian" />
<img src="assets/images/ubuntu-logo.jpg" alt="Logo d'Ubuntu" />
<img src="assets/images/mageia-logo.png" alt="Logo de Mageia" />
<img src="assets/images/arch-logo.jpg" alt="Logo d'Arch-linux" />
</p>
<p>Des étudiants et des enseignants peuvent vous conseiller.</p>
<p>Vous pouvez également consulter <a href="http://distrowatch.com/dwres.php?resource=major&amp;language=FR">ce site</a>
pour commencer à vous faire une idée.</p>
</section><section>
<h1>Installer Linux</h1>
<p>Avec une machine virtuelle, en dual-boot, sur un live-CD ou comme seul système sur vos machines, peu importe. Ce qui compte, c'est de pratiquer (dans le terminal).</p>
</section>
</aside>
</section>
<footer>
<ul>
<li>Réalisé avec Notepad++</li>
<li>HTML5 valide</li>
<li>CSS valide</li>
</ul>
</footer>
</body>
</html>