Cours Javascript-1

Le Langage JAVASCRIPT 3eme SI (STI)
Le Langage JavaScript
Introduction:
Avec HTML seul, il n’est pas possible d’utiliser des variables ni des
structures de contrôles (conditionnelles et itératives).
Toutes ces anomalies et autres peuvent être remédiées en incorporant d’autres
fonctionnalités aux balises HTML: les scripts qui sont fournies avec le langage
de script JavaScript
I.Formalisme de base :
Activité1:
Créer un fichier HTML et l’enregistrer sous le nom activité1.html comportant un script
permettant d’afficher une fenêtre message "Bienvenue".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
alert("Bienvenue");
/*alert permet d’afficher une fenêtre message.*/
</script>
</body>
</html>
Ou
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
document.write('Bienvenue');
</script>
</body>
</html>
 Les différents emplacements d’un script :

Activité2 :
1. Créer un fichier activité2.html qui permet d’obtenir la page suivante :
Page 1 sur 25
Avec : Le clic sur le lien ici ou le passage de la souris sur le lien cela permettent de fermer
la fenêtre
2. Créer avec l’éditeur disponible un fichier nommé lib.js.
3. Enlevez les deux fonctions fermer() et msg() du fichier activité2.html, pour les mettre
dans le fichier lib.js.
4. Dans le fichier activité2.html, faites le lien entre les deux fichiers.
<!DOCTYPE html>
<html>
<head>
<script>
function fermer()
{
window.close();
}
</script>
</head>
<body>
<p>vous pouvez fermer cette fenêtre en cliquant

<a href="" onclick="fermer()"> ici</a>
</p>
<p>ou en passant la souris au-dessus de
<a href="" onmouseover="fermer()">cela</a>
</p>
</body>
</html>
<!DOCTYPE html>
<html> Lib.js
<head> function fermer()
{
window.close();
<script src='lib.js'> }
</script>
</head>
<body>
<p>vous pouvez fermer cette fenêtre en cliquant
<a href="" onclick="fermer()"> ici</a>
</p>
<p>ou en passant la souris au-dessus de
<a href="" onmouseover="fermer()">cela</a>
</p>
</body>
</html>
Page 2 sur 25
II.Les entrées sorties JavaScript :

1. L’entrée :
L’entrée se fait soit :
 A l’aide de la méthode prompt de l’objet window
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")) ;
 A l’aide des objets graphiques du formulaire.

Remarque :
La méthode getElementById() permet de récupérer les informations d'une balise
identifiée par son id.
Exemple :
 Modifier la contenu d’une zone de texte :
 document.getElementById("age").value = 25;
 Modifier la couleur du texte :
 document.getElementById("paragraphe").style.color = ‘blue’;
 Modifier le fond du titre du texte :
 document.getElementById("titre").style.backgroundColor = "#FF0000";
 Modifier la source d'une image :
 document.getElementById('idImage').src='images/photo2.jpg';
2. La sortie :
Syntaxe :
Document.write("message" + nom_variable) ;
Alert("message" + nom_variable) ;
Element.innerHtml
La propriété innerHTML permet d’accéder au contenu d’une balise identifiée par son
attribut « id ».
Syntaxe :document.getElementById('idelement').innerHTML = "contenu";
Exemple :
document.getElementById("paragraphe").innerHTML ="Texte changé !";
console.log() : Permet d'afficher des messages dans la console

Activité3 :
Créer un fichier Activité3.html permettant d’échanger deux entiers donnés a et b.
 L’affichage est effectué soit par alert, document.write ou console.log
Page 3 sur 25
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
a=Number(prompt("saisir la 1ére valeur de a=",""));
b=Number(prompt("saisir la deuxième valeur de b=",""));
a=a+b;
b=a-b;
a=a-b;
alert("la valeur de a est devenue "+a+" la valeur de b est devenue "+b);
//document.write("la valeur de a est devenue "+a+" la valeur de b est devenue
"+b);
</script>
</body>
</html>
Activité4 :
Créer un fichier Activité4.html qui contient deux boutons et le paragraphe de (lorem50)
Le 1er bouton permet de changer la couleur du paragraphe.
Le 2éme bouton permet de changer le contenu du paragraphe en merci et le mettre au centre.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function Msg1()
{
document.getElementById('para').style.color='red';
}
function Msg2()
{
document.getElementById('para').innerHTML='<center>Merci</center> ';
}
</script>
<input type="button" onclick="Msg1()" value="couleur">
<input type="button" onclick="Msg2()" value="style">
<p id='para'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, sed
fuga! Eos similique voluptatum nostrum doloribus quia, nulla, quas atque deser
unt totam veritatis ab nemo debitis natus labore. Dolorem, quia!
</p>
</body>
</html>
III. Les variables :

