Scribd
Importer
22 vues26 pages

Cours JS

JavaScript est un langage de programmation dynamique utilisé pour créer des interactions sur les sites Web. Il permet de manipuler le contenu HTML et d'interagir avec l'utilisateur via des méthodes comme alert(), prompt() et document.write(). Le document couvre également les variables, les types de données, les opérateurs et les méthodes prédéfinies associées à JavaScript.

Transféré par

malakchebbi777
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 PDF, TXT ou lisez en ligne sur Scribd
22 vues26 pages

Cours JS

JavaScript est un langage de programmation dynamique utilisé pour créer des interactions sur les sites Web. Il permet de manipuler le contenu HTML et d'interagir avec l'utilisateur via des méthodes comme alert(), prompt() et document.write(). Le document couvre également les variables, les types de données, les opérateurs et les méthodes prédéfinies associées à JavaScript.

Transféré par

malakchebbi777
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 PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 26

STI

Bac Sciences de l’informatique

Résumé : Cours Le langage JavaScript

TakiAcademy
I. Introduction
JavaScript (« JS » en abrégé) est un langage de programmation dynamique complet
qui, appliqué à un document HTML, peut fournir une interactivité dynamique sur
les sites Web.
C’est un langage de script web côté client qui est adopté universellement par
chaque navigateur Web pour son support.
C'est le navigateur qui interprète les codes HTML, CSS et JavaScript. L'interprétation
dépend naturellement du type de navigateur utilisé et de sa version.
JavaScript est un langage orienté objet et événementiel. Le développeur peut créer
des objets sur la page, avec des propriétés et des méthodes et leur associer des
actions en fonction d'événements déclenchés par le visiteur (passage de souris, clic,
saisie clavier, etc.)

II. Le formalisme de base de JavaScript


<!DOCTYPE HTML>
<html> <head> Balises HTML
<meta charset ="utf-8" />
<title>Premier code en javascript</title>
<script>
window.alert("Bienvenue à mon site web"); Script en JavaScript
</script>
</head>
<body>
<h1><center>Coder en JavaScript</center></h1> Balises HTML
</body></html>

// Commentaire sur une ligne


/*Commentaire sur plusieurs lignes*/

III. Les différents emplacements d’un code JavaScript


➢ En entête de page <head> … </head>
➢ Dans le corps de la page <body> … </body>
➢ Dans un événement d'un objet de la page
➢ Dans un fichier séparé qui a souvent l'extension « .js »

<!DOCTYPE HTML>
<html>
<head>
<meta charset ="utf-8" />
<title>emplacements code JavaScript</title>
<script>
function fermer()
{
close();
}
</script>
</head>
<body>
<script>
document.write("Pour fermer cette fenêtre vous pouvez cliquer : ");
</script>
<a href ="" onclick="fermer()">ici</a>
</body>
</html>

❖ Fichier code.js
function fermer()
{
close();
}

❖ Fichier page.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset ="utf-8" />
<title>emplacements code JavaScript</title>
<script src="code.js"></script>
</head>
<body>
<script>
document.write("Pour fermer cette fenêtre vous pouvez cliquer : ");
</script>
<a href ="" onclick="fermer()">ici</a>
</body>
</html>
IV. Les actions élémentaires simples
1) Les instructions d’affichage
a) La méthode : document.write
La méthode write() de l’objet document permet d’écrire des expressions HTML ou du
code JavaScript dans un document. Elle est principalement utilisée pour les tests : si
elle est utilisée après le chargement complet d'un document HTML, elle supprimera
tout le HTML existant.
Exemple :
<script>
let d=new Date() ;
document.write("Nous somme le : "+d);
</script>

b) La méthode : alert()
La méthode alert () affiche une boîte d'alerte avec un message spécifié et un bouton
« OK ». Une boîte d'alerte est souvent utilisée si vous souhaitez vous assurer que les
informations parviennent à l'utilisateur.
Exemple :
<script>
let a=5 ;
alert("La valeur de a est : "+a);
</script>

c) La propriété « innerHTML »
innerHTML, est une propriété de tout élément HTML qui désigne le contenu qui se
trouve entre la balise ouvrante et la balise fermante. On l'utilise pour lire et/ou insérer
dynamiquement un contenu dans une page.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>exemple</title>
<script>
function modifier()
{
a=document.getElementById("p1").innerHTML="Texte modifié";
}
</script>
</head>
<body>
<p id="p1">Texte du paragraphe avant modification</p>
<button type="button" onclick="modifier()">Modifier le texte</button>
</body>
</html>

