CM 3 - Dev WEB

name: inverse
layout: true
class: center, middle, inverse
---

# Developpement Web - CM 3
## Inès de Courchelle

## 2022-2023

![image](../img/CY-tech.png)

---
layout: false

# Le Javascript
## Définition
- Langage interprété par le navigateur web
- Développé par Netscape pour son navigateur
- Chargé avec la page HTML (code visible)
- Exécuté par le navigateur, côté client
- C'est un langage flexible et polyvalent

## Pourquoi ?
- Exécuter un code sans être contraint de recharger une page web
- Créer des applications Desktop, Mobile et Web avec Electron, React et React Native

---
# Le fichier JS
## Où coder ?
- Solution 1 : Dans le fichier html entre les balises **<script> </script>**
- Solution 2 : Dans un fichier séparé avec l'extension **.js**

## Quelle solution est plus propre ?
<iframe src="https://giphy.com/embed/YUzHyNHMqo2k" width="480" height="240" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>

---
# La solution 2
## Dans un fichier séparé
- Bien séparer les langages
- Ré-utiliser le code pour d'autres pages

## Comment lier HTML et JS ?
```html
<script type="text/javascript" src="mesFonctions.js"></script>
```

---
# Récapitulatif
## Les différents fichiers
- maPage.html
- monStyle.css
- mesFonctions.js

---
# Récapitulatif
## Les différents fichiers
- maPage.html
- monStyle.css
- mesFonctions.js

---
# Récapitulatif
## Les différents fichiers
- maPage.html
- monStyle.css
- mesFonctions.js

---
# Le langage
## Objectifs
1. Les variables
2. La console
3. Les dates
4. Les conditions
5. Les tableaux
6. Les fonctions
7. Les fonctions pour les tableaux
8. Génération de styles
9. Les pop up
10. Les boucles
11. Les fonctions au chargement de la page

---
# Les Variables - Les numériques
## Déclaration/initialisation
```javascript
let nb1 = 2;
let nb2 = 4;
let nb3;
```
## Modification
```javascript
nb1 = 28;
nb2 = 42;
```
## Utilisation
```javascript
nb3 = nb1 + nb3;
```
## Résultat
```javascript
70
```
---
# Les Variables - Les numériques
## Création du fichier
#### mesFonctions.js
<center>
<video src="videos/helloworld.mp4" width="600" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

#### Il ne se passe rien !

---
# Les Variables - Les chaînes
## Déclaration/initialisation
```javascript
let nom = "page";
let prenom = "jimmy";
let complet;

```
## Modification
```javascript
prenom = "james";
```
## Utilisation
```javascript
complet = nom+prenom;
```
## Résultat
```javascript
pagejames
```
---
# Les Variables - Les chaînes
## La VAR
<center>
<video src="videos/helloworld2.mp4" width="600" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

#### Il ne se passe toujours rien !

---
# Les variables
## Une constante
- Conteneur d'une valeur
- Impossible de modifier sa valeur

## Utilisation
Définition de la constante **groupeNumber1** dans le programme, il sera impossible de modifier sa valeur
```javascript
const groupeNumber1="Led Zeppelin";
```

---
# Les variables
## Un peu d'histoire
- Avant, il n'y avait qu'un seul mot-clé pourdéfinir une variable (**var**)
- Maintenant, il y en a 2 de plus : **let** et **const**

## Différences
|                   | var | let | const |
|-------------------|-----|-----|-------|
| stockée en global | ✔   | ❌   | ❌    |
| modification      | ✔   | ✔   | ❌    |
| re-déclaration    | ✔   | ❌  | ❌    |

---
# La console
## Définition
Consoles de développement
## Objectifs
- Entrer des instructions à la volée
- Consulter les données en mémoire
- Explorer les fonctions et variables disponibles
- DEBUGGER Quoi ?!

## Où la trouver ?
Dans tous les navigateurs

| navigateurs | Accès                                                                   |
| ---         | ---                                                                     |
| Firefox     | menu Firefox > Développement web > Console Web et Console d'erreurs     |
| Chrome      | menu Outils > Console JavaScript, ou F12 pour arriver dans l'inspecteur |
| Autres      | Avec un peu de jugeote                                                  |

