3SI
TP1 : JavaScript
Objectif : bien placer le code JavaScript dans une page HTML
Affichage des messages
Saisie des données
Activité1 : écrire un code JavaScript qui permet d’afficher le message « Bonjour ».
Où on peut placer le code JavaScript ?
Par quelles balises le code JavaScript est délimité ?
Quelle méthode utilisée pour afficher (messages, variables,…)
Placer ce code <script language= "javascript" >alert("bonjour")</script> :
Entre <head> …… </head>
Quelle est la différence ?
Entre <body> ……</body>
Même résultat
Dans un fichier [Link]
Dans un document HTML Entre les balises <head> …. </head>
Dans un document HTML entre les balises <body> ….. </body>
Dans un fichier externe avec l’extension .js
Dans ce cas le code JavaScript est écrit directement, Dans ce deux cas le code JavaScript est
mais on doit faire la liaison entre les deux fichiers délimité par la balise <script>
HTML et JS avec cette balise placée dans le
document HTML entre <head>….</head> <script>……[code JavaScript]…….</script>
<script language= "javascript"
src="nom_ficheier.js">
Remplacer la méthode alert par [Link] dégager la différence
A retenir : pour afficher un message (une variable, constante, …) on utilise soit la
méthode alert (affichage dans une boite de dialogue), soit la méthode [Link]
(affichage dans le document)
Utilisation d’une fonction
Modifier le code JavaScript dans le fichier [Link] par une fonction qui affiche le message
bonjour
Function test()
{ alert("bonjour") ;}
On remarque que le code JavaScript n’affiche rien. Donc l’utilisation d’une fonction
doit obligatoirement accompagner par un évènement html qui permet d’appeler la fonction
3SI
Les évènements : onfocus, onblur, onclick, onmouseover, onchange, onload,
onkeypress, onkeyup, oninput
Saisie des données
Activité 2 : écrire un code JavaScript qui permet de saisir un entier et l’afficher
Function test()
{
Var x= prompt ("saisir un entier")
Alert("vous avez saisir"+x)
}
Activité 3 : ajouter un bouton valider dans le document HTML, le clic sur le bouton permet
de saisir un entier et l’afficher (utilisation de l’évènement onclick)
Activité 4: saisir deux entiers et calculer leurs somme