Scribd
Importer
206 vues14 pages

tp9 Js Elève

Transféré par

ngdzndhbqg
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOC, PDF, TXT ou lisez en ligne sur Scribd
206 vues14 pages

tp9 Js Elève

Transféré par

ngdzndhbqg
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOC, PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 14

Tp9

Le JavaScript est un langage orienté objet. L'objet « window » est l'objet par excellence dans JavaScript,
c’est l’objet maitre du JavaScript, car il est le parent de chaque objet qui compose la page web, il contient :
 L’objet document: la page en elle-même
 L’objet location: le lieu de stockage de la page
 L’objet history: les pages visitées précédemment
 L’objet frames: les cadres

Activité1 : Emplacement de script JavaScript + Les entrées/sortie en JavaScript :


1. Ecrire une page HTML contenant un script permettant d’afficher «Bonjour tout le monde » : utiliser la
méthode alert ("message")
Solution
Placer le script dans l’élément Placer le script dans l’élément Body Placer le script à la fin du code
Head html
<!DOCTYPE html><html> <!DOCTYPE html><html > <!DOCTYPE html><html >
<head> <head> <head>
<title></title> <title></title> <title></title>
<meta charset="UTF-8"> <meta charset="UTF-8"> <meta charset="UTF-8">
………………………………… </head>
………………………………… <body> </head>
………………………………… ……………………………………… <body>
………………………………… …………………………………………. </body>
</head> ………………………………………… </html>
<body> …………………………………………. ………………………………
</body> </body> ………………………………
</html> </html> ………………………………
………………………………

La méthode alert ("message") :c’est une méthode relative à l’objet window (fenêtre), elle permet
d’afficher une boite d’alerte contenant le message à afficher plus un bouton « ok »
2. Ajouter au code html un bouton normal appelé « Clic »
Solution
…………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………….
3. Le clic sur le bouton « Clic » affiche le message «Bonjour tout le monde » :
Utiliser la méthode alert ("message")
Solution
<!DOCTYPE html><html >
<head><title></title><meta charset="UTF-8">
</head>
<body>
……………………………………………………………………………………………………………
</body></html>
onclick : évènement se produit lorsque l’utilisateur clique sur un élément.

4. Le clic sur le bouton « Clic » fait appel à une fonction intitulé Affiche () qui permet d’afficher le message
«Bonjour tout le monde » : utiliser la méthode alert ("message")
 La définition de la fonction Placer dans l’élément Head
Lycée Elmorouj1 Page 1/14
3si 1
Tp9
 La définition de la fonction Placer dans l’élément Body avant l’appel
 La définition de la fonction Placer dans l’élément Body après l’appel
 La définition de la fonction Placer à la fin du code html
Solution
<!DOCTYPE html><html >
<head><title></title><meta charset="UTF-8">
………………………………………………………………..
…………………………………………………………………
………………………………………………………………….
…………………………………………………………………
</script> </head>
<body>
<input type="button" value="clic" ……………………………………………..…………….>
</body></html>

<!DOCTYPE html><html>
<head>
<title></title><meta charset="UTF-8">
<script>
function Affiche()
{
…………………………………………………………………………..
……………………………………………………………………………
…………………………………………………………………………
}
</script>
</head>
<body>
<input type="button" value="clic" onclick="Affiche ()">
</body></html>

La déclaration d’une fonction :


function nom _fonction (arguments) La définition d’une fonction JavaScript peut se
{ ... Code des instructions... faire :
return nom_var (optionnelle)  Dans l’élément Head
}  Dans l’élément Body avant l’appel ou après
l’appel
 Ä la fin du code html

5. Dans la fonction Améliorer le script pour qu’il permette de demander le Prénom de l’utilisateur utiliser la
méthode : prompt("Donner votre prénom","") et afficher « Bonjour ‘votre prénom’».
Exemple

Solution

Lycée Elmorouj1 Page 2/14


3si 1
Tp9
La méthode :
prompt ("message","") :
C’est une méthode relative à l’objet window, elle Affiche une boîte de dialogue, éventuellement avec un
message, qui invite l'utilisateur à saisir un texte.

