Programmation Web, année 2019

Contenu du CM

Attention.

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

Quelques ressources en lignes

  1. Créez un répertoire de travail TD2 dans le dossier prog_web

  2. 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>.

  1. 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).

  1. Détécter le navigateur

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

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

  1. 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:

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

Quelles sont les méthodes permettant de:

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 ?

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

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

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.

  1. Créer et modifier dynamiquement un élément

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.

  1. 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:

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

  1. 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:

  1. Un exercice un plus difficile

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

Essayez de réaliser seul:



Compiled the: mer. 04 sept. 2024 12:49:36 CEST