2) Les instructions d’entrée


a) La méthode : prompt()
La méthode prompt() de l’objet window affiche une boîte de dialogue, éventuellement
avec un message, qui invite l'utilisateur à saisir un texte.
Syntaxe : objet = window.prompt("message", "défaut");

Exemple :
<script>
let a=prompt("Donner votre nom : ","") ;
let b= prompt("Donner votre prénom : ","") ;
alert(" Bonjour : "+b+" "+a) ;
</script>

b) Les champs du formulaire


Les entrées/sorties sont possibles à l’aides des objets graphiques du formulaire.

Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>exemple</title>
<script>
function somme()
{

a=Number(document.getElementById("n1").value);
b=Number(document.getElementById("n2").value);
s=a+b;
document.getElementById("res").value=s ;
}
</script>
</head>
<body>
<form>
<p><label for="n1">Nombre 1 : </label><input type="text" id="n1" /></p>
<p><label for="n2">Nombre 2 : </label><input type="text" id="n2" />< /p>
<p><label for="res">Résultat : </label><input type="text" id="res" readonly /></p>
<button type="button" onclick="somme()">Somme</button>
</form>
</body></html>

 Remarque :
La méthode « getElementById » de l’objet « document » renvoie l'élément qui a
l'attribut ID avec la valeur spécifiée. Cette méthode est l'une des méthodes les plus
courantes du DOM HTML (Document Object Model) et elle est utilisée presque chaque
fois que vous souhaitez manipuler ou obtenir des informations sur un élément de votre
document. Syntaxe : document.getElementById(elementID)

c) L’affectation
L'opération d’affectation consiste à attribuer une valeur à une variable. Elle est
représentée par le symbole « = » en Javascript.

V. Les constantes et les variables


1) Les variables
a) De façon implicite
Décrire directement le nom de la variable suivi de la valeur attribuée.
Exemple :
<script>
age = prompt ("Donnez votre âge : ","");
moy = 15.85 ;
</script>

b) De façon explicite
Le mot-clé « let » permet de définir une variable locale. Ces variables ont une portée
de bloc, c’est-à-dire qu’elles ne sont accessibles qu’au sein du bloc de code dans lequel
elles sont définies. Un bloc est délimité par des accolades {} (if, for, while, function, …).
Exemple :
<script>
let age = prompt ("Donnez votre âge : ","");
let moy = 15.85 ;
</script>

 Remarque : une variable déclarée sans valeur aura la valeur undefined.


2) Les constantes
Il est possible de créer des constantes en lecture seule en utilisant le mot-clé « const ».
Les constantes ont une portée de bloc.

Exemple :
<script>
const pi=3.14;
const h=24;
</script>

3) Les types de données en JavaScript


En JavaScript, il existe 8 types de données :
• Le type « String » : chaîne de caractères
• Le type « Number » : les nombres entiers et les nombres à virgule flottante.
• Le type « BigInt » : pour stocker des très grandes valeurs
• Le type « boolean » : booléen
• Le type « Null » : Nul / Vide
• Le type « Undefined » : indéfini
• Le type « Symbol » : symbole
• Le type « Object » : objet (Date, Array, …)

 Remarque :
• Il ne faut pas déclarer le type de données d’une variable.
• La fonction « typeof nom_variable » permet de connaître le type de donnée
d’une variable.

4) La portée des variables en JavaScript


Exemple1 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>portée des variables </title>
</head>
<body>
<p>Votre âge est : <span id="p1"></span></p>
<p>Vous êtes : <span id="p2"></span></p>
<script>
let age=18;
if(age>=18)
{
let msg = "majeur" ;
}
document.getElementById('p1').innerHTML=age;
document.getElementById('p2').innerHTML=msg;
</script>
</body></html>

Votre âge : 18
Vous êtes :

Exemple2 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>portée</title>
</head>
<body>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<p id="p5"></p>
<p id="p6"></p>
<script>
let x=2;
y=3;
function tester()
{
x=22;
let y=33;
document.getElementById("p3").innerHTML="La valeur de x :"+x;
document.getElementById("p4").innerHTML="La valeur de y :"+y;
}
document.getElementById("p1").innerHTML="La valeur de x avant :"+x;
document.getElementById("p2").innerHTML="La valeur de y avant :"+y;
tester();
document.getElementById("p5").innerHTML="La valeur de x après :"+x;
document.getElementById("p6").innerHTML="La valeur de y après :"+y;
</script>
</body>
</html>

