Javascript

Le Langage JavaScript
I. Le formalisme de base de JavaScript c. Ajouter un nom à ce formulaire

<html> ………………………………………………………………………………..
<head>
<title>Page contenant un Script </title> Constatation : la balise <form> est composée des attributs suivants :
<script> Attribut Rôle
..... Code
</script> javaScript
method
</head>
<body> action
<form>
Les objets du name
....
formulaire
</form> 1) Les objets d’un formulaire
</body>
</html> A. L’objet Zone de Texte
II. Les formulaires 1) Balise d’insertion
Système Technologie et Internet 4ème SI-STI 1
Activité 1
a. Créer une page web contenant le formulaire suivant : < 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
1) Balise d’insertion
<input type ="radio" name="nom_radio" value="val">
2) La propriété Checked
b. Produire la balise obtenue présentant le formulaire.
Cette propriété retourne vrai (true) si l’option est cochée et
……………………………………………………………………………….. retourne faux (false) si l’option est non cochée
Enseignant : ILYES BRADAI Page 1 sur 10

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

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

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

Extrait une valeur
numérique entière à x=parseInt("25.75dt")
parseInt()
partir d’une chaîne de // x=……………
caractère
Extrait une valeur
parseFloa numérique décimale à x=parseFloat("25.75dt")
t partir d’une chaîne de // x=……………
caractère
Retourne "true" si une reponse=isNaN("25.75")
isNaN() valeur est numérique et
"false" sinon. //reponse=……………
oper ="*" ;
v1=10 ;
Retourne le résultat
eval() numérique d’une valeur="v1"+oper+"5" ;
expression en paramètre x=eval (valeur) ;
//x=……………
chaine= "2009" ;
Convertit un objet en
Number() val = Number (chaine) ;
valeur numérique.
//x=……………
x = String(12) ;
Convertit un nombre en
String() y = String(45) ;
une chaîne de caractère.
z = x+y ;//z=……………
2) L’objet Math
IV. Fonctions prédéfinies dans JavaScript
Méthode Description Exemple
Instruction Description Exemple
Retourne la valeur absolue x=Math.abs (-3.26) ; Propriété qui donne la Ch="java" ;
abs (nb)
d’un nombre //x=3.26 ch.length ; longueur de la chaîne x=ch.length ;
x=Math.ceil (3.01) ; de caractères ch. // x= ………..
Retourne l’entier supérieur
//x=………. Méthode retourne le Ch="java" ;
ceil (nb) ou égale à la valeur
x=Math. ceil (3.99) ; caractère situé à la c=ch.charAt(2) ;
donnée en paramètre. //x=………. ch.charAt (p) ;
position p dans la // c= ………..
x=Math.floor
Retourne l’entier inférieur chaine ch.
(3.01) ; //x=……….
floor (nb) ou égale à la valeur Méthode retourne la
x=Math.floor
donnée en paramètre. (3.99) ; //x=………. position d'une chaîne Ch="javascript" ;
x=Math.round ch1 dans une autre x=ch.indexOf("s",2) ;
Retourne l’entier le plus chaîne de caractère ch, // x= ………..
(3.01) ; //x=………. ch.indexOf(chaîne,p)
round (nb) proche de la valeur en effectuant la
x=Math.round
donnée en paramètre. ;
(3.99) ; //x=………. recherche de gauche à x=ch.indexOf("s") ;
Retourne le plus grand des x=Math.max (2,3) ; droite, à partir de la // x= ………..
max (nb1,nb2) deux nombres donnés en //x=………. position p (facultatif)
Système Technologie et Internet
paramètres //x=………. spécifiée en paramètre. 4ème SI-STI 6
Retourne le plus petit des Méthode qui renvoie la Ch="javascript" ;
x=Math.min (-2,- ch.substring(x,y) ;
min (nb1,nb2) deux nombres donnés en sous-chaîne située x=ch.substring(4,6) ;
3) ; //x=……….
paramètres entre la position x et la // x= ………..
Retourne le nombre nb1 à x=Math.pow (2,3) ; position y-1
pow (nb1,nb2)
la puissance de nb2 //x=………. Méthode qui renvoie la Ch="javascript" ;
Retourne un réel aléatoire x = Math.random( ) sous-chaîne composé x=ch. substr(4,6) ;
random () ch. substr(x,y) ;
compris entre 0 et 1 //x=………. de y caractère à partir // x= ………..
Retourne la racine carrée de la position x
x=Math.sqrt(4) ;
sqrt(nb) du nombre passé en
// x=………. Méthode qui renvoie la Ch="JAVAScript" ;
paramètre ch. toUpperCase() ; conversion majuscule x=ch. toUpperCase();
d’une chaine ch // x= ………..
Méthode qui renvoie la Ch="javaScript" ;

