Scribd
Importer
41 vues5 pages

Tp1 HTML

Transféré par

fatma.baccour.coach
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 DOCX, PDF, TXT ou lisez en ligne sur Scribd
41 vues5 pages

Tp1 HTML

Transféré par

fatma.baccour.coach
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 DOCX, PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 5

TP N°1 : JavaScript

Objectifs :
Savoir insérer du code JS dans une page Web.
Savoir accéder aux objets formant une page Web en écrivant de code JS.

I- Qu’est ce que le Javascript :


Javascript est un langage de scripts qui incorporé aux balises Html, permet d'améliorer la
présentation et l'interactivité des pages Web. Javascript est donc une extension du code
Html des pages Web. Les scripts, qui s'ajoutent ici aux balises Html, peuvent en quelque
sorte être comparés aux macros d'un traitement de texte. Ces scripts vont être gérés et
exécutés par le browser lui-même sans devoir faire appel aux ressources du serveur. Ces
instructions seront donc traitées en direct et surtout sans retard par le navigateur.

II- Comment Insérer un code Javascript :


Pour écrire et tester des codes Javascript il vaut faut un navigateur Web qui reconnaît
Javascript (IE, Mozilla Firefox,…), un éditeur de traitement de texte (Notepad++, bloc
note,Word pad…)

1. Insertion pour exécution directe :


C'est-à-dire le code s’exécute automatiquement lors de chargement de la page HTML au
niveau du navigateur. Le code javascript est placé dans le corps de la page html c'est-à-
dire entre <body>…</body>
Exemple1 : Taper le code JS suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Premiers algorithmes en JavaScript</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Premiers algorithmes en JavaScript</h1>
j'essaye le javascript...
<script language=’’javascript’’>
alert(“Ce message est affiché automatiquement”);
</script>
ça marche ?
</body>
</html>
Exemple2 : Taper le code JS suivant :
<html>
<head><title>Exemple2</title>
<script language=’’javascript’’>
function affiche(){
alert(“Ce message ne s’affiche que lorsque vous avez cliqué sur le bouton
”);}
</script>
</head>
<body>
<form name=”f1”>
<input type=”button” name=”evenement” value=”cliquer ici” onclick=”affiche()”>
</form>
</body></html>

Exemple3 : La méthode prompt


La méthode prompt est un peu plus évoluée que les deux précédentes puisqu'elle fournit
un moyen simple de récupérer une information provenant de l'utilisateur, on parle alors
de boîte d'invite. La méthode prompt() requiert deux arguments :
• le texte d'invite
• la chaîne de caractères par défaut dans le champ de saisie Sa syntaxe est donc la
suivante
: prompt('Posez ici votre question','chaîne par défaut');

Ecrire le programme qui retourne la chaine de caractère écrite dans la boîte d'invite
saisie par l'utilisateur lorsque je clique sur le bouton, elle retourne la valeur null si jamais
aucun texte n'est saisi...
Réponse
< !—HTML -->
<input type= »text » id= »inputText »>
<button onclick= »getText() »>Obtenir le texte</button>
<p id= »output »></p>
< !—java Script -->
Function getText() {
Var input = document.getElementById(« inputText »).value ;
Var output = document.getElementById(« output ») ;

If (input === "" ) {


Output.textContent = "null ";
} else {
Output.textContent = input ; }
}

Exercice 1 :
À un document HTML créer un formulaire qui contient une image et un bouton, ajouter
les alertes suivantes :
 Au chargement de la page,
 Quand on passe sur une image,
 Quand on clique sur un
bouton Avec des boutons :

 Changer la couleur de fond du document quand on clique sur un bouton,


 Changer aussi l'apparence du bouton,
 Ajouter un bouton qui permette de revenir à la normale.

< !DOCTYPE html>


<html>
<head>
<script>
Function onPageLoad() {
Alert(« La page est chargée ! ») ;
}

Function onImageHover() {
Alert(« Vous survolez l’image ! ») ;
}

Function onButtonClick() {
Alert(« Vous avez cliqué sur le bouton ! ») ;
}

Function changeBackground() {
Document.body.style.backgroundColor = « yellow » ;
}

Function changeButtonAppearance() {
Var button = document.getElementById(« myButton ») ;
Button.style.backgroundColor = « blue » ;
Button.style.color = « white » ;
Button.style.border = « none » ;
}

Function restoreDefault() {
Document.body.style.backgroundColor = « « ;
Var button = document.getElementById(« myButton ») ;
Button.style.backgroundColor = « « ;
Button.style.color = « « ;
Button.style.border = « « ;
}
</script>
</head>
<body onload= »onPageLoad() »>
<form>
<img src= »path/to/your/image.jpg » onmouseover= »onImageHover() »>
<br>
<button id= »myButton » onclick= »onButtonClick() »>Cliquez ici</button>
<br>
<button onclick= »changeBackground() »>Changer la couleur de fond</button>
<br>
<button onclick= »changeButtonAppearance() »>Modifier l’apparence du bouton</button>
<br>
<button onclick= »restoreDefault() »>Revenir à la normale</button>
</form>
</body>
</html>
Exercice 2 :
Tester les instructions document.write et document.writeln en affichant au minimum un
nombre, une phrase
Créer un tableau a deux dimensions 10*10
Remplir le contour du tableau avec des étoiles ‘*’
Résultat d’exécution :

Exercice 3 :
Écrire un programme qui demande à l’utilisateur de saisir 7 nombres entiers comprises
entre 9 et 99, puis une fois la saisie terminée, les affiche.
Le programme doit redemander la saisie en cas d’erreur sans compter cette étape
Le programme permet à l’utilisateur de voir le numéro du nombre à saisir de la manière
suivante :
Le programme affiche les nombres des entiers pairs, le nombre des entiers impairs saisis
et le nombre des itérations fausses
Le programme affiche le tableau des nombres pairs et le tableau des nombres impairs saisis
Le schéma suivant représente le résultat souhaitait

Vous aimerez peut-être aussi