➔Résultat affiché :
La valeur de x avant :2
La valeur de y avant :3
La valeur de x :22
La valeur de y :33
La valeur de x après :22
La valeur de y après :3

Les variables déclarées (de façon explicite ou implicite) au début du script, en


dehors et avant toutes fonctions, sont des variables globales ;
Dans une fonction :
• Une variable déclarée par le mot clé « let » est locale à cette fonction ;
• Une variable déclarée sans le mot clé « let », sa portée sera globale.

 Remarque : Les éléments du bloc seront locaux pour le code qui contient le bloc
(que ce soit une fonction ou le contexte global).

VI. Les opérateurs prédéfinis


1) Les opérateurs de calcul
Signe Signification
+ Addition
- Soustraction
* Multiplication
/ Division
% Modulo (reste de la division)
= Affectation
2) Les opérateurs de comparaison
Signe Signification
== Egal
< Inférieur
<= Inférieur ou égale
> Supérieur
>= Supérieur ou égal
!= Différent

3) Les opérateurs associatifs


Sont des opérateurs qui réalisent un calcul dans lequel une variable intervient des deux
côtés du signe (dans notre exemple x =11 et y = 5)
Signe Nom Signification Exemple Résultat
+= Plus égal x = x+y x +=y 16
-= Moins égal x = x-y x -=y 6
*= Multiplié égal x = x*y x *=y 55
/= Divisé égal x = x/y x /=y 2.2

4) Les opérateurs logiques


Signe Nom Exemple
&& ET (Condition1) && (Condition2)
|| OU (Condition1) || (Condition2)
! NON ! (Condition)

5) Les opérateurs d’incrémentation


Ces opérateurs vont augmenter ou diminuer la valeur d’une variable d’une unité. Dans
notre exemple x vaut initialement 3.
Signe Signification Exemple Résultat
x++, ++x Incrémentation Y=x++ ; Y=3 et x=4
(x++ est le même que x=x+1) Y=++x ; Y=4 et x=4
x--, --x Décrémentation Y=x-- ; Y=3 et x=2
(x-- est le même que x=x-1) Y=--x ; Y=2 et x=2
VII. Les méthodes prédéfinies
1) Les méthodes prédéfinies sur l’objet « Number »
Nom Rôle Exemple
Convertit une chaîne ch en un nombre. (Si la Number("10") = 10
Number(ch) conversion n’est pas possible, la fonction Number("15.50") = 15.50
retourne NaN). Number("15a") = NaN
Retourne true si la valeur de x n’est pas isNaN("ahmed") = true
isNaN(x)
numérique, false si elle est numérique. isNaN("25") = false
Retourne la conversion d’un nombre x en une x = 123
String(x)
chaîne de caractères. String(x) = "123"
Convertit une chaîne ch en un nombre entier parseInt ("15.33") = 15
parseInt(ch [,b]) exprimé dans la base b. (Si la conversion n’est parseInt("b1.5") = NaN
pas possible, la fonction retourne NaN). parseInt("1100", 2) = 12
Convertit une chaîne ch en un nombre décimal. ch= "10.33"
parseFloat(ch) (Si la conversion n’est pas possible, la fonction parseFloat (ch) = 10.33
retourne NaN).

2) Les méthodes prédéfinies sur l’objet « Math »


