Série

DOM
Exercice 1
1. Créer un page html compose une table avec deux colonnes et deux lignes
2. Créer un bouton « ajouter » permet d’ajouter à la table une nouvelle ligne avec les
informations données par l’utilisateur
Exercice 2
créez le scripte du bouton « ajouter » pour qu’il créer lors de son click une zone de texte et un
bouton « supprimer », lors du click du bouton « supprimer » il efface cette zone .
On considère le code html suivant :
<p>Ajouter et supprimer un zone de texte</p>
<button id=‘‘btn_ajouter’’ value=‘‘ajouter’’>
<div id=‘‘container’’></div>
JSON
Exercice 1
Utilisez une variable qui contient un objet JSON Tableau
Si le nom saisi par l'utilisateur correspond à un nom dans le tableau JSON, il affiche l'alerte
suivante :
Exercice 2
JQuery
Exercice 1
1) créer trois paragraphes et un bouton avec un id "button".
2) créer un script jQuery qui permet d'ajouter un style avec une classe, lorsqu'on clique l'écriture sera
en gras et en rouge
Exercice 2
Correction
DOM
Exercice 1
1)
<html>
<head>
<style>
#t1{
border-collapse: collapse;}
</style> </head>
<body>
<table id="t1" border="1">
<tr> <th>Id</th> <th>Nom</th></tr>
<tr><td>834</td><td>cr7</td></tr>
</table> <br>
<input type="button" value="ajouter" onclick="ajouter()">
Cree un boutton ajouter permet de ajouter à la table une nouvelle ligne avec les informations
données par l’utilisateur
2)
• <script>
• function ajouter(){
• var add= document.createElement("tr");
• document.getElementById("t1").appendChild(add);
• var case1 = document.createElement("td");
• case1.innerHTML = prompt("id");
• add.appendChild(case1);
• var case2 = document.createElement("td");
• case2.innerHTML= prompt("Nom:");
• add.appendChild(case2);
• }
• </script> </body> </html>
Exercice 2
<html>
<body>
<p>Ajouter et supprimer un zone de texte</p>
<button id=‘‘btn_ajouter’’ value=‘‘ajouter’’>
<div id=‘‘container’’></div>
<script lang="js">
// Ajout du zone de texte
function ajouterzonedetexte(){
var conteneur = document.getElementById('container');
var zoneTexte = document.createElement('textarea');
// ajout du boutton de suppression
var boutonSupprimer = document.createElement('button');
boutonSupprimer.innerText = 'supprimer';
boutonSupprimer.addEventListener('click', function(){
conteneur.removeChild(zoneTexte);
//suppression du zone de texte
conteneur.removeChild(boutonSupprimer);
});
conteneur.appendChild(zoneTexte);
conteneur.appendChild(boutonSupprimer);
}
// recuperation dy boutton
var boutonAjouter = document.getElementById('btnAjouter');
//ajouter l'evenement au click sur le boutton

boutonAjouter.addEventListener('click', ajouterzonedetexte); </script>
</body>
</html>
JSON
Exercice 1
Exercice 2
JQuery
Exercice 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery_Exemple_1</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.mon-style {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<p>Encore un autre paragraphe.</p>
<button id="bouton">Afficher le paragraphe</button>
<script>
$(document).ready(function(){
$("#bouton").click(function(){
$("p").addClass("mon-style");
})
});
</script>
</body>
</html>
Exercice 2
<!DOCTYPE html>
<html>
<head>
<title>exercice</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Cacher tous les paragraphes
$("#hideButton").click(function() {
$("p").hide();
});
// Afficher les paragraphes cachés

$("#showButton").click(function() {
$("p").show();
});
// Animer les titres div

$(document).ready(function(){
$("#demar").click(function(){
var div = $("div");
div.animate({height: '800px', opacity: '5.4'}, "slow");
div.animate({width: '800px', opacity: '5.8'}, "slow");
div.animate({height: '500px', opacity: '10.4'}, "slow");
div.animate({width: '500px', opacity: '10.8'}, "slow");
});
});
});
</script>
</head>
<body>
<button id="hideButton">Cacher les paragraphes</button>
<button id="showButton">Afficher les paragraphes cachés</button>
<p>Paragraphe 1</p><br>
<button id="demar">démare l'animation</button> <br><br>
<div id="demar" style="background:#6600ff;height:100px;width:100px;position:absolute; border-

radius: 20px;"></div>
</body>
</html>

Série

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Série

Transféré par

Droits d'auteur :

Formats disponibles

DOM

//ajouter l'evenement au click sur le boutton

// Afficher les paragraphes cachés

// Animer les titres div

<div id="demar" style="background:#6600ff;height:100px;width:100px;position:absolute; border-

Vous aimerez peut-être aussi