Cours JavaScript Tous Les Seances-2 None Have This

Cours JavaScript
Introduction
❑ JavaScript est le langage de programmation le plus populaire au monde.
❑ JavaScript est le langage de programmation du Web.
❑ JavaScript est facile à apprendre.

Intégration du Javacsript Dans une page Web
Intégrer le code Javascript directement dans les tags de script <script> et </script>
Déclarer le code Javascript dans un fichier JS et appeler celui ci dans la balise <script> à
l'aide de l'attribut src
<script type="text/javascript" src="script.js"></script>
<script src="script.js"></script>
Premier exemple
Code Javascript ecrit directement dans les tags Déclarer le code Javascript dans un fichier JS et
de script <script> et </script> dans le code appeler celui ci dans la balise <script> à l'aide de
HTML l'attribut src
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
</head> </head>
<body> <body>
<script> <script type="text/javascript"
alert("Bonjour"); src="script.js"></script>
</script> </body>
</body> </html>
</html>
Code Javascript (contenu du fichier script.js)
;alert("Bonjour")
Où placer nos scripts?
❑ Dans l'exemple précédent, vous avez constaté que nous avons déclaré le code Javascript dans
la balise <body>.
❑ En fait, il n'y a pas de restriction sur l'endroit où on peut placer nos scripts.
❑ Nous pouvons les placer n’importe où (avant <html>, dans <head>, dans <body> ou
après </html>).
❑ Cependant, les développeurs ont pour coutume de placer les scripts Javascript dans la
balise <head>
Exemple1
L'une des nombreuses méthodes JavaScript HTML est getElementById()
L'exemple ci-dessous trouve un élément HTML (ayant un id="demo") et change
son contenu en utilisant (innerHTML) en "Le contenu est changé avec
Javascript!":
<html>
<body>
<h2>Exemple 1</h2>
<p id="demo">JavaScript peut changer le contenu

HTML.</p>
<button type="button"
onclick='document.getElementById("demo").innerHTML =
"Le contenu est changé avec Javascript!" '>Click
Moi!</button>
</body>
</html>
innerHTML est une propriété de tout élément HTML qui désigne le contenu qui se trouve entre la balise
entrante et la balise fermante.
Dans l'exemple ci-dessous, innerHTML a pour valeur "un texte":
<p> un texte </p>
On l'utilise pour lire pour insérer dynamiquement un contenu dans une page.
Exemple 2
<fieldset>
<legend> enter un texte </legend>
<input type="text" name="z1" id="z1" />
</fieldset>
<button type="button"
onclick="resultat('z1','z2')">Afficher!</button>
<script>
<fieldset> function resultat(z1,z2)
<legend> resultat</legend> {
<div id="z2"></div> document.getElementById(z2).innerHTML=document.getElementB
</fieldset> yId(z1).value;
}
</script>
document.write()
Pour des objectifs de test on peu utiliser: document.write()
<!DOCTYPE html>
<html>
<body>
<h1>Exemple write</h1>
<p>exemple 1</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
L'utilisation de document.write() après le chargement d'un document HTML supprimera tout le
code HTML existant :
<html>
<body>
<h1>Exemple write</h1>
<p>exemple 1</p>
<button type="button" onclick="document.write(5

+ 6)">Essayer</button>
</body>
</html>
La méthode document.write() ne doit être utilisée que pour tester

alert()
Vous pouvez utiliser une boîte d'alerte pour afficher des données :
<!DOCTYPE html>
<html>
<body>
<h1>Exemple alert</h1>
<p>exemple 2</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
console.log()
Afin de vérifier quelques données, vous pouvez utiliser la méthode console.log() dans
le navigateur pour afficher les données.
<html>
<body>
<h2>Activer Debugging</h2>
<p>Cliquer sur F12 pour activer debugging.</p>

<p> selectinner "Console".</p>
<p>Actualiser la page.</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Application
Créer une page web contenant deux zones de texte et quatre boutons pour l’addition, soustraction,
multiplication et division.
Après l’insertion de deux valeurs A et B et le click sur l’une des boutons le résultat sera affiché
<fieldset>
<legend>Calculatrice</legend>
A = <input type="text" name="a" id="a"><br><br>
B = <input type="text" name="b" id="b">
<br><br>
<table width="200" border="0">
<tr>
<td align="right"><input type="button" name="addition" id="addition" value="+"
onclick="addition('a','b','res')"></td>
<td align="right"><input type="button" name="sous" id="sous" value="-"

