Java Script 1

4ème SI Le langage JavaScript
Le langage JavaScript
1. Limites du langage HTML

Le langage HTML présente les limites suivantes :
- Absence de structures de contrôles algorithmiques (conditionnelles et itératives)
- Langage sans aucune logique de programmation procédurale (notion de sous programmes,
variables, opérateurs prédéfinies …)
- Absence de possibilité de liaison avec des bases de données.
Pour pallier à ces limites on peut utiliser d’autres langages tel que JavaScript, VbScript, ASP,
PHP…
2. Formalisme de base de JavaScript

Activité 1 :
1 <html>
<head>
<title> Mon premier code JavaScript</title>
Balises HTML
</head>
<body>
texte en HTML
2 <script language= "javascript"> Début du script
3 alert (" Bienvenue") ; Contenu du script avec Script

//alert permet d’afficher une fenêtre message. des ;
4 </script> Fin du script
5 un autre texte en HTML
</body> Balises HTML
</html>
2.1. Délimiteurs du JavaScript

<script language= "javascript">
………….
………….
</script>
2.2. Les commentaires

// Commentaire sur une seule ligne
/* Commentaire sur
Plusieurs
Lignes */
2.3. Les différents emplacements du code JavaScript

- On peut introduire les scripts entre les balises <head>…</head> ou bien entre les balises
<body>…</body>.
- Le premier emplacement est réservé à la déclaration des fonctions.
- L’appelle d’une fonction se fait soit dans un script dans la partie <body> ou dans une autre
fonction.
2.4. Les objets JavaScript

- Les objets JavaScript peuvent être répartis en deux catégories :
 Les objets d’interface : window, document, button…
 Les objets des propriétés et des fonctions prédifinies : string, math, date, navigateur, array et
object.
M. Amine Ben Slimène Page 1

- Les objets d’interface sont organisés d’une façon hiérarchique :
window window
document
document
anchor
form
button
radio
checkbox
image
form
link
Objet radio Objet texte
- Les objets JavaScript ont des propriétés (variables) et des méthodes (fonctions) :
- Pour accéder à une propriété ou appeler une méthode d’un objet on utilise la syntaxe suivante :
Nom_de_l’objet.nom_de_la_propriété_ou_de_la_méthode
Exemples :
window.document.form.radio[0].checked La propriété checked permet de tester si l’objet
radio[0] est selectionné (checked=true) ou non
(checked=false).
Ch.length La propriété length permet retourner la longueur de
la chaîne de caractères Ch.
Document.write(x) La méthode write() permet d’écrire dans le
document la valeur de x.
D.getYear() La méthode getYear() permet de retourner l’année
de l’objet D.
2. Les Entrées/Sorties en JavaScript

2.1. L’entrée
Syntaxe :
Nom_variable = prompt("texte de la boite d’invite","valeur par défaut") ;
Exemple :
N = prompt("Entrer un entier","4") ;
Remarque :
La méthode prompt() fait entrer des chaînes de caractères. Donc il faut convertir la valeur entrée
pour obtenir un nombre. La méthode Number() permet cette conversion.
N = Number(prompt("Entrer un entier","4")) ;
2.2. La sortie
Syntaxe :
Document.write("message" + nom_variable) ;
Alert("message" + nom_variable) ;

Exemples
Type d’affichage Exemple
Affichage de texte Document.write("Bonjour") ;
Affichage d’une valeur Document.write(N) ;
Affichage mixte Document.write("La valeur de N est : " + N) ;
Affichage mixte avec mise en forme Document.write("<font color=’red’> La valeur de N est : </font> " + N) ;
Activité 2 :
1/ Créer un fichier et y taper le code donné ci-dessous :
<html>
<head>
<title> activité 2</title>
</head>
<body>
<script language="javascript">
var a = Number(window.prompt("Entrer la valeur de a","0"));
var b = Number(window.prompt("Entrer la valeur de b",""));
s=a+b;
document.write(s);
</script>
</body>
</html>
2/ que fait ce code ?
…………………………………………………………………………………………………………
3/ Modifier l’affichage de s pour qu’il soit de cette forme : La somme de a et b donne s.
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
4/ Remplacer la méthode write() par la méthode alert().
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
3. Les variables
3.1. Déclaration de variables
- Les variables peuvent être déclarées de deux façons :
 D’une façon explicite avec le mot var :
var N=1 ;
var Prénom="Salah" ;
 D’une façon implicite sans le mot var :