---
# La console
## Exemple d'utilisation 1

##### Dans mon fichier HTML
```html
<!DOCTYPE html>
<html>
    <head>
      <title>Le Titre</title>
      <script type="text/javascript" src="mesFonctions.js"></script>
    </head>
    <body>

</body>
</html>
```

##### Dans mon fichier JS
```javascript
let nb1= 27;
let nb2 = 42;
let nb3;
console.log("nb1 " + nb1);
console.log("nb2 " + nb2);
console.log("nb3 " + nb3);
```
---
# Exemple
## La VAR
<center>
<video src="videos/console.mp4" width="600" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

#### Il se passe enfin quelques choses !

---
# La console
## L'instruction console.log
- Afficher des informations dans la console
- C'est le **printf** de la console JS
- C'est le **echo** de la console JS
- C'est le **print** de la console JS
- ...

---
# La console
## Remarques
- Je ne peux pas interpréter directement un fichier js comme ça
- Je dois utiliser un fichier html pour faire la pacerelle

## En cas d'erreur
- Plus rien ne fonctionne !
- Même les élèments qui fonctionnent

## Utilité de la console
- Voir où on a cassé le programme
- Faire du debbugage
- ...

---
# Le fichier JS
## La VAR

<center>
<video src="videos/fichierSeul.mp4" width="600" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Les dates
## Le code
```javascript
let today;
today = new Date();
today.setFullYear(1940, 10, 9)
```

---
# Les tableaux
## Plusieurs solutions
```javascript
let cars = [ "Saab","Volvo", "BMW" ];
let car = new Array("Saab","Volvo", "BMW");
let volvo = car[1];

console.log(car);
console.log(cars);
console.log(car[0]);
console.log(cars[2]);
```

---
# Les tableaux
## La VAR

<center>
<video src="videos/lesTableaux.mp4" width="600" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Les tableaux
## Plusieurs solutions
- Il y a plein de caractéristiques autour des tableaux
- Bonne nouvelle ! c'est dans la <a href="https://www.w3schools.com/jsref/jsref_obj_array.asp" target="_blank">doc</a> !

---
# Les conditions
## Le si et le else (le classique)
```javascript
let today, someday, text;
today = new Date();
someday = new Date();
someday.setFullYear(1990, 5, 1);
if (someday > today) {
    text = "Retour vers le futur";
} else {
    text = "Retour vers le passe";
}
console.log("Aujourd'hui : ", today)
console.log("Un autre jour : ", someday)
console.log(text)
```

---
# Les conditions
## La VAR
<center>
<video src="videos/lesConditions.mp4" width="600" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Les conditions
## Le switch
```javascript
switch (new Date().getDay()) {
    case 1: //Lundi
       text =" c'est lundi";
       break;
    case 2:
    case 3:
    case 4: //Jeudi
    case 5: //Vendredi
        text = "Bientôt le week-end!";
        break;
    case 0: //Dimanche
    case 6: //Samedi
       text = "C'est le week-end.";
       break;
     default:
       text = "Hâte au week-end...";
       break;
}
console.log(text);
```
---
# Les conditions
## La VAR
<center>
<video src="videos/lesConditions2.mp4" width="600" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Les boucles
## for
```javascript
let p = " ";
for (i = 0; i < 5; i++) {
    p += "Nombre=" + i + " ";
}
```

## while
```javascript
let a = " ";
while (i < 10) {
    a += "Nombre=" + i;
    i++;
}
```
---
# Les boucles
## La VAR
<center>
<video src="videos/lesBoucles.mp4" width="600" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Générer du contenu
## c-à-d ?
- Rajouter du text dans le html
- Réaliser du traitement en JS et afficher le resultat dans la page HTML

---
# Générer du contenu
## Le facile
```javascript
let text = "Rock n roll";
document.writeln(text);
```

