Programmation Web, année 2019
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:
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 leuser-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 dew3school
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 dew3schools
donnant des information sur cette méthode.Ajoutez dans
TD2.html
un élément<div>
ayant comme attributid="je_suis_vide"
et ne contenant rien. Sélectionnez dynamiquement cet élément, stocké le dans une variabledivVide
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:
function clickme() { alert(“Merci :)”); }
Toujours des évènements
- Ajoutez un élément
div
àTD2.html
avecid="container"
- Créez une fonction
ajouteCarre
qui ajoute dynamiquement à cet élément un élémentdiv
ayant pour attributclass="carre_rouge"
- Ajoutez à la feuille de style de
TD2.html
un stylecarre_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 affichageinline-block
. - Vérifiez dans la console que la fonction
ajouteCarre
fonctionne bien. - Créez un bouton qui ajoute des carrés rouge aux container.
- Ajoutez un élément
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: mer. 04 sept. 2024 12:49:36 CEST