N=1 ;
Prénom="Salah" ;
- Contrairement au langage Pascal, il ne faut pas déclarer le type de données d’une variable.
- JavaScript utilise 4 types de données :
Types Description
Des nombres Tout nombre entier ou avec virgule exemple : 22 ou 3.14
Des chaînes de caractères Toute suite de caractères comprise entre guillemets exemple "Bonjour"
Des booléens Les mots true (pour vrai) et false (pour faux)
Le mot null Mot spécial qui indique l’absence d’une valeur
3.2. Visibilité des variables

Activité 3 :
Faire l’activité 5 pages 84-85
Remplir le tableau suivant :

Emplacement de Avec var/Sans var Variable Visibilité
déclaration de la variable globale/Variable locale
Déclaration en d’hors et Avec var ou sans var
avant toute fonction
Déclaration dans une Sans var
fonction f
Déclaration dans une Avec var
fonction f
4. Les opérateurs prédéfinis

Dans les exemples suivants la valeur initiale de X est toujours égale à 11 et la valeur initiale de Y
est toujours égale à 5
4.1. Les opérateurs de calcul
Signe Nom Signification Exemple Résultat
+ Plus Addition X+3 14
- Moins Soustraction X-3 8
* Multiplié par Multiplication X*3 33
/ Divisé Par division X/2
% Modulo Reste par la division de X%5
= A la valeur Affectation X=5
4.2. Les opérateurs de comparaison

Signe Nom Exemple Résultat
== Egal X==11 True
< Inférieur X<3 False
<= Inférieur ou Egal X<=11 True
> Supérieur X>11
>= Supérieur ou Egal X>=11
!= Différent X !=11
4.3. Les opérateurs associatifs

Signe Nom Signification Exemple Résultat
+= Plus égal X = X +Y X +=Y 16
-= Moins égal X=X–Y X -=Y
* Multiplié égal X=X*Y X *=Y
/ Divisé égal X=X/Y X /=Y 2,2
4.4. Les opérateurs logiques

Signe Nom Exemple Résultat
&& ET (X>3) && (Y<3)
|| OU (X>3) || (Y<3)
! NON !((X>3))
4.5. Les opérateurs d’incrémentation

Signe Signification Exemple Résultat
X++, ++X Incémentation (X++ est le Y=X++ ; Y=11 et X=12
même que X=X+1) Z=++X ; Z=13 et X=13
X--, --X Décrémentation (X—est le Y=X-- ; Y=11 et X=10
même que X=X-1) Z=--X ; Z=9 et X=9

5. Les structures de contrôle
5.1. Les structures conditionnelles
5.1.1. La structure IF
Syntaxe
Forme réduite Forme complète
If (condition vraie) If (condition vraie)
{ {
Une ou plusieurs instructions ; Instructions 1 ;
} }
Else
{
Instructions 2 ;
}
Activité 4 :
1/ Ecrire un code en JavaScript permettant de vérifier si la valeur d’une entrée est numérique ou non
(utiliser la fonction booléenne isNaN() qui retourne False si la valeur est numérique et True sinon).
2/ Modifier le code pour qu’il affiche en plus, si le nombre saisi au clavier est positif ou négatif.
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
5.1.1. La structure Switch

Syntaxe :
Switch(expression)
{
Case v1 :
Bloc1; ……………………………………………………………
Break; ……………………………………………………………
Case v2 : ……………………………………………………………
Bloc2; ……………………………………………………………
Break; ……………………………………………………………
Default: ……………………………………………………………
Bloc_n; ……………………………………………………………
Break; ……………………………………………………………
} ……………………………………………………………
Activité 5:
1/ Faire l’activité 9 page 91.
2/ Modifier le code pour qu’il affiche un message d’erreur si le numéro du mois saisi n’est pas
valide.

5.2. Les structures itératives
Syntaxe :
La structure For La structure do … While La structure While
For (initialisation ; condition ; progression) Do While(conditions)
{ { {
Instructions ; Instructions ; Instructions ;
} } }
While (conditions) ;
- Initialisation : les instructions Equivalent de répéter …Equivalent de Tant que
d’initialisations nécessaires. Tant que la condition est
la condition est vraie
- Condition : la condition de continuité vraie. répéter…
est vraie (bouclage).
- Progression : définit la pas du compteur
(pas forcément +/-).
Activité 6 :
Ce code permet de calculer la factorielle d’un entier saisi au clavier avec la structure For.
<html>
<head>
</head>
<body>
var a = Number(window.prompt("Entrer un entier",""));
f=1;
for(i=1;i<=a;i++)
{
f=f*i;
}
document.write("La factorielle de"+a+"est "+f);
</script>
</body>
</html>
Avec Do…While Avec While