Nom Rôle Exemple
Math.abs(x) Retourne la valeur absolue de x. y = Math.abs(-5) ➔ y = 5
Math.sqrt(x) Retourne la racine carrée de x (x≥0). y = Math.sqrt(9) ➔ y = 3
Retourne l’arrondi (entier) du réel x passé en y = Math.round(3.7)
Math.round(x)
paramètre. y=4
Retourne la troncature entière d’un nombre en y = Math.trunc(5.8)
Math.trunc(x)
retirant sa partie décimale. y=5
y = Math.random()
Math.random() Retourne un réel aléatoire dans [0, 1[ (1 exclus)
y = 0.235

3) Les méthodes prédéfinies sur l’objet « String »


Nom Rôle Exemple
Permet de concaténer deux ou ch="Java"+"script"
+
plusieurs chaînes. ch = "Javascript"
Est une propriété qui retourne la ch="javascript"
ch.length longueur d’une chaîne de caractères ch ch.length = 10
ou 0 si elle est vide.
Retourne le caractère d’une chaîne ch ch="javascript"
ch.charAt(i)
dont le rang i est donné en paramètre. ch.charAt(3) = "a"
Retourne la position de la 1ère ch="javascript"
occurrence de ch1 dans ch en ch.indexOf("a",0) = 1
ch.indexOf(ch1 [,p]) effectuant la recherche à partir de la
position p. (Retourne -1 si ch1 n’existe
pas).
Retourne la position de la dernière ch="javascript"
occurrence de ch1dans ch à partir de la ch.lastIndexOf("a",0) = 3
ch.lastIndexOf(ch1 [,p])
position p. (Retourne -1 si ch1 n’existe
pas).
Retourne une sous-chaîne de ch de la ch="javascript"
ch.substring(d, f)
position d à la position f (non incluse). ch.substring(4,10) = "script"
Retourne une chaîne dans laquelle la ch="Bonjour"
ch.replace(ch1, ch2) 1ère occurrence de ch1 dans ch est ch=ch.replace("jour","soir")
remplacée par ch2. ch ="Bonsoir"
Convertit tous les caractères de ch en ch="Jour"
ch.toUpperCase()
majuscule. ch.toUpperCase() = "JOUR"
Convertit tous les caractères de ch en ch="JOUR"
ch.toLowerCase()
minuscule. ch.toLowerCase() = "jour"
Supprime tous les espaces existants au ch=" Java Script "
ch.trim()
début et à la fin de ch. ch.trim() = "Java Script"
Retourne le code ASCII du caractère à la
ch.charCodeAt(p) "Java".charCodeAt(1) = 97
position p.
Retourne une chaîne formée par la
String.fromCharCode concaténation des résultats de String.fromCharCode(98, 97,
(num1, …, numN) conversion des codes passés en 99) = "bac"
paramètre.

4) Les méthodes prédéfinies sur l’objet « Array »


Nom Rôle Exemple
Propriété qui représente le nombre let t = [1, 5, 8, 15]
length
d’éléments dans un tableau. t.length = 4
5) Les méthodes prédéfinies sur l’objet « Date »
Nom Rôle Exemple
d = new Date() ➔ d = Thu Oct
Retourne un objet contenant la date et
new Date() 31 2024 13:50:54 GMT+0100
l’heure courante.
(UTC+01:00)
d = new Date("2024-10-20")
Retourne un objet Date à partir d’une
➔ d = Sun Oct 20 2024
new Date(ch) chaîne de caractères ch représentant la
01:00:00 GMT+0100
date.
(UTC+01:00)
Retourne le jour du mois (de 1 à 31) pour la d = new Date("2024-10-31")
d.getDate()
date spécifiée. d.getDate() ➔ 31
Retourne le numéro du mois (de 0 à 11)
d = new Date("2024-10-31")
d.getMonth() pour la date spécifiée (janvier est 0, février
d.getMonth() ➔ 9
est 1, …).
d = new Date("2024-10-31")
d.getFullYear() Retourne la valeur de l’année sur 4 chiffres.
d.getFullYear() ➔ 2024
d = new Date()
Retourne une chaîne de caractères y = d.toString()
d.toString()
représentant la date d. y = 'Thu Oct 31 2024 13:59:15
GMT+0100 (UTC+01:00)'

6) Les méthodes pour sélectionner des éléments HTML


Permet de sélectionner un élément unique en fonction
document.getElementById()
de son identifiant.
Permet de sélectionner tous les éléments ayant le
document.getElementsByName()
même nom.

7) Modification du contenu, des attributs ou des styles des éléments HTML


Change la valeur de l’attribut d’un élément HTML
element.attribut = valeur Exemples d’attributs : value, checked, disabled,
readonly, src, muted.
Change le style d’un élément HTML
element.style.propriété = valeur Exemples de styles : color, background, border, font,
width, height.
Effectue une action sur un élément HTML.
element.methode()
Exemples de méthodes : play(), pause()
VIII. Les structures de contrôle conditionnelles
1) La structure simple
La Forme réduite La Forme complète
if (condition vraie) if (condition vraie)
{ {
Traitement 1 ; Traitement 1 ;
} }
else
{
Traitement 2 ;
}

