Cours

Activité 1 : Est-ce qu’on peut créer une page Web qui permet de
saisir deux entiers a et b et d’afficher leur maximum dans une

boite de dialogue ?
Constatation : Les limites du langage HTML :
• Absence des structures de contrôle algorithmiques
(conditionnelles et itératives)
• Un langage sans aucune logique de programmation
procédurale (notion de sous programmes, variables,
opérateurs prédéfinies…)
• Absence de possibilités d’interfaçage avec les bases de
données
Les solutions proposées :

La solution est d’utiliser les langages structurés :
• Coté client : JavaScript, VbScript.
• Coté serveur : ASP, PHP, Cold fusion.
Partie III :
Le langage JavaScript
II- Le formalisme de base du
JavaScript :
Activité 2 : Activité 2 page 79.
Structure d’une page Web contenant un code JavaScript :
<HTML><HEAD><TITLE>…..</TITLE>
EMPLACEMENT POUR
SCRIPT language="JavaScript"
<………………………………..…………> LA DECLARATION DES
……………..……………… FONCTIONS
<……………>
SCRIPT
</HEAD><BODY>
EMPLACEMENT DU
<………………………………..…………>
SCRIPT language="JavaScript" CODE JAVASCRIPT
……………..………………
<……………>
SCRIPT
</BODY></HTML>
Remarques :
• Le code javascript doit etre entre les balises
<script language =javascript>…………</script>
• Chaque instruction se termine par un « ; »
• Le code javascript est sensible a la casse (il faut
distinguer entre les lettres Majuscule et Minuscule
• Tout ce qui est écrit entre le // et la fin de la ligne,
représente un commentaire et il sera ignoré lors de
l’exécution (//commentaire)
• Pour mettre des commentaires sur plusieurs lignes (/*
commentaire sur plusieurs lignes*/)
III- Les objets javaScript :
La hiérarchie des objets d’interface :
Objet bouton
Objet bouton radio

Objet Fenêtre (window) Objet document Objet formulaire
Objet zone de texte
Objet Fenêtre (window)

Objet document
Objet formulaire
Objet bouton radio
Objet bouton
Objet zone de texte
Les propriétés des objets :
Exemple : pour accéder au contenu d’une zone de texte il faut
utiliser la propriété value
Syntaxe :
x=Window.Document.form1.nom.value ;
Les méthodes des objets :
Exemples :
 La méthode write() : c’est une méthode applicable sur l’objet
document
Syntaxe : Window.Document .write("BienVenue") ;
 La méthode alert() : c’est une méthode applicable sur l’objet
window
Syntaxe : Window.alert("BienVenue") ;
IV- Les Entrées / Sorties en JavaScript :
1) Les instructions d’affichage de JavaScript :
Activité 3 : Créer un fichier HTML nommé « Act3.html » contenant
le code JavaScript permettant l’affichage d’une fenêtre de
message contenant le texte suivant : « Bonne année 2012 »,
sachant que 2012est stocké dans une variable Y.
 La méthode alert () :
C’est une méthode de l’objet window permet l’affichage dans
une fenêtre de message (boite de dialogue).
Exemple :
Méthode Aperçu
y=2012
window.alert("Bonne année"+y) ;
Activité 4: Activité 3 page 82
 La méthode write () :C’est une méthode de l’objet document

permet de modifier de façon dynamique le contenu d’une page web.
2) Les instructions de saisie dans
JavaScript :
Activité 5 : Activité 6 page 86.
SYNTAXE
Nom_variable = prompt("message",valeur par défaut(initialisation));
 Conversion de types :
 La fonction isNaN() : is Not a Number : est une fonction
booléenne permettant de vérifier si le contenu d’une variable est
numérique ou non :
 isNaN(A) : retourne True si le contenu de A n’est pas numérique.
 isNaN(A) : retourne False si le contenu de A est numérique.
