Javascript

Enseignant : ILYES BRADAI Page 1 sur 10
Système Technologie etInternet 4ème SI-STI
1
Le Langage JavaScript
I. Le formalisme de base de JavaScript
<html>
<head>
<title>Page contenant un Script </title>
<script>
.....
</script>
</head>
<body>
<form>
....
</form>
</body>
</html>
II. Les formulaires
Activité 1
a. Créer une page web contenant le formulaire suivant :
b. Produire la balise obtenue présentant le formulaire.
………………………………………………………………………………..
c. Ajouter un nom à ce formulaire
………………………………………………………………………………..
Constatation : la balise <form> est composée des attributs suivants :
Attribut Rôle
method
action
name
1) Les objets d’un formulaire
A. L’objet Zone de Texte
1) Balise d’insertion
< input type ="text" name="nom_zone_texte" >
2) La propriété Value
Cette propriété retourne le contenue (valeur) de la zone de texte
Syntaxe :
nom_formulaire.nom_zone_text.value
B. L’objet Case d’option / Bouton Radio
<input type ="radio" name="nom_radio" value="val">
2) La propriété Checked
Cette propriété retourne vrai (true) si l’option est cochée et retourne
faux (false) si l’option est non cochée
Code
javaScript
Les objetsdu
formulaire

2
Syntaxe :
nom_formulaire.bouton_radio[i].cheked
NB. L’indice i représente l’ordre de d’option dans le groupe qui
commence à partir de la valeur zéro : 0
C. L’objet Case à cocher (checkbox)
<input type ="checkbox"
name="nom_case_option" value="val">
2) La propriété Checked
Elle a le même rôle que la propriété checked du bouton radio
Syntaxe :
nom_formulaire.case_option.cheked
D. L’objet Liste déroulante
<select size="taille" name="nom_liste">
< option value="Valeur1" > option1 </option>
< option value="Valeur2" > option2 </option>
…..
< option value="Valeur3" > optionN </option>
</select>
2) Les propriétés
a. La propriété length : retourne le nombre d’options d’une liste
Syntaxe :
nom_formulaire.liste.options.length
b. La propriété selectedIndex : désigne l’indice de l’option
séléctionnée dans la liste
Syntaxe :
nom_formulaire.liste.options.selectedIndex
c. La propriété options[i] : désigne l’option numéro i (à partir de
0)
Syntaxe :
nom_formulaire.liste.options[i]
d. La propriété text : désigne le contenue de l’option numéro i
Syntaxe :
nom_formulaire.liste.options[i].text
e. La propriété value : désigne la valeur de l’option numéro i
Syntaxe :
nom_formulaire.liste.options[i].value
E. Les boutons : Normal, Reset et Submit
 Le bouton normal permet d’effectuer des opérations sur les objets
de la même page ou bien permet d’ouvrir une autre page.
<input type="button" value="Bouton" name="B1">
 Le bouton reset permet d’annuler les modifications apportées à
tous les contrôles d’un formulaire et de revenir aux valeurs par
défaut.
<input type="submit" value="Envoyer" name="B2">

3
 Le bouton submit valide le formulaire et envoi les données saisies
à l’URL (fichier) désigné dans l’attribut ACTION de la balise
<FORM>
<input type="reset" value="Rétablir" name="B3">
III. Les fonctions
1) Déclaration
Chaque fonction est déclarée dans la partie <script></script>
<script>
function nom_fontion (liste_paramètres)
{
…..
}
</script>
Activité 2
Dans cette page, on souhaite calculer le résultat des variables A et B par
l’opération sélectionnée. Déclarer une fonction « javascript » Calculer( )
2) Appel d’une fonction
L’appel d’une fonction se fait grâce à un évènement sur un objet du
formulaire ou un évènement sur le document (un click, déplacement
souris, appuyer sur une touche, ouverture de la page …)
Syntaxe :
OnEvénement = "nom_fonction()"
3) Les événements
Un évènement peut être :
a. onclick : est lancé lors du click avec le bouton gauche de la souris
sur une zone de texte ou un bouton.
b. onFocus : lorsque la zone de texte reçoit le focus
c. onBlur : lorsque la zone de texte perd le focus
d. onChange : lorsque la zone de texte perd le focus et change de
valeur.
e. onKeyUp : lorsque l’utilisateur relâche une touche (clavier)
f. onKeyDown : lorsque l’utilisateur appuie sur une touche.
g. onsubmit : lorsque l’utilisateur appuie sur un bouton de type
envoyer.
h. onload : lorsque une page est chargée (ouverture)
i. onunload: lorsque une page est déchargée (fermeture)
Activité 3
Ajouter un évènement de click sur le bouton calculer faisant un appel
à la fonction calculer( )
………………………………………………………………………………
4) Les variables
Les variables peuvent se déclarer de deux façons :
Façon explicite Façon implicite
var Numero = 1
var Prenom = "Lycée"
var trouve = true
Numero = 1
Prenom = " Lycée "
trouve = true
Début de la
fonction
Fin de la
fonction
Corps de la
fonction
Début du
script
Fin du
script

