Programmation Web, année 2019

Attention.

Les TD doivent être réalisés sous Linux et non sous Windows. Chaque étudiant doit être inscrit sur Moodle. Le forum peut être utilisé pour poser des questions pendant et en dehors des TD.

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.

Rendus des TD

Vérifiez que tout marche bien

Vérifier que vos site web sont bien accessibles depuis une URL et pas depuis votre système de fichier locaux. Attention, si ce n’est pas le cas, vous risquez d’avoir un 0 au contrôle continue.

Pensez à finir le TD2 !!!

Créer et charger un fichier de script.

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

Utiliser la console

Ajoutez dans le fichier script_TD3.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 TD3.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_TD3.js une ligne permettant d’afficher dans la console le user-agent du navigateur.
Ajoutez à script_TD3.js une ligne permettant d’afficher dans la console la langue utilisé par le navigateur.

Faites un tableau comparatif dans TD3.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 TD3.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 TD3.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 TD3.html ayant comme attribut id="select_me" et comme contenu “Sélectionne moi”.

Ajoutez dans script_TD3.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 à TD3.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 TD3.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 TD3.html la page de w3schools donnant des information sur cette méthode.
Ajoutez dans TD3.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 TD3.html la page de w3schools donnant des information sur les évènements.

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

function clickme() { alert(“Merci :)”); }

Toujours des évènements
1. Ajoutez un élément div à TD3.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 TD3.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:

function ajoutCarre() { var container = document.getElementById(“container”); var carre = document.createElement(“div”); carre.setAttribute(“class”, “carre_rouge”); container.appendChild(carre); }

Un exercice plus difficile (à finir à la maison)

Télécharger le logo de Wikipedia en cliquant ici.

Essayez de réaliser seul:

function agrandir() { var image = document.getElementById(“wiki-image”); image.style.width = Math.min(1000, (parseInt(image.style.width)*1.5))+“px”; } function retrecir() { var image = document.getElementById(“wiki-image”); image.style.width = Math.max(25, (parseInt(image.style.width)/1.5))+“px”; }

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