Ex : A= prompt("Donner votre numéro d’ordre dans la classe"," ") ;
If(isNaN(A)){
alert (" Conversion impossible ");}
else {
B=Number (A);
B=B+1 ;}
 La fonction Number() : permet de convertir une chaîne
en entier s’il est possible.
Ex1 :
A= prompt ("Saisir votre année de naissance","19 ") ;
A=A+1 ;
alert(A) ;
191
Résultat=………………….
 Ex2:
A= Number(prompt("Saisir votre année de naissance","19 ")) ;
A=A+1 ;
alert (A) ;
20
La fonction String() : permet de convertir un entier
en chaîne de caractères.
Ex : A=200 ;
B=String (A) ;
B=B+1 ;
alert (B) ;
2001
V- Les structures de données
dans JavaScript :
 Les variables :
La déclaration d’une variable :
 Les variables peuvent se déclarer de deux façons :
 Façon Explicite : JavaScript utilise le mot clé var devant la
variable à déclarer.
Ex : var n=22 ;
var chaine=" Bonjour" ;
var b=2>5 ;
 Façon Implicite : On écrit directement le nom de la variable
suivie du caractère = et de la valeur à affecter.
Ex : n=22 ;
chaine=" Bonjour" ;
b=2>5 ;
Les types d’objets dans
JavaScript :
Type Description
Des nombres Tout nombre entier ou avec virgule tel
que 22 ou 3.1416
Des chaînes de caractères Toutes suite de caractères comprise
entre guillemets
Des booléens Les mots true pour vrai et false pour
faux
Le mot null Mot spécial qui indique que la
variable est vide
3) La portée (visibilité) des
variables :
La déclaration explicite d’un variable dans une

fonction rend ce dernier visible seulement dans la
local
fonction (variable…………..) et visible dans la
totalité de la page dans les autres cas (variable
global
………..).
 Activité6 : Ecrire un programme en JavaScript
qui permet la saisie de deux entiers « A » et
« B » à partir de deux boites de dialogues puis
afficher leurs sommes, la soustraction, le
produit, la division réelle et le reste de la
division entière.
Les opérateurs prédéfinis
Les opérateurs de calcul (x=11)
Signe Signification Exemple Résultat
+ Addition x+3 14
- Soustraction X-1 10
* Multiplication X*2 22
/ Division x/2 5.5
Reste par la
% X%3 2
division de
= Affectation X=5 5
Les opérateurs de comparaison (x=11)
== Egal X==11 True
< Inférieur X<3 False
Inférieur ou
<= X<=11 True
Egal
>= Supérieur X>11 False
Supérieur ou
> X>=11 True
Egal
!= Différent X!=11 False

Les opérateurs associatifs (x=11)
X+=4;
+= <-> X+=4 15
x=x+4;
X-=4;
X-=4;
-= <-> 7
x=x-4;
X*=4;
X*=4;
*= <-> 44
x=x*4;
X/=4;
X/=4;
/= <-> 2.75
x=x/4;
Les opérateurs Logiques
&& ET (x==5) && true false
|| OU (x==5) || true true
! NON ! (x>=11) false

Les structures de contrôle conditionnelles :
Activité 7 : Créer un fichier HTML contenant le code
JavaScript permettant de déterminer le maximum entre
deux entiers.
Le résultat sous forme d’une fenêtre de message

La forme réduite
If (condition)
{Traitement ;}
Activité 8 : Créer un fichier HTML contenant le