…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………
…………………………………………………………………………………………………………

6. Les fonctions en JavaScript
- La définition de la fonction est faite dans la partie entête <head>, son appel est fait dans la
partie corps <body>.
- En JavaScript, il existe deux types de fonctions :
 Les fonctions prédéfinies (méthodes).Elles sont associées à un objet bien particulier comme
la méthode write() avec l’objet document.
 Les fonctions déclarées par le programmeur selon les besoins de l’application.
- Pour déclarer ou définir une fonction, on utilise la syntaxe suivante :
function nom_de_la_fonction(arguments)
{
…Code des instructions…
[return nom_variable]
}
- La mention des arguments (paramètres) est facultative mais dans ce cas les parenthèses doivent
rester.
- Une variable déclarée dans une fonction par le mot clé var aura une porté limitée à cette
fonction contrairement à une variable déclarée sans var qui aura une portée globale.
- On peut ne pas utiliser la clause return (sans retour) : on trouve ainsi l’équivalent d’une
procédure.
Activité 7 :
1/ Quel est le rôle du code suivant ?
…………………………………………………………………………………………………………
2/ Tester ce code.
3/ remplacer les deux instructions de la fonction somme() par une seule instruction.
…………………………………………………………………………………………………………
4/ Modifier le code en lui décomposant en trois fonctions :
 Saisie() : permet de saisir un entier.
 Somme() : permet de calculer et retourner la somme de deux entiers.
 Affiche() : permet d’afficher le résultat.
<html>
<head>
function somme(x,y)
{
var s=x+y;
document.write(s);
}
</script>
</head>
<body>
var a = Number(window.prompt("Entrer la valeur de a",""));
var b = Number(window.prompt("Entrer la valeur de b",""));
somme(a,b);
</script>
</body>
</html>

………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
………………………………………………………………………………………………………
7. La gestion des événements en JavaScript

La programmation des événements se fait par l’association à chaque événement une action à travers
la syntaxe suivante :
<nombalise OnEvénement = "fonction">
Quelques événements :
Evénement Rôle
onClick Lorsqu’on clique sur un bouton par exemple, une fonction
sera exécutée
onMouseOver Lorsque le pointeur de la souris passe au dessus d’un lien
par exemple, une fonction sera exécutée.
onFocus Lorsqu’un champ de saisie est prêt à recevoir ce que
l’utilisateur veut taper, une fonction sera exécutée.
onChange Lorsque le contenu d’une zone de texte est modifié par
l’utilisateur, une fonction sera exécutée.
Activité 8 :
1/ Tester le code suivant.
2/ Ajouter des boutons (-,* et /) et les fonctions associées pour créer une petite calculatrice.
<html>
<head>
function somme()
{
var x=Number(document.f.a.value);
var y=Number(document.f.b.value);
document.f.s.value=x+y;
}
</script>
</head>
<body>
<form name="f">
<input type="text" name="a" size="5"><br>
<input type="text" name="b" size="5"><br>
<input type="button" value="Calculer la somme" onClick="somme()"><br>
<a href="#" onMouseOver="somme()">Calculer la somme</a><br>
<input type="text" name="s" size="5"><br>
</form>
</body>
</html>

Java Script 1

Transféré par

Informations du document

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é ?

Droits d'auteur :

Formats disponibles

Java Script 1

Transféré par

Droits d'auteur :

Formats disponibles

4ème SI Le langage JavaScript

1. Limites du langage HTML

2. Formalisme de base de JavaScript

3 alert (" Bienvenue") ; Contenu du script avec Script

2.1. Délimiteurs du JavaScript

2.2. Les commentaires

2.3. Les différents emplacements du code JavaScript

2.4. Les objets JavaScript

M. Amine Ben Slimène Page 1

2. Les Entrées/Sorties en JavaScript

M. Amine Ben Slimène Page 2

3.2. Visibilité des variables

M. Amine Ben Slimène Page 3

4. Les opérateurs prédéfinis

4.2. Les opérateurs de comparaison

4.3. Les opérateurs associatifs

4.4. Les opérateurs logiques

4.5. Les opérateurs d’incrémentation

M. Amine Ben Slimène Page 4

5.1.1. La structure Switch

M. Amine Ben Slimène Page 5

Avec Do…While Avec While

M. Amine Ben Slimène Page 6

M. Amine Ben Slimène Page 7

7. La gestion des événements en JavaScript

M. Amine Ben Slimène Page 8

Vous aimerez peut-être aussi