diff --git a/.marp/themes/catppuccin.css b/.marp/themes/catppuccin.css index f49081a..f738ee7 100644 --- a/.marp/themes/catppuccin.css +++ b/.marp/themes/catppuccin.css @@ -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) diff --git a/src/cours/CIEL1/01-bases-python/evaluation/evaluation_sujet_3.md b/src/cours/CIEL1/01-bases-python/evaluation/evaluation_sujet_3.md new file mode 100644 index 0000000..21a20c5 --- /dev/null +++ b/src/cours/CIEL1/01-bases-python/evaluation/evaluation_sujet_3.md @@ -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 | | | \ No newline at end of file diff --git a/src/cours/CIEL1/04-web-statique/interro.md b/src/cours/CIEL1/04-web-statique/interro.md new file mode 100644 index 0000000..ec49188 --- /dev/null +++ b/src/cours/CIEL1/04-web-statique/interro.md @@ -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 + + +<.......... lang="en"> + +<..........> + + + Document + + + +<.............> + + + + +``` + +##### 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 \ No newline at end of file diff --git a/src/cours/CIEL1/05-web-js/activite3-js-bases.md b/src/cours/CIEL1/05-web-js/activite3-js-bases.md new file mode 100644 index 0000000..c0fd4e9 --- /dev/null +++ b/src/cours/CIEL1/05-web-js/activite3-js-bases.md @@ -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 (F12 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 + ![multiligne0](./image.png) + + ![multiligne1](./image-1.png) +- É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 +
+
+ Projet démo 1 +
+
+ ~~~ +- 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 + + ~~~ +- É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 `` ? +- 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 +``` diff --git a/src/cours/CIEL1/05-web-js/activite4.md b/src/cours/CIEL1/05-web-js/activite4.md new file mode 100644 index 0000000..484119c --- /dev/null +++ b/src/cours/CIEL1/05-web-js/activite4.md @@ -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 diff --git a/src/cours/CIEL1/05-web-js/image-1.png b/src/cours/CIEL1/05-web-js/image-1.png new file mode 100644 index 0000000..5e5f957 Binary files /dev/null and b/src/cours/CIEL1/05-web-js/image-1.png differ diff --git a/src/cours/CIEL1/05-web-js/image-2.png b/src/cours/CIEL1/05-web-js/image-2.png new file mode 100644 index 0000000..d5872a4 Binary files /dev/null and b/src/cours/CIEL1/05-web-js/image-2.png differ diff --git a/src/cours/CIEL1/05-web-js/image.png b/src/cours/CIEL1/05-web-js/image.png new file mode 100644 index 0000000..e7df191 Binary files /dev/null and b/src/cours/CIEL1/05-web-js/image.png differ diff --git a/src/cours/SUMMARY.md b/src/cours/SUMMARY.md index b5bb8b3..c615e07 100644 --- a/src/cours/SUMMARY.md +++ b/src/cours/SUMMARY.md @@ -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) diff --git a/src/slides/B1/ap/02-travail-collaboratif.md b/src/slides/B1/ap/02-travail-collaboratif.md new file mode 100644 index 0000000..8471c3a --- /dev/null +++ b/src/slides/B1/ap/02-travail-collaboratif.md @@ -0,0 +1,100 @@ +--- +marp: true +theme: catppuccin +paginate: true +size: 4:3 +transition: coverflow +footer: '' +math: katex +lang: "fr" +--- + + + +# 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 diff --git a/src/slides/B1/web/03_javascript.md b/src/slides/B1/web/03_javascript.md new file mode 100644 index 0000000..0199a4f --- /dev/null +++ b/src/slides/B1/web/03_javascript.md @@ -0,0 +1,451 @@ +--- +marp: true +theme: catppuccin +paginate: true +size: 4:3 +transition: coverflow +footer: '' +math: katex +lang: "fr" +--- + + + +# 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 | F12 | +| Chromium | Ctrl+Shift+J | +| Edge | Ctrl+Shift+J | + +--- + +Firefox a un mode multiligne très pratique pour tester + +![Multiligne width:800px](images/multiligne.png) + +--- + +### 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 `{}` +--- + + +#### 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 `` à 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 + +``` + +- 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 diff --git a/src/slides/B1/web/images/multiligne.png b/src/slides/B1/web/images/multiligne.png new file mode 100644 index 0000000..1180fd2 Binary files /dev/null and b/src/slides/B1/web/images/multiligne.png differ