Exemple1 :
<script>
let N = Number(prompt ("Donnez un entier : ",""));
let msg = "impair" ;
if (N%2 == 0)
{
msg = "pair";
}
alert(N+" est "+msg) ;
</script>

Exemple2 :
<script>
let N = Number(prompt ("Donnez un entier : ",""));
if (N%2 == 0)
{
msg = "pair" ;
}
else
{
msg = "impair" ;
}
alert(N+" est "+msg) ;
</script>
2) La structure généralisée
Vocabulaire et syntaxe
if (condition 1)
{Traitement 1 ;}
else if (condition 2)
{Traitement 2 ;}
……………………
else if (condition n-1)
{Traitement n-1 ;}
else
{Traitement n ;}

Exemple :
<script>
let c=prompt("Tapez un caractère : ","");
c=c.toUpperCase();
if (c[0]>="A" && c[0]<="Z")
msg="Une lettre";
else if (c[0]>="0" && c[0]<="9")
msg="Un chiffre";
else
msg="Un symbole";
alert("Le caractère saisie correspond à "+msg) ;
</script>

3) La structure à choix multiples


Vocabulaire et syntaxe
switch (expression)
{
case v1: bloc 1;
break;
case v2:case v3:case v4: bloc 2;
break;
…………………….
default: bloc n;
break;
}
Exemple :
<script>
let d=new Date().getDay() ; /*récupérer le numéro du jour de la semaine*/
switch (d)
{
case 0: alert("Dimanche"); break;
case 1: alert("Lundi"); break;
case 2: alert("Mardi"); break;
case 3: alert("Mercredi"); break;
case 4: alert("Jeudi"); break;
case 5: alert("Vendredi"); break;
case 6: alert("Samedi"); break;
}
</script>

Remarques :
• L’instruction break permet de quitter la structure switch après l’exécution du
bloc convenable ;
• Lorsque le résultat de l’expression est différent de toutes les valeurs envisagées,
c’est le bloc n relatif à default qui sera exécuté ;
• La clause default : bloc n est facultative.

IX. Les structures de contrôle itératives


1) La structure itérative complète (for)
Permet de répéter l’exécution d’un bloc d’instructions un certain nombre de fois connu
d’avance :

for (initialisation ; condition ; progression)


{
instructions ;
}

➢ Initialisation : les instructions d’initialisations nécessaires ;


➢ Condition : la condition de continuité (bouclage) ;
➢ Progression : définit le pas du compteur (pas forcément + ou – 1)

Exemple : Afficher les nombres parfaits compris entre 2 et 1000. (Un nombre est dit
parfait s’il est égal à la somme de ses diviseurs sauf lui-même).
<script>
for(let n=2 ; n<=1000 ; n++)
{
let s=1;
for(let i=2 ; i<=n/2 ; i++)
if(n%i==0)
s+=i;
if (s==n)
document.write(n+"<br/>");
}
</script>

2) La structure do … while
Permet de répéter l’exécution des instructions tant que la condition est vérifiée.

do
{
instructions;
} while (condition(s));

Exemple : lire un nombre compris entre 10 et 100.


<script>
do
{
n=Number(prompt("donner un nombre",""));
} while (n<10 || n >100 || isNaN(n));
</script>

3) La structure while
while (condition(s))
{
instructions ;
}

Exemple :
<script>
i=1 ;
while(i<20)
{
i=i*2 ;
document.write(i+"<br>");
}
</script>
X. Les fonctions en JavaScript
En JavaScript, il existe deux types de fonctions :
➢ Les fonctions prédéfinies, on les appelle « méthodes ». Elles sont associées à un
objet particulier comme la méthode write() de l’objet document.
➢ Les fonctions déclarées par le programmeur selon les besoins de l’application.
Pour déclarer une fonction, on utilise la syntaxe suivante :
function nom_de_la_fonction(arguments)
{
Instructions ;
[return nom_variable ;]
}

Activité : Ecrire un code « JavaScript » permettant d’afficher la somme de deux


nombres saisis dans deux zones de textes en cliquant sur le bouton « Somme ».