4
5) Les opérations d’entrée/sorties
a) Les entrées
prompt ( ) est une méthode qui permet d’afficher une boîte de
dialogue avec un message et un champ de saisie.
Cette méthode appartient à l’objet window.
Syntaxe :
nom_variable = prompt ("message", "valeur par défaut")
b) Les sorties
 alert ( ) est une méthode qui permet d’afficher un message et/ou
une variable dans une boîte de dialogue. Cette méthode appartient
à l’objet window.
Syntaxe :
alert ("message"+nom-variable) ;
 write ( ) est une méthode qui permet d’afficher un texte et/ou une
variable dans une page WEB. Cette méthode appartient à l’objet
document.
document.write("message"+nom-variable) ;
Activité 4
Ajouter un code javascript permettant de :
 Afficher le messageBienVenue dans l’univers JAVASCRIT lors
de chargement de la page.
 A partir d’une boite de saisir donner ton nom et afficher à la fin
du document le message : « bonjour » suivit de ton nom
6) Les tests Javascript
Chaque formulaire doit obéir à une liste de conditions satisfaisant les
besoins de l’utilisateur à fin d’éviter les risques des données (valeurs)
erronées (incorrectes).
Les structures conditionnelles
La forme simple réduite La forme alternative
if (condition vraie)
{
Instructions ;
………
}
if (condition vraie)
{
Instructions ;
………
}
else
{
Instructions ;
………
}
La forme généralisée La forme à choix multiple
if (condition1 vraie)
{
Instructions ;
}
else
if (condition 2 vraie)
{ Instructions ; }
…………
else
{ Instructions ; }
switch (expression)
{
case valeur1 : instructions ;
break ;
break ;
break ;
default : instructions ;
}
Activité 5
Ajouter à la fonction calcule les testes suivants :
 Tester que le contenue des zones de texte A et B sont :
o Non Vide
o Numérique
 Tester qu’il ya une opération sélectionnée
 Calculer le résultat selon l’opération (+, -, *, /) sélectionnée.

5
Produire le code JavaScript obtenu IV. Fonctions prédéfinies dans JavaScript
1) Le type numérique
fonctions Rôle Exemple
parseInt()
Extrait une valeur
numérique entière à partir
d’une chaîne de caractère
x=parseInt("25.75dt")
// x=……………
parseFloat
Extrait une valeur
numérique décimale à
partir d’une chaîne de
caractère
x=parseFloat("25.75dt")
// x=……………
isNaN()
Retourne "true" si une
valeur est numérique et
"false" sinon.
reponse=isNaN("25.75")
//reponse=……………
eval()
Retourne le résultat
numérique d’une
expression en paramètre
oper ="*" ;
v1=10 ;
valeur="v1"+oper+"5" ;
x=eval (valeur) ;
//x=……………
Number()
Convertit un objet en
valeur numérique.
chaine= "2009" ;
val = Number (chaine) ;
//x=……………
String()
Convertit un nombre en
une chaîne de caractère.
x = String(12) ;
y = String(45) ;
z = x+y ;//z=……………
2) L’objet Math
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….