6. Modifier la fonction Affiche pour afficher sur la page le message « Bienvenue dans le monde de
JavaScript » : utiliser la méthode document.write ("message")
Solution
<!DOCTYPE html><html>
<head>
<title></title><meta charset="UTF-8">
<script>
function Affiche()
{
…………………………………………………………………………..
……………………………………………………………………………
………………………………………………………………………………………………...
}
</script>
</head>
<body>
<input type="button" value="clic" onclick="Affiche()">
</body></html>
La méthode : document.write("message") :
C’est une méthode relative à l’objet document, elle écrit des expressions HTML ou du code JavaScript
dans un document.
Les évènements :
 Un évènement HTML peut être une action du navigateur ou une action d’un utilisateur,
 JavaScript vous permet d’exécuter du code lorsque des évènements sont détectés.
 La programmation des événements se fait par l’association à chaque événement une action à travers la
syntaxe suivante :<nombalise onevenement= "script"> :

 Les attributs d'événement HTML peuvent exécuter directement du code JavaScript


 Les attributs d'événement HTML peuvent appeler des fonctions JavaScript
Les évènements

Evénement Description
L'événement onfocus se produit lorsqu'un
onfocus utilisé avec <input>, <select> et <a>.
élément obtient le focus.
L'événement onblur se produit lorsqu'un objet
onblur utilisé avec <input>, <select> et <a>.
perd le focus.
L'événement onclick se produit lorsque
onclick utilisé avec <input>, <select> et <a>.
l'utilisateur clique sur un élément.
L'événement onload se produit lorsqu'un
onload <body>, <iframe>, <img>,<link>
objet a été chargé.
utilisé avec <input>, <select> et se produit lorsque la valeur d'un élément a
onchange
<textarea> été modifiée.

se produit lorsqu'un élément obtient une


oninput <input>, et <textarea>
entrée utilisateur.

Lycée Elmorouj1 Page 3/14


3si 1
Tp9

Activité2 : Changer le contenue d’un élément HTML ou sa mise en forme CSS avec
JavaScript:
1. Soit le code suivant d’une page nommée Act2.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Act2</title>
</head>
<body>
<p id="id1"> une ligne html</p>
<p id="ici">... paragraphe vide </p>
<p id="id2"> une autre ligne html</p>
<script>
document.getElementById('ici').innerHTML = "Bonjour de
<em>JavaScript </em>"
</script>
</body></html>

Résultat obtenu

2. Lancer votre navigateur disponible et observer le résultat obtenu,

La méthode getElementById() : renvoie l’élément qui a l’attribut ID avec la valeur spécifiée.


Elle renvoie null si aucun élément avec l’ID spécifié n’existe.

innerHTML : est une propriété de tout élément HTML qui permet de changer le contenu qui se trouve entre
la balise entrante et la balise fermante.
Exemple : <p id="p1"> un texte </p>
document.getElementById("p1").innerHTML="un autre texte";

3.Ajouter le script qui permet de modifier le contenu du premier paragraphe avec le mot «Bonjour »
……………………………………………………………………………………………………………………………………………………………………………………

4.Ajouter le script qui permet de modifier le contenu du dernier paragraphe avec «votre nom »
……………………………………………………………………………………………………………………………………………………………………………………

5.Ajouter le script qui permet de modifier la couleur du premier paragraphe en rouge


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

6.Ajouter le script qui permet de modifier la taille du 2eme paragraphe =25px


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

Lycée Elmorouj1 Page 4/14


3si 1
Tp9

Activité3 : modification des valeurs des attributs HTML:


1. Créer la page HTML suivante Act3.html:

La page contient l’image d’une


lampe Eteinte pic_bulboff.giff

2. Le clic sur le bouton « Allumer la lumière » fait appel à une fonction Allumer() qui permet d’allumer la
lampe (modifier l’image pic_bulboff.giff par pic_bulbon.giff )
3. Le clic sur le bouton « Eteinez la lumière » éteindre la lampe (modifier l’image pic_bulbon.giff par
pic_bulboff.giff )