code JavaScript permettant de déterminer le
maximum entre trois entiers.
La forme complète La forme généralisée
If (condition) If (condition)
{Traitement1 ;} {Traitement1 ;}
else else
………
{Traitement2 ;} else
{Traitement n ;}
La structure switch Exemple:
Switch (expression) { <script language =javascript >
case valeur1:Traitement 1; break; a=Number(prompt("saisir un a",""));
switch (a)
case valeur2:Traitement 2; break; {
case valeur3:Traitement 3;break; case 1:alert("Dimanche");break;
default: Traitement 4 ; break; case 2:alert("Lundi");break;
case 3:alert("Mardi");break;
} case 4: alert("Mercredi");break;
case 5: alert("Jeudi"); break;
case 6: alert("Vendredi"); break;
case 7: alert("Samedi"); break;
default : alert("Erreur") ; break;
}
</script>
3) Remarques :
 L’instruction break permet de quitter la structure
switch après l’exécution du bloc convenable
 Le traitement de default est un traitement facultatif

exécuté dans le cas où l’expression ne satisfait pas
l’ensemble des cas indiqués.
Les structures de contrôle itératives :
La boucle Pour : (La structure for) :
Activité 10 : Ecrire un script qui permet de saisir deux
entiers a et b et de calculer a * b sans utiliser l’opérateur « * ».
Syntaxe
for (Valeur initiale ; Condition ; progression)
{ Traitement à répéter }
Exemple
Afficher le message Bonjour 5 fois :
for ( i=1 ; i<=5 ; i++)
{document.write(« Bonjour"); }
La boucle Répéter : (La structure do…while) :
Activité 10: Créer un fichier HTML contenant le code
JavaScript permettant la lecture de deux entiers avec (a>b).
Syntaxe Exemple
do Exemple :
Lire un entier a tels que a>0 :
{Traitement à répéter } do
while( condition(s)) ; { a = prompt("Donner le premier entier : "," ");
a = Number(a) ;
} while (a<=0);
Autrement
do
{ a = prompt("Donner le premier entier : "," ");
a = Number(a) ;
} while (!(a>0));
La boucle Tantque : (La structure while) :
Activité 11 : : Créer un fichier HTML contenant le code
JavaScript permettant de calculer le PGCD de deux entiers a
et b, tels que a>1 et b >2, en utilisant la méthode des
différences.
Syntaxe Exemple
Exemple :
while( condition(s)) PGCD de deux entiers par la méthode de
{Traitement à répéter ;} différence.
while( a !=b)
{ if (a>b)
{a - = b;}
else
{ b - = a; }
}
Les fonctions en JavaScript
Activité 12 : Créer un fichier HTML contenant un code
JavaScript permettant d’afficher le maximum entre deux entiers
tout en utilisant une fonction.
Les fonctions en JavaScript
Syntaxe Exemple
<HEAD>
………….. Fonction parité
<script language =javascript > function parite(x){
function nom_fonction (paramètre(s))
if(x%2= =0)
{ Traitement(s) ;
Return nom_variable ;} return true;
………….. else
</script> return false;
</HEAD>
}

JavaScript permettant d’afficher le mot "Bonjour".
NB : Déclarer une fonction affiche non paramétrée.
Remarques
 En JavaScript, la notion de sous-programme est
différente à celle en pascal, d’ailleurs on trouve seulement
des fonctions
 Une fonction prend en paramètre zéro ou plusieurs
arguments et peut retourner une valeur avec l’instruction:
return valeur;
Les événements en JavaScript
Activité 14 : Ajouter pour le fichier HTML Activité 14, un bouton qui
permet d’appeler la fonction affiche.
 Plusieurs événements peuvent se dérouler dans une page tels que

le click sur un bouton ou survole sur une image…
 Le JavaScript offre la possibilité de gérer ces événements ou
d’associer certaines actions ou programme.
 La programmation d’un événement se fait grâce à des attributs
associés à des balises concernées par cet événement.
Syntaxe
<nom_balise OnEvènement= "fonction ( )">
Exemple
<intput type="button" value="ok"onclick="affiche();">
1) OnClick :
Activité 15 : Créer un fichier HTML contenant un code JavaScript permettant
d’appeler la fonction affiche en cliquant sur un lien hypertexte.
Constatation : L’évènement OnClick peut être utilisé avec
Les boutons <input type="button" >
Et les liens hypertexte <a href>
2) OnFocus :
Activité 16 : Créer un fichier HTML contenant un code JavaScript permettant de :
Lire une chaine saisie dans une zone texte
Afficher le nombre de caractères de cette chaine dans une autre zone de texte.
L’évènement sera déclenché lorsque qu’on place le curseur dans la nouvelle zone.
Constatation:
L’évènement onfocus est déclenché quand le curseur est placé sur un champ spécifique de
formulaire
3) OnChange :
Activité 17 : Ecrire un script qui permet de lire une chaine saisie dans une zone
texte. Lorsque le curseur quitte cette zone, la chaine sera en majuscule.
Constatation:
L’évènement onchange survient lorsqu’un champ de formulaire perd le focus.
4) OnSubmit :
Activité 19 : Créer un fichier HTML contenant un code JavaScript permettant de
contrôler la saisie de deux champs texte « Nom » et « Age » lors de l’envoie du
formulaire.
Utiliser une fonction Verif ( ) qui permet de vérifier les conditions suivantes:
- Les champs ne doivent pas être vides.
- L’âge doit être numérique et supérieur ou égal à 18.
Constatation :
L’évènement OnSubmit survient lorsque l’utilisateur clic sur le bouton envoyer.
Les objets prédéfinis en JavaScript :
1) L’objet String (chaîne de caractères) :
Activité 20 :
Créer un fichier HTML contenant deux zones de texte :
 La première pour la saisie d’une chaine ch de n caractères (avec 3≤n≤8).
 La deuxième pour la saisie d’un caractère c quelconque.