<!DOCTYPE html>
<html><head>
<meta charset='utf-8'>
<title>Les fonctions</title>
</head>
<body>
<script>
function somme()
{
let n1=document.getElementById('n1').value;
let n2=document.getElementById('n2').value;
if(isNaN(n1)||isNaN(n2)||n1==""||n2=="")
alert("vérifiez vos valeurs");
else
{
let s=Number(n1)+Number(n2);
alert("La somme est "+s);
}
}
</script>
<form>
<p><label for="n1">Nombre 1 : </label><input type="text" id="n1"/></p>
<p><label for="n2">Nombre 2 : </label><input type="text" id="n2"/></p>
<input type="button" value="Somme" onclick="somme()"/>
<input type="reset" value="Annuler"/>
</form>
</body>
</html>

XI. Les évènements HTML :


1) Présentation
Les évènements sont des actions qui se produisent et auxquelles on va pouvoir
répondre en exécutant un code. Par exemple, on va pouvoir afficher ou cacher du texte
à la suite d’un clic d’un utilisateur sur un élément, on change la taille d’un texte lors du
passage de la souris d’un utilisateur sur un élément, etc. La programmation des
évènements se fait par l’association à chaque évènement une action.
La syntaxe est la suivante :
<nom_balise OnEvenement = "action">

2) Liste des évènements


onblur Se déclenche au moment où l’élément perd le focus.
onclick Se déclenche lors d’un clic sur l’élément.
onfocus Se déclenche au moment où l’élément obtient le focus.
oninput Se déclenche dès que la valeur d’un élément a changée.
onload Se déclenche lorsque la page est complètement chargée.
onmouseover Se déclenche lorsque le pointeur de la souris survole l’élément.
Onmouseout Se déclenche lorsque le pointeur de la souris sort de l’élément.
onplay Se déclenche lorsque la lecture d’un fichier audio/vidéo commence.
onpause Se déclenche lorsqu’un élément audio/vidéo est mis en pause.
onsubmit Se déclenche lorsqu’un formulaire est soumis.
onchange Se déclenche lorsque la valeur d’un élément est modifiée.
onkeydown Se déclenche lorsqu’une touche du clavier est pressée.
onkeyup Se déclenche lorsqu’une touche du clavier est relâchée.

Exemple :
Soit la page web nommée « evenement.html » contenant le formulaire suivant qui est
composé de deux zones de saisie, et offrant les fonctionnalités suivantes :
➢ Au chargement de la page le message « Soyez le bienvenu » est affiché ;
➢ Au fur et à mesure que le texte est saisi dans la première zone, la deuxième zone
indique le nombre de caractères tapés ;
➢ Lorsque le curseur quitte la première zone le texte saisi est mis en majuscule.
<!DOCTYPE html>
<html><head>
<meta charset='utf-8'>
<title>Les évènements</title>
</head>
<body onload="alert('Soyez le bienvenu');">
<script>
function majuscule()
{
ch1=document.getElementById('nom').value.toUpperCase();
document.getElementById('nom').value=ch1;
}
function longueur()
{
L=document.getElementById('nom').value.length;
document.getElementById("nbr").value=L;
}
</script>
<form>
<p><label for="nom">Votre Nom et Prénom : </label>
<input type="text" id="nom" onchange="majuscule()" oninput="longueur()"></p>
<p><label for="nbr">Nombre de caractères : </label>
<input type="text" id="nbr" value="0"/></p>
</form>
</body></html>

XII. Les formulaires en JavaScript


1) Le contrôle : zone de texte
Récupérer la valeur d’une zone de texte :
Exemple :
<script>
x = document.getElementById('id').value;
alert("La valeur de x est : "+x) ;
</script>
Afficher une valeur dans une zone de texte :
Exemple :
<script>
document.getElementById('id').value = "Bienvenu";
</script>

Mettre en forme une zone de texte :


Exemple :
<script>
x = document.getElementById('id') ;
x.style.border="2px dashed red";
</script>

2) Les boutons radio


Exemple :
Soit le fichier nommé « signe.html » qui comporte un code JavaScript permettant de
donner en entrée le signe du discriminant (delta) d’une équation de second degré puis
affiche le nombre de solutions possibles.

<!DOCTYPE html>
<html><head>
<meta charset='utf-8'>
<title>bouton radio</title></head>
<script>
function solutions()
{
if (document.getElementById('v1').checked==true)
alert(document.getElementById('v1').value+" solution(s)");
else if (document.getElementById('v2').checked==true)
alert(document.getElementById('v2').value+" solution(s)");
else if (document.getElementById('v3').checked==true)
alert(document.getElementById('v3').value+" solution(s)");
else
alert("veuillez choisir une option svp") ;
}
</script>
<form>
<fieldset><legend>Signe du discriminant</legend>
<p><input type="radio" name="r1" id="v1" value="2"/>Strictement positif</p>
<p><input type="radio" name="r1" id="v2" value="1"/>Nul</p>
<p><input type="radio" name="r1" id="v3" value="0"/>Strictement négatif</p>
<input type="button" value="Nombre de solutions" onclick="solutions()"/>
<input type="reset" value="Annuler" />
</fieldset>
</form></body></html>