---
# Générer du contenu
## La VAR
<center>
<video src="videos/genererContenu1.mp4" width="600" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Générer du contenu
## L'intermediaire !
```javascript
let a = 4;
let b = 4;
let res=a+b;
document.writeln("<p>");
document.writeln("une addition "+ res );
document.writeln("</p>);
```
---
# Générer du contenu
## La VAR
<center>
<video src="videos/genererContenu2.mp4" width="600" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Générer du contenu
## Le professionnel
```javascript
let a = 4;
let b = 4;
document.writeln("<h1> Mon addition </h1>");
document.writeln("<div id='par1'>");
document.writeln("<p>");
document.writeln("une addition "+ res );
document.writeln("</p>);
document.writeln("</div>);
```

---
# Génerer des Pop Up
## Le classic
```javascript
alert("coucou");
```
<img src="https://media.tenor.com/6rXzuc3AvPYAAAAC/hello-hi.gif" width=400/>

---
# Génerer des Pop Up
## La VAR
<center>
<video src="videos/alerte.mp4" width="600" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>
---
# Génerer des Pop Up
## Le avancé
```javascript
let text;
if (confirm("Press a button!") == true) {
  text = "You pressed OK!";
} else {
  text = "You canceled!";
}
document.write("<p>"+text+"</p>");

```
<img src="https://media.tenor.com/24mBJBlIHp8AAAAd/it-crowd-are-you-sure.gif" width=400/>

---
# Génerer des Pop Up
## La VAR
<center>
<video src="videos/alerte2.mp4" width="600" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Génerer des Pop Up
## L'interactif
```javascript
let person = prompt("Please enter your name", "Harry Potter");

if (person != null) {
    document.write("<p>"+"Hello " + person + "! How are you today?"+"</p>");
}
```

---
# Génerer des Pop Up
## La VAR
<center>
<video src="videos/alerte3.mp4" width="600" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Les Fonctions
## Développeurs
- Créer des fonctions avec paramètres ou sans pour externaliser un traitement
- Utiliser le mot clé **function** même pour les procédures

## Prédéfinies
- onClick
- onload
- onMousseOver
- ...

## La doc
<a href="https://www.w3schools.com/js/js_events.asp" target="_blank">C'est ICI</a>

---
# Les Fonctions
## Développeurs V1
```javascript
function multiplication(a, b){
    return a * b;
}
let x = multiplication(4, 3);
console.log(x);
```

## Développeurs V2
```javascript
let prod1 = new Function("a", "b", "return a*b;");
let prod1 = new Function("a", "b", "return a*b;");
let prod2 = function multiplication(a, b){ return a * b; };
console.log(prod1(3,6));
console.log(prod2(4,5));
```
.underR[ATTENTION] :
- pour la version prod1 => il faut une majuscule à Fonction
- pour la version prod2 => il ne faut pas de majuscule à fonction

---
# Les Fonctions
## La VAR

<center>
<video src="videos/lesfonctionsV1.mp4" width="600" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Les Fonctions
## Prédéfinies V1
#### Dans le HTML
```html
<input type="button" id="idbouton" name="nombouton" value="ok" onclick="clic()"/>
```

#### Dans le JS
```javascript
function clic(){
    alert("tu as appuyé sur le bouton \n");
}
```

---
# Les Fonctions
## La VAR
<center>
<video src="videos/lesfonctionsV2.mp4" width="600" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Les Fonctions
## Prédéfinies V2
#### Dans le HTML
```html
<p onmouseover="hello()"> Ceci est un paragraphe </p>
```

#### Dans le JS
```javascript
function hello(){
    alert("tu as survolé le paragraphe \n");
}
```
<img src="https://c.tenor.com/L_zLM2aplUkAAAAC/flying-cat.gif" width=250/>

---
# Les Fonctions
## La VAR
<center>
<video src="videos/lesfonctionsV3.mp4" width="600" controls poster="vignette.jpg">
Cette vidéo ne peut être affichée sur votre navigateur Internet.<br> Une version est disponible en téléchargement sous <a href="URL">adresse du lien </a> .
</video>
</center>

---
# Les Fonctions
## Les autres
- Il faut aller voir la doc
- Il y en a une ribambelle