Solution
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript?</h2>
<p>JavaScript Modifie les valeurs d'attribut HTML</p>
<p>Modification de la valeur de l'attribut src d'une image</p>
<button ………………………………………………..>Allumer la lumière</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button …………………………………………………………………………………………………..>Eteignez
la lumière</button>
</body>
</html>
<script>
function Allumer()
{
…………………………………………………………………………………………………………………….
}
</script>
les variables en JavaScript:
Les variables locales et globales :
Les variables peuvent se déclarer de deux façons :
Implicite : Sans aucune instruction
Explicite :
Pour déclarer une variable en JavaScript, vous devez utiliser les instructions :

 let si la valeur de la variable évolue dans le code ;


Exemple : let x=12 ; Ou bien let x;
x=12; x est une variable qui contient la valeur 12

Une fois la variable déclarée une première fois grâce à let, je peux l’utiliser directement.

Lycée Elmorouj1 Page 5/14


3si 1
Tp9
 const si la valeur de la variable est constante.
Une fois la constante est déclarée, elle ne pourra plus changer.

La « portée » d’une variable désigne l’espace du script dans laquelle elle va être accessible.
En effet, toutes nos variables ne sont pas automatiquement disponibles à n’importe quel endroit dans un
script et on ne va donc pas toujours pouvoir les utiliser.
En JavaScript, il n’existe que deux espaces de portée différents : l’espace global et l’espace local.

Activité 4: Saisir le code suivant :

Variables.html cours.js
<!DOCTYPE html> //On déclare trois variables globales
<html> let x = 5;
<head> y = 10;
<title>variable locale et let b = 3;
globale</title>
<meta charset="utf- //On définit une première fonction qui utilise les variables globales
8" /> function portee1() {
<script src="cours.js" > document.getElementById("p1").innerHTML ="Depuis portee1() : <br>x = " + x + "<br>y = " + y;}
</script>
</head> //On définit une deuxième fonction qui utilise les variables globales (avec modification)
function portee2() {
<body> a = 1;
<h1>Titre principal</h1> b = 4;
<p>Un paragraphe</p> document.getElementById("p2").innerHTML = "Depuis portee2() : <br> a = " + a + "<br>b = " + b;}
<p id="p1"></p>
<p id="p2"></p> //On définit une troisième fonction qui définit également des variables locales
<p id="p3"></p> function portee3() {
<p id="p4"></p> let x = 20;
<p id="p5"></p> let y = 40;
<p id="p6"></p> document.getElementById("p3").innerHTML= "Depuis portee3() : <br>x = " + x + "<br>y = " + y;}

</body> //On définit une quatrième fonction qui définit des variables locales
</html> function portee4() {
let c = 1;
var d = 2;
document.getElementById("p4").innerHTML = "Depuis portee4() : <br> c= " + c + "<br>d= " + d;}

//On pense bien à exécuter nos fonctions !


portee1();
portee2();
portee3();
portee4();
{
let x = 25;
alert(x);
}

//On tente d'afficher des variables globales puis locales depuis l'espace global
document.getElementById("p5").innerHTML = "Depuis l'espace global : <br>x = " + x + "<br>y = " + y;

document.getElementById("p6").innerHTML = "Depuis l'espace global : <br>c = " + c + "<br>d = " + d;

Variable globale: elle est déclarée dans l’espace global de notre script, elle est donc accessible et utilisable
dans la totalité du script et notamment dans des fonctions et des blocks. (Portée globale)
Variable locale : elle est déclarée dans une fonction , dans un block : avec le mot clé const ou let, aura
une portée limitée à cette seule fonction ou ce block. (Portée locale)
Remarque :

Lycée Elmorouj1 Page 6/14


3si 1
Tp9
 Les variables let x globale et let x locale, bien qu’elles possèdent le même nom, sont deux entités
totalement différentes (et de même pour let y globale et locale).
Elles vont agir indépendamment et ainsi modifier la valeur de let x locale ne modifiera pas la valeur
de la variable globale et inversement.
 Les variables let c et let d sont locales, elles ne sont pas accessibles depuis l’espace global et une
