Scribd
Importer
42 vues2 pages

TP2 Manipuler DOM

Transféré par

idbellaotman
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
42 vues2 pages

TP2 Manipuler DOM

Transféré par

idbellaotman
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 2

OFFICE DE LA FORMATION PROFESSIONNELLE & DE LA PROMOTION DU TRAVAIL

INSTITUT SPECIALISE DE GESTION ET D'INFORMATIQUE MARRAKECH

PROGRAMMATION EN JAVASCRIPT
TP 4: MANIPULER LE DOM
Exercice : Soit le code HTML suivant
<input type="radio" name="genre" id="femme" onclick="f1()"/>Femme
<input type="radio" name="genre"/>Homme
<div id="genre"></div>

Si l’utilisateur choisisse Femme, une liste déroulante (select) avec les valeurs ‘mademoiselle’ et ‘madame’ apparait.
Ecrire le code de la fonction f1().

Exercice : Soit la page HTML suivante :

Avec le code Html suivant


<main>
<button onclick="f1()">Jaune</button>
<button onclick="f2()">Rouge</button>
<button onclick="f3()">Vert</button>
<button onclick="f4()">Noir</button>
</main>
<div>
Modifier la couleur de l'arrière plan
</div>
Ecrire le code Javascript des quatres boutons .

Exercice : Soit la page HTML suivante :


1. Ecrire le code HTML pour créer les éléments de la page :
a. Un label avec la valeur « Saisir un nombre »
b. Une zone de saisie
c. Un bouton
d. Deux div affichées horizontalement,
2. Ajouter le code CSS suivant
3. Ecrire le code javascript pour le bouton Ajouter. Si
l’utilisateur saisisse un nombre pair, il sera ajouté dans la div
des nombres pairs, sinon si le nombre est un nombre
impair, il s’ajoutera dans la div des nombres impairs,
sinon, on affiche un message d’erreur.

Exercice : Soit le code HTML suivant

<div> Saisir la moyenne des controles (/20)


<input type="number" min=0 max=20 id="moyC"/></div>
<div> Saisir la note de l'EFM (/40)
<input type="number" min=0 max=40 id="noteEFM"/>
</div>
<div><button onclick="f1()”>Note Module</button>
<span></span></div>

a. Ecrire le code Javascript du bouton afin de calculer la moyenne du module [(moyenne contrôles + efm) /3 ]
puis l’affiche dans le span.
b. On désire ajouter une appréciation :

Note <7 7< = note<10 10<= note <12 12<= note <14 14<= note<16 Note>=16
Nul Insuffisant Passable Assez bien Bien Trés bien

Page : 1 ANNEE DE FORMATION 2023/2024


OFFICE DE LA FORMATION PROFESSIONNELLE & DE LA PROMOTION DU TRAVAIL
INSTITUT SPECIALISE DE GESTION ET D'INFORMATIQUE MARRAKECH

Effectuer les modifications nécessaires


c. Changer l’appréciation par une image (voir dossier images fourni avec le TD) qui change suivant la note :
<7 <10 <12 <14 <16 >=16

Exemple :

Exercice :
Soit la page HTML suivante :

1. Ecrire le code HTML afin de créer les deux divs avec une liste chacune, les divs sont affichées d’une manière
horizontale, la première div contient au début tous les langages proposés tandis que la deuxième liste est vide,
2. Ajouter le code HTML pour la zone de saisie et les boutons
L’utilisateur doit saisir le langage à ajouter aux préférences, si le langage existe dans la liste de la première div (les
langages proposés), le langage sera supprimé de cette liste puis ajouté dans la liste de la deuxième div (Vos préférences).
3. Ecrire le code javascript pour les deux boutons

Page : 2 ANNEE DE FORMATION 2023/2024

Vous aimerez peut-être aussi