Compare commits
5 commits
e5419465d6
...
aeaa11bd5c
| Author | SHA1 | Date | |
|---|---|---|---|
| aeaa11bd5c | |||
| fb19961668 | |||
| 469d7ea021 | |||
| 765bfc3297 | |||
| 0f8c2f12d8 |
12 changed files with 1007 additions and 1 deletions
|
|
@ -163,6 +163,21 @@ header {
|
|||
font-size: .3rem;
|
||||
}
|
||||
|
||||
kbd {
|
||||
background-color: var(--surface0);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--overlay0);
|
||||
box-shadow:
|
||||
0 2px 1px rgba(0, 0, 0, 0.2);
|
||||
color: var(--text);
|
||||
display: inline-block;
|
||||
font-size: 0.85em;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
padding: 2px 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
code.hljs {
|
||||
color: var(--text);
|
||||
background: var(--base)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
---
|
||||
puppeteer:
|
||||
format: A4
|
||||
margin:
|
||||
top: "0.1cm"
|
||||
bottom: "0.1cm"
|
||||
left: "0.5cm"
|
||||
right: "0.5cm"
|
||||
---
|
||||
|
||||
# Evaluation - UFA B1
|
||||
|
||||
## Partie 1 - Python (10 points)
|
||||
|
||||
#### Questions (6 pts)
|
||||
|
||||
1. (1 pts) Quel est le type des valeurs suivantes ? (types possibles : int, float, bool, str)
|
||||
- [ ] 2
|
||||
- [ ] 2.4
|
||||
- [ ] "Bonjour !"
|
||||
- [ ] True
|
||||
- [ ] "17"
|
||||
|
||||
2. (1pt) Donner les deux types de boucles possibles en Python.
|
||||
|
||||
3. (1pt) Quel type de boucle préfère-t-on si on a un nombre d'itérations connu d'avance ?
|
||||
|
||||
4. (2pts) Lire le code ci-dessous et répondre aux questions :
|
||||
1. Qu'est-ce que `calculer_age` ?
|
||||
2. Où se trouvent les paramètres ? la valeur de retour ?
|
||||
3. Que vaut `mon_age` ?
|
||||
```python
|
||||
def calculer_age(annee_de_naissance):
|
||||
annee_en_cours = 2025
|
||||
age = annee_en_cours - annee_de_naissance
|
||||
return age
|
||||
|
||||
mon_age = calculer_age(2000)
|
||||
```
|
||||
|
||||
5. (1pt) Quel opérateur utiliser pour dire "différent de" ?
|
||||
|
||||
#### Exercices (4pts)
|
||||
|
||||
1. (2pts) Écrire un programme qui demande le prénom de l'utilisateur et le salue :
|
||||
- Par exemple, si l'utilisateur s'appelle Jean, le programme devra afficher `Bonjour, Jean !`
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
1. (2pts) Écrire une **fonction** `moyenne` qui retourne la moyenne des valeurs d’une liste fournie en paramètre.
|
||||
- Par **exemple**, `moyenne([10, 20, 30])` doit retourner `20`.
|
||||
- La fonction ne doit rien afficher, seulement **retourner** le résultat.
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
## Partie 2 - Adressage IP (10 points)
|
||||
|
||||
Une entreprise souhaite relier ses 80 machines dans un réseau informatique. L'administrateur choisit le réseau 192.168.1.0/24
|
||||
1. (1pt) Donnez le masque de ce réseau
|
||||
2. (1pt) Donnez la première et la dernière adresse du réseau
|
||||
3. (1pt) Combien de machines peuvent être connectées en même temps sur ce réseau ?
|
||||
4. (1pt) Quelle est l'adresse de broadcast du réseau ?
|
||||
5. (2pt) Est-ce que ce réseau est un bon choix pour l'entreprise ? Justifiez
|
||||
6. (1pt) Dans quel cas doit-on utiliser l'adresse de broadcast ?
|
||||
7. (1pt) Si on souhaite découper le réseau en 8 sous-réseaux, quel sera le masque qui permettra ce découpage ?
|
||||
8. (2pt) Dites si les adresses suivantes sont publiques ou privées et si elles peuvent servir à adresser une machine :
|
||||
| Adresse | Publique/Privée | Valide pour machine ? |
|
||||
| ------------ | --------------- | --------------------- |
|
||||
| 223.45.52.12 | | |
|
||||
| 172.19.2.21 | | |
|
||||
| 172.44.17.0 | | |
|
||||
| 127.0.0.1 | | |
|
||||
63
src/cours/CIEL1/04-web-statique/interro.md
Normal file
63
src/cours/CIEL1/04-web-statique/interro.md
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
---
|
||||
puppeteer:
|
||||
format: A4
|
||||
margin:
|
||||
top: "0.1cm"
|
||||
bottom: "0.1cm"
|
||||
left: "0.5cm"
|
||||
right: "0.5cm"
|
||||
---
|
||||
|
||||
# Web - Interrogation de cours
|
||||
|
||||
##### 1 - Expliquez ce que permet de faire le HTML, et quel est son rôle dans la création d'une page web
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
##### 2 - Compléter le code suivant pour avoir la structure de base d'un fichier HTML
|
||||
|
||||
```html
|
||||
<!........... html>
|
||||
|
||||
<.......... lang="en">
|
||||
|
||||
<..........>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
|
||||
</............>
|
||||
|
||||
<.............>
|
||||
|
||||
</............>
|
||||
|
||||
</............>
|
||||
```
|
||||
|
||||
##### 3 - Expliquez la différence entre une balise HTML paire et une balise orpheline. Donnez un exemple de chaque type.
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
##### 4 - Expliquez ce que permet de faire le CSS
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
##### 5 - Présentez la structure de base d'une règle CSS en nommant les 3 parties principales
|
||||
213
src/cours/CIEL1/05-web-js/activite3-js-bases.md
Normal file
213
src/cours/CIEL1/05-web-js/activite3-js-bases.md
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
# Web - Activité 3 - Carousel 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.
|
||||
|
||||
## Validation
|
||||
### Livrables
|
||||
|
||||
- Le code final
|
||||
- Le compte-rendu de l'activité
|
||||
|
||||
Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM2_Prenom2`.
|
||||
- Le compte rendu peut-être livré au format Markdown ou PDF.
|
||||
- Si vous choisissez le Markdown, attention à bien livrer les éventuelles images et à la validité des liens
|
||||
|
||||
### 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 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é
|
||||
|
||||
|
||||
## Ressources fournies
|
||||
|
||||
- Documentations:
|
||||
- HTML
|
||||
- CSS
|
||||
- JavaScript
|
||||
- Cours de JavaScript
|
||||
- 4 images à intégrer dans le projet
|
||||
|
||||
## Étapes
|
||||
|
||||
### 0 - Préparation
|
||||
|
||||
**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)
|
||||
```
|
||||
|
||||
### 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
|
||||
|
||||
|
||||
|
||||
- É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 l'exécuter
|
||||
~~~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}`);
|
||||
}
|
||||
console.log("Hors de la fonction");
|
||||
console.log(`maVariable = ${maVariable}`);
|
||||
console.log(`autreVariable = ${autreVariable}`);
|
||||
console.log(`variableInterne = ${variableInterne}`);
|
||||
~~~
|
||||
- Modifier le code précédent pour exécuter la fonction `maFonction`
|
||||
```
|
||||
|
||||
```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 ?
|
||||
```
|
||||
|
||||
### 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">
|
||||
</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.
|
||||
```
|
||||
|
||||
```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.
|
||||
```
|
||||
|
||||
```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.
|
||||
```
|
||||
|
||||
```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.
|
||||
```
|
||||
|
||||
### 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
|
||||
```
|
||||
|
||||
```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
|
||||
```
|
||||
66
src/cours/CIEL1/05-web-js/activite4.md
Normal file
66
src/cours/CIEL1/05-web-js/activite4.md
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
|
||||
### 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/image-1.png
Normal file
BIN
src/cours/CIEL1/05-web-js/image-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
src/cours/CIEL1/05-web-js/image-2.png
Normal file
BIN
src/cours/CIEL1/05-web-js/image-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/cours/CIEL1/05-web-js/image.png
Normal file
BIN
src/cours/CIEL1/05-web-js/image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
|
|
@ -28,9 +28,10 @@
|
|||
- [Git - Dépôts distants](./CIEL1/03-git/cours2.md)
|
||||
- [TP1 - Découvrir Git](./CIEL1/03-git/tp1.md)
|
||||
- [TP2 - Les branches et les dépôts distants](./CIEL1/03-git/tp2.md)
|
||||
- [Le web statique](./CIEL1/04-web-statique/web-statique.md)
|
||||
- [Le web](./CIEL1/04-web-statique/web-statique.md)
|
||||
- [Activité 1 - Découverte HTML](./CIEL1/04-web-statique/tp/tp01-html-bases.md)
|
||||
- [Activité 2 - Découverte CSS](./CIEL1/04-web-statique/tp/tp02-css-bases.md)
|
||||
- [Activité 3 - Carousel en JavaScript](./CIEL1/05-web-js/activite3-js-bases.md)
|
||||
- [JavaScript](./CIEL1/05-web-js/web-js.md)
|
||||
- [Les conteneurs](./CIEL1/06-conteneurs/conteneurs.md)
|
||||
- [Bases de données](./CIEL1/07-bases-de-donnees/bases-de-donnees.md)
|
||||
|
|
|
|||
100
src/slides/B1/ap/02-travail-collaboratif.md
Normal file
100
src/slides/B1/ap/02-travail-collaboratif.md
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
---
|
||||
marp: true
|
||||
theme: catppuccin
|
||||
paginate: true
|
||||
size: 4:3
|
||||
transition: coverflow
|
||||
footer: ''
|
||||
math: katex
|
||||
lang: "fr"
|
||||
---
|
||||
|
||||
<style>
|
||||
section {
|
||||
font-size: 28px;
|
||||
text-align: left
|
||||
}
|
||||
</style>
|
||||
|
||||
# Travail collaboratif
|
||||
|
||||
---
|
||||
|
||||
## Outils de communication
|
||||
|
||||
Jitsi : plusieurs instances possibles
|
||||
- [Framatalk](https://framatalk.org/abc/fr/)
|
||||
- [Jitsi](https://meet.jit.si/?rCounter=1)
|
||||
- [Autre instance](https://jitsi.ungol.fr/)
|
||||
|
||||
Chat via Matrix
|
||||
- [Element](https://element.io/fr/download)
|
||||
- [FluffyChat](https://fluffychat.im/web/#/home)
|
||||
|
||||
---
|
||||
|
||||
Outils non libres (pas forcément recommandés) :
|
||||
- Discord (Attention à la vie privée)
|
||||
- Teams (Pas très pratique + vie privée)
|
||||
- Google Meet (Vie privée)
|
||||
|
||||
---
|
||||
|
||||
## Outils de travail en groupe
|
||||
|
||||
---
|
||||
|
||||
### Documents
|
||||
|
||||
- [Sur l'ENT](https://enthdf.fr/lool#/)
|
||||
- [CryptPad](https://cryptpad.fr/)
|
||||
- Chiffré
|
||||
- Markdown, présentations, docs, tableaux, diagrammes..
|
||||
- Stockage
|
||||
- Pas forcément besoin de compte
|
||||
- [Framapad](https://framapad.org/abc/fr/)
|
||||
|
||||
---
|
||||
|
||||
### Schémas
|
||||
|
||||
- Sur l'ENT :
|
||||
- [Carte mentale](https://enthdf.fr/mindmap)
|
||||
- [Draw.io](https://app.diagrams.net/)
|
||||
- Enregistrement sur divers cloud
|
||||
- [Excalidraw](https://excalidraw.com/) ou [ici](https://excalidraw.framalab.org/)
|
||||
- Enregistrement dans votre navigateur uniquement
|
||||
- Cryptpad encore
|
||||
|
||||
---
|
||||
|
||||
### Code
|
||||
|
||||
- Plateformes basées sur Git
|
||||
- [Gitlab](https://about.gitlab.com/), [Framagit](https://framagit.org/public/projects)
|
||||
- [Codeberg](https://codeberg.org/)
|
||||
- GitHub (mais chez Microsoft)
|
||||
- Code en temps réel
|
||||
- [LiveShare](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
|
||||
- Nécessite un compte Microsoft ou GitHub
|
||||
- Extension VSCode
|
||||
- Cryptpad
|
||||
|
||||
---
|
||||
|
||||
## Autres outils pratiques
|
||||
|
||||
- [Partage de gros fichiers](https://enthdf.fr/sharebigfiles)
|
||||
- [Manipulation de PDF](https://stirling-pdf.framalab.org/) ou [ici (plus simple)](https://signature-pdf.framalab.org/)
|
||||
- [Trouver un créneau commun](https://framadate.org/abc/fr/)
|
||||
- [Autres services](https://degooglisons-internet.org/fr/)
|
||||
- [Trouver d'autres logiciels respectueux de vos données et libres](https://framalibre.org/)
|
||||
|
||||
---
|
||||
|
||||
## Demo ?
|
||||
|
||||
- Cryptpad
|
||||
- Liveshare
|
||||
- Excalidraw
|
||||
- Draw.io
|
||||
451
src/slides/B1/web/03_javascript.md
Normal file
451
src/slides/B1/web/03_javascript.md
Normal file
|
|
@ -0,0 +1,451 @@
|
|||
---
|
||||
marp: true
|
||||
theme: catppuccin
|
||||
paginate: true
|
||||
size: 4:3
|
||||
transition: coverflow
|
||||
footer: ''
|
||||
math: katex
|
||||
lang: "fr"
|
||||
---
|
||||
|
||||
<style>
|
||||
section {
|
||||
font-size: 28px;
|
||||
text-align: left
|
||||
}
|
||||
</style>
|
||||
|
||||
# JavaScript
|
||||
|
||||
---
|
||||
## Généralités
|
||||
|
||||
- Organisme de normalisation : Ecma International
|
||||
- Définissent les normes ECMA :
|
||||
- ECMAScript (Abrégé en ES)
|
||||
- JavaScript = implémentation de la norme
|
||||
|
||||
- Versions ont un numéro et un nom par rapport à l'année
|
||||
- ES15 = ES2024 (version actuelle)
|
||||
- ESNext en cours de dev, 1 norme par an environ
|
||||
|
||||
---
|
||||
|
||||
## Documentation
|
||||
- [Guide JavaScript](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide)
|
||||
- [Référence JavaScript](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference)
|
||||
|
||||
---
|
||||
|
||||
## Premier programme
|
||||
|
||||
Pour écrire un programme en JavaScript il suffit d'un navigateur web
|
||||
- Ouvrir la console :
|
||||
|
||||
| Navigateur | Raccourci |
|
||||
| ---------- | --------------------------------------------- |
|
||||
| Firefox | <kbd>F12</kbd> |
|
||||
| Chromium | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>J</kbd> |
|
||||
| Edge | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>J</kbd> |
|
||||
|
||||
---
|
||||
|
||||
Firefox a un mode multiligne très pratique pour tester
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### Hello world
|
||||
```js
|
||||
console.log("Hello, World!");
|
||||
```
|
||||
|
||||
- `console.log` fonction qui vient écrire en console
|
||||
- Un peu comme `print` en Python
|
||||
- Il faut toujours ajouter `;` à la fin des lignes
|
||||
- Pas obligatoire mais source d'erreurs
|
||||
|
||||
---
|
||||
### Mode strict
|
||||
|
||||
- Toujours écrire `"use strict";` en haut de votre programme (première ligne)
|
||||
- Évite erreurs silencieuses et ambiguïtés du langage
|
||||
|
||||
---
|
||||
|
||||
## Variables et types
|
||||
|
||||
---
|
||||
|
||||
### Variables
|
||||
|
||||
- `var` = variable globale au programme ou à une fonction
|
||||
- `let` = variable locale (à privilégier)
|
||||
- n'existe que dans bloc entouré d'accolades
|
||||
- `const` = constante
|
||||
- Ne peut plus être modifiée
|
||||
- locale également
|
||||
- Si variable ne change pas, préférer `const`
|
||||
- On ne déclare pas le **type** de la variable
|
||||
---
|
||||
|
||||
#### Nommage
|
||||
|
||||
- Sensible à la casse (`Nom` différent de `nom`)
|
||||
- Caractères autorisés = lettres, chiffres et `_`
|
||||
- ne peut pas commencer par chiffre
|
||||
- Convention `camelCase`
|
||||
|
||||
---
|
||||
|
||||
#### Différence entre `var` et `let`
|
||||
|
||||
```js
|
||||
if (true) {
|
||||
var x = 5;
|
||||
}
|
||||
console.log(x); // x vaut 5
|
||||
```
|
||||
|
||||
```js
|
||||
if (true) {
|
||||
let y = 5;
|
||||
}
|
||||
console.log(y); // ReferenceError: y is not defined
|
||||
```
|
||||
---
|
||||
|
||||
### Types
|
||||
|
||||
| Type | Description | Exemple |
|
||||
| --------- | ------------------------ | ----------------------------- |
|
||||
| `boolean` | booléens | `true` et `false` |
|
||||
| `number` | entiers ou décimaux | `42` `3.1415` `0x3F` `0b1001` |
|
||||
| `bigint` | grands nombres | `9007199254740992n` |
|
||||
| `string` | Chaînes de caractères | `"Hello"` ou `'Hello'` |
|
||||
| `Object` | Objets (types complexes) | |
|
||||
|
||||
---
|
||||
|
||||
#### Valeurs spéciales
|
||||
|
||||
- `undefined` : valeur non définie, la variable n'existe pas
|
||||
- `null` : pas de valeur pour l'objet
|
||||
- se comporte comme un `0` en contexte numérique
|
||||
- `NaN` : n'est pas un nombre ("Not a Number")
|
||||
- se comporte comme `undefined` en contexte numérique
|
||||
|
||||
---
|
||||
|
||||
#### Tableaux
|
||||
- Les tableaux sont des listes de valeurs
|
||||
- On les écrit avec des crochets et on sépare avec des virgules
|
||||
|
||||
```js
|
||||
var cafés = ["Brésilien", "Colombien", "Kona"];
|
||||
|
||||
console.log(cafés[1]); // Affiche : Colombien
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Opérateurs
|
||||
|
||||
#### Opérateurs arithmétiques
|
||||
|
||||
| Opérateur | Description |
|
||||
| --------- | -------------------------------- |
|
||||
| `+` | Addition |
|
||||
| `-` | Soustraction |
|
||||
| `*` | Multiplication |
|
||||
| `/` | Division |
|
||||
| `%` | Reste de la division euclidienne |
|
||||
| `++` | Incrément (ajoute 1) |
|
||||
| `--` | Décrément (Retire 1) |
|
||||
| `**` | Puissance |
|
||||
|
||||
---
|
||||
|
||||
#### Opérateurs binaires
|
||||
|
||||
| Opérateur | Description |
|
||||
| --------- | ----------- |
|
||||
| `&&` | ET logique |
|
||||
| `\|\|` | OU logique |
|
||||
| `!` | NON logique |
|
||||
|
||||
---
|
||||
|
||||
## Structures de contrôle
|
||||
|
||||
- Conditions
|
||||
- Boucles
|
||||
|
||||
---
|
||||
|
||||
### Conditions
|
||||
|
||||
- Permettent de choisir quel code exécuter en fonction d'une condition
|
||||
|
||||
- Structure `if...else`
|
||||
```js
|
||||
if (condition) {
|
||||
// Faire qqch
|
||||
} else {
|
||||
// Faire autre chose
|
||||
}
|
||||
```
|
||||
* On peut utiliser aussi `else if`
|
||||
```js
|
||||
if (condition_1) {
|
||||
instruction_1;
|
||||
} else if (condition_2) {
|
||||
instruction_2;
|
||||
} else if (condition_n) {
|
||||
instruction_n;
|
||||
} else {
|
||||
dernière_instruction;
|
||||
}
|
||||
```
|
||||
* Ne pas oublier les accolades `{}`
|
||||
---
|
||||
<style scoped>
|
||||
table {
|
||||
font-size: 24px;
|
||||
}
|
||||
section {
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
#### Opérateurs de comparaison
|
||||
|
||||
| Opérateur | Description |
|
||||
| --------- | ----------------------------------------------- |
|
||||
| `==` | Egalité faible ( conversion implicite) |
|
||||
| `!=` | Inégalité faible ( conversion implicite) |
|
||||
| **`===`** | **Égalité stricte (compare aussi les types)** |
|
||||
| **`!==`** | **Inégalité stricte (compare aussi les types)** |
|
||||
| `>` | Strictement supérieur |
|
||||
| `>=` | Supérieur ou égal |
|
||||
| `<` | Strictement inférieur |
|
||||
| `<=` | Inférieur ou égal |
|
||||
|
||||
!!! warning Attention
|
||||
**Privilégier l'égalité stricte** : l'égalité faible est source d'erreurs
|
||||
|
||||
Ex: `3 == "3"` renvoie `true` car la conversion est implicite (mais dangereuse)
|
||||
!!!
|
||||
---
|
||||
|
||||
#### Valeurs fausses
|
||||
|
||||
- `false`
|
||||
- `undefined`
|
||||
- `null`
|
||||
- `0`
|
||||
- `NaN`
|
||||
- la chaîne de caractères vide (`""`)
|
||||
|
||||
---
|
||||
|
||||
### Boucles
|
||||
|
||||
Viennent répéter un bout de code un certain nombre de fois
|
||||
|
||||
---
|
||||
|
||||
#### Boucle `for`
|
||||
|
||||
- Ressemble à la boucle `for` en C++
|
||||
|
||||
```js
|
||||
for (let pas = 0; pas < 5; pas++) {
|
||||
// Ceci sera exécuté 5 fois
|
||||
// À chaque éxécution, la variable "pas" augmentera de 1
|
||||
// Lorsque'elle sera arrivée à 5, le boucle se terminera.
|
||||
console.log("Faire " + pas + " pas");
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
- On donne trois informations à la boucle séparées par des `;`:
|
||||
- L'**expression initiale** (`let pas = 0`)
|
||||
- La **condition** pour qu'elle continue (`pas < 5`)
|
||||
- L'**expression d'incrément** (`pas++`)
|
||||
|
||||
```js
|
||||
for ([expressionInitiale]; [condition]; [expressionIncrément]){
|
||||
instruction
|
||||
}
|
||||
```
|
||||
|
||||
- L'expression initiale sert à initialiser une variable (qui pourra compter les itérations)
|
||||
- La condition est évaluée : si c'est `true`, alors la boucle est exécutée, sinon elle se termine
|
||||
- L'expression d'incrément est utilisée (pour incrémenter le compteur par exemple)
|
||||
- Les instructions de la boucle sont entre `{}`
|
||||
|
||||
---
|
||||
|
||||
#### Boucle `while`
|
||||
|
||||
- Exécute une instruction tant que la condition est vraie
|
||||
|
||||
```js
|
||||
while (condition) {
|
||||
// instructions
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Exemple :
|
||||
```js
|
||||
const multiplicateur = 7;
|
||||
var n = 0;
|
||||
while (n <= 10) {
|
||||
console.log(`${n} * ${multiplicateur} = ${n*multiplicateur}`);
|
||||
n++;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### `break` et `continue`
|
||||
|
||||
- `break` : provoque la fin de la boucle dans laquelle il est utilisé
|
||||
```js
|
||||
// On cherche `valeurTest` dans un tableau `a`
|
||||
for (i = 0; i < a.length; i++) {
|
||||
if (a[i] === valeurTest) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
```
|
||||
- `continue` : provoque le passage à la prochaine itération de la boucle dans laquelle il est imbriqué
|
||||
```js
|
||||
// Affiche les nombres pairs
|
||||
for(let i = 0; i < 10; i++){
|
||||
if (i % 2){
|
||||
continue;
|
||||
}
|
||||
console.log(`${i} est pair`)
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Switch
|
||||
|
||||
- Permet de sélectionner une instruction en fonction de la valeur d'une variable
|
||||
- Syntaxe similaire à celle du C++
|
||||
- Attention de ne pas oublier le `break`
|
||||
|
||||
```js
|
||||
switch (fruit) {
|
||||
case "Orange":
|
||||
console.log("Les oranges sont à 60 centimes le kilo.");
|
||||
break;
|
||||
case "Pomme":
|
||||
console.log("Les pommes sont à 32 centimes le kilo.");
|
||||
break;
|
||||
case "Banane":
|
||||
console.log("Les bananes sont à 48 centimes le kilo.");
|
||||
break;
|
||||
default:
|
||||
console.log("Désolé, nous n'avons pas de " + fruittype + ".");
|
||||
}
|
||||
console.log("Souhaitez-vous autre chose ?");
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Fonctions
|
||||
|
||||
---
|
||||
|
||||
### Définir une fonction
|
||||
|
||||
Les fonctions représentent une suite d'instructions qui effectue une tâche ou calcule une valeur
|
||||
Pour **appeler** (= utiliser) une fonction il faut d'abord la **définir**
|
||||
```js
|
||||
function carré(nombre) {
|
||||
return nombre * nombre;
|
||||
}
|
||||
```
|
||||
- Elles sont définies avec le mot-clé `function` et un **nom** suivi de **parenthèses** `()`
|
||||
- On peut leur passer des **paramètres** séparés par des virgules
|
||||
- Elles peuvent **retourner** une valeur avec `return`
|
||||
- Les instructions sont entre des accolades `{}`
|
||||
|
||||
---
|
||||
|
||||
### Appeler une fonction
|
||||
|
||||
- Pour appeler une fonction, on utilisera des **parenthèses**
|
||||
|
||||
- Exemple avec la fonction `carré` définie à la slide précédente
|
||||
```js
|
||||
carré(5); // 25
|
||||
|
||||
// On peut utiliser le résultat :
|
||||
console.log(carré(5)) // Affiche : 25
|
||||
let maVariable = carré(5) // maVariable vaut 25
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Paramètres par défaut
|
||||
|
||||
- Si on ne fournit pas un paramètre à une fonction il vaut `undefined`
|
||||
- Si on veut une autre valeur, on peut le préciser dans la déclaration
|
||||
|
||||
```js
|
||||
// Si on ne précise pas b, b vaut 1
|
||||
function multiplier(a, b = 1) {
|
||||
return a * b;
|
||||
}
|
||||
|
||||
multiplier(5); // 5
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Ajouter du JavaScript dans une page web
|
||||
|
||||
---
|
||||
|
||||
### Code interne à la page
|
||||
|
||||
!!! warning Attention
|
||||
Comme pour le CSS, il est préférable de séparer les problèmes et d'avoir le code JavaScript séparé du code HTML.
|
||||
Cette méthode est présentée ici pour que vous sachiez qu'elle est possible mais est fortement déconseillée.
|
||||
Utilisez la seconde méthode, qui inclut un fichier externe.
|
||||
!!!
|
||||
|
||||
- On ajoute une balise `<script></script>` à la page HTML
|
||||
- On met le code javascript à l'intérieur de cette balise.
|
||||
- Dans ce cas pensez à entourer votre code JS avec le bloc suivant, qui permet d'attendre le chargement complet avant l'exécution :
|
||||
- Mais inconvénient, la page est bloquée le temps du chargement
|
||||
```js
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// Votre code ici
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Fichier externe à la page
|
||||
|
||||
- Préférez cette méthode.
|
||||
- On ajoute la balise suivante dans le HTML:
|
||||
```html
|
||||
<script src="monfichier.js" defer></script>
|
||||
```
|
||||
|
||||
- On utilise également la balise script, mais vide cette fois, en précisant le fichier en attribut avec `src`
|
||||
- Votre fichier doit avoir l'extension `.js`
|
||||
- le mot clé `defer` permet de charger le JS dans l'ordre dans lequel les fichiers apparaissent
|
||||
BIN
src/slides/B1/web/images/multiligne.png
Normal file
BIN
src/slides/B1/web/images/multiligne.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Loading…
Add table
Add a link
Reference in a new issue