Scribd
Importer
117 vues2 pages

TP 1 Javascript 1

Transféré par

hichemsa2008
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
117 vues2 pages

TP 1 Javascript 1

Transféré par

hichemsa2008
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

TP javascript 3STI

Exercice 1 : Se familiariser avec les commandes innerHTML, alert, prompt


1- Soit le code suivant d’une page nommée exercice1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
</head>
<body>
<p id="id1"> une ligne html</p>
<p id="ici">... paragraphe vide </p>
<p id="id2"> une autre ligne html</p>
<script>
document.getElementById('ici').innerHTML = "Bonjour de <em>
JavaScript </em>";
</script>
</body>
</html>
2- Lancer votre navigateur disponible et observer le résultat obtenu
………………………………………………………………………………………………………………….
3- Taper sur la touche F12 du clavier pour lancer l’inspecteur DOM
4- Dans l’onglet Console , écrire la commande suivante et observer le résultat:
Document.getElementById(‘id1’).innerHTML = " bonjour ";
5- Dans l’onglet Console , écrire la commande suivante et observer le résultat:
Document.getElementById(‘id2’).innerHTML= "votre nom " ;
6- Dans l’onglet Console , écrire la commande suivante :
alert(" salut les amis ") ;
7- Dans l’onglet Console , écrire la commande suivante :
var s=prompt("c'est quoi votre nom", "")
Exercice 2 :
Se familariser avec la commande getElementsByTagName
<style type="text/css">
#p1
{
color:red;
}
#p2
{
color:blue;
}
</style>
<p id="p1">soit le paragraphe suivant de couleur rouge au depart!</p>
<p id="p2">soit le paragraphe suivant de couleur bleu au depart!</p>

p. 1
TP javascript 3STI

<button onclick="ChangerCouleur();">Changer couleur</button>


1. Ecrire le code suivant dans une nouvelle page nommé test.html et observer
son résultat dans le navigateur.
2. Ecrire la fonction ChangerCouleur () permettant de changer la couleur du
premier paragraphe du rouge au bleu et la couleur du deuxième paragraphe
du bleu au rouge.
Syntaxe à utiliser :
var x=document.getElementsByTagName('balise')[numero] ;
x.style.color=’valeur’ ;

function changerCouleur()
{
var p1=…………………………………………………………………
var p2 =…………………………………………………………………
p1……………………………………………………………………….
P2……………………………………………………………………….
}
3. Ajouter dans la fonction ChangerCouleur() les commandes permettant de
changer le contenu des des deux paragraphes
a. Le premier paragraphe= « le premier paragraphe est devenu de couleur
bleu »
b. Le deuxième paragraphe= « le deuxième paragraphe est devenu de
couleur rouge »
Exercice 2 : Se familiariser avec getElementsByClassName
1. Soit le code suivant
<p class="maclasse1">
bonjour
</p>
<p class="maclasse1">
tout le monde
</p>
<div class="maclasse1">
bloc
</div>
2. Taper sur la touche F12 du clavier pour lancer l’inspecteur DOM
3. Ecrire la commande suivante dans l’onglet console :
for (let e of document.getElementsByClassName("maclasse1"))
{ e.style.color = "blue"; }
4. Ecrire la commande suivante dans l’onglet console :
for (let e of document.getElementsByClassName("maclasse1"))
{ e.style.color = "green"; }
p. 2

Vous aimerez peut-être aussi