Ajouter une fonction en JavaScript permettant d’afficher la taille et la position
de la première occurrence de c dans ch.
CONSTATATION :
Equivalent
Exemple pour
Propriété & Méthodes en Rôle
Ch= "Merci"
Pascal
Ch.length ; Length(ch) ; Permet de retourner la longueur T=Ch.length ;
d’une chaîne ou 0 si elle est T=5
vide
Ch2.indexOf(ch1,[P]) ; Pos(ch1,ch2) Permet de rechercher la première P1=Ch.indexOf("e") +1; ou
position de ch1 dans ch2 si elle P1=Ch.indexOf("e",0)+1;
existe et -1 dans le cas P2=Ch.indexOf("a");
contraire. P1=2
P permet de déterminer la position P2= -1
du caractère à partir duquel la
recherche est effectuée.
Ch.substr(p,n) ; Copy(ch,p,n) Permet d’extraire de la chaîne Ch Ch1=ch.substr(0,3) ;
une sous chaine de n caractères Ch1="Mer"
à partir de la position p.
Ch.charAt(x) ; Ch[x] Permet de retourner le caractère C1=Ch.charAt(3) ;
dont la position égale à x C2=Ch.charAt(7) ;
sachant que 0≤x≤Ch.length-1  C1="c"  C2=" "
2) L’objet Math :
Activité 22 :
Transformer l’expression suivante en JavaScript :
X=" RACINE_CARRE (ROUND(X) +|X3-Y|) " ;
CONSTATATION :
Méthodes Rôle Exemple
Math.abs(x) Permet de retourner la valeur absolue de x X= -2 ;
Y=Math.abs(X) ;
Y=2
Math.sqrt(x) Permet de renvoyer la racine carrée de x X= 2 ;
Y=Math.sqrt(X) ;
Y=4
Math.round(x) Permet d’arrondit x à l’entier le plus proche X= 4,45 ;
Y=Math.round(X) ;
Y=4
Math.random() Permet de retourner un nombre aléatoire entre 0 Y=Math.random () ;
et 1. Y= valeur_aléatoire
Math.eval(x) Permet d’évaluer une chaine de caractère sous X="2+6*2";

