TP CSS 3STI
Objectif : Comprendre les objets des propriétés et des fonctions
prédéfinies
Exercice 1 : Saisir le code suivant dans une page nommée Math.html:
<p id="demo1"></p>
<p id="demo2"> </p>
<p id="demo3"> </p>
<p id="demo4"> </p>
<script>
var p1=document.getElementsByTagName('p')[0];
var p2=document.getElementsByTagName('p')[1];
var p3=document.getElementsByTagName('p')[2];
var p4=document.getElementsByTagName('p')[3];
p1.innerHTML=Math.PI;
p1.style.fontFamily="cursive" ;
p1.style.fontWeight="bold";
p2.innerHTML=Math.pow(2,3);
p3.innerHTML=Math.abs(-3);
p4.innerHTML=Math.ceil(4.4);
</script>
1- Expliquer le rôle de Math
………………………………………………………………………………………………………………………………………
2- Expliquer l’instruction suivante : p1.style.fontFamily="valeur"
………………………………………………………………………………………………………………………………………
3- Quel est le rôle de Math.PI
………………………………………………………………………………………………………………………………………
4- Quel est le rôle de Math.pow()
………………………………………………………………………………………………………………………………………
5- Quel est le rôle de Math.abs()
………………………………………………………………………………………………………………………………………
6- Quel est le rôle de Math.ceil()
………………………………………………………………………………………………………………………………………
7- Quelques fonctions prédéfinies
………………………………………………………………………………………………………………………………………
p. 1
TP CSS 3STI
Exercice 2 : Saisir le code suivant dans une page nommée chaine.html
<p id="demo1"> Classe num 3 Sciences de l’informatique
num1</p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>
<script>
var p1=document.getElementsByTagName('p')[0];
var p2= document.getElementsByTagName('p')[1] ;
var p3= document.getElementsByTagName('p')[2] ;
var p4= document.getElementsByTagName('p')[3] ;
var p5= document.getElementsByTagName('p')[4] ;
var lg= p1.innerHTML.length;
p2.innerHTML =lg ;
var pos= p1.innerHTML.indexOf(“Sciences”);
p3.innerHTML=pos ;
var partie= p1.innerHTML.slice(10,18);
p4.innerHTML=partie ;
var pos= p1.innerHTML.lastIndexOf(“num”);
p5.innerHTML=pos ;
</script>
1- Expliquer le rôle de innerHTML.length, quel est le résultat affiché ?
………………………………………………………………………………………………………………………………………
2- Expliquer le rôle de indexOf(), quel est le résultat affiché ?
………………………………………………………………………………………………………………………………………
3- Quel est le rôle de slice() quel est le résultat affiché ?
………………………………………………………………………………………………………………………………………
4- Quel est le rôle de lastIndexOf() quel est le résultat affiché ?
………………………………………………………………………………………………………………………………………
5- Quelques fonctions prédéfinies
………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………
p. 2
TP CSS 3STI
Exercice 3 : Saisir le code suivant dans une page nommée Date.html
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<script>
var d = new Date();
document.getElementById("demo1").innerHTML =
d.getFullYear();
var mois =
["janvier","fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Sept
embre","Octobre","Novembre","Decembre"];
document.getElementById("demo2").innerHTML =
mois[d.getMonth()];
document.getElementById("demo3").innerHTML = d.getDate();
</script>
1- Expliquer le rôle de getFullYear(), quel est le résultat affiché ?
………………………………………………………………………………………………………………………………………
2- Expliquer le rôle de getMonth(), quel est le résultat affiché ?
………………………………………………………………………………………………………………………………………
3- Quel est le rôle de getDate() quel est le résultat affiché ?
………………………………………………………………………………………………………………………………………
4- Quelques fonctions prédéfinies
………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………
Exercice 5 : Saisir le code suivant dans une page nommée Array.html
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<script>
var fruits = ["Banane", "Orange", "fraise", "Manga"];
document.getElementById("demo1").innerHTML =
fruits.toString();
document.getElementById("demo2").innerHTML =
fruits.join(" * ");
p. 3
TP CSS 3STI
document.getElementById("demo3").innerHTML = fruits;
fruits.pop();
fruits.push("Kiwi");
document.getElementById("demo4").innerHTML = fruits;
</script>
1- Expliquer le rôle de toString(), quel est le résultat affiché ?
………………………………………………………………………………………………………………………………………
2- Expliquer le rôle de join(), quel est le résultat affiché ?
………………………………………………………………………………………………………………………………………
3- Quel est le rôle des méthodes pop() , push() quel est le résultat affiché ?
………………………………………………………………………………………………………………………………………
4- Quelques fonctions prédéfinies
………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………
Exercice 5 : Saisir le code suivant dans une page nommée objet.html
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var voiture = {type:"Fiat", modele:"500", couleur:"bleu"};
var eleve={id:12345, nom:"foulen", prenom:"foulani",
age:16};
document.getElementById("demo1").innerHTML = "le type
de la voiture est " + voiture.type;
document.getElementById("demo2").innerHTML =
eleve.nom + " " + eleve.prenom;
</script>
5- Expliquer l’objet voiture
………………………………………………………………………………………………………………………………………
6- Expliquer l’objet eleve
……………………………………………………………………………………………………………………………………
7- Quel est le contenu affiché par eleve.nom , eleve.prenom ?
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
p. 4
