Programmation client, année 2018

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.
Les notes de cours

Rendus des TD

Installer le fichier de script. Dans un répertoire dédié, créer un document HTML index.html et un fichier de de script script.js. Ajouter une balise script qui pointe vers ce fichier à la fin de index.html, après la fermeture de la balise <body>.
Utiliser la console

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

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

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

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

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

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