forme de valeur numérique. Y=Math.eval(X) ;
Y=14
Les formulaires en JavaScript :
Contrôle des zones texte :
Activité 22 : Créer un fichier HTML comportant un
script qui permet de lire un entier dans une zone de saisie
puis d’afficher son carré dans une autre zone
Constatation :
On peut affecter le contenu d’une zone de saisie à une variable à l’aide de
la syntaxe suivante :
Nomvariable = document.nomformulaire.nomzonedesaisie.value ;
Ex : x = document.f.T1.value ;
On peut modifier la valeur d’une zone de saisie avec la syntaxe suivante :
document.nomformulaire.nomzonedesaisie.value = expression ;
Ex : document.f.T2.value=x*x;
NB :
Nomformulaire : le nom du formulaire (l’attribut name de <FORM>)
Nomzonedesaisie : Le nom d’une zone de texte (l’attribut name de < input
type="text" >)
Les boutons radio :
JavaScript permettant de créer une calculatrice avec les 4
opérateurs de base et afficher le résultat dans une boîte de
dialogue.
Constatation :
La propriété checked permet de vérifier : L’ état d’une case d’option (cochée ou non)
Ex : if(document.form1.choix[0].checked)
La lecture de la valeur d’un bouton :
Ex : x=document.form1.choix[0].value
Les boutons radio sont utilisés pour sélectionner un seul choix parmi un ensemble de
propositions.
L’indice des boutons radio commence à partir de la valeur : 0
Contrôle des cases à cocher :
 Activité 24 : Créer un fichier HTML contenant un code
JavaScript permettant de créer un exercice à choix multiples de
façon interactif.
 L’utilisateur côche la ou les bonnes réponses et lorsqu’il valide sur
le bouton « vérifier » une boîte de dialogue s’affiche pour
indiquer si la réponse est correcte ou non.
Contrôle des cases à cocher :
Constatation :
La propriété checked permet de vérifier :
Si une case est cocher ou non
Ex : if(document.nomform.nomcase.checked)
Pour récupérer la valeur d’une case a cocher :
Ex : x=document. nomform.nomcase.value
Contrôle de liste de sélection :
Activité 25 : Créer un fichier HTML contenant un code JavaScript permettant de créer
une liste déroulante contenant 4 pays et commençant par le texte « Votre pays ».
Ecrire une fonction contrôle() qui permet d’afficher dans une boîte de dialogue le message
suivant : « Veuillez sélectionner un pays SVP » si l’utilisateur ne sélectionne aucun
pays et d’afficher le pays sélectionné dans le cas contraire.
Constatation :
La propriété selectedIndex permet de retourner :
L’indice de l’élément sélectionner dans une liste
Ex : if(document. nomform.nomliste.selectedIndex==0)
La propriété length permet de retourner:
Le nombre d’éléments d’une liste
Ex : x=document. nomform. nomliste.length ;
L’indice d’une liste déroulante commence à partir de : 0

Cours

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Cours

Încărcat de

Drepturi de autor:

Formate disponibile

Activité 1 : Est-ce qu’on peut créer une page Web qui permet de

saisir deux entiers a et b et d’afficher leur maximum dans une

Les solutions proposées :

Objet bouton radio

Objet Fenêtre (window)

 La méthode write () :C’est une méthode de l’objet document

La déclaration explicite d’un variable dans une

/ Division x/2 5.5

== Egal X==11 True

< Inférieur X<3 False

>= Supérieur X>11 False

!= Différent X!=11 False

&& ET (x==5) && true false

|| OU (x==5) || true true

! NON ! (x>=11) false

Le résultat sous forme d’une fenêtre de message

Activité 8 : Créer un fichier HTML contenant le

 Le traitement de default est un traitement facultatif

Activité 13 : Créer un fichier HTML contenant un code

 Plusieurs événements peuvent se dérouler dans une page tels que

Math.eval(x) Permet d’évaluer une chaine de caractère sous X="2+6*2";

S-ar putea să vă placă și