L'objectif de cette activité est d'apprendre à implémenter du code JavaScript pour qu'il s'exécute côté client et dans un deuxième d'apprendre à implémenter du code Python pour qu'il s'exécute code côté serveur :
1- Préparation
- Afin de se concentrer sur les nouvelles notions, vous devez dupliquer le dossier exercice2 et le nommer exercice3.
L'avantage aussi de dupliquer le dossier est de conserver une version du site qui fonctionne : au niveau méthode de travail, c'est un avantage important.
En effet, il n'est pas rare d'avoir un bug pour lequel il est difficile de trouver une solution. En ayant une version antérieure, il est facile de reprendre une version fonctionnelle !
- Ensuite, il faut renommer le fichier python en exercice3.py.
- Puis, il faut ajouter un dossier javascript dans le dossier static.
- Enfin copier le code ci-dessous dans un fichier javascript script1.js qui est à enregistrer dans le dossier indiqué ci-dessus.
var clic=1;
function changeTexte() {
var obj = document.getElementById( );
if (clic % 2 ==0) {
obj.firstChild.nodeValue = "Page d'accueil";
}
else {
obj.firstChild.nodeValue = "Vers la page d'accueil";
}
clic+=1;
}2- Implémenter du JavaScript
L'intérêt du Javascript est de pouvoir exécuter du code en local : l'utilisateur peut donc interagir avec des éléments de la page web sans utilisation du réseau.
2-1 Comprendre l'implémentation dans une page web
L'implémentation du Javascript dans l'environnement Flask est similaire au codage classique : il faut juste veiller à utiliser les chemins en respectant le codage dans Flask.
Sinon, il faut toujours lier à un événement (onclick, onmouseover, onchange...) une fonction.
Compléter le fichier changeTexte lorsque l'événement onmouseover apparaît.
Compléter le fichier javascript pour récupérer l'identifiant de l'objet qui déclenchera l'événement onmouseover.
Une fois l'exercice fait, vous pouvez modifier les fichiers script1.js et page2.html afin de vérifier le bon fonctionnement du script dans votre navigateur :
- Le texte de l'hyperlien doit changer alternativement lorsque la souris passe au-dessus.
- C'est la variable clic (initialisée à 0 au chargement de la page) qui lorsqu'elle est paire ou impaire affiche un texte différent.
2-2 Amélioration
L'objectif est d'afficher la variable clic dans la dernière ligne de la page2.html seulement lorsque la souris sera passée au moins 4 fois sur le lien hypertexte :
Il faut donc modifier le fichier html et le fichier javascript.
L'exercice suivant peut aider à faire les modifications.
Bien évidemment, il faut tester le fonctionnement !
Analyse
3- Implémenter du Python
L'utilité du python est de pouvoir réaliser des traitements côté serveur. Cela peut être, par exemple, analyser les informations récupérer à la réception d'une requête.
3-1 Comprendre comment ajouter du code python
L'implémentation du python dans l'environnement Flask est similaire au codage pratiqué depuis le début de l'année.
Il faut juste veiller au passage des variables, en respectant la notation Flask pour éventuellement propulser une page web.
L'exercice consiste à créer une variable nbLoad et qu'à chaque fois que la page2.html est envoyée on incrémente cette variable.
De plus, suivant que la valeur de nbLoad est paire ou impaire un message différent sera affichée dans la page web.
Il ne reste plus qu'à faire les modifications du fichier python pour vérifier le bon fonctionnement.
Analyse
3-2 Amélioration
On souhaite sur la d'accueil index.html, afficher la date sous la forme jour mois année (le jour et le mois en toutes lettres).
Le module dateTime est à importer au début de votre fichier :
from datetime import date
from datetime import datetimeEn vous inspirant du passage de variable de la variable message et en utilisant la documentation du module dateTime, implémenter les modifications requises pour assurer le rendu attendu.