ch.toLowerCase() ; conversion minuscule x=ch. toLowerCase();
d’une chaine ch // x= ………..
3) L’objet String : chaîne de caractères

Activité 6  Vérifier que les champs « Nom », « Prénom » commencent
Créer une page web « Location.html » suivante : 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
Système Technologie et Internet jours. 4ème SI-STI 7
3) L’appui sur le bouton Valider appelle à une fonction
JavaScript « Verif » qui permet de vérifier que les champs
La liste déroulante « Modèle du voiture » contenant la liste des « code location » et « Prix de location» ne sont pas vides,
modèles et leurs prix par jour : si les conditions sont satisfaisantes une page nommée
Modèle Prix par jour « Validation.html » sera appelée contenant le message
Clio 90 suivant : « MERCI POUR VOTRE VISITE »
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. Produire le code JavaScript obtenu
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
1) La structure itérative complète : for (pour)
Syntaxe Exemple
S = 0 ;
for (Val-initial ; condition_continuation ; for (i=… ; i<= … ; i…..)
expression_de_progression) {
{ s= s+i ;
Instructions ; }
} // pour i de 1 à 10
2) La structure itérative à condition d’arrêt : while (tant que)
Syntaxe Exemple
i =1 ;
while (condition_continuation) s = 0 ;
{ while (……………….)
Instructions ; {
Système Technologie et Internet } s = s+i ; 4ème SI-STI 8
i++ ;
}
3) La structure itérative à condition d’arrêt : do…while(répéter)
Syntaxe Exemple
do s =0 ;
{ i = 1 ;
Instructions ; do
} { s = s+i ;
while (condition_continuation) ; i++ ;
} while (…………………) ;
Activité 7
V. Les structures de contrôle itératives : les boucles Soit la page Diviseyr.html suivante :

……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
……………………………………………………………………………….
Produire le code JavaScript de la fonction Calcul 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.
……………………………………………………………………………….
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.
………………………………………………………………………………. ……………………………………………………………………………….
………………………………………………………………………………. ……………………………………………………………………………….
………………………………………………………………………………. ……………………………………………………………………………….
………………………………………………………………………………. ……………………………………………………………………………….
………………………………………………………………………………. ……………………………………………………………………………….
………………………………………………………………………………. ……………………………………………………………………………….
Système Technologie et Internet
………………………………………………………………………………. 4ème SI-STI 10
……………………………………………………………………………….
……………………………………………………………………………….
Activité 10

Langue

Javascript

Transféré par

Informations du document

Description :

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Description :

Droits d'auteur :

Formats disponibles

Javascript

Transféré par

Description :

Droits d'auteur :

Formats disponibles

Le Langage JavaScript

I. Le formalisme de base de JavaScript c. Ajouter un nom à ce formulaire

Enseignant : ILYES BRADAI Page 1 sur 10

Enseignant : ILYES BRADAI Page 2 sur 10

Enseignant : ILYES BRADAI Page 3 sur 10

fonctions Rôle Exemple

Méthode qui renvoie la Ch="javaScript" ;

Enseignant : ILYES BRADAI Page 6 sur 10

2) La structure itérative à condition d’arrêt : while (tant que)

3) La structure itérative à condition d’arrêt : do…while(répéter)

Enseignant : ILYES BRADAI Page 8 sur 10

Produire le code JavaScript de la fonction Calcul Activité 9

Enseignant : ILYES BRADAI Page 9 sur 10

Enseignant : ILYES BRADAI Page 10 sur 10

Centres d'intérêt liés

Vous aimerez peut-être aussi