6
Méthode Description Exemple
abs (nb)
Retourne la valeur absolue
d’un nombre
x=Math.abs (-3.26) ;
//x=3.26
ceil (nb)
Retourne l’entier supérieur
ou égale à la valeur
donnée en paramètre.
x=Math.ceil (3.01) ;
//x=……….
x=Math. ceil (3.99) ;
//x=……….
floor (nb)
Retourne l’entier inférieur
ou égale à la valeur
x=Math.floor (3.01) ;
//x=……….
x=Math.floor (3.99) ;
//x=……….
round (nb)
Retourne l’entier le plus
proche de la valeur
x=Math.round (3.01) ;
//x=……….
x=Math.round (3.99) ;
//x=……….
max (nb1,nb2)
Retourne le plus grand des
deux nombres donnés en
paramètres
x=Math.max (2,3) ;
//x=……….
//x=……….
min (nb1,nb2)
Retourne le plus petit des
deux nombres donnés en
paramètres
x=Math.min (-2,-3) ;
//x=……….
pow (nb1,nb2)
Retourne le nombre nb1 à
la puissance de nb2
x=Math.pow (2,3) ;
//x=……….
random ()
Retourne un réel aléatoire
compris entre 0 et 1
x = Math.random( )
//x=……….
sqrt(nb)
Retourne la racine carrée
du nombre passé en
paramètre
x=Math.sqrt(4) ;
// x=……….
3) L’objet String : chaîne de caractères
Instruction Description Exemple
ch.length ;
Propriété qui donne la
longueur de la chaîne
de caractères ch.
Ch="java" ;
x=ch.length ;
// x= ………..
ch.charAt (p) ;
Méthode retourne le
caractère situé à la
position p dans la
chaine ch.
Ch="java" ;
c=ch.charAt(2) ;
// c= ………..
ch.indexOf(chaîne,p) ;
Méthode retourne la
position d'une chaîne
ch1 dans une autre
chaîne de caractère ch,
en effectuant la
recherche de gauche à
droite, à partir de la
position p (facultatif)
spécifiée en paramètre.
Ch="javascript" ;
x=ch.indexOf("s",2) ;
// x= ………..
x=ch.indexOf("s") ;
// x= ………..
ch.substring(x,y) ;
Méthode qui renvoie la
sous-chaîne située
entre la position x et la
position y-1
Ch="javascript" ;
x=ch.substring(4,6) ;
// x= ………..
ch. substr(x,y) ;
sous-chaîne composé
de y caractère à partir
de la position x
Ch="javascript" ;
x=ch. substr(4,6) ;
// x= ………..
ch. toUpperCase() ;
conversion majuscule
d’une chaine ch
Ch="JAVAScript" ;
x=ch. toUpperCase();
// x= ………..

7
ch.toLowerCase() ;
conversion minuscule
d’une chaine ch
Ch="javaScript" ;
x=ch. toLowerCase();
// x= ………..
Activité 6
Créer une page web « Location.html » suivante :
La liste déroulante « Modèle du voiture » contenant la liste des
modèles et leurs prix par jour :
Modèle Prix par jour
Clio 90
406 120
206 70
FIAT 50
1) L’appui sur le bouton « Générer un code » permet d’appeler
une fonction JavaScript « Code » qui réalise les actions
suivantes :
 Vérifier que les champs « Nom », « Prénom », « CIN » et
« Mail » non vides.
 Vérifier que les champs « Nom », « Prénom » commencent par
un caractère majuscule
 Vérifier que le champ « CIN » est numérique de 8 chiffres.
 Vérifier que le champ « Mail » contient le caractère @.
 Afficher dans la zone texte « code location » le code de location
du client, sachant que le code de location du client est la
concaténation de deux premières lettres de nom, trois premiers
chiffres de CIN et deux derniers lettres de prénom
.
Exemple : Nom=TAHRI CIN=08187261 Prénom=AHMED
 Code location=TA081ED
2) L’appui sur la zone texte « Prix de location » permet
d’appeler une fonction JavaScript « calcul » qui calcule et
affiche la prix de location dans la zone texte (Prix de location)
sachant que : Prix de location = Prix par jour * Nombre de
jours.
3) L’appui sur le bouton Valider appelle à une fonction JavaScript
« Verif » qui permet de vérifier que les champs « code
location » et « Prix de location» ne sont pas vides, si les
conditions sont satisfaisantes une page nommée
« Validation.html » sera appelée contenant le message
suivant : « MERCI POUR VOTRE VISITE »

8
Produire le code JavaScript obtenu V. Les structures de contrôle itératives : les boucles
1) La structure itérative complète : for (pour)
Syntaxe Exemple
for (Val-initial ; condition_continuation ;
expression_de_progression)
{
Instructions ;
}
S = 0 ;
for (i=… ; i<= … ; i…..)
{
s= s+i ;
}
// pour i de 1 à 10
2) La structure itérative à condition d’arrêt : while (tant que)
Syntaxe Exemple
while (condition_continuation)
{
Instructions ;
}
i =1 ;
s = 0 ;
while (……………….)
{
s = s+i ;
i++ ;
}
3) La structure itérative à condition d’arrêt : do…while(répéter)
Syntaxe Exemple
do
{
Instructions ;
}
while (condition_continuation) ;
s =0 ;
i = 1 ;
do
{ s = s+i ;
i++ ;
} while (…………………) ;
Activité 7
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….

9
Soit la page Diviseyr.html suivante : Produire le code JavaScript de la fonction Calcul
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….

10
Activité 9
Créer une page Nettoyage.html permettant de saisir une chaîne de
caractères CH à partir d’une boite de dialogue de taille compris entre
5 et 20. On veut afficher si CH est palindrome ou non.
Activité 10
Créer la page eleve.html contenant la fonction verif() permettant de
vérifier si le nom de l’élève est alphabétique ou non.
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….

Javascript

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Javascript

Similaire à Javascript (20)

Javascript