Page 4 sur 25
Activité5 :
1. Créer un fichier Activité5.html et y taper le code ci-dessous.
<!DOCTYPE html>
<html>
<head>
<title>les variables en javascript</title>
<script>
var x=2;
y=3;
function test()
{ x=22;
var y=23;
}
</script>
</head>
<body>
<script>
document.write("la valeur de x est: "+x+" alors que la valeur de y est: "+y)
;
test();
document.write("<br>la valeur de x est: "+x+" alors que la valeur de y est:
"+y);
</script>
</body>
</html>
2. Expliquer le résultat obtenu.

1. La déclaration des 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" ;
 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
IV. Les opérateurs :

Activité6 :
Page 5 sur 25
1. Remplir les différents tableaux des différents types d’opérateurs X=11 et Y=5
1. Les opérateurs de calcul
Signe Nom Signification Exemple Résultat
+ Plus Addition X+3
- Moins Soustraction X-3
* Multiplié par Multiplication X*3
/ Divisé Par division X/2
% Modulo Reste par la division de X%5
= A la valeur Affectation X=5
V.
2. Les opérateurs de comparaison

Signe Nom Exemple Résultat
== Egal X==11
< Inférieur X<3
<= InférieurouEgal X<=11
> Supérieur X>11
>= SupérieurouEgal X>=11
!= Différent X !=11
3. Les opérateurs associatifs
Signe Nom Signification Exemple Résultat
+= Plus égal X = X +Y X +=Y
-= Moinségal X=X–Y X -=Y
* Multipliéégal X=X*Y X *=Y
/ Diviséégal X=X/Y X /=Y
4. Les opérateurs logiques
Signe Nom Exemple Résultat
&& ET (X>3) && (Y<3)
|| OU (X>3) || (Y<3)
! NON !((X>3))
5. Les opérateurs d’incrémentation
Signe Signification Exemple Résultat
X++, ++X Incémentation (X++ est le Y=X++ ;
même que X=X+1) Z=++X ;
X--, --X Décrémentation (X—est Y=X-- ;
le même que X=X-1) Z=--X ;
Activité7 :
Ecrire un script qui permet de lire deux nombres a et b puis calcule et affiche leur
somme et leur produit
VI. Les Types de variables :

1. Le type Chaine:
Une chaîne est une suite de caractères écrite entre guillemets ou apostrophes.
a. Déclaration d’une chaîne
Exemple : var chaine1="Bonjour";
var chaine2='Bonjour';
b. Les propriétés et les méthodes de l’objet String :

Méthode Description Exemple
x=variable.length; Donne la longueur d’une a=' informatique' ;
chaine x=a.length ;
Page 6 sur 25
x =…….
Chaine.charAt(position) Retourne le caractère situé à a=' informatique' ;
la position donnée en a. charAt(3) donne……..
paramètre
Chaine.charCodeAt(positi Renvoie le code Unicode du x= ‘chaine’.charCodeAt(1) ;
on) caractère situé à la position x = 65
donnée en paramètre
chaîne1.concat(chaîne2) Permet de concaténer les Ch1="java"
chaînes passées en Ch2="script"
paramètre, c'est-à-dire de les Ch=Ch1.concat(Ch2);
joindre bout à bout. Ch=…………………….
Chaine.indexOf(sous- Retourne la position d'une
chaîne, position) sous-chaîne (lettre ou groupe
ou de lettres) dans une chaîne de
P=Ch.indexOf(Sch); caractère, en effectuant la Ch="Javascript";
recherche de gauche à droite, Sch="script"; P=Ch.indexOf(Sch,0);
à partir de la position P=………………..
spécifiée en paramètre.
Retourne (-1) si la chaine
spécifie n'est pas présente.
Chaine.lastIndexOf(sous- La méthode est similaire
chaîne, position) à indexOf(), à la différence
que la recherche se fait de
P=Ch.lastIndexOf(Sch); droite à gauche :Retourne la
position d'une sous-chaîne Ch="Javascript";
(lettre ou groupe de lettres) P=Ch.LastIndexOf("a");
dans une chaîne de caractère, P=……………………
en effectuant la recherche
de droite à gauche, à partir de
la position spécifiée en
paramètre.
Chaine.substr(position1, La méthode retourne une Ch="Javascript";
longueur) sous-chaîne commençant à Sch1=Ch.substr(3,3);
l'index dont la position est Sch2=Ch.substr(1);
donnée en argument et de la
longueur donnée en Sch1=…………………….
paramètre. Sch2=…………………….
Chaine.substring(position1 La méthode retourne la sous- var chaine = "Bonjour le monde!";
, position2) chaîne (lettre ou groupe de var resultat = chaine.substring(1,5);
lettres) comprise entre les resultat=…………………..
positions 1 et 2 données en
paramètre.
Chaine.includes(chaine) La méthode détermine si la const str = "Être ou ne pas être, telle est
sous-chaîne mis en paramètre la question.";
est présente dans la chaîne de
caractère. Retourne true ou console.log(str.includes("Être"));
Page 7 sur 25
false. ………………………….
console.log(str.includes("question"));
………………………………….
console.log(str.includes("pléonasme"))
; ………………………………….
console.log(str.includes("Être", 1));
………………………………………..
console.log(str.includes("ÊTRE"));
………………………………………
console.log(str.includes("")); ……….
Chaine.split(caractère) La méthode découpe la

chaine en fonction du
caractère choisi et met le tout
dans un tableau. (array)
Chaque mots dans une phrase
comporte un espace si on
choisi comme caractère
l'espace chaque index du
tableau comportera un mots
de la phrase.Un deuxième
paramètre numérique
optionnel permet de définir le
nombres de sous-chaînes à
retourner.
Chaine.trim() supprime les blanc en début
et fin de chaine.
Chaine.toLowerCase() Convertit tous les caractères
d'une chaîne en minuscule.
Chaine.toUpperCase() Convertit tous les caractères
d'une chaîne en majuscule.
Activité8 :
Remplir le tableau suivant :
script rôle
<!DOCTYPE html>
Page 8 sur 25
<html>
<head>
<script>
window.onload=function()
{
var str = 'abc';
alert(‘la longueur de la chaine = ‘+str.length);
} </script>
</head>
</html>
<html>
<head>
<script>
{
var ch="JavaScript est facile";
var n=ch.search("est");
console.log(n);
}
</script>
</head>
<html>
<head>
<script>
{
var ch2=ch.replace("facile","difficile");
console.log(ch2);
console.log(ch);
}
</script>
</head>
<html>
<head>
<script>
{
for(var x=0;x<ch.length;x++)
console.log(ch.charAt(x));
}
</script>
</head>
<html>
<head>
<script>
Page 9 sur 25
{
var n=ch.includes("Java");
console.log(n);
}
</script>
</head>
<html>
<head>
<script>
{
console.log("The space is at index:"+ch.indexOf(' '));
}
</script>
</head>
<!DOCTYPE html>
<html>
<head>
<script>
{
var newch=ch.slice(0,10);
console.log(newch);
}
</script>
</head>
<html>
<head>
<script>
{
var noms="Badr,Anis,Rami,Ramla,Anissa";
var tab=noms.split(",");
console.log(tab);
for(var i=0;i<tab.length;i++)
{
document.getElementById('result').innerHTML+=tab[i]+"<br>";
}
}
</script>
</head>
<body> <div id="result"></div> </body>
</html>
Page 10 sur 25
<html>
<head>
<script>
{
var ch3="Cette formation est bénéfique";
console.log(ch3.substr(6,9));
console.log(ch3.substr(20));
}
</script>
</head>
2. Le type Tableau (Array):

a. Declaration
Schéma Syntaxe Exe
mpl
1 NomObjet=new Array(); T=new Array();
2 NomObjet=new Array(nombre); T=new Array(10);
3 NomObjet=new Array(val1,val2); T=new Array(“A”,”B”,”C”);
4 NomObjet = [element0, element1, ..., T=[“A”,”B”,”C”];
elementN] ;
5 tab=[] ;
Taille=Nomtableau.length; permet de calculer le nombre d'éléments dans un tableau.

Le remplissage se fait avec nomtableau[position]=valeur ;
Activité 9 :
Ecrire un script qui permet de remplir un tableau par les jours de la semaine de l’afficher
dans la console
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
t=['Lundi','Mardi','Mercredi','Jeudi','Vendredi','Same
di','Dimanche']
console.table(t)
</script>
</body>
</html>
Page 11 sur 25
b. Les méthodes de l'objet Array :

Méthode Description
t.length Renvoie la longueur d'un tableau
t.concat(t1, t2, t3…) Fusionne plusieurs tableaux
t.push(element1,element2, …) Ajoute un ou plusieurs éléments à la fin d'un tableau
t.pop() Retire le dernier élément d'un tableau
t.shift()
Retire le premier élément du tableau
t.unshift(element1,element2,…)
Ajoute un ou plusieurs éléments en premier(s) élément(s)
dans un tableau
t.slice(indice_debut, jusqu_indice) La méthode découpe un morceau d'un tableau dans un

nouveau tableau
t.reverse() Transpose les éléments d'un tableau : le premier élément
du tableau et le dernier devient le premier
t.sort() Trie les éléments d'un tableau
t.indexOf(élémentCherché[, Permet de chercher dans le tableau l'élément
indiceDebut]) élémentCherché et renvoie le premier indice où l'élément
est trouvé
t.lastIndexOf(élémentCherché[, Fonctionne comme indexOf, mais cherche à partir de la
indiceDebut]) fin du tableau
t.toString() Convertit automatiquement un tableau en une chaîne
séparée par des virgules
Activité 10 :
Reprendre l’activité8 et ajouter un script qui permet de :
1. Afficher le tableau ainsi que son nombre d’éléments.
2. Supprimer le dernier élément et réafficher le tableau.
3. Ré ajouter l’élément supprimé et réafficher le tableau.
4. Refaire la même chose avec le premier élément.
5. Convertir le tableau en chaine et afficher cette dernière.
6. Utiliser une deuxième méthode pour la conversion.
7. Trier le tableau et l’afficher sous forme de chaine.
8. Inverser le tableau et l’afficher.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Page 12 sur 25
<script>
t=['Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi','
Dimanche']
for(i=0;i<t.length;i++)
{
document.write(i+':'+t[i]+'<br>')
}
document.write('Le tableau contient '+t.length+'<br>')
t.pop();
{
}
document.write('************************Ajout**************
************<br>')
t.push('Dimanche')
{
}
document.write('************************Suppression 1er ele
ment**************************<br>')
t.shift();
{
}
document.write('************************Ajout 1er element**
************************<br>')
t.unshift('Lundi');
{
}
ch=t.join(',')
document.write('ch='+ch+'<br>')
ch=t.toString()
document.write('ch='+ch+'<br>')
document.write('************************Tri du tableau*****
*********************<br>')
t.sort()
Page 13 sur 25
document.write(t.toString())
document.write('<br>************************Inverser le tab
leau**************************<br>')
t.reverse()
document.write(t.toString())
</script>
</body>
</html>
3. Le type Math :
a. Les méthodes de l'objet Math :
Méthode Description Exemple
abs() Cette méthode renvoie la valeur x = Math.abs(3.26);
absolue d'un nombre, il renvoie donc //donne x = 3.26
le nombre s'il est positif, son opposé
x = Math.abs(-3.26);
(positif) s'il est négatif
//donne x = 3.26
ceil() Renvoie le plus petit entier supérieur x = Math.ceil(6.01);
ou égal à la valeur donnée en //donne x = 7
paramètre
x = Math.ceil(3.99);
//donne x = 4
floor() La méthode floor() retourne le plus x = Math.floor(6.01);
grand entier inférieur ou égal à la //donne x = 6
valeur donnée en paramètre.
x = Math.floor(3.99);
//donne x = 3
round() Arrondit à l'entier le plus proche la x = Math.round(6.01);
valeur donnée en paramètre. Si la //donne x = 6
partie décimale de la valeur entrée en
x = Math.round(3.80);
paramètre vaut 0.5, la
//donne x = 4
méthode Math() arrondi à l'entier
supérieur. x = Math.round(3.50);
//donne x = 4
trunc(Nombre) renvoie la partie entière d'un nombre. var x = Math.trunc(6.25);
//donne x = 6
var x = Math.trunc(-3.65);
//donne x = -3
var x = Math.trunc(0,2015);
//donne x = 0
max(Nombre1, max() renvoie le plus grand des deux var x = Math.max(6,7.25);
Nombre2) nombres donnés en paramètre //donne x = 7.25
var x = Math.max(-8.21,-
3.65);
//donne x = -3.65
Page 14 sur 25
var x = Math.max(5,5);
//donne x = 5
min(Nombre1, Retourne le plus petit des deux x = Math.min(6,7.25);
Nombre2) nombres donnés en paramètre //donne x = 6
x = Math.min(-8.21,-3.65);
//donne x = -8.21
x = Math.min(5,5);
//donne x = 5
pow(Valeur1, Retourne le nombre Valeur1 à la x = Math.pow(3,3);
Valeur2) puissance Valeur2 //donne x = 27
x = Math.pow(9,0.5);
//(racine carrée)
//donne x = 3
random() La méthode random() renvoie un x = Math.random();
nombre pseudo-aléatoire compris //donne x =
entre 0 et 1. La valeur est générée à 0.6489534931546957
partir des données de l'horloge de
l'ordinateur.
sqrt(Valeur) Renvoie la racine carrée du nombre x = Math.sqrt(9);
passé en paramètre //donne x = 3
Activité 11 :
Soit le formulaire suivant :
Ecrire un script qui permet de saisir réel puis affiche le résultat du calcul selon le
choix de l’utilisateur (valeur absolue, arrondie, racine carré ou aucun choix).
<!DOCTYPE html>
<html>
<head>
<script>
function calculer()
{
v=Number(document.getElementById('v1').value)
p=document.getElementById('D1').options.selectedIndex
Page 15 sur 25
switch(p)
{
case 0:y=Math.abs(v);break;
case 1:y=Math.round(v);break;
case 2:y=Math.sqrt(v);break;
default:y=0;
}
alert(y);
}
</script>
</head>
<body>
<form action="">
<fieldset><legend><h2>Calcul</h2></legend>
<p><label for="Valeur">Donner un réel</label><input typ
e="text" id="v1"></p>
<p><label for="Opération">Veuillez choisir une opération</
label>
<select id="D1">
<option value="valeur absolue">Valeur Absolue</option>
<option value="arrondie">arrondie</option>
<option value="racine carré">Racine Carré</option>
</select></p>
<center><button value="Calculer" onclick='calculer()'>Calculer
</button></center>
</fieldset>
</form>
</body>
</html>
4. Le Type Date :
5. Déclaration
Var d=new Date() ; //crée un objet contenant la date du jour
Var d=new Date.now() ; //crée un objet contenant le timestamp du jour
Var d=new Date(timestamp) ; exemple : var d =Date(1553466000000) ;
Var d=new Date(chaine) ; exemple : var d=Date('March 23, 2019 20 :00 :00') ;
Var d=new Date(année,mois,jour,[heures, minutes, secondes,millisecondes]) ;
exemple : var d= new Date(2022,1,27) ;
Le timestamp correspond au nombre de millisecondes écoulées depuis le 1 er janvier 1970 à
minuit GMT
Activité 12 :
Page 16 sur 25
: Ecrire un script qui permet d’afficher la date et l’heure système dans une zone de texte
<!DOCTYPE html>
<HTML><HEAD>
<SCRIPT>
function Horloge()
{
dt=new Date();
hrs=dt.getHours();
min=dt.getMinutes();
sec=dt.getSeconds();
a=dt.getFullYear();
m=dt.getMonth()+1;
j=dt.getDate();
d=j+"/"+m+"/"+a+" "+hrs+":"+min+":"+sec;
document.getElementById("t1").value=d;
setTimeout("Horloge()",1000);
}
</SCRIPT>
</HEAD>
<BODY onload='Horloge()'>
<FORM name="f1">
<INPUT TYPE="text" NAME="T1" SIZE=20 VALUE ="" id='t1'
>
</FORM>
</BODY>
</html>
6. Les objets (Enregistrements) :
Activité13:
Ecrire un script qui permet de déclarer un objet nommé voiture dont les propriétés sont :
couleur rouge, marque clio nombre de places est 5 et afficher sa couleur et sa marque.
 Modifier la couleur de l’objet en noir et l’afficher.
 Vérifier si une voiture est spacieuse (Sachant qu’une voiture est dite spacieuse si
le nombre de places est supérieur à 7)
 Afficher toutes les propriétés de l’objet
 Ajouter la propriété numéro de série =140
 Supprimer l’objet couleur
Page 17 sur 25
<!DOCTYPE html>
<html>
<head>
<title>les objets</title>
</head>
<body>
<script>
//déclaration
var voiture = {
couleur : "rouge",
marque : "clio",
nb_places : 5
};
//affichage
document.write("<br>La couleur de la voiture est "+
voiture.couleur);
voiture.couleur='noir';
document.write("<br>La couleur de la voiture est "+
voiture.couleur);
if(voiture.nb_places>7)
document.write("<br>La voiture est spacieuse");
else
document.write("<br>La voiture n`est pas spacieuse");
for(i in voiture)
document.write('<br>'+i);
voiture.numSerie = 140;
for(i in voiture)
document.write('<br>'+i);
/*delete voiture.couleur;*/
</script>
</body>
</html>
VII.Les structures de contrôle :

1. Les structures conditionnelles :
Page 18 sur 25
Activité 14:
Ecrire un script qui permet de saisir deux entiers a et b et de déterminer et d’afficher la
plus grande valeur.
<!DOCTYPE html>
<HTML><HEAD>
</HEAD>
<body>
<script>
a=Number(prompt('a='))
b=Number(prompt('b='))
max=a
if(b>max)
max=b
document.write('la plus grande valeur est '+max)
</script>
</body>
</HTML>
2. Les structures itératives :
Page 19 sur 25
Activité 15:
Soit le tableau suivant tab = ["info", "la", "10", "20", "test", "s", "30"];
Ecrire un script permettant d’afficher la somme des valeurs des chaines composées
uniquement de chiffres.
10 + 20 + 30 = 60
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
t=["info", "la", "10", "20", "test", "s", "30"]
s=0;
if(isNaN(t[i])==false) /*!isNaN(t[i]*/
s+=Number(t[i])
document.write('la somme des chiffres est='+s)
</script>
</body>
</html>
Activité 16:
I. Ecrire un script permettant d’afficher tous les nombres premiers compris entre deux entiers a
et b (a>1 et a<b et b <1001). Sachant qu’un nombre N est dit premier, s’il n’est divisible que
par 1 et par lui-même.
<!DOCTYPE html>
Page 20 sur 25
<html>
<head>
<script>
{
msg=''
do{
a=Number(prompt("a="))
b=Number(prompt("b="))
}while(a<2 || a>=b || b>=1000)
for(i=a;i<=b;i++)
{
j=1
do{
j++
}while(i%j!=0 && j<=i/2)
if(j>i/2)
msg+=i+'<br>'
}
document.getElementById('result').innerHTML+=msg
}
</script>
</head>
<body>
<div id='result'>
</div>
</body>
</html>
II. Ecrire un script permettant de calculer le PGCD de deux entiers a et b, tels que (a>1 et b>1)
en utilisant la méthode des différences.
<!DOCTYPE html>
<html>
<head>
<script>
function pgcd(a,b)
{
while(a!=b)
{
if(a>b)
Page 21 sur 25
a=a-b
else
b=b-a
}
return a
}
{
do{
a=Number(prompt("a="))
b=Number(prompt("b="))
}while(a<1 || b<1)
p=pgcd(a,b)
document.getElementById('result').innerHTML=p
}
</script>
</head>
<body>
<div id='result'>
</div>
</body>
</html>
VIII. Les événements :

OnEvenement="Action_Javascript_ou_Fonction();"
1. Liste des événements :
Evénement Description
OnClick Se produit lorsque l'utilisateur clique sur l'élément associé à l'événement.
OnLoad Se produit lorsque le navigateur charge la page en cours.
Se produit lorsque l'utilisateur positionne le curseur de la souris au-dessus
OnMouseOver
d'un élément.
OnMouseOut Se produit lorsque le curseur de la souris quitte un élément.
Se produit lorsque l'utilisateur donne le focus à un élément, c'est-à-dire que
OnFocus
cet élément est sélectionné comme étant l'élément actif.
Se produit lorsque l'élément perd le focus, c'est-à-dire que l'utilisateur
OnBlur clique hors de cet élément, celui-ci n'est alors plus sélectionné comme étant
l'élément actif.
OnChange Se produit lorsque l'utilisateur modifie le contenu d'un champ de données.
Se produit lors de la saisie d’une zone de texte lorsque l’utilisateur relâche
OnKeyUp
une touche.
Onkeypress Se déclenche lorsqu'une touche du clavier est pressée
Se produit lorsqu'un élément reçoit une entrée d'utilisateur. (similaire
Oninput
OnChange)
2. Objets auxquels on peut associer des événements :
Page 22 sur 25
Chaque événement ne peut pas être associé à n'importe quel objet.
Objet Evénements associables
Lien hypertexte Onclick, Onmouseover, Onmouseout
Page du navigateur Onload, Onunload
Bouton, Case à cocher, Bouton radio, Bouton Reset Onclick
Liste de sélection d'un formulaire Onblur, Onchange, Onfocus
Bouton Submit Onsubmit
Champ de texte et zone de texte Onblur, Onchange, Onfocus, Onselect
3. Applications :
a. Application1 :
Créer un fichier Application1.html composé d’une image image1.gif (largeur=300
hauteur=200) avec les fonctionnalités suivantes :
 Au chargement de la page un message "Bienvenue à cette page web"
 Lorsque l’image image1.gif est survolée, elle est remplacée par une autre image image2.gif.
<!DOCTYPE html>
<html>
<head>
<script>
{
alert('bonjour')
}
function f1()
{
document.getElementById('i1').src='image2.gif'
}
function f2()
{
document.getElementById('i1').src='image1.gif'
}
</script>
</head>
<body>
<img src="image1.gif" alt="" id="i1" onmouseover='f1()'
onmouseout='f2()'>
</body>
</html>
b. Application2 :
Soit à créer un formulaire composé de deux zones de saisie et d’un lien comme le montre la
figure ci-dessous :
Enregistrer votre fichier sous le nom Application2.html dans votre dossier de travail.
Page 23 sur 25
Avec:
 La zone de texte Nom et Prénom se colorie en bleu lorsqu’on positionne le curseur.
 Lors de la saisie du nom et du prénom, le nombre de caractères est calculé en même
temps
 Après avoir terminé la saisie le champ nom prénom est convertit en majuscule
 La zone de texte Nom et Prénom se colorie en jaune lorsqu’on sort le curseur de la
zone.
 Le clic sur le lien merci pour votre visite permet de fermer la fenêtre.
<!DOCTYPE html>
<html>
<head>
<script>
function couleur(){
document.getElementById('t1').style.backgroundColor=
'blue'
}
function couleur2(){
document.getElementById('t1').style.backgroundColor=
'yellow'
}
function longueur()
{
x=document.getElementById('t1').value.length
document.getElementById('t2').value=x
}
function maj()
{
np=document.getElementById('t1').value
document.getElementById('t1').value=np.toUpperCase()
}
function fermer()
{
window.close();
}
</script>
</head>
<body>
<form action="">
<label for="">Nom Prénom</label>
<input type="text" size=25 id='t1'onfocus='couleur()'o
nkeyup='longueur()'onchange='maj()' onblur='couleur2()'> <br><
br><br>
Page 24 sur 25
<label for="">Nombre de caractères</label> <input typ
e="text" size=25 id='t2' value=0><br><br><br>
<a href="" onclick="fermer()">Merci pour votre visite<
/a>
</form>
</body>
</html>
Page 25 sur 25

Cours Javascript-1

Transféré par

Informations du document

Titre original

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

Cours Javascript-1

Transféré par

Droits d'auteur :

Formats disponibles

Le Langage JAVASCRIPT 3eme SI (STI)

 Les différents emplacements d’un script :

<p>vous pouvez fermer cette fenêtre en cliquant

II.Les entrées sorties JavaScript :

 A l’aide des objets graphiques du formulaire.

console.log() : Permet d'afficher des messages dans la console

III. Les variables :

2. Expliquer le résultat obtenu.

IV. Les opérateurs :

2. Les opérateurs de comparaison

VI. Les Types de variables :

b. Les propriétés et les méthodes de l’objet String :

Chaine.split(caractère) La méthode découpe la

2. Le type Tableau (Array):

Taille=Nomtableau.length; permet de calculer le nombre d'éléments dans un tableau.

b. Les méthodes de l'objet Array :

t.slice(indice_debut, jusqu_indice) La méthode découpe un morceau d'un tableau dans un

VII.Les structures de contrôle :

2. Les structures itératives :

VIII. Les événements :

Vous aimerez peut-être aussi