erreur va être émise par le JavaScript dans ce cas.
Les variables déclarées à l'intérieur d'un bloc { } ne sont pas accessibles depuis l'extérieur du bloc ,
Activité5 : Les types de données en JavaScript:
Réécrire le code suivant :
<script>
var x = 12, y = 12.5, ch = "Ahmed", b = true, t = [1, 12.5, "Ahmed"]
var d = new Date(),n = null
var o={nom: "Jemli",prénom: "Ahmed",age:18},I
document.write("le type de x = " + typeof(x) + " de valeur est:= " + x + "<br>")
document.write("le type de y = " + typeof(y) + " de valeur est:= " + y + "<br>")
document.write("le type de ch = " + typeof(ch) + " de valeur est:= " + ch + "<br>")
document.write("le type de b = " + typeof(b) + " de valeur est:= " + b + "<br>")
document.write("le type de t = " + typeof(t) + " de valeur est:= " + t + "<br>")
document.write("le type de d = " + typeof(d) + " de valeur est:= " + d + "<br>")
document.write("le type de n = " + typeof(n) + " de valeur est:= " + n + "<br>")
document.write("le type de o= " + typeof(o) + " de valeur est:= " + o.nom+" "+o.prénom+" à " +o.age+" ans<br>")
document.write("le type de I = " + typeof(I) + " de valeur est:= " + I + "<br>")
</script>

Les types de données en JavaScript sont :


 Number : entier ou réel
 String : chaine de caractères
 Boolean : true ou false
 Object : tableau, date, input,…
 Undifined : variable à laquelle on n’a pas affecté une valeur
La fonction typeof(x) retourne le type de x
Activité6 : Les structures de contrôles :
1.Créer la page web suivante

2.puis ajouter le code JavaScript qui permet :


Afficher sur une boite de dialogue le message « Saisir la valeur de x » lorsque la zone input a le curseur
Afficher la nature de x (positif ou négatif) devant « la nature de x » si on clique hors du champ
3. Ajouter à la page 2 zones inputs nommées respectivement Y et S
4. Ajouter le script qui permet :
 Afficher la somme de x+y dons la zone S si on place le pointeur de la souris sur ce dernier
Solution
!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Act6</title>
</head>

Lycée Elmorouj1 Page 7/14


3si 1
Tp9
<body>
<script>
function nature()
{
…………………………………………………………………………………………………………………
………………………………………………………………………………………………………………….
…………………………………………………………………………………………………………………
………………………………………………………………………………………………………………….
…………………………………………………………………………………………………………………
}
function somme()
{………………………………………………………………………………………………………………
…
………………………………………………………………………………………………………………….
…………………………………………………………………………………………………………………
………………………………………………………………………………………………………………….
}
</script>
<label for="x">X=</label><input type="text" id="x" ………………………………………………
………………………………………………………………………………..>
<label for="y">Y=</label><input type="text" id="y" >
<label for="s">Somme=</label><input type="text" id="s" …………….………………………...>
<p id="p1">la nature de x=</p>………………………………….
</body></htm>

La méthode isNaN(x) : (is Not a Number) est une fonction booléenne. Elle retourne true si la conversion de
chaine de caractères en un nombre n’est pas possible, sinon elle retourne false.
La méthode parseInt(x) : permet de convertir une chaine en entier.
La méthode Number (x) : permet de convertir une chaine en nombre (même que : parseFloat (x))
La méthode toString () : convertit un nombre en chaîne
La méthode toString (x) : Convertissez un nombre en chaîne, en utilisant différentes bases
La méthode valueOf () : renvoie la valeur primitive d'un objet String.
La méthode eval () : évalue ou exécute un argument.

Nom_variable=document.getElementById("identifiant").value : affecter la valeur d'une zone de saisie à une


