Compare commits
3 commits
d211488b10
...
c6e130bd3b
| Author | SHA1 | Date | |
|---|---|---|---|
| c6e130bd3b | |||
| c4bdd33571 | |||
| 39461779af |
5 changed files with 457 additions and 213 deletions
102
.crossnote/style.less
Normal file
102
.crossnote/style.less
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
/* Please visit the URL below for more information: */
|
||||
/* https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */
|
||||
|
||||
:root {
|
||||
--color-background: var(--base);
|
||||
--color-background-code: var(--crust);
|
||||
--color-background-paginate: var(--mantle);
|
||||
--color-foreground: var(--text);
|
||||
--color-highlight: var(--blue);
|
||||
--color-highlight-hover: var(--lavender);
|
||||
--color-highlight-heading: var(--sapphire);
|
||||
--color-header: var(--blue);
|
||||
--color-header-shadow: transparent;
|
||||
|
||||
--text-font: "Ubuntu Nerd Font", Helvetica, sans-serif;
|
||||
--title-font: "Ubuntu Nerd Font", Helvetica, sans-serif;
|
||||
--mono-font: "UbuntuMono Nerd Font", monospace;
|
||||
|
||||
--standard-border-radius: .5rem;
|
||||
--pink: #ea76cb;
|
||||
--mauve: #8839ef;
|
||||
--red: #d20f39;
|
||||
--maroon: #e64553;
|
||||
--peach: #fe640b;
|
||||
--yellow: #df8e1d;
|
||||
--green: #40a02b;
|
||||
--teal: #179299;
|
||||
--sky: #04a5e5;
|
||||
--sapphire: #209fb5;
|
||||
--blue: #1e66f5;
|
||||
--lavender: #7287fd;
|
||||
--text: #4c4f69;
|
||||
--subtext1: #5c5f77;
|
||||
--subtext0: #6c6f85;
|
||||
--overlay2: #7c7f93;
|
||||
--overlay1: #8c8fa1;
|
||||
--overlay0: #9ca0b0;
|
||||
--surface2: #acb0be;
|
||||
--surface1: #bcc0cc;
|
||||
--surface0: #ccd0da;
|
||||
--base: #eff1f5;
|
||||
--mantle: #e6e9ef;
|
||||
--crust: #dce0e8;
|
||||
}
|
||||
|
||||
.markdown-preview.markdown-preview {
|
||||
font-family: var(--text-font);
|
||||
font-size: 14px;
|
||||
line-height: 1.5rem;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--title-font);
|
||||
color: var(--text)
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--text);
|
||||
font-family: var(--mono-font);
|
||||
font-size: 14px;
|
||||
border-radius: .3rem;
|
||||
border-style: dashed;
|
||||
border-color: var(--overlay0);
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: .8rem;
|
||||
border-radius: .8rem;
|
||||
border-style: solid;
|
||||
border-color: var(--overlay0);
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
pre>code {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
li::marker {
|
||||
color: var(--overlay2);
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: .8rem;
|
||||
border-style: solid;
|
||||
border-color: var(--overlay0);
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
@media print {
|
||||
font-size: 12px;
|
||||
code {
|
||||
white-space: pre-wrap;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,9 +1,30 @@
|
|||
# Web - Activité 3 - Carousel de photos en JavaScript
|
||||
---
|
||||
puppeteer:
|
||||
format: A4
|
||||
margin:
|
||||
top: "0.5cm"
|
||||
left: "0.5cm"
|
||||
right: "0.5cm"
|
||||
bottom: "0.5cm"
|
||||
---
|
||||
|
||||
# Web - Activité 3 - Carrousel de photos en JavaScript
|
||||
|
||||
## Objectifs
|
||||
|
||||
- Développement d'un carousel de photos en JavaScript.
|
||||
- Le carousel a pour but de faire défiler des photos de bâtiments pour le site de l'entreprise Numérobis afin de montrer aux visiteurs les projets sur lesquels ils ont pu travailler.
|
||||
- Développement d'un carrousel de photos en JavaScript.
|
||||
- Le carrousel a pour but de faire défiler des photos de bâtiments pour le site de l'entreprise Numérobis afin de montrer aux visiteurs les projets sur lesquels ils ont pu travailler.
|
||||
|
||||
## Évaluation
|
||||
|
||||
- C04: ANALYSER UN SYSTÈME INFORMATIQUE
|
||||
- La structure de la solution technique est analysée avec un regard critique
|
||||
- Le calme est conservé de façon constante dans des situations particulières, tout en persévérant dans la tâche jusqu’à l’atteinte du résultat sans se décourager
|
||||
- C08: CODER
|
||||
- Le code est versionné, commenté et le logiciel est documenté
|
||||
- Les composants logiciels individuels sont développés conformément aux spécifications du cahier des charges, des bonnes pratiques et des différentes politiques de sécurité et de protection des données personnelles
|
||||
- La solution (logicielle et matérielle) est intégrée et testée conformément aux spécifications du cahier des charges, des bonnes pratiques et des différentes politiques de sécurité et de protection des données personnelles
|
||||
- La résolution d'un problème nouveau imprévu est réussie en utilisant ses propres moyens conformément aux règles de la fonction
|
||||
|
||||
## Validation
|
||||
### Livrables
|
||||
|
|
@ -17,21 +38,22 @@ Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM
|
|||
|
||||
### Résultats attendus
|
||||
|
||||
- [ ] Le carousel est intégré à la page d'accueil du site et fonctionnel.
|
||||
- [ ] Le carousel permet de faire défiler 4 photos en boucle grâce à deux boutons
|
||||
- [ ] Le carousel fait défiler automatiquement les photos toutes les 2 secondes
|
||||
- [ ] Le carrousel est intégré à la page d'accueil du site et fonctionnel.
|
||||
- [ ] Le carrousel permet de faire défiler 4 photos en boucle grâce à deux boutons
|
||||
- [ ] Le carrousel fait défiler automatiquement les photos toutes les 2 secondes
|
||||
- [ ] Le résultat général (hors animation) ressemble à l'image ci-dessous (options incluses)
|
||||
- [ ] (Optionnel) Le carousel permet d'afficher une photo au choix en cliquant sur un indicateur en bas de la photo
|
||||
- [ ] (Optionnel) Le carousel affiche en haut à gauche le numéro de la photo, et en en dessous au centre son titre
|
||||
- [ ] (Optionnel) L'aspect visuel du site a été modernisé
|
||||
- [ ] (Optionnel) Le carrousel affiche en haut à gauche le numéro de la photo, et en en dessous au centre son titre
|
||||
- [ ] (Optionnel) Le carrousel permet d'afficher une photo au choix en cliquant sur un indicateur en bas de la photo
|
||||
|
||||
|
||||
|
||||
## Ressources fournies
|
||||
|
||||
- Documentations:
|
||||
- HTML
|
||||
- CSS
|
||||
- JavaScript
|
||||
- Documentations :
|
||||
- [HTML](https://developer.mozilla.org/fr/docs/Web/HTML)
|
||||
- [CSS](https://developer.mozilla.org/fr/docs/Web/CSS)
|
||||
- [JavaScript](https://developer.mozilla.org/fr/docs/Web/JavaScript)
|
||||
- Cours de JavaScript
|
||||
- 4 images à intégrer dans le projet
|
||||
|
||||
|
|
@ -41,174 +63,263 @@ Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM
|
|||
|
||||
**Objectif :** Préparer le projet
|
||||
|
||||
```admonish travail
|
||||
- Repartir du résultat de l'activité précédente (ouvrir le répertoire dans VSCode)
|
||||
- Vérifier que votre travail a été correctement commité et qu'il ne reste plus de fichiers modifiés mais non commités
|
||||
- Créer un nouveau fichier de compte rendu vierge
|
||||
- Lancer un serveur web de développement (`python -m http.server`)
|
||||
- Ouvrir un navigateur (Firefox de préférence) et se rendre sur [cette page](https://localhost:8000)
|
||||
```
|
||||
!!! example À faire
|
||||
- Repartir du résultat de l'activité précédente (ouvrir le répertoire dans VSCode)
|
||||
- Vérifier que votre travail a été correctement commité et qu'il ne reste plus de fichiers modifiés mais non commités
|
||||
- Créer un nouveau fichier de compte rendu vierge
|
||||
- Lancer un serveur web de développement (`python -m http.server`)
|
||||
- Ouvrir un navigateur (Firefox de préférence) et se rendre sur [cette page](https://localhost:8000)
|
||||
|
||||
|
||||
### 1 - Découverte du JS
|
||||
|
||||
**Objectif :** Découvrir le JavaScript et afficher du texte dans la console
|
||||
|
||||
```admonish travail
|
||||
- Dans votre navigateur, ouvrir la console JS (<kbd>F12</kbd> en général, ou voir cours)
|
||||
- Démarrer le mode "multiligne" (firefox uniquement), qui permet d'écrire plusieurs lignes de code et les exécuter
|
||||
|
||||
!!! example À faire
|
||||
- Dans votre navigateur, ouvrir la console JS (<kbd>F12</kbd> en général, ou voir cours)
|
||||
- Démarrer le mode "multiligne" (firefox uniquement), qui permet d'écrire plusieurs lignes de code et les exécuter
|
||||
|
||||
|
||||
|
||||
- Écrire dans la console le code suivant, puis l'exécuter :
|
||||
~~~js
|
||||
console.log("Hello, World!");
|
||||
~~~
|
||||
- Vérfier que le texte `Hello, World!` s'affiche.
|
||||
- Écrire dans votre console le code suivant puis l'exécuter :
|
||||
~~~js
|
||||
function carré(number){
|
||||
return number * number;
|
||||
}
|
||||
|
||||
console.log(carré(5));
|
||||
~~~
|
||||
- Écrire le code suivant puis analyser la portée des variables et retirer les lignes `console.log` nécessaires pour faire fonctionner le programme
|
||||
~~~js
|
||||
var maVariable = "Hello";
|
||||
function maFonction(){
|
||||
console.log("Dans la fonction");
|
||||
if (true){
|
||||
var autreVariable = "World";
|
||||
let variableInterne = "Bonjour";
|
||||
console.log(`Dans le if : autreVariable = ${autreVariable}`);
|
||||
console.log(`Dans le if : variableInterne = ${variableInterne}`);
|
||||
|
||||
- Écrire dans la console le code suivant, puis l'exécuter :
|
||||
```js
|
||||
console.log("Hello, World!");
|
||||
```
|
||||
- Vérfier que le texte `Hello, World!` s'affiche.
|
||||
- Écrire dans votre console le code suivant puis l'exécuter :
|
||||
```js
|
||||
function carré(number){
|
||||
return number * number;
|
||||
}
|
||||
|
||||
console.log(carré(5));
|
||||
```
|
||||
- Écrire le code suivant puis analyser la portée des variables et retirer les lignes `console.log` nécessaires pour faire fonctionner le programme
|
||||
```js
|
||||
var maVariable = "Hello";
|
||||
function maFonction(){
|
||||
console.log("Dans la fonction");
|
||||
if (true){
|
||||
var autreVariable = "World";
|
||||
let variableInterne = "Bonjour";
|
||||
console.log(`Dans le if : autreVariable = ${autreVariable}`);
|
||||
console.log(`Dans le if : variableInterne = ${variableInterne}`);
|
||||
}
|
||||
console.log(`maVariable = ${maVariable}`);
|
||||
console.log(`Hors du if : autreVariable = ${autreVariable}`);
|
||||
console.log(`Hors du if : variableInterne = ${variableInterne}`);
|
||||
}
|
||||
|
||||
maFonction();
|
||||
console.log("Hors de la fonction");
|
||||
console.log(`maVariable = ${maVariable}`);
|
||||
console.log(`Hors du if : autreVariable = ${autreVariable}`);
|
||||
console.log(`Hors du if : variableInterne = ${variableInterne}`);
|
||||
}
|
||||
console.log(`autreVariable = ${autreVariable}`);
|
||||
console.log(`variableInterne = ${variableInterne}`);
|
||||
```
|
||||
|
||||
maFonction();
|
||||
console.log("Hors de la fonction");
|
||||
console.log(`maVariable = ${maVariable}`);
|
||||
console.log(`autreVariable = ${autreVariable}`);
|
||||
console.log(`variableInterne = ${variableInterne}`);
|
||||
~~~
|
||||
```
|
||||
|
||||
```admonish note title="Dans le compte rendu"
|
||||
- Quel est le rôle du javascript dans le navigateur ?
|
||||
- Que fait la fonction `console.log` ?
|
||||
- Qu'est-ce que `carré` dans le code que vous avez écrit ?
|
||||
- Comment déclarer et appeler une fonction en JavaScript ?
|
||||
- Comment déclarer une variable en JavaScript ?
|
||||
- Quelle est la différence entre var et let ?
|
||||
```
|
||||
!!! note Dans le compte rendu
|
||||
- Quel est le rôle du javascript dans le navigateur ?
|
||||
- Que fait la fonction `console.log` ?
|
||||
- Qu'est-ce que `carré` dans le code que vous avez écrit ?
|
||||
- Comment déclarer et appeler une fonction en JavaScript ?
|
||||
- Comment déclarer une variable en JavaScript ?
|
||||
- Quelle est la différence entre var et let ?
|
||||
|
||||
|
||||
### 2 - Choisir quelle image afficher
|
||||
|
||||
**Objectif :** Écrire une fonction en Javascript pour choisir l'image à afficher
|
||||
|
||||
```admonish travail
|
||||
- Récupérer les 4 images fournies dans un répertoire image dans votre projet
|
||||
- Supprimer l'image `home.png` (elle est remplacée par `building_1.png`)
|
||||
- Dans le fichier `index.html`, remplacer la balise image qui affcihait `home.png` par le code suivant :
|
||||
~~~html
|
||||
<div class="slideshow">
|
||||
<div class="slide">
|
||||
<img src="images/building_1.png" alt="Projet démo 1">
|
||||
!!! example À faire
|
||||
- Récupérer les 4 images fournies dans un répertoire image dans votre projet
|
||||
- Supprimer l'image `home.png` (elle est remplacée par `building_1.png`)
|
||||
- Dans le fichier `index.html`, remplacer la balise image qui affichait `home.png` par le code suivant :
|
||||
```html
|
||||
<div class="slideshow">
|
||||
<div class="slide">
|
||||
<img src="images/building_1.png" alt="Projet démo 1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
~~~
|
||||
- Vérifier que tout s'affiche correctement (comme avant). Corriger le CSS si nécessaire.
|
||||
- Rajouter les trois autres images dans la div `slideshow`, encapsulées chacune dans une balise `div` de classe `slide`. Vous devriez avoir les 4 images à la suite.
|
||||
- Modifier le CSS pour que les éléments de classe `slide` [ne soient plus affichés](https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/display)
|
||||
- Créer le fichier `slideshow.js` à la racine de votre projet
|
||||
- Ajouter la balise suivante, entre les sections `head` et `body` de votre `index.html` :
|
||||
~~~html
|
||||
<script src="slideshow.js" defer></script>
|
||||
~~~
|
||||
- Écrire une fonction `showSlide` qui prend un paramètre `index` représentant le numéro (de 0 à 3 ) de la photo à afficher.
|
||||
- Récupérer les 4 conteneurs de classe `slide` dans une variable locale `slides`. [Fonction à utiliser.](https://developer.mozilla.org/fr/docs/Web/API/Document/getElementsByClassName)
|
||||
- Grâce au code suivant, modifier la propriété de style `display` de l'image d'indice `index` :
|
||||
~~~js
|
||||
slides[index].style.display = "block";
|
||||
~~~
|
||||
- Modifier votre script `slideshow.js` pour appeler votre nouvelle fonction et affciher l'image d'indice 0
|
||||
- Compléter votre compte rendu, puis faire un commit.
|
||||
```
|
||||
```
|
||||
- Vérifier que tout s'affiche correctement (comme avant). Corriger le CSS si nécessaire.
|
||||
- Rajouter les trois autres images dans la div `slideshow`, encapsulées chacune dans une balise `div` de classe `slide`. Vous devriez avoir les 4 images à la suite.
|
||||
- Modifier le CSS pour que les éléments de classe `slide` [ne soient plus affichés](https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/display)
|
||||
- Créer le fichier `slideshow.js` à la racine de votre projet
|
||||
- Ajouter la balise suivante, entre les sections `head` et `body` de votre `index.html` :
|
||||
```html
|
||||
<script src="slideshow.js" defer></script>
|
||||
```
|
||||
- Écrire une fonction `showSlide` qui prend un paramètre `index` représentant le numéro (de 0 à 3 ) de la photo à afficher.
|
||||
- Récupérer les 4 conteneurs de classe `slide` dans une variable locale `slides`. [Fonction à utiliser.](https://developer.mozilla.org/fr/docs/Web/API/Document/getElementsByClassName)
|
||||
- Grâce au code suivant, modifier la propriété de style `display` de l'image d'indice `index` :
|
||||
```js
|
||||
slides[index].style.display = "block";
|
||||
```
|
||||
- Modifier votre script `slideshow.js` pour appeler votre nouvelle fonction et affciher l'image d'indice 0
|
||||
- Compléter votre compte rendu, puis faire un commit.
|
||||
|
||||
|
||||
!!! note Dans le compte rendu
|
||||
- A quoi servent les div de classe `slideshow` et `slide` ?
|
||||
- Pourquoi cache-t-on les images ?
|
||||
- Que fait la ligne `<script src="slideshow.js" defer></script>` ?
|
||||
- Que fait la fonction `document.getElementByClassName` ?
|
||||
- Que fait la ligne suivante : `slides[index].style.display = "block";` ? Aidez-vous du debugger CSS de votre navigateur
|
||||
- Expliquez dans les grandes lignes ce que vous avez fait à cette étape. Quelle sera, selon vous, la suite des opérations ?
|
||||
|
||||
```admonish note title="Dans le compte rendu"
|
||||
- A quoi servent les div de classe `slideshow` et `slide` ?
|
||||
- Pourquoi cache-t-on les images ?
|
||||
- Que fait la ligne `<script src="slideshow.js" defer></script>` ?
|
||||
- Que fait la fonction `document.getElementByClassName` ?
|
||||
- Que fait la ligne suivante : `slides[index].style.display = "block";` ? Aidez-vous du debugger CSS de votre navigateur
|
||||
- Expliquez dans les grandes lignes ce que vous avez fait à cette étape. Quelle sera, selon vous, la suite des opérations ?
|
||||
```
|
||||
|
||||
### 3 - Afficher une seule image à la fois
|
||||
|
||||
**Objectif :** Réussir à n'afficher qu'une image
|
||||
|
||||
```admonish travail
|
||||
- Modifier votre script pour effectuer des appels successifs à `showSlide` avec différentes images. Que constatez-vous ?
|
||||
- Il va donc falloir cacher les autres images pour n'afficher que celle qui nous intéresse (celle passée en paramètre).
|
||||
Pour cela, nous allons utiliser une boucle qui va remettre la propriété `display` de chaque `slide` à `none`. Modifiez
|
||||
votre code pour faire ça.
|
||||
- Vérifiez que cela fonctionne en faisant plusieurs appels successifs à `showSlide` (dans le même script). Seule la dernière image doit être visible.
|
||||
- Complétez le compte rendu et faites un nouveau commit.
|
||||
```
|
||||
!!! example À faire
|
||||
- Modifier votre script pour effectuer des appels successifs à `showSlide` avec différentes images. Que constatez-vous ?
|
||||
- Il va donc falloir cacher les autres images pour n'afficher que celle qui nous intéresse (celle passée en paramètre).
|
||||
Pour cela, nous allons utiliser une boucle qui va remettre la propriété `display` de chaque `slide` à `none`. Modifiez
|
||||
votre code pour faire ça.
|
||||
- Vérifiez que cela fonctionne en faisant plusieurs appels successifs à `showSlide` (dans le même script). Seule la dernière image doit être visible.
|
||||
- Complétez le compte rendu et faites un nouveau commit.
|
||||
|
||||
|
||||
!!! note Dans le compte rendu
|
||||
Expliquez ce que vous avez fait à cette étape.
|
||||
|
||||
```admonish note title="Dans le compte rendu"
|
||||
Expliquez ce que vous avez fait à cette étape.
|
||||
```
|
||||
|
||||
### 4 - Changer d'image dynamiquement
|
||||
|
||||
**Objectif :** Ajouter des boutons pour passer à l'image suivante dynamiquement
|
||||
|
||||
```admonish travail
|
||||
- Dans votre `index.html`, dans la `div` `slideshow` ajouter deux éléments `button`:
|
||||
- Le texte sera `❮` qui représente ❮, et l'id `prevSlide`
|
||||
- Le texte sera `❯` qui représente ❯, et l'id `nextSlide`
|
||||
- Ajoutez dans votre script la fonction : `showSlideRelative(relativeIndex)`.
|
||||
Elle fera appel à `showSlide`. Son paramètre `relativeIndex` indiquera de combien de slides il faudra faire tourner le carousel.
|
||||
Par exemple, si on passe 1 il faudra prendre l'image avec l'index suivant. Si on passe -1 il faudra prendre l'image précédente.
|
||||
- Dans votre `index.html` il va falloir dire à vos deux boutons (`prevSlide` et `nextSlide`) d'appeler la fonction que vous venez de créer lorsqu'on clique dessus. Ajoutez l'attribut `onclick` avec un appel à `showSlideRelative` (en passant 1 pour suivant et -1 pour précédent).
|
||||
- Vérifiez que votre code fonctionne.
|
||||
- (À ajouter dans le compte rendu :) Si vous cliquez sur suivant alors que vous êtes sur l'image 4, que se passe-t-il ? Idem avec précédent à l'image 1 ? Pourquoi ?
|
||||
- Corrigez votre algorithme.
|
||||
- Mettez à jour le compte rendu et faites un nouveau commit.
|
||||
```
|
||||
!!! example À faire
|
||||
- Dans votre `index.html`, dans la `div` `slideshow` ajouter deux éléments `button`:
|
||||
- Le texte sera `❮` qui représente ❮, et l'id `prevSlide`
|
||||
- Le texte sera `❯` qui représente ❯, et l'id `nextSlide`
|
||||
- Ajoutez dans votre script la fonction : `showSlideRelative(relativeIndex)`.
|
||||
- Elle fera appel à `showSlide`.
|
||||
- Son paramètre `relativeIndex` indiquera de combien de slides il faudra faire tourner le carrousel.
|
||||
- Par exemple, si on passe 1 il faudra prendre l'image avec l'index suivant. Si on passe -1 il faudra prendre l'image précédente.
|
||||
- Dans votre `index.html` il va falloir dire à vos deux boutons (`prevSlide` et `nextSlide`) d'appeler la fonction que vous venez de créer lorsqu'on clique dessus. Ajoutez l'attribut `onclick` avec un appel à `showSlideRelative` (en passant 1 pour suivant et -1 pour précédent).
|
||||
- Vérifiez que votre code fonctionne.
|
||||
- (À ajouter dans le compte rendu :) Si vous cliquez sur suivant alors que vous êtes sur l'image 4, que se passe-t-il ? Idem avec précédent à l'image 1 ? Pourquoi ?
|
||||
- Corrigez votre algorithme.
|
||||
- Mettez à jour le compte rendu et faites un nouveau commit.
|
||||
|
||||
```admonish help title="Aide"
|
||||
- Votre nouvelle fonction doit calculer le nouvel indice et le passer à `showSlide`.
|
||||
- Vous aurez besoin d'une variable globale `slideIndex` pour retenir la slide affichée. Vous pourrez ensuite ajouter `relativeIndex` à `slideIndex`
|
||||
- N'oubliez pas de mettre à jour l'index global en mémoire dans `showSlide`
|
||||
```
|
||||
|
||||
```admonish note title="Dans le compte rendu"
|
||||
- Que sont `❮` et `❯` ?
|
||||
- Expliquez ce que vous avez fait à cette étape. N'oubliez pas d'expliquer comment vous avez résolu le problème de rotation des indices.
|
||||
```
|
||||
!!! question Aide
|
||||
- Vous aurez besoin de garder en mémoire la slide affichée pour savoir quelle est la slide suivante/précédente.
|
||||
- Vous aurez donc besoin d'une variable globale `slideIndex` pour retenir la slide affichée. Vous pourrez ensuite ajouter `relativeIndex` à `slideIndex`.
|
||||
- Votre nouvelle fonction doit calculer le nouvel indice et le passer à `showSlide`.
|
||||
- N'oubliez pas de mettre à jour l'index global en mémoire dans `showSlide`
|
||||
|
||||
|
||||
!!! note Dans le compte rendu
|
||||
- Que sont `❮` et `❯` ?
|
||||
- Expliquez ce que vous avez fait à cette étape. N'oubliez pas d'expliquer comment vous avez résolu le problème de rotation des indices.
|
||||
|
||||
|
||||
### 5 - Améliorer la lisibilité des boutons de rotation
|
||||
|
||||
**Objectif :** Modifier le CSS des boutons pour les afficher sur l'image et aider l'utilisateurice à comprendre qu'ils sont cliquables
|
||||
|
||||
```admonish travail
|
||||
- Dans le CSS, ajouter un sélecteur sur les deux boutons (via leurs ids) puis :
|
||||
- Modifier la [propriété `position`](https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/position) à la valeur `absolute` (attention à ce que vous deux boutons soient bien inclus dans la div `slideshow`)
|
||||
- Modifier la proriété `position` de `slideshow` à `relative`
|
||||
- Modifier les propriétés [`top`](https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/top) et [`right`](https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/right) des boutons de façon à ce qu'ils soient bien de chaque côté de l'image et centrés verticalement.
|
||||
- Modifier la propriété `cursor` pour changer le curseur de façon à comprendre qu'on a un objet cliquable
|
||||
- Compléter le copmpte-rendu et faire un nouveau commit
|
||||
```
|
||||
!!! example À faire
|
||||
- Dans le CSS, ajouter un sélecteur sur les deux boutons (via leurs ids) puis :
|
||||
- Modifier la [propriété `position`](https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/position) à la valeur `absolute` (attention à ce que vous deux boutons soient bien inclus dans la div `slideshow`)
|
||||
- Modifier la proriété `position` de `slideshow` à `relative`
|
||||
- Modifier les propriétés [`top`](https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/top) et [`right`](https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/right) des boutons de façon à ce qu'ils soient bien de chaque côté de l'image et centrés verticalement.
|
||||
- Modifier la propriété `cursor` pour changer le curseur de façon à comprendre qu'on a un objet cliquable
|
||||
- Compléter le copmpte-rendu et faire un nouveau commit
|
||||
|
||||
|
||||
!!! note Dans le compte rendu
|
||||
- Que fait la propriété CSS `position` ?
|
||||
- Pourquoi avons-nous changé cette propriété dans `slideshow` et les boutons ?
|
||||
- Que font `top`, `right` et `left` ? Dans quel cas peut-on les utiliser ?
|
||||
- Expliquer ce que vous avez fait à cette étape
|
||||
|
||||
|
||||
### 6 - Effectuer une rotation automatique des images
|
||||
|
||||
**Objectif :** Changer l'image affichée toutes les deux secondes automatiquement
|
||||
|
||||
!!! example À faire
|
||||
- Lire la documentation de la fonction [`setInterval`](https://developer.mozilla.org/en-US/docs/Web/API/Window/setInterval) et celle de [`setTimeout`](https://developer.mozilla.org/fr/docs/Web/API/Window/setTimeout). Choisir celle qui vous paraît la plus adaptée. Justifier dans le compte rendu.
|
||||
- Quelle fonction (déjà écrite par vos soins) allez-vous appeler à intervalles réguliers pour faire tourner votre carrousel ? Écrivez le code correspondant. Utilisez l'aide ci-dessous.
|
||||
- Validez que votre code fonctionne.
|
||||
- Mettez à jour votre compte rendu et faites un commit.
|
||||
|
||||
|
||||
!!! question Aide
|
||||
- Nous devons passer une **fonction** en paramètre à `setInterval` (ou `setTimeout`). Il s'agit bien d'une fonction, et non pas d'un appel à la fonction (qui ne donnerait qu'un seul résultat) ! C'est `setInterval` qui se chargera d'appeler votre fonction à intervalles réguliers.
|
||||
- Mais pourtant, nous avons besoin de passer des paramètres à cette fonction. Il faut donc une solution pour les passer également.
|
||||
- Deux possibilités pour ça :
|
||||
- `setInterval` propose de prendre des arguments supplémentaires, qui seront passés à la fonction (voir doc)
|
||||
- on utilise une fonction anonyme qui ne prend pas de paramètre avec la syntaxe suivante :
|
||||
```js
|
||||
() => mafonction(param1, param2, ...)
|
||||
```
|
||||
|
||||
|
||||
!!! note Dans le compte rendu
|
||||
- Justifier le choix entre `setInterval` et `setTimeout` et expliquer l'algorithme que vous avez choisi pour changer d'image toutes les deux secondes.
|
||||
- `setInterval` et `setTimeout` permettent de passer une fonction ou un bout de code sous forme de chaîne de caractères comme paramètre. Qu'allez vous préférer et pourquoi ? Pensez à vérifier d'éventuelles problématiques de sécurité.
|
||||
|
||||
|
||||
### 7 - Segmenter le JavaScript et le HTML
|
||||
|
||||
**Objectif :** Lier les actions des boutons directement depuis le CSS pour une meilleure maintenabilité du code
|
||||
|
||||
!!! example À faire
|
||||
Les boutons `prevSlide` et `nextSlide` ont un attribut `onclick` dans lequel vous avez ajouté du code JavaScript (`onclick=showSlideRelative(1)` par exemple).
|
||||
C'est une pratique à éviter, car elle complique la maintenance du code, et rompt la séparation des responsabilités. Le HTML ne devrait contenir que des informations de contenu.
|
||||
|
||||
Nous allons donc y remédier.
|
||||
- Retirez les attributs `onclick` de vos deux boutons `prevSlide` et `nextSlide`.
|
||||
- Ajoutez une fonction d'initialisation dans votre code JS qui ne prend aucun argument. Vous pouvez l'appeler `initcarrousel` par exemple.
|
||||
- Dans cette fonction déplacez l'appel à `showSlide(slideIndex)` que vous utilisiez pour initialiser le carrousel. Gardez en revanche la variable globale à l'extérieur.
|
||||
- Il va maintenant falloir dire aux deux boutons d'écouter les évènements de clic et de les gérer avec la méthode `showSlideRelative` :
|
||||
- Récupérez les références aux boutons par id grâce à [`document.getElementById`](https://developer.mozilla.org/fr/docs/Web/API/Document/getElementById)
|
||||
- Utilisez la méthode [`addEventListener`](https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener) pour ajouter le gestionnaire d'évènements sur un clic
|
||||
- Le type sera `"click"`
|
||||
- Le listener sera une [fonction anonyme](https://developer.mozilla.org/fr/docs/Glossary/Function#diff%C3%A9rents_types_de_fonctions) qui appellera `showSlideRelative(1)` ou `showSlideRelative(-1)` selon le bouton (voir aide ci-dessous).
|
||||
- Validez que votre code fonctionne toujours comme avant.
|
||||
- Complétez le compte-rendu et faites un nouveau commit.
|
||||
|
||||
|
||||
!!! question Aide
|
||||
Pour ajouter un gestionnaire d'évènements il faut passer un fonction **sans paramètre** à `addEventListener`. Or notre fonction `showSlideRelative` prend un paramètre (1 ou -1).
|
||||
Il faut donc trouver une solution pour passer le paramètre directement lors de la création du gestionnaire d'évènements.
|
||||
|
||||
Pour cela on peut créer une nouvelle fonction à usage unique, qui ne prendra aucun paramètre et appellera directement `showSlideRelative(1)` ou `showSlideRelative(-1)` selon le bouton.
|
||||
|
||||
Ce type de fonctions à usage unique est très courant en JavaScript. C'est pour cela qu'il y a une syntaxe permettant de créer des fonctions anonymes (sans nom) qu'on peut utiliser dans ce cas.
|
||||
|
||||
Deux syntaxes équivalentes sont possibles :
|
||||
- La syntaxe classique d'une déclaration de fonction, sans nom : `(function () { /* mon code ici */ });`
|
||||
- La syntaxe fléchée, plus courte : `() => { /* Mon code ici */ };`
|
||||
|
||||
|
||||
!!! note Dans le compte rendu
|
||||
- Expliquez ce que vous avez changé dans cette partie, et pourquoi.
|
||||
|
||||
|
||||
## Pour aller plus loin
|
||||
|
||||
### Bonus - Améliorer le style du carrousel pour qu'il ressemble à celui de l'image du résultat attendu
|
||||
|
||||
**Objectif :** Compléter le HTML et le CSS pour avoir des boutons et un compteur d'images dans le style de l'image du résultat attendu du sujet.
|
||||
|
||||
|
||||
### Bonus - Sélectionner l'image à afficher avec un clic
|
||||
|
||||
**Objectif :** Ajouter des boutons pour sélectionner une image précise sans cliquer plusieurs fois sur les boutons de rotation
|
||||
|
||||
!!! example À faire
|
||||
Sur l'image résultat attendu, vous avez pu voir en bas de l'image, au centre des points gris et un blanc.
|
||||
|
||||
Dans cette partie, vous allez réutiliser toutes les notions vues au cours de l'activité pour dessiner cette zone et rendre les points cliquables.
|
||||
- HTML : il faudra ajouter un `div` de classe `dots` contenant des `span` de classe `dot` à la fin de la div `slideshow`. Le ● est le caractère unicode `●`
|
||||
- CSS : il faut mettre la position de `dots` en relative et jouer avec `top` et `right` pour bien positionner la boîte. Améliorez le style pour un aspect visuel ressemblant à celui de l'image.
|
||||
- CSS : prévoyez une classe `active` pour le point correspondant à l'image en cours. Cela changera juste la couleur du bouton en blanc. On ajoutera cette classe au bon élément via le JS.
|
||||
- JS : Modifiez `slideShow` pour ajouter la classe `active` au point d'indice `index` (et la retirer des autres). Vous utiliserez la [propriété `className`](https://developer.mozilla.org/fr/docs/Web/API/Element/className)
|
||||
- JS : Modifiez votre initialisation pour ajouter des gestionnaires d'évènements aux points (utilisez une boucle). Il faudra appeler `showSlide(i)` dans le gestionnaire, avec i l'indice du point (correspondant à l'indice de l'image)
|
||||
|
||||
```admonish note title="Dans le compte rendu"
|
||||
- Que fait la propriété CSS `position` ?
|
||||
- Pourquoi avons-nous changé cette propriété dans `slideshow` et les boutons ?
|
||||
- Que font `top`, `right` et `left` ? Dans quel cas peut-on les utiliser ?
|
||||
- Expliquer ce que vous avez fait à cette étape
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,66 +0,0 @@
|
|||
|
||||
### 6 - Effectuer une rotation automatique
|
||||
|
||||
**Objectif :** Changer l'image affichée toutes les deux secondes automatiquement
|
||||
|
||||
```admonish travail
|
||||
- Lire la documentation de la fonction [`setInterval`](https://developer.mozilla.org/en-US/docs/Web/API/Window/setInterval) et celle de [`setTimeout`](https://developer.mozilla.org/fr/docs/Web/API/Window/setTimeout). Choisir celle qui vous paraît la plus adaptée. Justifier dans le compte rendu.
|
||||
- Quelle fonction (déjà écrite par vos soins) allez-vous appeler à intervalles réguliers pour faire tourner votre carousel ? Ecrivez le code correspondant. Utilisez l'aide ci-dessous.
|
||||
- Validez que votre code fonctionne.
|
||||
- Mettez à jour votre compte rendu et faites un commit.
|
||||
```
|
||||
|
||||
```admonish help title="Aide"
|
||||
- Nous devons passer une **fonction** en paramètre à `setInterval` (ou `setTimeout`). Il s'agit bien d'une fonction, et non pas d'un appel à la fonction (qui ne donnerait qu'un seul résultat) ! C'est `setInterval` qui se chargera d'appeler votre fonction à intervalles réguliers.
|
||||
- Mais pourtant, nous avons besoin de passer des paramètres à cette fonction. Il faut donc une solution pour les passer également.
|
||||
- Deux possibilités pour ça :
|
||||
- `setInterval` propose de prendre des arguments supplémentaires, qui seront passés à la fonction (voir doc)
|
||||
- on utilise une fonction anonyme qui ne prend pas de paramètre avec la syntaxe suivante :
|
||||
~~~js
|
||||
() => mafonction(param1, param2, ...)
|
||||
~~~
|
||||
```
|
||||
|
||||
```admonish note title="Dans le compte rendu"
|
||||
- Justifier le choix entre `setInterval` et `setTimeout` et expliquer l'algorithme que vous avez choisi pour changer d'image toutes les deux secondes.
|
||||
- `setInterval` et `setTimeout` permettent de passer une fonction ou un bout de code sous forme de chaîne de caractères comme paramètre. Qu'allez vous préférer et pourquoi ? Pensez à vérifier d'éventuelles problématiques de sécurité.
|
||||
```
|
||||
|
||||
### 7 - Segmenter le JavaScript et le HTML
|
||||
|
||||
**Objectif :** Lier les actions des boutons directement depuis le CSS pour une meilleure maintenabilité du code
|
||||
|
||||
```admonish travail
|
||||
|
||||
```
|
||||
|
||||
```admonish help title="Aide"
|
||||
```
|
||||
|
||||
```admonish warning title="Attention"
|
||||
```
|
||||
|
||||
```admonish note title="Dans le compte rendu"
|
||||
```
|
||||
|
||||
## Pour aller plus loin
|
||||
|
||||
### Bonus - Sélectionner l'image à afficher avec un clic
|
||||
|
||||
**Objectif :** Ajouter des boutons pour sélectionner une image précise sans cliquer plusieurs fois sur les boutons de rotation
|
||||
|
||||
```admonish travail
|
||||
-
|
||||
```
|
||||
|
||||
```admonish help title="Aide"
|
||||
```
|
||||
|
||||
```admonish warning title="Attention"
|
||||
```
|
||||
|
||||
```admonish note title="Dans le compte rendu"
|
||||
```
|
||||
|
||||
|
||||
### Ressources
|
||||
BIN
src/cours/CIEL1/05-web-js/images/final.png
Normal file
BIN
src/cours/CIEL1/05-web-js/images/final.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 810 KiB |
97
src/cours/annexes/competences.md
Normal file
97
src/cours/annexes/competences.md
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
## C01: COMMUNIQUER EN SITUATION PROFESSIONNELLE (FRANÇAIS/ANGLAIS)
|
||||
- La présentation (typographie, orthographe, illustration, lisibilité) est soignée et soutient le discours avec des enchaînements cohérents
|
||||
- La présentation orale (support et expression) est de qualité et claire
|
||||
- L'argumentation développée lors de la présentation et lors de l'échange est de qualité
|
||||
- Les éventuelles situations de handicap des personnes sont prises en compte
|
||||
- Le style, le ton et la terminologie utilisés sont adaptés à la personne et aux circonstances
|
||||
- L’attitude, les comportements et le langage adoptés sont conformes aux règles de la profession, la réaction est adaptée au contexte
|
||||
|
||||
## C02: ORGANISER UNE INTERVENTION
|
||||
- Les différents interlocuteurs et ressources sont identifiés
|
||||
- Le cahier des charges préliminaire est complété et les ressources permettant de répondre au cahier des charges sont décrites
|
||||
- Le planning prévisionnel est interprété
|
||||
- Face à un ensemble de faits, des actions appropriées à poser sont décidées
|
||||
- De façon à poser des actions au moment opportun dans un contexte déterminé, la prise en charge est adaptée selon les responsabilités
|
||||
- Le travail est préparé de façon à satisfaire les exigences de qualité, d’efficacité et d’échéancier
|
||||
|
||||
## C03: GÉRER UN PROJET
|
||||
- Les tâches sont réparties, les documents sont renseignés, un planning prévisionnel est proposé
|
||||
- L’adéquation des ressources humaines et des ressources matérielles pour mener le projet est validée
|
||||
- L’équipe projet communique correctement et gère les retards et les aléas
|
||||
- Les travaux sont réalisés et livrés avec la documentation en concordance avec les besoins du client
|
||||
- Les tâches sont réparties en tenant compte des compétences et des situations de handicap éventuelles
|
||||
- Le travail est préparé de façon à satisfaire les exigences de qualité, d’efficacité et d’échéancier
|
||||
- La résolution d'un problème nouveau / imprévu est réussie en utilisant ses propres moyens conformément aux règles de la fonction
|
||||
- Le travail en équipe est conduit de manière solidaire en contribuant par des idées et des efforts
|
||||
|
||||
## C04: ANALYSER UN SYSTÈME INFORMATIQUE
|
||||
- Les spécifications du cahier des charges sont extraites
|
||||
- La structure de la solution technique est analysée avec un regard critique
|
||||
- Les algorithmes sont analysés avec un regard critique
|
||||
- Le travail est préparé de façon à satisfaire les exigences de qualité, d’efficacité et d’échéancier
|
||||
- Le calme est conservé de façon constante dans des situations particulières, tout en persévérant dans la tâche jusqu’à l’atteinte du résultat sans se décourager
|
||||
- Face à un ensemble de faits, des actions appropriées à poser sont décidées
|
||||
- Les risques d’une situation de travail sont repérés et les mesures appropriées pour sa santé, sa sécurité et celle des autres sont adoptées
|
||||
- Analyser la complexité d'un système cryptographique
|
||||
- Identifier les composants d'un système de codage
|
||||
- Évaluer la robustesse d'une solution cryptographique
|
||||
- Identifier les vulnérabilités et attaques possibles
|
||||
|
||||
## C05: CONCEVOIR UN SYSTÈME INFORMATIQUE
|
||||
- Les ressources permettant de réaliser le cahier des charges sont recensées et définies
|
||||
- Les solutions logicielles proposées sont conformes aux spécifications du cahier des charges
|
||||
- Les tests unitaires et d’intégrations sont définis
|
||||
- Le document de recette est rédigé conformément aux exigences du cahier des charges
|
||||
- Des idées, pratiques, ressources inhabituelles sont introduites pour l’avancement de son travail ou de celui des autres
|
||||
- Le travail est préparé de façon à satisfaire les exigences de qualité, d’efficacité et d’échéancier
|
||||
- Le souci constant de la qualité est recherché, les besoins sont anticipés et de la qualité est démontrée en regard des tâches à réaliser
|
||||
|
||||
## C06: VALIDER UN SYSTÈME INFORMATIQUE
|
||||
- Les exigences à valider sont identifiées dans le périmètre défini
|
||||
- Les procédures de test sont établies
|
||||
- Les tests (unitaires, d’intégration et autres) sont appliqués
|
||||
- Les résultats de tests sont synthétisés pour évaluer la conformité globale
|
||||
- Le document de recette est validé par le client et la recette est réalisée avec le client
|
||||
- Le travail est préparé de façon à satisfaire les exigences de qualité, d’efficacité et d’échéancier
|
||||
- Le calme est conservé de façon constante dans des situations particulières, tout en persévérant dans la tâche jusqu’à l’atteinte du résultat décourager
|
||||
- Face à un ensemble de faits, des actions appropriées à poser sont décidées
|
||||
|
||||
## C08: CODER
|
||||
- Le code est versionné, commenté et le logiciel est documenté
|
||||
- Les composants logiciels individuels sont développés conformément aux spécifications du cahier des charges, des bonnes pratiques et des différentes politiques de sécurité et de protection des données personnelles
|
||||
- La solution (logicielle et matérielle) est intégrée et testée conformément aux spécifications du cahier des charges, des bonnes pratiques et des différentes politiques de sécurité et de protection des données personnelles
|
||||
- La résolution d'un problème nouveau imprévu est réussie en utilisant ses propres moyens conformément aux règles de la fonction
|
||||
- Le travail est effectué selon les attentes exprimées de temps, de quantité ou de qualité
|
||||
- Le travail est préparé de façon à satisfaire les exigences de qualité, d’efficacité et d’échéancier
|
||||
- Comprendre et expliquer un algorithme de chiffrement
|
||||
- Appliquer manuellement un algorithme
|
||||
- Analyser et tracer l'exécution d'un code
|
||||
- Maîtriser les opérateurs spécifiques d'un langage
|
||||
|
||||
## C09: INSTALLER UN RÉSEAU INFORMATIQUE
|
||||
- Les équipements nécessaires à la réponse au CDC (fourni par le client) sont identifiés
|
||||
- Une procédure de configuration ou d’installation est déterminée ainsi que les points critiques, les procédures étant soumises à validation si nécessaire
|
||||
- La ou les procédures choisies sont suivies
|
||||
- Les activités sont menées en respectant les règles de sécurité
|
||||
- Un compte-rendu du fonctionnement de l'installation est fourni (anomalies, difficultés et retours clients etc)
|
||||
- Le style, le ton et la terminologie utilisés sont adaptés à la personne et aux circonstances
|
||||
- Le travail est effectué selon les attentes exprimées de temps, de quantité ou de qualité
|
||||
- Le travail est préparé de façon à satisfaire les exigences de qualité, d’efficacité et d’échéancier
|
||||
|
||||
## C10: EXPLOITER UN RÉSEAU INFORMATIQUE
|
||||
- Les différents éléments matériels et/ou logiciels sont identifiés à partir d’un schéma fourni
|
||||
- Le fonctionnement d’un équipement matériel et/ou logiciel est vérifié en tenant compte du contexte opérationnel
|
||||
- La mise à jour d’un matériel et/ou logiciel est proposée et justifiée
|
||||
- Les optimisations ou résolution d’incidents nécessaires sont effectuées
|
||||
- La résolution d'un problème nouveau / imprévu est réussie en utilisant ses propres moyens conformément aux règles de la fonction
|
||||
- Le travail en équipe est conduit de manière solidaire en contribuant par des idées et des efforts
|
||||
- Face à un ensemble de faits, des actions appropriées à poser sont décidées
|
||||
|
||||
## C11: MAINTENIR UN RÉSEAU INFORMATIQUE
|
||||
- Les outils logiciels et matériels permettant d’effectuer les tests et l’analyse du système d’information sont identifiés et mis en œuvre selon les spécifications
|
||||
- Les résultats de tests et d’analyse sont interprétés de manière pertinente et les causes de l’incident sont localisées
|
||||
- L’incident est résolu ou qualifié et escaladé, le service est opérationnel
|
||||
- Le style, le ton et la terminologie utilisés sont adaptés à la personne et aux circonstances
|
||||
- Les risques d’une situation de travail sont repérés et les mesures appropriées pour sa santé, sa sécurité et celle des autres sont adoptées
|
||||
- Face à un ensemble de faits, des actions appropriées à poser sont décidées
|
||||
- Le client est correctement informé et conseillé quant aux mesures de prévention possibles
|
||||
Loading…
Add table
Add a link
Reference in a new issue