Vous êtes sur la page 1sur 6

TP JAVASCRIPT L1 <body >

<script language="JavaScript">
TP 1: Utilisation de write et appel de var resultat;
fonction resultat = prompt("Entrez un nombre inférieur
ou supérieur à 30", 29.789)
<html> if(resultat == null)
<head> alert("Vous ne voulez pas jouer ! Au-revoir.")
<title>Prompt</title> else if(isNaN(resultat))
<script language="JavaScript"> alert("Entrée invalide : "+resultat)
else if(resultat < 30)
for (i=2; i<10; i++){ alert("Votre entrée : " + resultat + " est
switch (i){ inférieure à 30")
case 2 : document.write("c'est un deux else if (resultat > 30)
<BR>"); alert("Votre entrée : " + resultat + " est
break; supérieure à 30")
case 8 : document.write("c'est un huit else
<BR>"); alert("Votre entrée : " + resultat + " est égale à
break; 30")
default : document.write("valeur" +i </script>
+"<BR>"); </body>
} </html>
}
TP 3 : Appel de function
for (i=2; i<10; i++){
if (i==5){ <HTML>
document.write("valeur de i est égale à 5, <HEAD>
je stoppe la boucle"); <SCRIPT language="Javascript">
break; <!—
} function Moyenne(a,b){
document.write("valeur"+i+"<BR>"); return (a + b)/2 ;
} }
function Chargement() {
function somme(N) { alert('Bienvenue sur le site');
var sum=0; }
for (var i=1;i<=N;i=i+1) {
sum=sum+i; // sum+=i ; function Affiche(Texte) {
} alert(Texte); }
alert("Somme de 1 à "+N+" = "+sum);
} //-->
somme(10); </SCRIPT>
</script> </HEAD>
</head> <BODY onLoad="Chargement();" >
<body >
</body> <A href="#"
</html> onClick="Affiche('Texte1');return(false)">Texte
1</A>
<A href="#"
TP 2 : Exemple de prompt onClick=" alert("Moyenne de 7 et 8 : " +
<html> Moyenne(7,8) ) ;">Calcul moyenne</A>
<head>
<title>Prompt</title> </BODY>
</head> </HTML>

1
TP4 : Fenetre popup </html>

<html>
<head> TP6. MODIFICATION D'UNE IMAGE LORS
<title>Info Bulle</title> DU PASSAGE DE LA SOURIS
<script language="JavaScript">
var fen; <html>
<head>
function ouvrir() <title>Modification d'une image lors du
{ passage de la souris</title>
fen=open("page.html", "mafen", "toolbar=yes, </head>
width=100, height=100, scrollbars=yes") ; </head>
} <body>
<a href="#"
function fermer_popup() onMouseOver="document.img_1.src='execut
{ fen.close(); e.gif';"
} onMouseOut="document.img_1.src='tomcat.g
if';">
function fermer_window() <img name="img_1" src="tomcat.gif"> </a>
{ window.close(); } </body>
</script> </html>
</head>
<body bgcolor="#FFFFFF">
<input type="button" value="Ouvrir" TP 7. Gestion des événements
onclick="ouvrir()" title="Ouvrir" /> <br/>
<input type="button" value="fermer la fenetre <html>
popup" <head>
onclick="fermer_popup() »> <bR> <SCRIPT language="Javascript" type=
<input type="button" value="fermer la fenetre "text/javascript ">
en cours"
onclick="fermer_window()” > function ValiderMail(formulaire) {
</body> if (formulaire.mail.value.indexOf("@",0)<0)
</html> {alert("Adresse mail saisie invalide.\nLe
formulaire ne sera pas validé.")}
TP5 : Minuterie else {
alert("Formulaire validé.\nPour valider
<html> un formulaire : formulaire.submit()");
<head> // Pour valider le formulaire en javascript
<title>Minuterie</title> :
<script language="JavaScript"> // formulaire.submit()
function Horloge() { }
var dt=new Date(); }
window.status=dt.getHours()
+":"+dt.getMinutes()+":"+dt.getSeconds(); function verifiermail(mail) {
} if
var timer=setInterval("Horloge()", 1000); ((mail.indexOf("@")>=0)&&(mail.indexOf(".")>
</script> =0)) {
</head> return true
<body > } else {
<A href='javascript:clearInterval(timer)'> alert("Mail invalide !");
Arrêter l'horloge</A> return false
}
</body> }
2
</script> }
</head> }
<body>

<form name="FormTexte2" method="" function passer_focus()


action="" > {
<INPUT type="text" name="champtexte" if( ( event.which == 13) || (event.keyCode ==
value="contenu" 13 ) )
onFocus="window.status=this.name" {
onBlur="window.status=''"> <br> document.forms[0].prenom.focus();
event.keyCode=0 ;
<input type="text" name="NomFen2" value= }
"Texte initial" size="20" }
onChange='
this.value=this.value.toUpperCase()'> <br> </script>
</head>
<INPUT type="button" name="bouton" <body>
value='Cliquez-moi !' <FORM>
onClick="this.value='Touché !'"> <br> Entrer un nombre
<input type ="text" name = ="nombre "
<INPUT type="text" value="Non modifiable" onkeyPress ="return validerNombre() ;" >
name="champ" onFocus="this.blur()"> <br> <br>

Saisissez une adresse mail valide (du type <TEXTAREA NAME="Texte" ROWS="8"
nom@domaine.com) <INPUT type="texte" COLS="40">Passez la souris...</TEXTAREA>
name="mail"> <br> <bR>
<INPUT type="button" name="bouton" <A HREF="#"
value="Valider" onMouseOver="document.Info.Texte.value
onClick="ValiderMail(this.form)"> <br> ='Bla, bla, bla..."> Texte du lien</a> <br>

<input type="button" value="Rétablir les Nom <input type = ="text"" name ="nom "
valeurs par défaut" onkeyPress ="passer_focus()"; > <BR>
onClick="this.form.reset();"> Prenom <input type = ="text"" name
="prenom" > <BR>
</form>
</body> <a href= "page.htm " onclick= "return
</html> confirm('Etes-vous sûr de vouloir regarder
cette page ?'); ">Regardez cette exemple
TP8. Formulaire onClick</a> <br>

<html> <INPUT TYPE=button VALUE="Lien


<head> vers... " onClick=
<SCRIPT language="Javascript" type= "document.location.href='page.html'";> <br>
"text/javascript ">
</FORM>
function validerNombre() </body>
{ </html>

If ( event.keyCode <43 || event.keyCode >57 )


// if( ( event.which <43 || event.which >57 ) ) TP9 : modifier dynamiquement le contenu
{ d'une liste
event.returnValue=false ;
// return false; <html>
3
<head> Exemple 1 : Trouver des mots dans un
<SCRIPT language="Javascript" type= texte
"text/javascript ">
Mot à recherche : lecture
function Choix(form) <html>
{ <head>
i = form.Rubrique.selectedIndex; <SCRIPT language="Javascript" type=
if (i == 0) { return; } "text/javascript ">
switch (i) {
case 1 : var txt = new Array function Search(f) {
('Materiel','Poissons','Sécurité'); break;
case 2 : var txt = new Array var lemot = f.mot.value
('Radioactivite','Information','Mesures'); break; var exp=new RegExp(lemot,"g");
case 3 : var txt = new Array if ( exp.test(f.texte.value) ) {alert("Le mot
('Philosophie','Psychologie','Humour'); break; ["+lemot+"] a été trouvé :)"); }
} else {alert(" E R R E U R !\n\nLe mot
form.Rubrique.selectedIndex = 0; ["+lemot+"] n'est pas présent !!!!"); }
}
for (i=0;i<3;i++) {
form.Page.options[i+1].text=txt[i]; </script>
} </head>
} <body >
<form name='f'>
</script>
</head> <input type="text" name="mot" size=30
<body> value="lecture"> <br>
<FORM> <TEXTAREA NAME="texte" ROWS="8"
COLS="40">
<SELECT NAME="Rubrique" Ok la lecture
onChange='Choix(this.form)'> voir la lecture
<OPTION>-- Choisissez une rubrique </TEXTAREA>
---</OPTION> <input type="button" value="Chercher mot"
<OPTION>Plongée</OPTION><OPTION>Nu onClick="Search(this.form);"> <br>
cléaire</OPTION> </form>
<OPTION>Bonheur</OPTION> </body>
</SELECT> </html>

<SELECT NAME="Page">
<OPTION>-- Choisissez une page Exemple 2 : Vérifier un login
---</OPTION>
<OPTION></OPTION> <html>
<OPTION></OPTION> <head>
<OPTION></OPTION> <SCRIPT language="Javascript" type=
</SELECT> "text/javascript ">

</FORM> function VerifLogin(login) {


</body> var exp=new RegExp("^[a-zA-Z0-9]
</html> {3,8}$","g");
if ( exp.test(login) ) {alert("Le login
TP10 : Expression régulière ["+login+"] est valide :)"); }
else {alert(" E R R E U R !\n\nLe login
["+login+"] n'est pas valide !!!!"); }
}
4
</script> onClick="bouge(0,10)">
</head> </FORM>
</body>
<body > </html>
<form name='f'>
<input type="text" name="login" size=30
value=""> <br>
<input type="button" value="Verifier login"
onClick="VerifLogin(this.form.login.value);"> TP 12: DEPLACEMENT D’UNE CALQUE
<br> AU PASSAGE D'UNE SOURIS

</form> <html>
</body> <head>
</html> <script language="javascript"
type="text/javascript">
timer=0;
TP 11: Déplacer image x=50; //donner ici la position initiale du calque

<html> function init_timer(){ timer=1;}


<head>
<SCRIPT language="Javascript" type= function stop_timer(){ timer=0; }
"text/javascript ">
var hautimage = 100; function avant(max,calq){
var gaucheimage = 100; maximum=max;
document.write('<IMG calque=calq;
SRC="images/smilee.gif" ID=smile if (document.getElementById){ // IE >4 et
STYLE="position:absolute;top:'+hautimage+';l NN >4
eft:'+gaucheimage+'">'); document.getElementById(calque).style.left=x
;
function bouge(x,y) }
{ if (document.all && !
if(document.getElementById) document.getElementById){ // IE4
{ document.all.style.left=x;
hautimage += y; }
gaucheimage += x; if (document.layers){ // NN4
document.getElementById("smile").style. document.layers.left=x;
top = hautimage; }
document.getElementById("smile").style. if(timer==1 && x<maximum){
left = gaucheimage; setTimeout("avant(maximum,calque)",400);
} x+=7;
} }
}
</script> </script> </head>
</head> <!-- <body
<body > onload="init_timer();avant(500,'moncalque')">
<FORM> -->
<INPUT TYPE=button VALUE=gauche <body>
onClick="bouge(-10,0)"> <!—
<INPUT TYPE=button VALUE=droite Si on positionne sa souris ici, le calque
onClick="bouge(10,0)"> 'moncalque' va se déplacer jusqu'à être à
<INPUT TYPE=button VALUE=haut 500px du bord mais le déplacement s'arrêtera
onClick="bouge(0,-10)"> si je bouge ma souris et quitte ce lien </a>
<INPUT TYPE=button VALUE=bas --- >
5
<a href="#" onMouseOver= </script>
"init_timer();avant(500,'moncalque')" </head>
onMouseOut="stop_timer()"> <br>
<div id="moncalque" style="background- <body>
color:#ffcc00; layer-background-color:#ffcc00; <div id="nom_calque" classe="nom_classe
position:absolute; top:10px; left:10px; <table id="nom_tableau"
width:100px; height:100px; visibility:visible"> <tr>
BONJOUR <td>case 1</td>
</div> <td>case 2</td>
</a> </tr>
</body> </table>
</html> </div>
<a href="javascript:cache()">cacher</a> <a
TP13 : COMMENT CACHER ET MONTRER href="javascript:montre()">montrer</a>
UNE COUCHE </body>
</html>
<html>
<head>
<script language="JavaScript">

function cache() {
document.getElementById("nom_calque").
style.visibility="hidden";
}

function montre() {
document.getElementById("nom_calque").styl
e.visibility="visible";
}
/*
En JavaScript, il existe une quantité d'attributs
pour agir sur les calques. D'autres exemples :
//déplacer à gauche
document.getElementById("nom_calque").styl
e.left=10;
//déplacer verticalement
document.getElementById("nom_calque").styl
e.top=parseInt
document.getElementById("moncalque").style
.top)+10;
//modifier la taille
document.getElementById("nom_calque").styl
e.width=parseInt
(document.getElementById("moncalque").styl
e.width)-10;
//changer la couleur de fond
document.getElementById("nom_calque").styl
e.backgroundColor="yellow";
//changer la couleur du texte
document.getElementById("nom_calque").styl
e.color="green";
*/
6

Vous aimerez peut-être aussi