L3 MIASHS, Programmation Web 2, année 2022

Contenu du CM

Introduction à la programmation asynchrone

Attention.

Les TD doivent être réalisés sous Linux et non sous Windows.

Quelques ressources en lignes

Le site des tutoriels du W3C est une référence pour les langages du WEB (langue anglaise).
Pour les non-anglophones le site de mozilla possède de nombreuses ressources en français pour HTML5, CSS3 et JavaScript
Le site openclassrooms permet également de réviser les bases HTML5 et CSS3.

Créez un répertoire de travail TD2 dans le dossier prog_web
Créer et charger un fichier de script.

Créer un fichier script_TD2.js dans le répertoire TD2 de votre page web. Ajouter une balise script qui pointe vers ce fichier à la fin de TD2.html, après la fermeture de la balise <body>.

Utiliser la console

Ajoutez dans le fichier script_TD2.js (qui doit être vide) la ligne suivante:

console.log("Hello ! Ça marche!")

Vérifiez dans la documentation de W3school ce que fait cette ligne? (Répondre dans TD2.html).

Détécter le navigateur

Attention, pour cette question, il faut chercher par vous-même l’information dans la documentation de W3school.

Qu’est-ce que le user-agent?
Ajoutez à script_TD2.js une ligne permettant d’afficher dans la console le user-agent du navigateur.
Ajoutez à script_TD2.js une ligne permettant d’afficher dans la console la langue utilisé par le navigateur.

Faites un tableau comparatif dans TD2.html de ce qui apparaît dans la console en utilisant Firefox et Chromium.

La manipulation d’éléments

Trouver et chercher seul dans la documentation: l’objet document

L’objet document est central pour manipuler une page HTML en JavaScript. Trouvez seul dans TD2.html la page W3schools donnant des informations sur l’objet documents.

Quelles sont les propriétés permettant de:

Donner l’URL du document?
Donner le titre du document?

Utilisez ces fonctions pour afficher dans la console ces informations pour la page TD2.html .

Quelles sont les méthodes permettant de:

Sélectionner des éléments dans la page (il y en quatre)?
Retourner l’élément body?

Ajouter un élément div dans TD2.html ayant comme attribut id="select_me" et comme contenu “Sélectionne moi”.

Ajoutez dans script_TD2.js une ligne de code sélectionnant par son id cet élément et le stockant dans une variable divSelection.

Que ce passe-t’il si on affiche dans la console cette variable ?

Trouvez et chercher dans la documentation seul: les éléments HTML

Trouvez seul dans la documentation de la w3school comment faire les choses suivantes:

Modifier le contenu HTML de l’élément stocké dans la variable divSelection
Modifier le style de cet élément

Ajoutez à TD2.html le lien que vous avez utilisé pour trouver cette information.

Modifiez le contenu de divSelection à l’aide de ces méthodes pour afficher “J’ai été modifié dynamiquement!” en rouge sur fond Fuchsia.

Affichez dans la console le contenu de divSelection, avant et après sa modification.

Créer et modifier dynamiquement un élément

Dans l’objet document, quelle méthode permet la création d’un élément ? Indiquez dans TD2.html la page de w3school donnant des information sur cette méthode.
Quel méthode permet d’ajouter un élément à autre élément dynamiquement ? Indiquez dans TD2.html la page de w3schools donnant des information sur cette méthode.
Ajoutez dans TD2.html un élément <div> ayant comme attribut id="je_suis_vide" et ne contenant rien. Sélectionnez dynamiquement cet élément, stocké le dans une variable divVide et affichez dans la console son contenu.
Ajoutez à l’élément représenté par la variable divVide un élément div créé dynamiquement et contenant “je suis crée dynamiquement”.

Les fonctions et les évènements

Les éléments HTML possèdent un certain nombre d’évènements (event en anglais) qui permettent à la page de réagir à des actions de l’utilisateur ou du serveur. Ces évènement appellent des fonctions JavaScript.

Un premier évènement

Indiquez dans TD2.html la page de w3schools donnant des information sur les évènements.

Ajoutez à TD2.html un bouton se comportant comme celui-ci:

Toujours des évènements
1. Ajoutez un élément div à TD2.html avec id="container"
2. Créez une fonction ajouteCarre qui ajoute dynamiquement à cet élément un élément div ayant pour attribut class="carre_rouge"
3. Ajoutez à la feuille de style de TD2.html un style carre_rouge qui affiche ces éléments comme des carrés rouges de 20 pixels de côté et avec des marges de 5 pixels et en affichage inline-block.
4. Vérifiez dans la console que la fonction ajouteCarre fonctionne bien.
5. Créez un bouton qui ajoute des carrés rouge aux container.

Le résultat final doit ressembler à ça:

Un exercice un plus difficile

Télécharger le logo de Wikipédia en cliquant ici.

Essayez de réaliser seul:

Compiled the: dim. 07 janv. 2024 23:19:12 CET