variable,
document.getElementById("identifiant").value=nom_variable : modifier la valeur de la zone de saisie par
la valeur d’une variable,
document.getElementById("identifiant").focus() : donner le focus (a le curseur) a un élément.
Activité7 : Les structures de contrôles :
Créer la page Fac.html qui contient le code
JavaScript qui permet :
D’afficher le factoriel d’un nombre donné.

Solution
<!DOCTYPE html><html> ……………………………………………………………
<head><meta charset="utf-8"><title>Act7</title> ……………………………………………………………
</head> ……………………………………………………………
<body> ……………………………………………………………
<h1>Factoriel</h1> …………………………………………………………....
<label for="nbr">Nombre ..
<input type="text" id="nbr"></label> ……………………………………………………………
<input type="button" value="Vérifier" ……………………………………………………………
…………………………………………………………> ……………………………………………………………

Lycée Elmorouj1 Page 8/14


3si 1
Tp9
</body> ……………………………………………………………
</html> …………………………………………………………....
<script> ..
function fact() ……………………………………………………………
{…………………………………………………………… ……………………………………………………………
…………………………………………………………… ……………………………………………………………
…………………………………………………………… ……………………………………………………………
…………………………………………………………… …………………………………………………………....
…………………………………………………………...... ..
..................................................................................... ……………………………………………………………
..................................................................................... ……………………………………………………………
..................................................................................... ……………………………………………………………
……………………………………………………
……………………………………………………………
……………………………………………………………
……………………………………………………………
} </script>
Activité8 : Les structures itératives en JavaScript :
Créer une page web nommée jeu.html comporte une simulation un jeu avec l’ordinateur :
 L’utilisateur saisi une valeur x
 L’ordinateur entre une valeur y aléatoire entre 15 et 50
 x+y est paire alors l’utilisateur prend le point sinon il est pris par l’ordinateur
 Le jeu s’arrête quand le nombre de points de l’utilisateur ou de l’ordinateur est égal à 10
 Afficher le gagnant l’utilisateur ou l’ordinateur.
Solution
<body><input type="button" value="Vérifier" …………………………………………………………
onclick="jo uer()"> …………………………………………………………
</body></html> …………………………………………………………
<script> ……………………………………………..................
function jouer() …………………………………………………………
{ …………………………………………………………… …………………………………………………………
……………………………………………………………… …………………………………………………………
……………………………………………………………… ……………………………………………..................
…. …………………………………………………………
……………………………………………………………… …………………………………………………………
……………………………………………………………… …………………………………………………………
……………………………………………………………… ……………………………………………..................
……………………………………………......................... …………………………………………………………
} </script>

Les méthodes standards de l’objet Math :

Méthode description Exemple Résultat


abs(x) Cette méthode renvoie la valeur absolue x = Math.abs(3.26); x= 3.26
d'un nombre y = Math.abs(-15); y=15
ceil(x) Renvoie le plus petit entier supérieur x = Math.ceil(6.01); x=7
ou égal à la valeur donnée en y = Math.ceil(3.99); y=4
paramètre
floor(x) retourne le plus grand entier inférieur x = Math.floor(6.01); x=6
ou égal à la valeur donnée en y = Math.floor(3.99); y=3
paramètre.

Lycée Elmorouj1 Page 9/14