Solution 2 :
<script>
function solutions()
{
signe=document.getElementsByName('r1');
if (signe[0].checked==true)
alert(signe[0].value+" solution(s)");
else if (signe[1].checked==true)
alert(signe[1].value+" solution(s)");
else if (signe[2].checked==true)
alert(signe[2].value+" solution(s)");
else
alert("veuillez choisir une option svp") ;
}
</script>

Remarques :
➢ Pour vérifier l’état d’une case d’option (cochée ou pas), on utilise la propriété
« checked » qu’on peut affecter à une variable booléenne.
➢ Pour récupérer la valeur d’une case d’option on utilise la propriété « value » qu’on
peut affecter à une variable.
3) Les cases à cocher
Exemple :
Soit le fichier nommé « premier.html » qui comporte un script JavaScript permettant
de sélectionner les nombres premiers parmi la liste des nombres suivants : 11 ; 24 ;
37 ; 49 puis affiche si la réponse est correcte ou non.

<!DOCTYPE html>
<html><head>
<meta charset='utf-8'>
<title>bouton radio</title></head>
<script>
function reponse()
{
if (document.getElementById('n1').checked==true &&
document.getElementById('n2').checked==false &&
document.getElementById('n3').checked==true &&
document.getElementById('n4').checked==false)
alert("Bonne réponse");
else
alert("Réponse incorrecte");
}
</script>
<form>
<fieldset><legend>Les nombres premiers</legend>
<p><input type="checkbox" name="choix" id="n1"/>11</p>
<p><input type="checkbox" name="choix" id="n2"/>24</p>
<p><input type="checkbox" name="choix" id="n3"/>37</p>
<p><input type="checkbox" name="choix" id="n4"/>49</p>
<input type="button" value="Votre réponse" onclick="reponse()"/>
<input type="reset" value="Annuler" />
</fieldset></form></body></html>
Solution 2 :
<script>
function reponse()
{
rep=document.getElementsByName('choix');
if (rep[0].checked==true && rep[1].checked==false &&
rep[2].checked==true && rep[3].checked==false)
alert("Bonne réponse");
else
alert("Réponse incorrecte");
}
</script>
Remarques :
➢ Pour vérifier l’état d’une case à cocher (cochée ou pas), on utilise la propriété
« checked » qu’on peut affecter à une variable booléenne.
➢ Pour récupérer la valeur d’une case à cocher on utilise la propriété « value » qu’on
peut affecter à une variable.

4) La liste déroulante
Exemple :
Soit le fichier nommé « couleur.html » qui comporte un script JavaScript permettant
de modifier la couleur d’un texte en sélectionnant la couleur souhaitée à partir d’une
liste déroulante.

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>liste deroulante</title>
</head>
<script>
function colorer()
{
s=document.getElementById("couleur").selectedIndex;
if(s<=0)
alert("Veuillez choisir votre couleur");
else
{
c=document.getElementById("couleur").value;
texte=document.getElementById("para");
texte.style.color=c;
}
}
</script>
<form>
<fieldset>
<p id="para">Texte à colorer</p>
<p><select name="couleur" id="couleur">
<option value="">Choisir la couleur</option>
<option value="red">Rouge</option>
<option value="blue">Bleu</option>
<option value="green">Vert</option>
</select></p>
<input type="button" value="Colorer le texte" onclick="colorer()"/>
</fieldset>
</form>
</body></html>

Remarques :
• La propriété « selectedIndex » : retourne l’indice de l’élément sélectionné dans
une liste déroulante à sélection unique. (L’indice d’une liste déroulante commence
par 0)
Exemple : s = document.getElementById("nom_id").selectedIndex ;
• La propriété « value » : renvoie la valeur de l’élément sélectionné.
Exemple : valeur = document.getElementById("nom_id").value ;
• La propriété « text » : renvoie le texte de l’élément sélectionné ;
Exemple : texte = document.getElementById("nom_id").text ;

Vous aimerez peut-être aussi