onclick="soustraction('a','b','res')"></td>
<td align="right"><input type="button" name="mult" id="mult" value="x"

onclick="multiplication('a','b','res')"></td>
<td align="right"><input type="button" name="divi" id="divi" value="/"

onclick="division('a','b','res')"></td>
</tr>
</table>
<br><br>
Resulat=
<div id="res" ></div>
</fieldset>
<script>
function addition(x,y,sum){
var p=Number(document.getElementById(x).value);
var k=parseInt(document.getElementById(y).value);
document.getElementById(sum).innerHTML=p+k;
</script>
Completer les autres functions: soustraction, multiplication, division

Utilisation des instructions d’entrée en utilisant l’invite (prompt) et les champs du formulaire
(getElementById).
La méthode prompt () en JavaScript est utilisée pour afficher une boîte de dialogue qui invite
l'utilisateur à entrer une donnée. Il est généralement utilisé pour prendre la donnée que
l'utilisateur a entré avant d’accéder à la page.
Syntaxe
prompt(text, defaultText)
Exemple
<body>
<h2>JavaScript Prompt</h2>
<button onclick="myFunction()">Cliquer ici</button>
<p id="demo"></p>
<script>
function myFunction() {
let text;
let person = prompt("Entrer votre nom svp:", "Mohamed");
if (person == null || person == "") {
text = "Utilisateur a annuler ou n'a pas entrer son nom";
}
else {
text = "Bonjour " + person + "! Comment vas tu?";
}
document.getElementById("demo").innerHTML = text;
} ?Ce quoi let
</script>
L'utilisation de let ou de const vous permet de créer des
</body> variables et des constantes qui ont une portée une portée
locale au bloc.
Définition des constantes en JavaScript
Une constante est similaire à une variable au sens où c’est également un conteneur
pour une valeur. Cependant, à la différence des variables, on ne va pas pouvoir
modifier la valeur d’une constante.
Pour créer ou déclarer une constante en JavaScript, nous allons utiliser le mot clef const.
Les variables en JavaScript
Les variables sont dynamiques en JavaScript, ce sont des noms associés à des valeurs et que l'on
peut réaffecter dans le programme à des valeurs de type différent: nombre, chaîne de caractères,
.tableau, etc
Le nom d'une variable est une suite de lettres ou de chiffres, qui commence par une lettre ou le
.$ symbole de soulignement, ou le symbole
:Par exemple
Pour créer ou déclarer une variable en
JavaScript, nous allons utiliser le mot clef var.
La visibilité est locale à une fonction ou globale
Une variable est considérée comme globale si elle est déclarée hors d'une définition de fonction ou d'une
structure. Elle est alors visible dans le corps des fonctions et dans toutes structures de l'espace global ou
contenues dans des fonctions.
Une variable définie dans une fonction est visible dans cette fonction et dans le corps de toute
structure contenue dans cette fonction.
Mais si elle est créée sans le mot clé var, elle fait alors partie de l'espace global, mais si elle n'a pas été
définie hors de la fonction.
Présentation des structures conditionnelles en JavaScript
Les structures de contrôle conditionnelles (ou plus simplement conditions) vont nous permettre
d’exécuter une série d’instructions si une condition donnée est vérifiée ou (éventuellement) une autre
série d’instructions si elle ne l’est pas.
❑ La condition if (si) if (condition) {Traitement}
❑ La condition if… else (si… sinon) if (condition) {Traitement1} else {traitement2};
❑ La condition if… else if… else (si… sinon si… sinon).

if (condition1) {Traitement1}
else if (condition2) {traitement2}
else if (condition3){traitement3}
…
else {traitment N}
Présentation des opérateurs de comparaison
Comme je l’ai précisé, nous allons souvent construire nos conditions autour de variables : selon la
valeur d’une variable, nous allons exécuter tel bloc de code ou pas.
En pratique, nous allons donc comparer la valeur d’une variable à une certaine autre valeur donnée
et selon le résultat de la comparaison exécuter un bloc de code ou pas. Pour comparer des valeurs,
nous allons devoir utiliser des opérateurs de comparaison.
Revenons à nos opérateurs. Tout d’abord, notez que notre « égal » mathématique (l’égalité en
termes de valeurs) se traduit en JavaScript par le double signe égal ==.
Ensuite, certains d’entre vous doivent certainement se demander ce que signifie le triple égal.
Lorsqu’on utilise un triple égal ===, on cherche à effectuer une comparaison non seulement sur la
valeur mais également sur le type des deux opérandes.
Prenons un exemple simple pour illustrer cela. Imaginons que l’on possède une variable let x dans
laquelle on stocke le chiffre 4. On veut ensuite comparer la valeur stockée dans notre variable à la
chaîne de caractères « 4 ».
Si on utilise le double signe égal pour effectuer la comparaison, l’égalité va être validée par le
JavaScript car celui-ci ne va tester que les valeurs, et 4 est bien égal à « 4 » en termes de valeur.
En revanche, si on utilise le triple signe égal, alors l’égalité ne va pas être validée car nous
comparons un nombre à une chaine de caractères (donc des types différents de valeurs).
On va suivre exactement le même raisonnement pour les deux opérateurs != et !== qui vont nous
permettre de tester respectivement la différence en termes de valeurs simplement et la différence
en termes de valeurs ou de type.
Fonctions prédéfinies
isNaN
.Teste si un objet est un nombre ou non
X=5;
if(isNaN(x)) { alert(x + " n'est pas un
nombre."); }
isFinite
Teste une expression et retourne vrai si le résultat c'est un nombre fini.
X=5;
if(isFinite(x)) { alert(x + " est un nombre."); }
parseInt
Convertit une chaîne en nombre entier.
;var x = parseInt("123")
parseFloat
Convertit une chaîne contenant une valeur numérique en nombre réel. Si la chaîne contient un nombre
avec des décimales, la fonction parseInt ne conserve que la partie entière, contrairement à parseFloat.
toString
Convertit un nombre en chaîne
;var nbr = 15
"nbr.toString(); //"15
Application 1
Créer une page web et la sauvgarder dans votre dossier de traivail avec le nom
application_1_mars_js
1- Au chargement de la page une boite de dialogue doit s’afficher et vous invite d’

entrer votre nom
Fieldset
2- apres la saisie du nom et le click sur « OK » la page va s’afficher et contient
Le nom que
vous avez inseré
Legend Zone de texte
Div pour afficher la mention
3- écrire la fonction qui va vérifier si la moyenne saisie sera un nombre ou nom, dans le
cas ou l’utilisateur n’a pas saisie un nombre un alert vas s’afficher pour informer
l’utilisateur par l’erreur
4- dans le cas ou l’utilisateur a entrer un nombre et a cliquer sur le bouton « afficher la
mention» la mention sera afficher dans le div aproprié selon les valeurs suivants
Moyenne Mention
Moyenne<10=<0 refusé
Moyenne<12=<10 Passable
Moyenne<14=<12 Assez bien
Moyenne<16=<14 Bien
Moyenne<18=<16 Très bien
Moyenne<=20=<18 Excellent
sinon moyenne incorrecte
5- Ajouter des styles CSS a votre choix pour

améliorer l’interface de la page
Application 2
Ouvrir le dossier Application se trouvant sur C: et ouvrir la page Index.Html
Vous devez créer la page manquante qui vous permet de résoudre une équation de seconde
dégrée
La page doit être comme suit:
legend
Fieldset
Zones de texte
button
Div pour afficher le resulat

Apres le remplissage des zone de textes a, b et c et le click sur le buttons calculer une
fonction JavaScript doit s’éxecuter pour:
❑ Tester si les valeurs saisies dans les zone sont des nombres
❑ De résoudre l’équation de second dégrée qui a la forme:
❑ Le résultat doit s’afficher dans le div que vous avez preparé

Pour résoudre cette équation on doit
❑ Calculer detla
❑ Vérifier la valeur de delta
Si delta >0 alors deux solutions
Si delta =0 alors une solution
Si delta < 0 alors une solution Le discriminant est inférieur à 0 donc on obtient l'ensemble
vide
Structure conditionnelle a choix multiple
Switch
Est utilisé pour effectuer différentes actions en fonction de différentes conditions.
• L'expression switch est évaluée une fois.

• La valeur de l'expression est comparée
aux valeurs de chaque cas.
• S'il y a correspondance, le bloc de code
associé est exécuté.
• S'il n'y a pas de correspondance, le bloc
de code par défaut est exécuté.
Jours de la semaine
<fieldset>
<legend >Jours </legend>
Entrer le numero du jour <input type="text" name="jour"

id="jour" />
<input type="button" name=« affjour" id=« affjour"
value="afficher le jour"
onclick="aff_jour('jour','nomjour')">
<br />
Nom du jour: <div id="nomjour"></div>
</fieldset>
function aff_jour(jour,nomjour){
numjour=document.getElementById(jour).value;
numjourint=parseInt(numjour);
if(isNaN(numjour)) {
alert("vous devez entrer un nombre du jour cimpris entre 1 et 7");
}
else {
switch (numjourint) {
case 1:
document.getElementById(nomjour).innerHTML="DIMANCHE";
break;
case 2:
document.getElementById(nomjour).innerHTML="LUNDI";
break;
case 3:
document.getElementById(nomjour).innerHTML="MARDI";
break;
case 4:
document.getElementById(nomjour).innerHTML="MERCREDI";
break;
case 5:
document.getElementById(nomjour).innerHTML="JEUDI";
break;
case 6:
document.getElementById(nomjour).innerHTML="VENDREDI";
break;
case 7:
Saisons switch (nummoisint) {
case 12:
case 1:
case 2:
document.getElementById(nomsaison).innerHTML="Hiver";
break;
case 3:
case 4:
case 5:
document.getElementById(nomsaison).innerHTML="Printemps";
break;
case 6:
case 7:
case 8:
document.getElementById(nomsaison).innerHTML="ete";
break;
case 9:
case 10:
case 11:
document.getElementById(nomsaison).innerHTML="Automne";
break;
default:
document.getElementById(nomsaison).innerHTML="NUM MOIS INCORRECTE ";
}
Mention switch (true) {
case ((moyfloat >= 0) && (moyfloat < 10)):
document.getElementById(mention).innerHTML="Refusé";
break;
document.getElementById(mention).innerHTML="admis passable";
break;
document.getElementById(mention).innerHTML="admis Assez bien";
break;
case ((moyfloat > 14) && (moyfloat <= 16)):
document.getElementById(mention).innerHTML="admis bien";
break;
document.getElementById(mention).innerHTML="admis tres bien";
break;
document.getElementById(mention).innerHTML="admis excellent";
break;
default:
document.getElementById(mention).innerHTML="moyenne incorrecte ";
}
Contrôle de saisie
Application
Créer le formulaire d’inscription suivant
Zone de texte qui doit contenir uniquement des lettres
Sélectionner le genre
Zone de texte qui doit contenir l’email avec forme correcte
Zone de texte qui doit contenir le numéro de téléphone qui

doit être formé par 8 chiffres
Mot de passe doit être formé par des lettres et des chiffres
De longueur minimal 8 caractères
La confirmation du mot de passe doit être la même que

Le mot de passe
<div align="center">
<table width="60%" border="0">
<tr> <tr>
<td colspan="2"><div align="center">INSCRIPTION</div></td> <td>Tel</td>
</tr> <td><input type="text" name="tel" id="tel" ></td>
<tr> </tr>
<td colspan="2"> </td>
</tr> <tr>
<tr> <td> </td>
<td width="30%">Nom</td> <td> </td>
<td width="70%"><input type="text" name="nom" id="nom" ></td> </tr>
</tr> <tr>
<tr> <td>Mot de passe</td>
<td> </td> <td><input type="password" name="password" id="password" ></td>
<td> </td> </tr>
</tr> <tr>
<tr> <td> </td>
<td>Genre</td> <td> </td>
<td><select name="genre" id="genre"> </tr>
<option value="-1">Select Gender</option> <tr>
<option value="MALE">MALE</option> <td>Confirmation mot de passe</td>
<option value="FEMALE">FEMALE</option> <td><input type="password" name="password2" id="password2" ></td>
</select></td> </tr>
</tr> <tr>
<tr> <td> </td>
<td> </td> <td> </td>
<td> </td> </tr>
</tr> <tr>
<tr> <td colspan="2"><div align="center"><input type="button" name="inscription"
<td>Email</td> id="inscription" value="s'inscrire"
<td><input type="text" name="email" id="email" ></td> onclick="verif('nom','genre','email','tel','password','password2')"></div></td>
</tr> </tr>
<tr> </table>
<td> </td> </div>
<td> </td>
</tr>
function verif(nom,genre,email,tel,password,password2)
{ nomv=document.getElementById(nom).value;
genrev=document.getElementById(genre).value;
emailv=document.getElementById(email).value;
telv=document.getElementById(tel).value;
passwordv=document.getElementById(password).value;
password2v=document.getElementById(password2).value;
atpos = emailv.indexOf("@");
dotpos = emailv.lastIndexOf(".");
if(nomv=='') {alert ('saisir nom'); return false;}
else if (/^[a-zA-Z]+$/.test(nomv)==false) {
alert( "le nom doit contenir des lettres seulement!" );
return false;
}
else if( genrev === "-1" )

{
alert( "Genre doit etre Masculin ou Feminin " );
return false;
}
else if (atpos < 1 || ( dotpos - atpos < 2 ))

{
alert("incorrect email: email doit etre de la forme someone@gmail.com ")
return false;
}
else if( telv == "" || isNaN( telv ) || telv.length != 8 )
{
alert( "le numero de telephone doit etre forme de 8 entier" );
return false;
}
else if ((/^([0-9]+[a-zA-Z]+|[a-zA-Z]+[0-9]+)[0-9a-zA-Z]*$/.test(passwordv)==false)||(passwordv.length
< 8))
{
alert( "Le mot de passe doit etre forme par des lettres et des chiffres et de taille 8 " );
return false;
}
else if( passwordv != password2v )

{
alert( "le mot de passe et sa confirmation doit etre les memes!" );
return false;
}
else{
alert("tous les champs sont saisies correctement");
return( true );
}
Structures de contrôle
Iterative: les boucles
Les boucles peuvent exécuter un bloc de code plusieurs fois.
Les boucles sont pratiques si vous souhaitez exécuter le même code

plusieurs fois, à chaque fois avec une valeur différente.
Différents types de boucles
for - exécute un bloc de code un nombre finis de fois
while - exécute un bloc de code lorsqu'une condition spécifiée est

vraie
do/while - exécute un bloc de code tant qu'une condition spécifiée est vraie
Boucle For
Boucle for une boucle avec 3 expressions facultatives :
.Expression 1 est exécuté (une fois) avant l'exécution du bloc de code
.Expression 2 définit la condition d'exécution du bloc de code
.Expression 3: est exécuté (à chaque fois) après l'exécution du bloc de code

:Exemple 1
<html>
<body>
<h2>JavaScript For Loop</h2>

Résultat
<p id="demo"></p>
<script>
let text = "";
for (let i = 0; i < 5; i++) {

text += "The number is " + i + "<br>";
}
</script>
</body>
</html>
Expression 1
❑ Normalement, vous utiliserez l'expression 1 pour initialiser la variable

utilisée dans la boucle (soit i = 0).
❑ Ce n'est pas toujours le cas. JavaScript s'en fout. L'expression 1 est

facultative.
❑ Vous pouvez initier plusieurs valeurs dans l'expression 1 (séparées

par une virgule) :
:Exemple 2
<html>
<body>
<h2>JavaScript For Loop</h2> Résultat
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
</script>
</body>
</html>
Et vous pouvez omettre l'expression 1 (comme lorsque vos valeurs sont définies avant le début de la
boucle) :
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
Résultat
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {

text += cars[i] + "<br>";
}
</script>
</body>
</html>
Application
<table width="60%" border="0">
<tr>
Créer un fichier HTML dans lequel <td colspan="2" align="center">Nombre des
une zone de texte doit être insérée et diviseurs</td>
une bouton ayant la valeur calculer, </tr>
après la saisie d’un nombre dans la <tr>
zone de texte et le click sur le bouton, <td width="36%">Nombre</td>
le nombre des diviseurs de ce <td width="64%"><input type="text" name="n" id="n"
nombre sera affiché dans un div au /></td>
dessous du bouton. </tr>
<tr>
<td> </td>
<td><input type="button" name="calculer"
id="calculer" value="calculer" onclick="nb_diviseurs
('n','nbdiv')"></td>
</tr>
<tr>
<td>Nombre de diviseurs:</td>
<td><div id="nbdiviseur"></div></td>
</tr>
</table>
<script>
function nb_diviseurs(n,nbdiviseur)
{ nc=document.getElementById(n).value;
var nint=parseInt(nc);
var nbdiv=0;
for (let i = 1; i <= nint; i++) {
if(nint%i==0)
nbdiv+=1;
}
document.getElementById("nbdiviseur").innerHTML = nbdiv;
}
</script>
Boucle While
Boucles while exécute un bloc de code tant qu'une condition spécifiée est vraie.
<html>
:Syntaxe <body>
<h2>JavaScript While Loop</h2>
<p id="demo"></p>
<script>
let text = "";
let i = 0;
Exemple 1 while (i < 10) {
text += "<br>The number is " + i;
Dans l'exemple suivant, le code de la boucle s'exécutera
i++;
tant qu'une variable (i) est inférieure à 10 :
}
while (i < 10) {
</script>
text += "The number is " + i;
i++;
</body>
}
</html>
Méthodes sur les chaîne en Javascript
❑ Length : retoure la longueur d’une chaine de caractère
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

let length = text.length;
❑ slice() ▪ extrait une partie d'une chaîne et renvoie la partie

extraite dans une nouvelle chaîne.
▪ La méthode prend 2 paramètres : position de départ et
position de fin (fin non incluse).
let text = "Apple, Banana, Kiwi";

let part = text.slice(7, 13);
Résultat : Banana
❑ replace()
La méthode replace() remplace une valeur spécifiée par une autre valeur dans une chaîne :
let text = "Please visit Microsoft!";

let newText = text.replace("Microsoft", "W3Schools");
!Résultat : Please visit W3Schools
❑ Conversion en majuscules et minuscules
Une chaîne est convertie en majuscule avec toUpperCase()

Une chaîne est convertie en minuscules avec toLowerCase()
let text1 = "Hello World!";

let text2 = text1.toUpperCase();
!Résultat : HELLO WORLD

❑ indexOf()
La méthode indexOf() renvoie l'index (position) de la première occurrence d'une chaîne dans une chaîne :
let text = "Please locate where 'locate' occurs!";

let index = text.indexOf("locate");
Résultat : 7
❑ lastIndexOf()
La méthode lastIndexOf() renvoie l'index de la dernière occurrence d'un texte spécifié dans une chaîne :
let text = "Please locate where 'locate' occurs!";

let index = text.lastIndexOf("locate");
Résultat : 21
❑ charAt()
La méthode charAt() renvoie le caractère à un index (position) spécifié dans une chaîne.
L'index du premier caractère est 0, le second 1, ...
Récupérer le premier caractère d'une chaîne
let text = "HELLO WORLD";

let letter = text.charAt(0);
Resultat: H
Récupérer le dernier caractère d'une chaîne
let text = "HELLO WORLD";

let letter = text.charAt(text.length-1);
Résultat: D
:Application 1
Créer un fichier HTML nommé
PGCD_PPCM dans lequel deux zones
de texte doit être insérées et deux
boutons ayant la valeur calculer
PGCD et calculer PPCM, après la
saisie de deux nombres dans les
zones de texte et le click sur le
bouton choisie, le calcul du PPCM ou
du PGCD sera fait et affiché dans un
div au dessous des bouton.
<input type="button" name="c1" id="c1" value="calculer PGCD"

onclick="calcul_pgcd ('a','b','res')">
<input type="button" name="c2" id="c2" value="calculer PPCM"

onclick="calcul_ppcm ('a','b','res')">
function calcul_pgcd(a,b,res)
{
aval=parseInt(document.getElementById("a").value);
bval=parseInt(document.getElementById("b").value);
while (aval!=bval){
if (aval>bval) aval-=bval;
else bval-=aval;
}
document.getElementById("res").innerHTML = 'Le PGCD= '+aval;
}
function calcul_ppcm (a,b,res)

{
aval=parseInt(document.getElementById("a").value);
bval=parseInt(document.getElementById("b").value);
var c=aval;
while (c%bval!=0){
c+=aval;
}
document.getElementById("res").innerHTML = 'Le PPCM= '+c;
}
Application2
Créer un fichier HTML dans lequel

une zone de texte doit être insérée et
une bouton ayant la valeur vérifier,
après la saisie d’un nom dans la zone
de texte et le click sur le bouton un
alerte doit être affiché pour nous
informer si le nom est correctement
saisie ou non, un nom est dit
correctement saisi s’il contient
uniquement des lettres et des
espaces suellement.
<input type="button" name="c1" id="c1" value="Verifier"

onclick="verifnom ('nom')" />
function verifnom(nom)
{
nomval=document.getElementById("nom").value;
nomval=nomval.toUpperCase()
var i=0;
while ((nomval.charAt(i)>="A" && nomval.charAt(i)<="Z" && i<nomval.length)||(nomval.charAt(i)==" ")
&& i<nomval.length)
i++;
if(i == nomval.length) alert ('nom correcte');

else alert ('nom incorrecte verifier les caracteres que vous avez ecrit');

Cours JavaScript Tous Les Seances-2 None Have This

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 Tous Les Seances-2 None Have This

Transféré par

Droits d'auteur :

Formats disponibles

Cours JavaScript

❑ JavaScript est le langage de programmation le plus populaire au monde.

❑ JavaScript est le langage de programmation du Web.

❑ JavaScript est facile à apprendre.

<script type="text/javascript" src="script.js"></script>

Code Javascript (contenu du ﬁchier script.js)

<p id="demo">JavaScript peut changer le contenu

Pour des objectifs de test on peu utiliser: document.write()

<button type="button" onclick="document.write(5

La méthode document.write() ne doit être utilisée que pour tester

<p>Cliquer sur F12 pour activer debugging.</p>

<td align="right"><input type="button" name="sous" id="sous" value="-"

<td align="right"><input type="button" name="mult" id="mult" value="x"

<td align="right"><input type="button" name="divi" id="divi" value="/"

Completer les autres functions: soustraction, multiplication, division

❑ La condition if (si) if (condition) {Traitement}

❑ La condition if… else (si… sinon) if (condition) {Traitement1} else {traitement2};

❑ La condition if… else if… else (si… sinon si… sinon).

.Teste si un objet est un nombre ou non

Teste une expression et retourne vrai si le résultat c'est un nombre fini.

Convertit une chaîne en nombre entier.

Convertit un nombre en chaîne

1- Au chargement de la page une boite de dialogue doit s’afficher et vous invite d’

Moyenne<14=<12 Assez bien

Moyenne<18=<16 Très bien

sinon moyenne incorrecte

5- Ajouter des styles CSS a votre choix pour

Ouvrir le dossier Application se trouvant sur C: et ouvrir la page Index.Html

La page doit être comme suit:

Div pour afficher le resulat

❑ De résoudre l’équation de second dégrée qui a la forme:

❑ Le résultat doit s’afficher dans le div que vous avez preparé

❑ Vérifier la valeur de delta

Si delta >0 alors deux solutions

Si delta =0 alors une solution

Est utilisé pour effectuer différentes actions en fonction de différentes conditions.

• L'expression switch est évaluée une fois.

<legend >Jours </legend>

Entrer le numero du jour <input type="text" name="jour"

Zone de texte qui doit contenir uniquement des lettres

Zone de texte qui doit contenir l’email avec forme correcte

Zone de texte qui doit contenir le numéro de téléphone qui

La confirmation du mot de passe doit être la même que

else if( genrev === "-1" )

else if (atpos < 1 || ( dotpos - atpos < 2 ))

else if( passwordv != password2v )

Les boucles sont pratiques si vous souhaitez exécuter le même code

Différents types de boucles

for - exécute un bloc de code un nombre ﬁnis de fois

while - exécute un bloc de code lorsqu'une condition spéciﬁée est

Boucle for une boucle avec 3 expressions facultatives :

.Expression 1 est exécuté (une fois) avant l'exécution du bloc de code

.Expression 2 définit la condition d'exécution du bloc de code

.Expression 3: est exécuté (à chaque fois) après l'exécution du bloc de code

<h2>JavaScript For Loop</h2>

for (let i = 0; i < 5; i++) {

❑ Normalement, vous utiliserez l'expression 1 pour initialiser la variable

❑ Ce n'est pas toujours le cas. JavaScript s'en fout. L'expression 1 est

❑ Vous pouvez initier plusieurs valeurs dans l'expression 1 (séparées

<h2>JavaScript For Loop</h2> Résultat

<h2>JavaScript For Loop</h2>

for (; i < len; i++) {

<h2>JavaScript While Loop</h2>