3si 1
Tp9
round(x) Arrondit à l'entier le plus proche la x = Math.round(6.01); x=6
valeur donnée en paramètre. y = Math.round(3.80); y=4
z = Math.round(7.50); z=8
pow(x,y) Retourne x puissance y (xy) x = Math.pow(2,3) x=8
random() renvoie un nombre aléatoire compris x = Math.random(); x = 0.648953493
entre [0, 1[.0 (inclus) et 1 (exclusif)
sqrt(x) Renvoie la racine carrée du nombre x = Math.sqrt(9); x=3
passé en paramètre
PI La propriété PI renvoie le rapport de X=Math.PI X=3.141592653589793
l'aire d'un cercle au carré de son rayon,
environ 3,14

Remarque :
Math.random () utilisé avec Math.floor () peut être utilisé pour renvoyer des entiers aléatoires.
Exemple :
Math.floor (Math.random () * 10) : renvoie un entier aléatoire compris entre 0 et 9
Math.floor (Math.random () * 100) : renvoie un entier aléatoire compris entre 0 et 99
Math.floor (Math.random () * 10) + 1 : renvoie un entier aléatoire compris entre 0 et 10
Math.floor (Math.random () * 100) + 1 : renvoie un entier aléatoire compris entre 0 et 100
D’une manière générale
 Pour déterminer un entier aléatoire entre min (inclus) et max (exclu), on utilise :
Math.floor (Math.random () * (max - min)) + min
 Pour déterminer un entier aléatoire entre min (inclus) et max (inclus), on utilise :
Math.floor (Math.random () * (max - min + 1)) + min
Les méthodes de l'objet String : Soit ch= "JavaScript"
Méthode Description Exemple Résultat
+ Operation de concaténation Ch="Java"+"" Ch="JavaScript"
Ch.length Retourne la longueur de la L=ch.length ; L=10
chaîne.
Ch1.indexOf(ch2, [p]) Retourne la première position X=ch.indexOf("a") ; X=1
de ch2 dans ch1, en effectuant
la recherche de gauche à
droite, à partir de la position p. X= ch.indexOf("a",2) ; X=3
Retourne (-1) si ch2 n’existe
pas dans ch1
Ch1.lastIndexOf (ch2, [p]) La méthode est similaire à X=ch.lastIndexOf("a") X=3
indexOf(), à la différence que la
recherche se fait de droite à X=ch.lastIndexOf("a",2) X=1
gauche
Ch.substring (p1, p2) La méthode retourne la sous- C=ch.substring (4,10) ; C="Script"
chaîne depuis p1 jusqu’à p2
(exclus)
Ch.toLowerCase () Convertit tous les caractères C=ch.toLowerCase() ; C= "javascript"
d'une chaîne en minuscule.
Ch.toUpperCase() Convertit tous les caractères C=ch.toUpperCase() ; C= "JAVASCRIPT"
d'une chaîne en majuscule.

Lycée Elmorouj1 Page 10/14


3si 1
Tp9
Ch.replace (ch1,ch2) Remplacer la première C=ch.replace("a", "A") C="JAvaScript"
occurrence de la chaine ch1
par la chaine ch2 dans ch

Ch.trim () supprime tous les espaces C1= " PHP HTML " C2="PHP HTML"
existant au début et à fin de la C2=C1.trim()
chaine ch

String.fromCharCode Retourne une chaine formée C= C="BAC"


(x1, x2, …xN) par la concaténation des String.fromCharCode
résultants de conversion des (66, 65,67)
codes ASCII passes en
paramètres

1. Les méthodes de l’objet Date :


Méthode Description
dt = new Date ()  d = new Date (); (Renvoie la date et l’heure système)
New Date(ch)  d = d = new Date("October 13, 2024 11:13:00");
Sun Oct 13 2024 11:13:00 GMT+0200 (heure d’été d’Europe centrale)

 d= new Date ("2024-03-25");


Fri Mar 25 2024 01:00:00 GMT+0100 (heure normale d’Europe centrale)

Retourne n objet date à partir d’une chaine de caractère ch représentant une


date

dt.getDate() Renvoie le jour du mois (de 1 à 31)


dt.getMonth() Renvoie le mois (de 0 à 11) (0 : Janvier, 1 : Février, …)

dt.getFullYear() renvoie l'année de la date spécifiée

dt.toString Retourne une chaine de caractère représentant la date dt

2. Création d’un objet tableau :


T = [element0, element1, ..., elementN]
T.length : Renvoie la longueur d'un tableau

Les opérateurs prédéfinis :


a. Opérateurs de calcul :
Soit x=11
Opérateur Nom Signification Exemple Résultat
+ Plus addition x+3 14
- moins soustraction x–3 8
* multiplié par multiplication x*2 22
/ divisé par division x /2 5.5
% modulo reste de la division entière x%5 1

Lycée Elmorouj1 Page 11/14


3si 1
Tp9
= à la valeur affectation x=5 5
b. Opérateurs de comparaison :
Soit x=11
Opérateur Nom Exemple Résultat
< Inférieur x<11 False
<= inférieur ou égal x<=11 True
> Supérieur x>11 False
>= supérieur ou égal x>=11 True
== Egal x= = "11" True
!= Différent x!="11" False
c. Opérateurs associatifs :
Soient x= 11et y =5
Opérateur Description Exemple Signification Résultat
+= plus égal x += y x=x+y x= 16
-= moins égal x -= y x=x-y x= 6
*= multiplié égal x *= y x=x*y x= 55
/= divisé égal x /= y x=x/y x= 2.2
d. Opérateurs logiques :
Soient x= 11et y =5
Opérateur Nom Exemple Résultat
&& Et ( x= =11) && (y<4) False
|| Ou ( x= =11) || ( y<4) True
! Négation !( x= =11) False

e. Opérateurs d’incrémentation :
Soit x= 3
Opérateur Description Exemple Signification Résultat
x++ incrémentation y = x++ Affectation puis incrémentation y= 3 et x= 4
(x++ est le même
++x y = ++x Incrémentation puis affectation x= 4 et y= 4
que x=x+1)
x-- décrémentation y = x-- Affectation puis décrémentation y= 3 et x= 2
--x (x-- est le même que x=x-1) y = --x Décrémentation puis affectation x= 2 et y= 2

Les structures conditionnelles :

La forme La forme La forme


La structure switch :
réduite : complète : généralisée :

if (condition ) if (condition ) if (condition 1) Switch (expression)


{Traitement} {Traitement 1} {Traitement 1} {
else else if (condition 2) Case val 1: traitement 1
{Traitement 2} {Traitement 2} Break
else if (condition 3) Case val 2: traitement 2
{Traitement 3} Break
Lycée Elmorouj1 Page 12/14
3si 1
Tp9
………………… ………………………………………
else
{Traitement n} Default: traitement n Break
}

Le mot-clé break :
Il arrive parfois que l'on veuille sortir d'une boucle alors même que la condition de la boucle est encore vraie.
Pour cela, on peut faire appel à l'instruction break.
Lorsque cette instruction est exécutée, la boucle se termine immédiatement.

Le mot-clé default :
Le default mot clé spécifie le code à exécuter s'il n'y a pas de correspondance de casse,

Les structures itératives:


La structure do…
La structure For : La structure while :
while:
for(comp=val1 ; comp <= val 2 ; pas ) do while (condition(s))
{ { {
Instructions Instructions Instructions
} } while (condition(s)) }

Application :
Afin d’aider les élèves à vérifier leurs résultats de fin d’année, on a créé la page web suivante :

1. Lancer l’éditeur de création des pages web disponible et créer la page précédente,
2. Ajouter les scripts CSS nécessaires pour appliquer la mise en forme comme l’indique la page,
3. Ajouter un Script permettant d’afficher une boite de saisie qui demande à l’utilisateur de saisir son
nom,
4. Ajouter les instructions nécessaires pour afficher le nom après le mot « bienvenue : »
5. Ajouter les instructions nécessaires pour afficher l’année scolaire « 2021_2022 » après la phrase «
Année scolaire : »
6. Le clic sur le bouton « Moyenne Générale » fait appel à une fonction une fonction JavaScript
nommée « calcul ()» qui permet de :

Lycée Elmorouj1 Page 13/14


3si 1
Tp9
 Vérifier la saisie de la moyenne semestre 1 et la moyenne semestre 2 qui doivent être non
vides et comprises entre 0 et 20
 Calculer la moyenne générale Moyenne générale = (moyenne semestre 1+ moyenne semestre 2
* 2) / 3.
 Mettre la valeur le plus proche du résultat calculé dans le champ résultat (Moyenne Générale)
 Ajouter le mot « Admis » si la moyenne générale >=10 sinon ajouter le mot « redouble après le
mot « résultat : »
 Modifier le style de couleur : Rouge pour « Redouble » et vert pour « Admis ».

Lycée Elmorouj1 Page 14/14


3si 1

Vous aimerez peut-être aussi